Skip to content

file-explorer.md

Latest commit

 

History

History
183 lines (123 loc) · 9.15 KB

file-explorer.md

File metadata and controls

183 lines (123 loc) · 9.15 KB
Raw

File Explorer

Open a file explorer via the toolbar folder icon, command mode (Ctrl+\ then e), or from the sidebar folder right-click menu.

Toolbar

The toolbar provides a streamlined set of controls:

[↑] [path bar] [refresh] [View] [+file] [📂folder] [⬆upload]

  • ↑ — Go up one directory
  • Path bar — Editable with autocomplete (Tab/Enter to select), supports ~ for home directory. Entering a file path opens it directly in the appropriate viewer.
  • Refresh — Reload the current directory
  • View — Menu that replaces the old individual toolbar buttons for view mode, display options, group by, and column visibility
  • +file / 📂folder — Create new file or directory
  • ⬆upload — Opens upload menu (Upload Files, Upload Folder, upload history). Ring progress indicator on the button during active uploads.

The title bar shows the current path (front-truncated for long paths).

View Modes

Toggle between views via the View menu:

List view

  • Columns: Name, Size, Modified (plus optional Type, Created)
  • Click column headers to sort (click again to reverse)

Icon grid view

  • Large folder/file icons with names
  • Double-click to open files or navigate into directories

Resizable Columns

In list view, column widths are fully adjustable:

  • Drag column header borders to resize
  • Right-click a column header to toggle column visibility or auto-fit all columns
  • Columns use absolute widths (Windows Explorer behavior) -- they do not flex-fill the available space
  • Column widths are persisted in localStorage across sessions

Preview Panel

Toggle via View > Show preview panel to see file previews alongside the file list.

  • Auto layout: the preview panel appears to the right (horizontal split) in wide windows, or below (vertical split) in tall windows
  • Supports all file types: text, images, PDF, video, audio, HTML, DOCX, PPTX, XLSX

Hidden Files

Toggle dotfile visibility via the View menu.

Large Folders

Folders with many items load the first 100 entries. Click "Load more" at the bottom to fetch the next batch.

Bookmarks

The left panel shows bookmarks for quick navigation.

Managing bookmarks

  • Drag a folder from the file list onto the bookmark panel to add it
  • Drag bookmarks to reorder them
  • Right-click a bookmark for: Open, Open in new window, Remove, Rename

From the file list

  • Right-click a folder → "Add to bookmarks" (starred folders show ★)

Bookmarks sync across all connected clients via WebSocket.

File Operations

Selection

  • Click selects one item; Ctrl/Cmd+click toggles items; Shift+click selects a range; Ctrl+A selects everything.
  • Delete key deletes the selection (with confirmation).
  • Right-clicking a multi-selection shows bulk actions: Compress N items, Copy (N), Cut (N), Delete N items.

Copy / Cut / Paste

Files and folders have a real clipboard: Copy / Cut from the context menu (or Ctrl+C / Ctrl+X), then Paste (background right-click or Ctrl+V) — including into a different explorer window. Cut items render dimmed until pasted. Pasting into the same folder auto-renames (name (copy), name (copy 2), …). If a name already exists at the destination you're asked once whether to overwrite. Duplicate makes a copy next to the original in one click.

Archives

  • Compress to Archive… on any file, folder, or multi-selection. The archive name's extension picks the format: .zip, .tar.gz, .tar, .tar.bz2, .tar.xz.
  • Double-click a .zip / .tar.* to preview its contents — entry tree with per-file sizes, a filter box, and a summary line ("12 files · 4.2 MB uncompressed"). Click any file entry to open it with the normal viewer (code, image, PDF, …) — only that entry is extracted, to a temp file.
  • Extract Here / Extract to Folder… on archive files, and Extract All… inside the preview. Extraction never overwrites existing files.
  • Download as Zip on folders streams the folder as a zip straight to your browser (no temp archive written on the server).

Properties

Properties on any file/folder (or the current directory via background right-click) shows type, size (recursive for folders), item count, modified/created times, and permissions.

Right-click context menu

On folders:

  • Open / Open in new window
  • Copy, Cut, Duplicate, Compress to Archive…, Download as Zip, Copy Path
  • Add to bookmarks
  • Sessions ▸ — submenu with "+ New session" and all sessions at this path
  • Add to task ▸ — link this folder to a Task Group (its sessions auto-include into the chosen group)
  • Rename, Properties, Delete

