feat: subfolder support in file sharing + directory browser UI

- 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>
2026-06-26 20:29:00 +02:00
parent 80e05b81ac
commit 0f54f3bbad
5 changed files with 202 additions and 28 deletions
--- a/web/src/App.css
+++ b/web/src/App.css
@@ -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; }
--- a/web/src/adapter/browser.ts
+++ b/web/src/adapter/browser.ts
@@ -440,20 +440,18 @@ class PeerConn {
    } else if (m['type'] === 'pm') {
      this.on('pm', { peer: this.peerId, text: m['text'] as string, ts: m['ts'] as number || Date.now() })
    } else if (m['type'] === 'browse') {
-      const path = (m['path'] as string) || '/'
-      void path // path-based subdirs not supported; always return root
-      const files = Array.from(this.share.values()).map(f => ({
-        name: f.name, size: f.size, mime: f.type
+      const files = Array.from(this.share.entries()).map(([path, f]) => ({
+        name: f.name, path, size: f.size, mime: f.type
      }))
      this._dc({ type: 'files', files })
    } else if (m['type'] === 'files') {
-      const files = m['files'] as Array<{ name: string; size: number; mime?: string }>
+      const files = m['files'] as Array<{ name: string; path?: string; size: number; mime?: string }>
      this.on('files', { peer: this.peerId, files })
    } else if (m['type'] === 'get') {
-      const name = m['name'] as string
-      const file = this.share.get(name)
+      const path = m['path'] as string
+      const file = this.share.get(path)
      if (!file) return
-      this._dc({ type: 'file-offer', name: file.name, size: file.size, xid: name })
+      this._dc({ type: 'file-offer', name: file.name, path, size: file.size, xid: path })
    } else if (m['type'] === 'file-offer') {
      const name = m['name'] as string
      const size = m['size'] as number
@@ -461,6 +459,7 @@ class PeerConn {
      this.on('file_offer', { peer: this.peerId, name, size, xid })
    } else if (m['type'] === 'file-accept') {
      const xid = m['xid'] as string
+      // xid is either a push UUID or a share path
      if (this._pushQueue.has(xid) || this.share.has(xid)) void this._stream(xid)
    } else if (m['type'] === 'file-done') {
      const xid = m['xid'] as string
@@ -480,8 +479,8 @@ class PeerConn {
    this._dc({ type: 'browse', path: '/' })
  }

-  requestGet(name: string) {
-    this._dc({ type: 'get', name })
+  requestGet(path: string) {
+    this._dc({ type: 'get', path })
  }

  acceptOffer(xid: string, name: string, size: number) {
@@ -819,11 +818,11 @@ export class BrowserAdapter {
        error_message: `transfer ${(data['xid'] as string).slice(0, 8)} cancelled`,
      })
    } else if (event === 'files') {
-      const raw = data['files'] as Array<{ name: string; size: number; mime?: string }>
+      const raw = data['files'] as Array<{ name: string; path?: string; size: number; mime?: string }>
      this.emit({
        type: 'file_list',
        peer_id: data['peer'] as string,
-        files: raw.map(f => ({ name: f.name, size_bytes: f.size })),
+        files: raw.map(f => ({ name: f.name, path: f.path ?? f.name, size_bytes: f.size })),
      })
    } else if (event === 'file_recv') {
      this.emit({
@@ -856,8 +855,8 @@ export class BrowserAdapter {
    this.peers.get(peerId)?.requestBrowse()
  }

-  requestGet(peerId: string, name: string) {
-    this.peers.get(peerId)?.requestGet(name)
+  requestGet(peerId: string, path: string) {
+    this.peers.get(peerId)?.requestGet(path)
  }

  sendFileTo(peerId: string, file: File) {
--- a/web/src/components/FileBrowser.tsx
+++ b/web/src/components/FileBrowser.tsx
@@ -1,5 +1,7 @@
+import { useState, useMemo } from 'react'
 import { useWaste } from '../store'
 import { BrowserAdapter } from '../adapter/browser'
+import type { FileEntry } from '../types'

 function fmt(bytes: number): string {
  if (bytes < 1024) return `${bytes} B`
@@ -7,20 +9,111 @@ function fmt(bytes: number): string {
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
 }

+type SortKey = 'name' | 'size'
+type SortDir = 'asc' | 'desc'
+
+interface DirEntry {
+  kind: 'dir'
+  name: string
+  path: string
+  count: number
+}
+
+interface FileRow {
+  kind: 'file'
+  name: string
+  path: string
+  size: number
+}
+
+type Row = DirEntry | FileRow
+
+function buildRows(files: FileEntry[], cwd: string, search: string, sort: SortKey, sortDir: SortDir): Row[] {
+  // Filter to entries under cwd
+  const prefix = cwd ? cwd + '/' : ''
+  const inDir = files.filter(f => {
+    const p = f.path ?? f.name
+    return p.startsWith(prefix)
+  })
+
+  if (search.trim()) {
+    // Flat search across all files under cwd
+    const q = search.toLowerCase()
+    return inDir
+      .filter(f => f.name.toLowerCase().includes(q))
+      .map(f => ({ kind: 'file' as const, name: f.name, path: f.path ?? f.name, size: f.size_bytes }))
+      .sort((a, b) => {
+        const cmp = sort === 'name' ? a.name.localeCompare(b.name) : a.size - b.size
+        return sortDir === 'asc' ? cmp : -cmp
+      })
+  }
+
+  // Build immediate children: dirs and files at this level
+  const dirs = new Map<string, number>() // dirName → file count
+  const fileRows: FileRow[] = []
+
+  for (const f of inDir) {
+    const rel = (f.path ?? f.name).slice(prefix.length)
+    const slash = rel.indexOf('/')
+    if (slash === -1) {
+      fileRows.push({ kind: 'file', name: f.name, path: f.path ?? f.name, size: f.size_bytes })
+    } else {
+      const dirName = rel.slice(0, slash)
+      dirs.set(dirName, (dirs.get(dirName) ?? 0) + 1)
+    }
+  }
+
+  const dirRows: DirEntry[] = Array.from(dirs.entries()).map(([name, count]) => ({
+    kind: 'dir', name, path: prefix + name, count,
+  }))
+
+  // Sort each group separately, then dirs first
+  const cmpFiles = (a: FileRow, b: FileRow) => {
+    const cmp = sort === 'name' ? a.name.localeCompare(b.name) : a.size - b.size
+    return sortDir === 'asc' ? cmp : -cmp
+  }
+  dirRows.sort((a, b) => a.name.localeCompare(b.name))
+  fileRows.sort(cmpFiles)
+
+  return [...dirRows, ...fileRows]
+}
+
 export function FileBrowser() {
  const { activeFilePeer, fileLists, setActiveFilePeer, adapter, connectedPeers } = useWaste()
+  const [cwd, setCwd] = useState('')
+  const [search, setSearch] = useState('')
+  const [sort, setSort] = useState<SortKey>('name')
+  const [sortDir, setSortDir] = useState<SortDir>('asc')

  if (!activeFilePeer) return null

  const peer = connectedPeers.find(p => p.id === activeFilePeer)
  const files = fileLists[activeFilePeer] ?? null

-  function download(name: string) {
+  function download(path: string) {
    if (adapter instanceof BrowserAdapter) {
-      adapter.requestGet(activeFilePeer!, name)
+      adapter.requestGet(activeFilePeer!, path)
    }
  }

+  function toggleSort(key: SortKey) {
+    if (sort === key) setSortDir(d => d === 'asc' ? 'desc' : 'asc')
+    else { setSort(key); setSortDir('asc') }
+  }
+
+  function navigateUp() {
+    const parts = cwd.split('/')
+    parts.pop()
+    setCwd(parts.join('/'))
+  }
+
+  const rows = useMemo(() => {
+    if (!files) return []
+    return buildRows(files, cwd, search, sort, sortDir)
+  }, [files, cwd, search, sort, sortDir])
+
+  const cwdParts = cwd ? cwd.split('/') : []
+
  return (
    <div className="file-browser">
      <div className="file-browser-header">
@@ -33,15 +126,66 @@ export function FileBrowser() {
      ) : files.length === 0 ? (
        <div className="file-browser-empty">No files shared</div>
      ) : (
+        <>
+          <div className="file-browser-toolbar">
+            <input
+              className="file-browser-search"
+              value={search}
+              onChange={e => setSearch(e.target.value)}
+              placeholder="search…"
+            />
+          </div>
+
+          {/* Breadcrumb */}
+          <div className="file-browser-breadcrumb">
+            <button onClick={() => setCwd('')} className="breadcrumb-seg">~</button>
+            {cwdParts.map((seg, i) => (
+              <span key={i}>
+                <span className="breadcrumb-sep">/</span>
+                <button
+                  className="breadcrumb-seg"
+                  onClick={() => setCwd(cwdParts.slice(0, i + 1).join('/'))}
+                >{seg}</button>
+              </span>
+            ))}
+          </div>
+
+          {/* Sort bar */}
+          <div className="file-browser-sortbar">
+            <button className={`sort-btn ${sort === 'name' ? 'active' : ''}`} onClick={() => toggleSort('name')}>
+              name {sort === 'name' ? (sortDir === 'asc' ? '↑' : '↓') : ''}
+            </button>
+            <button className={`sort-btn ${sort === 'size' ? 'active' : ''}`} onClick={() => toggleSort('size')}>
+              size {sort === 'size' ? (sortDir === 'asc' ? '↑' : '↓') : ''}
+            </button>
+          </div>
+
          <ul className="file-list">
-          {files.map(f => (
-            <li key={f.name} className="file-entry">
-              <span className="file-entry-name">{f.name}</span>
-              <span className="file-entry-size">{fmt(f.size_bytes)}</span>
-              <button className="file-entry-dl" onClick={() => download(f.name)}>↓</button>
+            {cwd && !search && (
+              <li className="file-entry file-entry-dir" onClick={navigateUp}>
+                <span className="file-entry-icon">📁</span>
+                <span className="file-entry-name">..</span>
+              </li>
+            )}
+            {rows.length === 0 && (
+              <li className="file-browser-empty">no results</li>
+            )}
+            {rows.map(row => row.kind === 'dir' ? (
+              <li key={row.path} className="file-entry file-entry-dir" onClick={() => { setCwd(row.path); setSearch('') }}>
+                <span className="file-entry-icon">📁</span>
+                <span className="file-entry-name">{row.name}</span>
+                <span className="file-entry-size">{row.count} file{row.count !== 1 ? 's' : ''}</span>
+              </li>
+            ) : (
+              <li key={row.path} className="file-entry">
+                <span className="file-entry-icon">📄</span>
+                <span className="file-entry-name">{row.name}</span>
+                <span className="file-entry-size">{fmt(row.size)}</span>
+                <button className="file-entry-dl" onClick={() => download(row.path)}>↓</button>
              </li>
            ))}
          </ul>
+        </>
      )}
    </div>
  )
--- a/web/src/components/FolderPicker.tsx
+++ b/web/src/components/FolderPicker.tsx
@@ -1,9 +1,10 @@
-import { useRef } from 'react'
+import { useRef, useState } from 'react'
 import { useWaste } from '../store'

 export function FolderPicker() {
  const { setSharedFiles, activeNetworkId, sharedFilesByNetwork } = useWaste()
  const inputRef = useRef<HTMLInputElement>(null)
+  const [includeSubfolders, setIncludeSubfolders] = useState(true)

  const current = activeNetworkId ? sharedFilesByNetwork[activeNetworkId] : undefined
  const label = current && current.size > 0
@@ -16,7 +17,11 @@ export function FolderPicker() {
    const map = new Map<string, File>()
    for (let i = 0; i < fileList.length; i++) {
      const f = fileList[i]
-      map.set(f.name, f)
+      const rel = (f as File & { webkitRelativePath?: string }).webkitRelativePath
+      // Strip the root folder name prefix (first path segment) so paths are relative to the picked folder
+      const path = rel ? rel.split('/').slice(1).join('/') : f.name
+      if (!includeSubfolders && path.includes('/')) continue
+      map.set(path, f)
    }
    setSharedFiles(map)
    e.target.value = ''
@@ -40,6 +45,14 @@ export function FolderPicker() {
      >
        {label ?? '+ Share folder'}
      </button>
+      <label className="folder-picker-subfolders">
+        <input
+          type="checkbox"
+          checked={includeSubfolders}
+          onChange={e => setIncludeSubfolders(e.target.checked)}
+        />
+        include subfolders
+      </label>
    </div>
  )
 }
--- a/web/src/types.ts
+++ b/web/src/types.ts
@@ -29,6 +29,7 @@ export interface ChatMessage {
 export interface FileEntry {
  name: string
  size_bytes: number
+  path?: string  // relative path including filename, e.g. "docs/report.pdf"
 }

 export interface FileOffer {