feat(library): add type-to-jump artist navigation (WIP)

Implement keyboard-driven artist navigation in library view:
- Type characters to jump to matching artist at word boundary
- 500ms debounce clears search buffer
- Case-insensitive matching
- Respects ignore words setting from Settings > Sorting
- Falls back to default ignore words when input is empty

Known issue: Default ignore words fallback not working correctly
when sortIgnoreWordsList is empty but feature is enabled.

Task: task-255

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: pythoninthegrass

app/frontend/__tests__/ui.store.test.js

@@ -12,6 +12,7 @@
 
 import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
 import { test, fc } from '@fast-check/vitest';
+import { DEFAULT_SORT_IGNORE_WORDS } from '../js/constants.js';
 
 // Mock window.settings
 const mockSettings = {
@@ -80,7 +81,7 @@ function createTestUIStore() {
     themePreset: 'light',
     settingsSection: 'general',
     sortIgnoreWords: true,
-    sortIgnoreWordsList: 'the, le, la, los, a',
+    sortIgnoreWordsList: DEFAULT_SORT_IGNORE_WORDS,
 
     modal: null,
     contextMenu: null,
@@ -613,7 +614,7 @@ describe('UI Store - Sort Ignore Words', () => {
   });
 
   it('should have default sort ignore words list', () => {
-    expect(store.sortIgnoreWordsList).toBe('the, le, la, los, a');
+    expect(store.sortIgnoreWordsList).toBe(DEFAULT_SORT_IGNORE_WORDS);
   });
 });
 

app/frontend/js/components/library-browser.js

@@ -1,4 +1,5 @@
 import { api } from '../api.js';
+import { DEFAULT_SORT_IGNORE_WORDS } from '../constants.js';
 
 // Default column widths in pixels (all columns have explicit widths for grid layout)
 const DEFAULT_COLUMN_WIDTHS = {
@@ -84,6 +85,10 @@ export function createLibraryBrowser(Alpine) {
     columnDragStartX: 0,
     wasColumnDragging: false,
 
+    // Type-to-jump state
+    _typeBuffer: '',           // Accumulated typed characters
+    _typeDebounceTimer: null,  // Timeout ID for clearing buffer
+
     containerWidth: 0,
     resizeObserver: null,
 
@@ -413,6 +418,9 @@ export function createLibraryBrowser(Alpine) {
         }
       });
 
