first

src/App.vue

@@ -1,160 +1,70 @@
+// filepath: src/App.vue
 <script setup lang="ts">
-import { ref } from "vue";
-import { invoke } from "@tauri-apps/api/core";
+import { onMounted } from 'vue'
+import { RouterView, RouterLink, useRoute } from 'vue-router'
+import { Home, History, Settings as SettingsIcon, Download } from 'lucide-vue-next'
+import { useSettingsStore } from './stores/settings'
+import { useQueueStore } from './stores/queue'
 
-const greetMsg = ref("");
-const name = ref("");
+const settingsStore = useSettingsStore()
+const queueStore = useQueueStore()
+const route = useRoute()
 
-async function greet() {
-  // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
-  greetMsg.value = await invoke("greet", { name: name.value });
-}
+onMounted(async () => {
+  await settingsStore.loadSettings()
+  await settingsStore.initYtdlp()
+  await queueStore.initListener()
+})
 </script>
 
 <template>
-  <main class="container">
-    <h1>Welcome to Tauri + Vue</h1>
+  <div class="flex h-screen bg-gray-50 dark:bg-zinc-950 text-zinc-900 dark:text-gray-100 font-sans overflow-hidden">
+    <!-- Sidebar -->
+    <aside class="w-20 lg:w-64 bg-white dark:bg-zinc-900 border-r border-gray-200 dark:border-zinc-800 flex flex-col flex-shrink-0">
+      <div class="p-6 flex items-center gap-3 justify-center lg:justify-start">
+        <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white shrink-0">
+           <Download class="w-5 h-5" />
+        </div>
+        <span class="font-bold text-lg hidden lg:block">StreamCapture</span>
+      </div>
 
-    <div class="row">
-      <a href="https://vite.dev" target="_blank">
-        <img src="/vite.svg" class="logo vite" alt="Vite logo" />
-      </a>
-      <a href="https://tauri.app" target="_blank">
-        <img src="/tauri.svg" class="logo tauri" alt="Tauri logo" />
-      </a>
-      <a href="https://vuejs.org/" target="_blank">
-        <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-      </a>
-    </div>
-    <p>Click on the Tauri, Vite, and Vue logos to learn more.</p>
+      <nav class="flex-1 px-4 space-y-2 mt-4">
+        <RouterLink to="/" 
+          class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors"
+          :class="route.path === '/' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400' : 'hover:bg-gray-100 dark:hover:bg-zinc-800'"
+        >
+          <Home class="w-5 h-5 shrink-0" />
+          <span class="hidden lg:block font-medium">Downloader</span>
+        </RouterLink>
+        
+        <RouterLink to="/history" 
+          class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors"
+          :class="route.path === '/history' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400' : 'hover:bg-gray-100 dark:hover:bg-zinc-800'"
+        >
+          <History class="w-5 h-5 shrink-0" />
+          <span class="hidden lg:block font-medium">History</span>
+        </RouterLink>
 
-    <form class="row" @submit.prevent="greet">
-      <input id="greet-input" v-model="name" placeholder="Enter a name..." />
-      <button type="submit">Greet</button>
-    </form>
-    <p>{{ greetMsg }}</p>
-  </main>
+        <RouterLink to="/settings" 
+          class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors"
+          :class="route.path === '/settings' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400' : 'hover:bg-gray-100 dark:hover:bg-zinc-800'"
+        >
+          <SettingsIcon class="w-5 h-5 shrink-0" />
+          <span class="hidden lg:block font-medium">Settings</span>
+        </RouterLink>
+      </nav>
+
+      <div class="p-4 border-t border-gray-200 dark:border-zinc-800">
+        <div class="text-xs text-gray-400 text-center lg:text-left truncate">
+          <p v-if="settingsStore.isInitializing">Initializing...</p>
+          <p v-else>v{{ settingsStore.ytdlpVersion }}</p>
+        </div>
+      </div>
+    </aside>
+
+    <!-- Main Content -->
+    <main class="flex-1 overflow-auto bg-gray-50 dark:bg-zinc-950 relative">
+      <RouterView />
+    </main>
+  </div>
 </template>
