add NavigationButton component, use in settings

dist/index.js

@@ -6834,6 +6834,19 @@
     );
   }
 
+  // src/View/Components/navigationButton.tsx
+  function NavigationButton(coreViewModel2, label, navigationState, page, arrowMobileOnly) {
+    const isSelected = createProxyState(
+      [navigationState],
+      () => navigationState.value == page
+    );
+    function open() {
+      navigationState.value = page;
+    }
+    const iconClass = `icon ${arrowMobileOnly == true ? "mobile-only" : ""}`;
+    return /* @__PURE__ */ createElement("button", { "toggle:selected": isSelected, "on:click": open }, label, /* @__PURE__ */ createElement("span", { class: iconClass }, "arrow_forward"));
+  }
+
   // src/View/Modals/settingsModal.tsx
   function SettingsModal(coreViewModel2, settingsViewModel2) {
     const detailView = createProxyState(
@@ -6879,31 +6892,29 @@
   }
   function SettingsLeftPane(coreViewModel2, settingsViewModel2) {
     return /* @__PURE__ */ createElement("div", { class: "flex-column gap slide-up" }, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.homePage.settingsButton), SettingsPaneButton(
+      coreViewModel2,
       settingsViewModel2,
       0 /* Appearance */,
       coreViewModel2.translations.settings.pages.appearance
     ), SettingsPaneButton(
+      coreViewModel2,
       settingsViewModel2,
       1 /* Regional */,
       coreViewModel2.translations.settings.pages.regional
     ), SettingsPaneButton(
+      coreViewModel2,
       settingsViewModel2,
       2 /* Info */,
       coreViewModel2.translations.settings.pages.info
     ));
   }
-  function SettingsPaneButton(settingsViewModel2, page, label) {
+  function SettingsPaneButton(coreViewModel2, settingsViewModel2, page, label) {
-    const isSelected = createProxyState(
+    return NavigationButton(
-      [settingsViewModel2.selectedModalPage],
+      coreViewModel2,
-      () => settingsViewModel2.selectedModalPage.value == page
+      label,
-    );
+      settingsViewModel2.selectedModalPage,
-    return /* @__PURE__ */ createElement(
+      page,
-      "button",
+      true
-      {
-        "toggle:selected": isSelected,
-        "on:click": () => settingsViewModel2.showModalPage(page)
-      },
-      label
     );
   }
   function SettingsInfoPane(coreViewModel2, settingsViewModel2) {

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(
+    return NavigationButton(
-        [settingsViewModel.selectedModalPage],
+        coreViewModel,
-        () => settingsViewModel.selectedModalPage.value == page,
+        label,
-    );
+        settingsViewModel.selectedModalPage,
-
+        page,
-    return (
+        true
-        <button
-            toggle:selected={isSelected}
-            on:click={() => settingsViewModel.showModalPage(page)}
-        >
-            {label}
-        </button>
     );
 }