feat(design): glass surfaces by role, the static Badge, LinkButton, user pickers on the Combobox (E28 S3d1)

frontend/src/components/WatchPage.tsx

@@ -7,6 +7,8 @@ import { exposeVideoToBackgroundPlay } from "../lib/browserBackgroundPlay";
 import { LS, readJSON, writeJSON } from "../lib/storage";
 import { send } from "../lib/http";
 import { Input } from "./ui/Input";
+import { SURFACE } from "./ui/surfaces";
+import { LinkButton } from "./ui/LinkButton";
 
 // Standalone, login-free video page for a shared /watch/<token> link. Rendered OUTSIDE the app
 // tree (no auth, no providers) — like the /privacy and /terms pages. Uses plain fetch and a tiny
@@ -265,7 +267,7 @@ export default function WatchPage() {
 
         {status === "password" && (
           <div className="flex-1 grid place-items-center">
-            <div className="w-full max-w-sm rounded-2xl glass p-6">
+            <div className={`${SURFACE.panel} w-full max-w-sm p-6`}>
               <div className="flex items-center gap-2 font-medium mb-4">
                 <Lock className="w-4 h-4 text-accent" /> {T.passwordTitle}
               </div>
@@ -305,7 +307,7 @@ export default function WatchPage() {
              gating the button on allow_download only mirrors the owner's ACL, matching the media
              branch's download affordance below. */
           <div className="flex-1 grid place-items-center">
-            <div className="w-full max-w-md rounded-2xl glass p-6 text-center">
+            <div className={`${SURFACE.panel} w-full max-w-md p-6 text-center`}>
               <div className="mx-auto w-16 h-16 rounded-xl bg-surface grid place-items-center mb-4">
                 <FileIcon className="w-8 h-8 text-accent" />
               </div>
@@ -318,12 +320,9 @@ export default function WatchPage() {
                   .join(" · ")}
               </div>
               {meta.allow_download && (
-                <a
-                  href={meta.file_url}
-                  className="mt-5 inline-flex items-center gap-1.5 rounded-lg bg-surface hover:bg-card px-4 py-2 text-sm font-medium transition"
-                >
-                  <Download className="w-4 h-4" /> {T.download}
-                </a>
+                <LinkButton href={meta.file_url} icon={<Download />} className="mt-5">
+                  {T.download}
+                </LinkButton>
               )}
             </div>
           </div>
@@ -397,12 +396,9 @@ export default function WatchPage() {
                   {T.repeat}
                 </Chip>
                 {meta.allow_download && (
-                  <a
-                    href={meta.file_url}
-                    className="inline-flex items-center gap-1.5 rounded-lg bg-surface hover:bg-card px-3 py-2 text-sm font-medium transition"
-                  >
-                    <Download className="w-4 h-4" /> {T.download}
-                  </a>
+                  <LinkButton href={meta.file_url} icon={<Download />}>
+                    {T.download}
+                  </LinkButton>
                 )}
               </div>
             </div>