feat: add background navigation bar

This allows traversal backwards in a preview block.

frontend/app/view/preview.tsx

@@ -14,6 +14,39 @@ import "./view.less";
 
 const MaxFileSize = 1024 * 1024 * 10; // 10MB
 
+function DirNav({ cwdAtom }: { cwdAtom: jotai.WritableAtom<string, [string], void> }) {
+    const [cwd, setCwd] = jotai.useAtom(cwdAtom);
+    let splitNav = [cwd];
+    let remaining = cwd;
+
+    let idx = remaining.lastIndexOf("/");
+    while (idx !== -1) {
+        remaining = remaining.substring(0, idx);
+        splitNav.unshift(remaining);
+
+        idx = remaining.lastIndexOf("/");
+    }
+    if (splitNav.length === 0) {
+        splitNav = [cwd];
+    }
+    return (
+        <div className="view-nav">
+            {splitNav.map((item) => {
+                let splitPath = item.split("/");
+                if (splitPath.length === 0) {
+                    splitPath = [item];
+                }
+                const baseName = splitPath[splitPath.length - 1];
+                return (
+                    <span className="view-nav-item" key={`nav-item-${item}`} onClick={() => setCwd(item)}>
+                        {baseName}
+                    </span>
+                );
+            })}
+        </div>
+    );
+}
+
 function MarkdownPreview({ contentAtom }: { contentAtom: jotai.Atom<Promise<string>> }) {
     const readmeText = jotai.useAtomValue(contentAtom);
     return (
@@ -119,33 +152,37 @@ function PreviewView({ blockId }: { blockId: string }) {
     const fileContent = jotai.useAtomValue(fileContentAtom);
 
     // handle streaming files here
+    let specializedView: React.ReactNode;
     if (mimeType.startsWith("video/") || mimeType.startsWith("audio/") || mimeType.startsWith("image/")) {
-        return <StreamingPreview fileInfo={fileInfo} />;
-    }
-    if (fileInfo == null) {
-        return <CenteredDiv>File Not Found</CenteredDiv>;
-    }
-    if (fileInfo.size > MaxFileSize) {
-        return <CenteredDiv>File Too Large to Preview</CenteredDiv>;
-    }
-    if (mimeType === "text/markdown") {
-        return <MarkdownPreview contentAtom={fileContentAtom} />;
-    }
-    if (mimeType.startsWith("text/")) {
-        return (
+        specializedView = <StreamingPreview fileInfo={fileInfo} />;
+    } else if (fileInfo == null) {
+        specializedView = <CenteredDiv>File Not Found</CenteredDiv>;
+    } else if (fileInfo.size > MaxFileSize) {
+        specializedView = <CenteredDiv>File Too Large to Preview</CenteredDiv>;
+    } else if (mimeType === "text/markdown") {
+        specializedView = <MarkdownPreview contentAtom={fileContentAtom} />;
+    } else if (mimeType.startsWith("text/")) {
+        specializedView = (
             <div className="view-preview view-preview-text">
                 <pre>{fileContent}</pre>
             </div>
         );
-    }
-    if (mimeType === "directory") {
-        return <DirectoryPreview contentAtom={fileContentAtom} fileNameAtom={fileNameAtom} />;
-    }
-    return (
+    } else if (mimeType === "directory") {
+        specializedView = <DirectoryPreview contentAtom={fileContentAtom} fileNameAtom={fileNameAtom} />;
+    } else {
+        specializedView = (
             <div className="view-preview">
                 <div>Preview ({mimeType})</div>
             </div>
         );
+    }
+
+    return (
+        <div className="full-preview">
+            <DirNav cwdAtom={fileNameAtom} />
+            {specializedView}
+        </div>
+    );
 }
 
 export { PreviewView };

frontend/app/view/view.less

@@ -78,3 +78,27 @@
         align-items: start;
     }
 }
+
+.full-preview {
+    display: flex;
+    flex-direction: column;
+}
+
+.view-nav {
+    display: flex;
+    gap: 0.5rem;
+
+    .view-nav-item {
+        background-color: var(--panel-bg-color);
+        border-radius: 3px;
+        padding: 0.2rem;
+
+        &:hover {
+            background-color: var(--highlight-bg-color);
+        }
+
+        &:active {
+            background-color: var(--accent-color);
+        }
+    }
+}