refactor(frontend): use @project-graphite/ui for the theme and shared components

app/frontend/package.json

@@ -23,5 +23,8 @@
     "typescript": "6.0.2",
     "vite": "8.3.0",
     "vitest": "5.0.1"
+  },
+  "dependencies": {
+    "@project-graphite/ui": "https://github.com/project-graphite/graphite-ui/releases/download/v0.1.0/project-graphite-ui-0.1.0.tgz"
   }
 }

app/frontend/src/App.tsx

@@ -1,16 +1,18 @@
 import type { ReactNode } from 'react';
-import { Navigate, Route, Routes, useLocation, useParams, type Location } from 'react-router';
-import { useAuth } from './auth';
-import { catalogSections, discoverCategories } from './catalog';
-import { Shell } from './components/Shell';
+import { Link, Navigate, Route, Routes, useLocation, useParams, type Location } from 'react-router';
 import {
   FormPanelSkeleton,
   FormSkeleton,
   ListSkeleton,
   PageSkeleton,
-  PosterGridSkeleton,
   TabsSkeleton,
-} from './components/Skeleton';
+  UiProvider,
+  type UiLinkProps,
+} from '@project-graphite/ui';
+import { useAuth } from './auth';
+import { catalogSections, discoverCategories } from './catalog';
+import { Shell } from './components/Shell';
+import { PosterGridSkeleton } from './components/Skeleton';
 import { AccountSettingsPage } from './pages/AccountSettingsPage';
 import { AdminPage } from './pages/AdminPage';
 import { DiscoverPage } from './pages/DiscoverPage';
@@ -105,53 +107,59 @@ function SignedOutLogin() {
   return auth.user ? <Navigate replace to={from ?? '/'} /> : <LoginPage />;
 }
 
