tuning ui and adding adaptive themeing to extension

frontend/src/App.vue

@@ -58,9 +58,14 @@ const route = useRoute()
 const notificationStore = useNotificationStore()
 const wsStore = useWebSocketStore()
 
-// Initialize WebSocket listeners
+// Initialize WebSocket listeners and restore theme
 onMounted(() => {
   wsStore.init()
+  // Restore theme preference from localStorage
+  const savedTheme = localStorage.getItem('theme')
+  if (savedTheme) {
+    theme.global.name.value = savedTheme
+  }
 })
 
 const drawer = ref(true)
@@ -70,6 +75,7 @@ const navItems = [
   { title: 'Subscriptions', icon: 'mdi-account-multiple', path: '/subscriptions' },
   { title: 'Downloads', icon: 'mdi-download', path: '/downloads' },
   { title: 'Credentials', icon: 'mdi-key', path: '/credentials' },
+  { title: 'Logs', icon: 'mdi-text-box-outline', path: '/logs' },
   { title: 'Settings', icon: 'mdi-cog', path: '/settings' },
 ]
 
@@ -81,7 +87,9 @@ const currentPageTitle = computed(() => {
 const isDark = computed(() => theme.global.current.value.dark)
 
 const toggleTheme = () => {
-  theme.global.name.value = isDark.value ? 'light' : 'dark'
+  const newTheme = isDark.value ? 'light' : 'dark'
+  theme.global.name.value = newTheme
+  localStorage.setItem('theme', newTheme)
 }
 
 const notification = computed(() => notificationStore)