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

@@ -1,9 +1,9 @@
 import { useState } from "react";
-import { Check, ChevronDown, type LucideIcon } from "lucide-react";
+import { Check, type LucideIcon } from "lucide-react";
 import clsx from "clsx";
 import { PopoverItem, PopoverSurface } from "./ui/AnchoredPopover";
 import { useAnchoredPopover } from "./ui/anchoredPopoverHooks";
-import { Pressable } from "./ui/Pressable";
+import { SelectTrigger } from "./ui/SelectTrigger";
 
 export interface ViewOption<T extends string> {
   id: T;
@@ -60,23 +60,19 @@ export default function ViewSwitcher<T extends string>({
 
   return (
     <>
-      <Pressable
+      <SelectTrigger
+        context="toolbar"
+        open={open}
+        icon={<CurrentIcon className="w-4 h-4 shrink-0" />}
         ref={pop.refs.setReference}
         {...pop.getReferenceProps()}
         // The aria-label carries the mode's name at every size — the visible text below is a
         // nicety for wide windows, not the accessible name.
         aria-label={`${label}: ${current.label}`}
         title={`${label}: ${current.label}`}
-        className={`shrink-0 glass-card glass-hover inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-sm transition ${
-          open ? "border-accent" : "border-border"
-        }`}
       >
-        <CurrentIcon className="w-4 h-4 shrink-0" />
         <span className={clsx("whitespace-nowrap", labelClassName)}>{current.label}</span>
-        <ChevronDown
-          className={`h-3.5 w-3.5 shrink-0 text-muted transition-transform ${open ? "rotate-180" : ""}`}
-        />
-      </Pressable>
+      </SelectTrigger>
       <PopoverSurface
         popover={pop}
         ariaLabel={label}