some styling for the directory table

frontend/app/view/directorypreview.less

@@ -1,16 +1,18 @@
 .dir-table {
     overflow: auto;
     width: 100%;
-    border: 2px solid var(--border-color);
     border-radius: 3px;
     .dir-table-head {
         .dir-table-head-row {
             display: flex;
             border-bottom: 2px solid var(--border-color);
             padding: 4px 0;
+            background-color: var(--panel-bg-color);
+
             .dir-table-head-cell {
                 position: relative;
                 padding: 2px 4px;
+                font-weight: bold;
                 .dir-table-head-resize {
                     position: absolute;
                     top: 0;
@@ -36,14 +38,24 @@
         .dir-table-body-row {
             display: flex;
             border-radius: 3px;
+
             &:focus {
                 background-color: var(--accent-color);
             }
 
+            &:hover:not(:focus) {
+                background-color: var(--highlight-bg-color);
+            }
+
             .dir-table-body-cell {
                 overflow: hidden;
                 white-space: nowrap;
                 padding: 0.25rem;
+                cursor: default;
+
+                &.col-size {
+                    text-align: right;
+                }
             }
         }
     }

frontend/app/view/directorypreview.tsx

@@ -3,6 +3,7 @@
 
 import { FileInfo } from "@/bindings/fileservice";
 import { Table, createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import clsx from "clsx";
 import * as jotai from "jotai";
 import React from "react";
 
@@ -107,7 +108,7 @@ function TableBody({ table, cwd, setFileName }: TableBodyProps) {
                     {row.getVisibleCells().map((cell) => {
                         return (
                             <div
-                                className="dir-table-body-cell"
+                                className={clsx("dir-table-body-cell", "col-" + cell.column.id)}
                                 key={cell.id}
                                 style={{ width: `calc(var(--col-${cell.column.id}-size) * 1px)` }}
                             >

frontend/app/view/preview.tsx

@@ -6,6 +6,7 @@ import { Markdown } from "@/element/markdown";
 import { useBlockAtom, useBlockCache } from "@/store/global";
 import * as WOS from "@/store/wos";
 import * as util from "@/util/util";
+import clsx from "clsx";
 import * as jotai from "jotai";
 import { CenteredDiv } from "../element/quickelems";
 import { DirectoryPreview } from "./directorypreview";
@@ -31,18 +32,27 @@ function DirNav({ cwdAtom }: { cwdAtom: jotai.WritableAtom<string, [string], voi
     }
     return (
         <div className="view-nav">
-            {splitNav.map((item) => {
+            {splitNav.map((item, idx) => {
                 let splitPath = item.split("/");
                 if (splitPath.length === 0) {
                     splitPath = [item];
                 }
-                const baseName = splitPath[splitPath.length - 1];
+                const isLast = idx == splitNav.length - 1;
+                let baseName = splitPath[splitPath.length - 1];
+                if (!isLast) {
+                    baseName += "/";
+                }
                 return (
-                    <span className="view-nav-item" key={`nav-item-${item}`} onClick={() => setCwd(item)}>
+                    <div
+                        className={clsx("view-nav-item", isLast ? "current-file" : "clickable")}
+                        key={`nav-item-${item}`}
+                        onClick={isLast ? null : () => setCwd(item)}
+                    >
                         {baseName}
-                    </span>
+                    </div>
                 );
             })}
+            <div className="flex-spacer"></div>
         </div>
     );
 }
@@ -95,16 +105,6 @@ function StreamingPreview({ fileInfo }: { fileInfo: FileInfo }) {
 }
 
 function PreviewView({ blockId }: { blockId: string }) {
-    /*
-    const blockData = WOS.useWaveObjectValueWithSuspense<Block>(WOS.makeORef("block", blockId));
-    if (blockData == null) {
-        return (
-            <div className="view-preview">
-                <CenteredDiv>Block Not Found</CenteredDiv>
-            </div>
-        );
-    }
-	*/
     const blockAtom = WOS.getWaveObjectAtom<Block>(`block:${blockId}`);
     const fileNameAtom: jotai.WritableAtom<string, [string], void> = useBlockCache(blockId, "preview:filename", () =>
         jotai.atom<string, [string], void>(

frontend/app/view/view.less

@@ -82,23 +82,30 @@
 .full-preview {
     display: flex;
     flex-direction: column;
+    width: 100%;
 }
 
 .view-nav {
     display: flex;
-    gap: 0.5rem;
+    padding: 0.2rem 0 0.2rem 0;
+    border-bottom: 1px solid var(--border-color);
 
     .view-nav-item {
-        background-color: var(--panel-bg-color);
         border-radius: 3px;
-        padding: 0.2rem;
+        padding: 0.2rem 0;
+
+        &.clickable {
+            cursor: pointer;
 
             &:hover {
                 background-color: var(--highlight-bg-color);
             }
+        }
 
-        &:active {
+        &.current-file {
-            background-color: var(--accent-color);
+            background-color: transparent;
+            cursor: default;
+            font-weight: bold;
         }
     }
 }