-
-<style scoped>
-.logo.vite:hover {
-  filter: drop-shadow(0 0 2em #747bff);
-}
-
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #249b73);
-}
-
-</style>
-<style>
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-
-  color: #0f0f0f;
-  background-color: #f6f6f6;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-.container {
-  margin: 0;
-  padding-top: 10vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: 0.75s;
-}
-
-.logo.tauri:hover {
-  filter: drop-shadow(0 0 2em #24c8db);
-}
-
-.row {
-  display: flex;
-  justify-content: center;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-
-a:hover {
-  color: #535bf2;
-}
-
-h1 {
-  text-align: center;
-}
-
-input,
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  color: #0f0f0f;
-  background-color: #ffffff;
-  transition: border-color 0.25s;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
-}
-
-button {
-  cursor: pointer;
-}
-
-button:hover {
-  border-color: #396cd8;
-}
-button:active {
-  border-color: #396cd8;
-  background-color: #e8e8e8;
-}
-
-input,
-button {
-  outline: none;
-}
-
-#greet-input {
-  margin-right: 5px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    color: #f6f6f6;
-    background-color: #2f2f2f;
-  }
-
-  a:hover {
-    color: #24c8db;
-  }
-
-  input,
-  button {
-    color: #ffffff;
-    background-color: #0f0f0f98;
-  }
-  button:active {
-    background-color: #0f0f0f69;
-  }
-}
-
-</style>

src/main.ts

@@ -1,4 +1,10 @@
 import { createApp } from "vue";
+import { createPinia } from "pinia";
+import router from "./router";
 import App from "./App.vue";
+import "./style.css";
 
-createApp(App).mount("#app");
+const app = createApp(App);
+app.use(createPinia());
+app.use(router);
+app.mount("#app");

src/router/index.ts

@@ -0,0 +1,27 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from '../views/Home.vue'
+import History from '../views/History.vue'
+import Settings from '../views/Settings.vue'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home
+    },
+    {
+      path: '/history',
+      name: 'history',
+      component: History
+    },
+    {
+      path: '/settings',
+      name: 'settings',
+      component: Settings
+    }
+  ]
+})
+
+export default router

src/stores/queue.ts

@@ -0,0 +1,47 @@
+// filepath: src/stores/queue.ts
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { listen } from '@tauri-apps/api/event'
+
+export interface DownloadTask {
+  id: string
+  title: string
+  thumbnail: string
+  progress: number
+  speed: string
+  status: 'pending' | 'downloading' | 'finished' | 'error'
+}
+
+interface ProgressEvent {
+  id: string
+  progress: number
+  speed: string
+  status: string
+}
+
+export const useQueueStore = defineStore('queue', () => {
+  const tasks = ref<DownloadTask[]>([])
+  const isListening = ref(false)
+
+  function addTask(task: DownloadTask) {
+    tasks.value.push(task)
+  }
+
+  async function initListener() {
+    if (isListening.value) return
+    isListening.value = true
+    
+    await listen<ProgressEvent>('download-progress', (event) => {
+      const { id, progress, speed, status } = event.payload
+      const task = tasks.value.find(t => t.id === id)
+      if (task) {
+        task.progress = progress
+        task.speed = speed
+        // Map status string to type if needed, or just assign
+        task.status = status as any
+      }
+    })
+  }
+
+  return { tasks, addTask, initListener }
+})

src/stores/settings.ts

