pixelweaver 0.1.0

package/src/lib/shortcuts/ShortcutEditorPanel.svelte

@@ -0,0 +1,690 @@
+<script lang="ts">
+  /**
+   * ShortcutEditorPanel -- searchable list of every keyboard shortcut with
+   * click-to-capture rebinding, conflict detection, and reset-to-default.
+   *
+   * Reads live bindings from shortcut-state.svelte.ts and routes mutations
+   * through the helpers in shortcut-init.ts so the ShortcutManager singleton
+   * and the reactive state stay in sync. DEFAULT_BINDINGS is imported
+   * directly so each row can compute its "modified" flag and reset target.
+   *
+   * The capture workflow:
+   *   1. User clicks a row -> capturingName is set and the panel focuses a
+   *      hidden capture input.
+   *   2. handleCaptureKeyDown() builds a shortcut string from the next non-
+   *      modifier keystroke.
+   *   3. rebindShortcut() is called. On conflict, pendingConflict holds the
+   *      info needed to confirm a swap (clear the other action, then retry).
+   *
+   * Visual structure mirrors LayerPanel.svelte: a header with a title and
+   * actions, followed by a scrollable list. All colors come from design
+   * tokens, no inline hardcoded values.
+   */
+
+  import { getBindings } from './shortcut-state.svelte.js';
+  import { DEFAULT_BINDINGS } from './default-bindings.js';
+  import {
+    rebindShortcut,
+    resetShortcutToDefault,
+    clearShortcut,
+    type RebindResult,
+  } from './shortcut-init.js';
+  import { normalizeShortcut } from './shortcut-manager.js';
+  import RotateIcon from '~icons/lucide/rotate-ccw';
+  import SearchIcon from '~icons/lucide/search';
+  import XIcon from '~icons/lucide/x';
+  import KeyboardIcon from '~icons/lucide/keyboard';
+
+  // --- Row view model ---
+
+  interface Row {
+    name: string;
+    key: string;
+    description: string;
+    defaultKey: string;
+    modified: boolean;
+  }
+
+  // --- Local UI state ---
+
+  let filter = $state('');
+  let capturingName = $state<string | null>(null);
+  let captureInputEl = $state<HTMLInputElement | null>(null);
+  // Pending conflict surfaced after a failed rebind attempt. Stores enough
+  // info to execute the swap once the user confirms.
+  let pendingConflict = $state<{
+    requestingName: string;
+    requestedKey: string;
+    conflictName: string;
+    conflictDescription: string;
+  } | null>(null);
+  // Transient feedback banner (e.g. "Reset to default", "Updated").
+  let statusMessage = $state<string | null>(null);
+  let statusTimer: ReturnType<typeof setTimeout> | null = null;
+
+  // --- Derived state ---
+
+  // Build Rows merged from reactive bindings + default table. Iteration order
+  // follows DEFAULT_BINDINGS so categories stay grouped consistently; any
+  // plugin-added bindings not in defaults are appended.
+  let rows = $derived.by<Row[]>(() => {
+    const live = getBindings();
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity -- transient dedup inside a $derived
+    const seen = new Set<string>();
+    const out: Row[] = [];
+
+    for (const def of DEFAULT_BINDINGS) {
+      const info = live.get(def.name);
+      if (!info) continue;
+      seen.add(def.name);
+      out.push({
+        name: def.name,
+        key: info.key,
+        description: info.description,
+        defaultKey: def.key,
+        modified: normalizeShortcut(info.key || '') !== normalizeShortcut(def.key),
+      });
+    }
+
+    // Surface bindings that have no default entry (plugin-added shortcuts)
+    for (const [name, info] of live) {
+      if (seen.has(name)) continue;
+      out.push({
+        name,
+        key: info.key,
+        description: info.description,
+        defaultKey: '',
+        modified: false,
+      });
+    }
+
+    return out;
+  });
+
+  // Case-insensitive filter across command id, description, and keystroke.
+  let visibleRows = $derived.by<Row[]>(() => {
+    const q = filter.trim().toLowerCase();
+    if (!q) return rows;
+    return rows.filter(
+      (r) =>
+        r.name.toLowerCase().includes(q) ||
+        r.description.toLowerCase().includes(q) ||
+        r.key.toLowerCase().includes(q),
+    );
+  });
+
+  // --- Capture flow ---
+
+  function startCapture(name: string) {
+    capturingName = name;
+    pendingConflict = null;
+    // Focus the hidden input so keyboard events route here instead of the
+    // global shortcut manager listener.
+    queueMicrotask(() => captureInputEl?.focus());
+  }
+
+  function cancelCapture() {
+    capturingName = null;
+    pendingConflict = null;
+  }
+
+  /** Build a shortcut string from a KeyboardEvent, matching the ShortcutManager format. */
+  function buildShortcutString(e: KeyboardEvent): string | null {
+    const rawKey = e.key;
+    // Ignore bare modifier presses -- wait for the user to hit an actual key.
+    if (
+      rawKey === 'Control' ||
+      rawKey === 'Shift' ||
+      rawKey === 'Alt' ||
+      rawKey === 'Meta'
+    ) {
+      return null;
+    }
+
+    const parts: string[] = [];
+    if (e.ctrlKey) parts.push('Ctrl');
+    if (e.altKey) parts.push('Alt');
+    if (e.shiftKey) parts.push('Shift');
+    if (e.metaKey) parts.push('Meta');
+
+    // Normalize printable single chars to uppercase for display parity with
+    // DEFAULT_BINDINGS entries like "B", "Ctrl+Z".
+    const keyPart = rawKey.length === 1 ? rawKey.toUpperCase() : rawKey;
+    parts.push(keyPart);
+    return parts.join('+');
+  }
+
+  function handleCaptureKeyDown(e: KeyboardEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (e.key === 'Escape') {
+      cancelCapture();
+      return;
+    }
+    if (!capturingName) return;
+
+    const shortcutString = buildShortcutString(e);
+    if (!shortcutString) return;
+
+    const result: RebindResult = rebindShortcut(capturingName, shortcutString);
+    if (result.ok) {
+      flashStatus(`Bound to ${shortcutString}`);
+      capturingName = null;
+    } else if (result.conflictName) {
+      pendingConflict = {
+        requestingName: capturingName,
+        requestedKey: shortcutString,
+        conflictName: result.conflictName,
+        conflictDescription: result.conflictDescription ?? '',
+      };
+    } else {
+      flashStatus(`Could not bind (${result.reason ?? 'unknown error'})`);
+      capturingName = null;
+    }
+  }
+
+  function confirmSwap() {
+    if (!pendingConflict) return;
+    const { requestingName, requestedKey, conflictName } = pendingConflict;
+    // Clear the other action first so the target key is free, then apply.
+    clearShortcut(conflictName);
+    const result = rebindShortcut(requestingName, requestedKey);
+    if (result.ok) {
+      flashStatus(`Swapped -- ${conflictName} is now unbound`);
+    } else {
+      flashStatus(`Swap failed (${result.reason ?? 'unknown'})`);
+    }
+    pendingConflict = null;
+    capturingName = null;
+  }
+
+  function dismissConflict() {
+    pendingConflict = null;
+    capturingName = null;
+  }
+
+  // --- Reset ---
+
+  function handleReset(row: Row) {
+    if (!row.defaultKey) return;
+    resetShortcutToDefault(row.name);
+    flashStatus(`Reset ${row.name} to ${row.defaultKey}`);
+  }
+
+  // --- Status banner helper ---
+
+  function flashStatus(msg: string) {
+    statusMessage = msg;
+    if (statusTimer) clearTimeout(statusTimer);
+    statusTimer = setTimeout(() => {
+      statusMessage = null;
+      statusTimer = null;
+    }, 2500);
+  }
+
+  // --- Search box ---
+
+  function clearFilter() {
+    filter = '';
+  }
+</script>
+
+<div class="shortcut-panel">
+  <!-- Header -->
+  <div class="shortcut-header">
+    <span class="shortcut-title">Shortcuts</span>
+  </div>
+
+  <!-- Search box -->
+  <div class="search-row">
+    <span class="search-icon" aria-hidden="true"><SearchIcon /></span>
+    <input
+      class="search-input"
+      type="text"
+      placeholder="Filter shortcuts..."
+      aria-label="Filter shortcuts"
+      bind:value={filter}
+    />
+    {#if filter}
+      <button
+        class="clear-btn"
+        aria-label="Clear filter"
+        title="Clear filter"
+        onclick={clearFilter}
+      ><XIcon /></button>
+    {/if}
+  </div>
+
+  <!-- Conflict banner (takes over the top of the list area until resolved) -->
+  {#if pendingConflict}
+    <div class="conflict-banner" role="alert">
+      <div class="conflict-text">
+        <strong>{pendingConflict.requestedKey}</strong> is already bound to
+        <em>{pendingConflict.conflictDescription || pendingConflict.conflictName}</em>.
+      </div>
+      <div class="conflict-actions">
+        <button
+          class="btn btn-primary"
+          aria-label="Swap binding"
+          onclick={confirmSwap}
+        >Swap</button>
+        <button
+          class="btn"
+          aria-label="Cancel rebinding"
+          onclick={dismissConflict}
+        >Cancel</button>
+      </div>
+    </div>
+  {:else if statusMessage}
+    <div class="status-banner" role="status">{statusMessage}</div>
+  {/if}
+
+  <!-- Shortcut table -->
+  <div class="shortcut-list" role="list">
+    {#if visibleRows.length === 0}
+      <div class="empty-state">No shortcuts match "{filter}"</div>
+    {/if}
+
+    {#each visibleRows as row (row.name)}
+      <!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+      {@render shortcutRow(row)}
+    {/each}
+  </div>
+
+  <!-- Hidden input that receives key events while capturing. Positioned off-
+       screen rather than display:none so it can actually receive focus. -->
+  <input
+    bind:this={captureInputEl}
+    class="capture-sink"
+    type="text"
+    aria-hidden="true"
+    tabindex="-1"
+    onkeydown={handleCaptureKeyDown}
+    onblur={() => { if (capturingName && !pendingConflict) capturingName = null; }}
+  />
+</div>
+
+{#snippet shortcutRow(row: Row)}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <div
+    class="shortcut-row"
+    class:shortcut-row--capturing={capturingName === row.name}
+    class:shortcut-row--modified={row.modified}
+    role="listitem"
+    onclick={() => { startCapture(row.name); }}
+  >
+    <!-- Keystroke -->
+    <div class="kbd-cell">
+      {#if capturingName === row.name}
+        <span class="capture-hint">
+          <KeyboardIcon /> Press a key...
+        </span>
+      {:else if row.key}
+        <kbd class="kbd">{row.key}</kbd>
+      {:else}
+        <span class="kbd kbd--empty">Unbound</span>
+      {/if}
+    </div>
+
+    <!-- Command ID + label -->
+    <div class="label-cell">
+      <span class="cmd-desc">{row.description}</span>
+      <span class="cmd-id">{row.name}</span>
+    </div>
+
+    <!-- Source badge -->
+    <span class="source-badge" class:source-badge--custom={row.modified}>
+      {row.modified ? 'Custom' : 'Default'}
+    </span>
+
+    <!-- Reset-to-default -->
+    <button
+      class="reset-btn"
+      aria-label={`Reset ${row.name} to default shortcut`}
+      title="Reset to default"
+      disabled={!row.modified || !row.defaultKey}
+      onclick={(e) => { e.stopPropagation(); handleReset(row); }}
+    ><RotateIcon /></button>
+  </div>
+{/snippet}
+
+<style>
+  .shortcut-panel {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background: var(--bg-panel);
+    color: var(--text-primary);
+    font-size: var(--text-base);
+    user-select: none;
+  }
+
+  .shortcut-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px var(--space-3);
+    border-bottom: 1px solid var(--border);
+    background: var(--bg-toolbar);
+    flex-shrink: 0;
+  }
+
+  .shortcut-title {
+    font-weight: 600;
+    font-size: var(--text-sm);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-secondary);
+  }
+
+  /* --- Search --- */
+
+  .search-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-3);
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+  }
+
+  .search-icon {
+    display: flex;
+    align-items: center;
+    color: var(--text-muted);
+  }
+
+  .search-icon :global(svg) {
+    width: 14px;
+    height: 14px;
+  }
+
+  .search-input {
+    flex: 1;
+    min-width: 0;
+    background: var(--bg-primary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    color: var(--text-primary);
+    padding: 4px var(--space-2);
+    font-size: var(--text-base);
+  }
+
+  .search-input::placeholder {
+    color: var(--text-muted);
+  }
+
+  .search-input:focus {
+    outline: none;
+    border-color: var(--accent);
+  }
+
+  .clear-btn {
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border-radius: var(--radius-sm);
+  }
+
+  .clear-btn:hover {
+    color: var(--text-primary);
+    background: var(--bg-primary);
+  }
+
+  .clear-btn :global(svg) {
+    width: 12px;
+    height: 12px;
+  }
+
+  /* --- Status + conflict banners --- */
+
+  .status-banner {
+    padding: 6px var(--space-3);
+    font-size: var(--text-xs);
+    color: var(--text-secondary);
+    background: var(--bg-primary);
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+  }
+
+  .conflict-banner {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-3);
+    background: var(--bg-primary);
+    border-bottom: 1px solid var(--accent);
+    flex-shrink: 0;
+  }
+
+  .conflict-text {
+    font-size: var(--text-xs);
+    color: var(--text-primary);
+    line-height: 1.4;
+  }
+
+  .conflict-text em {
+    font-style: normal;
+    color: var(--text-secondary);
+  }
+
+  .conflict-actions {
+    display: flex;
+    gap: var(--space-2);
+  }
+
+  .btn {
+    background: none;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    color: var(--text-primary);
+    cursor: pointer;
+    font-size: var(--text-xs);
+    padding: 3px 10px;
+  }
+
+  .btn:hover {
+    background: var(--bg-panel);
+  }
+
+  .btn-primary {
+    background: var(--accent);
+    border-color: var(--accent);
+    color: #ffffff;
+  }
+
+  .btn-primary:hover {
+    background: var(--accent-hover);
+  }
+
+  /* --- List --- */
+
+  .shortcut-list {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  .empty-state {
+    padding: var(--space-4) var(--space-3);
+    text-align: center;
+    color: var(--text-muted);
+    font-size: var(--text-xs);
+    font-style: italic;
+  }
+
+  .shortcut-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: 6px var(--space-3);
+    border-bottom: 1px solid transparent;
+    border-top: 1px solid transparent;
+    cursor: pointer;
+    transition: background var(--transition-fast);
+  }
+
+  .shortcut-row:hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+
+  :global([data-theme="light"]) .shortcut-row:hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+
+  .shortcut-row--capturing {
+    background: var(--accent);
+    color: #ffffff;
+  }
+
+  .shortcut-row--capturing:hover {
+    background: var(--accent-hover);
+  }
+
+  .kbd-cell {
+    min-width: 90px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  .kbd {
+    display: inline-block;
+    padding: 2px 6px;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border);
+    background: var(--bg-secondary);
+    color: var(--text-secondary);
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    white-space: nowrap;
+  }
+
+  .shortcut-row--capturing .kbd {
+    border-color: rgba(255, 255, 255, 0.3);
+    background: rgba(255, 255, 255, 0.15);
+    color: #ffffff;
+  }
+
+  .kbd--empty {
+    font-style: italic;
+    color: var(--text-muted);
+  }
+
+  .capture-hint {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    font-size: var(--text-xs);
+  }
+
+  .capture-hint :global(svg) {
+    width: 12px;
+    height: 12px;
+  }
+
+  .label-cell {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .cmd-desc {
+    font-size: var(--text-base);
+    color: inherit;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .cmd-id {
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+    font-family: var(--font-mono);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .shortcut-row--capturing .cmd-id {
+    color: rgba(255, 255, 255, 0.7);
+  }
+
+  .source-badge {
+    font-size: var(--text-xs);
+    padding: 1px 6px;
+    border-radius: var(--radius-sm);
+    background: var(--bg-secondary);
+    color: var(--text-muted);
+    flex-shrink: 0;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+  }
+
+  .source-badge--custom {
+    background: var(--accent);
+    color: #ffffff;
+  }
+
+  .shortcut-row--capturing .source-badge {
+    background: rgba(255, 255, 255, 0.2);
+    color: #ffffff;
+  }
+
+  .reset-btn {
+    background: none;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    width: 22px;
+    height: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border-radius: var(--radius-sm);
+    flex-shrink: 0;
+  }
+
+  .reset-btn:hover:not(:disabled) {
+    color: var(--accent);
+    background: var(--bg-primary);
+  }
+
+  .shortcut-row--capturing .reset-btn:hover:not(:disabled) {
+    color: #ffffff;
+    background: rgba(255, 255, 255, 0.15);
+  }
+
+  .reset-btn:disabled {
+    opacity: 0.25;
+    cursor: default;
+  }
+
+  .reset-btn :global(svg) {
+    width: 13px;
+    height: 13px;
+  }
+
+  /* Hidden capture input: positioned off-screen but focusable so key events
+     route here instead of bubbling to the global shortcut manager. */
+  .capture-sink {
+    position: absolute;
+    left: -9999px;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+  }
+</style>