@kgdiff/viewer 0.4.0 → 0.6.0

package/src/ui/sidebar.ts

@@ -1,688 +1,417 @@
 /**
- * Sidebar: "Changes" header with review progress, node search, family filter chips, the
- * phase-grouped change list (virtualized, sticky group headers, `listbox` with
- * `aria-activedescendant`) and the detail panel. Below 760 px it is a resizable bottom sheet.
+ * The default layout's sidebar (RFC 0001 §4): the change list with the search and the family
+ * filters in its head, the search results in the list's place, and the detail panel below.
+ * Below 760 px it is a resizable bottom sheet. The regions in it are bound to the root on their
+ * own; the sidebar places them and follows their panel states: a collapsed region folds to the
+ * control that opens it again (the list to its title, the detail panel to its bar, the search
+ * and the filters to a button), and the sidebar folds away when all four are collapsed. It has
+ * a draggable width, and a draggable split between the list and the detail panel; both
+ * separators also move with the arrow keys.
  */
-import type { SceneHunk } from '@kgdiff/scene';
-import type { Topic } from '../controller.js';
-import { attr, h, icon, replace, setText } from '../dom.js';
-import { familyCounts, type ListItem } from '../list-model.js';
-import type { SearchHit } from '../search.js';
-import { FAMILIES } from '../styles.js';
-import { sceneHunkGlyph, type UiContext } from './context.js';
-import { Detail } from './detail.js';
-import { swatch } from './swatch.js';
-
-/** Row slot and group-header heights (px); rows are 52 px tall inside a 56 px slot. */
-export const ROW_SLOT = 56;
-export const HEADER_SLOT = 32;
-const OVERSCAN = 320;
-const SEARCH_LIMIT = 50;
-
-function itemHeight(item: ListItem): number {
-  return item.kind === 'header' ? HEADER_SLOT : ROW_SLOT;
+import { attr, h, icon, iconButton, moveFocusOut, relabel } from '../dom.js';
+import type { PanelRegion, PanelState, PanelStates } from '../index.js';
+import { SIDEBAR_REGIONS } from '../panel-levels.js';
+import { frameOrTimeout } from '../schedule.js';
+import type { Topic } from '../session.js';
+import type { ChangeList } from './change-list.js';
+import type { UiContext } from './context.js';
+import type { Detail } from './detail.js';
+import type { Filters } from './filters.js';
+import type { Search } from './search.js';
+
+export { HEADER_SLOT, ROW_SLOT } from './change-list.js';
+
+/** The sidebar's default width and the range it can be dragged in, px. */
+export const SIDEBAR_WIDTH = 360;
+export const SIDEBAR_MIN = 280;
+const SIDEBAR_MAX = 720;
+/** The canvas keeps at least this much width next to the sidebar, px. */
+const STAGE_MIN = 320;
+/** Keyboard steps of the width (px) and of the split (share of the height). */
+const WIDTH_STEP = 16;
+const WIDTH_STEP_LARGE = 64;
+const SPLIT_STEP = 0.05;
+/** The change list keeps this much height, the detail panel this much, px. */
+const LIST_MIN = 96;
+const DETAIL_MIN = 64;
+
+/** What the sidebar asks of the layout that owns it. */
+export interface SidebarHost {
+  /** The user opened or folded one of the sidebar's regions. */
+  setPanel(region: PanelRegion, state: PanelState): void;
+  /** The user resized the sidebar or moved the split (reported once the drag or key press ended). */
+  resized(width: number, detailShare: number | null): void;
+  /** Where focus goes when the whole sidebar folds while it has focus. */
+  focusOutside(): HTMLElement | null;
 }
 
 export class Sidebar {
   readonly el: HTMLElement;
-  readonly detail: Detail;
-  readonly #title: HTMLElement;
-  readonly #count: HTMLElement;
-  readonly #progress: HTMLElement;
-  readonly #progressText: HTMLElement;
-  readonly #progressBar: HTMLElement;
-  readonly searchInput: HTMLInputElement;
-  readonly #searchKbd: HTMLElement;
-  readonly #searchClear: HTMLButtonElement;
-  readonly #filters: HTMLElement;
-  readonly #chips = new Map<string, HTMLButtonElement>();
-  readonly #showAll: HTMLButtonElement;
-  readonly list: HTMLElement;
-  readonly #listInner: HTMLElement;
-  /** Visually hidden group names the options are described by. */
-  readonly #phases: HTMLElement = h('div', { class: 'sr-only' });
-  readonly #sticky: HTMLElement;
-  readonly #results: HTMLElement;
+  readonly #inner: HTMLElement;
   readonly #handle: HTMLElement;
-  #offsets: number[] = [];
-  #rendered = new Map<number, HTMLElement>();
-  #scrollQueued = false;
-  #query = '';
-  #hits: SearchHit[] = [];
-  #activeHit = 0;
-
+  readonly #resize: HTMLElement;
+  readonly #split: HTMLElement;
+  readonly #head: HTMLElement;
+  readonly #listHead: HTMLElement;
+  readonly #listWrap: HTMLElement;
+  readonly #listToggle: HTMLButtonElement;
+  readonly #searchWrap: HTMLElement;
+  readonly #searchButton: HTMLButtonElement;
+  readonly #filtersWrap: HTMLElement;
+  readonly #filtersButton: HTMLButtonElement;
+  readonly #detailWrap: HTMLElement;
+  readonly #detailBar: HTMLButtonElement;
+  readonly #detail: Detail;
   readonly #ctx: UiContext;
-
-  constructor(ctx: UiContext) {
+  readonly #host: SidebarHost;
+  #states: PanelStates | null = null;
+  #width = SIDEBAR_WIDTH;
+  #share: number | null = null;
+  /** The sizes last reported as done (or applied as remembered): a gesture that ends there is not reported. */
+  #reported: { width: number; share: number | null } = { width: SIDEBAR_WIDTH, share: null };
+
+  constructor(
+    ctx: UiContext,
+    host: SidebarHost,
+    list: ChangeList,
+    search: Search,
+    filters: Filters,
+    detail: Detail,
+  ) {
     this.#ctx = ctx;
-    const c = ctx.controller;
-    this.#title = h('h2', { id: 'kg-changes-title' });
-    this.#count = h('span', { class: 'count-badge' });
-    this.#progressText = h('span');
-    this.#progressBar = h('div');
-    this.#progress = h(
-      'div',
-      { class: 'progress' },
-      this.#progressText,
-      h('span', { class: 'bar', 'aria-hidden': 'true' }, this.#progressBar),
-    );
-    this.searchInput = h('input', {
-      type: 'search',
-      autocomplete: 'off',
-      spellcheck: 'false',
-      role: 'combobox',
-      'aria-autocomplete': 'list',
-      'aria-expanded': 'false',
-      'aria-controls': 'kg-results',
-      enterkeyhint: 'go',
+    this.#host = host;
+    this.#detail = detail;
+    this.#handle = h('div', {
+      class: 'sheet-handle',
+      role: 'separator',
+      'aria-orientation': 'horizontal',
+      tabindex: '0',
     });
-    this.#searchKbd = h('kbd', { 'aria-hidden': 'true', text: '/' });
-    this.#searchClear = h(
-      'button',
-      { type: 'button', class: 'clear', hidden: true, onclick: () => this.#setQuery('', true) },
-      icon('close'),
-    );
-    this.searchInput.addEventListener('input', () => this.#setQuery(this.searchInput.value));
-    this.searchInput.addEventListener('keydown', (e) => this.#onSearchKey(e));
-    this.searchInput.addEventListener('focus', () => this.#updateSearchChrome());
-    this.searchInput.addEventListener('blur', () => this.#updateSearchChrome());
-    this.#filters = h('div', { class: 'filters', role: 'group' });
-    for (const f of FAMILIES) {
-      const chip = h(
-        'button',
-        {
-          type: 'button',
-          class: 'fchip',
-          'data-family': f,
-          'aria-pressed': 'false',
-          onclick: () => c.toggleFamily(f),
-        },
-        swatch(f),
-        h('span', { class: 'lbl' }),
-        h('span', { class: 'n' }),
-      );
-      this.#chips.set(f, chip);
-      this.#filters.appendChild(chip);
-    }
-    this.#showAll = h('button', {
-      type: 'button',
-      class: 'link-btn',
-      hidden: true,
-      onclick: () => c.setFamilies([]),
+    this.#bindSheet();
+    const toggle = (region: PanelRegion) => () => {
+      const open = this.#states?.[region] === 'open';
+      host.setPanel(region, open ? 'collapsed' : 'open');
+    };
+    this.#listToggle = iconButton('chevron-up', '', toggle('list'), {
+      class: 'icon-btn sm list-toggle',
+      'aria-expanded': 'true',
+      'aria-controls': 'kg-list-wrap',
     });
-    this.#filters.appendChild(this.#showAll);
-
-    this.#listInner = h('div', { class: 'list-inner', role: 'presentation' });
-    this.list = h(
-      'div',
-      {
-        class: 'list scroll',
-        role: 'listbox',
-        tabindex: '0',
-        'aria-labelledby': 'kg-changes-title',
-        'aria-keyshortcuts': 'J K X Enter Home End',
-      },
-      this.#listInner,
-    );
-    this.list.addEventListener('scroll', () => this.#queueWindow(), { passive: true });
-    this.list.addEventListener('click', (e) => this.#onListClick(e));
-    this.list.addEventListener('dblclick', (e) => {
-      const row = (e.target as Element).closest('.row');
-      if (row) c.flyToSelection();
+    this.#searchButton = iconButton('search', '', () => host.setPanel('search', 'open'), {
+      class: 'icon-btn sm',
+      hidden: true,
     });
-    this.#sticky = h('div', { class: 'sticky', 'aria-hidden': 'true', hidden: true });
-    this.#results = h('div', {
-      class: 'results list scroll',
-      id: 'kg-results',
-      role: 'listbox',
+    this.#filtersButton = iconButton('filter', '', () => host.setPanel('filters', 'open'), {
+      class: 'icon-btn sm filters-btn',
       hidden: true,
     });
-    this.#handle = h('div', {
-      class: 'sheet-handle',
+    this.#listHead = list.head;
+    this.#head = h(
+      'div',
+      { class: 'sb-row' },
+      list.head,
+      this.#searchButton,
+      this.#filtersButton,
+      this.#listToggle,
+    );
+    this.#searchWrap = h('div', { class: 'search-wrap' }, search.box);
+    this.#filtersWrap = h('div', { class: 'filters-wrap', id: 'kg-filters' }, filters.el);
+    this.#listWrap = h(
+      'div',
+      { class: 'list-wrap', id: 'kg-list-wrap' },
+      list.sticky,
+      list.list,
+      search.results,
+      list.phases,
+    );
+    this.#split = h('div', {
+      class: 'sb-split',
       role: 'separator',
       'aria-orientation': 'horizontal',
+      'aria-valuemin': '0',
+      'aria-valuemax': '100',
       tabindex: '0',
     });
-    this.#bindSheet();
-    this.detail = new Detail(ctx);
-    const head = h(
-      'div',
-      { class: 'sb-head' },
-      h('div', { class: 'sb-title' }, this.#title, this.#count, this.#progress),
-      h(
-        'div',
-        { class: 'search' },
-        icon('search'),
-        this.searchInput,
-        this.#searchKbd,
-        this.#searchClear,
-      ),
-      this.#filters,
+    this.#detailBar = h(
+      'button',
+      {
+        type: 'button',
+        class: 'detail-bar',
+        'aria-expanded': 'true',
+        'aria-controls': 'kg-detail',
+        onclick: toggle('detail'),
+      },
+      h('span', { class: 'lbl' }),
+      icon('chevron-down'),
     );
-    this.el = h(
-      'aside',
-      { class: 'sidebar', 'data-open': 'true' },
-      h(
-        'div',
-        { class: 'sidebar-inner' },
-        this.#handle,
-        head,
-        h('div', { class: 'list-wrap' }, this.#sticky, this.list, this.#results, this.#phases),
-        this.detail.el,
-      ),
+    attr(detail.el, 'id', 'kg-detail');
+    this.#detailWrap = h('div', { class: 'detail-wrap' }, this.#detailBar, detail.el);
+    this.#inner = h(
+      'div',
+      { class: 'sidebar-inner' },
+      this.#handle,
+      h('div', { class: 'sb-head' }, this.#head, this.#searchWrap, this.#filtersWrap),
+      this.#listWrap,
+      this.#split,
+      this.#detailWrap,
     );
+    this.#resize = h('div', {
+      class: 'sb-resize',
+      role: 'separator',
+      'aria-orientation': 'vertical',
+      'aria-valuemin': String(SIDEBAR_MIN),
+      tabindex: '0',
+    });
+    this.el = h('aside', { class: 'sidebar', 'data-open': 'true' }, this.#resize, this.#inner);
+    this.#bindResize();
+    this.#bindSplit();
   }
 
-  setOpen(open: boolean): void {
-    attr(this.el, 'data-open', String(open));
-    this.el.inert = !open;
-  }
-
-  update(topics: ReadonlySet<Topic>): void {
-    const tr = this.#ctx.tr();
-    const all = topics.has('status') || topics.has('data') || topics.has('locale');
-    if (all) {
-      attr(this.el, 'aria-label', tr.t('sidebar.label'));
-      setText(this.#title, tr.t('sidebar.changes'));
-      this.searchInput.placeholder = tr.t('sidebar.searchPlaceholder');
-      attr(this.searchInput, 'aria-label', tr.t('sidebar.search'));
-      attr(this.#searchClear, 'aria-label', tr.t('sidebar.searchClear'));
-      attr(this.#filters, 'aria-label', tr.t('sidebar.filters'));
-      attr(this.#handle, 'aria-label', tr.t('sidebar.sheet'));
-      setText(this.#showAll, tr.t('sidebar.clearFilters'));
-      this.searchInput.disabled = this.#ctx.controller.status !== 'ready';
-      this.#renderChips();
-      if (this.#query) this.#runSearch();
-    }
-    if (all || topics.has('filters')) {
-      this.#renderChipState();
-      this.#layoutList();
-    }
-    if (all || topics.has('review')) {
-      this.#renderProgress();
-      this.#refreshRows();
-    }
-    if (topics.has('selection')) {
-      this.#refreshRows();
-      this.#revealSelected();
-    }
-    this.detail.update(topics);
+  get width(): number {
+    return this.#width;
   }
 
-  /** Move keyboard focus into the list (after choosing a search result). */
-  focusList(): void {
-    this.list.focus({ preventScroll: true });
+  get detailShare(): number | null {
+    return this.#share;
   }
 
-  focusSearch(): void {
-    this.searchInput.focus();
-    this.searchInput.select();
+  /** Follow the panel states of the four regions (the sidebar folds when none is open). */
+  setPanels(states: PanelStates): void {
+    this.#states = states;
+    const shown = SIDEBAR_REGIONS.filter((r) => states[r] !== 'hidden');
+    const open = shown.some((r) => states[r] === 'open');
+    const root = this.#ctx.root;
+    if (!open) moveFocusOut(root, this.el, () => this.#host.focusOutside());
+    const fold = (el: HTMLElement, state: PanelState, to: () => HTMLElement | null): void => {
+      if (state !== 'open') moveFocusOut(root, el, to);
+      el.hidden = state !== 'open';
+      el.inert = state !== 'open';
+    };
+    fold(this.#searchWrap, states.search, () => this.#searchButton);
+    fold(this.#filtersWrap, states.filters, () => this.#filtersButton);
+    this.#searchButton.hidden = states.search !== 'collapsed';
+    this.#filtersButton.hidden = states.filters !== 'collapsed';
+    this.#listHead.hidden = states.list === 'hidden';
+    this.#listToggle.hidden = states.list === 'hidden';
+    attr(this.#listToggle, 'aria-expanded', String(states.list === 'open'));
+    attr(this.#detailWrap, 'data-state', states.detail);
+    this.#detailWrap.hidden = states.detail === 'hidden';
+    if (states.detail !== 'open') moveFocusOut(root, this.#detail.el, () => this.#detailBar);
+    this.#detail.el.inert = states.detail !== 'open';
+    attr(this.#detailBar, 'aria-expanded', String(states.detail === 'open'));
+    this.#placeList(this.#ctx.controller.query.trim() !== '');
+    this.el.hidden = shown.length === 0;
+    attr(this.el, 'data-open', String(open));
+    this.el.inert = !open;
+    this.#relabel();
   }
 
-  /** Esc inside the sidebar: clear the search first. Returns whether it handled the key. */
-  escape(): boolean {
-    if (this.#query) {
-      this.#setQuery('', true);
-      return true;
+  /**
+   * Apply sizes (after a drag, or `instant`: remembered ones, which must not animate in on
+   * load); the width is clamped when the layout is known.
+   */
+  setSizes(width: number, detailShare: number | null, instant = false): void {
+    if (instant) {
+      this.el.classList.add('dragging');
+      frameOrTimeout(() => this.el.classList.remove('dragging'));
     }
-    return false;
-  }
-
-  // ─── Header bits ─────────────────────────────────────────────────────────
-
-  #renderChips(): void {
-    const tr = this.#ctx.tr();
-    const scene = this.#ctx.controller.scene;
-    const counts = scene ? familyCounts(scene) : null;
-    setText(this.#count, tr.num(scene?.hunks.length ?? 0));
-    this.#count.hidden = !scene;
-    this.#filters.hidden = !scene || scene.hunks.length === 0;
-    for (const [f, chip] of this.#chips) {
-      const n = counts ? counts[f as keyof typeof counts] : 0;
-      setText(chip.querySelector('.lbl') as Element, tr.t(`family.${f as keyof typeof counts}`));
-      setText(chip.querySelector('.n') as Element, tr.num(n));
-      chip.hidden = n === 0;
-      attr(chip, 'title', tr.t(`familyHint.${f as keyof typeof counts}`));
+    this.#width = Math.max(SIDEBAR_MIN, Math.min(SIDEBAR_MAX, Math.round(width)));
+    this.#share = detailShare === null ? null : Math.max(0, Math.min(1, detailShare));
+    if (instant) this.#reported = { width: this.#width, share: this.#share };
+    this.el.style.setProperty('--sidebar-w', `${this.#width}px`);
+    if (this.#share === null) {
+      this.el.removeAttribute('data-split');
+      this.el.style.removeProperty('--detail-share');
+    } else {
+      attr(this.el, 'data-split', 'true');
+      this.el.style.setProperty('--detail-share', String(this.#share));
     }
+    this.#syncSeparators();
   }
 
-  #renderChipState(): void {
-    const fams = this.#ctx.controller.families;
-    for (const [f, chip] of this.#chips) {
-      attr(chip, 'aria-pressed', String(fams.has(f as never)));
+  update(topics: ReadonlySet<Topic>): void {
+    if (topics.has('status') || topics.has('data') || topics.has('locale')) this.#relabel();
+    if (topics.has('search') || topics.has('status')) {
+      this.#placeList(this.#ctx.controller.query.trim() !== '');
     }
-    this.#showAll.hidden = fams.size === 0;
-  }
-
-  #renderProgress(): void {
-    const tr = this.#ctx.tr();
-    const state = this.#ctx.controller.reviewState();
-    const done = state.reviewed.length;
-    const total = state.total;
-    this.#progress.hidden = total === 0;
-    const complete = total > 0 && done === total;
-    attr(this.#progress, 'data-complete', String(complete));
-    setText(
-      this.#progressText,
-      complete ? tr.t('review.complete') : tr.t('review.progress', { done, total }),
-    );
-    this.#progressBar.style.transform = `scaleX(${total > 0 ? done / total : 0})`;
-  }
-
-  // ─── Virtual list ────────────────────────────────────────────────────────
-
-  #layoutList(): void {
-    const c = this.#ctx.controller;
-    const tr = this.#ctx.tr();
-    replace(
-      this.#phases,
-      c.list.items.map((it) =>
-        it.kind === 'header'
-          ? h('span', {
-              id: `kg-phase-${it.phase}`,
-              text: `${tr.t(`phase.${it.phase}`)} (${tr.num(it.count)})`,
-            })
-          : null,
-      ),
-    );
-    for (const el of this.#rendered.values()) el.remove();
-    this.#rendered.clear();
-    const items = c.list.items;
-    this.#offsets = new Array(items.length);
-    let y = 0;
-    for (let i = 0; i < items.length; i++) {
-      this.#offsets[i] = y;
-      y += itemHeight(items[i] as ListItem);
+    if (topics.has('filters') || topics.has('status')) {
+      attr(this.#filtersButton, 'data-active', String(this.#ctx.controller.families.size > 0));
     }
-    this.#listInner.style.height = `${y + 8}px`;
-    this.#renderEmpty();
-    this.renderWindow();
   }
 
-  #renderEmpty(): void {
-    const c = this.#ctx.controller;
-    const tr = this.#ctx.tr();
-    const existing = this.#listInner.querySelector('.list-empty, .skeleton');
-    existing?.remove();
-    if (c.status === 'loading' || c.status === 'idle') {
-      const sk = h('div', { class: 'skeleton', 'aria-hidden': 'true' });
-      if (c.status === 'loading') {
-        for (let i = 0; i < 6; i++) {
-          sk.appendChild(
-            h(
-              'div',
-              { class: 'skeleton-row shimmer' },
-              h('span', { class: 'g' }),
-              h('span', { class: 'b' }),
-            ),
-          );
-        }
-      }
-      this.#listInner.appendChild(sk);
-      return;
-    }
-    if (c.status !== 'ready' || c.list.items.length > 0) return;
-    const filtered = c.families.size > 0 && c.hunkCount > 0;
-    this.#listInner.appendChild(
-      h(
-        'div',
-        { class: 'list-empty' },
-        icon(filtered ? 'search' : 'check-circle'),
-        h('span', { text: tr.t(filtered ? 'sidebar.filteredEmpty' : 'sidebar.noChanges') }),
-        filtered
-          ? h('button', {
-              type: 'button',
-              class: 'btn',
-              text: tr.t('sidebar.clearFilters'),
-              onclick: () => c.setFamilies([]),
-            })
-          : null,
-      ),
-    );
+  /**
+   * The list's place shows the rows while the list is open and the search results while a
+   * search is active, whatever the list's state (the results take its place).
+   */
+  #placeList(searching: boolean): void {
+    const state = this.#states?.list ?? 'open';
+    const shown = state === 'open' || searching;
+    if (!shown) moveFocusOut(this.#ctx.root, this.#listWrap, () => this.#listToggle);
+    this.#listWrap.hidden = !shown;
+    this.#listWrap.inert = !shown;
+    const detailOpen = (this.#states?.detail ?? 'open') === 'open';
+    this.#split.hidden = !(shown && detailOpen);
+    attr(this.el, 'data-list', shown ? 'open' : 'folded');
   }
 
-  #queueWindow(): void {
-    if (this.#scrollQueued) return;
-    this.#scrollQueued = true;
-    requestAnimationFrame(() => {
-      this.#scrollQueued = false;
-      this.renderWindow();
-    });
-  }
-
-  /** First item index whose bottom is below `y` (binary search over offsets). */
-  #indexAt(y: number): number {
-    let lo = 0;
-    let hi = this.#offsets.length;
-    while (lo < hi) {
-      const mid = (lo + hi) >> 1;
-      if ((this.#offsets[mid] as number) + ROW_SLOT <= y) lo = mid + 1;
-      else hi = mid;
-    }
-    return lo;
-  }
-
-  renderWindow(): void {
-    const items = this.#ctx.controller.list.items;
-    const top = this.list.scrollTop;
-    const height = this.list.clientHeight || 640;
-    const from = this.#indexAt(Math.max(0, top - OVERSCAN));
-    const limit = top + height + OVERSCAN;
-    const needed = new Set<number>();
-    for (let i = from; i < items.length && (this.#offsets[i] as number) < limit; i++) needed.add(i);
-    for (const [i, el] of this.#rendered) {
-      if (!needed.has(i)) {
-        el.remove();
-        this.#rendered.delete(i);
-      }
-    }
-    for (const i of needed) {
-      if (this.#rendered.has(i)) continue;
-      const el = this.#renderItem(items[i] as ListItem, this.#offsets[i] as number);
-      this.#rendered.set(i, el);
-      this.#listInner.appendChild(el);
-    }
-    this.#renderSticky(top);
-  }
-
-  #renderItem(item: ListItem, y: number): HTMLElement {
+  #relabel(): void {
     const tr = this.#ctx.tr();
-    const c = this.#ctx.controller;
-    if (item.kind === 'header') {
-      return h(
-        'div',
-        { class: 'group', role: 'presentation', style: `top: ${y}px` },
-        h('span', { text: tr.t(`phase.${item.phase}`) }),
-        h('span', { class: 'n', text: tr.num(item.count) }),
-      );
-    }
-    const hunk = c.scene?.hunks[item.hunk] as SceneHunk;
-    const reviewed = c.isReviewed(hunk.id);
-    // Pointer shortcut only: options hold no interactive children. Keyboard users press `x` or
-    // use the detail panel's "Reviewed" button.
-    const rv = h(
-      'span',
-      {
-        class: 'rv',
-        'aria-hidden': 'true',
-        'data-pressed': String(reviewed),
-        title: tr.t(reviewed ? 'review.unmark' : 'review.mark'),
-        'data-hunk': hunk.id,
-      },
-      h('span', { class: 'ring' }, icon('check')),
-    );
-    const rank = c.list.rank.get(item.hunk) ?? 0;
-    const row = h(
-      'div',
-      {
-        class: 'row',
-        role: 'option',
-        id: `kg-opt-${item.hunk}`,
-        'data-index': String(item.hunk),
-        'data-family': hunk.family,
-        'data-reviewed': String(reviewed),
-        'aria-selected': String(c.selectedHunk === item.hunk),
-        'aria-setsize': String(c.list.order.length),
-        'aria-posinset': String(rank + 1),
-        'aria-describedby': `kg-phase-${hunk.phase}`,
-        style: `top: ${y + 2}px`,
-      },
-      h('span', { class: 'glyph-box', 'aria-hidden': 'true', text: sceneHunkGlyph(hunk) }),
-      h(
-        'span',
-        { class: 'txt' },
-        h('span', { class: 'title', title: hunk.title, text: hunk.title }),
-        h('span', { class: 'sub', text: hunk.subtitle }),
-      ),
-      rv,
+    attr(this.el, 'aria-label', tr.t('sidebar.label'));
+    attr(this.#handle, 'aria-label', tr.t('sidebar.sheet'));
+    attr(this.#resize, 'aria-label', tr.t('sidebar.resize'));
+    attr(this.#split, 'aria-label', tr.t('sidebar.split'));
+    const listOpen = this.#states?.list !== 'collapsed';
+    relabel(this.#listToggle, tr.t(listOpen ? 'sidebar.hideList' : 'sidebar.showList'));
+    relabel(this.#searchButton, `${tr.t('sidebar.search')} (/)`);
+    relabel(this.#filtersButton, tr.t('sidebar.filters'));
+    const bar = this.#detailBar.querySelector('.lbl');
+    if (bar) bar.textContent = tr.t('detail.label');
+    attr(
+      this.#detailBar,
+      'title',
+      tr.t(this.#states?.detail === 'collapsed' ? 'detail.show' : 'detail.hide'),
     );
-    this.#labelRow(row, hunk, reviewed);
-    return row;
   }
 
-  #labelRow(row: HTMLElement, hunk: SceneHunk, reviewed: boolean): void {
-    const tr = this.#ctx.tr();
-    const parts = [hunk.title];
-    if (hunk.subtitle) parts.push(hunk.subtitle);
-    if (reviewed) parts.push(tr.t('review.toggle'));
-    attr(row, 'aria-label', parts.join('. '));
+  /** A drag or key press ended: report the sizes, unless they are where they were. */
+  #done(): void {
+    const { width, share } = this.#reported;
+    if (width === this.#width && share === this.#share) return;
+    this.#reported = { width: this.#width, share: this.#share };
+    this.#host.resized(this.#width, this.#share);
   }
 
-  /** Update selection / reviewed state of the rendered rows in place. */
-  #refreshRows(): void {
-    const c = this.#ctx.controller;
-    const tr = this.#ctx.tr();
-    for (const el of this.#rendered.values()) {
-      if (!el.classList.contains('row')) continue;
-      const index = Number(el.dataset.index);
-      const hunk = c.scene?.hunks[index];
-      if (!hunk) continue;
-      const reviewed = c.isReviewed(hunk.id);
-      attr(el, 'aria-selected', String(index === c.selectedHunk));
-      attr(el, 'data-reviewed', String(reviewed));
-      const rv = el.querySelector('.rv') as HTMLElement;
-      attr(rv, 'data-pressed', String(reviewed));
-      attr(rv, 'title', tr.t(reviewed ? 'review.unmark' : 'review.mark'));
-      this.#labelRow(el, hunk, reviewed);
-    }
-    const sel = c.selectedHunk;
-    attr(
-      this.list,
-      'aria-activedescendant',
-      sel >= 0 && c.list.rank.has(sel) ? `kg-opt-${sel}` : null,
-    );
-  }
+  // ─── Width ───────────────────────────────────────────────────────────────
 
-  #revealSelected(): void {
-    const c = this.#ctx.controller;
-    const item = c.list.itemOf.get(c.selectedHunk);
-    if (item === undefined) return;
-    const y = this.#offsets[item] as number;
-    const top = this.list.scrollTop;
-    // Not laid out yet (hidden sheet): position it for when it shows.
-    const height = this.list.clientHeight || 640;
-    // The first row of a group scrolls its group header into view too.
-    const above =
-      c.list.items[item - 1]?.kind === 'header'
-        ? (this.#offsets[item - 1] as number)
-        : y - HEADER_SLOT;
-    if (y < top + HEADER_SLOT) this.list.scrollTop = Math.max(0, above);
-    else if (y + ROW_SLOT > top + height) this.list.scrollTop = y + ROW_SLOT - height + 8;
-    this.renderWindow();
-    this.#refreshRows();
+  /** The widest the sidebar may be next to the canvas, px. */
+  #maxWidth(): number {
+    const total = this.el.parentElement?.clientWidth ?? 0;
+    return total > 0
+      ? Math.max(SIDEBAR_MIN, Math.min(SIDEBAR_MAX, total - STAGE_MIN))
+      : SIDEBAR_MAX;
   }
 
-  #renderSticky(top: number): void {
-    const items = this.#ctx.controller.list.items;
-    let current = -1;
-    let next = -1;
-    for (let i = 0; i < items.length; i++) {
-      if (items[i]?.kind !== 'header') continue;
-      if ((this.#offsets[i] as number) <= top) current = i;
-      else {
-        next = i;
-        break;
-      }
-    }
-    if (current < 0 || top <= 0) {
-      this.#sticky.hidden = true;
-      return;
-    }
-    const item = items[current] as Extract<ListItem, { kind: 'header' }>;
-    const tr = this.#ctx.tr();
-    this.#sticky.hidden = false;
-    const label = `${tr.t(`phase.${item.phase}`)}|${item.count}`;
-    if (this.#sticky.dataset.key !== label) {
-      this.#sticky.dataset.key = label;
-      replace(
-        this.#sticky,
-        h(
-          'div',
-          { class: 'group' },
-          h('span', { text: tr.t(`phase.${item.phase}`) }),
-          h('span', { class: 'n', text: tr.num(item.count) }),
-        ),
-      );
-    }
-    const push = next >= 0 ? Math.min(0, (this.#offsets[next] as number) - top - HEADER_SLOT) : 0;
-    this.#sticky.style.transform = `translateY(${push}px)`;
+  #syncSeparators(): void {
+    const max = this.#maxWidth();
+    attr(this.#resize, 'aria-valuemax', String(max));
+    const now = Math.min(this.#width, max);
+    attr(this.#resize, 'aria-valuenow', String(now));
+    attr(this.#resize, 'aria-valuetext', `${now} px`);
+    const list = Math.round(100 * (1 - (this.#share ?? this.#measuredShare())));
+    attr(this.#split, 'aria-valuenow', String(list));
+    attr(this.#split, 'aria-valuetext', this.#ctx.tr().t('sidebar.splitValue', { p: `${list}%` }));
   }
 
-  #onListClick(e: MouseEvent): void {
-    const c = this.#ctx.controller;
-    const target = e.target as Element;
-    const rv = target.closest('.rv') as HTMLElement | null;
-    if (rv?.dataset.hunk) {
+  #bindResize(): void {
+    let start: { x: number; w: number; id: number } | null = null;
+    const set = (px: number, done: boolean): void => {
+      const width = Math.max(SIDEBAR_MIN, Math.min(this.#maxWidth(), px));
+      this.setSizes(width, this.#share);
+      if (done) this.#done();
+    };
+    this.#resize.addEventListener('pointerdown', (e) => {
+      e.preventDefault();
+      start = { x: e.clientX, w: this.el.getBoundingClientRect().width, id: e.pointerId };
+      this.#resize.setPointerCapture?.(e.pointerId);
+      this.el.classList.add('dragging');
+    });
+    this.#resize.addEventListener('pointermove', (e) => {
+      // The sidebar is on the right: dragging its edge left widens it.
+      if (start && e.pointerId === start.id) set(start.w + (start.x - e.clientX), false);
+    });
+    const end = (e: PointerEvent): void => {
+      if (!start || e.pointerId !== start.id) return;
+      start = null;
+      this.el.classList.remove('dragging');
+      this.#done();
+    };
+    this.#resize.addEventListener('pointerup', end);
+    this.#resize.addEventListener('pointercancel', end);
+    this.#resize.addEventListener('dblclick', () => set(SIDEBAR_WIDTH, true));
+    this.#resize.addEventListener('keydown', (e) => {
+      const step = e.shiftKey ? WIDTH_STEP_LARGE : WIDTH_STEP;
+      // From the width shown (a narrow layout holds the sidebar below the stored width).
+      const shown = Math.min(this.#width, this.#maxWidth());
+      const to: Record<string, number> = {
+        ArrowLeft: shown + step,
+        ArrowRight: shown - step,
+        PageUp: shown + WIDTH_STEP_LARGE,
+        PageDown: shown - WIDTH_STEP_LARGE,
+        Home: SIDEBAR_MIN,
+        End: this.#maxWidth(),
+      };
+      const next = to[e.key];
+      if (next === undefined) return;
+      e.preventDefault();
       e.stopPropagation();
-      c.toggleReviewed(rv.dataset.hunk);
-      return;
-    }
-    const row = target.closest('.row') as HTMLElement | null;
-    if (!row) return;
-    const index = Number(row.dataset.index);
-    if (Number.isInteger(index)) c.selectHunk(index);
+      set(next, true);
+    });
   }
 
-  // ─── Search ──────────────────────────────────────────────────────────────
+  // ─── Split between the list and the detail panel ────────────────────────
 
-  #setQuery(query: string, focus = false): void {
-    this.#query = query;
-    if (this.searchInput.value !== query) this.searchInput.value = query;
-    this.#activeHit = 0;
-    this.#runSearch();
-    if (focus) this.searchInput.focus();
+  /** The detail panel's share of the sidebar's height as laid out now (0 before layout). */
+  #measuredShare(): number {
+    const total = this.#inner.clientHeight;
+    return total > 0 ? this.#detailWrap.getBoundingClientRect().height / total : 0;
   }
 
-  #runSearch(): void {
-    const q = this.#query.trim();
-    this.#hits = q ? this.#ctx.controller.search(q, SEARCH_LIMIT) : [];
-    const searching = q !== '';
-    this.#results.hidden = !searching;
-    this.list.hidden = searching;
-    this.#sticky.hidden = searching || this.#sticky.hidden;
-    attr(this.searchInput, 'aria-expanded', String(searching));
-    this.#updateSearchChrome();
-    if (!searching) {
-      replace(this.#results);
-      this.renderWindow();
-      return;
-    }
-    this.#renderResults();
+  /** Clamp a share so that the list and the detail panel keep their minimum heights. */
+  #clampShare(share: number): number {
+    const total = this.#inner.clientHeight;
+    if (total <= 0) return Math.max(0.1, Math.min(0.9, share));
+    const above = this.#head.parentElement?.getBoundingClientRect().height ?? 0;
+    const max = Math.max(DETAIL_MIN, total - above - LIST_MIN) / total;
+    return Math.max(DETAIL_MIN / total, Math.min(max, share));
   }
 
-  #updateSearchChrome(): void {
-    const focused = this.#ctx.root.activeElement === this.searchInput;
-    this.#searchKbd.hidden = this.#query !== '' || focused;
-    this.#searchClear.hidden = this.#query === '';
-  }
-
-  #renderResults(): void {
-    const tr = this.#ctx.tr();
-    const c = this.#ctx.controller;
-    const q = this.#query.trim();
-    if (this.#hits.length === 0) {
-      replace(
-        this.#results,
-        h(
-          'div',
-          { class: 'list-empty' },
-          icon('search'),
-          h('span', { text: tr.t('sidebar.noResults', { q }) }),
-        ),
-      );
-      attr(this.searchInput, 'aria-activedescendant', null);
-      return;
-    }
-    const scene = c.scene;
-    const rows = this.#hits.map((hit, i) => {
-      const sceneIndex = scene?.nodeIndex.get(hit.node.id);
-      const sn = sceneIndex !== undefined ? scene?.nodes[sceneIndex] : undefined;
-      const family =
-        sn?.family ??
-        (hit.node.status === 'added'
-          ? 'added'
-          : hit.node.status === 'removed'
-            ? 'removed'
-            : hit.node.status === 'modified'
-              ? 'content'
-              : 'neutral');
-      const sub =
-        hit.field === 'label' ? hit.node.id : hit.field === 'alias' ? hit.matched : hit.matched;
-      return h(
-        'button',
-        {
-          type: 'button',
-          class: 'result',
-          role: 'option',
-          id: `kg-hit-${i}`,
-          tabindex: '-1',
-          'data-family': family,
-          'aria-selected': String(i === this.#activeHit),
-          onclick: () => this.#choose(i),
-          onpointermove: () => this.#setActiveHit(i),
-        },
-        h('span', { class: 'sdot', 'aria-hidden': 'true' }),
-        h(
-          'span',
-          { class: 'txt' },
-          h('span', { class: 'title' }, highlight(hit.node.label, hit.field === 'label' ? q : '')),
-          h('span', { class: 'sub' }, highlight(sub, hit.field === 'label' ? '' : q)),
-        ),
-        h('span', { class: 'status', text: tr.t(`status.${hit.node.status}`) }),
-      );
+  #bindSplit(): void {
+    let start: { y: number; share: number; id: number } | null = null;
+    const set = (share: number, done: boolean): void => {
+      this.setSizes(this.#width, this.#clampShare(share));
+      if (done) this.#done();
+    };
+    this.#split.addEventListener('pointerdown', (e) => {
+      e.preventDefault();
+      start = { y: e.clientY, share: this.#share ?? this.#measuredShare(), id: e.pointerId };
+      this.#split.setPointerCapture?.(e.pointerId);
+      this.el.classList.add('dragging');
+    });
+    this.#split.addEventListener('pointermove', (e) => {
+      if (!start || e.pointerId !== start.id) return;
+      const total = this.#inner.clientHeight;
+      if (total > 0) set(start.share + (start.y - e.clientY) / total, false);
+    });
+    const end = (e: PointerEvent): void => {
+      if (!start || e.pointerId !== start.id) return;
+      start = null;
+      this.el.classList.remove('dragging');
+      this.#done();
+    };
+    this.#split.addEventListener('pointerup', end);
+    this.#split.addEventListener('pointercancel', end);
+    // Back to the content's height.
+    this.#split.addEventListener('dblclick', () => {
+      this.setSizes(this.#width, null);
+      this.#done();
+    });
+    this.#split.addEventListener('keydown', (e) => {
+      const current = this.#share ?? this.#measuredShare();
+      // Up moves the split up: the detail panel grows.
+      const to: Record<string, number> = {
+        ArrowUp: current + SPLIT_STEP,
+        ArrowDown: current - SPLIT_STEP,
+        PageUp: current + 2 * SPLIT_STEP,
+        PageDown: current - 2 * SPLIT_STEP,
+        Home: 1,
+        End: 0,
+      };
+      const next = to[e.key];
+      if (next === undefined) return;
+      e.preventDefault();
+      e.stopPropagation();
+      set(next, true);
     });
-    replace(
-      this.#results,
-      h('div', {
-        class: 'results-head',
-        text: tr.plural('sidebar.results', this.#hits.length),
-      }),
-      rows,
-    );
-    attr(this.searchInput, 'aria-activedescendant', `kg-hit-${this.#activeHit}`);
-  }
-
-  #setActiveHit(i: number): void {
-    if (i === this.#activeHit || i < 0 || i >= this.#hits.length) return;
-    this.#activeHit = i;
-    for (const el of this.#results.querySelectorAll('.result')) {
-      attr(el, 'aria-selected', String(el.id === `kg-hit-${i}`));
-    }
-    attr(this.searchInput, 'aria-activedescendant', `kg-hit-${i}`);
-    this.#results.querySelector(`#kg-hit-${i}`)?.scrollIntoView?.({ block: 'nearest' });
-  }
-
-  #choose(i: number): void {
-    const hit = this.#hits[i];
-    if (!hit) return;
-    this.#setQuery('');
-    this.#ctx.controller.revealNode(hit.node.id);
-    this.focusList();
-  }
-
-  #onSearchKey(e: KeyboardEvent): void {
-    switch (e.key) {
-      case 'ArrowDown':
-        e.preventDefault();
-        this.#setActiveHit(Math.min(this.#hits.length - 1, this.#activeHit + 1));
-        break;
-      case 'ArrowUp':
-        e.preventDefault();
-        this.#setActiveHit(Math.max(0, this.#activeHit - 1));
-        break;
-      case 'Enter':
-        e.preventDefault();
-        this.#choose(this.#activeHit);
-        break;
-      case 'Escape':
-        e.preventDefault();
-        e.stopPropagation();
-        if (this.#query) this.#setQuery('');
-        else this.focusList();
-        break;
-      default:
-        return;
-    }
   }
 
   // ─── Bottom sheet ────────────────────────────────────────────────────────
@@ -706,6 +435,12 @@ export class Sidebar {
     if (total > 0) this.#sheetValue(this.el.getBoundingClientRect().height, total);
   }
 
+  /** The layout changed size: keep the width within what fits, refresh the separators. */
+  layout(compact: boolean): void {
+    if (compact) this.syncSheet();
+    else this.#syncSeparators();
+  }
+
   #bindSheet(): void {
     let start: { y: number; h: number; id: number } | null = null;
     const host = (): HTMLElement | null => this.el.parentElement;
@@ -739,15 +474,3 @@ export class Sidebar {
     });
   }
 }
-
-/** The label with the first occurrence of `q` (case-insensitive) marked. */
-function highlight(text: string, q: string): (string | HTMLElement)[] {
-  if (!q) return [text];
-  const at = text.toLowerCase().indexOf(q.toLowerCase());
-  if (at < 0) return [text];
-  return [
-    text.slice(0, at),
-    h('mark', { text: text.slice(at, at + q.length) }),
-    text.slice(at + q.length),
-  ];
-}