@@ -0,0 +1,73 @@
+// filepath: src/stores/settings.ts
+import { defineStore } from 'pinia'
+import { invoke } from '@tauri-apps/api/core'
+import { ref } from 'vue'
+
+export interface Settings {
+  download_path: string
+  theme: 'light' | 'dark' | 'system'
+  last_updated: string | null
+}
+
+export const useSettingsStore = defineStore('settings', () => {
+  const settings = ref<Settings>({
+    download_path: '',
+    theme: 'system',
+    last_updated: null
+  })
+
+  const ytdlpVersion = ref('Checking...')
+  const isInitializing = ref(true)
+
+  async function loadSettings() {
+    try {
+      const s = await invoke<Settings>('get_settings')
+      settings.value = s
+      applyTheme(s.theme)
+    } catch (e) {
+      console.error("Failed to load settings", e)
+    }
+  }
+
+  async function save() {
+    try {
+      await invoke('save_settings', { settings: settings.value })
+      applyTheme(settings.value.theme)
+    } catch (e) {
+      console.error("Failed to save settings", e)
+    }
+  }
+
+  async function initYtdlp() {
+    try {
+        isInitializing.value = true
+        // check/download
+        await invoke('init_ytdlp')
+        ytdlpVersion.value = await invoke('get_ytdlp_version')
+    } catch (e) {
+        console.error(e)
+        ytdlpVersion.value = 'Error'
+    } finally {
+        isInitializing.value = false
+    }
+  }
+
+  function applyTheme(theme: string) {
+    const root = document.documentElement
+    const isDark = theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+    if (isDark) {
+      root.classList.add('dark')
+    } else {
+      root.classList.remove('dark')
+    }
+  }
+
+  // Watch system preference changes if theme is system
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+      if (settings.value.theme === 'system') {
+          applyTheme('system')
+      }
+  })
+
+  return { settings, loadSettings, save, initYtdlp, ytdlpVersion, isInitializing }
+})

src/style.css

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom styles if needed */
+body {
+    @apply bg-gray-50 text-zinc-900 dark:bg-zinc-950 dark:text-gray-100 transition-colors duration-300;
+}

src/views/History.vue

