From 51fe8e01dca732744306bc9d46bf6940a3390304 Mon Sep 17 00:00:00 2001
From: Owen McGirr <o.a.mcgirr@gmail.com>
Date: Fri, 25 Sep 2026 11:30:59 +0100
Subject: [PATCH 1/2] Reorganise the Switches page around the switch list

The section leads with its save status and Add switch in a toolbar,
then the list; the practice tool follows as a quiet card with its source
and start button on one line. Add switch keeps one fixed position in
every state so focus survives switch data loading. Each row leads with
its key badge, visually only, keeping the Edit then Remove order. The
empty state tells people what to press, and buttons in setting groups
and editor fields keep their natural width.

Closes #887

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 src/settings/SwitchesSection.tsx | 17 ++++++++-----
 src/ui/app.css                   | 43 +++++++++++++++++++-------------
 2 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/src/settings/SwitchesSection.tsx b/src/settings/SwitchesSection.tsx
index ef000331..368d5852 100644
--- a/src/settings/SwitchesSection.tsx
+++ b/src/settings/SwitchesSection.tsx
@@ -410,6 +410,7 @@ export function SwitchesSection({ controller, onDraftChange, suspended = false,
   const remoteRows = slots
     .map((slot, index) => ({ slot, index }))
     .filter(({ slot }) => slot.pressAction !== null);
+  const hasSwitches = settings.bindings.length > 0 || remoteRows.length > 0;
   const freeSlots = slots
     .map((slot, index) => (slot.pressAction === null ? index : -1))
     .filter((index) => index >= 0);
@@ -673,11 +674,10 @@ export function SwitchesSection({ controller, onDraftChange, suspended = false,
         />
       )}
       <SettingGroup
-        title="Switches"
+        title="Your switches"
         description=""
       >
-        {!draft && <Button className="primary" ref={addRef} disabled={disabled || settings.bindings.length >= 128} onClick={startAdd}>Add switch</Button>}
-        <SwitchPractice disabled={!!state?.keyboardEntry || entryPending || capturing || !!pending || unsaved || !!remote.pending || remote.unsaved || !!draft || suspended} />
+        <div className="switch-toolbar">
         <p className="setting-note switch-status" role="status">
           {pending || remote.pending
             ? "Saving switches..."
@@ -685,6 +685,9 @@ export function SwitchesSection({ controller, onDraftChange, suspended = false,
               ? "Switch assignments have unsaved changes."
               : "Saved automatically."}
         </p>
+        {/* One fixed place in every state, so focus survives switches loading. */}
+        {!draft && <Button className="primary" ref={addRef} disabled={disabled || settings.bindings.length >= 128} onClick={startAdd}>Add switch</Button>}
+        </div>
         {remote.error && (
           <div className="dialog-error switch-error" role="alert">
             <span>{remote.error}</span>
@@ -713,13 +716,14 @@ export function SwitchesSection({ controller, onDraftChange, suspended = false,
             )}
           </div>
         )}
-        {!settings.bindings.length && !remoteRows.length && !draft ? (
+        {!hasSwitches && !draft ? (
           <div className="empty-state switch-empty">
             <Keyboard size={28} aria-hidden="true" />
             <h3>No switches yet</h3>
             <p>
-              Automatic scanning needs a Select switch. Manual scanning also
-              needs Next and Previous.
+              Choose Add switch, then press the switch you use to choose
+              things. Automatic scanning needs a Select switch. Manual
+              scanning also needs Next and Previous.
             </p>
             <div className="switch-list-actions">
               <Button
@@ -935,6 +939,7 @@ export function SwitchesSection({ controller, onDraftChange, suspended = false,
 
           </div>
         )}
+        <SwitchPractice disabled={!!state?.keyboardEntry || entryPending || capturing || !!pending || unsaved || !!remote.pending || remote.unsaved || !!draft || suspended} />
       </SettingGroup>
       <MoreOptions label="More options">
       <SettingGroup
diff --git a/src/ui/app.css b/src/ui/app.css
index 37f747d3..33cc1585 100644
--- a/src/ui/app.css
+++ b/src/ui/app.css
@@ -167,6 +167,7 @@ h1, h2, h3, p { margin: 0; letter-spacing: 0; }
 .field-control[type="range"]:disabled { background: transparent; }
 .field { display: grid; gap: 6px; min-width: 0; margin-top: 20px; color: var(--muted); }
 .field-error { color: var(--status-error); line-height: 1.35; }
+.field > .btn { justify-self: start; }
 
 /* --- Shell ------------------------------------------------------------------
    The sidebar is quiet: the active place is a raised surface with a brand bar
@@ -271,6 +272,8 @@ main { min-width: 0; }
 .setting-group:first-child, .page-header + .setting-group { border-top: 0; padding-top: 0; }
 .setting-group header p { max-width: 64ch; }
 .setting-controls { display: grid; align-content: start; gap: 16px; }
+/* A lone action in a group keeps its own width instead of spanning it. */
+.setting-controls > .btn { justify-self: start; }
 .setting-note { margin-top: 8px; color: var(--muted); line-height: 1.5; }
 .setting-note-block { display: grid; justify-items: start; }
 .setting-note-block .disclosure { margin-top: 4px; }
@@ -387,21 +390,26 @@ fieldset:disabled :is(.color-options, .scanner-colours) label:not(:has(input:che
 /* --- Switches ----------------------------------------------------------------
    A summary row per switch, expanding to an editor. Switch-access users step
    through every control, so the collapsed row exposes only Edit and Remove. */
+.switch-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
 .switch-status { margin-top: 0; }
 .switch-error { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 0; }
-.switch-empty { padding: 36px 24px; }
+.switch-empty { padding: 40px 24px; background: var(--surface); }
 .switch-empty h3 { margin-top: 12px; color: var(--text); }
-.switch-list { display: grid; gap: 16px; }
-.switch-row { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
-.switch-row[data-open] { border-color: var(--brand-border); }
-.switch-row-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 60px; padding: 16px; }
-.switch-row-summary > svg { color: var(--muted); }
+.switch-empty .switch-list-actions { justify-content: center; margin-top: 20px; }
+.switch-list { display: grid; gap: 12px; }
+.switch-row { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); container-type: inline-size; }
+.switch-row[data-open] { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
+/* The key is what a person recognises a switch by, so it leads the row.
+   It moves visually only; reading and focus order are unchanged. */
+.switch-row-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; min-height: 80px; padding: 16px 20px; }
+.switch-row-summary > svg { flex: none; color: var(--muted); }
+.switch-row-summary:has(> .key-badge) > svg { display: none; }
+.switch-row-summary > div { flex: 1 1 220px; min-width: 0; }
 .switch-row-summary h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.switch-row-summary p { margin-top: 3px; color: var(--muted); white-space: normal; overflow-wrap: anywhere; }
-.switch-row-summary > .key-badge { grid-column: 2; justify-self: start; font-size: 16px; }
-.switch-row-summary > .btn { grid-row: 1; }
-.switch-row-summary > .btn:first-of-type { grid-column: 3; }
-.switch-row-summary > .btn:last-of-type { grid-column: 4; }
+.switch-row-summary p { margin-top: 2px; color: var(--muted); overflow-wrap: anywhere; }
+.switch-row-summary > .key-badge { order: -1; justify-content: center; min-width: 88px; min-height: 52px; border-bottom-width: 3px; border-radius: 10px; padding: 0 14px; font-size: 20px; }
+.switch-row-summary > .btn { flex: none; }
+.switch-row-summary > .btn.secondary { margin-left: auto; }
 .key-badge { display: inline-flex; align-items: center; min-height: 26px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; padding: 0 9px; background: var(--surface-muted); font: 600 16px/1 ui-monospace, Consolas, monospace; white-space: nowrap; }
 .key-badge[data-unavailable] { border-color: var(--status-error); color: var(--status-error); background: var(--status-error-soft); }
 .key-badge-empty { border-style: dashed; color: var(--muted); font-family: inherit; font-weight: 500; }
@@ -420,10 +428,13 @@ fieldset:disabled :is(.color-options, .scanner-colours) label:not(:has(input:che
 .switch-list-actions, .setup-choices { display: flex; flex-wrap: wrap; gap: 12px; }
 .switch-empty .switch-list-actions { margin-top: 16px; }
 
-.switch-practice-entry { display: grid; gap: 12px; padding: 12px 0; }
-.switch-practice-entry > p:first-child { font-size: 16px; }
-.switch-practice-entry label { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
-.switch-practice-entry select { width: auto; max-width: 100%; }
+/* Practice is a side trip, not the page's job, so it sits after the list as
+   a quiet card with its source choice and start button on one line. */
+.switch-practice-entry { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-top: 8px; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 20px; background: var(--surface-muted); }
+.switch-practice-entry > p:first-child { flex-basis: 100%; color: var(--text); font-size: 18px; font-weight: 600; }
+.switch-practice-entry label { display: grid; flex: 1 1 260px; gap: 6px; color: var(--muted); }
+.switch-practice-entry > .btn { flex: none; }
+.switch-practice-entry > p[role="alert"] { flex-basis: 100%; color: var(--status-error); }
 .switch-practice-buttons { display: flex; justify-content: flex-end; gap: 12px; }
 .switch-practice-blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0; padding: 0; list-style: none; font-size: 16px; }
 .switch-practice-blocks li { display: flex; align-items: center; justify-content: center; min-height: 72px; border: 2px solid var(--border); border-radius: 8px; padding: 16px; background: var(--surface); text-align: center; }
@@ -571,8 +582,6 @@ fieldset:disabled :is(.color-options, .scanner-colours) label:not(:has(input:che
   .btn.nav-button { flex-direction: column; justify-content: center; gap: 4px; padding: 8px; text-align: center; }
   .btn.nav-button[data-active="true"] { box-shadow: inset 0 -4px 0 var(--brand), 0 1px 2px rgba(28, 27, 31, 0.08); }
   .view { padding: 16px; }
-  .switch-row-summary { grid-template-columns: auto minmax(0, 1fr); }
-  .switch-row-summary > .btn:first-of-type, .switch-row-summary > .btn:last-of-type { width: 100%; grid-row: auto; grid-column: auto; }
   .hold-list li { grid-template-columns: repeat(3, minmax(64px, 1fr)); }
   .hold-list li > select { grid-column: 2 / -1; }
   .mobile-download { grid-template-columns: 1fr; }

From 978927339e1c09b5c7278c467f928e9b16895718 Mon Sep 17 00:00:00 2001
From: Owen McGirr <o.a.mcgirr@gmail.com>
Date: Fri, 25 Sep 2026 11:51:52 +0100
Subject: [PATCH 2/2] Drop a duplicate empty-state rule and correct the key
 badge note

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 src/ui/app.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/ui/app.css b/src/ui/app.css
index 33cc1585..69430e61 100644
--- a/src/ui/app.css
+++ b/src/ui/app.css
@@ -400,7 +400,9 @@ fieldset:disabled :is(.color-options, .scanner-colours) label:not(:has(input:che
 .switch-row { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); container-type: inline-size; }
 .switch-row[data-open] { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
 /* The key is what a person recognises a switch by, so it leads the row.
-   It moves visually only; reading and focus order are unchanged. */
+   It moves visually only; DOM and focus order are unchanged, so Edit still
+   comes before Remove. Every saved row has a badge, so the icon is hidden on
+   all of them and the row text says whether a switch is local or remote. */
 .switch-row-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; min-height: 80px; padding: 16px 20px; }
 .switch-row-summary > svg { flex: none; color: var(--muted); }
 .switch-row-summary:has(> .key-badge) > svg { display: none; }
@@ -426,7 +428,6 @@ fieldset:disabled :is(.color-options, .scanner-colours) label:not(:has(input:che
 .switch-editor-footer { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
 .switch-editor-footer .danger { margin-left: auto; }
 .switch-list-actions, .setup-choices { display: flex; flex-wrap: wrap; gap: 12px; }
-.switch-empty .switch-list-actions { margin-top: 16px; }
 
 /* Practice is a side trip, not the page's job, so it sits after the list as
    a quiet card with its source choice and start button on one line. */