From 2e69868ce17095e7040be3262ec9f65e9af427ad Mon Sep 17 00:00:00 2001
From: brainstorm-os <founder@getbrainstorm.online>
Date: Mon, 13 Jul 2026 15:45:48 +0200
Subject: [PATCH] polish(settings): Sync "recent days" number field rides the
 shared TextField face
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The selective-sync "keep the last N days" field was a hand-rolled
`<input type=number>` with its own 5rem width, border, radius, and surface — so
its box drifted from every other control in Settings. Now that `<TextField>`
forwards `min`/`max`/`step` (the reason it couldn't use the primitive before),
route it through `<TextField size=Sm>`; the `.sync-section__number` host keeps
only the 5rem width + right-aligned digits, and the box comes from `.bs-input`.

Drops it from the control-face baseline (10 → 9) — the ratchet now proves the
full loop: primitive gap → primitive fix → consumer migrated → baseline shrinks.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/renderer/settings/sync-section.css    | 16 +++++++-----
 .../src/renderer/settings/sync-section.tsx    | 25 ++++++++++---------
 tools/control-faces-baseline.json             |  1 -
 3 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/packages/shell/src/renderer/settings/sync-section.css b/packages/shell/src/renderer/settings/sync-section.css
index cb611729..a82f0748 100644
--- a/packages/shell/src/renderer/settings/sync-section.css
+++ b/packages/shell/src/renderer/settings/sync-section.css
@@ -80,14 +80,18 @@
 	align-self: flex-start;
 }
 
+/* Fixed-width host for the shared `<TextField>` face; the box (border / padding
+ * / surface / height) comes from `.bs-input`, so this only sets the width and
+ * keeps the digits right-aligned. */
 .sync-section__number {
 	width: 5rem;
-	padding: var(--space-1) var(--space-2);
-	border: 1px solid var(--color-border-subtle);
-	border-radius: var(--radius-sm);
-	background: var(--color-surface-default);
-	color: var(--color-text-primary);
-	font-size: var(--text-size-sm);
+}
+
+.sync-section__number .text-field {
+	width: 100%;
+}
+
+.sync-section__number .text-field__input {
 	text-align: right;
 }
 
diff --git a/packages/shell/src/renderer/settings/sync-section.tsx b/packages/shell/src/renderer/settings/sync-section.tsx
index 872a72e8..4f332b04 100644
--- a/packages/shell/src/renderer/settings/sync-section.tsx
+++ b/packages/shell/src/renderer/settings/sync-section.tsx
@@ -16,6 +16,7 @@ import { useSyncStatus } from "../dashboard/use-sync-status";
 import { SyncState } from "../dashboard/use-sync-status";
 import { t } from "../i18n/t";
 import { Button, ButtonSize, ButtonVariant } from "../ui/button";
+import { TextField, TextFieldSize } from "../ui/text-field";
 import "./sync-section.css";
 
 export function SyncSection() {
@@ -201,18 +202,18 @@ function SelectiveSyncPolicyControl() {
 			{policy.mode === SelectiveSyncMode.PinnedPlusRecent && (
 				<div className="sync-section__row">
 					<span className="sync-section__label">{t("shell.settings.sync.policy.recentDays.label")}</span>
-					<input
-						type="number"
-						min={1}
-						max={3650}
-						className="sync-section__number"
-						value={policy.recentDays}
-						aria-label={t("shell.settings.sync.policy.recentDays.label")}
-						data-testid="selective-sync-recent-days"
-						onChange={(e) =>
-							apply({ ...policy, recentDays: Number(e.currentTarget.value) || policy.recentDays })
-						}
-					/>
+					<div className="sync-section__number">
+						<TextField
+							type="number"
+							size={TextFieldSize.Sm}
+							min={1}
+							max={3650}
+							value={String(policy.recentDays)}
+							aria-label={t("shell.settings.sync.policy.recentDays.label")}
+							data-testid="selective-sync-recent-days"
+							onChange={(next) => apply({ ...policy, recentDays: Number(next) || policy.recentDays })}
+						/>
+					</div>
 				</div>
 			)}
 		</div>
diff --git a/tools/control-faces-baseline.json b/tools/control-faces-baseline.json
index 7d6d8d49..566b147c 100644
--- a/tools/control-faces-baseline.json
+++ b/tools/control-faces-baseline.json
@@ -8,7 +8,6 @@
     "packages/shell/src/renderer/settings/data-section.tsx",
     "packages/shell/src/renderer/settings/mcp-panel.tsx",
     "packages/shell/src/renderer/settings/notifications-section.tsx",
-    "packages/shell/src/renderer/settings/sync-section.tsx",
     "packages/shell/src/renderer/welcome/welcome.tsx"
   ]
 }