@@ -0,0 +1,141 @@
+// filepath: src/views/History.vue
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { invoke } from '@tauri-apps/api/core'
+import { Trash2, FolderOpen } from 'lucide-vue-next'
+import { formatDistanceToNow } from 'date-fns'
+
+interface HistoryItem {
+  id: string
+  title: string
+  thumbnail: string
+  url: string
+  output_path: string
+  timestamp: string
+  status: string
+  format: string
+}
+
+const history = ref<HistoryItem[]>([])
+
+async function loadHistory() {
+  try {
+    const res = await invoke<HistoryItem[]>('get_history')
+    // Sort by timestamp desc
+    history.value = res.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+async function clearHistory() {
+  if(confirm('Clear all download history?')) {
+    await invoke('clear_history')
+    history.value = []
+  }
+}
+
+async function deleteItem(id: string) {
+    if(confirm('Delete this history record? (File will not be deleted)')) {
+        try {
+            await invoke('delete_history_item', { id })
+            history.value = history.value.filter(h => h.id !== id)
+        } catch (e) {
+            console.error(e)
+        }
+    }
+}
+
+async function openFolder(path: string) {
+  await invoke('open_in_explorer', { path })
+}
+
+onMounted(loadHistory)
+</script>
+
+<template>
+  <div class="max-w-5xl mx-auto p-8">
+    <header class="mb-8 flex justify-between items-center">
+      <div>
+        <h1 class="text-3xl font-bold text-zinc-900 dark:text-white">Download History</h1>
+        <p class="text-gray-500 dark:text-gray-400 mt-2">Manage your past downloads.</p>
+      </div>
+      <button 
+        @click="clearHistory"
+        v-if="history.length > 0"
+        class="text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 px-4 py-2 rounded-lg transition-colors text-sm font-medium flex items-center gap-2"
+      >
+        <Trash2 class="w-4 h-4" />
+        Clear All
+      </button>
+    </header>
+
+    <div v-if="history.length === 0" class="text-center py-20">
+        <div class="bg-gray-100 dark:bg-zinc-900 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+            <FolderOpen class="w-8 h-8 text-gray-400" />
+        </div>
+        <h3 class="text-lg font-medium text-zinc-900 dark:text-white">No downloads yet</h3>
+        <p class="text-gray-500">Your download history will appear here.</p>
+    </div>
+
+    <div v-else class="bg-white dark:bg-zinc-900 rounded-2xl shadow-sm border border-gray-200 dark:border-zinc-800 overflow-hidden">
+        <div class="overflow-x-auto">
+            <table class="w-full text-left">
+                <thead class="bg-gray-50 dark:bg-zinc-800/50 text-xs uppercase text-gray-500 font-medium">
+                    <tr>
+                        <th class="px-6 py-4">Media</th>
+                        <th class="px-6 py-4">Date</th>
+                        <th class="px-6 py-4">Format</th>
+                        <th class="px-6 py-4">Status</th>
+                        <th class="px-6 py-4 text-right">Actions</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-gray-100 dark:divide-zinc-800">
+                    <tr v-for="item in history" :key="item.id" class="hover:bg-gray-50 dark:hover:bg-zinc-800/50 transition-colors">
+                        <td class="px-6 py-4">
+                            <div class="flex items-center gap-4">
+                                <img :src="item.thumbnail || '/placeholder.png'" class="w-12 h-12 rounded-lg object-cover bg-gray-200" />
+                                <div class="max-w-xs">
+                                    <div class="font-medium text-zinc-900 dark:text-white truncate" :title="item.title">{{ item.title }}</div>
+                                    <div class="text-xs text-gray-500 truncate">{{ item.url }}</div>
+                                </div>
+                            </div>
+                        </td>
+                        <td class="px-6 py-4 text-sm text-gray-500 whitespace-nowrap">
+                            {{ formatDistanceToNow(new Date(item.timestamp), { addSuffix: true }) }}
+                        </td>
+                        <td class="px-6 py-4 text-sm text-gray-500">
+                            <span class="bg-gray-100 dark:bg-zinc-800 px-2 py-1 rounded text-xs font-mono">{{ item.format }}</span>
+                        </td>
+                        <td class="px-6 py-4">
+                            <span 
+                                class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium"
+                                :class="item.status === 'success' ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'"
+                            >
+                                <span class="w-1.5 h-1.5 rounded-full" :class="item.status === 'success' ? 'bg-green-500' : 'bg-red-500'"></span>
+                                {{ item.status === 'success' ? 'Completed' : 'Failed' }}
+                            </span>
+                        </td>
+                        <td class="px-6 py-4 text-right whitespace-nowrap">
+                            <button 
+                                @click="openFolder(item.output_path)"
+                                class="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"
+                                title="Open Output Folder"
+                            >
+                                <FolderOpen class="w-4 h-4" />
+                            </button>
+                            <button 
+                                @click="deleteItem(item.id)"
+                                class="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors ml-1"
+                                title="Delete Record"
+                            >
+                                <Trash2 class="w-4 h-4" />
+                            </button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+  </div>
+</template>

src/views/Home.vue

@@ -0,0 +1,208 @@
+// filepath: src/views/Home.vue
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { invoke } from '@tauri-apps/api/core'
+import { Loader2, ChevronDown } from 'lucide-vue-next'
+import { useQueueStore } from '../stores/queue'
+import { useSettingsStore } from '../stores/settings'
+
+const queueStore = useQueueStore()
+const settingsStore = useSettingsStore()
+
+const url = ref('')
+const loading = ref(false)
+const error = ref('')
+const metadata = ref<any>(null)
+
+const options = ref({
+  is_audio_only: false,
+  quality: 'best',
+  output_path: ''
+})
+
+watch(() => settingsStore.settings.download_path, (newPath) => {
+    if (newPath) options.value.output_path = newPath
+}, { immediate: true })
+
+async function analyze() {
+  if (!url.value) return
+  loading.value = true
+  error.value = ''
+  metadata.value = null
+  
+  try {
+    const res = await invoke('fetch_metadata', { url: url.value })
+    // Handle playlist vs single video
+    // For MVP, if playlist, just take the playlist info, or first entry?
+    // The rust struct MetadataResult handles both.
+    // Let's assume single video for simpler UI for now, or just show title.
+    metadata.value = res
+    // If it's a playlist, metadata might have 'entries'.
+    // For now we treat it generically.
+  } catch (e: any) {
+    error.value = e.toString()
+  } finally {
+    loading.value = false
+  }
+}
+
+async function startDownload() {
+  if (!metadata.value) return
+  
+  // Use settings path if options is empty
+  if (!options.value.output_path) {
+      options.value.output_path = settingsStore.settings.download_path
+  }
+
+  try {
+      // We need to pass metadata to backend to create history item immediately if we want, 
+      // but backend command signature is `start_download(app, url, options, metadata)`
+      
+      // Prepare metadata object for the command
+      // If it's a playlist, we might need to handle differently.
+      // Let's assume simpler case: pass the main metadata object.
+      
+      // Flatten metadata if it's a wrapper
+      const metaToSend = metadata.value.entries ? 
+         { title: metadata.value.title, thumbnail: "", id: metadata.value.id } : // Playlist
+         metadata.value; // Video
+
+      const id = await invoke<string>('start_download', { 
+          url: url.value,
+          options: options.value,
+          metadata: metaToSend
+      })
+
+      // Add to queue store immediately for UI
+      queueStore.addTask({
+          id,
+          title: metaToSend.title,
+          thumbnail: metaToSend.thumbnail,
+          progress: 0,
+          speed: 'Pending...',
+          status: 'pending'
+      })
+      
+      // Reset
+      url.value = ''
+      metadata.value = null
+  } catch (e: any) {
+      error.value = "Download failed to start: " + e.toString()
+  }
+}
+</script>
+
+<template>
+  <div class="max-w-5xl mx-auto p-8">
+    <header class="mb-8">
+      <h1 class="text-3xl font-bold text-zinc-900 dark:text-white">New Download</h1>
+      <p class="text-gray-500 dark:text-gray-400 mt-2">Paste a URL to start downloading media.</p>
+    </header>
+
+    <!-- Input Section -->
+    <div class="bg-white dark:bg-zinc-900 p-6 rounded-2xl shadow-sm border border-gray-200 dark:border-zinc-800 mb-8">
+      <div class="flex gap-4">
+        <input 
+          v-model="url" 
+          type="text" 
+          placeholder="https://youtube.com/watch?v=..." 
+          class="flex-1 bg-gray-50 dark:bg-zinc-800 border-none rounded-xl px-4 py-3 text-zinc-900 dark:text-white focus:ring-2 focus:ring-blue-500 outline-none"
+          @keyup.enter="analyze"
+        />
+        <button 
+          @click="analyze"
+          :disabled="loading"
+          class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-xl font-medium transition-colors disabled:opacity-50 flex items-center gap-2 shrink-0"
+        >
+          <Loader2 v-if="loading" class="animate-spin w-5 h-5" />
+          <span v-else>Analyze</span>
+        </button>
+      </div>
+      <p v-if="error" class="mt-3 text-red-500 text-sm">{{ error }}</p>
+    </div>
+
+    <!-- Analysis Result -->
+    <div v-if="metadata" class="bg-white dark:bg-zinc-900 rounded-2xl shadow-sm border border-gray-200 dark:border-zinc-800 overflow-hidden mb-8">
+      <div class="p-6 flex flex-col md:flex-row gap-6">
+        <!-- Thumbnail -->
+        <img :src="metadata.thumbnail || '/placeholder.png'" class="w-full md:w-64 aspect-video object-cover rounded-lg bg-gray-100 dark:bg-zinc-800" />
+        
+        <!-- Details -->
+        <div class="flex-1">
+          <h2 class="text-xl font-bold text-zinc-900 dark:text-white line-clamp-2">{{ metadata.title }}</h2>
+          <p v-if="metadata.uploader" class="text-gray-500 dark:text-gray-400 mt-1">{{ metadata.uploader }}</p>
+          <p v-if="metadata.entries" class="text-blue-500 mt-1 font-medium">{{ metadata.entries.length }} videos in playlist</p>
+          
+          <!-- Options -->
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
+             <!-- Audio Only Toggle -->
+             <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-zinc-800 rounded-xl">
+                <span class="font-medium text-sm">Audio Only</span>
+                <button 
+                  @click="options.is_audio_only = !options.is_audio_only"
+                  class="w-12 h-6 rounded-full relative transition-colors duration-200 ease-in-out"
+                  :class="options.is_audio_only ? 'bg-blue-600' : 'bg-gray-300 dark:bg-zinc-600'"
+                >
+                  <span 
+                    class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform duration-200"
+                    :class="options.is_audio_only ? 'translate-x-6' : 'translate-x-0'"
+                  />
+                </button>
+             </div>
+
+             <!-- Quality Dropdown -->
+             <div class="relative">
+                <select 
+                   v-model="options.quality"
+                   class="w-full appearance-none bg-gray-50 dark:bg-zinc-800 border-none rounded-xl px-4 py-3 text-zinc-900 dark:text-white focus:ring-2 focus:ring-blue-500 outline-none"
+                   :disabled="options.is_audio_only"
+                >
+                   <option value="best">Best Quality</option>
+                   <option value="1080">1080p</option>
+                   <option value="720">720p</option>
+                   <option value="480">480p</option>
+                </select>
+                <ChevronDown class="absolute right-4 top-3.5 w-5 h-5 text-gray-400 pointer-events-none" />
+             </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="px-6 py-4 bg-gray-50 dark:bg-zinc-800/50 border-t border-gray-200 dark:border-zinc-800 flex justify-end">
+         <button 
+            @click="startDownload"
+            class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-xl font-bold transition-colors shadow-lg shadow-blue-600/20"
+         >
+            Download Now
+         </button>
+      </div>
+    </div>
+
+    <!-- Active Downloads -->
+    <div v-if="queueStore.tasks.length > 0">
+       <h3 class="text-lg font-bold mb-4">Active Downloads</h3>
+       <div class="space-y-3">
+          <!-- Reversed to show newest first -->
+          <div v-for="task in queueStore.tasks.slice().reverse()" :key="task.id" class="bg-white dark:bg-zinc-900 p-4 rounded-xl border border-gray-200 dark:border-zinc-800 flex items-center gap-4">
+             <img :src="task.thumbnail || '/placeholder.png'" class="w-16 h-16 object-cover rounded-lg bg-gray-100 dark:bg-zinc-800" />
+             <div class="flex-1 min-w-0">
+                <div class="flex justify-between mb-1">
+                   <h4 class="font-medium truncate pr-4">{{ task.title }}</h4>
+                   <span class="text-xs font-mono text-gray-500 whitespace-nowrap">
+                      {{ task.status === 'finished' ? 'Completed' : (task.status === 'error' ? 'Failed' : task.speed) }}
+                   </span>
+                </div>
+                <div class="h-2 bg-gray-100 dark:bg-zinc-800 rounded-full overflow-hidden">
+                   <div 
+                      class="h-full transition-all duration-300"
+                      :style="{ width: `${task.progress}%` }"
+                      :class="task.status === 'error' ? 'bg-red-500' : (task.status === 'finished' ? 'bg-green-500' : 'bg-blue-600')"
+                   />
+                </div>
+             </div>
+          </div>
+       </div>
+    </div>
+
+  </div>
+</template>

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>