prepare settings modal navigation

src/View/Components/fileBrowser.tsx

@@ -1,93 +0,0 @@
-import "./fileBrowser.css";
-
-import * as React from "bloatless-react";
-
-import { DangerousActionButton } from "./dangerousActionButton";
-import { DirectoryItemList } from "./directoryItemList";
-import { PATH_COMPONENT_SEPARATOR } from "../../Model/Global/storageModel";
-import StorageViewModel from "../../ViewModel/Global/storageViewModel";
-import { translations } from "../translations";
-
-export function FileBrowser(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>
-            );
-        },
-    );
-
-    const view = (
-        <div class="file-browser">
-            <div>
-                <div class="scroll-area">
-                    {DirectoryItemList(storageViewModel)}
-                </div>
-                <div class="detail-button-wrapper">
-                    <button class="ghost" on:click={scrollToDetails}>
-                        <span
-                            class="ellipsis"
-                            subscribe:innerText={
-                                storageViewModel.selectedFileName
-                            }
-                        ></span>
-                        <span class="icon">arrow_forward</span>
-                    </button>
-                </div>
-            </div>
-            <div class="scroll-area" children:set={detailView}></div>
-        </div>
-    );
-
-    function scrollToDetails() {
-        view.scrollLeft = view.scrollWidth;
-    }
-
-    return view;
-}

src/View/Components/splitModal.css

@@ -1,4 +1,4 @@
-.file-browser {
+.split-modal {
     width: 100%;
     height: 100%;
 
@@ -10,7 +10,7 @@
     scroll-snap-type: x mandatory;
 }
 
-.file-browser > div {
+.split-modal > div {
     display: flex;
     flex-direction: column;
 
@@ -21,7 +21,7 @@
     scroll-snap-align: center;
 }
 
-.file-browser .scroll-area {
+.split-modal .scroll-area {
     flex: 1;
     width: 100%;
     overflow-y: auto;
@@ -29,7 +29,7 @@
     padding: var(--content-padding);
 }
 
-.file-browser .detail-button-wrapper {
+.split-modal .detail-button-wrapper {
     display: flex;
     justify-content: end;
 
@@ -37,11 +37,11 @@
     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%;
 
@@ -49,14 +49,14 @@
 }
 
 @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;
     }
 }

src/View/Components/splitModal.tsx

@@ -0,0 +1,33 @@
+import "./splitModal.css";
+
+import * as React from "bloatless-react";
+
+export function SplitModal(
+    leftView: React.State<Element>,
+    rightView: React.State<Element>,
+    scrollButtonLabel: React.State<string>,
+) {
+    const view = (
+        <div class="split-modal">
+            <div>
+                <div class="scroll-area" children:set={leftView}></div>
+                <div class="detail-button-wrapper">
+                    <button class="ghost" on:click={scrollToDetails}>
+                        <span
+                            class="ellipsis"
+                            subscribe:innerText={scrollButtonLabel}
+                        ></span>
+                        <span class="icon">arrow_forward</span>
+                    </button>
+                </div>
+            </div>
+            <div class="scroll-area" children:set={rightView}></div>
+        </div>
+    );
+
+    function scrollToDetails() {
+        view.scrollLeft = view.scrollWidth;
+    }
+
+    return view;
+}