move split modal to modals directory

src/View/Components/splitModal.css

@@ -1,108 +0,0 @@
-.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/Components/splitModal.tsx

@@ -1,53 +0,0 @@
-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;
-}