refactor: remove more hardcoded dark mode css classes & variables

docs/todo.md

···
 
 ## Bugs
 
-1. Lists & Labels Not Working
+## Refactor
+
+Typeahead code is largely repeated in the following places:
+
+1. `src/components/LoginPanel.tsx`
+2. `src/components/deck/ColumnPicker/ProfileColumnPicker.tsx`
+3. `src/components/explorer/ExplorerUrlBar.tsx`
+4. `src/components/search/hooks/useSearchController.ts`
 
 ## High Priority Updates
 
-- [ ] Video player
-- [ ] Download videos and media attachments
 - [ ] Profile RSS
   - OK. So making an RSS reader with share to BlueSky would be cool...
 

src/components/LoginPanel.tsx

···
             <span>Continue</span>
           </>
         }>
-        <>
-          <Icon kind="loader" name="loader" aria-hidden="true" class="mr-1" />
-          <span>Opening sign-in...</span>
-        </>
+        <Icon kind="loader" name="loader" aria-hidden="true" class="mr-1" />
+        <span>Opening sign-in...</span>
       </Show>
     </button>
   );

src/components/deck/AddColumnPanel.tsx

···
 
 function AddColumnPanelHeader(props: { onClose: () => void }) {
   return (
-    <div class="flex shrink-0 items-center justify-between gap-3 px-5 py-4 shadow-[inset_0_-1px_0_rgba(255,255,255,0.04)]">
+    <div class="flex shrink-0 items-center justify-between gap-3 px-5 py-4 shadow-(--inset-shadow)">
       <div>
         <p id="add-column-panel-title" class="m-0 text-sm font-semibold text-on-surface">Add column</p>
         <p class="m-0 mt-1 text-xs uppercase tracking-[0.12em] text-on-surface-variant">Choose a view</p>
       </div>
       <button
         type="button"
-        class="flex h-8 w-8 items-center justify-center rounded-full border-0 bg-transparent text-on-surface-variant transition duration-150 hover:bg-white/6 hover:text-on-surface"
+        class="flex h-8 w-8 items-center justify-center rounded-full border-0 bg-transparent text-on-surface-variant transition duration-150 hover:bg-surface-bright hover:text-on-surface"
         aria-label="Close panel"
         onClick={() => props.onClose()}>
         <Icon kind="close" />
···
             class="flex items-center justify-center gap-1.5 rounded-lg border-0 px-3 py-2 text-xs font-medium transition duration-150"
             classList={{
               "bg-primary/15 text-primary": props.activeTab === tab.id,
-              "bg-transparent text-on-surface-variant hover:bg-white/5 hover:text-on-surface":
+              "bg-transparent text-on-surface-variant hover:bg-surface-bright hover:text-on-surface":
                 props.activeTab !== tab.id,
             }}
             onClick={() => props.onTabChange(tab.id)}>
···
       role="dialog"
       aria-modal="true"
       aria-labelledby="add-column-panel-title"
-      class="relative z-10 flex h-full w-full max-w-88 flex-col bg-surface-container-highest shadow-[-18px_0_48px_rgba(0,0,0,0.38)] backdrop-blur-[20px]"
+      class="ui-overlay-card relative z-10 flex h-full w-full max-w-88 flex-col bg-surface-container-highest backdrop-blur-[20px]"
       initial={{ opacity: 0, x: 32 }}
       animate={{ opacity: 1, x: 0 }}
       exit={{ opacity: 0, x: 40 }}
···
         <Portal>
           <div class="fixed inset-0 z-50 flex justify-end">
             <Motion.div
-              class="absolute inset-0 bg-black/45 backdrop-blur-[20px]"
+              class="ui-scrim absolute inset-0 backdrop-blur-[20px]"
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               exit={{ opacity: 0 }}

src/components/deck/ColumnPicker.tsx

···
         {(feed) => (
           <button
             type="button"
-            class="flex w-full items-center gap-3 rounded-xl border-0 bg-white/4 px-4 py-3 text-left transition duration-150 hover:-translate-y-px hover:bg-white/8"
+            class="tone-muted flex w-full items-center gap-3 rounded-xl border-0 px-4 py-3 text-left transition duration-150 hover:-translate-y-px hover:bg-surface-bright"
             onClick={() => props.onSelect({ feed, title: getFeedName(feed, generators()[feed.value]?.displayName) })}>
             <FeedChipAvatar feed={feed} generator={generators()[feed.value]} />
             <span class="min-w-0 flex-1">
···
         </span>
         <input
           type="text"
-          class="rounded-xl border-0 bg-white/6 px-4 py-2.5 text-sm text-on-surface placeholder:text-on-surface-variant/50 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] outline-none focus:shadow-[inset_0_0_0_1px_rgba(125,175,255,0.4)]"
+          class="ui-input ui-input-strong rounded-xl px-4 py-2.5"
           placeholder="at://did:plc:… or handle.bsky.social"
           value={value()}
           onInput={(e) => setValue(e.currentTarget.value)} />
···
         <span class="text-xs font-medium uppercase tracking-wide text-on-surface-variant">Handle or DID</span>
         <input
           type="text"
-          class="rounded-xl border-0 bg-white/6 px-4 py-2.5 text-sm text-on-surface placeholder:text-on-surface-variant/50 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] outline-none focus:shadow-[inset_0_0_0_1px_rgba(125,175,255,0.4)]"
+          class="ui-input ui-input-strong rounded-xl px-4 py-2.5"
           placeholder="handle.bsky.social or did:plc:…"
           value={value()}
           onInput={(e) => setValue(e.currentTarget.value)} />
···
 export function MessagesPicker(props: { onSubmit: () => void }) {
   return (
     <div class="grid gap-4">
-      <div class="rounded-2xl bg-white/4 p-4 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.04)]">
+      <div class="rounded-2xl bg-surface-container-high p-4 shadow-(--inset-shadow)">
         <div class="flex items-start gap-3">
           <span class="mt-0.5 flex items-center text-primary">
             <i class="i-ri-message-3-line" />

src/components/deck/ColumnPicker/ProfileColumnPicker.tsx

···
               ? `profile-suggestions-option-${typeahead.activeIndex()}`
               : undefined}
             aria-expanded={typeahead.open()}
-            class="w-full rounded-xl border-0 bg-white/6 px-4 py-2.5 pr-10 text-sm text-on-surface placeholder:text-on-surface-variant/50 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] outline-none focus:shadow-[inset_0_0_0_1px_rgba(125,175,255,0.4)]"
+            class="ui-input ui-input-strong w-full rounded-xl px-4 py-2.5 pr-10"
             placeholder="alice.bsky.social"
             spellcheck={false}
             value={value()}

src/components/deck/ColumnPicker/SearchPicker.tsx

···
       class="inline-flex items-center justify-center gap-2 rounded-xl border-0 px-3 py-2 text-xs font-medium transition duration-150 disabled:cursor-not-allowed disabled:opacity-40"
       classList={{
         "bg-primary/15 text-primary": props.active,
-        "bg-white/4 text-on-surface-variant hover:bg-white/8 hover:text-on-surface": !props.active && !props.disabled,
+        "tone-muted text-on-surface-variant hover:bg-surface-bright hover:text-on-surface": !props.active
+          && !props.disabled,
       }}
       onClick={() => props.onClick()}>
       <SearchModeIcon mode={props.mode} class="text-sm" />
···
         <span class="text-xs font-medium uppercase tracking-wide text-on-surface-variant">Search query</span>
         <input
           type="text"
-          class="rounded-xl border-0 bg-white/6 px-4 py-2.5 text-sm text-on-surface placeholder:text-on-surface-variant/50 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] outline-none focus:shadow-[inset_0_0_0_1px_rgba(125,175,255,0.4)]"
+          class="ui-input ui-input-strong rounded-xl px-4 py-2.5"
           placeholder="from:alice at protocol"
           value={query()}
           onInput={(event) => setQuery(event.currentTarget.value)} />

src/components/deck/DeckColumn.tsx

···
     <div class="flex shrink-0 items-center gap-1">
       <button
         type="button"
-        class="flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-white/5 text-[0.65rem] font-bold text-on-surface-variant transition duration-150 hover:-translate-y-px hover:bg-white/10 hover:text-on-surface"
+        class="flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-surface-container-high text-[0.65rem] font-bold text-on-surface-variant transition duration-150 hover:-translate-y-px hover:bg-surface-bright hover:text-on-surface"
         aria-label={`Column width: ${props.column.width}. Click to cycle.`}
         title="Cycle column width"
         onClick={() => props.onWidthCycle()}>
···
       </button>
       <button
         type="button"
-        class="flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent text-sm text-on-surface-variant transition duration-150 hover:-translate-y-px hover:bg-white/6 hover:text-on-surface"
+        class="flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent text-sm text-on-surface-variant transition duration-150 hover:-translate-y-px hover:bg-surface-bright hover:text-on-surface"
         aria-label="Move column left"
         title="Move column left"
         onClick={() => props.onMoveLeft()}>
···
       </button>
       <button
         type="button"
-        class="flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent text-sm text-on-surface-variant transition duration-150 hover:-translate-y-px hover:bg-white/6 hover:text-on-surface"
+        class="flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent text-sm text-on-surface-variant transition duration-150 hover:-translate-y-px hover:bg-surface-bright hover:text-on-surface"
         aria-label="Move column right"
         title="Move column right"
         onClick={() => props.onMoveRight()}>
···
       </button>
       <button
         type="button"
-        class="flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent text-sm text-on-surface-variant transition duration-150 hover:-translate-y-px hover:bg-white/6 hover:text-error"
+        class="flex h-6 w-6 shrink-0 items-center justify-center rounded border-0 bg-transparent text-sm text-on-surface-variant transition duration-150 hover:-translate-y-px hover:bg-surface-bright hover:text-error"
         aria-label="Close column"
         title="Close column"
         onClick={() => props.onClose()}>
···
 
 function ColumnHeader(props: ColumnHeaderProps) {
   return (
-    <header class="flex shrink-0 items-center gap-2 rounded-t-2xl bg-[rgba(14,14,14,0.94)] px-3 py-2.5 backdrop-blur-[18px] shadow-[inset_0_-1px_0_rgba(255,255,255,0.04)]">
+    <header class="flex shrink-0 items-center gap-2 rounded-t-2xl bg-surface-container-highest px-3 py-2.5 backdrop-blur-[18px] shadow-(--inset-shadow)">
       <span
         class="flex cursor-grab items-center text-on-surface-variant opacity-40 hover:opacity-80 active:cursor-grabbing"
         draggable="true"
···
 function BlurredMessagesBody() {
   return (
     <div class="group relative min-h-0 min-w-0 overflow-hidden">
-      <div class="pointer-events-none absolute right-3 top-3 z-10 rounded-full bg-black/55 px-2.5 py-1 text-[0.65rem] font-medium uppercase tracking-[0.12em] text-on-surface-variant backdrop-blur-sm transition duration-150 group-hover:opacity-0 group-focus-within:opacity-0">
+      <div class="pointer-events-none absolute right-3 top-3 z-10 rounded-full bg-surface-container-highest/88 px-2.5 py-1 text-[0.65rem] font-medium uppercase tracking-[0.12em] text-on-surface-variant backdrop-blur-sm transition duration-150 group-hover:opacity-0 group-focus-within:opacity-0">
         Hover to reveal
       </div>
       <div class="h-full transition duration-200 ease-out blur-[14px] saturate-50 group-hover:blur-none group-hover:saturate-100 group-focus-within:blur-none group-focus-within:saturate-100">
···
         props.onDrop(props.column.id);
       }}>
       <section
-        class="flex h-full w-full flex-col overflow-hidden rounded-2xl bg-[rgba(8,8,8,0.32)] transition-shadow duration-150"
+        class="flex h-full w-full flex-col overflow-hidden rounded-2xl bg-surface-container transition-shadow duration-150"
         classList={{
           "shadow-[inset_0_0_0_2px_rgba(125,175,255,0.45)]": props.isDragOver,
-          "shadow-[inset_0_0_0_1px_rgba(255,255,255,0.03)]": !props.isDragOver,
+          "shadow-(--inset-shadow)": !props.isDragOver,
         }}>
         <ColumnHeader
           column={props.column}

src/components/deck/DeckWorkspace.tsx

···
       </div>
       <button
         type="button"
-        class="inline-flex h-11 items-center gap-2 rounded-full border-0 bg-white/5 px-4 text-sm text-on-surface transition duration-150 ease-out hover:-translate-y-px hover:bg-white/8"
+        class="inline-flex h-11 items-center gap-2 rounded-full border-0 bg-surface-container-high px-4 text-sm text-on-surface transition duration-150 ease-out hover:-translate-y-px hover:bg-surface-bright"
         aria-label="Add column (Ctrl+Shift+N)"
         title="Add column (Ctrl+Shift+N)"
         onClick={() => props.onAdd()}>
···
 
 function EmptyDeck(props: { onAdd: () => void }) {
   return (
-    <div class="flex h-full min-h-104 flex-col items-center justify-center gap-4 rounded-[1.75rem] bg-white/3 px-6 text-center shadow-[inset_0_0_0_1px_rgba(255,255,255,0.035)]">
+    <div class="flex h-full min-h-104 flex-col items-center justify-center gap-4 rounded-[1.75rem] bg-surface-container px-6 text-center shadow-(--inset-shadow)">
       <span class="flex items-center text-[2.5rem] text-on-surface-variant opacity-30">
         <i class="i-ri-layout-column-line" />
       </span>

src/components/deck/DiagnosticsPanel.tsx

···
   }
 
   return (
-    <article class="grid min-h-0 grid-rows-[auto_auto_1fr] overflow-hidden rounded-4xl bg-surface-container shadow-[inset_0_0_0_1px_rgba(255,255,255,0.035)]">
+    <article class="grid min-h-0 grid-rows-[auto_auto_1fr] overflow-hidden rounded-4xl bg-surface-container shadow-(--inset-shadow)">
       <DiagnosticsHeader
         did={activeDid()}
         embedded={props.embedded ?? false}
···
 
   return (
     <nav class="px-3 pb-3" aria-label="Diagnostics tabs">
-      <div class="relative flex gap-1 rounded-full bg-black/30 p-1">
+      <div class="ui-input-strong relative flex gap-1 rounded-full p-1">
         <Motion.div
-          class="absolute inset-y-1 rounded-full bg-white/7 shadow-[inset_0_0_0_1px_rgba(125,175,255,0.16)]"
+          class="absolute inset-y-1 rounded-full bg-surface-container-high shadow-[inset_0_0_0_1px_rgba(125,175,255,0.16)]"
           animate={{ x: `${activeIndex() * 100}%` }}
           style={{ width: `${100 / DIAGNOSTICS_TABS.length}%` }}
           transition={{ duration: 0.18 }} />
···
         <StatCard label={props.isSelf ? "Boundaries around you" : "Blocked by"} value={blockedByCount()} />
         <StatCard label={props.isSelf ? "Your boundaries" : "Blocking"} value={blockingCount()} />
       </div>
-      <div class="rounded-3xl bg-white/3 p-4 text-sm leading-relaxed text-on-surface-variant">
+      <div class="rounded-3xl bg-surface-container-high p-4 text-sm leading-relaxed text-on-surface-variant shadow-(--inset-shadow)">
         Blocks are a normal part of social media. This data is public on the AT Protocol.
       </div>
       <button
···
 
 function DiagnosticsTabIntro(props: { description: string; title: string }) {
   return (
-    <div class="grid gap-1 rounded-3xl bg-white/3 p-4">
+    <div class="grid gap-1 rounded-3xl bg-surface-container-high p-4 shadow-(--inset-shadow)">
       <h2 class="m-0 text-base font-semibold text-on-surface">{props.title}</h2>
       <p class="m-0 text-sm leading-relaxed text-on-surface-variant">{props.description}</p>
     </div>
···
 
 function DiagnosticsError(props: { message: string | null; onRetry?: () => void }) {
   return (
-    <div class="grid gap-3 rounded-3xl bg-white/3 p-4 text-sm text-on-surface-variant">
+    <div class="grid gap-3 rounded-3xl bg-surface-container-high p-4 text-sm text-on-surface-variant shadow-(--inset-shadow)">
       <p class="m-0">{props.message}</p>
       <Show when={props.onRetry}>
         <button
···
 }
 
 function DiagnosticsEmptyState(props: { copy: string }) {
-  return <div class="rounded-3xl bg-white/3 p-4 text-sm text-on-surface-variant">{props.copy}</div>;
+  return (
+    <div class="rounded-3xl bg-surface-container-high p-4 text-sm text-on-surface-variant shadow-(--inset-shadow)">
+      {props.copy}
+    </div>
+  );
 }
 
 function StatCard(props: { label: string; value: number }) {
   return (
-    <div class="rounded-3xl bg-white/3 p-4">
+    <div class="rounded-3xl bg-surface-container-high p-4 shadow-(--inset-shadow)">
       <p class="m-0 text-xs uppercase tracking-[0.12em] text-on-surface-variant">{props.label}</p>
       <p class="m-0 mt-2 text-3xl font-semibold text-on-surface">{props.value}</p>
     </div>
···
 
   return (
     <Motion.span
-      class="inline-flex items-center gap-2 rounded-full bg-white/5 px-3 py-2 text-sm text-on-secondary-container"
+      class="inline-flex items-center gap-2 rounded-full bg-surface-bright px-3 py-2 text-sm text-on-secondary-container"
       initial={{ opacity: 0, scale: 0.9 }}
       animate={{ opacity: 1, scale: 1 }}
       title={title()}
       transition={{ delay: Math.min(props.index * 0.02, 0.12), duration: 0.14 }}>
-      <span class="h-2 w-2 rounded-full bg-white/20" />
+      <span class="h-2 w-2 rounded-full bg-primary/35" />
       <span>{props.label.val ?? "label"}</span>
       <span class="text-xs text-on-surface-variant/90">{props.sourceName}</span>
     </Motion.span>
···
   const title = () => props.list.title ?? props.list.name ?? "Untitled list";
 
   return (
-    <div class="rounded-3xl bg-white/3 p-4 transition duration-150 hover:bg-white/5">
+    <div class="rounded-3xl bg-surface-container-high p-4 shadow-(--inset-shadow) transition duration-150 hover:bg-surface-bright">
       <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
         <div class="min-w-0">
           <div class="flex flex-wrap items-center gap-2">
···
   const title = () => props.pack.title ?? props.pack.name ?? props.pack.record?.name ?? "Starter pack";
 
   return (
-    <div class="rounded-3xl bg-white/3 p-4 transition duration-150 hover:bg-white/5">
+    <div class="rounded-3xl bg-surface-container-high p-4 shadow-(--inset-shadow) transition duration-150 hover:bg-surface-bright">
       <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
         <div class="min-w-0">
           <p class="m-0 text-base font-semibold text-on-surface">{title()}</p>
···
         </div>
 
         <div class="grid shrink-0 justify-items-start gap-2 sm:justify-items-end">
-          <span class="rounded-full bg-white/5 px-3 py-1 text-xs text-on-surface-variant">{count()} members</span>
+          <span class="rounded-full bg-surface-bright px-3 py-1 text-xs text-on-surface-variant">
+            {count()} members
+          </span>
           <Show when={props.pack.uri}>
             {uri => (
               <button
···
   },
 ) {
   return (
-    <div class="grid gap-3 rounded-3xl bg-white/3 p-4">
+    <div class="grid gap-3 rounded-3xl bg-surface-container-high p-4 shadow-(--inset-shadow)">
       <p class="m-0 text-sm font-semibold text-on-surface">{props.title}</p>
       <div class="grid gap-3">
         <For each={props.items}>
···
             return (
               <Motion.div
                 class="flex items-start gap-3 rounded-2xl p-3"
-                classList={{ "bg-black/20": item.available, "bg-white/4 opacity-70": !item.available }}
+                classList={{ "ui-input-strong": item.available, "tone-muted opacity-70": !item.available }}
                 aria-disabled={!item.available}
                 initial={{ opacity: 0, y: 8 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ delay: Math.min(index() * 0.04, 0.16), duration: 0.16 }}>
-                <div class="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-white/8 text-xs font-semibold text-on-surface-variant">
+                <div class="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-surface-container-high text-xs font-semibold text-on-surface-variant">
                   <Show
                     when={item.available && item.avatar}
                     fallback={item.available

src/components/deck/DiagnosticsSkeleton.tsx

···
     <div class="grid gap-4">
       <For each={Array.from({ length: 3 })}>
         {() => (
-          <div class="grid h-32 gap-3 rounded-3xl bg-white/3 p-4">
-            <div class="h-4 w-28 rounded-full bg-white/6" />
-            <div class="h-4 w-44 rounded-full bg-white/6" />
-            <div class="h-4 w-full rounded-full bg-white/6" />
+          <div class="grid h-32 gap-3 rounded-3xl bg-surface-container-high p-4 shadow-(--inset-shadow)">
+            <div class="skeleton-block h-4 w-28 rounded-full" />
+            <div class="skeleton-block h-4 w-44 rounded-full" />
+            <div class="skeleton-block h-4 w-full rounded-full" />
           </div>
         )}
       </For>
···
 export function DiagnosticsLabelSkeleton() {
   return (
     <div class="flex flex-wrap gap-2">
-      <For each={Array.from({ length: 5 })}>{() => <div class="h-10 w-32 rounded-full bg-white/3" />}</For>
+      <For each={Array.from({ length: 5 })}>{() => <div class="skeleton-block h-10 w-32 rounded-full" />}</For>
     </div>
   );
 }
···
     <div class="grid gap-3">
       <For each={Array.from({ length: 2 })}>
         {() => (
-          <div class="grid h-28 gap-3 rounded-3xl bg-white/3 p-4">
-            <div class="h-4 w-40 rounded-full bg-white/6" />
-            <div class="h-4 w-28 rounded-full bg-white/6" />
-            <div class="h-4 w-full rounded-full bg-white/6" />
+          <div class="grid h-28 gap-3 rounded-3xl bg-surface-container-high p-4 shadow-(--inset-shadow)">
+            <div class="skeleton-block h-4 w-40 rounded-full" />
+            <div class="skeleton-block h-4 w-28 rounded-full" />
+            <div class="skeleton-block h-4 w-full rounded-full" />
           </div>
         )}
       </For>
···
 export function DiagnosticsBlockSkeleton() {
   return (
     <div class="grid gap-3">
-      <For each={Array.from({ length: 2 })}>{() => <div class="h-24 rounded-3xl bg-white/3" />}</For>
+      <For each={Array.from({ length: 2 })}>{() => <div class="skeleton-block h-24 rounded-3xl" />}</For>
     </div>
   );
 }

src/components/explorer/ExplorerPanel.tsx

···
         {(message) => (
           <div class="px-6 pt-4">
             <div
-              class="rounded-2xl px-4 py-3 text-sm shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)]"
+              class="rounded-2xl px-4 py-3 text-sm shadow-(--inset-shadow)"
               classList={{
-                "bg-[rgba(138,31,31,0.2)] text-error": message().kind === "error",
-                "bg-[rgba(28,80,49,0.28)] text-on-surface": message().kind === "success",
+                "bg-error-surface text-error": message().kind === "error",
+                "bg-surface-container-high text-on-surface": message().kind === "success",
               }}>
               {message().text}
             </div>
···
                 class="h-full overflow-auto p-6">
                 <Switch>
                   <Match when={view().error}>
-                    <div class="rounded-3xl bg-[rgba(138,31,31,0.2)] p-4 text-sm text-error shadow-[inset_0_0_0_1px_rgba(255,128,128,0.2)]">
+                    <div class="rounded-3xl bg-error-surface p-4 text-sm text-error shadow-(--inset-shadow)">
                       {view().error}
                     </div>
                   </Match>
···
 
   return (
     <div class="flex h-full items-start overflow-auto p-6">
-      <section class="mx-auto grid w-full max-w-4xl gap-6 rounded-[1.75rem] bg-white/3 p-8 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.04)]">
+      <section class="mx-auto grid w-full max-w-4xl gap-6 rounded-[1.75rem] bg-surface-container p-8 shadow-(--inset-shadow)">
         <div class="grid gap-2">
           <p class="overline-copy text-xs text-primary/80">AT Protocol Explorer</p>
           <h1 class="m-0 text-[2rem] font-medium tracking-[-0.03em] text-on-surface">
···
               <button
                 type="button"
                 onClick={() => void props.onExampleClick(example.value)}
-                class="rounded-2xl bg-white/4 px-4 py-4 text-left transition duration-150 ease-out hover:bg-white/7 hover:-translate-y-px">
+                class="rounded-2xl bg-surface-container-high px-4 py-4 text-left shadow-(--inset-shadow) transition duration-150 ease-out hover:-translate-y-px hover:bg-surface-bright">
                 <p class="m-0 text-xs uppercase tracking-[0.12em] text-on-surface-variant">{example.label}</p>
                 <p class="mt-2 truncate text-sm font-mono text-primary">{example.value}</p>
               </button>
···
 
 function ExplorerSkeleton() {
   return (
-    <div class="grid gap-4 animate-pulse">
-      <div class="h-8 w-1/3 rounded-lg bg-white/5" />
-      <div class="h-4 w-1/4 rounded bg-white/5" />
+    <div class="grid gap-4" aria-hidden="true">
+      <div class="skeleton-block h-8 w-1/3 rounded-lg" />
+      <div class="skeleton-block h-4 w-1/4 rounded" />
       <div class="grid gap-2 mt-4">
-        <For each={Array.from({ length: 5 })}>{() => <div class="h-16 rounded-xl bg-white/5" />}</For>
+        <For each={Array.from({ length: 5 })}>{() => <div class="skeleton-block h-16 rounded-xl" />}</For>
       </div>
     </div>
   );

src/components/explorer/ExplorerUrlBar.tsx

···
     <button
       onClick={() => props.onClick()}
       disabled={props.disabled}
-      class="p-2 rounded-lg text-on-surface-variant hover:text-on-surface hover:bg-white/5 transition-all disabled:opacity-30 disabled:cursor-not-allowed"
+      class="p-2 rounded-lg text-on-surface-variant transition-all hover:bg-surface-bright hover:text-on-surface disabled:cursor-not-allowed disabled:opacity-30"
       aria-label={props.direction === "left" ? "Back" : "Forward"}
       title={props.direction === "left" ? "Back" : "Forward"}>
       <ArrowIcon direction={props.direction} />
···
       }}
       onSubmit={handleSubmit}
       class="flex-1 relative">
-      <div class="flex items-center gap-3 px-4 py-2 rounded-xl bg-black/40 shadow-[inset_0_0_0_1px_rgba(125,175,255,0.12)]">
+      <div
+        class="ui-input-strong flex items-center gap-3 rounded-xl border px-4 py-2 transition-[border-color,box-shadow,background-color] duration-150"
+        style={{
+          "border-color": focused() ? "var(--focus-ring)" : "var(--outline-subtle)",
+          "box-shadow": focused() ? "0 0 0 3px var(--focus-ring)" : "var(--inset-shadow)",
+        }}>
         <Icon kind="explore" class="text-primary/80" />
         <input
           ref={(element) => {
···
         </Show>
         <button
           type="submit"
-          class="p-1.5 rounded-lg text-on-surface-variant hover:text-on-surface hover:bg-white/5 transition-all">
+          class="rounded-lg p-1.5 text-on-surface-variant transition-all hover:bg-surface-bright hover:text-on-surface">
           <Icon kind="search" />
         </button>
       </div>
···
 
 export function ExplorerUrlBar(props: ExplorerUrlBarProps) {
   return (
-    <header class="sticky top-0 z-40 border-b border-white/5 bg-surface-container/80 backdrop-blur-xl">
+    <header class="sticky top-0 z-40 border-b ui-outline-subtle bg-surface-container/80 backdrop-blur-xl">
       <div class="px-6 py-4 flex items-center gap-3">
         <div class="flex gap-1">
           <NavButton direction="left" disabled={!props.canGoBack} onClick={props.onBack} />
···
 
         <button
           onClick={() => props.onSubmit(props.value)}
-          class="p-2 rounded-lg text-on-surface-variant hover:text-on-surface hover:bg-white/5 transition-all"
+          class="rounded-lg p-2 text-on-surface-variant transition-all hover:bg-surface-bright hover:text-on-surface"
           aria-label="Reload"
           title="Reload">
           <Icon kind="refresh" />
···
         <button
           onClick={() => props.onClearIconCache()}
           disabled={props.clearingIconCache}
-          class="p-2 rounded-lg text-on-surface-variant hover:text-on-surface hover:bg-white/5 transition-all disabled:cursor-not-allowed disabled:opacity-30"
+          class="rounded-lg p-2 text-on-surface-variant transition-all hover:bg-surface-bright hover:text-on-surface disabled:cursor-not-allowed disabled:opacity-30"
           aria-label="Clear icon cache"
           title="Clear icon cache">
           <Icon iconClass={props.clearingIconCache ? "i-ri-loader-4-line" : "i-ri-delete-bin-6-line"} />
···
         <button
           onClick={() => props.onExport()}
           disabled={!props.canExport}
-          class="p-2 rounded-lg text-on-surface-variant hover:text-on-surface hover:bg-white/5 transition-all disabled:cursor-not-allowed disabled:opacity-30"
+          class="rounded-lg p-2 text-on-surface-variant transition-all hover:bg-surface-bright hover:text-on-surface disabled:cursor-not-allowed disabled:opacity-30"
           aria-label="Download CAR"
           title="Download CAR">
           <Icon iconClass="i-ri-download-2-line" />

src/components/posts/ThreadDrawer.tsx

···
   };
 }
 
-export function ThreadDrawer() {
-  const session = useAppSession();
-  const postNavigation = usePostNavigation();
-  const threadOverlay = useThreadOverlayNavigation();
-  const history = useNavigationHistory();
-  const [state, setState] = createStore<ThreadDrawerState>(createThreadDrawerState());
-  const activeUri = createMemo(() => (threadOverlay.drawerEnabled() ? threadOverlay.threadUri() : null));
-  const rootPost = createMemo(() => findRootPost(state.thread));
-  const parentThreadUri = createMemo(() => findParentUri(state.thread, activeUri()));
-  const parentThreadHref = createMemo(() =>
-    parentThreadUri() ? threadOverlay.buildThreadHref(parentThreadUri()) : null
-  );
-  const interactions = usePostInteractions({
-    onError: session.reportError,
-    patchPost(uri, updater) {
-      const current = state.thread;
-      if (!current) {
-        return;
-      }
-
-      setState("thread", patchThreadNode(current, uri, updater));
-    },
-  });
-
-  createEffect(() => {
-    const uri = activeUri();
-    if (!uri) {
-      if (state.uri || state.thread || state.error || state.loading) {
-        setState(createThreadDrawerState());
-      }
-      return;
-    }
-
-    if (state.uri === uri && (state.loading || state.thread || state.error)) {
-      return;
-    }
-
-    void loadThread(uri);
-  });
+type ThreadDrawerBodyProps = {
+  activeUri: string | null;
+  bookmarkPendingByUri: Record<string, boolean>;
+  error: string | null;
+  likePendingByUri: Record<string, boolean>;
+  loading: boolean;
+  onBookmark: (post: PostView) => void;
+  onLike: (post: PostView) => void;
+  onOpenEngagement: (uri: string, tab: "likes" | "reposts" | "quotes") => void;
+  onOpenThread: (uri: string) => void;
+  onRepost: (post: PostView) => void;
+  repostPendingByUri: Record<string, boolean>;
+  rootPost: PostView | null;
+  thread: ThreadNode | null;
+};
 
-  createEffect(() => {
-    if (!activeUri()) {
-      return;
-    }
-
-    const handleKeyDown = createEscapeKeyHandler(() => {
-      void threadOverlay.closeThread();
-    });
-
-    globalThis.addEventListener("keydown", handleKeyDown);
-    onCleanup(() => globalThis.removeEventListener("keydown", handleKeyDown));
-  });
-
-  async function loadThread(uri: string) {
-    setState({ error: null, loading: true, thread: null, uri });
-
-    try {
-      const payload = await FeedController.getPostThread(uri);
-      if (activeUri() === uri) {
-        setState({ error: null, loading: false, thread: payload.thread, uri });
-      }
-    } catch (error) {
-      if (activeUri() === uri) {
-        setState({ error: String(error), loading: false, thread: null, uri });
-      }
-      session.reportError(`Failed to open thread: ${String(error)}`);
-    }
-  }
-
-  return (
-    <Presence>
-      <Show when={activeUri()}>
-        <div class="fixed inset-0 z-50">
-          <Motion.button
-            class="ui-scrim absolute inset-0 border-0 backdrop-blur-xl"
-            type="button"
-            aria-label="Close thread"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.2 }}
-            onClick={() => void threadOverlay.closeThread()} />
-          <Motion.aside
-            class="absolute inset-y-0 right-0 grid w-full max-w-136 grid-rows-[auto_minmax(0,1fr)] overflow-hidden bg-surface-container-highest px-5 pb-6 pt-5 shadow-[-28px_0_50px_rgba(0,0,0,0.24)] backdrop-blur-[22px]"
-            initial={{ opacity: 0, x: 30 }}
-            animate={{ opacity: 1, x: 0 }}
-            exit={{ opacity: 0, x: 36 }}
-            transition={{ duration: 0.22 }}>
-            <ThreadDrawerHeader
-              activeUri={activeUri()}
-              canGoBack={history.canGoBack()}
-              canGoForward={history.canGoForward()}
-              onGoBack={history.goBack}
-              onGoForward={history.goForward}
-              onMaximize={(uri) => void postNavigation.openPostScreen(uri)}
-              parentThreadHref={parentThreadHref()}
-              onClose={() => void threadOverlay.closeThread()} />
-            <ThreadDrawerBody
-              activeUri={activeUri()}
-              bookmarkPendingByUri={interactions.bookmarkPendingByUri()}
-              error={state.error}
-              likePendingByUri={interactions.likePendingByUri()}
-              loading={state.loading}
-              onBookmark={(post) => void interactions.toggleBookmark(post)}
-              onLike={(post) => void interactions.toggleLike(post)}
-              onOpenEngagement={(uri, tab) => void postNavigation.openPostEngagement(uri, tab)}
-              onOpenThread={(uri) => void threadOverlay.openThread(uri)}
-              onRepost={(post) => void interactions.toggleRepost(post)}
-              repostPendingByUri={interactions.repostPendingByUri()}
-              rootPost={rootPost()}
-              thread={state.thread} />
-          </Motion.aside>
-        </div>
-      </Show>
-    </Presence>
-  );
-}
-
-function ThreadDrawerBody(
-  props: {
-    activeUri: string | null;
-    bookmarkPendingByUri: Record<string, boolean>;
-    error: string | null;
-    likePendingByUri: Record<string, boolean>;
-    loading: boolean;
-    onBookmark: (post: PostView) => void;
-    onLike: (post: PostView) => void;
-    onOpenEngagement: (uri: string, tab: "likes" | "reposts" | "quotes") => void;
-    onOpenThread: (uri: string) => void;
-    onRepost: (post: PostView) => void;
-    repostPendingByUri: Record<string, boolean>;
-    rootPost: PostView | null;
-    thread: ThreadNode | null;
-  },
-) {
+function ThreadDrawerBody(props: ThreadDrawerBodyProps) {
   return (
     <div class="min-h-0 overflow-y-auto overscroll-contain pb-1">
       <ThreadDrawerLoading loading={props.loading} />
···
   );
 }
 
-function ThreadDrawerHeader(
-  props: {
-    activeUri: string | null;
-    canGoBack: boolean;
-    canGoForward: boolean;
-    onClose: () => void;
-    onGoBack: () => void;
-    onGoForward: () => void;
-    onMaximize: (uri: string) => void;
-    parentThreadHref: string | null;
-  },
-) {
+type ThreadDrawerHeaderProps = {
+  activeUri: string | null;
+  canGoBack: boolean;
+  canGoForward: boolean;
+  onClose: () => void;
+  onGoBack: () => void;
+  onGoForward: () => void;
+  onMaximize: (uri: string) => void;
+  parentThreadHref: string | null;
+};
+
+function ThreadDrawerHeader(props: ThreadDrawerHeaderProps) {
   const [local, historyControls] = splitProps(props, ["parentThreadHref", "activeUri", "onClose", "onMaximize"]);
   return (
     <header class="sticky top-0 z-10 mb-4 flex items-center gap-3 rounded-3xl bg-surface-container-high px-4 py-3 shadow-(--inset-shadow)">
       <div class="min-w-0 flex-1">
-        <p class="m-0 text-base font-semibold text-on-surface">Thread</p>
+        <p class="m-0 text-base font-semibold text-on-surface">Thread!</p>
         <Show when={local.parentThreadHref}>
           {(href) => (
             <a
···
           )}
         </Show>
       </div>
-      <div class="flex items-center gap-1">
+      <div class="flex items-center gap-2 flex-1 justify-end">
         <HistoryControls {...historyControls} />
-      </div>
-      <div class="flex flex-1 items-center justify-end gap-2">
         <Show when={local.activeUri}>
           {(uri) => (
             <button
···
   return (
     <Show when={props.loading}>
       <div class="grid gap-3">
-        <SkeletonThreadCard />
-        <SkeletonThreadCard />
+        <ThreadSkeletonCard />
+        <ThreadSkeletonCard />
       </div>
     </Show>
   );
···
   return (
     <Switch>
       <Match when={isBlockedNode(props.node)}>
-        <StateCard label="Blocked post" meta={isBlockedNode(props.node) ? props.node.uri : ""} />
+        <ThreadStateCard label="Blocked post" meta={isBlockedNode(props.node) ? props.node.uri : ""} />
       </Match>
       <Match when={isNotFoundNode(props.node)}>
-        <StateCard label="Post not found" meta={isNotFoundNode(props.node) ? props.node.uri : ""} />
+        <ThreadStateCard label="Post not found" meta={isNotFoundNode(props.node) ? props.node.uri : ""} />
       </Match>
       <Match when={node()}>
         {(threadNode) => (
···
   );
 }
 
-function StateCard(props: { label: string; meta: string }) {
+function ThreadStateCard(props: { label: string; meta: string }) {
   return (
     <div class="tone-muted rounded-3xl p-4 shadow-(--inset-shadow)">
       <p class="m-0 text-sm font-semibold text-on-surface">{props.label}</p>
···
   );
 }
 
-function SkeletonThreadCard() {
+function ThreadSkeletonCard() {
   return (
     <div class="tone-muted rounded-3xl p-5 shadow-(--inset-shadow)">
       <div class="flex gap-3">
···
     </div>
   );
 }
+
+export function ThreadDrawer() {
+  const session = useAppSession();
+  const postNavigation = usePostNavigation();
+  const threadOverlay = useThreadOverlayNavigation();
+  const history = useNavigationHistory();
+  const [state, setState] = createStore<ThreadDrawerState>(createThreadDrawerState());
+  const activeUri = createMemo(() => (threadOverlay.drawerEnabled() ? threadOverlay.threadUri() : null));
+  const rootPost = createMemo(() => findRootPost(state.thread));
+  const parentThreadUri = createMemo(() => findParentUri(state.thread, activeUri()));
+  const parentThreadHref = createMemo(() =>
+    parentThreadUri() ? threadOverlay.buildThreadHref(parentThreadUri()) : null
+  );
+  const interactions = usePostInteractions({
+    onError: session.reportError,
+    patchPost(uri, updater) {
+      const current = state.thread;
+      if (!current) {
+        return;
+      }
+
+      setState("thread", patchThreadNode(current, uri, updater));
+    },
+  });
+
+  createEffect(() => {
+    const uri = activeUri();
+    if (!uri) {
+      if (state.uri || state.thread || state.error || state.loading) {
+        setState(createThreadDrawerState());
+      }
+      return;
+    }
+
+    if (state.uri === uri && (state.loading || state.thread || state.error)) {
+      return;
+    }
+
+    void loadThread(uri);
+  });
+
+  createEffect(() => {
+    if (!activeUri()) {
+      return;
+    }
+
+    const handleKeyDown = createEscapeKeyHandler(() => {
+      void threadOverlay.closeThread();
+    });
+
+    globalThis.addEventListener("keydown", handleKeyDown);
+    onCleanup(() => globalThis.removeEventListener("keydown", handleKeyDown));
+  });
+
+  async function loadThread(uri: string) {
+    setState({ error: null, loading: true, thread: null, uri });
+
+    try {
+      const payload = await FeedController.getPostThread(uri);
+      if (activeUri() === uri) {
+        setState({ error: null, loading: false, thread: payload.thread, uri });
+      }
+    } catch (error) {
+      if (activeUri() === uri) {
+        setState({ error: String(error), loading: false, thread: null, uri });
+      }
+      session.reportError(`Failed to open thread: ${String(error)}`);
+    }
+  }
+
+  return (
+    <Presence>
+      <Show when={activeUri()}>
+        <div class="fixed inset-0 z-50">
+          <Motion.button
+            class="ui-scrim absolute inset-0 border-0 backdrop-blur-xl"
+            type="button"
+            aria-label="Close thread"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            onClick={() => void threadOverlay.closeThread()} />
+          <Motion.aside
+            class="absolute inset-y-0 right-0 grid w-full max-w-136 grid-rows-[auto_minmax(0,1fr)] overflow-hidden bg-surface-container-highest px-5 pb-6 pt-5 shadow-[-28px_0_50px_rgba(0,0,0,0.24)] backdrop-blur-[22px]"
+            initial={{ opacity: 0, x: 30 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: 36 }}
+            transition={{ duration: 0.22 }}>
+            <ThreadDrawerHeader
+              activeUri={activeUri()}
+              canGoBack={history.canGoBack()}
+              canGoForward={history.canGoForward()}
+              onGoBack={history.goBack}
+              onGoForward={history.goForward}
+              onMaximize={(uri) => void postNavigation.openPostScreen(uri)}
+              parentThreadHref={parentThreadHref()}
+              onClose={() => void threadOverlay.closeThread()} />
+            <ThreadDrawerBody
+              activeUri={activeUri()}
+              bookmarkPendingByUri={interactions.bookmarkPendingByUri()}
+              error={state.error}
+              likePendingByUri={interactions.likePendingByUri()}
+              loading={state.loading}
+              onBookmark={(post) => void interactions.toggleBookmark(post)}
+              onLike={(post) => void interactions.toggleLike(post)}
+              onOpenEngagement={(uri, tab) => void postNavigation.openPostEngagement(uri, tab)}
+              onOpenThread={(uri) => void threadOverlay.openThread(uri)}
+              onRepost={(post) => void interactions.toggleRepost(post)}
+              repostPendingByUri={interactions.repostPendingByUri()}
+              rootPost={rootPost()}
+              thread={state.thread} />
+          </Motion.aside>
+        </div>
+      </Show>
+    </Presence>
+  );
+}

src/components/search/hooks/useSearchController.ts

···
     return parsed;
   });
 
-  const actorSuggestions = useActorSuggestions({
+  const typeahead = useActorSuggestions({
     container: actorSearchContainerRef,
     disabled: () => routeState().tab !== "profiles",
     input: searchInputRef,
···
   }
 
   function clearSearch() {
-    actorSuggestions.close();
+    typeahead.close();
     replaceRoute({ q: "" });
     clearResults();
     searchInputRef()?.focus();
···
     if (routeState().tab === "profiles") {
       if (event.key === "ArrowDown") {
         event.preventDefault();
-        actorSuggestions.moveActiveIndex(1);
+        typeahead.moveActiveIndex(1);
         return;
       }
 
       if (event.key === "ArrowUp") {
         event.preventDefault();
-        actorSuggestions.moveActiveIndex(-1);
+        typeahead.moveActiveIndex(-1);
         return;
       }
 
-      if (event.key === "Enter" && actorSuggestions.open() && actorSuggestions.activeSuggestion()) {
+      if (event.key === "Enter" && typeahead.open() && typeahead.activeSuggestion()) {
         event.preventDefault();
-        openActor(actorSuggestions.activeSuggestion() as ProfileViewBasic);
-        actorSuggestions.close();
+        openActor(typeahead.activeSuggestion() as ProfileViewBasic);
+        typeahead.close();
         return;
       }
     }
···
     }
 
     if (event.key === "Escape" && routeState().tab === "profiles") {
-      actorSuggestions.close();
+      typeahead.close();
     }
   }
 
···
       setSyncStatus,
     },
     actorSuggestions: {
-      activeIndex: actorSuggestions.activeIndex,
-      focus: actorSuggestions.focus,
-      open: actorSuggestions.open,
-      suggestions: actorSuggestions.suggestions,
+      activeIndex: typeahead.activeIndex,
+      focus: typeahead.focus,
+      open: typeahead.open,
+      suggestions: typeahead.suggestions,
     },
     derived: {
       hasLocalPosts,