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/components/Screensaver.vue

@@ -0,0 +1,166 @@
+<template>
+  <Teleport to="body">
+    <Transition name="screensaver">
+      <div
+        v-if="store.isActive"
+        class="screensaver-container fixed inset-0 z-[3000] bg-black cursor-pointer"
+        @click="store.deactivate()"
+        @keydown.escape="store.deactivate()"
+      >
+        <!-- Logo with audio viz ring - explicitly centered in viewport -->
+        <div class="screensaver-content">
+          <!-- Radial audio visualization - bars around the logo -->
+          <div class="screensaver-viz-ring">
+            <div
+              v-for="(_, i) in segmentCount"
+              :key="i"
+              class="screensaver-viz-segment"
+              :style="getSegmentStyle(i)"
+            />
+          </div>
+          <!-- Logo in center -->
+          <div class="screensaver-logo-wrapper relative z-10">
+            <AnimatedLogo size="xl" />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onBeforeUnmount } from 'vue'
+import AnimatedLogo from '@/components/AnimatedLogo.vue'
+import { useScreensaverStore } from '@/stores/screensaver'
+
+const store = useScreensaverStore()
+
+const segmentCount = 48
+
+function getSegmentStyle(i: number) {
+  const deg = (i / segmentCount) * 360
+  return {
+    '--segment-index': i,
+    '--segment-deg': `${deg}deg`,
+  }
+}
+
+// Dismiss on any key (except when typing)
+function onKeyDown(e: KeyboardEvent) {
+  if (store.isActive) {
+    store.deactivate()
+    e.preventDefault()
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', onKeyDown)
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onKeyDown)
+})
+</script>
+
+<style scoped>
+.screensaver-enter-active,
+.screensaver-leave-active {
+  transition: opacity 0.5s ease;
+}
+.screensaver-enter-from,
+.screensaver-leave-to {
+  opacity: 0;
+}
+
+/* Explicit viewport centering */
+.screensaver-container {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-items: center;
+}
+
+.screensaver-content {
+  position: relative;
+  width: 280px;
+  height: 280px;
+  flex-shrink: 0;
+}
+
+@media (min-width: 640px) {
+  .screensaver-content {
+    width: 360px;
+    height: 360px;
+  }
+}
+
+@media (min-width: 768px) {
+  .screensaver-content {
+    width: 400px;
+    height: 400px;
+  }
+}
+
+/* Ring of segments around the logo - audio viz style */
+.screensaver-viz-ring {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  --viz-radius: 140px;
+}
+
+@media (min-width: 640px) {
+  .screensaver-viz-ring {
+    --viz-radius: 180px;
+  }
+}
+
+@media (min-width: 768px) {
+  .screensaver-viz-ring {
+    --viz-radius: 200px;
+  }
+}
+
+.screensaver-viz-segment {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 4px;
+  height: 24px;
+  margin-left: -2px;
+  margin-top: -12px;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
+  border-radius: 2px;
+  /* Origin at segment center = ring center (segment is centered via left/top 50%) */
+  transform-origin: center center;
+  transform: rotate(var(--segment-deg)) translateY(calc(-1 * var(--viz-radius)));
+  animation: segment-pulse 2s ease-in-out infinite;
+  animation-delay: calc(var(--segment-index) * 0.02s);
+}
+
+@media (min-width: 768px) {
+  .screensaver-viz-segment {
+    height: 28px;
+    margin-top: -14px;
+  }
+}
+
+@keyframes segment-pulse {
+  0%, 100% {
+    opacity: 0.3;
+    transform: rotate(var(--segment-deg)) translateY(calc(-1 * var(--viz-radius))) scaleY(0.4);
+  }
+  50% {
+    opacity: 0.9;
+    transform: rotate(var(--segment-deg)) translateY(calc(-1 * var(--viz-radius))) scaleY(1);
+  }
+}
+
+.screensaver-logo-wrapper {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.15));
+}
+</style>