stream-capture/src/views/Settings.vue

// 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>