op 1

src/stores/settings.ts

@@ -22,6 +22,9 @@ export const useSettingsStore = defineStore('settings', () => {
   const quickjsVersion = ref('Checking...')
   const ffmpegVersion = ref('Checking...')
   const isInitializing = ref(true)
+  const hasInitialized = ref(false)
+  let mediaQuery: MediaQueryList | null = null
+  let mediaListener: (() => void) | null = null
 
   async function loadSettings() {
     try {
@@ -43,11 +46,13 @@ export const useSettingsStore = defineStore('settings', () => {
   }
 
   async function initYtdlp() {
+    if (hasInitialized.value) return
     try {
         isInitializing.value = true
         // check/download
         await invoke('init_ytdlp')
         await refreshVersions()
+        hasInitialized.value = true
     } catch (e) {
         console.error(e)
         ytdlpVersion.value = 'Error'
@@ -59,9 +64,15 @@ export const useSettingsStore = defineStore('settings', () => {
   }
 
   async function refreshVersions() {
-      ytdlpVersion.value = await invoke('get_ytdlp_version')
-      quickjsVersion.value = await invoke('get_quickjs_version')
-      ffmpegVersion.value = await invoke('get_ffmpeg_version')
+      const [ytdlp, quickjs, ffmpeg] = await Promise.allSettled([
+        invoke<string>('get_ytdlp_version'),
+        invoke<string>('get_quickjs_version'),
+        invoke<string>('get_ffmpeg_version')
+      ])
+
+      ytdlpVersion.value = ytdlp.status === 'fulfilled' ? ytdlp.value : 'Error'
+      quickjsVersion.value = quickjs.status === 'fulfilled' ? quickjs.value : 'Error'
+      ffmpegVersion.value = ffmpeg.status === 'fulfilled' ? ffmpeg.value : 'Error'
   }
 
   function applyTheme(theme: string) {
@@ -74,12 +85,36 @@ export const useSettingsStore = defineStore('settings', () => {
     }
   }
 
-  // Watch system preference changes if theme is system
-  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+  function initThemeListener() {
+    if (mediaQuery) return
+    mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    mediaListener = () => {
       if (settings.value.theme === 'system') {
-          applyTheme('system')
+        applyTheme('system')
       }
-  })
+    }
+    mediaQuery.addEventListener('change', mediaListener)
+  }
 
-  return { settings, loadSettings, save, initYtdlp, refreshVersions, ytdlpVersion, quickjsVersion, ffmpegVersion, isInitializing }
-})
+  function disposeThemeListener() {
+    if (mediaQuery && mediaListener) {
+      mediaQuery.removeEventListener('change', mediaListener)
+    }
+    mediaQuery = null
+    mediaListener = null
+  }
+
+  return {
+    settings,
+    loadSettings,
+    save,
+    initYtdlp,
+    refreshVersions,
+    initThemeListener,
+    disposeThemeListener,
+    ytdlpVersion,
+    quickjsVersion,
+    ffmpegVersion,
+    isInitializing
+  }
+})