add quickjs but has bugs

src/stores/settings.ts

@@ -17,6 +17,7 @@ export const useSettingsStore = defineStore('settings', () => {
   })
 
   const ytdlpVersion = ref('Checking...')
+  const quickjsVersion = ref('Checking...')
   const isInitializing = ref(true)
 
   async function loadSettings() {
@@ -43,15 +44,21 @@ export const useSettingsStore = defineStore('settings', () => {
         isInitializing.value = true
         // check/download
         await invoke('init_ytdlp')
-        ytdlpVersion.value = await invoke('get_ytdlp_version')
+        await refreshVersions()
     } catch (e) {
         console.error(e)
         ytdlpVersion.value = 'Error'
+        quickjsVersion.value = 'Error'
     } finally {
         isInitializing.value = false
     }
   }
 
+  async function refreshVersions() {
+      ytdlpVersion.value = await invoke('get_ytdlp_version')
+      quickjsVersion.value = await invoke('get_quickjs_version')
+  }
+
   function applyTheme(theme: string) {
     const root = document.documentElement
     const isDark = theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
@@ -69,5 +76,5 @@ export const useSettingsStore = defineStore('settings', () => {
       }
   })
 
-  return { settings, loadSettings, save, initYtdlp, ytdlpVersion, isInitializing }
-})
+  return { settings, loadSettings, save, initYtdlp, refreshVersions, ytdlpVersion, quickjsVersion, isInitializing }
+})

src/views/Settings.vue

@@ -4,10 +4,11 @@ import { ref } from 'vue'
 import { useSettingsStore } from '../stores/settings'
 import { invoke } from '@tauri-apps/api/core'
 import { open } from '@tauri-apps/plugin-dialog'
-import { Folder, RefreshCw, Monitor, Sun, Moon } from 'lucide-vue-next'
+import { Folder, RefreshCw, Monitor, Sun, Moon, Terminal } from 'lucide-vue-next'
 
 const settingsStore = useSettingsStore()
-const updating = ref(false)
+const updatingYtdlp = ref(false)
+const updatingQuickjs = ref(false)
 const updateStatus = ref('')
 
 async function browsePath() {
@@ -24,16 +25,30 @@ async function browsePath() {
 }
 
 async function updateYtdlp() {
-  updating.value = true
-  updateStatus.value = 'Checking...'
+  updatingYtdlp.value = true
+  updateStatus.value = 'Updating yt-dlp...'
   try {
     const res = await invoke<string>('update_ytdlp')
     updateStatus.value = res
-    await settingsStore.initYtdlp()
+    await settingsStore.refreshVersions()
   } catch (e: any) {
-    updateStatus.value = 'Error: ' + e.toString()
+    updateStatus.value = 'yt-dlp Error: ' + e.toString()
   } finally {
-    updating.value = false
+    updatingYtdlp.value = false
+  }
+}
+
+async function updateQuickjs() {
+  updatingQuickjs.value = true
+  updateStatus.value = 'Updating QuickJS...'
+  try {
+    const res = await invoke<string>('update_quickjs')
+    updateStatus.value = res
+    await settingsStore.refreshVersions()
+  } catch (e: any) {
+    updateStatus.value = 'QuickJS Error: ' + e.toString()
+  } finally {
+    updatingQuickjs.value = false
   }
 }
 
@@ -99,27 +114,59 @@ function setTheme(theme: 'light' | 'dark' | 'system') {
           </div>
        </section>
 
-       <!-- yt-dlp Management -->
+       <!-- Binary Management -->
        <section class="bg-white dark:bg-zinc-900 p-6 rounded-2xl shadow-sm border border-gray-200 dark:border-zinc-800">
-          <div class="flex justify-between items-start">
-             <div>
-                <h2 class="text-lg font-bold mb-1 text-zinc-900 dark:text-white">Binary Management</h2>
-                <p class="text-sm text-gray-500">Current Version: <span class="font-mono text-zinc-700 dark:text-gray-300">{{ settingsStore.ytdlpVersion }}</span></p>
-                <p class="text-xs text-gray-400 mt-1">Last Updated: {{ settingsStore.settings.last_updated ? new Date(settingsStore.settings.last_updated).toLocaleDateString() : 'Never' }}</p>
-             </div>
-             <button 
-               @click="updateYtdlp"
-               :disabled="updating"
-               class="text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 px-4 py-2 rounded-lg transition-colors text-sm font-medium flex items-center gap-2 disabled:opacity-50"
-             >
-               <RefreshCw class="w-4 h-4" :class="{ 'animate-spin': updating }" />
-               Check for Updates
-             </button>
+          <h2 class="text-lg font-bold mb-4 text-zinc-900 dark:text-white">External Binaries</h2>
+          
+          <div class="space-y-4">
+              <!-- yt-dlp -->
+              <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-zinc-800 rounded-xl">
+                  <div class="flex items-center gap-4">
+                      <div class="w-10 h-10 bg-white dark:bg-zinc-700 rounded-lg flex items-center justify-center shadow-sm">
+                          <Download class="w-5 h-5 text-blue-600" />
+                      </div>
+                      <div>
+                          <div class="font-medium text-zinc-900 dark:text-white">yt-dlp</div>
+                          <div class="text-xs text-gray-500 mt-0.5 font-mono">v{{ settingsStore.ytdlpVersion }}</div>
+                      </div>
+                  </div>
+                  <button 
+                    @click="updateYtdlp"
+                    :disabled="updatingYtdlp"
+                    class="text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 px-4 py-2 rounded-lg transition-colors text-sm font-medium flex items-center gap-2 disabled:opacity-50"
+                  >
+                    <RefreshCw class="w-4 h-4" :class="{ 'animate-spin': updatingYtdlp }" />
+                    Update
+                  </button>
+              </div>
+
+              <!-- QuickJS -->
+              <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-zinc-800 rounded-xl">
+                  <div class="flex items-center gap-4">
+                      <div class="w-10 h-10 bg-white dark:bg-zinc-700 rounded-lg flex items-center justify-center shadow-sm">
+                          <Terminal class="w-5 h-5 text-green-600" />
+                      </div>
+                      <div>
+                          <div class="font-medium text-zinc-900 dark:text-white">QuickJS</div>
+                          <div class="text-xs text-gray-500 mt-0.5 font-mono">{{ settingsStore.quickjsVersion }}</div>
+                      </div>
+                  </div>
+                  <button 
+                    @click="updateQuickjs"
+                    :disabled="updatingQuickjs"
+                    class="text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 px-4 py-2 rounded-lg transition-colors text-sm font-medium flex items-center gap-2 disabled:opacity-50"
+                  >
+                    <RefreshCw class="w-4 h-4" :class="{ 'animate-spin': updatingQuickjs }" />
+                    Update
+                  </button>
+              </div>
           </div>
-          <div v-if="updateStatus" class="mt-4 p-3 bg-gray-50 dark:bg-zinc-800 rounded-lg text-xs font-mono text-gray-600 dark:text-gray-400 whitespace-pre-wrap">
+
+          <div v-if="updateStatus" class="mt-4 p-3 bg-gray-50 dark:bg-zinc-800 rounded-lg text-xs font-mono text-gray-600 dark:text-gray-400 whitespace-pre-wrap border border-gray-200 dark:border-zinc-700">
              {{ updateStatus }}
           </div>
+          <p class="text-xs text-gray-400 mt-4 text-right">Last Checked: {{ settingsStore.settings.last_updated ? new Date(settingsStore.settings.last_updated).toLocaleString() : 'Never' }}</p>
        </section>
     </div>
   </div>
-</template>
+</template>