chore(relay): clarify settings copy, isolate countdown, drop FCM-token row

clarify + distill (settings):
- intro paragraph drops the "13 MB / FCM / 高优先级" implementation
  jargon and the dead "下方" reference (which only made sense after a
  code was already showing). Two sentences: what the problem is, what
  this fixes.
- "每次只能绑一台" was misleading — multi-device is supported via the
  per-user FCM Hash. Replaced with "每个码单次有效", which describes
  the actual constraint.

extract:
- pair-code countdown moves into <PairCodeCard> with its own
  remaining-state. Settings's 9-key store subscription is no longer
  re-evaluated every 250 ms while a code is live.

typeset (compose):
- BindScreen / BoundScreen titles drop from displayMedium (44sp,
  emotional-peak tier) to headlineLarge (32sp). Setup is a quiet
  ritual, not a celebration moment — those slots stay reserved for
  settle / journey peaks.
- StatusRow's "USER" English label conflicted with surrounding
  Chinese body. Becomes "用户". The FCM-token-prefix row is removed
  outright: useful only for self-debug during bring-up, reads as
  engineering noise to a user who already saw the user-id confirm.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: NihilDigit

android-relay/app/src/main/java/dev/nihildigit/tokmato/MainActivity.kt

@@ -131,7 +131,7 @@ private fun BoundScreen(userId: String, onRebind: () -> Unit) {
         )
         Text(
             text = stringResource(R.string.bound_title),
-            style = MaterialTheme.typography.displayMedium,
+            style = MaterialTheme.typography.headlineLarge,
             color = MaterialTheme.colorScheme.onSurface,
         )
         Text(
@@ -142,8 +142,10 @@ private fun BoundScreen(userId: String, onRebind: () -> Unit) {
 
         Spacer(Modifier.height(8.dp))
 
-        StatusRow(label = "USER", value = userId)
-        StatusRow(label = "FCM", value = AppPrefs(ctx).fcmToken?.take(24)?.plus("…") ?: "—")
+        // FCM token row removed: it was useful for self-debug while
+        // bringing relay up but reads as engineering noise to a user
+        // who's already seen the user-id row confirm the bind.
+        StatusRow(label = "用户", value = userId)
 
         Spacer(Modifier.height(16.dp))
 

android-relay/app/src/main/java/dev/nihildigit/tokmato/ui/BindScreen.kt

@@ -107,7 +107,7 @@ fun BindScreen(onBound: (userId: String) -> Unit) {
         )
         Text(
             text = stringResource(R.string.bind_title),
-            style = MaterialTheme.typography.displayMedium,
+            style = MaterialTheme.typography.headlineLarge,
             color = MaterialTheme.colorScheme.onSurface,
         )
         Text(

app/settings/page.tsx

@@ -111,35 +111,21 @@ export default function SettingsPage() {
   const [pushBusy, setPushBusy] = useState(false);
   const [pushMsg, setPushMsg] = useState<string>("");
 
-  // tokmato-relay (Android FCM helper) pair-code state.
+  // tokmato-relay (Android FCM helper) pair-code state. The countdown
+  // tick lives inside <PairCodeCard> so its 4 Hz setState doesn't
+  // ripple through this page's 9-selector store subscription every
+  // 250 ms.
   const [pairCode, setPairCode] = useState<string | null>(null);
   const [pairExpiresAt, setPairExpiresAt] = useState(0);
   const [pairBusy, setPairBusy] = useState(false);
   const [pairMsg, setPairMsg] = useState("");
-  const [pairTick, setPairTick] = useState(0);
 
   useEffect(() => {
     setPushSupported(isPushSupported());
     if (!isPushSupported()) return;
     void getCurrentSubscription().then((sub) => setPushOn(Boolean(sub)));
   }, []);
 
-  // Drive the pair-code countdown. The interval only runs while a code
-  // is live, so on idle we don't burn ticks.
-  useEffect(() => {
-    if (!pairCode || pairExpiresAt === 0) return;
-    const id = setInterval(() => {
-      const remaining = Math.max(0, pairExpiresAt - Date.now());
-      setPairTick(remaining);
-      if (remaining === 0) {
-        setPairCode(null);
-        setPairExpiresAt(0);
-        clearInterval(id);
-      }
-    }, 250);
-    return () => clearInterval(id);
-  }, [pairCode, pairExpiresAt]);
-
   const handleCreatePairCode = async () => {
     setPairBusy(true);
     setPairMsg("");
@@ -166,14 +152,18 @@ export default function SettingsPage() {
       }
       setPairCode(json.code);
       setPairExpiresAt(json.expiresAt);
-      setPairTick(json.expiresAt - Date.now());
     } catch {
       setPairMsg("网络问题，再试一次");
     } finally {
       setPairBusy(false);
     }
   };
 
+  const clearPairCode = () => {
+    setPairCode(null);
+    setPairExpiresAt(0);
+  };
+
   const handleEnablePush = async () => {
     setPushBusy(true);
     setPushMsg("");
@@ -477,40 +467,20 @@ export default function SettingsPage() {
           <Section title="Android 推送增强器">
             <div className="flex flex-col gap-3">
               <p className="text-sm text-ink-3 leading-relaxed">
-                Android Chrome 上的 Web Push 受 Doze 节流，锁屏几小时后通知就漏掉了。
-                tokmato-relay 是个 13 MB 的薄壳 APK，只接 FCM 高优先级推送、点击跳本站。
-                输入下方 4 位码完成绑定。
+                Android Chrome 的 Web Push 在锁屏几小时后会被节流，通知容易漏。
+                装一个原生 APK 接管这条通道。
               </p>
               {pairCode ? (
-                <output
-                  aria-label={`配对码 ${pairCode.split("").join(" ")}，${Math.ceil(pairTick / 1000)} 秒后失效`}
-                  className="flex flex-col gap-3 rounded-lg border border-rule bg-paper-2 px-4 py-4"
-                >
-                  <div className="flex items-baseline gap-3" aria-hidden="true">
-                    <span className="smallcaps text-ink-3">配对码</span>
-                    <span className="ml-auto text-xs text-ink-3">
-                      {Math.ceil(pairTick / 1000)}s 后失效
-                    </span>
-                  </div>
-                  <div
-                    className="flex justify-between gap-2 font-mono"
-                    aria-hidden="true"
-                  >
-                    {pairCode.split("").map((d, i) => (
-                      <span
-                        key={i}
-                        className="flex-1 rounded-md border border-rule bg-paper py-3 text-center text-h2 text-ink"
-                      >
-                        {d}
-                      </span>
-                    ))}
-                  </div>
-                </output>
+                <PairCodeCard
+                  code={pairCode}
+                  expiresAt={pairExpiresAt}
+                  onExpire={clearPairCode}
+                />
               ) : (
                 <GhostRow
                   Icon={Smartphone}
                   title="生成配对码"
-                  sub="60 秒内输到 APK 里。每次只能绑一台。"
+                  sub="60 秒内输到 APK 里。每个码单次有效。"
                   disabled={pairBusy}
                   onClick={handleCreatePairCode}
                 />
@@ -777,6 +747,68 @@ export default function SettingsPage() {
 
 /* ───────────────────────── helpers ───────────────────────── */
 
+function PairCodeCard({
+  code,
+  expiresAt,
+  onExpire,
+}: {
+  code: string;
+  expiresAt: number;
+  onExpire: () => void;
+}) {
+  // Tick lives here so the 4 Hz setState only re-renders this card,
+  // not the entire SettingsPage tree (which carries a 9-key store
+  // subscription).
+  const [remaining, setRemaining] = useState(() =>
+    Math.max(0, expiresAt - Date.now()),
+  );
+
+  useEffect(() => {
+    let active = true;
+    const id = setInterval(() => {
+      if (!active) return;
+      const r = Math.max(0, expiresAt - Date.now());
+      setRemaining(r);
+      if (r === 0) {
+        active = false;
+        clearInterval(id);
+        onExpire();
+      }
+    }, 250);
+    return () => {
+      active = false;
+      clearInterval(id);
+    };
+  }, [expiresAt, onExpire]);
+
+  const seconds = Math.ceil(remaining / 1000);
+
+  return (
+    <output
+      aria-label={`配对码 ${code.split("").join(" ")}，${seconds} 秒后失效`}
+      className="flex flex-col gap-3 rounded-lg border border-rule bg-paper-2 px-4 py-4"
+    >
+      <div className="flex items-baseline gap-3" aria-hidden="true">
+        <span className="smallcaps text-ink-3">配对码</span>
+        <span className="ml-auto text-xs text-ink-3">{seconds}s 后失效</span>
+      </div>
+      <div
+        className="flex justify-between gap-2 font-mono"
+        aria-hidden="true"
+      >
+        {code.split("").map((d, i) => (
+          <span
+            key={i}
+            className="flex-1 rounded-md border border-rule bg-paper py-3 text-center text-h2 text-ink"
+          >
+            {d}
+          </span>
+        ))}
+      </div>
+    </output>
+  );
+}
+
 function Hairline() {
   return <div className="h-px bg-rule" />;
 }