3dtours/RecipesCam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: drop the heading over the folder column

Browse Source 
The column carried the name of the folder its tree belongs to, painted
above the rows. The rows already say it — the head of the tree is a row
like any other — so the heading only said it twice, and because it was
not a row it stayed on screen when the tree was folded away: the one
label left with nothing under it. The right click that raised it now
finds the row itself, which is where a reader aims anyway.

The label, its menu hook, its translation and its rule go; the tree, the
row menus and fold-all keep working as before.

Co-authored-by: PenguinHarness <noreply@penguin.local>
This commit is contained in:
3dtours
2026-09-28 21:27:55 +07:00
parent 5e28b42067
commit 067b32131e
5 changed files with 20 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker/frontend/src/Library.tsx
+10 -30
View File
@@ -107,9 +107,8 @@ export function Library() {
const [note, setNote] = useState<string | null>(null);
// The folder menu: what a right click opens, and where. No folder means the
// right click landed on the empty part of the column, which is the way in for
// one more folder; `root` means it landed on the head of a tree — the column's
// own name, or the row of a folder picked at the top level — which carries
// folding the folders nested below the top level.
// one more folder; `root` means it landed on a row at the top level — the head
// of a tree — which also carries folding the folders nested below the top level.
const [menu, setMenu] = useState<{ folder: LibraryFolder | null; root?: boolean; x: number; y: number } | null>(null);
// Where the drag of the column divider started, and how wide the column was
// then — the pointer only ever reports a position, not a distance moved.
@@ -371,10 +370,6 @@ export function Library() {
[nodes, folded]
);
// The folder the open node belongs to: its name titles the column, and its
// handle is what the menu acts on.
const root = folders.find((f) => f.name === rootName) ?? null;
// A remembered subfolder that no longer holds a frame falls back to the folder
// it sits in, so the screen never opens on a node that is not drawn.
useEffect(() => {
@@ -519,21 +514,6 @@ export function Library() {
setMenu({ folder: null, x: Math.min(e.clientX, window.innerWidth - 190), y: Math.min(e.clientY, window.innerHeight - 96) });
}}
>
{/* The column is titled with the folder the tree belongs to, so
a renamed roll is named where its frames are named. The name
is the whole tree's handle as well: one right click here
folds the folders nested below the top level. */}
<b
className="lib-col-title"
data-key="lib-root-name"
title={`${root?.label || root?.name} — ${t('lib.rootHint')}`}
onContextMenu={(e) => {
e.preventDefault();
setMenu({ folder: null, root: true, x: Math.min(e.clientX, window.innerWidth - 190), y: Math.min(e.clientY, window.innerHeight - 96) });
}}
>
{root?.label || root?.name}
</b>
{rows.map((n) => {
const folder = folders.find((f) => f.name === n.key.split('/')[0]) ?? null;
// A roll being read says so on its own row: while a scan runs
@@ -571,9 +551,9 @@ export function Library() {
// act on the folder that was picked, so a right click on a
// subfolder row brings up its roll's menu. A row at the top
// level is a whole tree's head, so it also carries folding
// what sits under it — the item the column's own name has,
// where a reader actually right-clicks. Shift+F10 raises
// the same event, which is the keyboard's way in.
// what sits under it, where a reader actually right-clicks.
// Shift+F10 raises the same event, which is the keyboard's
// way in.
onContextMenu={(e) => {
if (!folder) return;
e.preventDefault();
@@ -729,10 +709,10 @@ export function Library() {
permission has lapsed gets the one thing that can be done about it. */}
{menu ? (
<div className="lib-menu" data-key="lib-menu" style={{ left: menu.x, top: menu.y }} onContextMenu={(e) => e.preventDefault()}>
{/* Fold-the-tree leads the menu of a top-level row, and stands alone on
the column's own name: the folders nested below the top level go,
one line per folder, and no top-level row ever leaves the column —
the row itself is one click away and its click already shuts it. */}
{/* Fold-the-tree leads the menu of a row at the top level: the folders
nested below it go, one line per folder, and no top-level row ever
leaves the column — the row itself is one click away and its click
already shuts it. */}
{menu.root ? (
<button
type="button"
@@ -799,7 +779,7 @@ export function Library() {
{t('lib.reconnect')}
</button>
)
) : menu.root ? null : (
) : (
<button
type="button"
className="lib-menu-item"