On files:

  • Open (in appropriate viewer), Edit (CodeMirror editor), Open as Hex
  • Extract Here / Extract to Folder… (archives)
  • Copy, Cut, Duplicate, Compress to Archive…, Download, Copy Path
  • Rename, Properties, Delete

On empty space (background):

  • Paste, New File, New Folder, Select All, Refresh, Copy Path, Properties

Both list view and icon view have the same menus.

Upload

Click the upload button to open a Chrome-style popover menu:

  • Upload Files — multi-file upload via file picker
  • Upload Folder — folder upload preserving directory structure (webkitdirectory)
  • Active uploads — spinner + file name + cancel button for each in-progress upload
  • Upload history — last 10 uploads with icon, name, size, date, status (✓/✗). Click to reopen file. "Clear History" at bottom. Persisted server-side and synced across clients.

During upload, files appear as real rows in the file list with a Mac Finder-style progress bar (accent-colored fill in the area after the file name) and a percentage label. Rows survive folder navigation — they re-render when you return to the upload directory.

The upload button shows an SVG ring progress indicator (Chrome download-button style) during active uploads.

You can also drag files from your OS file manager onto the file explorer to upload.

Drag to terminal

Drag any file or folder from the explorer and drop it on a terminal window. The shell-escaped absolute path is typed into the terminal.

Drag folder to a Task Group

Drag a folder from the explorer and drop it on a Task Group header (sidebar → Task Groups tab) to link it — sessions under that folder then auto-include into the group.

File Viewers

Double-click a file to open it in the appropriate viewer:

Type Viewer Features
Code/text CodeMirror 6 Syntax highlighting, word wrap, font size, auto-format (Shift+Alt+F), follows global theme
Markdown (.md) CodeMirror 6 Edit mode with Preview toggle (rendered markdown view)
HTML (.html) CodeMirror 6 Edit mode with Preview toggle (sandboxed iframe, same as markdown)
PDF iframe Native browser PDF viewer
Images ImageViewer Zoom (scroll wheel), drag-to-pan
Video Native <video> Browser's built-in controls
Audio Native <audio> Browser's built-in controls
CSV/TSV Virtual scroll table Only visible rows rendered. Pages of 200 rows loaded on demand from server streaming endpoint. Handles any file size. Text selectable.
Excel (.xlsx) Sheet tabs table Sheet tabs at bottom (click to switch). 5000 row limit. Text selectable.
Word (.docx) docx-preview Client-side visual rendering via docx-preview library. Full fidelity (headers, footers, tables, images, styles). Text selectable.
PowerPoint (.pptx) Slide viewer Slide thumbnail sidebar (resizable, high-res CSS-scaled) + main slide view. Keyboard navigation (arrows). Responsive resize. Text selectable.
Binary HexViewer Hex + ASCII display with 64KB chunk loading

Code editor features

The CodeMirror-based code editor supports:

  • Syntax highlighting for JavaScript, Python, JSON, Markdown, HTML, CSS, and many more
  • Language override dropdown to force a specific language (also drives Preview button visibility)
  • Auto-format via Shift+Alt+F or toolbar button -- Prettier for JS/TS/JSON/HTML/CSS/MD/YAML/GraphQL, server-side for Python/Go/Rust/Shell
  • Word wrap toggle
  • Font size controls (A-/A+)
  • Theme -- follows the global app theme
  • Markdown/HTML preview toggle -- switch between code editing and rendered preview
  • Jump to line -- when opened from a path with a :line suffix (e.g., from a chat message clickable path), the editor jumps to that line
  • Save (Ctrl+S) and Download buttons

Large file handling

  • Files >1MB show a size warning before opening
  • Binary files are auto-detected and opened in hex viewer
  • Hex viewer loads in 64KB chunks for large files

File Type Registry

All file type associations are defined in a single source of truth: src/lib/file-types.js. Adding support for a new file type requires only one entry in the registry -- the viewer dispatch, icon selection, and preview panel all read from the same data.

Sorting

File explorer remembers your sort preference (column and direction) via localStorage. Change it by clicking column headers in list view.

In the View menu:

  • Mixed sort -- When sorting by time, mix files and folders instead of grouping directories first