ompchamber 2.0.2 → 3.1.0

package/src/client/components/workspace/editor/FindWidget.test.ts

@@ -0,0 +1,261 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The find bar's rendering.
+ *
+ * The arithmetic lives in `shared/lib/code/editor/find-status` and the state in
+ * `use-editor-find`; what this covers is the bar itself — that every toggle
+ * carries its own `aria-pressed`, that the chord in a tooltip comes from the
+ * keymap rather than a hand-written string, and that Enter and the buttons reach
+ * the hook rather than doing nothing.
+ *
+ * Rendered directly with `h()` (no JSX) against happy-dom; the component modules
+ * are imported dynamically, after those globals exist.
+ */
+
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import type { ComponentChildren, h as PreactH, render as PreactRender } from 'preact';
+import type { act as PreactAct } from 'preact/test-utils';
+import type { EditorFindState } from '@/client/hooks/editor/use-editor-find';
+
+let FindWidget: (props: { find: EditorFindState }) => ComponentChildren;
+let h: typeof PreactH;
+let render: typeof PreactRender;
+let act: typeof PreactAct;
+
+let container: HTMLElement;
+/** Calls the widget made into the hook, so the wiring is observable. */
+const calls: string[] = [];
+
+/** A find state whose every action records itself, so a click is provable. */
+function findState(overrides: Partial<EditorFindState> = {}): EditorFindState {
+  return {
+    open: true,
+    replaceOpen: false,
+    query: '',
+    replacement: '',
+    options: { matchCase: false, wholeWord: false, isRegex: false },
+    matches: [],
+    truncated: false,
+    invalid: false,
+    currentIndex: -1,
+    setQuery: (value) => calls.push(`setQuery:${value}`),
+    setReplacement: (value) => calls.push(`setReplacement:${value}`),
+    openFind: () => calls.push('openFind'),
+    openReplace: () => calls.push('openReplace'),
+    toggleReplace: () => calls.push('toggleReplace'),
+    focusRequest: 0,
+    close: () => calls.push('close'),
+    runCommand: (command) => calls.push(`runCommand:${command}`),
+    toggleOption: (key) => calls.push(`toggleOption:${key}`),
+    step: (direction) => calls.push(`step:${direction}`),
+    replaceCurrent: () => calls.push('replaceCurrent'),
+    replaceAll: () => calls.push('replaceAll'),
+    ...overrides,
+  };
+}
+
+async function mount(find: EditorFindState) {
+  await act(async () => {
+    render(h(FindWidget, { find }), container);
+  });
+}
+
+function byLabel(label: string): HTMLElement | null {
+  return container.querySelector(`[aria-label="${label}"]`);
+}
+
+/** The BUTTON with this label — `Replace` also names the text field. */
+function buttonByLabel(label: string): HTMLButtonElement | null {
+  return container.querySelector(`button[aria-label="${label}"]`);
+}
+
+/** The element whose label starts with `prefix` — the toggles carry a chord suffix. */
+function byLabelPrefix(prefix: string): HTMLElement | null {
+  return container.querySelector(`[aria-label^="${prefix}"]`);
+}
+
+async function click(element: HTMLElement | null) {
+  await act(async () => {
+    element?.dispatchEvent(new globalThis.MouseEvent('click', { bubbles: true }));
+  });
+}
+
+/** Type into a field the way the browser reports it. */
+async function type(input: HTMLElement | null, value: string) {
+  if (!input) return;
+  (input as HTMLInputElement).value = value;
+  await act(async () => {
+    input.dispatchEvent(new globalThis.Event('input', { bubbles: true }));
+  });
+}
+
+async function press(input: HTMLElement | null, key: string, shiftKey = false) {
+  await act(async () => {
+    input?.dispatchEvent(new globalThis.KeyboardEvent('keydown', { key, shiftKey, bubbles: true }));
+  });
+}
+
+function domGlobals(win: Window): Record<string, unknown> {
+  return {
+    window: win,
+    document: win.document,
+    navigator: win.navigator,
+    Node: win.Node,
+    Element: win.Element,
+    HTMLElement: win.HTMLElement,
+    HTMLInputElement: win.HTMLInputElement,
+    Event: win.Event,
+    MouseEvent: win.MouseEvent,
+    KeyboardEvent: win.KeyboardEvent,
+  };
+}
+
+const installed: Record<string, unknown> = {};
+const displaced: Record<string, unknown> = {};
+
+beforeAll(async () => {
+  const win = new Window({ url: 'http://localhost' });
+  for (const [key, value] of Object.entries(domGlobals(win))) {
+    displaced[key] = (globalThis as Record<string, unknown>)[key];
+    installed[key] = value;
+    (globalThis as Record<string, unknown>)[key] = value;
+  }
+  ({ FindWidget } = await import('@/client/components/workspace/editor/FindWidget'));
+  ({ h, render } = await import('preact'));
+  ({ act } = await import('preact/test-utils'));
+});
+
+afterAll(() => {
+  for (const key of Object.keys(installed)) {
+    if (displaced[key] === undefined) delete (globalThis as Record<string, unknown>)[key];
+    else (globalThis as Record<string, unknown>)[key] = displaced[key];
+  }
+});
+
+beforeEach(() => {
+  calls.length = 0;
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  render(null, container);
+  container.remove();
+});
+
+describe('FindWidget', () => {
+  test('focuses the query field on mount, so ⌘F needs no second click', async () => {
+    await mount(findState());
+
+    expect(document.activeElement).toBe(byLabel('Find'));
+  });
+
+  test('typing in the query reaches the hook', async () => {
+    await mount(findState());
+    await type(byLabel('Find'), 'alpha');
+
+    expect(calls).toEqual(['setQuery:alpha']);
+  });
+
+  test('the replace row is hidden until it is asked for', async () => {
+    await mount(findState());
+
+    expect(byLabel('Replace')).toBeNull();
+    expect(byLabelPrefix('Show replace')).not.toBeNull();
+  });
+
+  test('with the replace row open, typing the replacement reaches the hook', async () => {
+    await mount(findState({ replaceOpen: true }));
+    await type(byLabel('Replace'), 'OMEGA');
+
+    expect(calls).toEqual(['setReplacement:OMEGA']);
+  });
+
+  test('each toggle reports its own state and its own shortcut', async () => {
+    await mount(findState({ options: { matchCase: true, wholeWord: false, isRegex: true } }));
+
+    const matchCase = byLabelPrefix('Match case');
+    const wholeWord = byLabelPrefix('Match whole word');
+    const regex = byLabelPrefix('Use regular expression');
+
+    expect(matchCase?.getAttribute('aria-pressed')).toBe('true');
+    expect(wholeWord?.getAttribute('aria-pressed')).toBe('false');
+    expect(regex?.getAttribute('aria-pressed')).toBe('true');
+    // The chord is derived from the keymap, so a tooltip cannot name a key that
+    // is not bound.
+    expect(matchCase?.getAttribute('aria-label')).toMatch(/[⌘⌥⇧]|Alt\+/);
+  });
+
+  test('clicking a toggle names the option it flips', async () => {
+    await mount(findState());
+    await click(byLabelPrefix('Match whole word'));
+
+    expect(calls).toEqual(['toggleOption:wholeWord']);
+  });
+
+  test('Enter steps forward and ⇧Enter steps back, keeping focus in the field', async () => {
+    await mount(findState({ matches: [{ start: 0, end: 5 }], currentIndex: 0 }));
+
+    await press(byLabel('Find'), 'Enter');
+    await press(byLabel('Find'), 'Enter', true);
+
+    expect(calls).toEqual(['step:1', 'step:-1']);
+  });
+
+  test('a chorded Enter is left to the panel, which owns ⌘⏎', async () => {
+    await mount(findState({ matches: [{ start: 0, end: 5 }], currentIndex: 0 }));
+    const input = byLabel('Find');
+    await act(async () => {
+      input?.dispatchEvent(new globalThis.KeyboardEvent('keydown', { key: 'Enter', metaKey: true, bubbles: true }));
+    });
+
+    expect(calls).toEqual([]);
+  });
+
+  test('the stepper buttons are disabled with nothing to step to', async () => {
+    await mount(findState());
+
+    expect(buttonByLabel('Next match')?.disabled).toBe(true);
+    expect(buttonByLabel('Previous match')?.disabled).toBe(true);
+  });
+
+  test('the replace buttons are disabled with nothing to replace', async () => {
+    await mount(findState({ replaceOpen: true }));
+
+    expect(buttonByLabel('Replace')?.disabled).toBe(true);
+    expect(buttonByLabel('Replace all')?.disabled).toBe(true);
+  });
+
+  test('the count is announced and reads as the widget’s own status', async () => {
+    await mount(findState({ query: 'alpha', matches: [{ start: 0, end: 5 }, { start: 9, end: 14 }], currentIndex: 1 }));
+
+    const status = container.querySelector('[aria-live="polite"]');
+    expect(status?.textContent).toBe('2 of 2');
+  });
+
+  test('an invalid pattern is marked on the field, not only in the status', async () => {
+    // The user has to see WHICH field is wrong, not just that something is.
+    await mount(findState({ query: 'a(', invalid: true }));
+
+    expect(byLabel('Find')?.className).toContain('border-error');
+  });
+
+  test('the close button asks the hook to close', async () => {
+    await mount(findState());
+    await click(buttonByLabel('Close find'));
+
+    expect(calls).toEqual(['close']);
+  });
+
+  test('the expander toggles the replace row', async () => {
+    await mount(findState());
+    await click(byLabelPrefix('Show replace'));
+
+    expect(calls).toEqual(['toggleReplace']);
+  });
+});

