Files in the web explorer's shape: crumbs, folder tree, list in columns, details and preview
ci / ui (push) Waiting to run
ci / check (push) Failing after 3s
ci / start (push) Failing after 3s

Both tabs use the window's width now, as the web's explorer does: where you are (crumbs), the
folder tree (a chevron opens, a name lists), the list on one grid with every row a subgrid --
name with an icon by kind, type, size, changed, a menu -- and on a wide window the chosen file's
details, the start of it and Open in the viewer (a double click opens it). The panes give way by
the room the page has (container queries, so the sidebar's share counts): the details at 60rem,
the tree at 40rem, the type and date columns when the list is under 28rem; a file then opens in
the viewer on a click. The tree and the list share one request per folder; every reading keeps
the never-empty states of the previous commit.

Tests (tests/ui FX): the administrator's / wide (tree, columns on one track, details, preview,
viewer), navigating by list, tree and crumbs with a long name, this computer's folder, and every
width 1920/1280/1024/800/390 with nothing sideways, every control inside the window and the
name's track never closed. H8/N8 follow the new list.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
HomerandClaude Opus 5.5 committed 2026-11-10 16:18:05 +00:00
1 parent 6874dd46cd
commit fe4bf064f5
9 files changed
+987 -227

No files matched your search

+27 -13
View File
@@ -100,22 +100,36 @@
<div class="head__tools"><div class="tabs" role="tablist" id="files-tabs"></div></div>
</header>
<div class="page__body files">
<section class="files__pane" id="pane-local" aria-label="This computer" data-i18n-aria-label>
<div class="files__head">
<div class="files__where" id="local-where"></div>
<button type="button" class="tool" id="local-refresh" aria-label="Read again" title="Read again" data-i18n-aria-label data-i18n-title></button>
<section class="fx" id="pane-local" aria-label="This computer" data-i18n-aria-label>
<div class="fx__bar">
<div class="fx__where" id="local-where"></div>
<nav class="crumbs" id="local-crumbs" aria-label="Where you are" data-i18n-aria-label></nav>
<div class="fx__tools">
<button type="button" class="tool" id="local-refresh" aria-label="Read again" title="Read again" data-i18n-aria-label data-i18n-title></button>
</div>
</div>
<div class="fx__panes">
<aside class="fx__tree" id="local-tree" aria-label="Folders" data-i18n-aria-label></aside>
<div class="fx__list" id="local-list"></div>
<aside class="fx__details" id="local-details" aria-label="Details" data-i18n-aria-label></aside>
</div>
<div class="files__tree" id="local-tree"></div>
</section>
<section class="files__pane" id="pane-server" hidden aria-label="Server" data-i18n-aria-label>
<div class="files__head">
<div class="files__where muted" id="server-where"></div>
<button type="button" class="tool" id="server-upload" aria-label="Upload" title="Upload" data-i18n-aria-label data-i18n-title></button>
<button type="button" class="tool" id="server-mkdir" aria-label="New folder" title="New folder" data-i18n-aria-label data-i18n-title></button>
<button type="button" class="tool" id="server-refresh" aria-label="Read again" title="Read again" data-i18n-aria-label data-i18n-title></button>
<section class="fx" id="pane-server" hidden aria-label="Server" data-i18n-aria-label>
<div class="fx__bar">
<div class="fx__where"></div>
<nav class="crumbs" id="server-crumbs" aria-label="Where you are" data-i18n-aria-label></nav>
<div class="fx__tools">
<button type="button" class="tool" id="server-upload" aria-label="Upload" title="Upload" data-i18n-aria-label data-i18n-title></button>
<button type="button" class="tool" id="server-mkdir" aria-label="New folder" title="New folder" data-i18n-aria-label data-i18n-title></button>
<button type="button" class="tool" id="server-refresh" aria-label="Read again" title="Read again" data-i18n-aria-label data-i18n-title></button>
</div>
</div>
<p class="status fx__status" id="server-status" hidden></p>
<div class="fx__panes">
<aside class="fx__tree" id="server-tree" aria-label="Folders" data-i18n-aria-label></aside>
<div class="fx__list" id="server-list"></div>
<aside class="fx__details" id="server-details" aria-label="Details" data-i18n-aria-label></aside>
</div>
<p class="status" id="server-status" hidden></p>
<div class="files__tree" id="server-tree"></div>
</section>
</div>
</section>