mediaUrl(x.key)} poster={poster ? mediaUrl(poster) : undefined} kindOf={kindOf} kindLabel={KIND_LABEL} />
}} />
) : previewFolder ? (
) : previewRoot ? (
) : (
)
)
/* PINNED SEARCH + `···` (item 15), below `md` only. Item 7 of the previous
* ticket hid the desktop control cluster and put nothing in its place, so
* SORT became unreachable on a phone; both references carry exactly these two
* controls above the list. Search is page state, not a setting — a query is
* something you are doing, not something you have configured. */
const [query, setQuery] = useState('')
/* Search filters the KEY SPACE, so the tree still navigates: a path survives
* when a file under it matches and ColumnBrowser's own partition does the
* rest. One view, rather than a flat results list nobody asked for. Sort
* orders the files the way the wall already sorts its own. */
const q = query.trim()
/* SEGMENTS HIDE WHEN FOLDED, in every view (user 2026-09-23: *"we can just by default hide the
* segments, if they serve no practical purpose"*). A `.ts` chunk cannot play on its own — its
* stream's `.m3u8` beside it is the thing you open. The fold used to reach only the grid, so the
* columns and rows listed every chunk. */
const listed = useMemo(() => (settings.foldSegments ? objects.filter((o) => !isSegment(o.key)) : objects), [objects, settings.foldSegments])
const searched = useMemo(() => filterMedia(listed, q), [listed, q])
const sortedObjects = useMemo(
() => sortObjects(searched, settings.sortBy, settings.sortDir),
[searched, settings.sortBy, settings.sortDir],
)
const treeFolders = (level) => (folderTree?.[bucketMeta.id]?.folders ?? [])
.filter((p) => p.startsWith(level) && p.length > level.length && !p.slice(level.length, -1).includes('/'))
.map((p) => p.slice(level.length))
const scoped = prefix ? sortedObjects.filter((o) => o.key.startsWith(prefix)) : sortedObjects
const { folders: keyFolders, files: dirFiles } = partition(scoped, prefix)
/* THE COUNT COUNTS WHAT IS ON SCREEN. `partition` derives folders from file keys, so an EMPTY
* folder is invisible to it — the stats line said "2 folders" under a list showing three, the
* third being `03-scratch/`, which exists in `folderTree` and nowhere else. Both views draw the
* merged set now, so the tally is taken from the same place. */
const folders = [...new Set([...treeFolders(prefix), ...keyFolders])].sort()
const keySet = new Set(objects.map((o) => o.key))
const levelFiles = dirFiles
const systemCount = levelFiles.filter((o) => isSystemFile(o.key)).length
const rawFiles = levelFiles.filter((o) => !isSystemFile(o.key)).map((o) => ({ ...o, kind: kindOf(o) }))
const profile = profileOf(objects, rawFiles, systemCount)
const totalBytes = rawFiles.reduce((n, o) => n + (o.size ?? 0), 0)
const bucketFiles = objects.length
const bucketBytes = objects.reduce((n, o) => n + (o.size || 0), 0)
const crumbs = prefix ? prefix.replace(/\/$/, '').split('/') : []
/* the virtual root — one browser for the whole client: root row = the title,
* its children the buckets, stepping into one IS the bucket switch.
*
* ONE BUCKET GETS NO BUCKET LEVEL (one-bucket-consumer, kol-client-olina
* 2026-09-03): with a single bucket the second column was a row that named
* the only thing it could name, under a root that named the app — two levels
* to reach a folder. The virtual root collapses to the empty string, which
* makes every `slice(VROOT.length)` below a no-op and leaves column 0 as the
* bucket's own folders. Multi-bucket browse is untouched. */
const single = !bucketLevel && buckets.length <= 1
const ROOT = title
const label = bucketMeta.label || 'bucket'
const VROOT = single ? '' : `${ROOT}/${label}/`
/* THE PICKER'S TILES AND COUNTS BY DEFAULT (user 2026-10-23, the Hub's Media on a phone beside kol-website's media app:
* folders read bare, files drew a kind glyph). A consumer's `thumbnailFor` / `folderMeta` still win; without them an
* image file shows itself (the client's URL, lazy) and a folder counts the files under it in the loaded listing. */
const thumbOf = thumbnailFor ?? ((o) => (hasUrl && kindOf(o) === 'image'
? )})
: null))
const metaOf = folderMeta ?? ((path) => {
const pre = unroot(path).replace(/\/?$/, '/')
const n = objects.filter((o) => o.key.startsWith(pre) && !o.key.endsWith('/')).length
return n ? `${n} item${n === 1 ? '' : 's'}` : ''
})
const unroot = (p) => (VROOT && p.startsWith(VROOT) ? p.slice(VROOT.length) : p)
/* ONE LEVEL, ONE ANSWER. The column view merges the baked tree with the live partition inside its
* `partition` prop; the row view used the live partition alone and therefore disagreed with the
* columns about what a folder even is. This is that merge, lifted so both callers share it —
* folders from `folderTree` (real nodes, empty ones included) unioned with the ones derived from
* keys, plus the level's own files, which the row view never rendered at all. */
const rowLevel = (level, list = objects) => {
/* `partition` slices every key by `prefix` WITHOUT checking it matches, so it must be handed an
* already-scoped list. Given the whole bucket it cut four characters off every root key and
* drew `readme.md` as `me.md` and `video/` as `o/`. Scope first, always. */
const inLevel = level ? list.filter((o) => o.key.startsWith(level)) : list
const live = partition(inLevel, level)
const baked = treeFolders(level)
return {
folders: [...new Set([...baked, ...live.folders])].sort(),
files: sortObjects(live.files.filter((o) => !isSystemFile(o.key)), settings.sortBy, settings.sortDir),
}
}
useEffect(() => {
if (folderView !== 'columns') return undefined
const root = columnsRef.current?.querySelector('[tabindex="0"]')
if (!root) return undefined
const id = requestAnimationFrame(() => root.scrollTo({ left: root.scrollWidth, behavior: 'smooth' }))
return () => cancelAnimationFrame(id)
}, [folderView, prefix, atTitleRoot, pickedFile, bucketMeta.id])
if (error) return Error: {error}
/* NOT SELECTABLE (user 2026-09-23, superseding 2026-09-22's selectable crumbs: *"instead of this
* highlight, could we make a hover click to copy path?"*). A drag across the line painted the
* browser's selection block over it; the path is one click on the current crumb now. */
const crumbCls = (active) => `cursor-pointer select-none transition-colors ${active ? 'text-oq-96' : 'text-oq-48 hover:text-oq-64'}`
const fullPath = (tail = '') => [ROOT, ...(atTitleRoot ? [] : [label, ...crumbs]), ...(tail ? [tail] : [])].join('/')
/* ── THE WALL'S LIST, on the same surface (2026-09-22) ──────────────────────────────────────
* `flat` belongs to the FILE views and not to the tree (that ruling stands): a wall shows the
* folder's own files, or the whole subtree when flat is on. Grouping and segment-folding are the
* settings the wall always had. */
const wallKinds = new Set(settings.kinds ?? SETTINGS_BASE.kinds)
const wallSource = settings.flat
? scoped.map((o) => ({ ...o, displayKey: o.displayName ?? (prefix ? o.key.slice(prefix.length) : o.key) }))
: dirFiles
const wallVisible = wallKinds.has('system') ? wallSource : wallSource.filter((o) => !isSystemFile(o.key))
const wallGrouped = settings.groupVariants ? groupVariants(wallVisible) : wallVisible
const wallFiles = (settings.foldSegments ? groupSegments(wallGrouped) : wallGrouped)
.map((o) => ({ ...o, kind: kindOf(o), poster: posterFor(o.key, keySet) }))
const filtersOn = !!settings.filters
/* the bar filters FILES, and a tree is drawn from the files under it — so one filtered list
* serves both: the wall renders it, the tree is scoped to the keys in it.
* THE TREE'S LIST IS THE WHOLE BUCKET, not the folder you stand in (user 2026-09-30: open the
* bar at `brand/og/` and `logos`, `original`, `projects` vanished with no filter set). The
* columns draw every level up to the root, so a list scoped to `prefix` cut every sibling path
* the moment the bar mounted. */
const filterItems = isWall ? wallFiles : sortedObjects.filter((o) => !isSystemFile(o.key)).map((o) => ({ ...o, kind: kindOf(o), poster: posterFor(o.key, keySet), displayKey: o.displayName ?? o.key }))
const filterKinds = [...new Set(filterItems.map((o) => o.kind))].sort()
const filterTags = [...new Set(filterItems.flatMap((o) => o.tags ?? []))].sort()
/* favourites as a one-chip group: ContentFilters matches a value, so a starred file carries one */
const filterItemsFav = filterItems.map((o) => ({ ...o, starred: o.favourite ? 'favourite' : '' }))
const anyStarred = filterItemsFav.some((o) => o.starred)
/* ── THE BODY, one of four (2026-09-22) ────────────────────────────────────────────────────
* `treeBody` draws the columns or the rows over whatever object list it is handed — the whole
* key space, or the subset the filter bar left standing. `wallPane` is the same two file views
* the Files page rendered, in a pane of the browser's own height so the page does not jump
* between views. */
/* AT THE TITLE ROOT, ROWS AND GRID LIST THE BUCKETS (same ticket: they listed the bucket's
* folders under a crumb that named the title). One row / tile per bucket; a click opens it. */
const bucketList = buckets.length ? buckets : [bucketMeta]
const titleLevel = atTitleRoot && !single
/* what the root levels hold: above the title, the title as one folder; inside it, the buckets.
* Each is a folder with its own icon — a click highlights it, a double-click opens it. */
const previewRoot = (() => {
if (!titleLevel || pickedBucket == null) return null
if (atTop && pickedBucket === ROOT_KEY) {
const all = bucketList.map((b) => bucketTotals(b.id)).filter(Boolean)
return { key: ROOT_KEY, name: ROOT, icon: 'folder', facts: [
['Kind', 'folder'],
['Buckets', `${bucketList.length}`],
...(all.length === bucketList.length ? [['Items', `${all.reduce((n, x) => n + x.files, 0)}`], ['Size', formatSize(all.reduce((n, x) => n + x.bytes, 0))]] : []),
] }
}
const b = bucketList.find((x) => (x.id ?? x.label) === pickedBucket)
if (!b) return null
const tot = bucketTotals(b.id)
return { key: pickedBucket, name: b.label || 'bucket', icon: 'database', facts: [
['Kind', 'bucket'],
...(tot ? [['Items', `${tot.files}`], ['Size', formatSize(tot.bytes)]] : []),
...(b.writable != null ? [['Access', b.writable ? 'read · write' : 'read-only']] : []),
] }
})()
const rootItems = !titleLevel ? [] : atTop
? [{ key: ROOT_KEY, name: ROOT, icon: 'folder', open: goTitleRoot }]
: bucketList.map((b) => ({ key: b.id ?? b.label, name: b.label || 'bucket', icon: 'database', open: () => openBucket(b) }))
const treeBody = (keep) => {
const treeObjects = keep ? sortedObjects.filter((o) => keep.has(o.key)) : sortedObjects
return (
folderView === 'columns' || phone ? (
setSettings({ ...settings, columnWidths: { ...(settings.columnWidths ?? {}), [i]: px } })}
objects={treeObjects.filter((o) => !isSystemFile(o.key)).map((o) => ({ ...o, key: `${VROOT}${o.key}` }))}
prefix={single ? prefix : (atTitleRoot ? `${ROOT}/` : `${VROOT}${prefix}`)}
onPrefix={(v) => {
/* single: the browser's path IS the bucket path, no segment to strip */
if (single) { setAppRoot(false); setPrefix(v); return }
const [, seg, ...rest] = v.split('/')
const target = buckets.find((b) => b.label === seg)
if (!target && buckets.length) { setAppRoot(true); setPickedFile(null); setPrefix(''); return }
setAppRoot(false)
const real = rest.join('/')
if (target && target.id !== bucketMeta.id) switchBucket(target.id, real); else setPrefix(real)
}}
picked={pickedFile ? { ...pickedFile, key: `${VROOT}${pickedFile.key}` } : null}
onPick={(o) => setPickedFile(o ? { ...o, key: o.key.slice(VROOT.length) } : null)}
quickLook={quickLook && { ...quickLook, files: quickLook.files.map((o) => ({ ...o, key: `${VROOT}${o.key}` })) }}
onQuickLook={(q) => openQuickLook(q && { ...q, files: q.files.map((o) => ({ ...o, key: o.key.slice(VROOT.length) })) })}
urlOf={(o) => mediaUrl(o.key.slice(VROOT.length))}
kindOf={kindOf}
kindLabel={KIND_LABEL}
formatSize={formatSize}
formatDate={formatDate}
thumbnailFor={thumbOf}
folderMeta={metaOf}
/* the PROP wins when a consumer passes one; otherwise the `···`
owns it through settings (item 15) */
stackView={stackView ?? settings.stackView ?? 'list'}
renderDetails={(o) => detailsFor({ ...o, key: o.key.slice(VROOT.length) })}
renderPreview={(o) => {
const real = { ...o, key: o.key.slice(VROOT.length) }
if (isImage(real.contentType)) return
const poster = posterFor(real.key, keySet)
return mediaUrl(x.key)} poster={poster ? mediaUrl(poster) : undefined} kindOf={kindOf} kindLabel={KIND_LABEL} />
}}
/* THE COLUMNS SPEAK IN VIRTUAL PATHS. With more than one bucket every level is
* prefixed `/<bucket>/` so the stores share one tree — so a path coming OUT
* of the browser must be un-rooted before it reaches a file verb, or the store is
* asked to move `MEDIA/R2 · kol-media/img/x.jpg`, which it has never heard of. The
* row view needs none of this; it is already bucket-relative. */
onRowContextMenu={(e, payload) => menu.openAt(e, { ...payload, path: unroot(payload.path), ...(payload.o && { o: { ...payload.o, key: unroot(payload.o.key) } }) })}
dragFor={dragFor ? (path) => dragFor(unroot(path)) : undefined}
/* virtual paths again: only a level inside THIS bucket's root can take a file */
onDropFiles={dropFilesTo ? (files, path) => { if (!VROOT || path.startsWith(VROOT)) dropFilesTo(unroot(path))(files) } : undefined}
/* the band's keys come back virtual-rooted; the page keeps ONE selection, bucket-relative */
selectedKeys={VROOT ? new Set([...rowSelection].map((k) => `${VROOT}${k}`)) : rowSelection}
onSelectKeys={(keys, additive) => { marqueeSelect(keys.map(unroot), additive); if (!additive && keys.length === 1) selectAnchorRef.current = unroot(keys[0]) }}
onSelectClick={(key, e, keys) => selectRow(unroot(key), e, keys.map(unroot))}
/* the bucket rows under the title are SOURCES — `database`, not `folder` */
folderIcon={(path) => (!single && path.startsWith(`${ROOT}/`) && path.slice(ROOT.length + 1).split('/').filter(Boolean).length === 1 ? 'database' : 'folder')}
partition={(objs, level) => {
if (!single) {
if (level === '') return { folders: [`${ROOT}/`], files: [] }
if (level === `${ROOT}/`) return { folders: (buckets.length ? buckets : [bucketMeta]).map((b) => `${b.label || 'bucket'}/`), files: [] }
}
const live = partition(objs, level)
const baked = treeFolders(level.slice(VROOT.length))
return { folders: [...new Set([...baked, ...live.folders])].sort(), files: live.files }
}}
/>
</div>
) : (
/* ROW VIEW — the same level the column view draws, not a different one. It used to render
* `partition(scoped, prefix).folders` and nothing else, which lost two things: an EMPTY
* folder (partition derives folders from file keys, so a folder with no files under it
* does not exist to it — `folderTree` is where real nodes live, and the column view was
* already merging the two) and every FILE at the level. `#img/` drew 2 rows against the
* columns' 4. Folders first, then files, each expandable in place like a list view. */
/* SAME AREA AS THE COLUMNS. The row view used to be content-height, so the two folder
* views made the page jump between them and the blank space below the last row — where
* you right-click for "new folder" and drop to file something here — did not exist. It
* takes the column browser's own height now, from the same setting.
*
* The list IS the current folder, so it is a drop target for `prefix`, matching a column
* being a target for its level. Highlight via a data attribute for the same reason.
*
* THE COLUMN BROWSER'S PANE (user 2026-09-22): same border, radius and height, the list a
* `kol-column-browser-column` (its 4px block inset, its selected rules), and beside it the
* same preview the columns open — Finder's "Show preview", on by default (`rowPreview`). */
/* THE WRAPPER OWNS THE HEIGHT, not the pane (2026-09-22). Both folder views have to end on
* the same line — the count line under them jumps otherwise, and a consumer's fill height
* is ONE value for both — so the header comes out of this view's budget rather than being
* added to it. The pane takes what is left. */
<div ref={viewRef} className="flex flex-col gap-2" style={{ height: colH }}>
{/* the header labels the LIST, so it spans the list and stops where the preview starts */}
{rowCols && (
<RowHeader sortBy={settings.sortBy} sortDir={settings.sortDir} width={showRowPreview ? `calc(100% - ${previewWidth}px)` : '100%'}
cols={rowCols}
onResize={(key, px) => setSettings({ ...settings, rowColumnWidths: { ...rowColWidths(settings), [key]: px } })}
onSort={(sortBy, sortDir) => setSettings({ ...settings, sortBy, sortDir })} />
)}
<div className="relative border rounded flex overflow-hidden flex-1 min-h-0"
style={{ borderColor: 'var(--kol-oq-08)' }}>
<div className={`flex-1 min-w-0 flex flex-col${showRowPreview ? ' border-r' : ''}`} style={{ borderColor: 'var(--kol-oq-08)' }}>
<ul ref={rowsMarquee.ref} {...rowsMarquee.props}
/* the background deselects, here as in the columns */
onClick={(e) => { if (!e.target.closest('[data-marquee-key]')) { setRowSelection(new Set()); setPickedFile(null); setPickedFolder(null); setPickedBucket(null) } }}
className="relative kol-column-browser-column kol-row-browser flex-1 min-w-0 flex flex-col overflow-y-auto"
onContextMenu={titleLevel ? undefined : (e) => menu.openAt(e, { type: 'level', path: prefix })}
onDragOver={(e) => {
const files = dropFilesTo && isFileDrag(e)
const d = !isFileDrag(e) && dragFor?.(prefix)
if (!files && !d?.canDrop(prefix)) return
e.preventDefault()
e.currentTarget.dataset.dropOver = '1'
}}
/* THE HIGHLIGHT CLEARS HOWEVER THE DRAG ENDS (user 2026-09-22 — it stuck as a border).
* A drop on a folder row stops propagation, so this list's own onDrop never ran; the
* capture phase runs first. Leaving through a child fires on the child, so leave is
* "the pointer is no longer inside", not "the event target was the list". */
onDragLeave={(e) => { if (!e.currentTarget.contains(e.relatedTarget)) delete e.currentTarget.dataset.dropOver }}
onDropCapture={(e) => { delete e.currentTarget.dataset.dropOver }}
onDrop={(e) => {
if (dropFilesTo && isFileDrag(e)) { e.preventDefault(); dropFilesTo(prefix)(e.dataTransfer.files); return }
const d = !isFileDrag(e) && dragFor?.(prefix)
if (!d?.canDrop(prefix)) return
e.preventDefault()
d.onDrop(prefix)
}}>
{rowsMarquee.rect && <div className="kol-marquee" style={rowsMarquee.rect} />}
{titleLevel ? rootItems.map((it) => (
<FolderRow key={it.key} name={it.name} icon={it.icon} cols={rowCols}
selected={pickedBucket === it.key}
onClick={(e) => { e.stopPropagation(); setPickedBucket(it.key) }} onDoubleClick={it.open} />
)) : <>
{rowLevel('', treeObjects).folders.map((f) => {
const path = f
const open = rowsExpanded.has(path)
const order = visibleRowOrder(treeObjects)
return (
<Fragment key={f}>
<FolderRow
name={f} expanded={open}
markKey={path}
/* THE FOLDER YOU ARE IN IS NOT A SELECTION (user 2026-09-23) — it wears the trail
* mark, the columns' parent-folder tone, never the selected fill */
selected={rowSelection.has(path) || pickedFolder === path}
current={prefix === path}
onContextMenu={(e) => menu.openAt(e, { type: 'folder', path, targets: targetsFor(path) })}
drag={dragFor?.(path)}
dropFiles={dropFilesTo?.(path)}
meta={metaOf(path) || undefined}
cols={rowCols}
onToggle={() => toggleRow(path)}
onClick={(e) => { if (!selectRow(path, e, order)) rowPickFolder(path) }}
onDoubleClick={() => goFolder(path)}
/>
{open && <RowSubtree
level={path} depth={1} rowLevel={(lvl) => rowLevel(lvl, treeObjects)} expanded={rowsExpanded}
onToggle={toggleRow}
onOpenFolder={goFolder} onPickFolder={rowPickFolder} onPickFile={rowPickFile}
onOpenFile={(o) => { const lvl = rowLevel(o.key.slice(0, o.key.lastIndexOf('/') + 1), treeObjects).files; openQuickLook({ files: lvl, index: Math.max(0, lvl.findIndex((f) => f.key === o.key)) }) }}
selectRow={selectRow} order={order} selectedKeys={rowSelection}
onRowContextMenu={(e, payload) => menu.openAt(e, payload)} dragFor={dragFor} dropFilesTo={dropFilesTo}
formatDate={formatDate} folderMeta={metaOf} thumbnailFor={thumbOf} cols={rowCols}
pickedKey={pickedFolder ?? pickedFile?.key ?? null} currentKey={prefix}
/>}
</Fragment>
)
})}
{rowLevel('', treeObjects).files.map((o) => (
<FileRow key={o.key} o={o} formatDate={formatDate} thumb={thumbOf(o)} cols={rowCols}
selected={rowSelection.has(o.key) || pickedFile?.key === o.key}
onDoubleClick={() => { const lvl = rowLevel('', treeObjects).files; openQuickLook({ files: lvl, index: Math.max(0, lvl.findIndex((f) => f.key === o.key)) }) }}
onContextMenu={(e) => menu.openAt(e, { type: 'file', path: o.key, o, targets: targetsFor(o.key) })}
drag={dragFor?.(o.key)}
onClick={(e) => {
if (!selectRow(o.key, e, visibleRowOrder(treeObjects))) rowPickFile(o)
}} />
))}
</>}
</ul>
</div>
{showRowPreview && previewPane()}
</div>
</div>
)
)
}
/* THE GRID IS THE THIRD VIEW OF ONE SURFACE (user 2026-09-23, reversing the same day's "no pane,
* no fill height" for the wall: *"why did you not treat this like column and row, with container
* padding + preview pane? CONSISTENCY"*). Same bordered frame, same fill height, the tiles scroll
* inside it, the same preview pane beside them, the same count line under it — with the size
* slider at its right end, Finder's. */
const tileSize = settings.tileSize ?? 180
const rowSize = settings.rowSize ?? 'md'
/* the tile size is the GRID's, not a level's (user 2026-09-24: the slider vanished at the root
* levels) — one control, drawn wherever the grid is */
/* THE TREE VIEWS SCALE TOO (user 2026-09-30: *"we might want to scale everything on slider like we
* do in grid view"*) — in steps of the control ramp, not pixels, so a row is always a control height */
const RAMP = ['xs', 'sm', 'md', 'lg']
const rowSlider = (
<Slider readout="none" size={128} min={0} max={RAMP.length - 1} step={1} value={Math.max(0, RAMP.indexOf(rowSize))}
onChange={(v) => setSettings({ ...settings, rowSize: RAMP[v] })} aria-label="Row size" />
)
const sizeSlider = (
<Slider readout="none" size={128} min={100} max={360} step={20} value={tileSize}
onChange={(v) => setSettings({ ...settings, tileSize: v })} aria-label="Tile size" />
)
/* `hits` = a query's results: no folders, no root level, each file named by its whole path —
* in the tree views as a list, the rows' shape; the wall keeps its tiles */
const wallPane = (files, hits = false) => (
<div ref={viewRef} className="flex flex-col gap-2" style={{ height: colH }}>
<div className="relative border rounded flex overflow-hidden flex-1 min-h-0" style={{ borderColor: 'var(--kol-oq-08)' }}>
{/* THE MARQUEE IS THE PANE'S, not the tile grid's (user 2026-09-23: a drag only started where
* there were tiles — the grid is as tall as its tiles, the pane is the whole frame). The rows'
* band has always been on their full-height list; this is the grid catching up. */}
<div ref={gridMarquee.ref} {...gridMarquee.props}
className={`relative flex-1 min-w-0 overflow-y-auto p-4${showGridPreview ? ' border-r' : ''}`} style={{ borderColor: 'var(--kol-oq-08)' }}
/* THE CONTAINER IS A LEVEL, like a column (kol-client-olina 2026-09-23: *"context menu anywhere
* by right click"*). A tile's own menu stops the event first, so it still wins. */
onContextMenu={titleLevel ? undefined : (e) => menu.openAt(e, { type: 'level', path: prefix })}
onClick={(e) => { if (!e.target.closest('[data-marquee-key]')) { setRowSelection(new Set()); setPickedFile(null); setPickedFolder(null); setPickedBucket(null) } }}>
{gridMarquee.rect && <div className="kol-marquee" style={gridMarquee.rect} />}
{titleLevel && !hits ? (
<div className="grid gap-x-3 gap-y-5" style={{ gridTemplateColumns: `repeat(auto-fill, minmax(${tileSize}px, 1fr))` }}>
{rootItems.map((it) => (
<MediaTile key={it.key} preview={<Icon name={it.icon} size="100%" className="text-oq-48" />} name={it.name}
selected={pickedBucket === it.key}
onClick={(e) => { e.stopPropagation(); setPickedBucket(it.key) }} onDoubleClick={it.open} />
))}
</div>
) : <WallBody files={files} layout={hits && !isWall ? 'list' : 'grid'} tiles="media" cardMin={tileSize} onSorted={(list) => { gridOrderRef.current = list }}
/* THE GRID DRAWS THE LEVEL'S SUBFOLDERS, ahead of the files (same source: kol-client-olina
* 2026-09-23 — `projects/` read `0 files` over a blank pane). `flat` is the subtree's files
* and no folders, as it was. */
folders={settings.flat || smartMatches || hits ? [] : folders.map((f) => prefix + f)}
{...(hits && { renderName: (o) => o.key })}
onOpenFolder={goFolder}
onPickFolder={(path, e) => { if (selectRow(path, e, [...folders.map((f) => prefix + f), ...files.map((f) => f.key)])) return; rowPickFolder(path) }}
onFolderContextMenu={(e, path) => menu.openAt(e, { type: 'folder', path, targets: targetsFor(path) })}
onBackgroundClick={() => { setRowSelection(new Set()); setPickedFile(null); setPickedFolder(null); setPickedBucket(null) }}
sortBy={settings.sortBy} sortDir={settings.sortDir}
pageSize={settings.pageSize} listId={`${prefix}|${view}|${settings.flat}|${refreshKey}|${bucketMeta.id}`}
mediaUrl={mediaUrl} downloadUrl={downloadUrl} keySet={keySet} videoPreview={settings.videoPreview} formatDate={formatDate}
selected={rowSelection} onPick={(o, e, keys) => {
/* ⇧/⌘ ADD TO THE SELECTION HERE TOO (user 2026-09-23) — the same `selectRow` the rows use;
* a plain click is still a selection of one and still previews */
if (selectRow(o.key, e, keys)) return
setPickedFolder(null); setPickedFile(o)
}}
onOpen={(o, files) => openQuickLook({ files, index: Math.max(0, files.findIndex((f) => f.key === o.key)) })}
/* COPY AND DOWNLOAD LIVE IN THE MENU AND QUICK LOOK (user 2026-09-23) — as in the rows and the
* columns. The tile carries no buttons. */
onContextMenu={(e, o) => menu.openAt(e, { type: 'file', path: o.key, o, targets: targetsFor(o.key) })} />}
</div>
{showGridPreview && previewPane()}
</div>
</div>
)
/* The search modal's own ruling (2026-08-01) is that Enter COMMITS the query rather than navigating
* to whatever happened to be first — so `onExpand` is where a committed query lands, and here
* that means the top hit. Arrow-then-Enter and a click go through `onSelect`, same jump. */
const searchResults = rankMedia(objects, searchQuery, { limit: 50 }).map((o) => ({
id: o.key,
label: o.displayName ?? o.key.split('/').pop(),
hint: o.key.slice(0, o.key.lastIndexOf('/') + 1) || 'the bucket root',
group: KIND_LABEL[kindOf(o)] || 'File',
}))
/* THE SEARCH MODAL OPENS ON SOMEWHERE TO GO (user 2026-09-30: it opened blank in olina). */
const openFolder = (path) => { setAppRoot(false); goFolder(path) }
const leafOf = (path) => path.replace(/\/$/, '').split('/').pop()
const hintOf = (path) => dirOf(path) || 'the bucket root'
const defaultSuggestions = [
...Object.keys(folderRows ?? {}).filter((p) => folderRows[p]?.favourite).sort()
.map((p) => ({ id: p, label: leafOf(p), hint: hintOf(p), group: 'Favourites', icon: 'folder', run: () => openFolder(p) })),
...objects.filter((o) => o.favourite && !isSystemFile(o.key))
.map((o) => ({ id: o.key, label: leafOf(o.key), hint: hintOf(o.key), group: 'Favourites', icon: 'file' })),
...smartFolders.map((sf) => ({ id: `smart:${sf.id}`, label: sf.name, group: 'Smart folders', icon: 'folder', run: () => setActiveSmart(sf.id) })),
...[...new Set([...treeFolders(''), ...partition(objects.filter((o) => !isSystemFile(o.key)), '').folders])].sort()
.map((f) => ({ id: f, label: leafOf(f), group: 'Folders', icon: 'folder', run: () => openFolder(f) })),
]
const suggestions = typeof searchSuggestions === 'function' ? searchSuggestions(defaultSuggestions) : (searchSuggestions ?? defaultSuggestions)
const jumpTo = (key) => {
const o = objects.find((x) => x.key === key)
setSearchOpen(false); setSearchQuery('')
if (!o) return
setAppRoot(false)
setPrefix(o.key.slice(0, o.key.lastIndexOf('/') + 1))
pickFile(o)
}
/* A SMART FOLDER IS A SAVED QUERY (media D1 plan v2) — tags it must carry, kinds it may be, text
* in its path — shown flat, every match wherever it lives, as Finder's smart folders are. */
const smartMatches = activeSmartFolder ? objects.filter((o) => {
const q = activeSmartFolder.query ?? {}
if (isSystemFile(o.key)) return false
if ((q.tags ?? []).some((t) => !(o.tags ?? []).includes(t))) return false
if ((q.kinds ?? []).length && !q.kinds.includes(kindOf(o))) return false
if (q.text && !filterMedia([o], q.text).length) return false
return true
}).map((o) => ({ ...o, kind: kindOf(o), poster: posterFor(o.key, keySet), displayKey: o.displayName ?? o.key })) : null
/* A TYPED QUERY IS A RESULTS LIST (user 2026-09-30, reversing "a flat results list nobody asked
* for"): pruning the tree to matching paths hid the files one level down and read as "search only
* finds folders". While the bar holds a query, the tree views show every hit flat, each with its
* path; clearing it brings the tree back. The wall already was a flat list. */
const body = (filtered) => (smartMatches
? wallPane(filtered ?? smartMatches)
: filtered && barQuery.trim() ? wallPane(filtered, true)
: isWall
? wallPane(filtered ?? wallFiles)
: treeBody(filtered ? new Set(filtered.map((f) => f.key)) : null))
return (
<div ref={pageRef} {...press} className={`flex flex-col gap-6 ${className}`.trim()}>
<RowSize.Provider value={rowSize}>
<LibraryHeader title={title} buckets={buckets} bucketId={bucketMeta.id} appRoot={atTitleRoot} bucketMeta={bucketMeta} writable={writable} headerActions={headerActions} headerTrailing={headerTrailing} onClose={onHeaderClose} onTrash={trash ? () => setTrashOpen(true) : undefined}
onHome={goTitleRoot}
onBucket={(v) => { if (v === 'all') goTitleRoot(); else { setAppRoot(false); switchBucket(v) } }}
onSettings={onOpenSettings ?? (() => setSettingsOpen(true))} />
{/* THE BANNER SLOT — anything that must sit directly under the header and above the body.
* The upload drop zone is why it exists: a consumer rendering it AFTER the page put it
* below an 800px column browser, so pressing Upload scrolled you past the whole browser to
* reach the target you had just asked for. A slot is the fix; telling the consumer to
* re-order is not, because the header is ours and the body is ours and there was no
* between. */}
{banner}
<div className="flex flex-col gap-3">
{/* Breadcrumb (uppercase, active segment at full ink) · folder-view toggle
*
* AT 390 THIS ROW FAILED (ColumnBrowserStackMode items 3 + 7, kol-r2b2
* 2026-09-03, measured on a live site): breadcrumb, the folder-view
* toggle and the ROW·COLUMN pair share one `justify-between` line with
* no wrap or collapse rule, so the crumbs wrapped to two lines and
* `COLUMN` was cut off. Below `md` the crumb becomes ONE middle-elided
* path line and the toggles collapse into the settings drawer — where
* both already live, so nothing new was minted to hold them. Both
* references (iOS Files, Dropbox) put these behind a `···` too. */}
<div className="flex items-center justify-between gap-4">
{/* the elided line — first segment, an ellipsis for anything between,
* and the current one. Below `md` only. */}
<div className="flex md:hidden items-center gap-2 kol-mono-12 min-w-0">
<button className={crumbCls(atTitleRoot && !atTop)} onClick={single ? goTitleRoot : goTop}>{ROOT}</button>
{!atTitleRoot && bucketMeta.id && crumbs.length > 1 && (
<><span className="text-oq-32">/</span><span className="text-oq-32">…</span></>
)}
{!atTitleRoot && bucketMeta.id && (
<span className="flex items-center gap-2 min-w-0">
<span className="text-oq-32">/</span>
<button
className={`${crumbCls(true)} truncate`}
onClick={() => goFolder(crumbs.length ? crumbs.join('/') + '/' : '')}
>
{(crumbs[crumbs.length - 1] ?? label).toUpperCase()}
</button>
</span>
)}
</div>
<div className="hidden md:flex items-center gap-2 kol-mono-12">
<button className={crumbCls(atTitleRoot && (!atTop || pickedBucket === ROOT_KEY))} onClick={single ? goTitleRoot : goTop}>{ROOT}</button>
{/* A PICKED BUCKET ENDS THE CRUMB at the title level (user 2026-09-24: a selected folder
* must show in the crumb, as a selected file does — a bucket is a folder) */}
{titleLevel && !atTop && pickedBucket && rootItems.some((it) => it.key === pickedBucket) && (
<span className="flex items-center gap-2"><span className="text-oq-32 select-none">/</span>
<span className={crumbCls(true)}>{rootItems.find((it) => it.key === pickedBucket).name.toUpperCase()}</span>
</span>
)}
{!atTitleRoot && bucketMeta.id && (
<span className="flex items-center gap-2">
<span className="text-oq-32 select-none">/</span>
{crumbs.length === 0 && !pickedFile && !pickedFolder
? <CopyCrumb className={crumbCls(true)} label={label.toUpperCase()} path={fullPath()} />
: <button className={crumbCls(false)} onClick={() => goFolder('')}>{label.toUpperCase()}</button>}
</span>
)}
{!atTitleRoot && crumbs.map((seg, i) => {
const to = crumbs.slice(0, i + 1).join('/') + '/'
const last = i === crumbs.length - 1
const current = last && !pickedFile && !pickedFolder
return (
<span key={to} className="flex items-center gap-2">
<span className="text-oq-32 select-none">/</span>
{current
? <CopyCrumb className={crumbCls(true)} label={seg.toUpperCase()} path={fullPath()} />
: <button className={crumbCls(false)} onClick={() => goFolder(to)}>{seg.toUpperCase()}</button>}
</span>
)
})}
{/* THE PICKED FILE ENDS THE CRUMB IN EVERY VIEW (kol-client-olina 2026-09-23 — it was the
* columns' alone, so a file picked in rows showed its folder and never itself) */}
{pickedFile && pickedFile.key.startsWith(prefix) && (
<span className="flex items-center gap-2"><span className="text-oq-32 select-none">/</span>
<CopyCrumb className={crumbCls(true)} label={pickedFile.key.slice(prefix.length).toUpperCase()} path={fullPath(pickedFile.key.slice(prefix.length))} />
</span>
)}
{/* …and so does a picked folder */}
{!pickedFile && pickedFolder && pickedFolder !== prefix && pickedFolder.startsWith(prefix) && (
<span className="flex items-center gap-2"><span className="text-oq-32 select-none">/</span>
<CopyCrumb className={crumbCls(true)} label={pickedFolder.slice(prefix.length).replace(/\/$/, '').toUpperCase()} path={fullPath(pickedFolder.slice(prefix.length).replace(/\/$/, ''))} />
</span>
)}
</div>
{/* the control cluster is desktop-only — below `md` this is the same
* setting the drawer already carries, and nothing in this row survives 390.
*
* ONE SWITCH FOR FOUR VIEWS (the merge, 2026-09-22). Two views were a pair of words;
* four are an icon strip — the same reason Finder draws four glyphs and no labels.
* Beside it: the filter bar's funnel and search, which belong to every view now. */}
<div className="hidden md:flex items-center gap-4">
{/* FILTER AND SEARCH, ONE WELL (user 2026-09-23): the same chip and height as the view
* switch beside them — the bare filter frame sat shorter than the well, and search had
* wandered up to the header. Tooltips are the word, not a sentence. */}
<ViewToggle variant="icon" viewMode={null} onViewChange={() => {}} options={[
{ value: 'filter', label: 'Filter', icon: 'filter', pressed: filtersOn, onClick: () => setSettings({ ...settings, filters: !filtersOn }) },
{ value: 'search', label: 'Search', icon: 'search', dividerBefore: true, onClick: () => setSearchOpen(true) },
]} />
<Divider variant="vertical" />
<ViewToggle viewMode={view} onViewChange={setView} variant="icon" options={VIEW_OPTIONS} />
</div>
</div>
{/* PINNED ABOVE THE LIST, below `md` (item 15). Search sits here and not
inside the ContentFilters wall, because the wall is a DIFFERENT
SURFACE — on a phone it is a tab away, so a control living in it is
a control you cannot reach from the thing you are searching. */}
<div className="flex md:hidden items-center gap-2">
<SearchInput
value={query}
onChange={(e) => setQuery(e.target.value ?? '')}
onClear={() => setQuery('')}
placeholder={searchPlaceholder}
size="sm"
className="flex-1 min-w-0"
/>
{/* `···` — view mode and sort, the two the desktop cluster carries and
item 7 left with nowhere to go. `caret={false}`: an icon trigger is
already complete, and neither reference draws a chevron on it. */}
<MenuItem
label={<Icon name="more" size={16} />}
caret={false}
align="end"
size="sm"
buttonClassName="shrink-0 px-2"
>
{({ close }) => (
<div className="py-1 w-[200px]">
{STACK_VIEW_OPTIONS.map((opt) => (
<MenuDropdownItem
key={opt.value}
onClick={() => { setSettings({ ...settings, stackView: opt.value }); close() }}
shortcut={(settings.stackView ?? 'list') === opt.value ? <Icon name="check" size={11} /> : undefined}
>
{opt.label}
</MenuDropdownItem>
))}
<MenuDropdownDivider />
{SORT_OPTIONS.map((opt) => (
<MenuDropdownItem
key={opt.value}
/* tapping the ACTIVE key flips the direction, which is how
both references let you reverse without a second control */
onClick={() => {
const same = (settings.sortBy ?? 'name') === opt.value
setSettings({
...settings,
sortBy: opt.value,
sortDir: same && settings.sortDir !== 'desc' ? 'desc' : 'asc',
})
close()
}}
shortcut={(settings.sortBy ?? 'name') === opt.value
? <Icon name={settings.sortDir === 'desc' ? 'arrow-up' : 'arrow-down'} size={11} />
: undefined}
>
{opt.label}
</MenuDropdownItem>
))}
{onKinds && (
<>
<MenuDropdownDivider />
<MenuDropdownItem onClick={() => { onKinds(); close() }} shortcut="K">File formats</MenuDropdownItem>
</>
)}
</div>
)}
</MenuItem>
</div>
{searchOpen && (
<CommandOverlay
open
onClose={() => { setSearchOpen(false); setSearchQuery('') }}
query={searchQuery}
onQueryChange={setSearchQuery}
placeholder={searchPlaceholder}
results={searchResults}
onExpand={() => searchResults[0] && jumpTo(searchResults[0].id)}
onSelect={(item) => (item.run ? item.run() : jumpTo(item.id))}
suggestions={suggestions}
enterLabel="Go to file"
onOpenResults={(q) => { setSettings({ ...settings, filters: true }); setBarQuery(q) }}
/>
)}
{quickLookFolder && (
<FullscreenOverlay open onClose={() => setQuickLookFolder(null)} scrim>
{quickLookFolder === ROOT_KEY
? previewRoot && <ContainerPreview name={previewRoot.name} icon={previewRoot.icon} facts={previewRoot.facts} width={420} />
: <FolderPreview path={quickLookFolder} objects={objects} width={420} formatDate={formatDate} />}
</FullscreenOverlay>
)}
{quickLook && (
<MediaInspector files={quickLook.files} index={quickLook.index} onClose={closeQuickLook} mediaUrl={mediaUrl} downloadUrl={downloadUrl} hasUrl={hasUrl} keySet={keySet} showNav={rowSelection.size > 1}
onEdit={canEdit ? (f) => { closeQuickLook(); openEditor(f) } : undefined}
onPrev={() => stepQuickLook(-1)} onNext={() => stepQuickLook(1)} />
)}
{editing?.mode === 'edit' && (
<FileEditorHost o={editing.o} client={client} bucket={bucketKey} onClose={() => setEditing(null)} onSaved={afterEdit} assets={attachables} />
)}
{editing?.mode === 'new' && (
<DocumentEditor mode="new" folder={editing.folder} draft={{ bucket: bucketKey, key: `${editing.folder}.new-document` }} assets={attachables}
onCreate={createDocument} onClose={() => setEditing(null)} />
)}
{settingsOpen && (
<MediaSettings bucketMeta={bucketMeta} settings={settings} profile={profile} onChange={setSettings} onReset={() => setSettings(null)} onClose={() => setSettingsOpen(false)} settingsFooter={settingsFooter} />
)}
{trashOpen && trash && (
<TrashPanel trash={trash} onClose={() => setTrashOpen(false)} run={runAction} confirm={modal.confirm} />
)}
{/* SMART FOLDERS — one chip each; a chip shows its matches flat in place of the body */}
{canSmart && (smartFolders.length > 0 || canWrite) && !atTitleRoot && (
<div className="flex flex-wrap items-center gap-2">
<span className="kol-mono-12 text-fg-48">Smart folders</span>
{smartFolders.map((sf) => (
<Tag key={sf.id} variant="secondary" size="sm" hash={false} active={activeSmart === sf.id}
onClick={() => setActiveSmart((a) => (a === sf.id ? null : sf.id))}
onRemove={canWrite ? () => deleteSmart(sf) : undefined}>{sf.name}</Tag>
))}
{canWrite && <Button variant="nav" size="xs" iconLeft="plus" onClick={saveSmart}>New smart folder</Button>}
</div>
)}
{/* THE FILTER BAR, above whichever body is mounted (2026-09-22). It filters FILES, so the
* tree is scoped to the keys it leaves and the wall renders them directly. Off by default
* — the funnel in the crumb row turns it on. */}
{filtersOn ? (
<ContentFilters
items={filterItemsFav}
title="Files"
totalCount={filterItems.length}
searchKeys={['displayKey']}
searchValue={barQuery}
onSearchChange={setBarQuery}
filterGroups={[{ label: 'Kind', key: 'kind', values: filterKinds }, ...(filterTags.length ? [{ label: 'Tags', key: 'tags', values: filterTags }] : []), ...(anyStarred ? [{ label: 'Favourites', key: 'starred', values: ['favourite'] }] : [])]}
mutuallyExclusiveFilters={['kind']}
/* ONE FUNNEL, NOT TWO (2026-09-22): the crumb row's funnel mounts this bar AND opens
* its panel, and the bar's own funnel closes the bar — the same switch from either
* end, instead of two controls that each do half of it. */
filtersOpen
onFiltersOpenChange={(open) => { if (!open) setSettings({ ...settings, filters: false }) }}
renderItem={(filtered) => body(filtered)}
/>
) : body(null)}
{/* THE GAPS MATCH ABOVE AND BELOW (user 2026-09-21: "what was unclear about matching the
* gap above to below"). This carried `mt-2` while the crumb row's icon toggle made that
* row 8px taller than its text; the toggle was cut 2026-09-22, the crumb row is text
* height again, and one shared `gap-3` puts both gaps level on its own. */}
{/* THE COUNT LINE IS EVERY VIEW'S (user 2026-09-23) — and in the grid it carries the tile-size
* slider at its right end, bare: no glyph, no readout (Finder's). */}
{atTitleRoot && !single ? (
<div className="flex items-center justify-between gap-4 h-4">
<p className="kol-mono-12 text-fg-48" hidden={!showCount}>
{atTop ? '1 folder' : `${bucketList.length} ${bucketList.length === 1 ? 'bucket' : 'buckets'}`}
{folderTree && ` · ${Object.values(folderTree).reduce((n, t) => n + (t.files ?? 0), 0)} files · ${formatSize(Object.values(folderTree).reduce((n, t) => n + (t.bytes ?? 0), 0))}`}
</p>
{isWall ? sizeSlider : !phone && rowSlider}
</div>
) : isWall ? (
/* ONE LINE'S HEIGHT, like the other views' count line — the slider is 24px tall and made
* this row 8px taller than the fill budget, so the page scrolled by that much */
<div className="flex items-center justify-between gap-4 h-4">
<p className="kol-mono-12 text-fg-48" hidden={!showCount}>
{!settings.flat && folders.length > 0 && `${folders.length} folder${folders.length > 1 ? 's' : ''} · `}{wallFiles.length} {wallFiles.length === 1 ? 'file' : 'files'} · {formatSize(wallFiles.reduce((n, o) => n + (o.size ?? 0), 0))}
</p>
{sizeSlider}
</div>
) : showCount && (
<p className="kol-mono-12 text-fg-48">
{folders.length > 0 && `${folders.length} folder${folders.length > 1 ? 's' : ''} · `}
{rawFiles.length} {rawFiles.length === 1 ? 'file' : 'files'} · {formatSize(totalBytes)}
{/* THE GREY TAIL TOTALS WHERE YOU STAND (kol-client-olina 2026-09-23): the bucket at the
* root, the current folder recursively below it. Hidden when it would repeat the
* bright part — a leaf has nothing beneath it to add. */}
{!prefix && rawFiles.length !== bucketFiles && <span className="text-fg-32">{' · bucket: '}{bucketFiles} files · {formatSize(bucketBytes)}</span>}
{prefix && scoped.length !== levelFiles.length && <span className="text-fg-32">{` · in ${crumbs.at(-1)}: `}{scoped.length} files · {formatSize(scoped.reduce((n, o) => n + (o.size || 0), 0))}</span>}
{systemCount > 0 && <span className="text-fg-32">{' · '}{systemCount} system files hidden</span>}
</p>
)}
{void onOpen}
{/* ONE MENU FOR EVERY ROW. `useContextMenu` carries the payload from whichever row opened
* it, so this is a single instance rather than one per row, and the entries are built from
* what `fileActions` actually supplies. IT MOUNTS ON A READ-ONLY BUCKET TOO (kol-website,
* 2026-10-08: on B2 "I cant right click to get context modal … cant download assets"): Copy URL
* and Download are read verbs — the client's URLs — and gating the whole menu on `canWrite`
* took them away with the write verbs. `fa` is the write seam: empty when the bucket cannot
* be written, so every write verb below folds away and the read verbs stay. */}
{(() => { const fa = canWrite ? fileActions : {}; return (
<ContextMenu menu={menu}>
{(target) => {
if (!target) return null
const isFolder = target.type === 'folder'
const isLevel = target.type === 'level'
/* A SELECTION OF MORE THAN ONE takes over the verbs that can act on a set. Rename is
* not one of them — renaming five things to one name is not a thing — so it stays
* single and disappears from a multi-selection rather than lying about what it does. */
const many = (target.targets ?? []).length > 1 ? target.targets : null
const custom = (fa.items ?? []).filter((it) => !it.when || it.when(target))
const customItems = custom.length > 0 && (
<>
<MenuDropdownDivider />
{custom.map((it) => (
<MenuDropdownItem key={it.label} iconLeft={it.icon ? <Icon name={it.icon} size={14} /> : undefined} onClick={() => runAction(() => it.run(target))}>{it.label}</MenuDropdownItem>
))}
</>
)
if (many) {
return (
<>
<MenuDropdownItem disabled>{many.length} selected</MenuDropdownItem>
<MenuDropdownDivider />
{fa.move && (
<MenuDropdownItem iconLeft={<Icon name="arrow-right" size={14} />} onClick={() => doBatch(many, 'move', 'Move')}>Move {many.length} to…</MenuDropdownItem>
)}
{hasUrl && many.every((p) => !p.endsWith('/')) && (
<>
<MenuDropdownItem iconLeft={<Icon name="copy" size={14} />} onClick={() => doCopyUrl(many)}>Copy {many.length} URLs</MenuDropdownItem>
<MenuDropdownItem iconLeft={<Icon name="download" size={14} />} onClick={() => doDownload(many)}>Download {many.length}</MenuDropdownItem>
{canTag && <MenuDropdownItem iconLeft={<Icon name="hash-01" size={14} />} onClick={() => doTags(many)}>Add tags to {many.length}…</MenuDropdownItem>}
</>
)}
{fa.remove && (
<MenuDropdownItem iconLeft={<Icon name="trash" size={14} />} onClick={() => doBatch(many, 'remove', 'Delete')}>Delete {many.length}</MenuDropdownItem>
)}
{customItems}
</>
)
}
const qlFile = onPickFile && target.type === 'file' ? objects.find((o) => o.key === target.path) : null
const insFile = onInsert && target.type === 'file' ? (objects.find((o) => o.key === target.path) ?? target.o) : null
return (
<>
{insFile && (!canInsert || canInsert(insFile)) && (
<>
<MenuDropdownItem iconLeft={<Icon name="plus" size={14} />} onClick={() => { onInsert(insFile); close() }}>Insert</MenuDropdownItem>
<MenuDropdownDivider />
</>
)}
{/* A PICKER'S TAP SELECTS (`tapSelects`), so Quick Look needs a door of its own on a
* phone — the menu (kol-fxr 2026-10-08). Only with `onPickFile`; others are unchanged. */}
{qlFile && (
<>
<MenuDropdownItem iconLeft={<Icon name="eye-on" size={14} />} onClick={() => openQuickLook({ files: [qlFile], index: 0 })}>Quick Look</MenuDropdownItem>
<MenuDropdownDivider />
</>
)}
{fa.createFolder && (
<MenuDropdownItem iconLeft={<Icon name="folder" size={14} />} onClick={() => doCreateFolder(isFolder ? target.path : (isLevel ? target.path : prefix))}>
New folder{isFolder ? ` in ${target.path.replace(/\/$/, '').split('/').pop()}` : ''}
</MenuDropdownItem>
)}
{/* NEW DOCUMENT is the writing page (a name, a type, fields for markdown); New file stays for
a client that cannot write text — it makes the empty file and nothing else */}
{canNewDoc ? (
<MenuDropdownItem iconLeft={<Icon name="file" size={14} />} onClick={() => newDocument(isFolder ? target.path : (isLevel ? target.path : prefix))}>
New document…
</MenuDropdownItem>
) : fa.createFile && (
<MenuDropdownItem iconLeft={<Icon name="file" size={14} />} onClick={() => doCreateFile(isFolder ? target.path : (isLevel ? target.path : prefix))}>
New file
</MenuDropdownItem>
)}
{dropFilesTo && !(target.type === 'file') && (
<MenuDropdownItem iconLeft={<Icon name="upload" size={14} />} onClick={() => doUpload(target.path)}>
{isFolder ? `Upload into ${target.path.replace(/\/$/, '').split('/').pop()}…` : 'Upload here…'}
</MenuDropdownItem>
)}
{!isLevel && <MenuDropdownDivider />}
{!isLevel && fa.rename && (
<MenuDropdownItem iconLeft={<Icon name="edit" size={14} />} onClick={() => doRename(target.path, isFolder)}>Rename</MenuDropdownItem>
)}
{!isLevel && fa.move && (
<MenuDropdownItem iconLeft={<Icon name="arrow-right" size={14} />} onClick={() => doMove(target.path)}>Move to…</MenuDropdownItem>
)}
{/* A FOLDER GETS COPY URL TOO (user 2026-09-23) — through the SAME `mediaUrl`
seam a file goes through, so what a folder URL means is the consumer's call
(a CDN prefix, a listing, a signed path) and never this page's guess. No
Download: a folder is not an object to fetch. */}
{hasUrl && !isLevel && (
<MenuDropdownItem iconLeft={<Icon name="copy" size={14} />} onClick={() => doCopyUrl([target.path])}>Copy URL</MenuDropdownItem>
)}
{hasUrl && target.type === 'file' && (
<MenuDropdownItem iconLeft={<Icon name="download" size={14} />} onClick={() => doDownload([target.path])}>Download</MenuDropdownItem>
)}
{!isLevel && canTag && (
<MenuDropdownItem iconLeft={<Icon name="hash-01" size={14} />} onClick={() => doTags([target.path])}>Tags…</MenuDropdownItem>
)}
{!isLevel && canFavourite && (
<MenuDropdownItem iconLeft={<Icon name={isFavourite(target.path) ? 'star-solid' : 'star'} size={14} />} onClick={() => toggleFavourite(target.path)}>
{isFavourite(target.path) ? 'Remove from favourites' : 'Add to favourites'}
</MenuDropdownItem>
)}
{target.type === 'file' && canEdit && editKindOf(target.o ?? { key: target.path }) && (
<MenuDropdownItem iconLeft={<Icon name="edit" size={14} />} onClick={() => openEditor(objects.find((o) => o.key === target.path) ?? { key: target.path })}>Edit</MenuDropdownItem>
)}
{!isLevel && fa.remove && (
<>
<MenuDropdownDivider />
<MenuDropdownItem iconLeft={<Icon name="trash" size={14} />} onClick={() => doDelete(target.path, isFolder)}>Delete</MenuDropdownItem>
</>
)}
{customItems}
</>
)
}}
</ContextMenu>
) })()}
{busyAction && <span className="sr-only" role="status">Working…</span>}
{/* THE TAB PILL (item 16) — floats over the list, so the list owes it
room or its last row sits under the bar forever.
THE SPACER GOES LAST, AND THAT IS THE WHOLE POINT
(TabBarSpacerAboveTheList, kol-r2b2 2026-09-04). `MobileTabBar` is
`fixed`, so where it sits in the tree is irrelevant — the SPACER is
in NORMAL FLOW, so its position is everything. Rendered before the
list it failed twice at once: a 56px hole punched into the gap under
the pinned search, and the last row still running 99px under the
bar. The comment above named the failure it was meant to prevent and
the block sat in the wrong place anyway. Below `md` only; above it
the 2026-08-26 one-view ruling stands. */}
{tabs?.length > 0 && (
<>
<div className="md:hidden" aria-hidden="true" style={{ height: TABBAR_H }} />
<TabsRow look="stacked" placement="phone" tabs={tabs} value={activeTab} onChange={onTabChange} />
</>
)}
</div>
</RowSize.Provider>
</div>
)
}
/* ── THE WALL, as a body ────────────────────────────────────────────────────
* The grid / list of files, its paging and its inspector, lifted out of
* `MediaLibraryLibrary` so ONE surface can render it beside the folder views
* (the merge, user 2026-09-22: "they both just display files"). The page above
* it owns the listing, the filtering and the selection; this owns the tiles.
*
* `renderName` / `renderActions` are seams because the standalone wall edits a
* name in place and the merged surface does not — the markup is the same either
* way, which is the whole reason this is one component and not two.
*/
/* The kinds that ARE a document — the ones whose page is worth zooming into a tile. */
const DOC_KINDS = new Set(['markdown', 'json', 'yaml', 'text', 'code'])
/* THE TILE MEASURES ITSELF (user 2026-09-23: *"is nothing about the thumbnails responsive?"*).
* A document in a tile is zoomed, and the zoom was a fixed step — so the same file read one size
* in a 260px card and another in a 400px one, because `zoom` reflows the page: at zoom z a
* `width: 100%` page lays out at box/z CSS pixels. Solving for a CONSTANT page width keeps the
* text the same physical size at every tile size: z = box / PAGE. That number cannot be derived
* in CSS from the box, which is why this measures.
*
* `PAGE` is the width the page is laid out AT, not a paper size: 720 is where the doc page's
* 24px padding, prose measure and code blocks read as a page rather than as a column of wrap. */
/* CODE IS NOT PROSE, so it is not laid out on a prose page (user 2026-09-23: *"code is small here
* in the container"*). A narrower target page means a bigger zoom for the same box, which is what
* makes 60-column code readable in a tile where a 720px page turned it into texture. */
const DOC_PAGE_W = 720
const CODE_PAGE_W = 460
const pageWidthFor = (kind) => (kind === 'markdown' || kind === 'text' ? DOC_PAGE_W : CODE_PAGE_W)
const DOC_ZOOM_MIN = 0.18
const DOC_ZOOM_MAX = 0.6
function DocThumb({ children, className, onClick, pageWidth = DOC_PAGE_W }) {
const box = useRef(null)
const [zoom, setZoom] = useState(null)
useEffect(() => {
const el = box.current
if (!el || typeof ResizeObserver === 'undefined') return undefined
const measure = () => {
const w = el.getBoundingClientRect().width
if (!w) return
setZoom(Math.min(DOC_ZOOM_MAX, Math.max(DOC_ZOOM_MIN, Math.round((w / pageWidth) * 100) / 100)))
}
measure()
const ro = new ResizeObserver(measure)
ro.observe(el)
return () => ro.disconnect()
}, [pageWidth])
return (
<div ref={box} className={className} onClick={onClick} style={zoom ? { '--kol-thumb-zoom': zoom } : undefined}>
{children}
</div>
)
}
export function WallBody({
files, layout = 'list', sortBy = 'name', sortDir = 'asc', pageSize = 200, listId = '', cardMin = 260,
mediaUrl, downloadUrl, keySet, videoPreview, formatDate = defaultFormatDate,
selected, selectMode = false, onToggleSelect, onSorted, onContextMenu, onPick,
/* the media grid's folder tiles — see the page's `wallPane` */
folders = [], onOpenFolder, onPickFolder, onFolderContextMenu,
/* ONE INSPECTOR (user 2026-09-23). Given `onOpen`, the wall hands the open UP and keeps no
* lightbox of its own — otherwise a page that also opens one (space, a row double-click) ends up
* with two stacked overlays of the same file. The standalone wall passes nothing and keeps its
* own, exactly as it was. */
onOpen,
renderName = (o) => o.displayKey?.split('/').pop() ?? o.key.split('/').pop(),
renderActions,
/* `tiles="media"` (2026-09-23) — the file manager's grid: `MediaTile`, preview over name, no card
* and no buttons (the verbs live in the right-click menu and Quick Look). `card` is the site
* wall's `ContentCard` and stays the default, so an embedded wall renders exactly as before. */
tiles = 'card',
/* the grid's drag-select band and its empty-space click — both the page's, like the rows' */
marquee, onBackgroundClick,
}) {
const PAGE = pageSize || Infinity
const [visible, setVisible] = useState(PAGE)
const [lastListId, setLastListId] = useState(listId)
const [lightboxIndex, setLightboxIndex] = useState(null)
if (listId !== lastListId) { setLastListId(listId); setVisible(PAGE) }
if (layout === 'off') return null
/* ONE PREVIEWER — `KindPreview`, as the column pane uses. An image is the caller's <img>, a
* video keeps its sibling poster when the bucket has one, and every other kind falls through. */
const renderThumb = (o, onClick) => {
const kind = kindOf(o)
const poster = (isVideo(o.contentType) || kind === 'playlist') ? posterFor(o.key, keySet) : null
const imgSrc = isImage(o.contentType) ? mediaUrl(o.key) : poster && videoPreview !== 'none' ? mediaUrl(poster) : null
if (imgSrc) return <img src={imgSrc} alt="" loading="lazy" className={onClick ? 'cursor-zoom-in' : undefined} onClick={onClick || undefined} />
if (isVideo(o.contentType) && videoPreview === 'none') {
return (
<div className={`w-full h-full flex items-center justify-center bg-oq-04 overflow-hidden${onClick ? ' cursor-zoom-in' : ''}`} onClick={onClick || undefined}>
<span className="kol-mono-12 text-fg-48">video</span>
</div>
)
}
/* ONE LADDER (user 2026-09-23). Every kind that is not the caller's own image goes through
* `KindPreview` at `fit="tile"` — audio gets the same tile the pane shows, a PDF its first
* page, a document its zoomed page. The glyph branch that stood here was a second ladder, and
* a second ladder is the thing this pass exists to delete: a glyph is for a FOLDER. */
const cls = `kol-media-thumb w-full h-full flex items-center justify-center bg-oq-04 overflow-hidden${onClick ? ' cursor-zoom-in' : ''}`
const preview = <KindPreview o={o} fit="tile" urlOf={(x) => mediaUrl(x.key)} poster={poster ? mediaUrl(poster) : undefined} kindOf={kindOf} kindLabel={KIND_LABEL} />
if (DOC_KINDS.has(kind)) {
return <DocThumb className={cls} pageWidth={pageWidthFor(kind)} onClick={onClick || undefined}>{preview}</DocThumb>
}
return <div className={cls} onClick={onClick || undefined}>{preview}</div>
}
const sorted = sortFiles(files, sortBy, sortDir)
onSorted?.(sorted)
const shown = sorted.slice(0, visible)
const more = sorted.length - shown.length
const isSelected = (key) => !!selected?.has(key)
const openAt = (o, idx) => (onOpen ? onOpen(o, sorted) : setLightboxIndex(idx))
return (
<div className="flex flex-col gap-3">
{sorted.length === 0 && !(layout === 'grid' && tiles === 'media' && folders.length) ? null : layout !== 'grid' ? (
<div className="flex flex-col">
{shown.map((o, idx) => (
<ContentRow key={o.key} variant="default" media={renderThumb(o, null)} title={renderName(o)} date={formatDate(o.uploaded)} size={formatSize(o.size)}
actions={renderActions?.(o, true)} selected={isSelected(o.key)}
onContextMenu={onContextMenu ? (e) => onContextMenu(e, o) : undefined}
onDoubleClick={() => openAt(o, idx)}
onClick={selectMode ? (e) => onToggleSelect?.(idx, o.key, e.shiftKey) : onPick ? (e) => onPick(o, e, sorted.map((f) => f.key)) : undefined} />
))}
</div>
) : tiles === 'media' ? (
<div ref={marquee?.ref} {...marquee?.props} className="relative grid gap-x-3 gap-y-5"
style={{ gridTemplateColumns: `repeat(auto-fill, minmax(${cardMin}px, 1fr))` }}
onClick={(e) => { if (!e.target.closest('[data-marquee-key]')) onBackgroundClick?.() }}>
{marquee?.rect && <div className="kol-marquee" style={marquee.rect} />}
{folders.map((path) => (
<MediaTile key={path} markKey={path} preview={<Icon name="folder" size="100%" className="text-oq-48" />}
name={path.replace(/\/$/, '').split('/').pop()} selected={isSelected(path)}
onContextMenu={onFolderContextMenu ? (e) => onFolderContextMenu(e, path) : undefined}
onDoubleClick={() => onOpenFolder?.(path)}
onClick={onPickFolder ? (e) => onPickFolder(path, e) : undefined} />
))}
{shown.map((o, idx) => (
<MediaTile key={o.key} markKey={o.key} preview={renderThumb(o, null)} name={renderName(o)} selected={isSelected(o.key)}
onContextMenu={onContextMenu ? (e) => onContextMenu(e, o) : undefined}
onDoubleClick={() => openAt(o, idx)}
onClick={onPick ? (e) => onPick(o, e, sorted.map((f) => f.key)) : undefined} />
))}
</div>
) : (
<div className="grid gap-3" style={{ gridTemplateColumns: `repeat(auto-fill, minmax(${cardMin}px, 1fr))` }}>
{shown.map((o, idx) => (
<ContentCard key={o.key} variant="default" media={renderThumb(o, null)}
control={<ActionButton chrome="media" icon="download" confirmIcon="check" label="Download" confirmLabel="Downloaded" href={downloadUrl(o.key)} />}
controlStart={selectMode ? <ToggleCheckbox variant="media" checked={isSelected(o.key)} onChange={() => onToggleSelect?.(idx, o.key, false)} onClick={(e) => e.stopPropagation()} aria-label={`Select ${o.key}`} /> : undefined}
title={renderName(o)} date={formatDate(o.uploaded)} size={<SizeOrDownload href={downloadUrl(o.key)}>{formatSize(o.size)}</SizeOrDownload>}
actions={renderActions?.(o)} selected={isSelected(o.key)}
onContextMenu={onContextMenu ? (e) => onContextMenu(e, o) : undefined}
/* ONE GESTURE SET ACROSS THE THREE VIEWS (2026-09-23): click selects, double-click
* opens, right-click is the menu. The media used to open on a single click, which
* made the grid the one view where a click did something else. */
onDoubleClick={() => openAt(o, idx)}
onClick={selectMode ? (e) => onToggleSelect?.(idx, o.key, e.shiftKey) : onPick ? (e) => onPick(o, e, sorted.map((f) => f.key)) : undefined} />
))}
</div>
)}
{more > 0 && (
<button type="button" onClick={() => setVisible((v) => v + PAGE)} className="kol-mono-12 text-fg-48 hover:text-fg-default transition-colors self-start py-2">
Show {Math.min(more, PAGE)} more · {more} remaining
</button>
)}
{lightboxIndex !== null && !onOpen && (
<MediaInspector files={sorted} index={lightboxIndex} onClose={() => setLightboxIndex(null)} mediaUrl={mediaUrl} downloadUrl={downloadUrl} keySet={keySet}
onPrev={() => setLightboxIndex((i) => (i - 1 + sorted.length) % sorted.length)} onNext={() => setLightboxIndex((i) => (i + 1) % sorted.length)} />
)}
</div>
)
}
/* ══ LIBRARY — the content-filters wall ═══════════════════════════════════ */
export function MediaLibraryLibrary({
client, title = 'MEDIA', bucket, onBucketChange, prefix = '', defaults, settings: settingsProp, onSettingsChange,
headerActions, headerTrailing, refreshKey, header = true, stats = true, settingsFooter, className = '', banner,
/* the same pill the browse page takes — the wall is one of the surfaces it
switches between, so it has to carry it too (item 16) */
tabs, activeTab, onTabChange,
/* A SEAM ON ONE PAGE IS A SEAM ON BOTH, when the field is one both render
* (FormatDateSkipsTheLibraryPage, kol-r2b2 2026-09-04). This reached
* `MediaLibraryBrowse` and not here, so a consumer passing ONE props object
* to both got `19.6.2026` on the Browse tab and `2026-06-19` on the Files tab
* — two formats for one field, one tap apart. The desktop stack had the same
* mismatch; the tab pill just moved the two halves close enough to see it.
*
* THE RULE, WIDENED — the fourth defect of this exact shape (`settingsFooter`
* documented and hardcoded past · `thumbnailFor` and `folderMeta` not
* forwarded · now this). These two pages are ONE SURFACE SPLIT IN TWO and a
* consumer hands the same props object to both, so: a prop naming how a
* SHARED FIELD renders is added to BOTH pages in the same edit. Props about a
* concept only one page has stay put — `thumbnailFor`, `folderMeta` and
* `stackView` are folder and stack concepts and are correctly absent here. */
formatDate = defaultFormatDate,
}) {
const [ownBucket, setOwnBucket] = useState(bucket)
const bucketId = bucket ?? ownBucket
const lib = useBucketLibrary({ client, bucket: bucketId, defaults, settings: settingsProp, onSettingsChange, refreshKey })
const { buckets, bucketMeta, settings, setSettings, objects, setObjects, error, mediaUrl, downloadUrl, writable } = lib
/* the same one dialog idiom as the browse page — see its note on `useModal()` */
const modal = useModal()
const [settingsOpen, setSettingsOpen] = useState(false)
const [editingKey, setEditingKey] = useState(null)
const [editingValue, setEditingValue] = useState('')
const [renaming, setRenaming] = useState(false)
const [selectMode, setSelectMode] = useState(false)
const [selected, setSelected] = useState(() => new Set())
const [lastIdx, setLastIdx] = useState(null)
const [busy, setBusy] = useState(false)
const sortedRef = useRef([])
/* the wall is FLAT by default — the folders are the browse page's */
const { flat = true, layout, sortBy, sortDir, pageSize, videoPreview } = { flat: true, ...settings }
const kinds = new Set(settings.kinds)
const setFlat = (v) => setSettings({ ...settings, flat: v })
const setLayout = (v) => setSettings({ ...settings, layout: v })
const listId = `${prefix}|${flat}|${[...kinds].sort().join(',')}|${pageSize}|${refreshKey}|${bucketMeta.id}`
const handleSort = (field) => setSettings(sortBy === field ? { ...settings, sortDir: sortDir === 'asc' ? 'desc' : 'asc' } : { ...settings, sortBy: field, sortDir: 'asc' })
useEffect(() => {
if (!selectMode) return undefined
const onKey = (e) => { if (e.key === 'Escape') { setSelectMode(false); setSelected(new Set()); setLastIdx(null) } }
window.addEventListener('keydown', onKey)
return () => window.removeEventListener('keydown', onKey)
}, [selectMode])
if (error) return <p className="kol-mono-12 text-ui-error">Error: {error}</p>
const scoped = prefix ? objects.filter((o) => o.key.startsWith(prefix)) : objects
const { files: dirFiles } = partition(scoped, prefix)
const flatFiles = scoped.map((o) => ({ ...o, displayKey: o.displayName ?? (prefix ? o.key.slice(prefix.length) : o.key) }))
const levelFiles = flat ? flatFiles : dirFiles
const systemCount = levelFiles.filter((o) => isSystemFile(o.key)).length
const visibleFiles = kinds.has('system') ? levelFiles : levelFiles.filter((o) => !isSystemFile(o.key))
const keySet = new Set(objects.map((o) => o.key))
const grouped = settings.groupVariants ? groupVariants(visibleFiles) : visibleFiles
const rawFiles = (settings.foldSegments ? groupSegments(grouped) : grouped).map((o) => ({ ...o, kind: kindOf(o), poster: posterFor(o.key, keySet) }))
const profile = profileOf(objects, rawFiles, systemCount)
const presentKinds = Object.keys(profile.kinds).sort()
const files = rawFiles.filter((o) => kinds.has(o.kind))
const chipKinds = presentKinds.filter((k) => kinds.has(k))
const totalBytes = rawFiles.reduce((n, o) => n + (o.totalSize ?? o.size ?? 0), 0)
const handleCopy = (key) => navigator.clipboard.writeText(mediaUrl(key))
const handleDelete = async (key) => {
if (!(await modal.confirm(`Delete "${key}"? This cannot be undone.`, { okLabel: 'Delete' }))) return
try { await client.deleteObject(key); setObjects((prev) => prev.filter((o) => o.key !== key)) } catch (e) { await modal.alert(`Delete failed: ${e.message}`) }
}
const startRename = (key) => { setEditingKey(key); setEditingValue(key) }
const cancelRename = () => { setEditingKey(null); setEditingValue('') }
const commitRename = async () => {
const from = editingKey; const to = editingValue.trim()
if (!from || !to || from === to) { cancelRename(); return }
setRenaming(true)
try { const r = await client.renameObject(from, to); const newKey = r?.to || to; setObjects((prev) => prev.map((o) => (o.key === from ? { ...o, key: newKey } : o))); setEditingKey(null); setEditingValue('') }
catch (e) { await modal.alert(`Rename failed: ${e.message}`) } finally { setRenaming(false) }
}
const toggleSelect = (idx, key, shift) => {
setSelected((prev) => {
const next = new Set(prev)
if (shift && lastIdx !== null) { const [a, b] = [Math.min(lastIdx, idx), Math.max(lastIdx, idx)]; for (let i = a; i <= b; i++) next.add(sortedRef.current[i].key) }
else if (next.has(key)) next.delete(key)
else next.add(key)
return next
})
setLastIdx(idx)
}
const selectAll = () => setSelected(new Set(sortedRef.current.map((o) => o.key)))
const exitSelect = () => { setSelectMode(false); setSelected(new Set()); setLastIdx(null) }
const batchMove = async () => {
const folder = await modal.prompt(`Move ${selected.size} file(s) into folder (under ${prefix || 'root'}):`, '', { okLabel: 'Move' })
if (folder == null) return
const clean = folder.replace(/^\/+|\/+$/g, '').trim()
if (!clean) return
setBusy(true)
const remap = new Map(); const failures = []
for (const from of selected) {
const to = moveKey(from, prefix, clean)
if (from === to) continue
try { const r = await client.renameObject(from, to); remap.set(from, r?.to || to) } catch (e) { failures.push(`${from.split('/').pop()}: ${e.message}`) }
}
setObjects((prev) => prev.map((o) => (remap.has(o.key) ? { ...o, key: remap.get(o.key) } : o)))
setBusy(false); exitSelect()
if (failures.length) await modal.alert(`Moved ${remap.size}. ${failures.length} failed:\n${failures.join('\n')}`)
}
const batchDelete = async () => {
if (!(await modal.confirm(`Delete ${selected.size} file(s)? This cannot be undone.`, { okLabel: 'Delete' }))) return
setBusy(true)
const done = []; const failures = []
for (const key of selected) { try { await client.deleteObject(key); done.push(key) } catch (e) { failures.push(`${key.split('/').pop()}: ${e.message}`) } }
setObjects((prev) => prev.filter((o) => !done.includes(o.key)))
setBusy(false); exitSelect()
if (failures.length) await modal.alert(`Deleted ${done.length}. ${failures.length} failed:\n${failures.join('\n')}`)
}
const batchDownload = () => {
for (const key of selected) { const a = document.createElement('a'); a.href = downloadUrl(key); a.download = key.split('/').pop(); document.body.appendChild(a); a.click(); a.remove() }
}
const renderActions = (o, row = false) => {
if (editingKey === o.key) {
return (
<div className="flex gap-2">
<Button tone="primary" size="sm" onClick={commitRename} disabled={renaming}>{renaming ? 'Saving…' : 'Save'}</Button>
<Button tone="ghost" size="sm" onClick={cancelRename} disabled={renaming}>Cancel</Button>
</div>
)
}
return (
<div className={row ? 'flex translate-y-[2px] items-center gap-2' : 'flex h-full flex-col items-center justify-between'}>
{!selectMode && (
<>
<ActionButton chrome="inline" size="sm" icon="copy" confirmIcon="check" label="Copy URL" confirmLabel="Copied" onAction={() => handleCopy(o.key)} />
{writable && !row && <span className="invisible" aria-hidden><ActionButton chrome="inline" size="sm" icon="trash" label="" /></span>}
</>
)}
{writable && selectMode && (
<>
<ActionButton chrome="inline" size="sm" icon="edit" label="Rename" onAction={() => startRename(o.key)} />
<ActionButton chrome="inline" size="sm" icon="trash" confirmIcon="check" label="Delete" confirmLabel="Deleted" onAction={() => handleDelete(o.key)} />
</>
)}
</div>
)
}
const renderNameCell = (o) => {
if (editingKey === o.key) {
return <Input size="sm" width="100%" value={editingValue} autoFocus disabled={renaming} onChange={(e) => setEditingValue(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') commitRename(); if (e.key === 'Escape') cancelRename() }} />
}
return o.displayKey.split('/').pop()
}
const layoutOptions = [
...(writable ? [{ value: 'grid', label: selectMode ? 'CANCEL' : 'SELECT', active: !selectMode, title: 'Select multiple files', onClick: () => (selectMode ? exitSelect() : setSelectMode(true)) }] : []),
{ value: 'list', label: flat ? 'TREE' : 'FLAT', active: flat, title: 'Show all files recursively', onClick: () => setFlat(!flat) },
]
return (
<div className={`flex flex-col gap-6 ${className}`.trim()}>
{header && (
<LibraryHeader title={title} buckets={buckets} bucketId={bucketMeta.id} appRoot={false} bucketMeta={bucketMeta} writable={writable} headerActions={headerActions} headerTrailing={headerTrailing}
onBucket={(v) => { if (v === 'all') return; if (bucket == null) setOwnBucket(v); onBucketChange?.(v) }} onSettings={() => setSettingsOpen(true)} />
)}
{/* A SEAM ON ONE PAGE IS A SEAM ON BOTH — `banner` is shared chrome, so it lands here in the
* same edit it landed on the browse page. See the note on `formatDate` above. */}
{banner}
{settingsOpen && (
<MediaSettings bucketMeta={bucketMeta} settings={settings} profile={profile} onChange={setSettings} onReset={() => setSettings(null)} onClose={() => setSettingsOpen(false)} settingsFooter={settingsFooter} />
)}
{/* `stats={false}` (ColumnBrowserSeams, kol-r2b2 2026-08-28) — beside `header={false}`: a browse
* page stacked above this one already prints the folder-aware count ("it used to be a row") */}
{stats && (
<p className="kol-mono-12 text-fg-48">
{files.length !== rawFiles.length ? `${files.length} of ${rawFiles.length}` : rawFiles.length}{' '}{rawFiles.length === 1 ? 'file' : 'files'} · {formatSize(totalBytes)}
{systemCount > 0 && <span className="text-fg-32">{' · '}{systemCount} system files hidden</span>}
</p>
)}
<ContentFilters
items={files}
title="Files"
totalCount={files.length}
searchKeys={['displayKey']}
filterGroups={[{ label: 'Kind', key: 'kind', values: chipKinds }]}
mutuallyExclusiveFilters={['kind']}
leadingActions={writable ? (
<div className={`flex items-center gap-4 kol-mono-12 text-fg-48 h-8 ${selectMode ? '' : 'hidden'}`} aria-hidden={!selectMode}>
<span className="text-fg-default">{selected.size} selected</span>
<button type="button" onClick={selectAll} className="hover:text-fg-default transition-colors">Select all ({files.length})</button>
<Divider variant="vertical" />
<button type="button" disabled={!selected.size || busy} onClick={batchMove} className="hover:text-fg-default transition-colors disabled:opacity-40 disabled:pointer-events-none">Move to folder…</button>
<button type="button" disabled={!selected.size || busy} onClick={batchDownload} className="hover:text-fg-default transition-colors disabled:opacity-40 disabled:pointer-events-none">Download</button>
<button type="button" disabled={!selected.size || busy} onClick={batchDelete} className="hover:text-fg-default transition-colors disabled:opacity-40 disabled:pointer-events-none">Delete</button>
{busy && <span>working…</span>}
</div>
) : undefined}
layoutPlacement="header"
layoutClassName="kol-helper-14"
layoutOptions={layoutOptions}
layout={layout}
onLayoutChange={setLayout}
/* BELOW `md` THE VIEWS AND THE SORT FOLD INTO ONE `···` (2026-10-08, apps/media/library at 390:
* the FILES row, the three view icons and NAME · DATE · SIZE · KIND stacked three rows over the
* list) — the browse page's fold, item 15, so the two pages fold the same way. Decided on the
* recommendation, for review. */
trailingActions={(
<>
<div className="hidden md:flex items-center gap-6"><ViewToggle viewMode={layout} onViewChange={setLayout} variant="icon" options={LAYOUT_OPTIONS} /></div>
<div className="md:hidden">
<MenuItem label={<Icon name="more" size={16} />} caret={false} align="end" size="sm" buttonClassName="shrink-0 px-2">
{({ close }) => (
<div className="py-1 w-[200px]">
{LAYOUT_OPTIONS.map((opt) => (
<MenuDropdownItem key={opt.value} onClick={() => { setLayout(opt.value); close() }} shortcut={layout === opt.value ? <Icon name="check" size={11} /> : undefined}>{opt.label}</MenuDropdownItem>
))}
<MenuDropdownDivider />
{SORT_OPTIONS.map((opt) => (
<MenuDropdownItem key={opt.value} onClick={() => { handleSort(opt.value); close() }} shortcut={sortBy === opt.value ? <Icon name={sortDir === 'desc' ? 'arrow-down' : 'arrow-up'} size={11} /> : undefined}>{opt.label}</MenuDropdownItem>
))}
</div>
)}
</MenuItem>
</div>
</>
)}
belowActions={layout === 'off' ? null : <div className="h-8 hidden md:flex items-center"><SortControls options={SORT_OPTIONS} sortBy={sortBy} sortDir={sortDir} onSort={handleSort} /></div>}
/* ONE WALL BODY, shared with the merged surface (2026-09-22) */
renderItem={(filtered) => (
<WallBody files={filtered} layout={layout} sortBy={sortBy} sortDir={sortDir} pageSize={pageSize} listId={listId}
mediaUrl={mediaUrl} downloadUrl={downloadUrl} keySet={keySet} videoPreview={videoPreview} formatDate={formatDate}
selected={selected} selectMode={selectMode} onToggleSelect={toggleSelect} onSorted={(list) => { sortedRef.current = list }}
renderName={renderNameCell} renderActions={renderActions} />
)}
/>
{/* the pill again — the wall is one of the surfaces it switches, so it
carries the same bar and owes it the same room (item 16) */}
{tabs?.length > 0 && (
<>
<div className="md:hidden" aria-hidden="true" style={{ height: TABBAR_H }} />
<TabsRow look="stacked" placement="phone" tabs={tabs} value={activeTab} onChange={onTabChange} />
</>
)}
</div>
)
}