improve UI of split modals

src/View/Components/splitModal.tsx

@@ -1,31 +1,53 @@
+import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 import "./splitModal.css";
 
 import * as React from "bloatless-react";
 
-export function SplitModal(
+export function SplitModal<T>(
+    coreViewModel: CoreViewModel,
     leftView: React.State<Element>,
     rightView: React.State<Element>,
     extendedStyle: boolean = false,
-    navigationState?: React.State<any>,
+    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:primitive={navigationState == undefined}
+            toggle:navigation={navigationState != undefined}
+            toggle:page-open={hasPageOpen}
         >
             <div>
                 <div class="scroll-area" children:set={leftView}></div>
             </div>
-            <div class="scroll-area" children:set={rightView}></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>
     );
 
-    function scrollToDetails() {
-        view.scrollLeft = view.scrollWidth;
-    }
-
-    navigationState?.subscribe(scrollToDetails);
-
     return view;
 }