improve modal styles

dist/index.css

@@ -857,6 +857,9 @@ body[showing-chat] #chat-page-wrapper {
 }
 
 /* src/View/Components/splitModal.css */
+.modal > div:has(.split-modal[extended]) {
+  max-width: 64rem;
+}
 .split-modal {
   width: 100%;
   height: 100%;

dist/index.js

@@ -2751,7 +2751,8 @@
     settings: {
       pages: {
         appearance: "Appearance",
-        regional: "Language & Region"
+        regional: "Language+Region",
+        info: "About Comms"
       }
     },
     connectionModal: {
@@ -2950,6 +2951,13 @@
         addChatPlaceholder: "Chat hinzuf\xFCgen",
         addChatButton: "Chat hinzuf\xFCgen"
       },
+      settings: {
+        pages: {
+          appearance: "Erscheinungsbild",
+          regional: "Sprache+Region",
+          info: "\xDCber Comms"
+        }
+      },
       connectionModal: {
         connectionModalHeadline: "Verbindungen verwalten",
         connectButtonAudioLabel: "verbinden"
@@ -3129,6 +3137,13 @@
         addChatPlaceholder: "A\xF1adir chat",
         addChatButton: "A\xF1adir chat"
       },
+      settings: {
+        pages: {
+          appearance: "Aspecto",
+          regional: "Idioma+Regi\xF3n",
+          info: "Sobre Comms"
+        }
+      },
       connectionModal: {
         connectionModalHeadline: "Gestionar Conexiones",
         connectButtonAudioLabel: "conectar"
@@ -6235,8 +6250,8 @@
   };
 
   // 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(
+  function SplitModal(leftView, rightView, scrollButtonLabel, extendedStyle = false, navigationState) {
+    const view = /* @__PURE__ */ createElement("div", { class: "split-modal", "toggle:extended": extendedStyle }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "scroll-area", "children:set": leftView }), /* @__PURE__ */ createElement("div", { class: "detail-button-wrapper", "toggle:hidden": navigationState != void 0 }, /* @__PURE__ */ createElement("button", { class: "ghost", "on:click": scrollToDetails }, /* @__PURE__ */ createElement(
       "span",
       {
         class: "ellipsis",
@@ -6246,6 +6261,7 @@
     function scrollToDetails() {
       view.scrollLeft = view.scrollWidth;
     }
+    navigationState?.subscribe(scrollToDetails);
     return view;
   }
 
@@ -6281,7 +6297,7 @@
       if (isSelected.value == false) return;
       loadItems();
     });
-    return /* @__PURE__ */ createElement("div", { class: "flex-column" }, /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement(
       "button",
       {
         class: "width-100 flex-1 clip",
@@ -6292,7 +6308,7 @@
     ), /* @__PURE__ */ createElement(
       "div",
       {
-        class: "flex-column",
+        class: "flex-column gap",
         "children:append": [items, StringToDirectoryItemList]
       }
     ));
@@ -6327,10 +6343,11 @@
         ));
       }
     );
-    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": storageViewModel2.isShowingStorageModal }, /* @__PURE__ */ createElement("div", { style: "max-width: 64rem" }, /* @__PURE__ */ createElement("main", { class: "padding-0" }, SplitModal(
+    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": storageViewModel2.isShowingStorageModal }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", { class: "padding-0" }, SplitModal(
       new State(DirectoryItemList(storageViewModel2)),
       detailView,
-      storageViewModel2.selectedFileName
+      storageViewModel2.selectedFileName,
+      true
     )), /* @__PURE__ */ createElement("button", { "on:click": storageViewModel2.hideStorageModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
   }
 
@@ -6596,15 +6613,29 @@
         class: "modal",
         "toggle:open": settingsViewModel2.isShowingSettingsModal
       },
