align locked Sync Protection control with toggle rows at Browser 5.2.54

@@ -1037,22 +1037,16 @@10371037           </div>10381038           <p class="peach-settings-sub-label">SYNC WHILE LOCKED</p>10391039           <div class="peach-settings-row">1040-            <label for="locked-sync-custody">Private key custody</label>1041-            <select1042-              id="locked-sync-custody"1043-              class="peach-settings-select"1044-              value={props.lockedSyncRequiresUnlock ? "unlock_required" : "session"}1045-              onChange={(e) => void props.onLockedSyncRequiresUnlockChange(e.currentTarget.value === "unlock_required")}1040+            <span>Require unlock after restart</span>1041+            <button1042+              class={`peach-toggle ${props.lockedSyncRequiresUnlock ? "is-on" : ""}`}1043+              onClick={() => void props.onLockedSyncRequiresUnlockChange(!props.lockedSyncRequiresUnlock)}1044+              aria-label="Toggle unlock requirement for locked Sync after restart"1045+              aria-pressed={props.lockedSyncRequiresUnlock}10461046             >1047-              <option value="session">Keep Sync available</option>1048-              <option value="unlock_required">Require unlock after restart</option>1049-            </select>1047+              <span class="peach-toggle-knob"></span>1048+            </button>10501049           </div>1051-          <p class="peach-settings-help">1052-            {props.lockedSyncRequiresUnlock1053-              ? "The Sync identity is not persisted while locked. Unlock Peach after a background restart to resume Sync."1054-              : "Keeps locked Sync available during this browser session."}1055-          </p>10561050           <p class="peach-settings-sub-label">QUICK UNLOCK</p>10571051           <div class="peach-settings-row peach-settings-row--meta">10581052             <span>PIN unlock</span>

@@ -1216,6 +1216,7 @@12161216       return { ok: true, data: null };12171217     });12181218     const onAutoLockMinutesChange = vi.fn();1219+    const onLockedSyncRequiresUnlockChange = vi.fn();12191220     const onThemeChange = vi.fn();12201221     const container = mount(12211222       <SettingsView@@ -1230,7 +1231,7 @@12301231         textSize="medium"12311232         reduceMotion={false}12321233         onBreachMonitoringChange={vi.fn()}1233-        onLockedSyncRequiresUnlockChange={vi.fn()}1234+        onLockedSyncRequiresUnlockChange={onLockedSyncRequiresUnlockChange}12341235         onLockOnCloseChange={vi.fn()}12351236         onAutoLockMinutesChange={onAutoLockMinutesChange}12361237         onTrashRetentionChange={vi.fn()}@@ -1264,10 +1265,16 @@12641265     themeButton.click();12651266     expect(onThemeChange).toHaveBeenCalledWith("light");12661267 1267-    // ── Password change → recovery words display ────────────────────────1268+    // ── Locked Sync custody toggle ──────────────────────────────────────12681269     const protectionCard = container.querySelector('[data-settings-card-id="protection"]') as HTMLElement;12691270     protectionCard.click();12701271     await flushView();1272+    const custodyToggle = container.querySelector<HTMLButtonElement>(1273+      'button[aria-label="Toggle unlock requirement for locked Sync after restart"]',1274+    );1275+    expect(custodyToggle).not.toBeNull();1276+    custodyToggle!.click();1277+    expect(onLockedSyncRequiresUnlockChange).toHaveBeenCalledWith(true);12711278 12721279     const changeButton = Array.from(container.querySelectorAll("button")).find(12731280       (candidate) => candidate.textContent?.trim() === "change"