feat(design): every button on its family, the chip primitive, the lint rule (E28 S3b2)

The second half of the button sweep: the remaining hand-rolled buttons in
feature components, the design lab and the components/ui composites now
stand on Button, IconButton, Pressable, Chip or DragHandle.

- Chip + DismissibleChip (filter / token / tag / suggest / ghost, 24px
  floor, 44 on touch) replace five chip geometries; FilterChipGroup
  renders Chips; overflow lanes measure a mirror painted by chipClass.
- The Plex control row is IconButton's player rung (36, 20px glyph,
  round, overlay; 44 on touch); the YT modal bar is on the sm rung with
  pressed cycle toggles and names that survive a folded label.
- New variants: IconButton ghost-accent, danger-soft; Button warn on a
  new state-warn utility. The .btn-{tone} recipes and btnCls are gone.
- Fixed on the way: membership rows (collection editor, Plex playlist
  add) announce checked/mixed; a one-letter tag chip was 21px wide;
  descriptionLinks moved out of lib/ (it renders components).
- local/button-primitive: a raw <button>/<FocusSafeButton> outside the
  control-primitive files is a lint error (contract-tested, seen red).

frontend/src/components/Messages.tsx

@@ -19,6 +19,7 @@ import { inputCls } from "./ui/form";
 import ChatThread from "./ChatThread";
 import NavGrid from "./ui/NavGrid";
 import { navItemAttrs } from "../lib/listNav";
+import { Pressable } from "./ui/Pressable";
 
 type View =
   | "list"
@@ -158,10 +159,10 @@ function ConversationList({
                 {...navItemAttrs(i, c.partner.name)}
                 className="group flex items-center gap-1 rounded-xl hover:bg-card transition"
               >
-                <button
+                <Pressable
                   data-nav-open=""
                   onClick={() => onOpen(c)}
-                  className="flex items-center gap-3 p-2.5 text-left min-w-0 flex-1"
+                  className="flex items-center gap-3 p-2.5 min-w-0 flex-1"
                 >
                   <Avatar
                     src={c.partner.avatar_url}
@@ -192,16 +193,16 @@ function ConversationList({
                       )}
                     </div>
                   </div>
-                </button>
+                </Pressable>
                 {!isSystem && ready && (
-                  <button
+                  <IconButton
+                    size="md"
                     onClick={() => openChat(c.partner)}
-                    title={t("messages.popOut")}
-                    aria-label={t("messages.popOut")}
-                    className="shrink-0 mr-1.5 p-1.5 rounded-lg text-muted reveal hover:text-accent hover:bg-bg transition"
+                    label={t("messages.popOut")}
+                    className="mr-1.5 reveal"
                   >
-                    <ExternalLink className="w-4 h-4" />
-                  </button>
+                    <ExternalLink />
+                  </IconButton>
                 )}
               </div>
             );
@@ -253,10 +254,11 @@ function Directory({ onPick, onBack }: { onPick: (u: MessageUser) => void; onBac
       ) : (
         <div className="flex flex-col gap-1">
           {users.map((u) => (
-            <button
+            <Pressable
               key={u.id}
+              layer
               onClick={() => onPick(u)}
-              className="flex items-center gap-3 p-2.5 rounded-xl text-left hover:bg-card transition"
+              className="flex items-center gap-3 p-2.5 rounded-xl"
             >
               <Avatar
                 src={u.avatar_url}
@@ -264,7 +266,7 @@ function Directory({ onPick, onBack }: { onPick: (u: MessageUser) => void; onBac
                 className="w-9 h-9 rounded-full shrink-0 text-sm"
               />
               <span className="truncate font-medium">{u.name}</span>
-            </button>
+            </Pressable>
           ))}
         </div>
       )}
@@ -317,14 +319,13 @@ function PageThread({
         )}
         <div className="flex-1" />
         {!isSystem && ready && (
-          <button
+          <IconButton
+            size="md"
             onClick={() => openChat({ id: partnerId, name, avatar_url: seedAvatar ?? null })}
-            title={t("messages.popOut")}
-            aria-label={t("messages.popOut")}
-            className="p-1.5 rounded-lg text-muted hover:text-accent hover:bg-card transition"
+            label={t("messages.popOut")}
           >
-            <ExternalLink className="w-4 h-4" />
-          </button>
+            <ExternalLink />
+          </IconButton>
         )}
       </div>
       <ChatThread meId={meId} partnerId={partnerId} isSystem={isSystem} />