Phase 4: Architecture & tooling investment

Fixes a real N+1 API-call bug (per-cell project-member fetches in shot/asset
task-status cells, now a shared cached store), replaces a polling-based
in-flight request de-dup with promise memoization, adds markRaw() around
icon components in reactive state, and fixes a deep watcher that re-scanned
the whole projects array just to trigger thumbnail loading.

Introduces useAsyncAction and usePermission composables to cut duplicated
store boilerplate and duplicated role/admin checks, applied only where the
existing code was a clean match rather than forced onto everything. Extracts
assets.ts's shared per-asset optimistic-update/rollback helper without
merging the single and bulk API paths, which hit genuinely different
endpoints. Adds toast-on-error for previously-silent secondary loads and
fixes a dead try/catch in the router's auth-init guard along the way.

Also fixes a thumbnail-loading regression introduced earlier in this same
pass: the new ID-keyed watcher never fired on a repeat visit to the Projects
page when the store already held the same project list, so thumbnails
(local component state, reset per mount) silently stopped loading after the
first visit. Replaced the watcher with a direct call after each fetch.

Table virtualization, splitting the two largest view files, broad store
caching, and moving domain types into types/ were scoped out as separate,
higher-risk follow-ups (documented in frontend_tasks.md).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/src/stores/settings.ts

@@ -1,12 +1,14 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import { settingsService, type UploadLimitResponse, type GlobalSetting } from '@/services/settings'
+import { useAsyncAction } from '@/composables/useAsyncAction'
 
 export const useSettingsStore = defineStore('settings', () => {
   const uploadLimit = ref<UploadLimitResponse | null>(null)
   const allSettings = ref<GlobalSetting[]>([])
   const loading = ref(false)
   const error = ref<string | null>(null)
+  const { run } = useAsyncAction({ isLoading: loading, error })
 
   // Computed
   const uploadLimitMB = computed(() => uploadLimit.value?.upload_limit_mb || 1000)
@@ -14,93 +16,47 @@ export const useSettingsStore = defineStore('settings', () => {
 
   // Actions
   async function fetchUploadLimit() {
-    try {
-      loading.value = true
-      error.value = null
+    return run(async () => {
       uploadLimit.value = await settingsService.getUploadLimit()
-    } catch (err: any) {
-      error.value = err.response?.data?.detail || 'Failed to fetch upload limit'
-      console.error('Error fetching upload limit:', err)
-    } finally {
-      loading.value = false
-    }
+    }, { errorMessage: 'Failed to fetch upload limit', rethrow: false })
   }
 
   async function updateUploadLimit(limitMB: number) {
-    try {
-      loading.value = true
-      error.value = null
+    return run(async () => {
       uploadLimit.value = await settingsService.updateUploadLimit({ upload_limit_mb: limitMB })
-    } catch (err: any) {
-      error.value = err.response?.data?.detail || 'Failed to update upload limit'
-      console.error('Error updating upload limit:', err)
-      throw err
-    } finally {
-      loading.value = false
-    }
+    }, { errorMessage: 'Failed to update upload limit' })
   }
 
   async function fetchAllSettings() {
-    try {
-      loading.value = true
-      error.value = null
+    return run(async () => {
       allSettings.value = await settingsService.getAllSettings()
-    } catch (err: any) {
-      error.value = err.response?.data?.detail || 'Failed to fetch settings'
-      console.error('Error fetching settings:', err)
-    } finally {
-      loading.value = false
-    }
+    }, { errorMessage: 'Failed to fetch settings', rethrow: false })
   }
 
   async function createSetting(setting: { setting_key: string; setting_value: string; description?: string }) {
-    try {
-      loading.value = true
-      error.value = null
+    return run(async () => {
       const newSetting = await settingsService.createSetting(setting)
       allSettings.value.push(newSetting)
       return newSetting
-    } catch (err: any) {
-      error.value = err.response?.data?.detail || 'Failed to create setting'
-      console.error('Error creating setting:', err)
-      throw err
-    } finally {
-      loading.value = false
-    }
+    }, { errorMessage: 'Failed to create setting' })
   }
 
   async function updateSetting(settingKey: string, update: { setting_value: string; description?: string }) {
-    try {
-      loading.value = true
-      error.value = null
+    return run(async () => {
       const updatedSetting = await settingsService.updateSetting(settingKey, update)
       const index = allSettings.value.findIndex(s => s.setting_key === settingKey)
       if (index !== -1) {
         allSettings.value[index] = updatedSetting
       }
       return updatedSetting
-    } catch (err: any) {
-      error.value = err.response?.data?.detail || 'Failed to update setting'
-      console.error('Error updating setting:', err)
-      throw err
-    } finally {
-      loading.value = false
-    }
+    }, { errorMessage: 'Failed to update setting' })
   }
 
   async function deleteSetting(settingKey: string) {
-    try {
-      loading.value = true
-      error.value = null
+    return run(async () => {
       await settingsService.deleteSetting(settingKey)
       allSettings.value = allSettings.value.filter(s => s.setting_key !== settingKey)
-    } catch (err: any) {
-      error.value = err.response?.data?.detail || 'Failed to delete setting'
-      console.error('Error deleting setting:', err)
-      throw err
-    } finally {
-      loading.value = false
-    }
+    }, { errorMessage: 'Failed to delete setting' })
   }
 
   function clearError() {