package/src/client/components/workspace/editor/FindWidget.tsx

@@ -0,0 +1,219 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useEffect, useRef } from 'preact/hooks';
+import type { ComponentChildren, TargetedKeyboardEvent } from 'preact';
+import {
+  ArrowDown,
+  ArrowUp,
+  CaseSensitive,
+  ChevronDown,
+  ChevronUp,
+  Regex,
+  Replace,
+  ReplaceAll,
+  WholeWord,
+  X,
+} from 'lucide-preact';
+
+import { EDITOR_KEY_BINDINGS, type EditorCommand } from '@/shared/lib/code/editor/keymap';
+import { describeBinding } from '@/shared/lib/ui/key-binding';
+import { isMacPlatform } from '@/shared/lib/util/platform';
+import type { EditorFindState } from '@/client/hooks/editor/use-editor-find';
+import type { FindOptions } from '@/shared/lib/code/editor/find';
+
+const BUTTON_CLASS =
+  'flex items-center justify-center p-1 rounded transition-colors cursor-pointer disabled:cursor-default disabled:opacity-40';
+
+interface FindWidgetProps {
+  find: EditorFindState;
+}
+
+/** One of the three toggle buttons: `aria-pressed` is the state, the title the shortcut. */
+function ToggleButton({
+  active,
+  title,
+  onToggle,
+  children,
+}: {
+  active: boolean;
+  title: string;
+  onToggle: () => void;
+  children: ComponentChildren;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      className={`${BUTTON_CLASS} ${active ? 'bg-ink/10 text-ink' : 'text-ink/50 hover:text-ink hover:bg-ink/5'}`}
+      title={title}
+      aria-label={title}
+      aria-pressed={active}
+    >
+      {children}
+    </button>
+  );
+}
+
+/**
+ * The find/replace bar, pinned to the editor's top-right corner the way VS
+ * Code pins it.
+ *
+ * Two rows, not one: the query and its toggles, then the replacement and the
+ * two write actions. A single row would have to hide either the toggles or the
+ * replace buttons, and both are things this bar exists to expose.
+ *
+ * The counts are the honest ones — `N of M`, `M+` past the match cap, and a
+ * distinct message for a query that does not compile, because "no results" and
+ * "your regex is broken" are different answers and the user has to be able to
+ * tell them apart.
+ */
+export function FindWidget({ find }: FindWidgetProps) {
+  const queryRef = useRef<HTMLInputElement | null>(null);
+  const isMac = isMacPlatform();
+
+  useEffect(() => {
+    queryRef.current?.focus();
+    queryRef.current?.select();
+  }, [find.focusRequest]);
+
+  const total = find.matches.length;
+  const status = find.invalid
+    ? 'Invalid pattern'
+    : total === 0
+      ? find.query
+        ? 'No results'
+        : ''
+      : `${find.currentIndex + 1} of ${total}${find.truncated ? '+' : ''}`;
+
+  const handleKeyDown = (e: TargetedKeyboardEvent<HTMLInputElement>) => {
+    // Escape is NOT handled here: the editor panel owns it on the capture
+    // phase (it has to work while focus is in the document too), and a second
+    // handler here would be unreachable behind that one.
+    // Enter / ⇧Enter step the matches while the focus stays in the field.
+    if (e.key === 'Enter' && !e.metaKey && !e.ctrlKey && !e.altKey) {
+      e.preventDefault();
+      find.step(e.shiftKey ? -1 : 1);
+    }
+  };
+
+  /** Tooltip text for a command: its palette label plus the chord it actually listens for. */
+  const withChord = (command: EditorCommand, label: string) => {
+    const binding = EDITOR_KEY_BINDINGS.find((entry) => entry.command === command);
+    return binding ? `${label} (${describeBinding(binding, isMac)})` : label;
+  };
+
+  const optionButton = (key: keyof FindOptions, label: string, command: EditorCommand, icon: ComponentChildren) => (
+    <ToggleButton active={find.options[key]} title={withChord(command, label)} onToggle={() => find.toggleOption(key)}>
+      {icon}
+    </ToggleButton>
+  );
+
+  return (
+    <div className="absolute top-2 right-4 z-30 flex flex-col gap-1 bg-paper border border-ink/15 rounded-md shadow-lg p-1.5 text-xs text-ink font-sans w-[330px]">
+      <div className="flex items-center gap-1">
+        <button
+          type="button"
+          onClick={find.toggleReplace}
+          className={`${BUTTON_CLASS} ${find.replaceOpen ? 'text-ink' : 'text-ink/50 hover:text-ink hover:bg-ink/5'}`}
+          title={find.replaceOpen ? 'Hide replace' : 'Show replace'}
+          aria-label={find.replaceOpen ? 'Hide replace' : 'Show replace'}
+          aria-pressed={find.replaceOpen}
+        >
+          {find.replaceOpen ? <ChevronUp size={13} /> : <ChevronDown size={13} />}
+        </button>
+
+        <input
+          ref={queryRef}
+          type="text"
+          value={find.query}
+          onInput={(e) => find.setQuery(e.currentTarget.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Find"
+          aria-label="Find"
+          className={`flex-1 min-w-0 bg-canvas border rounded px-2 py-1 font-mono text-xs focus:outline-none ${
+            find.invalid ? 'border-error text-error' : 'border-ink/20 focus:border-ink text-ink'
+          }`}
+        />
+
+        {optionButton('matchCase', 'Match case', 'toggleCaseSensitive', <CaseSensitive size={13} />)}
+        {optionButton('wholeWord', 'Match whole word', 'toggleWholeWord', <WholeWord size={13} />)}
+        {optionButton('isRegex', 'Use regular expression', 'toggleRegex', <Regex size={13} />)}
+
+        <span
+          className={`font-mono text-[10px] whitespace-nowrap min-w-[52px] text-right ${find.invalid ? 'text-error' : 'text-ink/50'}`}
+          aria-live="polite"
+        >
+          {status}
+        </span>
+
+        <button
+          type="button"
+          onClick={() => find.step(-1)}
+          disabled={total === 0}
+          className={`${BUTTON_CLASS} text-ink/50 hover:text-ink hover:bg-ink/5`}
+          title={withChord('previousMatch', 'Previous match')}
+          aria-label="Previous match"
+        >
+          <ArrowUp size={13} />
+        </button>
+        <button
+          type="button"
+          onClick={() => find.step(1)}
+          disabled={total === 0}
+          className={`${BUTTON_CLASS} text-ink/50 hover:text-ink hover:bg-ink/5`}
+          title={withChord('nextMatch', 'Next match')}
+          aria-label="Next match"
+        >
+          <ArrowDown size={13} />
+        </button>
+        <button
+          type="button"
+          onClick={find.close}
+          className={`${BUTTON_CLASS} text-ink/50 hover:text-ink hover:bg-ink/5`}
+          title="Close find (Escape)"
+          aria-label="Close find"
+        >
+          <X size={13} />
+        </button>
+      </div>
+
+      {find.replaceOpen && (
+        <div className="flex items-center gap-1">
+          <span className="w-[22px]" aria-hidden="true" />
+          <input
+            type="text"
+            value={find.replacement}
+            onInput={(e) => find.setReplacement(e.currentTarget.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Replace"
+            aria-label="Replace"
+            className="flex-1 min-w-0 bg-canvas border border-ink/20 rounded px-2 py-1 font-mono text-xs text-ink focus:outline-none focus:border-ink"
+          />
+          <button
+            type="button"
+            onClick={find.replaceCurrent}
+            disabled={total === 0}
+            className={`${BUTTON_CLASS} text-ink/50 hover:text-ink hover:bg-ink/5`}
+            title={withChord('replaceOne', 'Replace')}
+            aria-label="Replace"
+          >
+            <Replace size={13} />
+          </button>
+          <button
+            type="button"
+            onClick={find.replaceAll}
+            disabled={total === 0}
+            className={`${BUTTON_CLASS} text-ink/50 hover:text-ink hover:bg-ink/5`}
+            title={withChord('replaceAll', 'Replace all')}
+            aria-label="Replace all"
+          >
+            <ReplaceAll size={13} />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/client/components/workspace/editor/Tabs.tsx

@@ -74,7 +74,7 @@ export function EditorTabs({ openedFiles, activeFileId, onSelectFile, onCloseFil
               title={file.path}
             >
               {isDiff ? (
-                <GitCompare size={14} className={isActive ? 'text-blue-600 dark:text-blue-400 flex-shrink-0' : 'opacity-60 flex-shrink-0'} />
+                <GitCompare size={14} className={isActive ? 'text-info flex-shrink-0' : 'text-info/70 flex-shrink-0'} />
               ) : (
                 <FileIcon name={file.name} size={14} className={isActive ? 'flex-shrink-0' : 'opacity-60 flex-shrink-0'} />
               )}
@@ -123,7 +123,7 @@ export function EditorTabs({ openedFiles, activeFileId, onSelectFile, onCloseFil
                   className="flex items-center space-x-2 px-3 py-1.5 hover:bg-ink/5 cursor-pointer group"
                 >
                   {file.isDiff ? (
-                    <GitCompare size={14} className="text-blue-600 opacity-70" />
+                    <GitCompare size={14} className="text-info/80" />
                   ) : (
                     <FileIcon name={file.name} size={14} className="opacity-60" />
                   )}