prepare settings modal navigation

dist/index.css

@@ -856,8 +856,8 @@ body[showing-chat] #chat-page-wrapper {
   }
 }
 
-/* src/View/Components/fileBrowser.css */
-.file-browser {
+/* src/View/Components/splitModal.css */
+.split-modal {
   width: 100%;
   height: 100%;
   display: flex;
@@ -866,7 +866,7 @@ body[showing-chat] #chat-page-wrapper {
   scroll-behavior: smooth;
   scroll-snap-type: x mandatory;
 }
-.file-browser > div {
+.split-modal > div {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -874,33 +874,33 @@ body[showing-chat] #chat-page-wrapper {
   flex: 0;
   scroll-snap-align: center;
 }
-.file-browser .scroll-area {
+.split-modal .scroll-area {
   flex: 1;
   width: 100%;
   overflow-y: auto;
   padding: var(--content-padding);
 }
-.file-browser .detail-button-wrapper {
+.split-modal .detail-button-wrapper {
   display: flex;
   justify-content: end;
   border-top: 1px solid var(--border);
   padding: var(--content-padding);
 }
-.file-browser .detail-button-wrapper button {
+.split-modal .detail-button-wrapper button {
   max-width: 100%;
 }
-.file-browser code {
+.split-modal code {
   width: 100%;
   height: 100%;
   font-size: 0.9rem;
 }
 @media (min-width: 640px) {
-  .file-browser > div {
+  .split-modal > div {
     width: 50%;
     min-width: 50%;
     flex: 1;
   }
-  .file-browser .detail-button-wrapper {
+  .split-modal .detail-button-wrapper {
     display: none;
   }
 }

dist/index.js

@@ -2748,6 +2748,12 @@
       addChatPlaceholder: "Add chat",
       addChatButton: "Add chat"
     },
+    settings: {
+      pages: {
+        appearance: "Appearance",
+        regional: "Language & Region"
+      }
+    },
     connectionModal: {
       connectionModalHeadline: "Manage Connections",
       ///
@@ -6194,6 +6200,9 @@
       this.usernameInput = new State("");
       this.firstDayOfWeekInput = new State("0");
       this.isShowingSettingsModal = new State(false);
+      this.selectedModalPage = new State(
+        0 /* Appearance */
+      );
       // guards
       this.cannotSetName = createProxyState(
         [this.usernameInput],
@@ -6214,6 +6223,9 @@
       this.hideSettingsModal = () => {
         this.isShowingSettingsModal.value = false;
       };
+      this.showModalPage = (page) => {
+        this.selectedModalPage.value = page;
+      };
       this.settingsModel = settingsModel2;
       this.username.value = settingsModel2.username;
       this.usernameInput.value = settingsModel2.username;
@@ -6222,6 +6234,21 @@
     }
   };
 
+  // src/View/Components/splitModal.tsx
+  function SplitModal(leftView, rightView, scrollButtonLabel) {
+    const view = /* @__PURE__ */ createElement("div", { class: "split-modal" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "scroll-area", "children:set": leftView }), /* @__PURE__ */ createElement("div", { class: "detail-button-wrapper" }, /* @__PURE__ */ createElement("button", { class: "ghost", "on:click": scrollToDetails }, /* @__PURE__ */ createElement(
+      "span",
+      {
+        class: "ellipsis",
+        "subscribe:innerText": scrollButtonLabel
+      }
+    ), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")))), /* @__PURE__ */ createElement("div", { class: "scroll-area", "children:set": rightView }));
+    function scrollToDetails() {
+      view.scrollLeft = view.scrollWidth;
+    }
+    return view;
+  }
+
   // src/View/Components/directoryItemList.tsx
   function DirectoryItemList(storageViewModel2, pathString = PATH_COMPONENT_SEPARATOR) {
     const StringToDirectoryItemList = (pathString2) => DirectoryItemList(storageViewModel2, pathString2);
@@ -6271,8 +6298,8 @@
     ));
   }
 
-  // src/View/Components/fileBrowser.tsx
-  function FileBrowser(storageViewModel2) {
+  // src/View/Modals/storageModal.tsx
+  function StorageModal(storageViewModel2) {
     const detailView = createProxyState(
       [storageViewModel2.selectedPath],
       () => {
@@ -6300,22 +6327,11 @@
         ));
       }
     );
-    const view = /* @__PURE__ */ createElement("div", { class: "file-browser" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "scroll-area" }, DirectoryItemList(storageViewModel2)), /* @__PURE__ */ createElement("div", { class: "detail-button-wrapper" }, /* @__PURE__ */ createElement("button", { class: "ghost", "on:click": scrollToDetails }, /* @__PURE__ */ createElement(
-      "span",
-      {
-        class: "ellipsis",
-        "subscribe:innerText": storageViewModel2.selectedFileName
-      }
-    ), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")))), /* @__PURE__ */ createElement("div", { class: "scroll-area", "children:set": detailView }));
-    function scrollToDetails() {
-      view.scrollLeft = view.scrollWidth;
-    }
-    return view;
-  }
-
-  // src/View/Modals/storageModal.tsx
-  function StorageModal(storageViewModel2) {
-    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": storageViewModel2.isShowingStorageModal }, /* @__PURE__ */ createElement("div", { style: "max-width: 64rem" }, /* @__PURE__ */ createElement("main", { class: "padding-0" }, FileBrowser(storageViewModel2)), /* @__PURE__ */ createElement("button", { "on:click": storageViewModel2.hideStorageModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
+    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": storageViewModel2.isShowingStorageModal }, /* @__PURE__ */ createElement("div", { style: "max-width: 64rem" }, /* @__PURE__ */ createElement("main", { class: "padding-0" }, SplitModal(
+      new State(DirectoryItemList(storageViewModel2)),
+      detailView,
+      storageViewModel2.selectedFileName
+    )), /* @__PURE__ */ createElement("button", { "on:click": storageViewModel2.hideStorageModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
   }
 
   // src/ViewModel/Global/storageViewModel.ts
@@ -6574,7 +6590,35 @@
 
   // src/View/Modals/settingsModal.tsx
   function SettingsModal(settingsViewModel2) {
-    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": settingsViewModel2.isShowingSettingsModal }, /* @__PURE__ */ createElement("div", { style: "max-width: 64rem" }, /* @__PURE__ */ createElement("main", { class: "padding-0" }), /* @__PURE__ */ createElement("button", { "on:click": settingsViewModel2.hideSettingsModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
+    return /* @__PURE__ */ createElement(
+      "div",
+      {
+        class: "modal",
+        "toggle:open": settingsViewModel2.isShowingSettingsModal
+      },
+      /* @__PURE__ */ createElement("div", { style: "max-width: 64rem" }, /* @__PURE__ */ createElement("main", { class: "padding-0" }, SplitModal(
+        new State(SettingsLeftPane(settingsViewModel2)),
+        new State(/* @__PURE__ */ createElement("span", null, "settings")),
+        new State("")
+      )), /* @__PURE__ */ createElement("button", { "on:click": settingsViewModel2.hideSettingsModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close")))
+    );
+  }
+  function SettingsLeftPane(settingsViewModel2) {
+    return /* @__PURE__ */ createElement("div", { class: "flex-column" }, SettingsPaneButton(settingsViewModel2, 0 /* Appearance */, translations.settings.pages.appearance), SettingsPaneButton(settingsViewModel2, 1 /* Regional */, translations.settings.pages.regional));
+  }
+  function SettingsPaneButton(settingsViewModel2, page, label) {
+    const isSelected = createProxyState(
+      [settingsViewModel2.selectedModalPage],
+      () => settingsViewModel2.selectedModalPage.value == page
+    );
+    return /* @__PURE__ */ createElement(
+      "button",
+      {
+        "toggle:selected": isSelected,
+        "on:click": () => settingsViewModel2.showModalPage(page)
+      },
+      label
+    );
   }
 
   // src/index.tsx