From baa66c0dc725cc6b38cd0f84c4509fa046bf7ecd Mon Sep 17 00:00:00 2001
From: Jens Mohrmann <mail@jensmohrmann.de>
Date: Sat, 19 Sep 2026 23:45:53 +0200
Subject: [PATCH] UI: reorder game modes (Assist first), rename Sight Reading
 -> Learn Notes

Internal key 'sight_reading' kept for localStorage compatibility;
TODO added at gameMode type def for future rename + migration.
---
 src/App.tsx                | 17 +++++++++--------
 src/types/SettingsTypes.ts |  5 +++++
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 7d2b771..cac8cbf 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -277,11 +277,19 @@ function App() {
 
           <div className="header-controls">
             <div className="game-mode-toggle">
+              <button
+                className={`toggle-option ${settings.gameMode === 'assist' ? 'active' : ''}`}
+                onClick={() => setSettings(s => ({ ...s, gameMode: 'assist' }))}
+                title="Practice companion: shows played notes while you work from paper"
+              >
+                Assist
+              </button>
               <button
                 className={`toggle-option ${settings.gameMode === 'sight_reading' ? 'active' : ''}`}
                 onClick={() => setSettings(s => ({ ...s, gameMode: 'sight_reading' }))}
+                title="Learn to read notes from the staff"
               >
-                Sight Reading
+                Learn Notes
               </button>
               <button
                 className={`toggle-option ${settings.gameMode === 'ear_training' ? 'active' : ''}`}
@@ -296,13 +304,6 @@ function App() {
               >
                 Phrases
               </button>
-              <button
-                className={`toggle-option ${settings.gameMode === 'assist' ? 'active' : ''}`}
-                onClick={() => setSettings(s => ({ ...s, gameMode: 'assist' }))}
-                title="Practice companion: shows played notes while you work from paper"
-              >
-                Assist
-              </button>
             </div>
 
             <button
diff --git a/src/types/SettingsTypes.ts b/src/types/SettingsTypes.ts
index 203285e..e1040cf 100644
--- a/src/types/SettingsTypes.ts
+++ b/src/types/SettingsTypes.ts
@@ -134,6 +134,11 @@ export interface AppSettings {
     instrument: string;
     rhythm: RhythmSettings;
     zenMode: boolean;
+    /**
+     * TODO: Rename 'sight_reading' to 'learn_notes' internally (UI label is
+     * already "Learn Notes"). Deferred because the value is persisted in
+     * localStorage — needs a settings migration for existing users.
+     */
     gameMode: 'sight_reading' | 'ear_training' | 'phrase' | 'assist';
     customMinFret?: number;
     customMaxFret?: number;