[Feature Request] Directory Preview: Simple View Toggle

[floatin]

Feature Description

Summary

Add a "Simple View" toggle option for the Directory Preview block that shows only file name (with icon), hiding additional columns like permissions, last modified time, size, and file type.

Use Case

When browsing large directories, the detailed view with multiple columns can be overwhelming. A simple view showing only the file name/icon allows faster scanning of directory contents.

Current Behavior

Directory Preview shows all columns: Icon, Name, Permissions, Last Modified, Size, Type

Desired Behavior

Simple View shows only: Icon, Name

Additional Context

This is useful when:

• Browsing documentation folders with many files
• Quickly scanning directory contents
• Limited screen space scenarios

Implementation Suggestion

Meta Field

Add a per-block atom simpleView: PrimitiveAtom<boolean> to PreviewModel

UI Changes

Context Menu (Default Settings submenu)
Add checkbox menu item:

Simple View     [✓]

Code Changes

preview-model.tsx

+    simpleView: PrimitiveAtom<boolean>;

+        this.simpleView = atom<boolean>(false);

preview-directory-utils.tsx

+    const simpleView = globalStore.get(model.simpleView) ?? false;
     return [
         // ... existing menu items ...
+        {
+            label: "Simple View",
+            type: "checkbox",
+            checked: simpleView,
+            click: () => {
+                globalStore.set(model.simpleView, !simpleView);
+            },
+        },
     ];

preview-directory.tsx

+    const simpleView = useAtomValue(model.simpleView);

+    useEffect(() => {
+        if (simpleView) {
+            table.setColumnVisibility({
+                logo: true,
+                name: true,
+                modestr: false,
+                modtime: false,
+                size: false,
+                mimetype: false,
+                path: false,
+            });
+        } else {
+            table.setColumnVisibility({
+                logo: true,
+                name: true,
+                modestr: true,
+                modtime: true,
+                size: true,
+                mimetype: true,
+                path: false,
+            });
+        }
+    }, [simpleView, table]);

Behavior

• Simple View is off by default (detailed view)
• Toggle state is per-block (not global)
• State persists during session
• Does not persist to config (ephemeral view preference)

[floatin]

Feature Update: Add Tree View Support to Simple View

Enhancement Description

In addition to the Simple View toggle (showing only icon + name), we should support a Tree View mode that displays files in a hierarchical directory structure.

Use Case

• Visual understanding of folder hierarchy
• Faster navigation to nested files
• Collapsible directories for better overview

Implementation Suggestion

New Meta Field

+    treeView: PrimitiveAtom<boolean>;

+        this.treeView = atom<boolean>(false);

Context Menu Options

View Mode
├── [ ] Simple View      // Only Icon + Name
├── [✓] Tree View        // Hierarchical with indentation
└── [ ] Detailed View    // All columns (default)

Data Structure Change
Instead of flat FileInfo[], we need a tree structure:

interface FileTreeNode {
+    finfo: FileInfo;
+    children: FileTreeNode[];
+    depth: number;
+    isExpanded: boolean;
}

UI Changes

1. Indent files based on depth level (each level = 20px indent)
2. Show collapse/expand icon for directories
3. Click directory row → toggle expand/collapse
4. Tree sorting: directories first, then alphabetically

Behavior

• Tree View is off by default
• When Tree View is on, Simple View is automatically enabled
• setColumnVisibility controls which columns show (logo + name only in simple mode)
• State is per-block, ephemeral (not persisted)

Code Changes

preview-directory.tsx

+    const treeView = useAtomValue(model.treeView);
+    const [expandedDirs, setExpandedDirs] = useState<Set<string>>(new Set());

+    // Build tree structure from flat FileInfo[]
+    const buildFileTree = (files: FileInfo[]): FileTreeNode[] => {
+        const root: FileTreeNode[] = [];
+        const dirMap = new Map<string, FileTreeNode>();
+
+        files.forEach(finfo => {
+            const parts = finfo.path.split('/');
+            const depth = parts.length - (finfo.dir ? finfo.dir.split('/').length : 0) - 1;
+
+            const node: FileTreeNode = {
+                finfo,
+                children: [],
+                depth,
+                isExpanded: expandedDirs.has(finfo.path)
+            };
+            dirMap.set(finfo.path, node);
+
+            if (depth === 0) {
+                root.push(node);
+            }
+        });
+        return root;
+    };

+    const handleDirClick = (finfo: FileInfo) => {
+        setExpandedDirs(prev => {
+            const next = new Set(prev);
+            if (next.has(finfo.path)) {
+                next.delete(finfo.path);
+            } else {
+                next.add(finfo.path);
+            }
+            return next;
+        });
+    };

DirectoryTable columns

+    columnHelper.accessor("depth", {
+        cell: (info) => <span style={{ paddingLeft: `${info.getValue() * 20}px` }}>{info.getValue()}</span>,
+        header: () => <span></span>,
+        size: 0,
+        enableSorting: false,
+    }),

Files to Modify

• preview-model.tsx - Add treeView atom
• preview-directory.tsx - Tree structure building and rendering
• preview-directory-utils.tsx - Add Tree View menu item
• preview.scss - Add indentation styles

Priority

Recommended for v0.15 or later milestone.