+function RouterLink({ href, ...props }: UiLinkProps) {
+  return <Link to={href} {...props} />;
+}
+
 export function App() {
   return (
-    <Routes>
-      <Route element={<Shell />}>
-        <Route index element={<HomePage />} />
-        <Route path="discover/:category/:section" element={<DiscoverRoute />} />
-        <Route path="discover" element={<Navigate replace to="/discover/movie/recent" />} />
-        <Route path="titles/:category/:externalId" element={<TitleDetailsPage />} />
-        <Route path="games" element={<TrackGamesPage />} />
-        <Route path="search" element={<SearchPage />} />
-        <Route
-          path="library"
-          element={
-            <Protected
-              skeleton={
-                <PageSkeleton label="Loading your session">
-                  <PosterGridSkeleton label="Loading your library" />
-                </PageSkeleton>
-              }
-            >
-              <LibraryPage />
-            </Protected>
-          }
-        />
-        <Route path="notifications" element={<Protected><NotificationsPage /></Protected>} />
-        <Route path="import" element={<Protected><ImportPage /></Protected>} />
-        <Route path="import/:id" element={<Protected><ImportBatchPage /></Protected>} />
-        <Route path="settings/*" element={<Protected skeleton={tabbedPage}><SettingsRedirect /></Protected>} />
-        <Route path="admin" element={<Protected admin skeleton={tabbedPage}><AdminPage /></Protected>} />
-        <Route path="users/:handle" element={<ProfilePage />} />
-        <Route path="users/:handle/settings" element={<Protected skeleton={tabbedPage}><SettingsLayout /></Protected>}>
-          <Route index element={<ProfileSettingsPage />} />
-          <Route path="account" element={<AccountSettingsPage />} />
-          <Route path="notifications" element={<NotificationSettingsPage />} />
-          <Route path="sources" element={<SourcesPage />} />
+    <UiProvider link={RouterLink}>
+      <Routes>
+        <Route element={<Shell />}>
+          <Route index element={<HomePage />} />
+          <Route path="discover/:category/:section" element={<DiscoverRoute />} />
+          <Route path="discover" element={<Navigate replace to="/discover/movie/recent" />} />
+          <Route path="titles/:category/:externalId" element={<TitleDetailsPage />} />
+          <Route path="games" element={<TrackGamesPage />} />
+          <Route path="search" element={<SearchPage />} />
+          <Route
+            path="library"
+            element={
+              <Protected
+                skeleton={
+                  <PageSkeleton label="Loading your session">
+                    <PosterGridSkeleton label="Loading your library" />
+                  </PageSkeleton>
+                }
+              >
+                <LibraryPage />
+              </Protected>
+            }
+          />
+          <Route path="notifications" element={<Protected><NotificationsPage /></Protected>} />
+          <Route path="import" element={<Protected><ImportPage /></Protected>} />
+          <Route path="import/:id" element={<Protected><ImportBatchPage /></Protected>} />
+          <Route path="settings/*" element={<Protected skeleton={tabbedPage}><SettingsRedirect /></Protected>} />
+          <Route path="admin" element={<Protected admin skeleton={tabbedPage}><AdminPage /></Protected>} />
+          <Route path="users/:handle" element={<ProfilePage />} />
+          <Route path="users/:handle/settings" element={<Protected skeleton={tabbedPage}><SettingsLayout /></Protected>}>
+            <Route index element={<ProfileSettingsPage />} />
+            <Route path="account" element={<AccountSettingsPage />} />
+            <Route path="notifications" element={<NotificationSettingsPage />} />
+            <Route path="sources" element={<SourcesPage />} />
+          </Route>
+          <Route path="privacy" element={<PrivacyPage />} />
+          <Route path="terms" element={<TermsPage />} />
+          <Route path="credits" element={<CreditsPage />} />
+          <Route path="register" element={<RegisterPage />} />
+          <Route path="verify" element={<VerifyPage />} />
+          <Route path="login" element={<SignedOutLogin />} />
+          <Route path="forgot-password" element={<ForgotPasswordPage />} />
+          <Route path="reset-password" element={<ResetPasswordPage />} />
+          <Route path="unsubscribe" element={<UnsubscribePage />} />
+          <Route path="*" element={<NotFoundPage />} />
         </Route>
-        <Route path="privacy" element={<PrivacyPage />} />
-        <Route path="terms" element={<TermsPage />} />
-        <Route path="credits" element={<CreditsPage />} />
-        <Route path="register" element={<RegisterPage />} />
-        <Route path="verify" element={<VerifyPage />} />
-        <Route path="login" element={<SignedOutLogin />} />
-        <Route path="forgot-password" element={<ForgotPasswordPage />} />
-        <Route path="reset-password" element={<ResetPasswordPage />} />
-        <Route path="unsubscribe" element={<UnsubscribePage />} />
-        <Route path="*" element={<NotFoundPage />} />
-      </Route>
-    </Routes>
+      </Routes>
+    </UiProvider>
   );
 }

app/frontend/src/api.ts

