@shortlink-org/portolan 0.2.2 → 0.2.4

package/src/app/Sidebar.tsx

@@ -2,24 +2,9 @@ import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react"
 import type { KeyboardEvent as ReactKeyboardEvent } from "react";
 import { TREE_KEYS, treeKey } from "./tree-keys";
 import type { TreeRow } from "./tree-keys";
-import { Link, NavLink, useLocation, useMatch } from "react-router";
-import {
-  DURATION,
-  LayoutGroup,
-  Unfold,
-  m,
-  transitions,
-} from "../lib/motion";
-import {
-  Check,
-  ChevronRight,
-  GripVertical,
-  PanelLeftOpen,
-  PinOff,
-  Settings2,
-  TriangleAlert,
-} from "lucide-react";
-import { catalog, index } from "../data";
+import { Link, NavLink } from "react-router";
+import { DURATION, LayoutGroup, Unfold } from "../lib/motion";
+import { catalog } from "../data";
 import type {
   Aggregate,
   Block,
@@ -37,19 +22,10 @@ import type {
 } from "../catalog";
 import { allModules, allTerms, enumsOf, storeViews } from "../catalog";
 import { adrNumber, newestAccepted } from "../lib/adr";
-import { contextName, ctxStyle } from "../lib/context-color";
-import { contextStats, problems } from "../lib/derive";
-import { dataProblems } from "../lib/data-problems";
-import { protoProblems } from "../lib/proto-problems";
+import { contextStats } from "../lib/derive";
 import { vocabularies } from "../language/cards";
-import {
-  FLOW_HEALTH_NOTE,
-  groupFlowsByOwner,
-  reachDots,
-  visibleEntries,
-} from "../lib/flow-tree";
-import type { FlowEntry, FlowHealth, FlowGroup } from "../lib/flow-tree";
-import type { Kind, LeafKind } from "../lib/kinds";
+import { groupFlowsByOwner } from "../lib/flow-tree";
+import type { LeafKind } from "../lib/kinds";
 import { plural } from "../lib/format";
 import {
   FLOW_GROUPS_KEY,
@@ -59,15 +35,15 @@ import {
 } from "../lib/sidebar-prefs";
 import type { Flags } from "../lib/sidebar-prefs";
 import { KindIcon } from "../components/kind";
-import { CompassRose, Wordmark } from "../components/logo";
+import { Wordmark } from "../components/logo";
 import { isStruck } from "../components/primitives";
 import { packageAnchor, paths } from "../routes";
-import { selectionHash } from "../selection/hash";
 import { STORE_KIND_LABEL, StoreKindMark } from "../er/StoreHeader";
-import { resolvePin, usePinsStore } from "./pins";
-import { resolveSelection, selectionFor } from "../selection/model";
-import { selectsInPlace } from "../selection/pages";
+import { resolveSelection } from "../selection/model";
 import { useSelectionStore } from "../selection/store";
+import { SidebarBottomGroup, SidebarIconRail } from "./SidebarFooter";
+import { FlowGroupNode, PinnedSection } from "./SidebarFlowSections";
+import { Branch, Group, Leaf, Section, indent } from "./SidebarTree";
 
 // ---------------------------------------------------------------------------
 // The rows under a service, grouped the way the tree draws them. The tree
@@ -181,316 +157,7 @@ const CLASSIFICATION_NOTE: Record<Classification, string> = {
 // Rows
 // ---------------------------------------------------------------------------
 
-const indent = (depth: number) => 8 + depth * 12;
-
-/**
- * The selection's light: the raised background and the accent edge of the
- * row that is selected. One element for the whole tree - a new selection is
- * the same light arriving on another row, and it travels there on the settle
- * spring rather than going out here and coming on over there. `-left-0.5`
- * puts its edge over the row's own transparent 2px border, so the text does
- * not move.
- */
-function SelectionLight() {
-  return (
-    <m.span
-      layoutId="selection"
-      aria-hidden
-      className="pointer-events-none absolute inset-y-0 right-0 -left-0.5 -z-10 border-l-2 border-accent"
-      style={{ background: "var(--surface-2)" }}
-      transition={transitions.settle}
-    />
-  );
-}
-
-function Chevron({ open }: { open: boolean }) {
-  return (
-    <ChevronRight
-      size={14}
-      aria-hidden
-      className="block shrink-0 t-micro transition-transform"
-      style={{
-        transform: open ? "rotate(90deg)" : "none",
-        color: "var(--fg-muted)",
-      }}
-    />
-  );
-}
-
-/**
- * Clicking a row always selects. Whether it also navigates is the question the
- * page on screen answers: on a flow page, picking something that flow already
- * draws is a question about that sequence, so the reader stays put.
- *
- * Only the in-place case writes the store here. A row that navigates carries
- * its selection in the link's hash instead (see `rowTarget`): writing the
- * store first and then letting the link go would race SelectionSync, whose
- * `replace` lands with the pathname it rendered with - the page being left -
- * and undoes the navigation. A selection in the URL wins on arrival, so one
- * write does both jobs. The palette works the same way.
- */
-function useRowClick(selId: string | undefined) {
-  const select = useSelectionStore((s) => s.select);
-  const { pathname } = useLocation();
-  return (e: React.MouseEvent) => {
-    if (selId === undefined) return;
-    if (!selectsInPlace(pathname, selectionFor(selId))) return;
-    e.preventDefault();
-    select(selId, "sidebar");
-  };
-}
-
-/** Where a row's link goes: its page, with the row's selection in the hash. */
-function rowTarget(to: string, selId: string | undefined): string {
-  if (selId === undefined || to.includes("#")) return to;
-  return `${to}${selectionHash(selectionFor(selId))}`;
-}
-
-/**
- * A leaf: the whole row navigates. Rows that stand for a selectable entity also
- * carry `selId`, which makes them both a writer of the selection and a reader
- * of it - the row lights up whether it was clicked here, on a diagram, or in
- * the palette.
- */
-function Leaf({
-  to,
-  depth,
-  children,
-  title,
-  selId,
-}: {
-  to: string;
-  depth: number;
-  children: React.ReactNode;
-  title?: string;
-  selId?: string;
-}) {
-  const selected = useSelectionStore(
-    (s) => selId !== undefined && s.selection?.id === selId,
-  );
-  const onClick = useRowClick(selId);
-  return (
-    <NavLink
-      to={rowTarget(to, selId)}
-      end
-      title={title}
-      data-sel={selId}
-      data-tree-row
-      data-tree-depth={depth}
-      onClick={onClick}
-      style={({ isActive }) => ({
-        paddingLeft: indent(depth),
-        background: isActive && !selected ? "var(--surface-2)" : undefined,
-        borderLeftWidth: 2,
-        borderLeftStyle: "solid",
-        borderLeftColor:
-          isActive && !selected ? "var(--accent)" : "transparent",
-      })}
-      /* The edge is always 2px, transparent when idle: lighting a row must not
-         shift the text beside it. The route's own row paints its light in
-         place; the SELECTION's light is one element that slides from the row
-         it was on to this one. */
-      data-nav-item
-      className="tree-row relative isolate flex items-center gap-1.5 py-[3px] pr-2 t-micro transition-colors hover:bg-surface"
-    >
-      {selected ? <SelectionLight /> : null}
-      {children}
-    </NavLink>
-  );
-}
-
-/**
- * A branch: a disclosure triangle that only expands, next to a link that only
- * navigates. Keeping them separate means neither is nested inside the other.
- *
- * `end` is for controls that must be their own target - the unresolved-edge
- * count on a context, which goes somewhere else entirely. It sits OUTSIDE the
- * link, because an anchor may not contain another one, and the link gives up
- * its claim on the rest of the row to make room for it.
- */
-function Branch({
-  to,
-  depth,
-  open,
-  onToggle,
-  label,
-  children,
-  right,
-  end,
-  under,
-  selId,
-}: {
-  to: string;
-  depth: number;
-  open: boolean;
-  onToggle: () => void;
-  label: string;
-  children: React.ReactNode;
-  right?: React.ReactNode;
-  end?: React.ReactNode;
-  under?: React.ReactNode;
-  selId?: string;
-}) {
-  const selected = useSelectionStore(
-    (s) => selId !== undefined && s.selection?.id === selId,
-  );
-  const onClick = useRowClick(selId);
-  const active = useMatch({ path: to, end: true }) !== null && !selected;
-  return (
-    <>
-      <div
-        className="tree-row group relative isolate flex items-stretch t-micro transition-colors hover:bg-surface"
-        style={{
-          paddingLeft: indent(depth),
-          background: active ? "var(--surface-2)" : undefined,
-          borderLeftWidth: 2,
-          borderLeftStyle: "solid",
-          borderLeftColor: active ? "var(--accent)" : "transparent",
-        }}
-      >
-        {selected ? <SelectionLight /> : null}
-        <button
-          type="button"
-          onClick={onToggle}
-          aria-expanded={open}
-          aria-label={`${open ? "Collapse" : "Expand"} ${label}`}
-          data-tree-toggle
-          className="flex shrink-0 items-center pr-1"
-        >
-          <Chevron open={open} />
-        </button>
-        <NavLink
-          to={rowTarget(to, selId)}
-          end
-          data-sel={selId}
-          data-nav-item
-          data-tree-row
-          data-tree-depth={depth}
-          data-tree-open={open}
-          onClick={onClick}
-          className={`flex min-w-0 items-center gap-1.5 py-[3px] pr-2 ${
-            end ? "shrink" : "flex-1"
-          }`}
-        >
-          {children}
-          {right && !end ? (
-            <span className="ml-auto shrink-0">{right}</span>
-          ) : null}
-        </NavLink>
-        {end}
-        {right && end ? (
-          <span className="flex shrink-0 items-center pr-2">{right}</span>
-        ) : null}
-      </div>
-      {under}
-    </>
-  );
-}
-
-/**
- * A group header inside an aggregate - "value objects (3)". It names a kind
- * rather than a thing, so it has no page and does nothing but open and close.
- */
-function Group({
-  kind,
-  label,
-  count,
-  open,
-  onToggle,
-  depth,
-  children,
-}: {
-  kind: LeafKind;
-  /** Overrides the kind's own plural — the stores group is "data", not "tables". */
-  label?: string;
-  count: number;
-  open: boolean;
-  onToggle: () => void;
-  depth: number;
-  children: React.ReactNode;
-}) {
-  if (count === 0) return null;
-  return (
-    <>
-      <button
-        type="button"
-        onClick={onToggle}
-        aria-expanded={open}
-        data-tree-row
-        data-tree-depth={depth}
-        data-tree-open={open}
-        style={{ paddingLeft: indent(depth) }}
-        className="tree-row group-row"
-      >
-        <Chevron open={open} />
-        <KindIcon kind={kind} />
-        <span>
-          {label ?? KIND_GROUP_LABEL[kind]} ({count})
-        </span>
-      </button>
-      <Unfold open={open}>{children}</Unfold>
-    </>
-  );
-}
-
-const KIND_GROUP_LABEL: Record<LeafKind, string> = {
-  vo: "value objects",
-  entity: "entities",
-  enum: "enums",
-  event: "events",
-  command: "commands",
-  query: "queries",
-  endpoint: "api",
-  table: "tables",
-  view: "views",
-};
 
-// ---------------------------------------------------------------------------
-// Sections
-// ---------------------------------------------------------------------------
-
-/**
- * A top-level band of the tree. Its header folds it and always states its size:
- * a folded section that also hid its count would be indistinguishable from an
- * empty one, and the reader would have to open it to find out which.
- *
- * 12px above the header and nothing else between sections. The tree is one
- * continuous list; boxing each band would make a reader count boxes.
- */
-function Section({
-  title,
-  count,
-  open,
-  onToggle,
-  first = false,
-  children,
-}: {
-  title: string;
-  count: number;
-  open: boolean;
-  onToggle: () => void;
-  /** The first section needs no air above it - the header is already there. */
-  first?: boolean;
-  children: React.ReactNode;
-}) {
-  return (
-    <div className={first ? "" : "mt-3"}>
-      <button
-        type="button"
-        onClick={onToggle}
-        aria-expanded={open}
-        className="sb-section"
-      >
-        <Chevron open={open} />
-        {title}
-        <span className="sb-count">{count}</span>
-      </button>
-      <Unfold open={open}>{children}</Unfold>
-    </div>
-  );
-}
-
-/** A section of the tree with nothing under it, and why. */
 // ---------------------------------------------------------------------------
 // The rows as the arrow keys see them. Every leaf, branch link and group
 // header carries `data-tree-row`; a closed branch's children are not in the
@@ -529,390 +196,6 @@ function TreeNote({ children }: { children: React.ReactNode }) {
 // Flows
 // ---------------------------------------------------------------------------
 
-const HEALTH_COLOR: Record<FlowHealth, string> = {
-  unresolved: "var(--status-unresolved)",
-  declared: "var(--fg-faint)",
-  verified: "var(--status-verified)",
-};
-
-/**
- * One flow. Its name is what the row is for; the two marks at the end answer
- * the two questions a reader has before opening it - how far does it travel,
- * and can I believe it.
- */
-function FlowRow({ entry }: { entry: FlowEntry }) {
-  const { flow, health, reach } = entry;
-  const { dots, more } = reachDots(reach);
-  const crosses =
-    reach.length === 0
-      ? "stays inside its own context"
-      : `crosses into ${reach.join(", ")}`;
-  return (
-    <Leaf
-      to={paths.flow(flow.slug)}
-      depth={1}
-      title={`${flow.slug} — ${crosses}`}
-    >
-      <KindIcon kind="flow" />
-      <span className="truncate">{flow.name}</span>
-      <span className="ml-auto flex shrink-0 items-center gap-2 pl-2">
-        <span className="flex items-center gap-0.5" aria-hidden>
-          {dots.map((c) => (
-            <span key={c} className="sb-reach" style={ctxStyle(c)} />
-          ))}
-          {more > 0 ? (
-            <span className="mono" style={{ color: "var(--fg-faint)" }}>
-              +{more}
-            </span>
-          ) : null}
-        </span>
-        <span
-          className="sb-health"
-          title={FLOW_HEALTH_NOTE[health]}
-          style={{ background: HEALTH_COLOR[health] }}
-        />
-      </span>
-    </Leaf>
-  );
-}
-
-/**
- * The flows one context owns. Grouping them by owner rather than listing them
- * flat is what makes the section answer "whose flows are these" - and the
- * unowned group is a defect report: with a valid catalog it is never drawn.
- */
-function FlowGroupNode({
-  group,
-  open,
-  onToggle,
-}: {
-  group: FlowGroup;
-  open: boolean;
-  onToggle: () => void;
-}) {
-  const { shown, hidden } = visibleEntries(group.entries);
-  const owner = group.owner;
-  const label = owner === null ? "unowned" : contextName(owner);
-  return (
-    <div>
-      <button
-        type="button"
-        onClick={onToggle}
-        aria-expanded={open}
-        style={{ paddingLeft: indent(0) }}
-        title={
-          owner === null
-            ? "these flows name no owner — a valid catalog has none of these"
-            : `flows owned by ${owner}`
-        }
-        className="tree-row flex w-full items-center gap-1.5 py-[3px] pr-2 text-left t-micro transition-colors hover:bg-surface"
-      >
-        <Chevron open={open} />
-        {owner === null ? (
-          <TriangleAlert
-            size={13}
-            aria-hidden
-            className="block shrink-0 text-unresolved"
-          />
-        ) : (
-          <KindIcon kind="context" contextId={owner} />
-        )}
-        <span
-          className="truncate"
-          style={owner === null ? { color: "var(--status-unresolved)" } : {}}
-        >
-          {label}
-        </span>
-        <span className="sb-count">{group.entries.length}</span>
-      </button>
-      <Unfold open={open}>
-        <>
-          {shown.map((entry) => (
-            <FlowRow key={entry.flow.slug} entry={entry} />
-          ))}
-          {hidden > 0 && owner !== null ? (
-            <NavLink
-              to={`${paths.flows()}?owner=${encodeURIComponent(owner)}`}
-              data-nav-item
-              style={{ paddingLeft: indent(1) }}
-              className="tree-row mono flex items-center py-[3px] pr-2 text-accent hover:bg-surface"
-            >
-              view all {group.entries.length} →
-            </NavLink>
-          ) : null}
-        </>
-      </Unfold>
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Pins
-// ---------------------------------------------------------------------------
-
-/**
- * The reader's own shortlist, above everything the catalog decided. It only
- * exists while there is something on it: an empty band with a header would
- * teach the feature by taking up room, which is the one thing the pane cannot
- * spare.
- */
-function PinnedSection({
-  open,
-  onToggle,
-}: {
-  open: boolean;
-  onToggle: () => void;
-}) {
-  const pins = usePinsStore((s) => s.pins);
-  const toggle = usePinsStore((s) => s.toggle);
-  const reorder = usePinsStore((s) => s.reorder);
-  // Which row is under the cursor is a ref, not state: a drop fires in the same
-  // gesture that started the drag, and a state write scheduled by `dragstart`
-  // is not guaranteed to have landed by the time `drop` reads it. The state
-  // beside it only dims the row, so it is allowed to arrive late.
-  const dragFrom = useRef<number | null>(null);
-  const [dragging, setDragging] = useState<number | null>(null);
-
-  // Resolved at render, so a pin taken against a build that no longer has the
-  // event simply stops being drawn rather than pointing into nothing.
-  const rows = useMemo(
-    () =>
-      pins
-        .map((pin, at) => ({ at, resolved: resolvePin(pin) }))
-        .filter(
-          (r): r is { at: number; resolved: NonNullable<typeof r.resolved> } =>
-            r.resolved !== null,
-        ),
-    [pins],
-  );
-  if (rows.length === 0) return null;
-
-  return (
-    <Section
-      title="Pinned"
-      count={rows.length}
-      open={open}
-      onToggle={onToggle}
-      first
-    >
-      {rows.map(({ at, resolved }) => (
-        <div
-          key={`${resolved.pin.kind}:${resolved.pin.id}`}
-          draggable
-          onDragStart={(e) => {
-            dragFrom.current = at;
-            e.dataTransfer.effectAllowed = "move";
-            setDragging(at);
-          }}
-          onDragEnd={() => {
-            dragFrom.current = null;
-            setDragging(null);
-          }}
-          onDragOver={(e) => {
-            e.preventDefault();
-            e.dataTransfer.dropEffect = "move";
-          }}
-          onDrop={(e) => {
-            e.preventDefault();
-            const from = dragFrom.current;
-            if (from !== null) reorder(from, at);
-            dragFrom.current = null;
-            setDragging(null);
-          }}
-          className={`group relative flex items-stretch ${
-            dragging === at ? "opacity-50" : ""
-          }`}
-        >
-          <NavLink
-            to={resolved.path}
-            end
-            draggable={false}
-            data-nav-item
-            title={resolved.title}
-            style={({ isActive }) => ({
-              paddingLeft: indent(0),
-              background: isActive ? "var(--surface-2)" : undefined,
-              borderLeftWidth: 2,
-              borderLeftStyle: "solid",
-              borderLeftColor: isActive ? "var(--accent)" : "transparent",
-            })}
-            className="tree-row flex min-w-0 flex-1 items-center gap-1.5 py-[3px] pr-2 t-micro transition-colors hover:bg-surface"
-          >
-            <GripVertical
-              size={12}
-              aria-hidden
-              className="block shrink-0 opacity-0 group-hover:opacity-100"
-              style={{ color: "var(--fg-faint)" }}
-            />
-            <KindIcon
-              kind={resolved.kind}
-              {...(resolved.contextId ? { contextId: resolved.contextId } : {})}
-            />
-            <span className="truncate">{resolved.name}</span>
-          </NavLink>
-          <button
-            type="button"
-            onClick={() => toggle(resolved.pin)}
-            aria-label={`Unpin ${resolved.name}`}
-            title={`Unpin ${resolved.name}`}
-            className="flex shrink-0 items-center px-2 text-muted opacity-0 t-micro transition-opacity hover:text-ink group-hover:opacity-100 focus-visible:opacity-100"
-          >
-            <PinOff size={13} aria-hidden />
-          </button>
-        </div>
-      ))}
-    </Section>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// The bottom group. A sibling of the scroller rather than a row inside it, so
-// "pinned to the bottom" is a fact about the layout and not about how far the
-// tree happens to have been scrolled.
-// ---------------------------------------------------------------------------
-
-function BottomGroup() {
-  // Both halves of the Problems page, because that is what the row opens. The
-  // badge is red while anything on it is an error and amber when only the
-  // schema disagrees with itself - a page of warnings is not a clean estate,
-  // and a green tick over it would be the one lie the row can tell.
-  const found = useMemo(
-    () => [
-      ...problems(catalog),
-      ...protoProblems(catalog, index),
-      ...dataProblems(catalog, index),
-    ],
-    [],
-  );
-  const errors = found.filter((p) => p.severity === "error").length;
-  const colour =
-    errors > 0 ? "var(--status-unresolved)" : "var(--status-declared)";
-
-  return (
-    <div className="shrink-0 border-t bg-canvas border-line py-0.5">
-      <NavLink
-        to={paths.problems()}
-        end
-        data-nav-item
-        aria-keyshortcuts="g p"
-        title={
-          found.length === 0
-            ? "Problems — every edge in the catalog lands somewhere"
-            : `Problems — ${found.length} to look at`
-        }
-        style={({ isActive }) => ({
-          paddingLeft: indent(0),
-          background: isActive ? "var(--surface-2)" : undefined,
-          borderLeftWidth: 2,
-          borderLeftStyle: "solid",
-          borderLeftColor: isActive ? "var(--accent)" : "transparent",
-        })}
-        className="tree-row flex items-center gap-1.5 py-[3px] pr-2 t-micro transition-colors hover:bg-surface"
-      >
-        <TriangleAlert
-          size={14}
-          aria-hidden
-          className="block shrink-0"
-          style={{ color: found.length === 0 ? "var(--fg-muted)" : colour }}
-        />
-        <span className="truncate">Problems</span>
-        {found.length === 0 ? (
-          <Check
-            size={13}
-            aria-hidden
-            className="ml-auto block shrink-0 text-muted"
-          />
-        ) : (
-          <span
-            className="mono tnum ml-auto shrink-0"
-            style={{ color: colour }}
-          >
-            {found.length}
-          </span>
-        )}
-      </NavLink>
-      <NavLink
-        to={paths.settings()}
-        data-nav-item
-        title="Settings — projects, plugins and appearance"
-        style={({ isActive }) => ({
-          paddingLeft: indent(0),
-          background: isActive ? "var(--surface-2)" : undefined,
-          borderLeftWidth: 2,
-          borderLeftStyle: "solid",
-          borderLeftColor: isActive ? "var(--accent)" : "transparent",
-        })}
-        className="tree-row flex items-center gap-1.5 py-[3px] pr-2 text-muted t-micro transition-colors hover:bg-surface hover:text-ink"
-      >
-        <Settings2 size={14} aria-hidden className="block shrink-0" />
-        <span className="truncate">Settings</span>
-      </NavLink>
-    </div>
-  );
-}
-
-/**
- * What is left of the tree at 48px. Not a menu: every button here does the one
- * thing the rail can honestly offer, which is to give the tree its width back
- * and land the reader on the section they pointed at.
- */
-function IconRail({ onExpand }: { onExpand: () => void }) {
-  const sections: { key: string; kind: Kind; label: string }[] = [
-    { key: "flows", kind: "flow", label: "Flows" },
-    { key: "domains", kind: "context", label: "Contexts" },
-    // Conditional for the same reason the band is: at 48px a button that opens
-    // an empty section is worse than no button.
-    ...(allModules(catalog).length > 0
-      ? [{ key: "registry", kind: "module" as Kind, label: "Registry" }]
-      : []),
-    { key: "adrs", kind: "adr", label: "Decisions" },
-  ];
-  return (
-    <nav
-      className="flex h-full flex-col items-center gap-1 border-r py-3 border-line bg-canvas"
-      aria-label="Catalog (collapsed)"
-    >
-      {/* The mark survives the collapse; the wordmark does not fit and is not
-          missed - at 48px the rose is the whole identity. */}
-      <CompassRose size={18} className="mb-1 text-ink" />
-      <button
-        type="button"
-        onClick={onExpand}
-        title="Expand the catalog"
-        aria-label="Expand the catalog"
-        aria-expanded={false}
-        className="flex size-8 items-center justify-center rounded-control text-muted t-micro transition-colors hover:bg-surface hover:text-ink"
-      >
-        <PanelLeftOpen size={16} aria-hidden />
-      </button>
-      <span aria-hidden className="my-1 h-px w-6 bg-line" />
-      {sections.map(({ key, kind, label }) => (
-        <button
-          key={key}
-          type="button"
-          onClick={onExpand}
-          title={`${label} — expand the catalog`}
-          aria-label={`${label} — expand the catalog`}
-          className="flex size-8 items-center justify-center rounded-control t-micro transition-colors hover:bg-surface"
-        >
-          <KindIcon kind={kind} size={16} />
-        </button>
-      ))}
-      <NavLink
-        to={paths.settings()}
-        title="Settings"
-        aria-label="Settings"
-        className={({ isActive }) =>
-          `mt-auto flex size-8 items-center justify-center rounded-control t-micro transition-colors hover:bg-surface ${
-            isActive ? "bg-surface text-accent" : "text-muted hover:text-ink"
-          }`
-        }
-      >
-        <Settings2 size={16} aria-hidden />
-      </NavLink>
-    </nav>
-  );
-}
 
 // ---------------------------------------------------------------------------
 
@@ -1082,7 +365,7 @@ export function Sidebar({
     return () => clearTimeout(timer);
   }, [selection, collapsed, sections, groups]);
 
-  if (railed) return <IconRail onExpand={() => onExpand?.()} />;
+  if (railed) return <SidebarIconRail onExpand={() => onExpand?.()} />;
 
   // Namespaces the selection light's layoutId to this tree.
   const treeId = useId();
@@ -1444,7 +727,7 @@ export function Sidebar({
           ) : null}
         </div>
 
-        <BottomGroup />
+        <SidebarBottomGroup />
     </LayoutGroup>
     </nav>
   );