Update UI components and enhance controller navigation for improved user experience

- Updated styles in various components to change color themes from cyan to yellow for better visual consistency.
- Enhanced focus management in controller navigation to improve accessibility and user interaction.
- Added new data attributes for controller navigation in multiple views to streamline user interactions with app containers.
- Improved audio handling by removing unused functions in useLoginSounds.ts, optimizing the codebase.

neode-ui/src/App.vue

@@ -9,6 +9,12 @@
     <!-- Spotlight command palette (Cmd+K / Ctrl+K) -->
     <SpotlightSearch />
 
+    <!-- App launcher overlay (iframe popup) -->
+    <AppLauncherOverlay />
+
+    <!-- Screensaver -->
+    <Screensaver />
+
     <!-- Help guide modal (from spotlight) -->
     <HelpGuideModal
       :show="spotlightStore.helpModal.show"
@@ -53,13 +59,17 @@ import { useRouter, useRoute } from 'vue-router'
 import SplashScreen from './components/SplashScreen.vue'
 import PWAUpdatePrompt from './components/PWAUpdatePrompt.vue'
 import SpotlightSearch from './components/SpotlightSearch.vue'
+import AppLauncherOverlay from './components/AppLauncherOverlay.vue'
+import Screensaver from './components/Screensaver.vue'
 import HelpGuideModal from './components/HelpGuideModal.vue'
 import { useControllerNav } from '@/composables/useControllerNav'
 import { useSpotlightStore } from '@/stores/spotlight'
 import { useMessageToast } from '@/composables/useMessageToast'
 import { useAppStore } from '@/stores/app'
+import { useScreensaverStore } from '@/stores/screensaver'
 
 const router = useRouter()
+const screensaverStore = useScreensaverStore()
 const spotlightStore = useSpotlightStore()
 const appStore = useAppStore()
 const messageToast = useMessageToast()
@@ -71,12 +81,22 @@ useControllerNav()
 watch(() => appStore.isAuthenticated, (authenticated) => {
   if (authenticated) {
     messageToast.startPolling()
+    screensaverStore.resetInactivityTimer()
   } else {
     messageToast.stopPolling()
     toastMessage.value = { show: false, text: '' }
+    screensaverStore.clearInactivityTimer()
+    screensaverStore.deactivate()
   }
 }, { immediate: true })
 
+// Reset screensaver inactivity on user activity (when authenticated)
+function onUserActivity() {
+  if (appStore.isAuthenticated && !screensaverStore.isActive) {
+    screensaverStore.resetInactivityTimer()
+  }
+}
+
 function onKeyDown(e: KeyboardEvent) {
   const isMac = navigator.platform.toUpperCase().includes('MAC')
   const mod = isMac ? e.metaKey : e.ctrlKey
@@ -98,6 +118,10 @@ const isReady = ref(false)
  */
 onMounted(async () => {
   window.addEventListener('keydown', onKeyDown)
+  window.addEventListener('mousemove', onUserActivity)
+  window.addEventListener('mousedown', onUserActivity)
+  window.addEventListener('keydown', onUserActivity)
+  window.addEventListener('touchstart', onUserActivity)
   const seenIntro = localStorage.getItem('neode_intro_seen') === '1'
   const isDirectRoute = route.path !== '/'
   
@@ -114,6 +138,10 @@ onMounted(async () => {
 
 onBeforeUnmount(() => {
   window.removeEventListener('keydown', onKeyDown)
+  window.removeEventListener('mousemove', onUserActivity)
+  window.removeEventListener('mousedown', onUserActivity)
+  window.removeEventListener('keydown', onUserActivity)
+  window.removeEventListener('touchstart', onUserActivity)
 })
 
 /**