@@ -1,3 +1,5 @@
+import { isAbortError } from '@project-graphite/ui';
+
 export class ApiError extends Error {
   constructor(
     message: string,
@@ -35,14 +37,6 @@ function reportOutage() {
 
 const gatewayStatuses = [500, 502, 503, 504];
 
-export function isAbortError(reason: unknown) {
-  return reason instanceof DOMException && reason.name === 'AbortError';
-}
-
-export function errorMessage(reason: unknown, fallback: string) {
-  return reason instanceof Error ? reason.message : fallback;
-}
-
 export async function apiRequest<T>(
   path: string,
   init: RequestInit = {},

app/frontend/src/catalogSearch.ts

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router';
-import { apiRequest, errorMessage } from './api';
+import { errorMessage } from '@project-graphite/ui';
+import { apiRequest } from './api';
 import { titleHref, type CatalogCategory } from './catalog';
 
 export function sourceLink(value: string) {

app/frontend/src/components/AccountMenu.tsx

@@ -1,59 +1,29 @@
-import { useCallback, useRef, useState } from 'react';
-import { Link } from 'react-router';
+import { Menu } from '@project-graphite/ui';
 import { useAuth } from '../auth';
-import { useDismiss } from '../useDismiss';
 
 export function AccountMenu({ onSignOut }: { onSignOut: () => void }) {
   const auth = useAuth();
-  const [open, setOpen] = useState(false);
-  const root = useRef<HTMLDivElement>(null);
-  const close = useCallback(() => setOpen(false), []);
-  useDismiss(open, root, close);
   if (!auth.user) return null;
   const { displayName, handle, role } = auth.user;
-  const items = [
-    [`/users/${handle}`, 'Your profile'],
-    [`/users/${handle}/settings`, 'Settings'],
-    ['/notifications', 'Notifications'],
-    ...(role === 'member' ? [] : [['/admin', 'Admin']]),
-  ];
 
   return (
-    <div className="relative" ref={root}>
-      <button
-        aria-expanded={open}
-        aria-haspopup="menu"
-        aria-label={`Account menu for ${displayName}`}
-        className="avatar-button"
-        onClick={() => setOpen((current) => !current)}
-        type="button"
-      >
-        {displayName.charAt(0).toUpperCase()}
-      </button>
-      {open && (
-        <div aria-label="Account" className="popover-panel account-menu" role="menu">
-          <div className="border-b border-line px-4 py-3">
-            <p className="m-0 truncate text-sm text-ink">{displayName}</p>
-            <p className="mono-sm m-0 truncate text-faint">@{handle}</p>
-          </div>
-          {items.map(([to, label]) => (
-            <Link className="menu-item" key={to} onClick={close} role="menuitem" to={to}>
-              {label}
-            </Link>
-          ))}
-          <button
-            className="menu-item border-t border-line"
-            onClick={() => {
-              close();
-              onSignOut();
-            }}
-            role="menuitem"
-            type="button"
-          >
-            Sign out
-          </button>
+    <Menu
+      header={
+        <div className="border-b border-line px-4 py-3">
+          <p className="m-0 truncate text-sm text-ink">{displayName}</p>
+          <p className="mono-sm m-0 truncate text-faint">@{handle}</p>
         </div>
-      )}
-    </div>
+      }
+      items={[
+        { label: 'Your profile', href: `/users/${handle}` },
+        { label: 'Settings', href: `/users/${handle}/settings` },
+        { label: 'Notifications', href: '/notifications' },
+        ...(role === 'member' ? [] : [{ label: 'Admin', href: '/admin' }]),
+        { label: 'Sign out', onSelect: onSignOut, separated: true },
+      ]}
+      label="Account"
+      trigger={displayName.charAt(0).toUpperCase()}
+      triggerLabel={`Account menu for ${displayName}`}
+    />
   );
 }

app/frontend/src/components/CatalogCard.tsx

@@ -1,7 +1,7 @@
 import { useState, type FormEvent } from 'react';
 import { Link, useNavigate } from 'react-router';
+import { actionSkeletonClass, Dialog, errorMessage, Skeleton, useSnackbar } from '@project-graphite/ui';
 import { useAdultBlur } from '../adultContent';
-import { errorMessage } from '../api';
 import { useAuth } from '../auth';
 import { catalogRef, titleHref, type CatalogCandidate } from '../catalog';
 import {
@@ -10,11 +10,8 @@ import {
   type LibraryEntry,
   type LibraryState,
 } from '../library';
-import { useSnackbar } from '../snackbar';
 import { useLibraryStates } from '../useLibraryStates';
-import { Dialog } from './Dialog';
 import { Poster, posterGridClass } from './Poster';
-import { actionSkeletonClass, Skeleton } from './Skeleton';
 
 function AddToListDialog({
   item,

app/frontend/src/components/Credits.tsx

@@ -1,5 +1,5 @@
+import { SmoothImage } from '@project-graphite/ui';
 import type { CatalogCategory, CatalogDetails } from '../catalog';
-import { SmoothImage } from './SmoothImage';
 
 const headings: Record<CatalogCategory, string> = {
   movie: 'Cast & crew',