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/views/AppDetails.vue

@@ -429,6 +429,7 @@
 import { ref, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useAppStore } from '../stores/app'
+import { useAppLauncherStore } from '../stores/appLauncher'
 import { PackageState } from '../types/api'
 import { useMobileBackButton } from '../composables/useMobileBackButton'
 import { dummyApps } from '../utils/dummyApps'
@@ -663,7 +664,7 @@ function launchApp() {
   
   if (appUrls[id]) {
     const url = isDev ? appUrls[id].dev : appUrls[id].prod
-    window.open(url, '_blank', 'noopener,noreferrer')
+    useAppLauncherStore().open({ url, title: pkg.value.manifest.title })
     return
   }
   

neode-ui/src/views/Apps.vue

@@ -171,6 +171,7 @@
 import { computed, ref } from 'vue'
 import { useRouter, RouterLink } from 'vue-router'
 import { useAppStore } from '../stores/app'
+import { useAppLauncherStore } from '../stores/appLauncher'
 import { PackageState } from '../types/api'
 
 const router = useRouter()
@@ -223,7 +224,7 @@ function launchApp(id: string) {
   }
   
   if (lanAddress) {
-    window.open(lanAddress, '_blank', 'noopener,noreferrer')
+    useAppLauncherStore().open({ url: lanAddress, title: pkg?.manifest?.title || id })
     return
   }
   
@@ -246,7 +247,7 @@ function launchApp(id: string) {
       const currentHost = window.location.hostname
       url = url.replace('localhost', currentHost)
     }
-    window.open(url, '_blank', 'noopener,noreferrer')
+    useAppLauncherStore().open({ url, title: pkg?.manifest?.title || id })
     return
   }
   

neode-ui/src/views/Cloud.vue

@@ -58,6 +58,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
+import { useAppLauncherStore } from '@/stores/appLauncher'
 
 const router = useRouter()
 
@@ -120,6 +121,8 @@ function openFolder(folderId: string) {
 }
 
 function openNextcloud() {
-  window.open('http://localhost:8086', '_blank', 'noopener,noreferrer')
+  const host = window.location.hostname
+  const url = `http://${host}:8086`
+  useAppLauncherStore().open({ url, title: 'Nextcloud' })
 }
 </script>

neode-ui/src/views/ContainerApps.vue

@@ -132,16 +132,16 @@
               </svg>
               <span>{{ store.isAppLoading(app.id) ? 'Stopping...' : 'Stop' }}</span>
             </button>
-            <a
-              :href="getLaunchUrl(app)"
-              target="_blank"
+            <button
+              type="button"
               class="px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded text-sm font-medium text-white transition-colors flex items-center gap-2"
+              @click="launchApp(app)"
             >
               <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
               </svg>
               Launch
-            </a>
+            </button>
           </template>
         </div>
       </div>
@@ -201,9 +201,11 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, computed } from 'vue'
 import { useContainerStore, type BundledApp } from '@/stores/container'
+import { useAppLauncherStore } from '@/stores/appLauncher'
 import ContainerStatus from '@/components/ContainerStatus.vue'
 
 const store = useContainerStore()
+const appLauncherStore = useAppLauncherStore()
 
 // Use enriched bundled apps with runtime data (like lan_address)
 const bundledApps = computed(() => store.enrichedBundledApps)
@@ -331,6 +333,12 @@ function getLaunchUrl(app: BundledApp): string {
   return `http://${currentHost.value}:${port}`
 }
 
+function launchApp(app: BundledApp) {
+  const url = getLaunchUrl(app)
+  if (url === '#') return
+  appLauncherStore.open({ url, title: app.name })
+}
+
 async function handleStartApp(app: BundledApp) {
   try {
     await store.startBundledApp(app)

neode-ui/src/views/Home.vue

@@ -11,14 +11,18 @@
           </p>
         </div>
       </div>
-      <!-- Compact Status Indicator -->
-      <div class="flex items-center gap-2 px-4 py-2 glass-card rounded-lg">
+      <!-- Compact Status Indicator - click to trigger screensaver (dev) -->
+      <button
+        type="button"
+        class="flex items-center gap-2 px-4 py-2 glass-card rounded-lg cursor-pointer hover:bg-white/5 transition-colors"
+        @click="screensaverStore.activate()"
+      >
         <div class="relative">
           <div class="w-2 h-2 rounded-full bg-green-400"></div>
           <div class="absolute inset-0 w-2 h-2 rounded-full bg-green-400 animate-ping opacity-75"></div>
         </div>
         <span class="text-sm font-medium text-white">Online</span>
-      </div>
+      </button>
     </div>
 
     <!-- Section Overviews - 2advanced staggered animation (hidden until typing starts, then animate with typing) -->
@@ -273,11 +277,13 @@
 import { computed, ref, watch, onBeforeUnmount } from 'vue'
 import { RouterLink } from 'vue-router'
 import { useAppStore } from '../stores/app'
+import { useScreensaverStore } from '../stores/screensaver'
 import { useLoginTransitionStore } from '../stores/loginTransition'
 import { PackageState } from '../types/api'
 import { playTypingSound } from '@/composables/useLoginSounds'
 
 const store = useAppStore()
+const screensaverStore = useScreensaverStore()
 const loginTransition = useLoginTransitionStore()
 
 const LINE1 = "Welcome Noderunner"