Update UI styles and enhance controller navigation functionality

- Replaced cyan color with yellow in various UI components for a cohesive visual theme. - Improved focus styles for controller navigation, adding subtle grow and glow effects to sidebar items and containers. - Enhanced controller navigation logic to support direct focus on app containers in the Marketplace and My Apps sections. - Introduced wheel scrolling support for better navigation experience within scrollable areas. - Removed unused audio tone function from useLoginSounds.ts to streamline code.
2026-02-17 20:40:26 +00:00 · 2026-02-17 20:40:26 +00:00 · 5a04875dcc
commit 5a04875dcc
parent c72b97e940
12 changed files with 109 additions and 60 deletions
--- a/loop-start.mp3
+++ b/loop-start.mp3
--- a/neode-ui/src/components/SplashScreen.vue
+++ b/neode-ui/src/components/SplashScreen.vue
@ -51,19 +51,19 @@
        >
          <div class="font-mono text-white px-4 sm:px-5 max-w-[95vw] sm:max-w-[90vw] md:max-w-[1200px] text-base sm:text-lg md:text-[24px] leading-relaxed break-words">
            <div v-if="showLine1" class="flex items-start mb-4 sm:mb-6 opacity-0" :class="{ 'opacity-100': showLine1 }">
-              <span class="text-[#00ffff] mr-3 sm:mr-6 flex-shrink-0">></span>
+              <span class="text-[#fbbf24] mr-3 sm:mr-6 flex-shrink-0">></span>
              <span class="text-white break-words">{{ displayLine1 }}</span><span v-if="isTypingLine1" class="intro-typing-caret" aria-hidden="true"></span>
            </div>
            <div v-if="showLine2" class="flex items-start mb-4 sm:mb-6 opacity-0" :class="{ 'opacity-100': showLine2 }">
-              <span class="text-[#00ffff] mr-3 sm:mr-6 flex-shrink-0">></span>
+              <span class="text-[#fbbf24] mr-3 sm:mr-6 flex-shrink-0">></span>
              <span class="text-white break-words">{{ displayLine2 }}</span><span v-if="isTypingLine2" class="intro-typing-caret" aria-hidden="true"></span>
            </div>
            <div v-if="showLine3" class="flex items-start mb-4 sm:mb-6 opacity-0" :class="{ 'opacity-100': showLine3 }">
-              <span class="text-[#00ffff] mr-3 sm:mr-6 flex-shrink-0">></span>
+              <span class="text-[#fbbf24] mr-3 sm:mr-6 flex-shrink-0">></span>
              <span class="text-white break-words">{{ displayLine3 }}</span><span v-if="isTypingLine3" class="intro-typing-caret" aria-hidden="true"></span>
            </div>
            <div v-if="showLine4" class="flex items-start mb-8 sm:mb-12 opacity-0" :class="{ 'opacity-100': showLine4 }">
-              <span class="text-[#00ffff] mr-3 sm:mr-6 flex-shrink-0">></span>
+              <span class="text-[#fbbf24] mr-3 sm:mr-6 flex-shrink-0">></span>
              <span class="text-white break-words">{{ displayLine4 }}</span><span v-if="isTypingLine4" class="intro-typing-caret" aria-hidden="true"></span>
            </div>
          </div>
