first

src/views/Settings.vue

@@ -0,0 +1,125 @@
+// filepath: src/views/Settings.vue
+<script setup lang="ts">
+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'
+
+const settingsStore = useSettingsStore()
+const updating = ref(false)
+const updateStatus = ref('')
+
+async function browsePath() {
+  const selected = await open({
+    directory: true,
+    multiple: false,
+    defaultPath: settingsStore.settings.download_path
+  })
+  
+  if (selected) {
+    settingsStore.settings.download_path = selected as string
+    await settingsStore.save()
+  }
+}
+
+async function updateYtdlp() {
+  updating.value = true
+  updateStatus.value = 'Checking...'
+  try {
+    const res = await invoke<string>('update_ytdlp')
+    updateStatus.value = res
+    await settingsStore.initYtdlp()
+  } catch (e: any) {
+    updateStatus.value = 'Error: ' + e.toString()
+  } finally {
+    updating.value = false
+  }
+}
+
+function setTheme(theme: 'light' | 'dark' | 'system') {
+    settingsStore.settings.theme = theme
+    settingsStore.save()
+}
+</script>
+
+<template>
+  <div class="max-w-3xl mx-auto p-8">
+    <header class="mb-8">
+      <h1 class="text-3xl font-bold text-zinc-900 dark:text-white">Settings</h1>
+      <p class="text-gray-500 dark:text-gray-400 mt-2">Configure your download preferences.</p>
+    </header>
+
+    <div class="space-y-6">
+       <!-- Download Path -->
+       <section class="bg-white dark:bg-zinc-900 p-6 rounded-2xl shadow-sm border border-gray-200 dark:border-zinc-800">
+          <h2 class="text-lg font-bold mb-4 text-zinc-900 dark:text-white">Download Location</h2>
+          <div class="flex gap-3">
+             <div class="flex-1 bg-gray-50 dark:bg-zinc-800 rounded-xl px-4 py-3 text-sm text-gray-600 dark:text-gray-300 font-mono truncate border border-transparent focus-within:border-blue-500 transition-colors">
+                {{ settingsStore.settings.download_path || 'Not set (using defaults)' }}
+             </div>
+             <button 
+               @click="browsePath"
+               class="bg-gray-100 hover:bg-gray-200 dark:bg-zinc-800 dark:hover:bg-zinc-700 text-zinc-900 dark:text-white px-4 py-3 rounded-xl font-medium transition-colors flex items-center gap-2"
+             >
+               <Folder class="w-5 h-5" />
+               Browse
+             </button>
+          </div>
+       </section>
+
+       <!-- Theme -->
+       <section class="bg-white dark:bg-zinc-900 p-6 rounded-2xl shadow-sm border border-gray-200 dark:border-zinc-800">
+          <h2 class="text-lg font-bold mb-4 text-zinc-900 dark:text-white">Appearance</h2>
+          <div class="grid grid-cols-3 gap-4">
+             <button 
+               @click="setTheme('light')"
+               class="flex flex-col items-center gap-3 p-4 rounded-xl border-2 transition-all"
+               :class="settingsStore.settings.theme === 'light' ? 'border-blue-600 bg-blue-50 dark:bg-blue-900/20 text-blue-600' : 'border-transparent bg-gray-50 dark:bg-zinc-800 text-gray-500 hover:bg-gray-100 dark:hover:bg-zinc-700'"
+             >
+                <Sun class="w-6 h-6" />
+                <span class="font-medium">Light</span>
+             </button>
+             <button 
+               @click="setTheme('dark')"
+               class="flex flex-col items-center gap-3 p-4 rounded-xl border-2 transition-all"
+               :class="settingsStore.settings.theme === 'dark' ? 'border-blue-600 bg-blue-50 dark:bg-blue-900/20 text-blue-600' : 'border-transparent bg-gray-50 dark:bg-zinc-800 text-gray-500 hover:bg-gray-100 dark:hover:bg-zinc-700'"
+             >
+                <Moon class="w-6 h-6" />
+                <span class="font-medium">Dark</span>
+             </button>
+             <button 
+               @click="setTheme('system')"
+               class="flex flex-col items-center gap-3 p-4 rounded-xl border-2 transition-all"
+               :class="settingsStore.settings.theme === 'system' ? 'border-blue-600 bg-blue-50 dark:bg-blue-900/20 text-blue-600' : 'border-transparent bg-gray-50 dark:bg-zinc-800 text-gray-500 hover:bg-gray-100 dark:hover:bg-zinc-700'"
+             >
+                <Monitor class="w-6 h-6" />
+                <span class="font-medium">System</span>
+             </button>
+          </div>
+       </section>
+
+       <!-- yt-dlp 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>
+          </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">
+             {{ updateStatus }}
+          </div>
+       </section>
+    </div>
+  </div>
+</template>