perf(frontend): batch Alpine.js reactive updates in library store mutations

Wrap sequential reactive property assignments in Alpine.disableEffectScheduling()
so computed getters (visibleTracks, totalContentHeight, startIndex, endIndex, offsetY)
re-evaluate once per operation instead of 5-6 times.

Batched functions: applySectionData, loadLibraryData, backgroundRefreshLibrary,
removeTracksLocallyOp. Inlined applyFilters() into batch blocks. Removed unused
tracksByArtist/tracksByAlbum getters and their tests.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: pythoninthegrass

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

@@ -5,8 +5,8 @@
  * Tauri backend or API mocking.
  */
 
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { test, fc } from '@fast-check/vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { fc, test } from '@fast-check/vitest';
 
 // -----------------------------------------------------------------------------
 // Test Helpers: Create isolated library store instances for testing
@@ -59,38 +59,6 @@ function createTestLibraryStore(initialTracks = []) {
       return Array.from(albumSet).sort();
     },
 
-    /**
-     * Get tracks grouped by artist
-     * Uses Object.create(null) to avoid prototype pollution with artist names like "toString"
-     */
-    get tracksByArtist() {
-      const grouped = Object.create(null);
-      for (const track of this.filteredTracks) {
-        const artist = track.artist || 'Unknown Artist';
-        if (!grouped[artist]) {
-          grouped[artist] = [];
-        }
-        grouped[artist].push(track);
-      }
-      return grouped;
-    },
-
-    /**
-     * Get tracks grouped by album
-     * Uses Object.create(null) to avoid prototype pollution with album names like "valueOf"
-     */
-    get tracksByAlbum() {
-      const grouped = Object.create(null);
-      for (const track of this.filteredTracks) {
-        const album = track.album || 'Unknown Album';
-        if (!grouped[album]) {
-          grouped[album] = [];
-        }
-        grouped[album].push(track);
-      }
-      return grouped;
-    },
-
     /**
      * Get track by ID
      * @param {string} trackId - Track ID
@@ -120,7 +88,6 @@ const trackArb = fc.record({
 /** Generate an array of tracks */
 const tracksArb = fc.array(trackArb, { minLength: 0, maxLength: 30 });
 
-
 // -----------------------------------------------------------------------------
 // Tests: formattedTotalDuration Getter
 // -----------------------------------------------------------------------------
@@ -165,7 +132,7 @@ describe('Library Store - formattedTotalDuration', () => {
 
       // Should match either "Xh Ym" or "X min"
       expect(result).toMatch(/^(\d+h \d+m|\d+ min)$/);
-    }
+    },
   );
 
   test.prop([fc.integer({ min: 0, max: 59 * 60 * 1000 })])(
@@ -176,7 +143,7 @@ describe('Library Store - formattedTotalDuration', () => {
       const result = store.formattedTotalDuration;
 
       expect(result).toMatch(/^\d+ min$/);
-    }
+    },
   );
 
   test.prop([fc.integer({ min: 60 * 60 * 1000, max: 100 * 60 * 60 * 1000 })])(
@@ -187,7 +154,7 @@ describe('Library Store - formattedTotalDuration', () => {
       const result = store.formattedTotalDuration;
 
       expect(result).toMatch(/^\d+h \d+m$/);
-    }
+    },
   );
 });
 
@@ -282,101 +249,6 @@ describe('Library Store - albums getter', () => {
   });
 });
 
