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/MyLogViewer.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Copy, Search } from "lucide-react";
@@ -16,6 +17,8 @@ import LogLine from "./LogLine";
 import NavGrid from "./ui/NavGrid";
 import { Button } from "./ui/Button";
 import FilterChipGroup from "./ui/FilterChipGroup";
+import { InnerInput } from "./ui/Input";
+import { fieldClass } from "./ui/fieldStyles";
 
 // Rows rendered at once. The ring holds up to 2000 events; drawing all of them on every new event
 // would make the settings page the slowest thing in the app while it is watching the app.
@@ -123,15 +126,19 @@ export default function MyLogViewer() {
     <div data-testid="my-log" className="overflow-hidden rounded-xl border border-border bg-bg">
       <p className="px-3 pt-2 text-xs text-muted">{t("settings.myLog.hint")}</p>
       <div className="flex flex-wrap items-center gap-2 border-b border-border p-2">
-        <label className="flex min-w-[10rem] flex-1 items-center gap-1.5 rounded-lg border border-border bg-card px-2 py-1 text-sm focus-within:border-accent">
+        <label
+          className={clsx(
+            fieldClass({ size: "sm", pill: true }),
+            "flex min-w-[10rem] flex-1 items-center gap-1.5",
+          )}
+        >
           <Search className="h-3.5 w-3.5 shrink-0 text-muted" aria-hidden />
-          <input
+          <InnerInput
             type="search"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
             placeholder={t("settings.myLog.search")}
             aria-label={t("settings.myLog.search")}
-            className="min-w-0 flex-1 bg-transparent outline-none"
           />
         </label>
         <FilterChipGroup