cursedbelt 5.34.0 → 5.35.0

package/src/react/file-tree/FolderViewPanels.tsx

@@ -0,0 +1,402 @@
+/**
+ * The panels a right-click opens on the file tree — the row menu, the view menu with its tag
+ * filter, and the tag editor. Loaded ON DEMAND (`FileTree.tsx` → `TreePanel`, a `lazyPart`)
+ * and preloaded when the browser is idle, so the first right-click draws at once and the first
+ * paint does not pay for it. See `FolderViewMenus.tsx` for what was copied from whom.
+ */
+import type { ReactNode } from 'react';
+import { useId, useMemo, useRef, useState } from 'react';
+import { Input } from '../components/Input.js';
+import { Menu, MenuItem, MenuLabel, MenuSeparator } from '../components/Menu.js';
+import { Popover } from '../components/Popover.js';
+import { ScrollArea } from '../components/ScrollArea.js';
+import { Tooltip } from '../components/Tooltip.js';
+import { UnstyledButton } from '../components/UnstyledButton.js';
+import { normalizeTag, tagFilterActive } from './folderView.js';
+import { type FileTreeMenuItem, TagDot } from './FolderViewMenus.js';
+import type { FolderView, FolderViewPoint } from './useFolderView.js';
+import './folderViewPanels.css';
+
+/** Which panel to draw — the one component the lazy chunk exports. */
+export type TreePanelProps =
+  | {
+      kind: 'row';
+      at: FolderViewPoint;
+      label: string;
+      items: readonly FileTreeMenuItem[];
+      onClose: () => void;
+    }
+  | {
+      kind: 'view';
+      at: FolderViewPoint;
+      view: FolderView | null;
+      hiddenCount: number;
+      extraItems: readonly FileTreeMenuItem[];
+      onCollapseAll: (() => void) | null;
+      onClose: () => void;
+    }
+  | {
+      kind: 'tags';
+      at: FolderViewPoint;
+      view: FolderView;
+      ids: readonly string[];
+      names: readonly string[];
+      onClose: () => void;
+    };
+
+export function TreePanel(props: TreePanelProps): ReactNode {
+  if (props.kind === 'row')
+    return (
+      <TreeMenuPanel at={props.at} label={props.label} onClose={props.onClose}>
+        <Menu aria-label={props.label}>
+          <TreeMenuItems items={props.items} onDone={props.onClose} />
+        </Menu>
+      </TreeMenuPanel>
+    );
+  if (props.kind === 'view')
+    return (
+      <FolderViewMenu
+        view={props.view}
+        at={props.at}
+        hiddenCount={props.hiddenCount}
+        extraItems={props.extraItems}
+        onCollapseAll={props.onCollapseAll}
+        onClose={props.onClose}
+      />
+    );
+  return (
+    <FolderTagEditor view={props.view} ids={props.ids} names={props.names} at={props.at} onClose={props.onClose} />
+  );
+}
+
+/** The menu items in a tree menu — refused items stay reachable, with their reason. */
+export function TreeMenuItems({
+  items,
+  onDone,
+}: {
+  items: readonly FileTreeMenuItem[];
+  onDone: () => void;
+}): ReactNode {
+  return items.map((item, index) => {
+    if (item.divider) {
+      // A divider at either end, or after another, is a line under nothing.
+      const prev = items[index - 1];
+      const next = items[index + 1];
+      if (!prev || !next || prev.divider || next.divider) return null;
+      return <MenuSeparator key={item.key} />;
+    }
+    const hint = typeof item.description === 'string' ? item.description : undefined;
+    return (
+      <MenuItem
+        key={item.key}
+        {...(item.checked !== undefined ? { selected: item.checked } : {})}
+        {...(item.destructive ? { danger: true } : {})}
+        {...(item.shortcut ? { shortcut: item.shortcut } : {})}
+        {...(hint ? { hint } : {})}
+        {...(item.disabled
+          ? item.title
+            ? { unavailableReason: item.title }
+            : { disabled: true }
+          : item.title
+            ? { title: item.title }
+            : {})}
+        onSelect={() => {
+          // Shut first, then act: an item that opens ANOTHER panel (Tags…) must not have it
+          // shut again by this menu's own close.
+          onDone();
+          item.onClick?.();
+        }}
+      >
+        {item.label}
+      </MenuItem>
+    );
+  });
+}
+
+/** The panel every tree menu sits in — a point-anchored popover with a menu's padding. */
+export function TreeMenuPanel({
+  at,
+  label,
+  onClose,
+  children,
+  width,
+}: {
+  at: FolderViewPoint;
+  label: string;
+  onClose: () => void;
+  children: ReactNode;
+  width?: string;
+}): ReactNode {
+  // A fresh object per open, so reopening at the same point still re-anchors.
+  const anchor = useMemo(() => ({ x: at.x, y: at.y }), [at.x, at.y]);
+  return (
+    <Popover
+      anchor={anchor}
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+      label={label}
+      arrow={false}
+      side='bottom'
+      align='start'
+      sideOffset={2}
+      {...(width ? { width } : {})}
+      className='cbft-menu-panel p-1'
+    >
+      {children}
+    </Popover>
+  );
+}
+
+/**
+ * The view menu — right-click on the blank space under the rows, or on the app's header.
+ *
+ * Two parts: COMMANDS (a menu — they act and close) and the TAG FILTER (toggles that stay
+ * open, because narrowing to "home and code" is two presses and a menu that shut after the
+ * first would make it two right-clicks).
+ */
+export function FolderViewMenu({
+  view,
+  at,
+  hiddenCount,
+  extraItems,
+  onCollapseAll,
+  onClose,
+}: {
+  view: FolderView | null;
+  at: FolderViewPoint;
+  hiddenCount: number;
+  extraItems: readonly FileTreeMenuItem[];
+  onCollapseAll: (() => void) | null;
+  onClose: () => void;
+}): ReactNode {
+  const commands: FileTreeMenuItem[] = [...extraItems];
+  if (view) {
+    if (commands.length > 0) commands.push({ key: 'fv-sep-app', divider: true });
+    commands.push({
+      key: 'fv-show-hidden',
+      label: hiddenCount > 0 ? `Show hidden folders (${hiddenCount})` : 'Show hidden folders',
+      checked: view.local.showHidden,
+      shortcut: '⇧⌘.',
+      title: view.local.showHidden
+        ? 'Leave hidden folders out again. On this device only.'
+        : 'Draw hidden folders too, faded and in italics, so you can unhide them. On this device only.',
+      onClick: () => view.setShowHidden(!view.local.showHidden),
+    });
+  }
+  if (onCollapseAll)
+    commands.push({ key: 'fv-collapse', label: 'Collapse all folders', onClick: onCollapseAll });
+
+  return (
+    <TreeMenuPanel at={at} label='Tree view' onClose={onClose} width='17rem'>
+      <Menu aria-label='Tree view'>
+        <TreeMenuItems items={commands} onDone={onClose} />
+      </Menu>
+      {view ? <TagFilter view={view} /> : null}
+    </TreeMenuPanel>
+  );
+}
+
+/** "Filter by tag" — one row per tag, each with an Only and a Hide toggle. */
+function TagFilter({ view }: { view: FolderView }): ReactNode {
+  const { local } = view;
+  // A tag still in this device's filter but carried by no folder any more must stay listed:
+  // it is narrowing the tree, and a filter you cannot see is one you cannot take off.
+  const rows = useMemo(() => {
+    const list = view.tags.map((t) => ({ ...t }));
+    for (const tag of [...local.only, ...local.hide])
+      if (!list.some((t) => t.tag === tag)) list.push({ tag, count: 0 });
+    return list;
+  }, [view.tags, local.only, local.hide]);
+  const headId = useId();
+
+  return (
+    <section className='cbft-fv' aria-labelledby={headId}>
+      <MenuSeparator />
+      <div className='cbft-fv-head'>
+        <MenuLabel className='cbft-fv-title'>
+          <span id={headId}>Filter by tag</span>
+        </MenuLabel>
+        <Tooltip content='The tag filter is remembered on this device only — your other computers keep their own.'>
+          <span className='cbft-fv-scope'>This device</span>
+        </Tooltip>
+      </div>
+      {rows.length === 0 ? (
+        <p className='cbft-fv-empty'>
+          No tags yet. Right-click a folder and choose <b>Tags…</b> to add one.
+        </p>
+      ) : (
+        <ScrollArea className='cbft-fv-scroll' space='none' safeArea={false} fade>
+        <ul className='cbft-fv-list'>
+          {rows.map(({ tag, count }) => {
+            const mode = local.only.includes(tag) ? 'only' : local.hide.includes(tag) ? 'hide' : null;
+            return (
+              <li key={tag} className='cbft-fv-row' data-mode={mode ?? undefined}>
+                <TagDot tag={tag} />
+                <span className='cbft-fv-name'>{tag}</span>
+                <span className='cbft-fv-count'>{count}</span>
+                {/* A 2-segment toggle in a 28px menu row, styled by `.cbft-fv-seg` — the tree
+                    ships plain CSS (see fileTree.css's header), so the button is the belt's
+                    UNSTYLED one: its behaviour and hint, none of a 36px control's look. */}
+                <fieldset className='cbft-fv-seg' aria-label={`Filter by ${tag}`}>
+                  <UnstyledButton
+                    tooltip={`Show only folders tagged ${tag} (and those with any other “Only” tag)`}
+                    aria-pressed={mode === 'only'}
+                    onClick={() => view.filterTag(tag, mode === 'only' ? null : 'only')}
+                  >
+                    Only
+                  </UnstyledButton>
+                  <UnstyledButton
+                    tooltip={`Hide folders tagged ${tag}`}
+                    aria-pressed={mode === 'hide'}
+                    onClick={() => view.filterTag(tag, mode === 'hide' ? null : 'hide')}
+                  >
+                    Hide
+                  </UnstyledButton>
+                </fieldset>
+              </li>
+            );
+          })}
+        </ul>
+        </ScrollArea>
+      )}
+      {tagFilterActive(local) ? (
+        <UnstyledButton className='cbft-fv-clear' onClick={() => view.clearTagFilter()}>
+          Clear tag filter
+        </UnstyledButton>
+      ) : null}
+    </section>
+  );
+}
+
+/**
+ * The tag editor — Gmail's *Label as*: type to find a tag, or to make one.
+ *
+ * ↑/↓ move through the list, Enter ticks or unticks the highlighted tag (or creates the typed
+ * one), Escape closes. A tag ticked here is on the folder at once — there is no Save, because
+ * every change is one small reversible write.
+ */
+export function FolderTagEditor({
+  view,
+  ids,
+  names,
+  at,
+  onClose,
+}: {
+  view: FolderView;
+  ids: readonly string[];
+  /** The folders' names, for the heading. */
+  names: readonly string[];
+  at: FolderViewPoint;
+  onClose: () => void;
+}): ReactNode {
+  const [query, setQuery] = useState('');
+  const [active, setActive] = useState(0);
+  const listId = useId();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const typed = normalizeTag(query);
+  const options = useMemo(() => {
+    const all = view.tags.map((t) => t.tag);
+    const shown = typed ? all.filter((tag) => tag.includes(typed)) : all;
+    const create = typed && !all.includes(typed) ? [{ tag: typed, create: true }] : [];
+    return [...shown.map((tag) => ({ tag, create: false })), ...create];
+  }, [view.tags, typed]);
+  const at0 = Math.min(active, Math.max(0, options.length - 1));
+
+  const stateOf = (tag: string): 'all' | 'some' | 'none' => {
+    const have = ids.filter((id) => (view.marks.tags[id] ?? []).includes(tag)).length;
+    return have === 0 ? 'none' : have === ids.length ? 'all' : 'some';
+  };
+
+  const pick = (tag: string, create: boolean) => {
+    view.toggleTag(ids, tag);
+    if (create) setQuery('');
+    inputRef.current?.focus();
+  };
+
+  const heading = names.length === 1 ? `Tags for “${names[0]}”` : `Tags for ${names.length} folders`;
+
+  return (
+    <TreeMenuPanel at={at} label={heading} onClose={onClose} width='16rem'>
+      <div className='cbft-te'>
+        <div className='cbft-te-head'>{heading}</div>
+        <Input
+          ref={inputRef}
+          size='sm'
+          className='cbft-te-input'
+          autoFocus
+          value={query}
+          placeholder='Find or create a tag'
+          aria-label='Find or create a tag'
+          role='combobox'
+          aria-expanded='true'
+          aria-controls={listId}
+          aria-activedescendant={options[at0] ? `${listId}-${at0}` : undefined}
+          maxLength={64}
+          onChange={(event) => {
+            setQuery(event.currentTarget.value);
+            setActive(0);
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'ArrowDown') {
+              event.preventDefault();
+              setActive((i) => Math.min(options.length - 1, i + 1));
+            } else if (event.key === 'ArrowUp') {
+              event.preventDefault();
+              setActive((i) => Math.max(0, i - 1));
+            } else if (event.key === 'Enter') {
+              event.preventDefault();
+              const option = options[at0];
+              if (option) pick(option.tag, option.create);
+            }
+          }}
+        />
+        {options.length === 0 ? (
+          <p className='cbft-fv-empty'>Type a word to make your first tag — “home”, “work”.</p>
+        ) : (
+          <ScrollArea className='cbft-te-scroll' space='none' safeArea={false} fade>
+          <div id={listId} role='listbox' aria-multiselectable='true' aria-label='Tags'>
+            {options.map((option, index) => {
+              const state = option.create ? 'none' : stateOf(option.tag);
+              return (
+                // biome-ignore lint/a11y/useKeyWithClickEvents: the keyboard drives this list through the field above (aria-activedescendant), the combobox pattern.
+                <div
+                  key={`${option.create ? '+' : ''}${option.tag}`}
+                  id={`${listId}-${index}`}
+                  role='option'
+                  // Reachable through the field's aria-activedescendant, never by Tab.
+                  tabIndex={-1}
+                  aria-selected={state === 'all'}
+                  data-active={index === at0 || undefined}
+                  data-state={state}
+                  className='cbft-te-option'
+                  onMouseEnter={() => setActive(index)}
+                  onMouseDown={(event) => event.preventDefault()}
+                  onClick={() => pick(option.tag, option.create)}
+                >
+                  <span className='cbft-te-check' aria-hidden='true'>
+                    {state === 'all' ? '✓' : state === 'some' ? '–' : ''}
+                  </span>
+                  <TagDot tag={option.tag} />
+                  <span className='cbft-fv-name'>
+                    {option.create ? (
+                      <>
+                        Create <b>“{option.tag}”</b>
+                      </>
+                    ) : (
+                      option.tag
+                    )}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+          </ScrollArea>
+        )}
+        <p className='cbft-te-foot'>Tags follow the folder to every device.</p>
+      </div>
+    </TreeMenuPanel>
+  );
+}
+

package/src/react/file-tree/fileTree.css

@@ -953,3 +953,149 @@
 	white-space: nowrap;
 	border: 0;
 }
+
+/* ── Hidden folders and folder tags ─────────────────────────────────────────────────────
+ *
+ * Owner, 2026-09-30: *"Showing hidden folders still keeps them hideable and they should be
+ * slightly faded or italics or something like that to let me see which ones are hideable when
+ * all are showing. The indication should be subtle but easy for me to notice."*
+ *
+ * So a hidden folder drawn by "Show hidden folders" is FADED, ITALIC and carries a small
+ * eye-off; what is inside it is faded only. Faded is what says "not normally here" across the
+ * whole list; the eye-off is what keeps it from reading as a PRIVATE row, which is italic too
+ * (`data-access` above) and carries a padlock instead. The row stays a full-strength target —
+ * only its ink is quieter — because the point of drawing it is to act on it.
+ */
+.cbft-row[data-hidden] .cbft-name,
+.cbft-row[data-hidden] .cbft-slot,
+.cbft-row[data-hidden] .cbft-twisty {
+	opacity: 0.5;
+}
+
+.cbft-row[data-hidden='self'] .cbft-name {
+	font-style: italic;
+}
+
+/* A selected or focused hidden row is the one being acted on; let it read at nearly full ink. */
+.cbft-row[data-hidden][data-selected] .cbft-name,
+.cbft-row[data-hidden]:focus-visible .cbft-name {
+	opacity: 0.8;
+}
+
+.cbft-hidden-mark {
+	flex: none;
+	display: inline-flex;
+	color: var(--muted-foreground);
+	opacity: 0.7;
+	pointer-events: none;
+}
+
+/* The row whose right-click menu is open — Finder's ring, so the menu says what it is for. */
+.cbft-row[data-menu-open] {
+	outline: 1px solid var(--ring, var(--accent-solid));
+	outline-offset: -1px;
+}
+
+/*
+ * Tag dots — Finder's: a few coloured dots after the name, one per tag, the rest in the
+ * hover. The colour is the tag's NAME hashed onto the theme's chart palette (`tagHue`), so the
+ * same tag is the same colour everywhere without anyone choosing or storing a colour.
+ */
+.cbft-tagdots {
+	flex: none;
+	display: inline-flex;
+	align-items: center;
+	gap: 2px;
+	padding-inline: 2px;
+}
+
+.cbft-tagdot {
+	flex: none;
+	display: inline-block;
+	inline-size: 7px;
+	block-size: 7px;
+	border-radius: 999px;
+	background: var(--cbft-tag, var(--muted-foreground));
+}
+
+.cbft-tagdot[data-hue='0'] { --cbft-tag: var(--chart-1); }
+.cbft-tagdot[data-hue='1'] { --cbft-tag: var(--chart-2); }
+.cbft-tagdot[data-hue='2'] { --cbft-tag: var(--chart-3); }
+.cbft-tagdot[data-hue='3'] { --cbft-tag: var(--chart-4); }
+.cbft-tagdot[data-hue='4'] { --cbft-tag: var(--chart-5); }
+.cbft-tagdot[data-hue='5'] { --cbft-tag: var(--chart-6); }
+.cbft-tagdot[data-hue='6'] { --cbft-tag: var(--chart-7); }
+.cbft-tagdot[data-hue='7'] { --cbft-tag: var(--chart-8); }
+
+/*
+ * The strip — what this device is narrowing the tree by, and one press back to everything.
+ * One tree row tall and as quiet as the pinned heading, because it is a reminder rather than
+ * a control panel; the menu behind it is the control panel.
+ */
+.cbft-fv-strip {
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+	flex: none;
+	min-block-size: var(--cbft-row);
+	padding: 0.125rem calc(var(--cbft-inset) - 2px) 0.125rem var(--cbft-inset);
+	margin: 0 0 0.125rem;
+	border-block-end: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+	font-size: 0.75rem;
+	color: var(--muted-foreground);
+}
+
+.cbft-fv-strip-open,
+.cbft-fv-strip-clear {
+	border: 0;
+	background: transparent;
+	color: inherit;
+	font: inherit;
+	cursor: pointer;
+	border-radius: var(--radius-sm, 0.375rem);
+}
+
+.cbft-fv-strip-open {
+	display: flex;
+	flex: 1 1 auto;
+	min-inline-size: 0;
+	align-items: center;
+	gap: 0.5rem;
+	padding: 0.125rem 0.25rem;
+	margin-inline-start: -0.25rem;
+	overflow: hidden;
+	white-space: nowrap;
+	text-align: start;
+}
+
+.cbft-fv-strip-clear {
+	flex: none;
+	padding: 0.125rem 0.375rem;
+	color: var(--accent);
+	font-weight: 500;
+}
+
+.cbft-fv-strip-open:hover,
+.cbft-fv-strip-clear:hover {
+	background: color-mix(in srgb, var(--muted-foreground) 12%, transparent);
+}
+
+.cbft-fv-strip-open:focus-visible,
+.cbft-fv-strip-clear:focus-visible {
+	outline: 2px solid var(--ring, var(--accent-solid));
+	outline-offset: -2px;
+}
+
+.cbft-fv-part {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.25rem;
+	min-inline-size: 0;
+}
+
+.cbft-fv-chip {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.25rem;
+	color: var(--cbft-fg, var(--foreground));
+}