+      // Type-to-jump: listen for printable characters to jump to matching artist
+      document.addEventListener('keydown', (e) => this.handleTypeToJump(e));
+
       document.addEventListener('mouseup', () => {
         if (this.resizingColumn) {
           this.finishColumnResize();
@@ -1564,6 +1572,104 @@ export function createLibraryBrowser(Alpine) {
       );
     },
 
+    /**
+     * Handle type-to-jump navigation - jump to artist matching typed characters
+     * @param {KeyboardEvent} event
+     */
+    handleTypeToJump(event) {
+      // Only in library view
+      if (this.$store.ui.view !== 'library') return;
+
+      // Ignore if typing in input field
+      if (this.isTypingInInput(event)) return;
+
+      // Ignore modifier-only keys and non-printable characters
+      if (event.metaKey || event.ctrlKey || event.altKey) return;
+      if (event.key.length !== 1) return; // Only single printable chars
+
+      // Append to buffer
+      this._typeBuffer += event.key;
+
+      // Find and scroll to matching artist
+      this.jumpToMatchingArtist(this._typeBuffer);
+
+      // Reset debounce timer
+      this.resetTypeDebounce();
+    },
+
+    /**
+     * Strip leading ignore word prefix from a string (respects sortIgnoreWords setting)
+     * @param {string} value - String to process (lowercase)
+     * @returns {string} String with prefix removed if ignore words enabled
+     */
+    stripIgnoredPrefix(value) {
+      const uiStore = this.$store.ui;
+      if (!uiStore.sortIgnoreWords) {
+        return value;
+      }
+
+      // Fall back to default list when user clears the input
+      const wordsList = uiStore.sortIgnoreWordsList?.trim() || DEFAULT_SORT_IGNORE_WORDS;
+
+      const ignoreWords = wordsList
+        .split(',')
+        .map((w) => w.trim().toLowerCase())
+        .filter(Boolean);
+
+      for (const word of ignoreWords) {
+        const prefix = word + ' ';
+        if (value.startsWith(prefix)) {
+          return value.slice(prefix.length);
+        }
+      }
+      return value;
+    },
+
+    /**
+     * Find and scroll to first track with artist matching the query at a word boundary
+     * @param {string} query - The search query (typed characters)
+     */
+    jumpToMatchingArtist(query) {
+      const normalizedQuery = query.toLowerCase();
+
+      // Find first track with artist matching at word boundary
+      const matchingTrack = this.library.filteredTracks.find((track) => {
+        if (!track.artist) return false;
+        const artist = track.artist.toLowerCase();
+
+        // Check if query matches at start of artist name (with ignore words stripped)
+        const strippedArtist = this.stripIgnoredPrefix(artist);
+        if (strippedArtist.startsWith(normalizedQuery)) return true;
+
+        // Also check full artist name (for cases where user types "the")
+        if (artist.startsWith(normalizedQuery)) return true;
+
+        // Check if query matches at start of any word in artist name
+        const words = artist.split(/\s+/);
+        return words.some((word) => word.startsWith(normalizedQuery));
+      });
+
+      if (matchingTrack) {
+        // Select and scroll to the track
+        this.selectedTracks.clear();
+        this.selectedTracks.add(matchingTrack.id);
+        this.scrollToTrack(matchingTrack.id);
+      }
+    },
+
+    /**
+     * Reset the type-to-jump debounce timer
+     */
+    resetTypeDebounce() {
+      if (this._typeDebounceTimer) {
+        clearTimeout(this._typeDebounceTimer);
+      }
+      this._typeDebounceTimer = setTimeout(() => {
+        this._typeBuffer = '';
+        this._typeDebounceTimer = null;
+      }, 500); // 500ms matches existing debounce patterns in codebase
+    },
+
     /**
      * Handle keyboard shortcuts
      * @param {KeyboardEvent} event

app/frontend/js/constants.js

@@ -0,0 +1,6 @@
+/**
+ * Shared constants for the application
+ */
+
+/** Default list of words to ignore when sorting (articles in various languages) */
+export const DEFAULT_SORT_IGNORE_WORDS = 'the, a, an, la, le, les, los, las, el, die, der, das, il, lo, gli';

app/frontend/js/stores/ui.js

@@ -1,4 +1,8 @@
 import { api } from '../api.js';
+import { DEFAULT_SORT_IGNORE_WORDS } from '../constants.js';
+
+// Re-export for consumers that import from ui.js
+export { DEFAULT_SORT_IGNORE_WORDS };
 
 export function createUIStore(Alpine) {
   Alpine.store('ui', {
@@ -13,7 +17,7 @@ export function createUIStore(Alpine) {
     themePreset: 'light',
     settingsSection: 'general',
     sortIgnoreWords: true,
-    sortIgnoreWordsList: 'the, le, la, los, a',
+    sortIgnoreWordsList: DEFAULT_SORT_IGNORE_WORDS,
 
     modal: null,
     contextMenu: null,
@@ -54,7 +58,7 @@ export function createUIStore(Alpine) {
       this.sortIgnoreWords = window.settings.get('ui:sortIgnoreWords', true);
       this.sortIgnoreWordsList = window.settings.get(
         'ui:sortIgnoreWordsList',
-        'the, le, la, los, a',
+        DEFAULT_SORT_IGNORE_WORDS,
       );
 
       console.log('[ui] Loaded settings from backend');