From e104a214a46631e7ac3601feb383414b660304f3 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Mon, 30 Mar 2026 09:52:09 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20onboarding=20gamepad=20=E2=80=94=20autof?=
 =?UTF-8?q?ocus,=20click=20sounds,=20focus=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

All screens:
- playNavSound('action') on every button click
- path-action-button orange focus glow (removed from suppression list)

Per-screen autofocus:
- Intro: CTA button (after animation)
- Path: Continue button
- Identity: name input
- Backup: passphrase input, Continue after download
- Verify: Sign Challenge, then Finish after verification
- Done: Set Password button

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 neode-ui/src/views/OnboardingBackup.vue   |  2 ++
 neode-ui/src/views/OnboardingDone.vue     | 11 +++++++++++
 neode-ui/src/views/OnboardingIdentity.vue |  4 +++-
 neode-ui/src/views/OnboardingIntro.vue    |  2 ++
 neode-ui/src/views/OnboardingOptions.vue  |  2 ++
 neode-ui/src/views/OnboardingPath.vue     |  3 ++-
 neode-ui/src/views/OnboardingVerify.vue   | 17 ++++++++++++++++-
 7 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/neode-ui/src/views/OnboardingBackup.vue b/neode-ui/src/views/OnboardingBackup.vue
index 4fb5ef24..f7ea12fb 100644
--- a/neode-ui/src/views/OnboardingBackup.vue
+++ b/neode-ui/src/views/OnboardingBackup.vue
@@ -93,6 +93,7 @@
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { rpcClient } from '@/api/rpc-client'
+import { playNavSound } from '@/composables/useNavSounds'
 
 const router = useRouter()
 const passphraseInput = ref<HTMLInputElement | null>(null)
@@ -154,6 +155,7 @@ async function downloadBackup() {
 }
 
 function proceed() {
+  playNavSound('action')
   router.push('/onboarding/verify').catch(() => {})
 }
 
diff --git a/neode-ui/src/views/OnboardingDone.vue b/neode-ui/src/views/OnboardingDone.vue
index efb13657..0f7387c9 100644
--- a/neode-ui/src/views/OnboardingDone.vue
+++ b/neode-ui/src/views/OnboardingDone.vue
@@ -45,6 +45,7 @@
         <!-- Set Password Button -->
         <p class="text-xs text-white/50 mb-3">You'll create your node password next</p>
         <button
+          ref="setPasswordButton"
           @click="goToLogin"
           class="path-action-button path-action-button--continue mx-auto"
         >
@@ -56,11 +57,21 @@
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
+import { playNavSound } from '@/composables/useNavSounds'
 
 const router = useRouter()
+const setPasswordButton = ref<HTMLButtonElement | null>(null)
+
+onMounted(() => {
+  setTimeout(() => {
+    setPasswordButton.value?.focus({ preventScroll: true })
+  }, 500)
+})
 
 function goToLogin() {
+  playNavSound('action')
   router.push('/login').catch(() => {})
 }
 </script>
diff --git a/neode-ui/src/views/OnboardingIdentity.vue b/neode-ui/src/views/OnboardingIdentity.vue
index 3a241c6f..c582fc9c 100644
--- a/neode-ui/src/views/OnboardingIdentity.vue
+++ b/neode-ui/src/views/OnboardingIdentity.vue
@@ -33,7 +33,7 @@
               <button
                 v-for="p in purposes"
                 :key="p.value"
-                @click="selectedPurpose = p.value"
+                @click="playNavSound('action'); selectedPurpose = p.value"
                 class="px-4 py-3 rounded-lg border text-left transition-all"
                 :class="selectedPurpose === p.value
                   ? 'bg-white/15 border-white/30 text-white'
@@ -79,6 +79,7 @@
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { rpcClient } from '@/api/rpc-client'
+import { playNavSound } from '@/composables/useNavSounds'
 
 const router = useRouter()
 const nameInput = ref<HTMLInputElement | null>(null)
@@ -117,6 +118,7 @@ async function createIdentity() {
         purpose: selectedPurpose.value
       }
     })
