show path of selected item in filebrowser

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">
-        <code subscribe:innerText={fileContent}></code>
-      </div>
+      <div class="scroll-area" children:set={detailView}></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",