show path of selected item in filebrowser

dist/index.css

@@ -525,6 +525,7 @@ body[showing-chat] #chat-page-wrapper {
 .file-browser code {
   width: 100%;
   height: 100%;
+  font-size: .9rem;
 }
 @media (min-width: 640px) {
   .file-browser > div {

dist/index.js

@@ -1143,6 +1143,13 @@
       ///
       connectButtonAudioLabel: "connect"
     },
+    fileBrowser: {
+      noItemSelected: "No item selected",
+      notAFile: "(not a file)",
+      contentEmpty: "(empty)",
+      path: "Path",
+      content: "Content"
+    },
     chatPage: {
       closeChatAudioLabe: "close chat",
       chatSettingsAudioLabel: "chat settings",
@@ -2129,16 +2136,21 @@
   }
 
   // src/View/Components/fileBrowser.tsx
-  function FileBrowser(storageModel2, selectedPath) {
+  function FileBrowser(storageModel2, selectedPath, didMakeChanges) {
-    const fileContent = createProxyState([selectedPath], () => {
+    const fileContentToShow = createProxyState([selectedPath], () => {
       const path = StorageModel.stringToPathComponents(selectedPath.value);
       const content = storageModel2.restore(path);
-      return content || "";
+      return (content ?? translations.fileBrowser.notAFile) || translations.fileBrowser.contentEmpty;
     });
     const selectedFileName = createProxyState(
       [selectedPath],
       () => StorageModel.getFileNameFromString(selectedPath.value) ?? PATH_COMPONENT_SEPARATOR
     );
+    const detailView = createProxyState([selectedPath], () => {
+      if (selectedPath.value == PATH_COMPONENT_SEPARATOR)
+        return /* @__PURE__ */ createElement("span", { class: "secondary" }, translations.fileBrowser.noItemSelected);
+      return /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("div", { class: "tile flex-no" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translations.fileBrowser.path), /* @__PURE__ */ createElement("span", { class: "break-all", "subscribe:innerText": selectedPath }))), /* @__PURE__ */ createElement("div", { class: "tile flex-no" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translations.fileBrowser.content), /* @__PURE__ */ createElement("code", { "subscribe:innerText": fileContentToShow }))));
+    });
     const view = /* @__PURE__ */ createElement("div", { class: "file-browser" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "scroll-area" }, DirectoryItemList(
       storageModel2,
       PATH_COMPONENT_SEPARATOR,
@@ -2149,7 +2161,7 @@
         class: "ellipsis",
         "subscribe:innerText": selectedFileName
       }
-    ), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")))), /* @__PURE__ */ createElement("div", { class: "scroll-area" }, /* @__PURE__ */ createElement("code", { "subscribe:innerText": fileContent })));
+    ), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")))), /* @__PURE__ */ createElement("div", { class: "scroll-area", "children:set": detailView }));
     function scrollToDetails() {
       view.scrollLeft = view.scrollWidth;
     }
@@ -2160,7 +2172,8 @@
   function StorageModal(storageViewModel2) {
     return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": storageViewModel2.isShowingStorageModal }, /* @__PURE__ */ createElement("div", { style: "max-width: 64rem" }, /* @__PURE__ */ createElement("main", { class: "padding-0" }, FileBrowser(
       storageViewModel2.storageModel,
-      storageViewModel2.selectedPath
+      storageViewModel2.selectedPath,
+      storageViewModel2.didMakeChanges
     )), /* @__PURE__ */ createElement("button", { "on:click": storageViewModel2.hideStorageModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
   }
 
@@ -2169,12 +2182,16 @@
     storageModel;
     // state
     isShowingStorageModal = new State(false);
-    selectedPath = new State("\\");
+    selectedPath = new State(PATH_COMPONENT_SEPARATOR);
+    didMakeChanges = new State(false);
     // view methods
     showStorageModal = () => {
       this.isShowingStorageModal.value = true;
     };
     hideStorageModal = () => {
+      if (this.didMakeChanges.value == true) {
+        window.location.reload();
+      }
       this.isShowingStorageModal.value = false;
     };
     // init

src/View/Components/fileBrowser.css

@@ -45,6 +45,8 @@
 .file-browser code {
   width: 100%;
   height: 100%;
+
+  font-size: .9rem;
 }
 
 @media (min-width: 640px) {

src/View/Components/fileBrowser.tsx

@@ -7,16 +7,21 @@ import StorageModel, {
 } from "../../Model/storageModel";
 
 import { DirectoryItemList } from "./directoryItemList";
+import { translations } from "../translations";
 
 export function FileBrowser(
   storageModel: StorageModel,
-  selectedPath: React.State<string>
+  selectedPath: React.State<string>,
+  didMakeChanges: React.State<boolean>
 ) {
   // state
-  const fileContent = React.createProxyState([selectedPath], () => {
+  const fileContentToShow = React.createProxyState([selectedPath], () => {
     const path = StorageModel.stringToPathComponents(selectedPath.value);
     const content = storageModel.restore(path);
-    return content || "";
+    return (
+      (content ?? translations.fileBrowser.notAFile) ||
+      translations.fileBrowser.contentEmpty
+    );
   });
 
   const selectedFileName = React.createProxyState(
@@ -27,6 +32,30 @@ export function FileBrowser(
   );
 
   // view
+  const detailView = React.createProxyState([selectedPath], () => {
+    if (selectedPath.value == PATH_COMPONENT_SEPARATOR)
+      return (
+        <span class="secondary">{translations.fileBrowser.noItemSelected}</span>
+      );
+
+    return (
+      <div class="flex-column gap">
+        <div class="tile flex-no">
+          <div>
+            <b>{translations.fileBrowser.path}</b>
+            <span class="break-all" subscribe:innerText={selectedPath}></span>
+          </div>
+        </div>
+        <div class="tile flex-no">
+          <div>
+            <b>{translations.fileBrowser.content}</b>
+            <code subscribe:innerText={fileContentToShow}></code>
+          </div>
+        </div>
+      </div>
+    );
+  });
+
   const view = (
     <div class="file-browser">
       <div>
@@ -47,9 +76,7 @@ export function FileBrowser(
           </button>
         </div>
       </div>
-      <div class="scroll-area">
+      <div class="scroll-area" children:set={detailView}></div>
-        <code subscribe:innerText={fileContent}></code>
-      </div>
     </div>
   );
 

src/View/Modals/storageModal.tsx

@@ -1,8 +1,6 @@
 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";
 
@@ -13,7 +11,8 @@ export function StorageModal(storageViewModel: StorageViewModel) {
         <main class="padding-0">
           {FileBrowser(
             storageViewModel.storageModel,
-            storageViewModel.selectedPath
+            storageViewModel.selectedPath,
+            storageViewModel.didMakeChanges
           )}
         </main>
         <button on:click={storageViewModel.hideStorageModal}>

src/View/translations.ts

@@ -62,6 +62,15 @@ const englishTranslations = {
     connectButtonAudioLabel: "connect",
   },
 
+  fileBrowser: {
+    noItemSelected: "No item selected",
+    notAFile: "(not a file)",
+    contentEmpty: "(empty)",
+
+    path: "Path",
+    content: "Content",
+  },
+
   chatPage: {
     closeChatAudioLabe: "close chat",
     chatSettingsAudioLabel: "chat settings",

src/ViewModel/storageViewModel.ts

@@ -1,22 +1,26 @@
 import * as React from "bloatless-react";
 
-import StorageModel from "../Model/storageModel";
+import StorageModel, { PATH_COMPONENT_SEPARATOR } from "../Model/storageModel";
 
 export default class StorageViewModel {
   storageModel: StorageModel;
 
   // state
   isShowingStorageModal: React.State<boolean> = new React.State(false);
-  selectedPath: React.State<string> = new React.State("\\");
+  selectedPath: React.State<string> = new React.State(PATH_COMPONENT_SEPARATOR);
+  didMakeChanges: React.State<boolean> = new React.State(false);
 
   // view methods
   showStorageModal = (): void => {
     this.isShowingStorageModal.value = true;
-  }
+  };
 
   hideStorageModal = (): void => {
+    if (this.didMakeChanges.value == true) {
+      window.location.reload();
+    }
     this.isShowingStorageModal.value = false;
-  }
+  };
 
   // init
   constructor(storageModel: StorageModel) {