@ -521,13 +521,13 @@ onBeforeUnmount(() => {
  min-width: 0;
 }

-/* Intro typing cursor - block style, cyan blink (matches original typing-text caret) */
+/* Intro typing cursor - block style, yellow blink (Archipelago style) */
 .intro-typing-caret {
  display: inline-block;
  width: 4px;
  min-width: 4px;
  height: 1.2em;
-  background: #00ffff;
+  background: #fbbf24;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: intro-caret-blink 0.5s step-end infinite;
--- a/neode-ui/src/composables/useControllerNav.ts
+++ b/neode-ui/src/composables/useControllerNav.ts
@ -201,6 +201,17 @@ export function useControllerNav(containerRef?: { value: HTMLElement | null }) {
        const el = focusable[currentIndex] as HTMLElement

        if (el.hasAttribute('data-controller-container')) {
+          // Marketplace: Enter = install (click install button)
+          if (el.hasAttribute('data-controller-install')) {
+            const installBtn = el.querySelector<HTMLButtonElement>('[data-controller-install-btn]:not([disabled])')
+            if (installBtn) {
+              playNavSound('action')
+              installBtn.click()
+              e.preventDefault()
+              return
+            }
+          }
+          // My Apps, etc: Enter = focus first inner control
          const inner = getInnerFocusables(el)
          const firstInner = inner[0]
          if (firstInner) {
@ -231,8 +242,10 @@ export function useControllerNav(containerRef?: { value: HTMLElement | null }) {
      const mainEls = getElementsInZone('main')
      const hasZones = sidebarEls.length > 0 && mainEls.length > 0

-      // Right: from sidebar → main
-      const firstMain = mainEls[0]
+      // Right: from sidebar → main (on App Store/My Apps, go straight to first app container)
+      const mainZone = document.querySelector('[data-controller-zone="main"]')
+      const firstAppContainer = mainZone?.querySelector<HTMLElement>('[data-controller-container]')
+      const firstMain = firstAppContainer ?? mainEls[0]
      if (e.key === 'ArrowRight' && hasZones && isInZone(activeEl, 'sidebar') && firstMain) {
        playNavSound('move')
        firstMain.focus()
@ -254,13 +267,15 @@ export function useControllerNav(containerRef?: { value: HTMLElement | null }) {
          return
        }

-        // No element in that direction: Left from leftmost → sidebar
+        // No element in that direction: Left from leftmost → sidebar (focus active tab, not logout)
        if (e.key === 'ArrowLeft' && dir === 'left') {
-          const lastSidebar = sidebarEls[sidebarEls.length - 1]
-          if (lastSidebar) {
+          const sidebarZone = document.querySelector('[data-controller-zone="sidebar"]')
+          const activeNavTab = sidebarZone?.querySelector<HTMLElement>('.nav-tab-active')
+          const target = activeNavTab ?? sidebarEls[0]
+          if (target) {
            playNavSound('move')
-            lastSidebar.focus()
-            lastSidebar.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+            target.focus()
+            target.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
            e.preventDefault()
            return
          }
@ -350,9 +365,38 @@ export function useControllerNav(containerRef?: { value: HTMLElement | null }) {
    isControllerActive.value = gamepadCount.value > 0
  }

+  /** Find nearest scrollable ancestor (overflow-y auto/scroll) */
+  function getScrollableAncestor(el: HTMLElement | null): HTMLElement | null {
+    let p = el?.parentElement
+    while (p) {
+      const style = getComputedStyle(p)
+      const oy = style.overflowY
+      if ((oy === 'auto' || oy === 'scroll') && p.scrollHeight > p.clientHeight) return p
+      p = p.parentElement
+    }
+    return null
+  }
+
+  /** Ensure wheel scrolls the scrollable area containing the focused element */
+  function handleWheel(e: WheelEvent) {
+    const active = document.activeElement as HTMLElement | null
+    if (!active) return
+    const scrollable = getScrollableAncestor(active)
+    if (!scrollable) return
+    if (e.deltaY !== 0) {
+      scrollable.scrollTop += e.deltaY
+      e.preventDefault()
+    }
+    if (e.deltaX !== 0 && scrollable.scrollWidth > scrollable.clientWidth) {
+      scrollable.scrollLeft += e.deltaX
+      e.preventDefault()
+    }
+  }
+
  onMounted(() => {
    checkGamepads()
    window.addEventListener('keydown', handleKeyDown, true)
+    window.addEventListener('wheel', handleWheel, { passive: false })
    window.addEventListener('gamepadconnected', handleGamepadConnected)
    window.addEventListener('gamepaddisconnected', handleGamepadDisconnected)
    pollIntervalId = setInterval(handleGamepadInput, 500)
@ -360,6 +404,7 @@ export function useControllerNav(containerRef?: { value: HTMLElement | null }) {

  onBeforeUnmount(() => {
    window.removeEventListener('keydown', handleKeyDown, true)
+    window.removeEventListener('wheel', handleWheel)
    window.removeEventListener('gamepadconnected', handleGamepadConnected)
    window.removeEventListener('gamepaddisconnected', handleGamepadDisconnected)
    if (pollIntervalId) clearInterval(pollIntervalId)
--- a/neode-ui/src/composables/useLoginSounds.ts
+++ b/neode-ui/src/composables/useLoginSounds.ts
@ -16,28 +16,6 @@ function getContext(): AudioContext | null {
  }
 }

-function playTone(
-  ctx: AudioContext,
-  freq: number,
-  duration: number,
-  gain: number,
-  type: OscillatorType = 'sine',
-  startOffset = 0,
-  dest: AudioNode = ctx.destination
-) {
-  const osc = ctx.createOscillator()
-  const g = ctx.createGain()
-  osc.connect(g)
-  g.connect(dest)
-  g.gain.setValueAtTime(0, ctx.currentTime)
-  g.gain.linearRampToValueAtTime(gain, ctx.currentTime + 0.01)
-  g.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + duration)
-  osc.frequency.value = freq
-  osc.type = type
-  osc.start(ctx.currentTime + startOffset)
-  osc.stop(ctx.currentTime + startOffset + duration)
-}
-
 const INTRO_AUDIO_URL = '/assets/audio/cosmic-updrift.mp3'
 const LOOP_START_URL = '/assets/audio/loop-start.mp3'

--- a/neode-ui/src/style.css
+++ b/neode-ui/src/style.css
@ -17,20 +17,22 @@
  font-style: normal;
 }

-/* Controller / keyboard navigation - soft glow, hover-style (not yellow button) */
+/* Controller / keyboard navigation - soft glow only (no box outline) */
 *:focus-visible {
  outline: none;
-  box-shadow:
-    0 0 0 1px rgba(255, 255, 255, 0.25),
-    0 0 16px rgba(120, 180, 255, 0.2),
-    0 0 32px rgba(100, 160, 255, 0.1);
+  box-shadow: 0 0 16px rgba(120, 180, 255, 0.2), 0 0 32px rgba(100, 160, 255, 0.1);
  transition: box-shadow 0.2s ease;
 }

-/* Containers get a subtle inner glow when focused */
+/* Containers: base scale for smooth grow animation */
+[data-controller-container] {
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+/* Containers get subtle grow + inner glow when focused (gamepad selection) */
 [data-controller-container]:focus-visible {
+  transform: scale(1.02);
  box-shadow:
-    0 0 0 1px rgba(255, 255, 255, 0.3),
    0 0 24px rgba(120, 180, 255, 0.15),
    0 0 48px rgba(100, 160, 255, 0.08),
    inset 0 0 24px rgba(255, 255, 255, 0.03);
@ -393,6 +395,18 @@
    mask-composite: exclude;
    pointer-events: none;
  }
+
+  /* Sidebar nav items: grow + glow on gamepad focus (same as containers) */
+  .sidebar-nav-item {
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+  }
+  .sidebar-nav-item:focus-visible {
+    transform: scale(1.02) !important;
+    box-shadow:
+      0 0 24px rgba(120, 180, 255, 0.15),
+      0 0 48px rgba(100, 160, 255, 0.08),
+      inset 0 0 24px rgba(255, 255, 255, 0.03) !important;
+  }
 }

 /* Background image */
@ -478,7 +492,7 @@ body {
  overflow: hidden;
  white-space: nowrap;
  max-width: 0;
-  border-right: 4px solid #00ffff;
+  border-right: 4px solid #fbbf24;
  animation:
    typing 2s steps(30, end) forwards,
    caretBlink 0.5s step-end 3 2.6s;
@ -496,7 +510,7 @@ body {

@keyframes caretBlink {
  0%, 100% { 
-    border-right-color: #00ffff;
+    border-right-color: #fbbf24;
  }
  50% { 
    border-right-color: transparent;
--- a/neode-ui/src/views/Apps.vue
+++ b/neode-ui/src/views/Apps.vue
@ -27,6 +27,8 @@
      <div
        v-for="[id, pkg] in sortedPackageEntries"
        :key="id"
+        data-controller-container
+        tabindex="0"
        class="glass-card p-6 transition-all hover:-translate-y-1 cursor-pointer relative min-w-0 overflow-hidden"
        @click="goToApp(id as string)"
      >
--- a/neode-ui/src/views/Cloud.vue
+++ b/neode-ui/src/views/Cloud.vue
@ -23,6 +23,8 @@
      <div
        v-for="folder in folders"
        :key="folder.id"
+        data-controller-container
+        tabindex="0"
        class="glass-card p-6 cursor-pointer transition-all hover:-translate-y-1 hover:bg-white/10"
        @click="openFolder(folder.id)"
      >
--- a/neode-ui/src/views/ContainerApps.vue
+++ b/neode-ui/src/views/ContainerApps.vue
@ -26,6 +26,8 @@
      <div
        v-for="app in bundledApps"
        :key="app.id"
+        data-controller-container
+        tabindex="0"
        class="glass-card p-6 hover:bg-white/5 transition-colors"
      >
        <div class="flex items-start justify-between mb-4">
@ -148,6 +150,8 @@
      <div
        v-for="container in otherContainers"
        :key="container.id"
+        data-controller-container
+        tabindex="0"
        class="glass-card p-6 hover:bg-white/5 transition-colors"
      >
        <div class="flex items-start justify-between mb-4">
--- a/neode-ui/src/views/Home.vue
+++ b/neode-ui/src/views/Home.vue
@ -355,7 +355,7 @@ const runningCount = computed(() =>
  display: inline-block;
  width: 3px;
  height: 1.1em;
-  background: #00ffff;
+  background: #fbbf24;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: caret-blink 0.7s step-end infinite;
--- a/neode-ui/src/views/Marketplace.vue
+++ b/neode-ui/src/views/Marketplace.vue
@ -134,6 +134,9 @@
      <div
          v-for="app in filteredApps"
        :key="app.id"
+          data-controller-container
+          :data-controller-install="!(isInstalled(app.id) || installingApps.has(app.id)) && (app.source === 'local' || !!app.dockerImage) ? '1' : undefined"
+          tabindex="0"
          class="glass-card p-6 hover:bg-white/10 transition-all cursor-pointer flex flex-col"
          @click="viewAppDetails(app)"
      >
@ -171,6 +174,7 @@
        </button>
            <button
              v-else-if="app.source === 'local' || app.dockerImage"
+              data-controller-install-btn
              @click.stop="app.source === 'local' ? installApp(app) : installCommunityApp(app)"
          :disabled="installingApps.has(app.id)"
              class="flex-1 px-4 py-2 gradient-button rounded-lg text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
--- a/neode-ui/src/views/Server.vue
+++ b/neode-ui/src/views/Server.vue
@ -10,7 +10,7 @@
    <div class="glass-card p-6 mb-6">
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <!-- Service Status -->
-        <div class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
+        <div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
          <div class="flex items-center gap-3 min-w-0">
            <div class="relative shrink-0">
              <div class="w-3 h-3 rounded-full" :class="servicesRunning ? 'bg-green-400' : 'bg-red-400'"></div>
@ -31,7 +31,7 @@
        </div>

        <!-- Connectivity Status -->
-        <div class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
+        <div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
          <div class="flex items-center gap-3 min-w-0">
            <div class="relative shrink-0">
              <div class="w-3 h-3 rounded-full" :class="connectivityStatus === 'connected' ? 'bg-green-400' : connectivityStatus === 'checking' ? 'bg-yellow-400' : 'bg-red-400'"></div>
@ -52,7 +52,7 @@
        </div>

        <!-- Auto-Sync Toggle -->
-        <div class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
+        <div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
          <div class="flex items-center gap-3 min-w-0">
            <svg class="w-5 h-5 text-white/60 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
@ -75,7 +75,7 @@
        </div>

        <!-- Logs & Diagnostics -->
-        <div class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
+        <div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
          <div class="flex items-center gap-3 min-w-0">
            <svg class="w-5 h-5 text-white/60 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
@ -98,7 +98,7 @@
    <!-- Overview Cards -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
      <!-- Local Network Card -->
-      <div class="glass-card p-6 flex flex-col h-full min-h-0">
+      <div data-controller-container tabindex="0" class="glass-card p-6 flex flex-col h-full min-h-0">
        <div class="flex items-start gap-4 mb-4 shrink-0">
          <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
            <svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -159,7 +159,7 @@
      </div>

      <!-- Web3 Card -->
-      <div class="glass-card p-6 flex flex-col h-full min-h-0">
+      <div data-controller-container tabindex="0" class="glass-card p-6 flex flex-col h-full min-h-0">
        <div class="flex items-start gap-4 mb-4 shrink-0">
          <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
            <svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
--- a/neode-ui/src/views/Web5.vue
+++ b/neode-ui/src/views/Web5.vue
@ -10,7 +10,7 @@
    <div class="glass-card p-6 mb-6">
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
        <!-- Networking Profits -->
-        <div class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
+        <div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
          <div class="flex items-center gap-3 min-w-0">
            <div class="relative shrink-0">
              <span class="text-2xl text-orange-500 font-bold">₿</span>
@ -23,7 +23,7 @@
        </div>

        <!-- DID Status -->
-        <div class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
+        <div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
          <div class="flex items-center gap-3 min-w-0">
            <div class="relative shrink-0">
              <div class="w-3 h-3 rounded-full" :class="didStatus === 'active' ? 'bg-green-400' : 'bg-yellow-400'"></div>
@ -44,7 +44,7 @@
        </div>

        <!-- Wallet Connection -->
-        <div class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
+        <div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
          <div class="flex items-center gap-3 min-w-0">
            <div class="relative shrink-0">
              <div class="w-3 h-3 rounded-full" :class="walletConnected ? 'bg-green-400' : 'bg-red-400'"></div>
@ -65,7 +65,7 @@
        </div>

        <!-- Nostr Relay Status -->
-        <div class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
+        <div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
          <div class="flex items-center gap-3 min-w-0">
            <div class="relative shrink-0">
              <div class="w-3 h-3 rounded-full" :class="nostrRelaysConnected > 0 ? 'bg-green-400' : 'bg-red-400'"></div>
@ -85,7 +85,7 @@
        </div>

        <!-- Connected Nodes -->
-        <div class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
+        <div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
          <div class="flex items-center gap-3 min-w-0">
            <div class="relative shrink-0">
              <div class="w-3 h-3 rounded-full" :class="connectedNodesCount > 0 ? 'bg-green-400' : 'bg-amber-400'"></div>
@ -159,7 +159,7 @@
    <!-- Core Services Overview Cards -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
      <!-- Bitcoin Domain Name Portfolio -->
-      <div class="glass-card p-6 flex flex-col h-full min-h-0">
+      <div data-controller-container tabindex="0" class="glass-card p-6 flex flex-col h-full min-h-0">
        <div class="flex items-start gap-4 mb-4 shrink-0">
          <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
            <svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -210,7 +210,7 @@
      </div>

      <!-- Web5 Wallet -->
-      <div class="glass-card p-6 flex flex-col h-full min-h-0">
+      <div data-controller-container tabindex="0" class="glass-card p-6 flex flex-col h-full min-h-0">
        <div class="flex items-start gap-4 mb-4 shrink-0">
          <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
            <svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -259,7 +259,7 @@
      </div>

      <!-- Nostr Relays -->
-      <div class="glass-card p-6 flex flex-col h-full min-h-0">
+      <div data-controller-container tabindex="0" class="glass-card p-6 flex flex-col h-full min-h-0">
        <div class="flex items-start gap-4 mb-4 shrink-0">
          <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
            <svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -310,7 +310,7 @@
      </div>

      <!-- Connected Nodes (P2P over Tor) -->
-      <div ref="nodesContainerRef" class="glass-card p-6 lg:col-span-3 scroll-mt-24">
+      <div ref="nodesContainerRef" data-controller-container tabindex="0" class="glass-card p-6 lg:col-span-3 scroll-mt-24">
        <div class="flex items-start gap-4 mb-4">
          <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
            <svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">