add file browser

src/View/Components/directoryItemList.tsx

@@ -0,0 +1,69 @@
+import * as React from "bloatless-react";
+
+import StorageModel from "../../Model/storageModel";
+import { translations } from "../translations";
+
+export function DirectoryItemList(
+  storageModel: StorageModel,
+  pathString: string,
+  selectedPath: React.State<string>
+) {
+  // converter
+  const StringToDirectoryItemList: React.StateItemConverter<string> = (
+    pathString: string
+  ) => DirectoryItemList(storageModel, pathString, selectedPath);
+
+  // data
+  const path = StorageModel.stringToPathComponents(pathString);
+  const fileName = path[path.length - 1] || "\\";
+  const items = new React.ListState<string>();
+
+  const style = `text-indent: ${path.length * 2}rem`;
+
+  // methods
+  function loadItems() {
+    items.clear();
+
+    const directoryItems = storageModel.list(path);
+
+    for (const directoryItem of directoryItems) {
+      const itemPath = [...path, directoryItem];
+      const pathString = StorageModel.pathComponentsToString(...itemPath);
+      items.add(pathString);
+    }
+  }
+
+  function select() {
+    selectedPath.value = pathString;
+  }
+
+  // state
+  const isSelected = React.createProxyState(
+    [selectedPath],
+    () => selectedPath.value == pathString
+  );
+
+  isSelected.subscribe(() => {
+    if (isSelected.value == false) return;
+    loadItems();
+  });
+
+  return (
+    <div class="flex-column">
+      <button
+        class="width-100 flex-1 clip"
+        toggle:selected={isSelected}
+        on:click={select}
+      >
+        <span class="ellipsis width-100 flex-1" style={style}>
+          {fileName}
+        </span>
+      </button>
+
+      <div
+        class="flex-column"
+        children:append={[items, StringToDirectoryItemList]}
+      ></div>
+    </div>
+  );
+}

src/View/Components/fileBrowser.css

@@ -0,0 +1,39 @@
+.file-browser {
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+
+  overflow-x: scroll;
+  overflow-y: hidden;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+}
+
+.file-browser > div {
+  width: 100%;
+  min-width: 100%;
+  flex: 0;
+
+  display: flex;
+  flex-direction: column;
+
+  padding: var(--content-padding);
+
+  scroll-snap-align: center;
+  overflow: auto;
+}
+
+.file-browser code {
+  width: 100%;
+  height: 100%;
+}
+
+@media (min-width: 640px) {
+  .file-browser > div {
+    width: 50%;
+    min-width: 50%;
+
+    flex: 1;
+  }
+}

src/View/Components/fileBrowser.tsx

@@ -0,0 +1,26 @@
+import "./fileBrowser.css";
+
+import * as React from "bloatless-react";
+
+import { DirectoryItemList } from "./directoryItemList";
+import StorageModel from "../../Model/storageModel";
+
+export function FileBrowser(
+  storageModel: StorageModel,
+  selectedPath: React.State<string>
+) {
+  const fileContent = React.createProxyState([selectedPath], () => {
+    const path = StorageModel.stringToPathComponents(selectedPath.value);
+    const content = storageModel.restore(path);
+    return content || "";
+  });
+
+  return (
+    <div class="file-browser">
+      {DirectoryItemList(storageModel, "\\", selectedPath)}
+      <div>
+        <code subscribe:innerText={fileContent}></code>
+      </div>
+    </div>
+  );
+}