move split modal to modals directory

src/View/Modals/settingsModal.tsx

@@ -4,7 +4,7 @@ import { languageNames } from "../translations";
 import SettingsViewModel, {
     SettingsModalPages,
 } from "../../ViewModel/Global/settingsViewModel";
-import { SplitModal } from "../Components/splitModal";
+import { SplitModal } from "./splitModal";
 import { InfoTile } from "../Components/infoTile";
 import { Option } from "../Components/option";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";

src/View/Modals/splitModal.css

@@ -0,0 +1,108 @@
+.modal > div:has(.split-modal[extended]) {
+    max-width: 64rem;
+}
+
+.split-modal {
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+
+    overflow-x: scroll;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scroll-snap-type: x mandatory;
+}
+
+.split-modal > div {
+    width: 100%;
+    min-width: calc(100% - 4rem);
+    flex: 0;
+
+    scroll-snap-align: center;
+}
+
+.split-modal > div,
+.split-modal > div > .scroll-area {
+    width: 100%;
+
+    display: flex;
+    flex-direction: column;
+
+    align-items: stretch;
+    justify-content: start;
+}
+
+.split-modal[navigation]:not([page-open]) > div {
+    justify-content: safe center;
+}
+
+.split-modal[navigation] > div {
+    min-width: 100%;
+}
+
+.split-modal .scroll-area {
+    flex: 1;
+    width: 100%;
+    overflow-y: auto;
+
+    padding: var(--content-padding);
+}
+
+.split-modal[navigation] > div:nth-child(2) > .flex-row > button {
+    transform: translateX(calc(-1 * var(--content-padding)));
+}
+
+.split-modal .detail-button-wrapper {
+    display: flex;
+    justify-content: end;
+
+    border-top: 1px solid var(--border);
+    padding: var(--content-padding);
+}
+
+.split-modal .detail-button-wrapper button {
+    max-width: 100%;
+}
+
+.split-modal code {
+    width: 100%;
+    height: 100%;
+
+    font-size: 0.9rem;
+}
+
+@media (min-width: 640px) {
+    .split-modal > div {
+        flex: 1;
+        min-width: unset;
+    }
+
+    .split-modal[navigation] > div {
+        min-width: unset;
+    }
+
+    .split-modal[navigation] > div:first-child {
+        flex: 0;
+        min-width: 20rem;
+    }
+
+    .split-modal:not([navigation]) > div {
+        width: 50%;
+        min-width: 50%;
+    }
+
+    .split-modal .detail-button-wrapper {
+        display: none;
+    }
+}
+
+@media (max-width: 640px) {
+    .split-modal[navigation]:not([page-open]) > div:nth-child(2) {
+        display: none;
+    }
+
+    .split-modal[navigation][page-open] > div:first-child {
+        display: none;
+    }
+}

src/View/Modals/splitModal.tsx

@@ -0,0 +1,53 @@
+import CoreViewModel from "../../ViewModel/Global/coreViewModel";
+import "./splitModal.css";
+
+import * as React from "bloatless-react";
+
+export function SplitModal<T>(
+    coreViewModel: CoreViewModel,
+    leftView: React.State<Element>,
+    rightView: React.State<Element>,
+    extendedStyle: boolean = false,
+    navigationState?: React.State<T | undefined>,
+) {
+    function closePage() {
+        navigationState.value = undefined;
+    }
+
+    const hasPageOpen = new React.State<boolean>(false);
+    navigationState?.subscribe(
+        (newValue) => (hasPageOpen.value = newValue != undefined),
+    );
+
+    const view = (
+        <div
+            class="split-modal"
+            toggle:extended={extendedStyle}
+            toggle:navigation={navigationState != undefined}
+            toggle:page-open={hasPageOpen}
+        >
+            <div>
+                <div class="scroll-area" children:set={leftView}></div>
+            </div>
+            <div class="scroll-area slide-up">
+                <div
+                    class="flex-row width-100 mobile-only"
+                    toggle:hidden={navigationState == undefined}
+                >
+                    <button
+                        class="ghost square"
+                        aria-label={
+                            coreViewModel.translations.general.backButton
+                        }
+                        on:click={closePage}
+                    >
+                        <span class="icon">arrow_back</span>
+                    </button>
+                </div>
+                <div children:set={rightView}></div>
+            </div>
+        </div>
+    );
+
+    return view;
+}

src/View/Modals/storageModal.tsx

@@ -3,7 +3,7 @@ import * as React from "bloatless-react";
 import { PATH_COMPONENT_SEPARATOR } from "../../Model/Global/storageModel";
 import StorageViewModel from "../../ViewModel/Global/storageViewModel";
 
-import { SplitModal } from "../Components/splitModal";
+import { SplitModal } from "./splitModal";
 import { DangerousActionButton } from "../Components/dangerousActionButton";
 import { DirectoryItemList } from "../Components/directoryItemList";
 import CoreViewModel from "../../ViewModel/Global/coreViewModel";