+    playNavSound('action')
     router.push('/onboarding/backup').catch(() => {})
   } catch (err) {
     if (isServerStartingError(err)) {
diff --git a/neode-ui/src/views/OnboardingIntro.vue b/neode-ui/src/views/OnboardingIntro.vue
index e679182f..2d34b0ec 100644
--- a/neode-ui/src/views/OnboardingIntro.vue
+++ b/neode-ui/src/views/OnboardingIntro.vue
@@ -73,6 +73,7 @@ import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import AnimatedLogo from '@/components/AnimatedLogo.vue'
 import { rpcClient } from '@/api/rpc-client'
+import { playNavSound } from '@/composables/useNavSounds'
 
 const router = useRouter()
 const ctaButton = ref<HTMLButtonElement | null>(null)
@@ -85,6 +86,7 @@ onMounted(() => {
 })
 
 function goToOptions() {
+  playNavSound('action')
   router.push('/onboarding/path').catch(() => {})
 }
 
diff --git a/neode-ui/src/views/OnboardingOptions.vue b/neode-ui/src/views/OnboardingOptions.vue
index 103ff0a0..79e61ba4 100644
--- a/neode-ui/src/views/OnboardingOptions.vue
+++ b/neode-ui/src/views/OnboardingOptions.vue
@@ -82,6 +82,7 @@
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { completeOnboarding } from '@/composables/useOnboarding'
+import { playNavSound } from '@/composables/useNavSounds'
 
 const router = useRouter()
 const selected = ref<string | null>(null)
@@ -100,6 +101,7 @@ async function proceed() {
   } catch (e) {
     if (import.meta.env.DEV) console.warn('completeOnboarding failed, localStorage fallback ensures onboarding is marked complete', e)
   }
+  playNavSound('action')
   router.push('/login').catch(() => {})
 }
 </script>
diff --git a/neode-ui/src/views/OnboardingPath.vue b/neode-ui/src/views/OnboardingPath.vue
index e1c16692..e72a0aa2 100644
--- a/neode-ui/src/views/OnboardingPath.vue
+++ b/neode-ui/src/views/OnboardingPath.vue
@@ -96,18 +96,19 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
+import { playNavSound } from '@/composables/useNavSounds'
 
 const router = useRouter()
 const continueButton = ref<HTMLButtonElement | null>(null)
 
 onMounted(() => {
-  // Focus after slide transition completes (400ms + buffer)
   setTimeout(() => {
     continueButton.value?.focus({ preventScroll: true })
   }, 500)
 })
 
 function proceed() {
+  playNavSound('action')
   router.push('/onboarding/did').catch(() => {})
 }
 </script>
diff --git a/neode-ui/src/views/OnboardingVerify.vue b/neode-ui/src/views/OnboardingVerify.vue
index 01ed5554..08f079de 100644
--- a/neode-ui/src/views/OnboardingVerify.vue
+++ b/neode-ui/src/views/OnboardingVerify.vue
@@ -18,6 +18,7 @@
         <p v-else-if="errorMessage" class="text-red-400 text-sm">{{ errorMessage }}</p>
         <!-- Sign Button (if not verified yet) -->
         <button
+          ref="signButton"
           v-if="!verified"
           @click="signChallenge"
           :disabled="isSigning"
@@ -65,6 +66,7 @@
       <!-- Action Buttons -->
       <div class="flex justify-center max-w-[600px] mx-auto flex-shrink-0 px-3 sm:px-4 pb-4 sm:pb-6">
         <button
+          ref="finishButton"
           v-if="verified"
           @click="proceed"
           class="path-action-button path-action-button--continue"
@@ -77,13 +79,22 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 import { completeOnboarding } from '@/composables/useOnboarding'
 import { rpcClient } from '@/api/rpc-client'
+import { playNavSound } from '@/composables/useNavSounds'
 
 const router = useRouter()
+const signButton = ref<HTMLButtonElement | null>(null)
+const finishButton = ref<HTMLButtonElement | null>(null)
 const verified = ref(false)
+
+onMounted(() => {
+  setTimeout(() => {
+    signButton.value?.focus({ preventScroll: true })
+  }, 500)
+})
 const isSigning = ref(false)
 const signature = ref('')
 const currentChallenge = ref('')
@@ -119,6 +130,9 @@ async function signChallenge() {
       } else {
         verified.value = true
       }
+      nextTick(() => {
+        setTimeout(() => finishButton.value?.focus({ preventScroll: true }), 100)
+      })
       return
     } catch (err) {
       const msg = err instanceof Error ? err.message : ''
@@ -138,6 +152,7 @@ async function signChallenge() {
 }
 
 async function proceed() {
+  playNavSound('action')
   try {
     await completeOnboarding()
   } catch {