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>
+  );
+}

src/View/Modals/storageModal.tsx

@@ -0,0 +1,26 @@
+import * as React from "bloatless-react";
+
+import { DirectoryItemList } from "../Components/directoryItemList";
+import { FileBrowser } from "../Components/fileBrowser";
+import StorageModel from "../../Model/storageModel";
+import StorageViewModel from "../../ViewModel/storageViewModel";
+import { translations } from "../translations";
+
+export function StorageModal(storageViewModel: StorageViewModel) {
+  return (
+    <div class="modal" toggle:open={storageViewModel.isShowingStorageModal}>
+      <div style="max-width: 64rem">
+        <main class="padding-0">
+          {FileBrowser(
+            storageViewModel.storageModel,
+            storageViewModel.selectedPath
+          )}
+        </main>
+        <button on:click={storageViewModel.hideStorageModal}>
+          {translations.general.closeButton}
+          <span class="icon">close</span>
+        </button>
+      </div>
+    </div>
+  );
+}

src/View/homePage.tsx

@@ -8,9 +8,11 @@ import ChatListViewModel from "../ViewModel/chatListViewModel";
 import { ChatViewModelToChatEntry } from "./Components/chatEntry";
 import ConnectionViewModel from "../ViewModel/connectionViewModel";
 import SettingsViewModel from "../ViewModel/settingsViewModel";
+import StorageViewModel from "../ViewModel/storageViewModel";
 import { translations } from "./translations";
 
 export function HomePage(
+  storageViewModel: StorageViewModel,
   settingsViewModel: SettingsViewModel,
   connectionViewModel: ConnectionViewModel,
   chatListViewModel: ChatListViewModel
@@ -112,6 +114,15 @@ export function HomePage(
         </div>
       </label>
 
+      <hr></hr>
+
+      <button class="tile flex-no" on:click={storageViewModel.showStorageModal}>
+        <span class="icon">hard_drive_2</span>
+        <div>
+          <span>{translations.homePage.manageStorageButton}</span>
+        </div>
+      </button>
+
       <div class="mobile-only">
         <hr></hr>
 
@@ -148,7 +159,10 @@ export function HomePage(
 
       <div
         id="chat-grid"
-        children:append={[chatListViewModel.chatViewModels, ChatViewModelToChatEntry]}
+        children:append={[
+          chatListViewModel.chatViewModels,
+          ChatViewModelToChatEntry,
+        ]}
       ></div>
     </div>
   );

src/View/translations.ts

@@ -40,6 +40,8 @@ const englishTranslations = {
 
     firstDayOfWeekLabel: "First day of week",
 
+    manageStorageButton: "Manage storage",
+
     scrollToChatButton: "Chats",
 
     ///
@@ -106,7 +108,7 @@ const englishTranslations = {
       resendMessageButton: "Resend message",
       decryptMessageButton: "Decrypt message",
       deleteMessageButton: "Delete message",
-    }
+    },
   },
 };