refactor(frontend): complete tauriInvoke migration and extract shared helpers

Replace all direct window.__TAURI__.core.invoke calls outside api/ with
tauriInvoke. Add tauriConfirm to api/shared.js and replace 5 inline
confirm-dialog patterns across settings-view, context-menu-actions,
column-settings, and playlist-crud. Extract formatDurationShorthand from
stats-view into utils/formatting.js. Update metadata-modal and
now-playing-context-menu tests to mock tauriInvoke via vi.mock instead of
patching window.__TAURI__.

Closes task-336.2

Author: pythoninthegrass

app/frontend/__tests__/metadata-modal.test.js

@@ -8,6 +8,11 @@
  */
 
 import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { tauriInvoke } from '../js/api/shared.js';
+
+vi.mock('../js/api/shared.js', () => ({
+  tauriInvoke: vi.fn(),
+}));
 
 // Build a minimal component context that mirrors the Alpine data shape
 function createModalContext(overrides = {}) {
@@ -52,13 +57,9 @@ function createModalContext(overrides = {}) {
 }
 
 describe('metadata-modal batch loading', () => {
-  let mockInvoke;
-
   beforeEach(() => {
-    mockInvoke = vi.fn();
-    global.window = {
-      __TAURI__: { core: { invoke: mockInvoke } },
-    };
+    vi.mocked(tauriInvoke).mockReset();
+    global.window = { __TAURI__: {} };
   });
 
   it('loadBatchMetadata makes a single batch IPC call', async () => {
@@ -68,7 +69,7 @@ describe('metadata-modal batch loading', () => {
       { id: 3, path: '/music/c.mp3', duration: 220 },
     ];
 
-    mockInvoke.mockResolvedValueOnce([
+    vi.mocked(tauriInvoke).mockResolvedValueOnce([
       { title: 'Song A', artist: 'Artist 1', album: 'Album', album_artist: null, track_number: 1, track_total: 10, disc_number: 1, disc_total: 1, year: 2020, genre: 'Rock' },
       { title: 'Song B', artist: 'Artist 1', album: 'Album', album_artist: null, track_number: 2, track_total: 10, disc_number: 1, disc_total: 1, year: 2020, genre: 'Rock' },
       { title: 'Song C', artist: 'Artist 1', album: 'Album', album_artist: null, track_number: 3, track_total: 10, disc_number: 1, disc_total: 1, year: 2020, genre: 'Rock' },
@@ -92,8 +93,8 @@ describe('metadata-modal batch loading', () => {
 
     await component.loadBatchMetadata();
 
-    expect(mockInvoke).toHaveBeenCalledTimes(1);
-    expect(mockInvoke).toHaveBeenCalledWith('get_tracks_metadata_batch', {
+    expect(tauriInvoke).toHaveBeenCalledTimes(1);
+    expect(tauriInvoke).toHaveBeenCalledWith('get_tracks_metadata_batch', {
       paths: ['/music/a.mp3', '/music/b.mp3', '/music/c.mp3'],
     });
 
@@ -114,7 +115,7 @@ describe('metadata-modal batch loading', () => {
       { id: 2, path: '/music/b.mp3', duration: 100 },
     ];
 
-    mockInvoke.mockResolvedValueOnce([
+    vi.mocked(tauriInvoke).mockResolvedValueOnce([
       { title: 'Same', artist: 'Different A', album: 'Same Album', album_artist: null, track_number: 1, track_total: 2, disc_number: null, disc_total: null, year: 2024, genre: 'Pop' },
       { title: 'Same', artist: 'Different B', album: 'Same Album', album_artist: null, track_number: 2, track_total: 2, disc_number: null, disc_total: null, year: 2024, genre: 'Pop' },
     ]);
@@ -139,15 +140,12 @@ describe('metadata-modal batch loading', () => {
 });
 
 describe('metadata-modal parallel save', () => {
-  let mockInvoke;
   let mockRescan;
 
   beforeEach(() => {
-    mockInvoke = vi.fn().mockResolvedValue({});
+    vi.mocked(tauriInvoke).mockReset().mockResolvedValue({});
     mockRescan = vi.fn().mockResolvedValue(undefined);
-    global.window = {
-      __TAURI__: { core: { invoke: mockInvoke } },
-    };
+    global.window = { __TAURI__: {} };
   });
 
   it('saveCurrentEdits calls all saves in parallel via Promise.all', async () => {
@@ -178,13 +176,13 @@ describe('metadata-modal parallel save', () => {
 
     expect(result).toBe(true);
     // All 3 save calls should have been made
-    expect(mockInvoke).toHaveBeenCalledTimes(3);
+    expect(tauriInvoke).toHaveBeenCalledTimes(3);
     // All 3 rescan calls should have been made
     expect(mockRescan).toHaveBeenCalledTimes(3);
 
     // Verify save was called with correct update structures
     for (const track of tracks) {
-      expect(mockInvoke).toHaveBeenCalledWith('save_track_metadata', {
+      expect(tauriInvoke).toHaveBeenCalledWith('save_track_metadata', {
         update: { path: track.path, title: 'New Title' },
       });
     }
@@ -214,7 +212,7 @@ describe('metadata-modal parallel save', () => {
     const result = await component.saveCurrentEdits({ close: true, silent: true });
 
     expect(result).toBe(true);
-    expect(mockInvoke).not.toHaveBeenCalled();
+    expect(tauriInvoke).not.toHaveBeenCalled();
     expect(mockRescan).not.toHaveBeenCalled();
   });
 });

app/frontend/__tests__/now-playing-context-menu.test.js

@@ -37,7 +37,13 @@ vi.mock('../js/api/lyrics.js', () => ({
   },
 }));
 
+vi.mock('../js/api/shared.js', () => ({
+  tauriInvoke: vi.fn(),
+  tauriConfirm: vi.fn(),
+}));
+
 import { favorites } from '../js/api/favorites.js';
+import { tauriInvoke } from '../js/api/shared.js';
 
 function createAlpineMock() {
   const stores = {};
@@ -407,8 +413,7 @@ describe('Now Playing Context Menu', () => {
 
   describe('Show in Finder action', () => {
     it('calls Tauri invoke with the track filepath', async () => {
-      const mockInvoke = vi.fn().mockResolvedValue(undefined);
-      globalThis.window.__TAURI__ = { core: { invoke: mockInvoke } };
+      vi.mocked(tauriInvoke).mockResolvedValueOnce(undefined);
 
       const track = createMockTrack(2);
       component.handleContextMenu(createMockEvent(), track, 1);
@@ -418,11 +423,9 @@ describe('Now Playing Context Menu', () => {
       );
       await showInFinder.action();
 
-      expect(mockInvoke).toHaveBeenCalledWith('show_in_folder', {
+      expect(tauriInvoke).toHaveBeenCalledWith('show_in_folder', {
         path: '/music/track2.mp3',
       });
-
-      delete globalThis.window.__TAURI__;
     });
   });
 });

app/frontend/js/api/shared.js

@@ -73,3 +73,14 @@ export async function tauriInvoke(cmd, params = {}) {
     throw new ApiError(500, error.toString());
   }
 }
+
+/**
+ * Show a native Tauri confirmation dialog, falling back to window.confirm
+ * @param {string} message - Confirmation message
+ * @param {object} options - Dialog options (title, kind)
+ * @returns {Promise<boolean>} Whether the user confirmed
+ */
+export async function tauriConfirm(message, options = {}) {
+  return (await window.__TAURI__?.dialog?.confirm(message, options)) ??
+    window.confirm(message);
+}

app/frontend/js/components/metadata-modal.js

@@ -1,3 +1,4 @@
+import { tauriInvoke } from '../api/shared.js';
 import { formatDuration } from '../utils/formatting.js';
 
 export function createMetadataModal(Alpine) {
@@ -200,8 +201,7 @@ export function createMetadataModal(Alpine) {
         return;
       }
 
-      const { invoke } = window.__TAURI__.core;
-      const data = await invoke('get_track_metadata', { path: trackPath });
+      const data = await tauriInvoke('get_track_metadata', { path: trackPath });
 
       this.metadata = {
         title: data.title || '',
@@ -262,8 +262,7 @@ export function createMetadataModal(Alpine) {
           genre: track.genre || '',
         }));
       } else {
-        const { invoke } = window.__TAURI__.core;
-        const results = await invoke('get_tracks_metadata_batch', { paths });
+        const results = await tauriInvoke('get_tracks_metadata_batch', { paths });
         allMetadata = results.map((data) => ({
           title: data.title || '',
           artist: data.artist || '',
@@ -357,8 +356,6 @@ export function createMetadataModal(Alpine) {
       this.isSaving = true;
 
       try {
-        const { invoke } = window.__TAURI__.core;
-
         const updates = [];
         for (const track of this.tracks) {
           const trackPath = this.getTrackPath(track);
@@ -390,7 +387,7 @@ export function createMetadataModal(Alpine) {
 
         if (updates.length > 0) {
           await Promise.all(
-            updates.map(({ update }) => invoke('save_track_metadata', { update })),
+            updates.map(({ update }) => tauriInvoke('save_track_metadata', { update })),
           );
 
           if (!silent) {

app/frontend/js/components/settings-view.js

@@ -1,6 +1,7 @@
 import { audio } from '../api/audio.js';
 import { lastfm } from '../api/lastfm.js';
 import { settings } from '../api/settings.js';
+import { tauriConfirm, tauriInvoke } from '../api/shared.js';
 import { modLabel, SHORTCUT_DEFINITIONS } from '../shortcuts.js';
 
 export function createSettingsView(Alpine) {
@@ -238,8 +239,7 @@ export function createSettingsView(Alpine) {
       }
 
       try {
-        const { invoke } = window.__TAURI__.core;
-        const info = await invoke('app_get_info');
+        const info = await tauriInvoke('app_get_info');
         this.appInfo = {
           version: info.version || '—',
           build: info.build || '—',
@@ -292,8 +292,7 @@ export function createSettingsView(Alpine) {
 
       this.watchedFoldersLoading = true;
       try {
-        const { invoke } = window.__TAURI__.core;
-        this.watchedFolders = await invoke('watched_folders_list');
+        this.watchedFolders = await tauriInvoke('watched_folders_list');
       } catch (error) {
         console.error('[settings] Failed to load watched folders:', error);
         Alpine.store('ui').toast('Failed to load watched folders', 'error');
@@ -313,8 +312,7 @@ export function createSettingsView(Alpine) {
         const path = await open({ directory: true, multiple: false });
         if (!path) return;
 
-        const { invoke } = window.__TAURI__.core;
-        const folder = await invoke('watched_folders_add', {
+        const folder = await tauriInvoke('watched_folders_add', {
           request: { path, mode: 'continuous', cadence_minutes: 10, enabled: true },
         });
         this.watchedFolders.push(folder);
@@ -329,8 +327,7 @@ export function createSettingsView(Alpine) {
       if (!window.__TAURI__) return;
 
       try {
-        const { invoke } = window.__TAURI__.core;
-        await invoke('watched_folders_remove', { id });
+        await tauriInvoke('watched_folders_remove', { id });
       } catch (error) {
         // If the folder was already removed (e.g. by delete-all), just clean up the UI
         if (!error?.toString().includes('not found')) {
@@ -347,8 +344,7 @@ export function createSettingsView(Alpine) {
       if (!window.__TAURI__) return;
 
       try {
-        const { invoke } = window.__TAURI__.core;
-        const updated = await invoke('watched_folders_update', { id, request: updates });
+        const updated = await tauriInvoke('watched_folders_update', { id, request: updates });
         const index = this.watchedFolders.findIndex((f) => f.id === id);
         if (index !== -1) {
           this.watchedFolders[index] = updated;
@@ -364,8 +360,7 @@ export function createSettingsView(Alpine) {
 
       this.scanningFolders.add(id);
       try {
-        const { invoke } = window.__TAURI__.core;
-        await invoke('watched_folders_rescan', { id });
+        await tauriInvoke('watched_folders_rescan', { id });
         Alpine.store('ui').toast('Rescan started', 'success');
       } catch (error) {
         console.error('[settings] Failed to rescan folder:', error);
@@ -387,18 +382,10 @@ export function createSettingsView(Alpine) {
     },
 
     async resetSettings() {
-      let confirmed = false;
-
-      if (window.__TAURI__?.dialog?.confirm) {
-        confirmed = await window.__TAURI__.dialog.confirm(
-          'This will reset all settings to their defaults. Your library and playlists will not be affected.',
-          { title: 'Reset Settings', kind: 'warning' },
-        );
-      } else {
-        confirmed = confirm(
-          'This will reset all settings to their defaults. Your library and playlists will not be affected.',
-        );
-      }
+      const confirmed = await tauriConfirm(
+        'This will reset all settings to their defaults. Your library and playlists will not be affected.',
+        { title: 'Reset Settings', kind: 'warning' },
+      );
 
       if (!confirmed) return;
 
@@ -421,7 +408,6 @@ export function createSettingsView(Alpine) {
 
       this.isExportingLogs = true;
       try {
-        const { invoke } = window.__TAURI__.core;
         const { save } = window.__TAURI__.dialog;
 
         const path = await save({
@@ -434,7 +420,7 @@ export function createSettingsView(Alpine) {
           return;
         }
 
-        await invoke('export_diagnostics', { path });
+        await tauriInvoke('export_diagnostics', { path });
         Alpine.store('ui').toast('Diagnostics exported successfully', 'success');
       } catch (error) {
         console.error('[settings] Failed to export logs:', error);
@@ -452,8 +438,7 @@ export function createSettingsView(Alpine) {
       if (!window.__TAURI__) return;
 
       try {
-        const { invoke } = window.__TAURI__.core;
-        const status = await invoke('network_cache_status');
+        const status = await tauriInvoke('network_cache_status');
         this.networkCache.enabled = status.enabled;
         this.networkCache.persistent = status.persistent;
         this.networkCache.maxGb = status.max_bytes / 1_073_741_824;
@@ -519,8 +504,7 @@ export function createSettingsView(Alpine) {
 
       this.networkCache.isPurging = true;
       try {
-        const { invoke } = window.__TAURI__.core;
-        await invoke('network_cache_purge');
+        await tauriInvoke('network_cache_purge');
         this.networkCache.usedBytes = 0;
         this.networkCache.fileCount = 0;
         Alpine.store('ui').toast('Network cache cleared', 'success');
@@ -792,18 +776,10 @@ export function createSettingsView(Alpine) {
     },
 
     async resetLovedCache() {
-      let confirmed = false;
-
-      if (window.__TAURI__?.dialog?.confirm) {
-        confirmed = await window.__TAURI__.dialog.confirm(
-          'This will clear the loved tracks cache and remove auto-favorited tracks (synced from Last.fm). Manually favorited tracks are kept.\n\nYou can re-sync from Last.fm afterward to rebuild the cache.',
-          { title: 'Reset Loved Tracks Cache', kind: 'warning' },
-        );
-      } else {
-        confirmed = confirm(
-          'This will clear the loved tracks cache and remove auto-favorited tracks (synced from Last.fm). Manually favorited tracks are kept.\n\nYou can re-sync from Last.fm afterward to rebuild the cache.',
-        );
-      }
+      const confirmed = await tauriConfirm(
+        'This will clear the loved tracks cache and remove auto-favorited tracks (synced from Last.fm). Manually favorited tracks are kept.\n\nYou can re-sync from Last.fm afterward to rebuild the cache.',
+        { title: 'Reset Loved Tracks Cache', kind: 'warning' },
+      );
 
       if (!confirmed) return;
 
@@ -850,14 +826,13 @@ export function createSettingsView(Alpine) {
 
       let unlisten = null;
       try {
-        const { invoke } = window.__TAURI__.core;
         const { listen } = window.__TAURI__.event;
 
         unlisten = await listen('reconcile:progress', (e) => {
           this.reconcileScan.progress = e.payload;
         });
 
-        const result = await invoke('library_reconcile_scan');
+        const result = await tauriInvoke('library_reconcile_scan');
         this.reconcileScan.lastResult = result;
 
         const total = result.backfilled + result.duplicates_merged;
@@ -980,16 +955,10 @@ export function createSettingsView(Alpine) {
         if (this.columnSettings.resetSort) parts.push('sort settings');
 
         const message = `Reset column ${parts.join(', ')}?`;
-
-        let confirmed = false;
-        if (window.__TAURI__?.dialog?.confirm) {
-          confirmed = await window.__TAURI__.dialog.confirm(message, {
-            title: 'Reset Column Settings',
-            kind: 'warning',
-          });
-        } else {
-          confirmed = confirm(message);
-        }
+        const confirmed = await tauriConfirm(message, {
+          title: 'Reset Column Settings',
+          kind: 'warning',
+        });
 
         if (!confirmed) return;
       }