add logging

src/App.vue

@@ -2,18 +2,21 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
 import { RouterView, RouterLink, useRoute } from 'vue-router'
-import { Home, History, Settings as SettingsIcon, Download } from 'lucide-vue-next'
+import { Home, History, Settings as SettingsIcon, Download, FileText } from 'lucide-vue-next'
 import { useSettingsStore } from './stores/settings'
 import { useQueueStore } from './stores/queue'
+import { useLogsStore } from './stores/logs'
 
 const settingsStore = useSettingsStore()
 const queueStore = useQueueStore()
+const logsStore = useLogsStore()
 const route = useRoute()
 
 onMounted(async () => {
   await settingsStore.loadSettings()
   await settingsStore.initYtdlp()
   await queueStore.initListener()
+  await logsStore.initListener()
 })
 </script>
 
@@ -28,7 +31,8 @@ onMounted(async () => {
         <span class="font-bold text-lg hidden lg:block">StreamCapture</span>
       </div>
 
-      <nav class="flex-1 px-4 space-y-2 mt-4">
+      <nav class="flex-1 px-4 space-y-2 mt-4 flex flex-col">
+        <!-- Top Section -->
         <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'"
@@ -45,21 +49,25 @@ onMounted(async () => {
           <span class="hidden lg:block font-medium">History</span>
         </RouterLink>
 
-        <RouterLink to="/settings" 
+        <div class="flex-1"></div>
+
+        <!-- Bottom Section -->
+        <RouterLink to="/logs" 
           class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors"
+          :class="route.path === '/logs' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400' : 'hover:bg-gray-100 dark:hover:bg-zinc-800'"
+        >
+          <FileText class="w-5 h-5 shrink-0" />
+          <span class="hidden lg:block font-medium">Logs</span>
+        </RouterLink>
+
+        <RouterLink to="/settings" 
+          class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors mb-4"
           :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 -->
@@ -67,4 +75,4 @@ onMounted(async () => {
       <RouterView />
     </main>
   </div>
-</template>
+</template>

src/router/index.ts

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import Home from '../views/Home.vue'
 import History from '../views/History.vue'
 import Settings from '../views/Settings.vue'
+import Logs from '../views/Logs.vue'
 
 const router = createRouter({
   history: createWebHistory(),
@@ -16,6 +17,11 @@ const router = createRouter({
       name: 'history',
       component: History
     },
+    {
+      path: '/logs',
+      name: 'logs',
+      component: Logs
+    },
     {
       path: '/settings',
       name: 'settings',
@@ -24,4 +30,4 @@ const router = createRouter({
   ]
 })
 
-export default router
+export default router

src/stores/logs.ts

@@ -0,0 +1,54 @@
+// filepath: src/stores/logs.ts
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { listen } from '@tauri-apps/api/event'
+
+export interface LogEntry {
+  id: string
+  taskId: string
+  message: string
+  level: 'info' | 'error'
+  timestamp: number
+}
+
+interface LogEvent {
+  id: string
+  message: string
+  level: string
+}
+
+export const useLogsStore = defineStore('logs', () => {
+  const logs = ref<LogEntry[]>([])
+  const isListening = ref(false)
+
+  function addLog(taskId: string, message: string, level: 'info' | 'error') {
+    logs.value.push({
+      id: crypto.randomUUID(),
+      taskId,
+      message,
+      level,
+      timestamp: Date.now()
+    })
+    
+    // Optional: Limit log size to avoid memory issues
+    if (logs.value.length > 5000) {
+        logs.value = logs.value.slice(-5000)
+    }
+  }
+
+  async function initListener() {
+    if (isListening.value) return
+    isListening.value = true
+    
+    await listen<LogEvent>('download-log', (event) => {
+      const { id, message, level } = event.payload
+      addLog(id, message, level as 'info' | 'error')
+    })
+  }
+  
+  function clearLogs() {
+      logs.value = []
+  }
+
+  return { logs, addLog, initListener, clearLogs }
+})

src/views/Logs.vue

@@ -0,0 +1,120 @@
+// filepath: src/views/Logs.vue
+<script setup lang="ts">
+import { ref, computed, nextTick, watch } from 'vue'
+import { useLogsStore } from '../stores/logs'
+import { Trash2, Search } from 'lucide-vue-next'
+
+const logsStore = useLogsStore()
+const logsContainer = ref<HTMLElement | null>(null)
+const autoScroll = ref(true)
+const filterLevel = ref<'all' | 'info' | 'error'>('all')
+const searchQuery = ref('')
+
+const filteredLogs = computed(() => {
+  return logsStore.logs.filter(log => {
+    if (filterLevel.value !== 'all' && log.level !== filterLevel.value) return false
+    if (searchQuery.value && !log.message.toLowerCase().includes(searchQuery.value.toLowerCase()) && !log.taskId.includes(searchQuery.value)) return false
+    return true
+  })
+})
+
+// Auto-scroll
+watch(() => logsStore.logs.length, () => {
+  if (autoScroll.value) {
+    nextTick(() => {
+      if (logsContainer.value) {
+        logsContainer.value.scrollTop = logsContainer.value.scrollHeight
+      }
+    })
+  }
+})
+
+function formatTime(ts: number) {
+    return new Date(ts).toLocaleTimeString()
+}
+</script>
+
+<template>
+  <div class="flex flex-col h-full">
+      <!-- Header -->
+      <div class="px-8 py-6 border-b border-gray-200 dark:border-zinc-800 flex justify-between items-center bg-white dark:bg-zinc-900">
+          <div>
+            <h1 class="text-2xl font-bold text-zinc-900 dark:text-white">Execution Logs</h1>
+            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Real-time output from download processes.</p>
+          </div>
+          
+          <div class="flex items-center gap-3">
+             <!-- Search -->
+             <div class="relative">
+                 <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+                 <input 
+                    v-model="searchQuery"
+                    type="text" 
+                    placeholder="Search logs..." 
+                    class="pl-9 pr-4 py-2 bg-gray-100 dark:bg-zinc-800 rounded-lg text-sm outline-none focus:ring-2 focus:ring-blue-500 border-none w-48"
+                 />
+             </div>
+
+             <!-- Level Filter -->
+             <div class="flex bg-gray-100 dark:bg-zinc-800 rounded-lg p-1">
+                 <button 
+                    @click="filterLevel = 'all'"
+                    class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
+                    :class="filterLevel === 'all' ? 'bg-white dark:bg-zinc-700 shadow-sm text-zinc-900 dark:text-white' : 'text-gray-500 hover:text-zinc-900 dark:hover:text-white'"
+                 >All</button>
+                 <button 
+                    @click="filterLevel = 'info'"
+                    class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
+                    :class="filterLevel === 'info' ? 'bg-white dark:bg-zinc-700 shadow-sm text-zinc-900 dark:text-white' : 'text-gray-500 hover:text-zinc-900 dark:hover:text-white'"
+                 >Info</button>
+                 <button 
+                    @click="filterLevel = 'error'"
+                    class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors"
+                    :class="filterLevel === 'error' ? 'bg-white dark:bg-zinc-700 shadow-sm text-zinc-900 dark:text-white' : 'text-gray-500 hover:text-zinc-900 dark:hover:text-white'"
+                 >Error</button>
+             </div>
+
+             <button 
+                @click="logsStore.clearLogs"
+                class="p-2 text-gray-500 hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 rounded-lg transition-colors"
+                title="Clear Logs"
+             >
+                <Trash2 class="w-4 h-4" />
+             </button>
+          </div>
+      </div>
+
+      <!-- Logs Console -->
+      <div class="flex-1 overflow-hidden relative bg-gray-900 text-gray-300 font-mono text-xs md:text-sm">
+          <div 
+            ref="logsContainer"
+            class="absolute inset-0 overflow-auto p-4 space-y-1 custom-scrollbar"
+            @scroll="(e) => {
+                const target = e.target as HTMLElement;
+                autoScroll = target.scrollTop + target.clientHeight >= target.scrollHeight - 10;
+            }"
+          >
+              <div v-if="filteredLogs.length === 0" class="h-full flex items-center justify-center text-gray-600">
+                  No logs to display
+              </div>
+              <div v-for="log in filteredLogs" :key="log.id" class="flex gap-3 hover:bg-gray-800/50 px-2 py-0.5 rounded">
+                  <span class="text-gray-600 shrink-0 select-none w-20">{{ formatTime(log.timestamp) }}</span>
+                  <span 
+                    class="break-all whitespace-pre-wrap"
+                    :class="log.level === 'error' ? 'text-red-400' : 'text-gray-300'"
+                  >{{ log.message }}</span>
+              </div>
+          </div>
+          
+          <!-- Auto-scroll indicator -->
+          <div v-if="!autoScroll" class="absolute bottom-4 right-4">
+              <button 
+                @click="() => { if(logsContainer) logsContainer.scrollTop = logsContainer.scrollHeight }"
+                class="bg-blue-600 hover:bg-blue-700 text-white text-xs px-3 py-1.5 rounded-full shadow-lg transition-colors"
+              >
+                  Resume Auto-scroll
+              </button>
+          </div>
+      </div>
+  </div>
+</template>