Enhance user interaction and audio feedback in CLI and login components

- Updated keydown event handling in App.vue to improve keyboard navigation.
- Enhanced AppSwitcher.vue with a status indicator for online presence.
- Integrated new sci-fi typing sound effect in useLoginSounds.ts for a more engaging user experience during login.
- Modified login handling functions in Login.vue to include sound feedback on setup and login actions.
- Added CLI store integration to play navigation sounds when opening and closing the CLI.

neode-ui/src/composables/useControllerNav.ts

@@ -10,6 +10,7 @@ import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useControllerStore } from '@/stores/controller'
 import { useSpotlightStore } from '@/stores/spotlight'
+import { useCLIStore } from '@/stores/cli'
 import { useAppLauncherStore } from '@/stores/appLauncher'
 import { playNavSound } from '@/composables/useNavSounds'
 
@@ -166,6 +167,12 @@ export function useControllerNav(containerRef?: { value: HTMLElement | null }) {
         e.stopPropagation()
         return
       }
+      if (useCLIStore().isOpen) {
+        useCLIStore().close()
+        e.preventDefault()
+        e.stopPropagation()
+        return
+      }
 
       if (isInsideContainer(activeEl)) {
         const container = activeEl.closest('[data-controller-container]') as HTMLElement | null

neode-ui/src/composables/useLoginSounds.ts

@@ -172,6 +172,47 @@ export function playTypingTick() {
   a.play().catch(() => {})
 }
 
+/** Sci-fi typing sound - short synth blip + click per key, for login/password fields */
+export function playSciFiTypingTick() {
+  const ctx = getContext()
+  if (!ctx) return
+
+  try {
+    if (ctx.state === 'suspended') ctx.resume()
+  } catch {
+    return
+  }
+
+  const t = ctx.currentTime
+
+  // Main tone
+  const osc = ctx.createOscillator()
+  const gain = ctx.createGain()
+  osc.type = 'sine'
+  osc.frequency.setValueAtTime(880, t)
+  osc.frequency.exponentialRampToValueAtTime(660, t + 0.03)
+  gain.gain.setValueAtTime(0, t)
+  gain.gain.linearRampToValueAtTime(0.08, t + 0.005)
+  gain.gain.exponentialRampToValueAtTime(0.001, t + 0.06)
+  osc.connect(gain)
+  gain.connect(ctx.destination)
+  osc.start(t)
+  osc.stop(t + 0.06)
+
+  // Click - short transient at key press
+  const clickOsc = ctx.createOscillator()
+  const clickGain = ctx.createGain()
+  clickOsc.type = 'square'
+  clickOsc.frequency.setValueAtTime(1200, t)
+  clickGain.gain.setValueAtTime(0, t)
+  clickGain.gain.linearRampToValueAtTime(0.04, t + 0.001)
+  clickGain.gain.exponentialRampToValueAtTime(0.001, t + 0.012)
+  clickOsc.connect(clickGain)
+  clickGain.connect(ctx.destination)
+  clickOsc.start(t)
+  clickOsc.stop(t + 0.012)
+}
+
 /** Gaming-style boot thud - soft impact when dashboard loads */
 export function playDashboardLoadOomph() {
   const ctx = getContext()