explewd/waste-go
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

feat: subfolder support in file sharing + directory browser UI

Browse Source 
- FolderPicker: uses webkitRelativePath so paths like docs/report.pdf
  are preserved; adds "include subfolders" checkbox (default on)
- FileBrowser: virtual directory tree with breadcrumb navigation,
  sort by name/size, search filter, folders shown before files
- Protocol: browse sends path alongside name; get uses path as key
- FileEntry type gains optional path field

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Fredrik Johansson
2026-06-26 20:29:00 +02:00
parent 80e05b81ac
commit 0f54f3bbad
5 changed files with 202 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
web/src/App.css
View File

@@ -126,6 +126,23 @@ details summary { color: var(--muted); font-size: 12px; cursor: pointer; }
.file-entry-dl:hover { background: rgba(124,106,247,0.15); }
/* ── folder picker ── */
.folder-picker { width: 100%; }
.folder-picker { width: 100%; display: flex; flex-direction: column; gap: 4px; }
.folder-picker-btn { background: var(--surface); color: var(--muted); border: 1px solid var(--border); font-size: 12px; padding: 5px 10px; border-radius: 4px; width: 100%; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-picker-btn:hover { color: var(--text); border-color: var(--accent); background: var(--surface); }
.folder-picker-subfolders { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); cursor: pointer; }
.folder-picker-subfolders input { width: auto; cursor: pointer; }
/* ── file browser toolbar / breadcrumb / sort ── */
.file-browser-toolbar { padding: 6px 8px 0; }
.file-browser-search { font-size: 12px; padding: 4px 8px; }
.file-browser-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; padding: 4px 8px; gap: 0; font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--border); }
.breadcrumb-seg { background: none; color: var(--muted); font-size: 11px; padding: 0 2px; }
.breadcrumb-seg:hover { color: var(--accent); background: none; }
.breadcrumb-sep { color: var(--border); padding: 0 1px; }
.file-browser-sortbar { display: flex; gap: 4px; padding: 4px 8px; border-bottom: 1px solid var(--border); }
.sort-btn { background: none; color: var(--muted); font-size: 11px; padding: 1px 6px; border-radius: 3px; }
.sort-btn:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.sort-btn.active { color: var(--accent); background: none; }
.file-entry-dir { cursor: pointer; }
.file-entry-dir:hover { background: rgba(255,255,255,0.04); }
.file-entry-icon { font-size: 12px; flex-shrink: 0; }