-// -----------------------------------------------------------------------------
-// Tests: tracksByArtist and tracksByAlbum Getters
-// -----------------------------------------------------------------------------
-
-describe('Library Store - tracksByArtist getter', () => {
-  it('returns empty object for empty library', () => {
-    const store = createTestLibraryStore([]);
-    expect(store.tracksByArtist).toEqual({});
-  });
-
-  it('groups tracks by artist', () => {
-    const tracks = [
-      { id: '1', artist: 'Artist A', title: 'Song 1' },
-      { id: '2', artist: 'Artist B', title: 'Song 2' },
-      { id: '3', artist: 'Artist A', title: 'Song 3' },
-    ];
-    const store = createTestLibraryStore(tracks);
-    const grouped = store.tracksByArtist;
-
-    expect(Object.keys(grouped)).toEqual(['Artist A', 'Artist B']);
-    expect(grouped['Artist A'].length).toBe(2);
-    expect(grouped['Artist B'].length).toBe(1);
-  });
-
-  it('uses "Unknown Artist" for tracks without artist', () => {
-    const tracks = [
-      { id: '1', artist: null, title: 'Song 1' },
-      { id: '2', artist: '', title: 'Song 2' },
-      { id: '3', artist: undefined, title: 'Song 3' },
-    ];
-    const store = createTestLibraryStore(tracks);
-    const grouped = store.tracksByArtist;
-
-    expect(Object.keys(grouped)).toEqual(['Unknown Artist']);
-    expect(grouped['Unknown Artist'].length).toBe(3);
-  });
-
-  test.prop([tracksArb])('total tracks equals sum of grouped tracks', (tracks) => {
-    const store = createTestLibraryStore(tracks);
-    const grouped = store.tracksByArtist;
-    const totalGrouped = Object.values(grouped).reduce((sum, arr) => sum + arr.length, 0);
-    expect(totalGrouped).toBe(tracks.length);
-  });
-
-  test.prop([tracksArb])('each track appears exactly once', (tracks) => {
-    const store = createTestLibraryStore(tracks);
-    const grouped = store.tracksByArtist;
-    const allGroupedIds = Object.values(grouped)
-      .flat()
-      .map((t) => t.id);
-    const uniqueIds = new Set(allGroupedIds);
-    expect(uniqueIds.size).toBe(tracks.length);
-  });
-});
-
-describe('Library Store - tracksByAlbum getter', () => {
-  it('returns empty object for empty library', () => {
-    const store = createTestLibraryStore([]);
-    expect(store.tracksByAlbum).toEqual({});
-  });
-
-  it('groups tracks by album', () => {
-    const tracks = [
-      { id: '1', album: 'Album A', title: 'Song 1' },
-      { id: '2', album: 'Album B', title: 'Song 2' },
-      { id: '3', album: 'Album A', title: 'Song 3' },
-    ];
-    const store = createTestLibraryStore(tracks);
-    const grouped = store.tracksByAlbum;
-
-    expect(Object.keys(grouped)).toEqual(['Album A', 'Album B']);
-    expect(grouped['Album A'].length).toBe(2);
-    expect(grouped['Album B'].length).toBe(1);
-  });
-
-  it('uses "Unknown Album" for tracks without album', () => {
-    const tracks = [
-      { id: '1', album: null, title: 'Song 1' },
-      { id: '2', album: '', title: 'Song 2' },
-    ];
-    const store = createTestLibraryStore(tracks);
-    const grouped = store.tracksByAlbum;
-
-    expect(Object.keys(grouped)).toEqual(['Unknown Album']);
-    expect(grouped['Unknown Album'].length).toBe(2);
-  });
-
-  test.prop([tracksArb])('total tracks equals sum of grouped tracks', (tracks) => {
-    const store = createTestLibraryStore(tracks);
-    const grouped = store.tracksByAlbum;
-    const totalGrouped = Object.values(grouped).reduce((sum, arr) => sum + arr.length, 0);
-    expect(totalGrouped).toBe(tracks.length);
-  });
-});
-
 // -----------------------------------------------------------------------------
 // Tests: getTrack Method
 // -----------------------------------------------------------------------------
@@ -414,7 +286,6 @@ describe('Library Store - getTrack', () => {
   });
 });
 
-
 // -----------------------------------------------------------------------------
 // Tests: Statistics and State
 // -----------------------------------------------------------------------------

app/frontend/js/stores/library.js

@@ -415,30 +415,6 @@ export function createLibraryStore(Alpine) {
       return Array.from(albumSet).sort();
     },
 
-    get tracksByArtist() {
-      const grouped = {};
-      for (const track of this.filteredTracks) {
-        const artist = track.artist || 'Unknown Artist';
-        if (!grouped[artist]) {
-          grouped[artist] = [];
-        }
-        grouped[artist].push(track);
-      }
-      return grouped;
-    },
-
-    get tracksByAlbum() {
-      const grouped = {};
-      for (const track of this.filteredTracks) {
-        const album = track.album || 'Unknown Album';
-        if (!grouped[album]) {
-          grouped[album] = [];
-        }
-        grouped[album].push(track);
-      }
-      return grouped;
-    },
-
     // -----------------------------------------------------------------------
     // Rescan and scan progress
     // -----------------------------------------------------------------------

app/frontend/js/utils/library-operations.js

