prepare fileBrowser layout on mobile

src/View/Components/directoryItemList.tsx

@@ -15,7 +15,7 @@ export function DirectoryItemList(
 
   // data
   const path = StorageModel.stringToPathComponents(pathString);
-  const fileName = path[path.length - 1] || "\\";
+  const fileName = StorageModel.getFileName(path);
   const items = new React.ListState<string>();
 
   const style = `text-indent: ${path.length * 2}rem`;

src/View/Components/fileBrowser.css

@@ -11,17 +11,35 @@
 }
 
 .file-browser > div {
+  display: flex;
+  flex-direction: column;
+
   width: 100%;
   min-width: 100%;
   flex: 0;
 
-  display: flex;
-  flex-direction: column;
+  scroll-snap-align: center;
+}
+
+.file-browser .scroll-area {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
 
   padding: var(--content-padding);
+}
 
-  scroll-snap-align: center;
-  overflow: auto;
+.file-browser .detail-button-wrapper {
+  display: flex;
+  justify-content: end;
+
+  border-top: 1px solid var(--border);
+  padding: var(--content-padding);
+}
+
+.file-browser .detail-button-wrapper button {
+  max-width: 100%;
 }
 
 .file-browser code {
@@ -36,4 +54,8 @@
 
     flex: 1;
   }
+
+  .file-browser .detail-button-wrapper {
+    display: none;
+  }
 }

src/View/Components/fileBrowser.tsx

@@ -2,25 +2,60 @@ import "./fileBrowser.css";
 
 import * as React from "bloatless-react";
 
+import StorageModel, {
+  PATH_COMPONENT_SEPARATOR,
+} from "../../Model/storageModel";
+
 import { DirectoryItemList } from "./directoryItemList";
-import StorageModel from "../../Model/storageModel";
 
 export function FileBrowser(
   storageModel: StorageModel,
   selectedPath: React.State<string>
 ) {
+  // state
   const fileContent = React.createProxyState([selectedPath], () => {
     const path = StorageModel.stringToPathComponents(selectedPath.value);
     const content = storageModel.restore(path);
     return content || "";
   });
 
-  return (
+  const selectedFileName = React.createProxyState(
+    [selectedPath],
+    () =>
+      StorageModel.getFileNameFromString(selectedPath.value) ??
+      PATH_COMPONENT_SEPARATOR
+  );
+
+  // view
+  const view = (
     <div class="file-browser">
-      {DirectoryItemList(storageModel, "\\", selectedPath)}
       <div>
+        <div class="scroll-area">
+          {DirectoryItemList(
+            storageModel,
+            PATH_COMPONENT_SEPARATOR,
+            selectedPath
+          )}
+        </div>
+        <div class="detail-button-wrapper">
+          <button class="ghost" on:click={scrollToDetails}>
+            <span
+              class="ellipsis"
+              subscribe:innerText={selectedFileName}
+            ></span>
+            <span class="icon">arrow_forward</span>
+          </button>
+        </div>
+      </div>
+      <div class="scroll-area">
         <code subscribe:innerText={fileContent}></code>
       </div>
     </div>
   );
+
+  function scrollToDetails() {
+    view.scrollLeft = view.scrollWidth;
+  }
+
+  return view;
 }