add NavigationButton component, use in settings

src/View/Components/navigationButton.tsx

@@ -0,0 +1,29 @@
+import * as React from "bloatless-react";
+import CoreViewModel from "../../ViewModel/Global/coreViewModel";
+
+export function NavigationButton<T>(
+    coreViewModel: CoreViewModel,
+    label: string,
+    navigationState: React.State<T | undefined>,
+    page: T,
+    arrowMobileOnly?: boolean,
+) {
+    const isSelected = React.createProxyState(
+        [navigationState],
+        () => navigationState.value == page,
+    );
+
+    function open() {
+        navigationState.value = page;
+    }
+
+    const iconClass = `icon ${arrowMobileOnly == true ? "mobile-only" : ""}`;
+
+    return (
+        <button toggle:selected={isSelected} on:click={open}>
+            {label}
+
+            <span class={iconClass}>arrow_forward</span>
+        </button>
+    );
+}

src/View/Components/splitModal.css

@@ -34,7 +34,7 @@
 }
 
 .split-modal[navigation] > div,
-.split-modal[navigation] > div > .scroll-area{
+.split-modal[navigation] > div > .scroll-area {
     justify-content: start;
 }
 

src/View/Modals/settingsModal.tsx

@@ -12,6 +12,7 @@ import { Languages, ThemeSettings } from "../../Model/Global/settingsModel";
 import { OptionButtonList } from "../Components/optionButtonList";
 import { stringify } from "../../Model/Utility/utility";
 import { PlaceholderView } from "../Components/placeholderView";
+import { NavigationButton } from "../Components/navigationButton";
 
 export function SettingsModal(
     coreViewModel: CoreViewModel,
@@ -76,16 +77,19 @@ function SettingsLeftPane(
         <div class="flex-column gap slide-up">
             <h2>{coreViewModel.translations.homePage.settingsButton}</h2>
             {SettingsPaneButton(
+                coreViewModel,
                 settingsViewModel,
                 SettingsModalPages.Appearance,
                 coreViewModel.translations.settings.pages.appearance,
             )}
             {SettingsPaneButton(
+                coreViewModel,
                 settingsViewModel,
                 SettingsModalPages.Regional,
                 coreViewModel.translations.settings.pages.regional,
             )}
             {SettingsPaneButton(
+                coreViewModel,
                 settingsViewModel,
                 SettingsModalPages.Info,
                 coreViewModel.translations.settings.pages.info,
@@ -95,22 +99,17 @@ function SettingsLeftPane(
 }
 
 function SettingsPaneButton(
+    coreViewModel: CoreViewModel,
     settingsViewModel: SettingsViewModel,
     page: SettingsModalPages,
     label: string,
 ) {
-    const isSelected = React.createProxyState(
-        [settingsViewModel.selectedModalPage],
-        () => settingsViewModel.selectedModalPage.value == page,
-    );
-
-    return (
-        <button
-            toggle:selected={isSelected}
-            on:click={() => settingsViewModel.showModalPage(page)}
-        >
-            {label}
-        </button>
+    return NavigationButton(
+        coreViewModel,
+        label,
+        settingsViewModel.selectedModalPage,
+        page,
+        true
     );
 }