@@ -18,11 +18,13 @@ import { promptToAddWatchedFolders } from '../utils/watched-folders.js';
  * Shared between loadSection and backgroundRefreshSection.
  */
 export function applySectionData(store, section, tracks, data) {
-  store.tracks = tracks;
-  store.totalTracks = data?.total ?? tracks.length;
-  store.totalDuration = tracks.reduce((sum, t) => sum + (t.duration || 0), 0);
-  store._lastLoadedSection = section;
-  store.applyFilters();
+  window.Alpine.disableEffectScheduling(() => {
+    store.tracks = tracks;
+    store.totalTracks = data?.total ?? tracks.length;
+    store.totalDuration = tracks.reduce((sum, t) => sum + (t.duration || 0), 0);
+    store._lastLoadedSection = section;
+    store.filteredTracks = [...tracks];
+  });
 }
 
 /**
@@ -191,19 +193,22 @@ export async function loadLibraryData(store, { forceReload = false } = {}) {
       return;
     }
 
-    store.tracks = data.tracks || [];
+    const rawTracks = data.tracks || [];
     const _t2 = performance.now();
-    store.totalTracks = data.total || store.tracks.length;
-    store.totalDuration = store.tracks.reduce((sum, t) => sum + (t.duration || 0), 0);
-    store._lastLoadedSection = loadSection;
-    store._updateCache(loadSection, data);
 
-    // _fetchLibraryData always returns the full library, so keep allTracks in sync
-    store.allTracks = store.tracks;
-    store._dataVersion++;
+    window.Alpine.disableEffectScheduling(() => {
+      store.tracks = rawTracks;
+      store.totalTracks = data.total || rawTracks.length;
+      store.totalDuration = rawTracks.reduce((sum, t) => sum + (t.duration || 0), 0);
+      store._lastLoadedSection = loadSection;
+      store.allTracks = rawTracks;
+      store._dataVersion++;
+      store.filteredTracks = [...rawTracks];
+    });
+    store._updateCache(loadSection, data);
     const _t3 = performance.now();
 
-    store.applyFilters();
+    // applyFilters inlined into the batch above
     const _t4 = performance.now();
 
     window._perfLibLoad = {
@@ -243,21 +248,29 @@ export async function backgroundRefreshLibrary(store, section) {
     const data = await store._fetchLibraryData();
 
     // _fetchLibraryData always returns the full library
-    store.allTracks = data.tracks || [];
-    store._dataVersion++;
+    const refreshedTracks = data.tracks || [];
 
     // Only update section-specific state if still on same section
     if (store.currentSection === section) {
-      store.tracks = store.allTracks;
-      store.totalTracks = data.total || store.tracks.length;
-      store.totalDuration = store.tracks.reduce((sum, t) => sum + (t.duration || 0), 0);
+      window.Alpine.disableEffectScheduling(() => {
+        store.allTracks = refreshedTracks;
+        store._dataVersion++;
+        store.tracks = refreshedTracks;
+        store.totalTracks = data.total || refreshedTracks.length;
+        store.totalDuration = refreshedTracks.reduce((sum, t) => sum + (t.duration || 0), 0);
+        store.filteredTracks = [...refreshedTracks];
+      });
       store._updateCache(section, data);
-      store.applyFilters();
 
       console.log('[library] background refresh complete:', {
         section,
         trackCount: store.tracks.length,
       });
+    } else {
+      window.Alpine.disableEffectScheduling(() => {
+        store.allTracks = refreshedTracks;
+        store._dataVersion++;
+      });
     }
   } catch (error) {
     // Silent fail for background refresh
@@ -430,15 +443,21 @@ export function removeTracksLocallyOp(store, Alpine, trackIds) {
   }
 
   const idSet = new Set(trackIds);
-  store.allTracks = store.allTracks.filter((t) => !idSet.has(t.id));
-  store._dataVersion++;
-  store.tracks = store.tracks.filter((t) => !idSet.has(t.id));
-  store.totalTracks = store.tracks.length;
-  store.totalDuration = store.tracks.reduce((sum, t) => sum + (t.duration || 0), 0);
-  store._clearCache();
+  const newAllTracks = store.allTracks.filter((t) => !idSet.has(t.id));
+  const newTracks = store.tracks.filter((t) => !idSet.has(t.id));
   // Filter filteredTracks directly — removing items from a sorted list preserves
   // sort order, so re-running applyFilters() (O(n log n) sort) is unnecessary.
-  store.filteredTracks = store.filteredTracks.filter((t) => !idSet.has(t.id));
+  const newFilteredTracks = store.filteredTracks.filter((t) => !idSet.has(t.id));
+
+  window.Alpine.disableEffectScheduling(() => {
+    store.allTracks = newAllTracks;
+    store._dataVersion++;
+    store.tracks = newTracks;
+    store.totalTracks = newTracks.length;
+    store.totalDuration = newTracks.reduce((sum, t) => sum + (t.duration || 0), 0);
+    store.filteredTracks = newFilteredTracks;
+  });
+  store._clearCache();
 
   // Remove from queue if present
   removeFromQueue(Alpine, idSet);