prepare settings modal navigation

src/View/Modals/settingsModal.tsx

@@ -1,15 +1,25 @@
 import * as React from "bloatless-react";
 
-import { FileBrowser } from "../Components/fileBrowser";
-import StorageViewModel from "../../ViewModel/Global/storageViewModel";
 import { translations } from "../translations";
-import SettingsViewModel from "../../ViewModel/Global/settingsViewModel";
+import SettingsViewModel, {
+    SettingsModalPages,
+} from "../../ViewModel/Global/settingsViewModel";
+import { SplitModal } from "../Components/splitModal";
 
 export function SettingsModal(settingsViewModel: SettingsViewModel) {
     return (
-        <div class="modal" toggle:open={settingsViewModel.isShowingSettingsModal}>
+        <div
+            class="modal"
+            toggle:open={settingsViewModel.isShowingSettingsModal}
+        >
             <div style="max-width: 64rem">
-                <main class="padding-0"></main>
+                <main class="padding-0">
+                    {SplitModal(
+                        new React.State(SettingsLeftPane(settingsViewModel)),
+                        new React.State(<span>settings</span>),
+                        new React.State(""),
+                    )}
+                </main>
                 <button on:click={settingsViewModel.hideSettingsModal}>
                     {translations.general.closeButton}
                     <span class="icon">close</span>
@@ -18,3 +28,40 @@ export function SettingsModal(settingsViewModel: SettingsViewModel) {
         </div>
     );
 }
+
+function SettingsLeftPane(settingsViewModel: SettingsViewModel) {
+    return (
+        <div class="flex-column">
+            {SettingsPaneButton(
+                settingsViewModel,
+                SettingsModalPages.Appearance,
+                translations.settings.pages.appearance,
+            )}
+            {SettingsPaneButton(
+                settingsViewModel,
+                SettingsModalPages.Regional,
+                translations.settings.pages.regional,
+            )}
+        </div>
+    );
+}
+
+function SettingsPaneButton(
+    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>
+    );
+}

src/View/Modals/storageModal.tsx

@@ -1,14 +1,77 @@
 import * as React from "bloatless-react";
 
-import { FileBrowser } from "../Components/fileBrowser";
+import { PATH_COMPONENT_SEPARATOR } from "../../Model/Global/storageModel";
 import StorageViewModel from "../../ViewModel/Global/storageViewModel";
 import { translations } from "../translations";
 
+import { SplitModal } from "../Components/splitModal";
+import { DangerousActionButton } from "../Components/dangerousActionButton";
+import { DirectoryItemList } from "../Components/directoryItemList";
+
 export function StorageModal(storageViewModel: StorageViewModel) {
+    const detailView = React.createProxyState(
+        [storageViewModel.selectedPath],
+        () => {
+            if (storageViewModel.selectedPath.value == PATH_COMPONENT_SEPARATOR)
+                return (
+                    <div>
+                        <span class="secondary">
+                            {translations.storage.noItemSelected}
+                        </span>
+
+                        <hr></hr>
+
+                        {DangerousActionButton(
+                            translations.storage.removeJunkButton,
+                            "delete_forever",
+                            storageViewModel.removeJunk,
+                        )}
+                    </div>
+                );
+
+            return (
+                <div class="flex-column gap">
+                    <div class="tile flex-no">
+                        <div>
+                            <b>{translations.storage.path}</b>
+                            <span
+                                class="break-all"
+                                subscribe:innerText={
+                                    storageViewModel.selectedPath
+                                }
+                            ></span>
+                        </div>
+                    </div>
+                    <div class="tile flex-no">
+                        <div>
+                            <b>{translations.storage.content}</b>
+                            <code
+                                subscribe:innerText={
+                                    storageViewModel.selectedFileContent
+                                }
+                            ></code>
+                        </div>
+                    </div>
+
+                    {DangerousActionButton(
+                        translations.storage.deleteItem,
+                        "delete_forever",
+                        storageViewModel.deleteSelectedItem,
+                    )}
+                </div>
+            );
+        },
+    );
     return (
         <div class="modal" toggle:open={storageViewModel.isShowingStorageModal}>
             <div style="max-width: 64rem">
-                <main class="padding-0">{FileBrowser(storageViewModel)}</main>
+                <main class="padding-0">
+                    {SplitModal(
+                        new React.State(DirectoryItemList(storageViewModel)),
+                        detailView,
+                        storageViewModel.selectedFileName,
+                    )}
+                </main>
                 <button on:click={storageViewModel.hideStorageModal}>
                     {translations.general.closeButton}
                     <span class="icon">close</span>