feat(design): the field family, the dropdown trigger, native controls, the no-raw-input lint rule (E28 S3c)

- ui/Input, Textarea, InnerInput + fieldClass (A4): the >= 3:1 edge, a 2px accent
  focus edge, the danger edge for invalid, md/sm/xs/heading rungs, 1rem and 44 on touch
- ui/SelectTrigger (A5): SortControl, FilterSelect, the view switcher and the date
  filter on one trigger, a pill in a toolbar, r8 in a form
- ui/NativeControls (A6): Checkbox, CheckRow, Slider, ColorInput
- every raw input swept (~100 sites); inputCls retired; local/input-primitive
- useReturnFocus: an in-place editor hands the focus back to its trigger on
  Enter/Escape (the playlist and Plex title renames, the priority number);
  the Plex playlist rename gains Escape and an accessible name
- back to top: a round 48 FAB (owner decision); DESIGN.md A2 and the log

frontend/src/components/KeyGate.tsx

@@ -6,7 +6,7 @@ import { AlertTriangle, Lock, ShieldCheck } from "lucide-react";
 import { api, HttpError } from "../lib/api";
 import * as e2ee from "../lib/e2ee";
 import { Button } from "./ui/Button";
-import { inputCls } from "./ui/form";
+import { Input } from "./ui/Input";
 
 // Secure-messaging key gate: first-run setup (choose a passphrase) or unlock on this device.
 // Self-contained — on success it updates the shared e2ee unlock state, so any observing view
@@ -102,13 +102,13 @@ export default function KeyGate({ meId, compact = false }: { meId: number; compa
         </div>
         <p className="text-sm text-muted">{t("messages.resetWarn")}</p>
         {hasPassword && (
-          <input
+          <Input
+            className="w-full"
             type="password"
             autoComplete="current-password"
             value={curPass}
             onChange={(e) => setCurPass(e.target.value)}
             placeholder={t("messages.resetCurrentPass")}
-            className={inputCls}
           />
         )}
         {err && (
@@ -145,21 +145,21 @@ export default function KeyGate({ meId, compact = false }: { meId: number; compa
           {configured ? t("messages.unlockBody") : t("messages.setupBody")}
         </p>
       )}
-      <input
+      <Input
+        className="w-full"
         type="password"
         value={pass}
         onChange={(e) => setPass(e.target.value)}
         onKeyDown={(e) => e.key === "Enter" && configured && submit()}
         placeholder={t("messages.passphrase")}
-        className={inputCls}
       />
       {!configured && (
-        <input
+        <Input
+          className="w-full"
           type="password"
           value={confirm}
           onChange={(e) => setConfirm(e.target.value)}
           placeholder={t("messages.passphraseConfirm")}
-          className={inputCls}
         />
       )}
       {err && (