-      /* @__PURE__ */ createElement("div", { style: "max-width: 64rem" }, /* @__PURE__ */ createElement("main", { class: "padding-0" }, SplitModal(
+      /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", { class: "padding-0" }, SplitModal(
         new State(SettingsLeftPane(settingsViewModel2)),
         new State(/* @__PURE__ */ createElement("span", null, "settings")),
-        new State("")
+        new State(""),
+        false,
+        settingsViewModel2.selectedModalPage
       )), /* @__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));
+    return /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, SettingsPaneButton(
+      settingsViewModel2,
+      0 /* Appearance */,
+      translations.settings.pages.appearance
+    ), SettingsPaneButton(
+      settingsViewModel2,
+      1 /* Regional */,
+      translations.settings.pages.regional
+    ), SettingsPaneButton(
+      settingsViewModel2,
+      2 /* Info */,
+      translations.settings.pages.info
+    ));
   }
   function SettingsPaneButton(settingsViewModel2, page, label) {
     const isSelected = createProxyState(

src/View/Components/splitModal.css

@@ -1,3 +1,7 @@
+.modal>div:has(.split-modal[extended]) {
+    max-width: 64rem;
+}
+
 .split-modal {
     width: 100%;
     height: 100%;

src/View/Components/splitModal.tsx

@@ -6,12 +6,14 @@ export function SplitModal(
     leftView: React.State<Element>,
     rightView: React.State<Element>,
     scrollButtonLabel: React.State<string>,
+    extendedStyle: boolean = false,
+    navigationState?: React.State<any>,
 ) {
     const view = (
-        <div class="split-modal">
+        <div class="split-modal" toggle:extended={extendedStyle}>
             <div>
                 <div class="scroll-area" children:set={leftView}></div>
-                <div class="detail-button-wrapper">
+                <div class="detail-button-wrapper" toggle:hidden={navigationState != undefined}>
                     <button class="ghost" on:click={scrollToDetails}>
                         <span
                             class="ellipsis"
@@ -29,5 +31,7 @@ export function SplitModal(
         view.scrollLeft = view.scrollWidth;
     }
 
+    navigationState?.subscribe(scrollToDetails);
+
     return view;
 }

src/View/Modals/settingsModal.tsx

@@ -12,12 +12,14 @@ export function SettingsModal(settingsViewModel: SettingsViewModel) {
             class="modal"
             toggle:open={settingsViewModel.isShowingSettingsModal}
         >
-            <div style="max-width: 64rem">
+            <div>
                 <main class="padding-0">
                     {SplitModal(
                         new React.State(SettingsLeftPane(settingsViewModel)),
                         new React.State(<span>settings</span>),
                         new React.State(""),
+                        false,
+                        settingsViewModel.selectedModalPage,
                     )}
                 </main>
                 <button on:click={settingsViewModel.hideSettingsModal}>
@@ -31,7 +33,7 @@ export function SettingsModal(settingsViewModel: SettingsViewModel) {
 
 function SettingsLeftPane(settingsViewModel: SettingsViewModel) {
     return (
-        <div class="flex-column">
+        <div class="flex-column gap">
             {SettingsPaneButton(
                 settingsViewModel,
                 SettingsModalPages.Appearance,
@@ -42,6 +44,11 @@ function SettingsLeftPane(settingsViewModel: SettingsViewModel) {
                 SettingsModalPages.Regional,
                 translations.settings.pages.regional,
             )}
+            {SettingsPaneButton(
+                settingsViewModel,
+                SettingsModalPages.Info,
+                translations.settings.pages.info,
+            )}
         </div>
     );
 }

src/View/Modals/storageModal.tsx

@@ -64,12 +64,13 @@ export function StorageModal(storageViewModel: StorageViewModel) {
     );
     return (
         <div class="modal" toggle:open={storageViewModel.isShowingStorageModal}>
-            <div style="max-width: 64rem">
+            <div>
                 <main class="padding-0">
                     {SplitModal(
                         new React.State(DirectoryItemList(storageViewModel)),
                         detailView,
                         storageViewModel.selectedFileName,
+                        true,
                     )}
                 </main>
                 <button on:click={storageViewModel.hideStorageModal}>

src/View/translations.ts

@@ -80,6 +80,7 @@ const englishTranslations = {
         pages: {
             appearance: "Appearance",
             regional: "Language+Region",
+            info: "About Comms",
         },
     },
 
@@ -369,6 +370,7 @@ const allTranslations: { [language: string]: typeof englishTranslations } = {
             pages: {
                 appearance: "Erscheinungsbild",
                 regional: "Sprache+Region",
+            info: "Über Comms",
             },
         },
 
@@ -629,6 +631,7 @@ const allTranslations: { [language: string]: typeof englishTranslations } = {
             pages: {
                 appearance: "Aspecto",
                 regional: "Idioma+Región",
+                info: "Sobre Comms",
             },
         },
         connectionModal: {

src/ViewModel/Global/settingsViewModel.ts

@@ -65,4 +65,5 @@ export default class SettingsViewModel {
 export enum SettingsModalPages {
     Appearance,
     Regional,
+    Info,
 }