feat: UI on Material UI with graphite-ui 1.0.0

app/frontend/package.json

@@ -22,6 +22,9 @@
     "vite": "8.3.0"
   },
   "dependencies": {
-    "@project-graphite/ui": "https://github.com/project-graphite/graphite-ui/releases/download/v0.3.0/project-graphite-ui-0.3.0.tgz"
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.1",
+    "@mui/material": "9.5.0",
+    "@project-graphite/ui": "https://github.com/project-graphite/graphite-ui/releases/download/v1.0.0/project-graphite-ui-1.0.0.tgz"
   }
 }

app/frontend/src/components/Attribution.tsx

@@ -1,13 +1,14 @@
+import MuiLink from '@mui/material/Link';
 import type { Attribution as SourceAttribution } from '../catalog';
 
 export function Attribution({ source }: { source: SourceAttribution }) {
   return (
     <span className="mono-sm text-faint">
       Data:{' '}
       {source.attributionUrl ? (
-        <a className="rule-link" href={source.attributionUrl} rel="noreferrer" target="_blank">
+        <MuiLink href={source.attributionUrl} rel="noreferrer" target="_blank" underline="always">
           {source.attribution}
-        </a>
+        </MuiLink>
       ) : (
         source.attribution
       )}

app/frontend/src/components/CatalogCard.tsx

@@ -1,6 +1,17 @@
+import Alert from '@mui/material/Alert';
 import { useState, type FormEvent } from 'react';
 import { Link, useNavigate } from 'react-router';
-import { actionSkeletonClass, Dialog, errorMessage, Skeleton, useSnackbar } from '@project-graphite/ui';
+import {
+  actionSkeletonClass,
+  Button,
+  Checkbox,
+  Dialog,
+  errorMessage,
+  Select,
+  Skeleton,
+  useSnackbar,
+  type ButtonVariant,
+} from '@project-graphite/ui';
 import { useAdultBlur } from '../adultContent';
 import { useAuth } from '../auth';
 import { catalogRef, titleHref, type CatalogCandidate } from '../catalog';
@@ -57,53 +68,45 @@ function AddToListDialog({
   return (
     <Dialog eyebrow="Add to list" onClose={onClose} title={item.title}>
       <form className="mt-6 grid gap-5" onSubmit={(event) => void add(event)}>
-        <label className="field-label">
-          List
-          <select
-            onChange={(event) => setState(event.target.value as LibraryState)}
-            value={state}
-          >
-            {libraryStates.map((value) => (
-              <option key={value} value={value}>
-                {stateLabel(item.category, value)}
-              </option>
-            ))}
-          </select>
-        </label>
-        <label className="flex items-center gap-2 text-sm text-muted">
-          <input
-            checked={isPrivate}
-            onChange={(event) => setIsPrivate(event.target.checked)}
-            type="checkbox"
-          />
-          Hide from my profile
-        </label>
-        {error && <p className="error-message">{error}</p>}
+        <Select
+          label="List"
+          onChange={(value) => setState(value)}
+          options={libraryStates.map((value) => ({ value, label: stateLabel(item.category, value) }))}
+          value={state}
+        />
+        <Checkbox
+          checked={isPrivate}
+          label="Hide from my profile"
+          onChange={(event) => setIsPrivate(event.target.checked)}
+        />
+        {error && <Alert severity="error">{error}</Alert>}
         <div className="flex justify-end gap-3">
-          <button className="secondary-button" disabled={busy} onClick={onClose} type="button">
+          <Button disabled={busy} onClick={onClose}>
             Cancel
-          </button>
-          <button className="primary-button" disabled={busy} type="submit">
+          </Button>
+          <Button disabled={busy} type="submit" variant="primary">
             {busy ? 'Adding…' : 'Add to list'}
-          </button>
+          </Button>
         </div>
       </form>
     </Dialog>
   );
 }
 
 export function AddToListButton({
-  className = 'secondary-button w-full px-3 py-2 text-sm',
   entry,
   item,
   libraryReady,
   onAdded,
+  size = 'small',
+  variant = 'secondary',
 }: {
-  className?: string;
   entry: LibraryEntry | null;
   item: CatalogCandidate;
   libraryReady: boolean;
   onAdded: (entry: LibraryEntry) => void;
+  size?: 'small' | 'medium';
+  variant?: ButtonVariant;
 }) {
   const auth = useAuth();
   const navigate = useNavigate();
@@ -123,13 +126,14 @@ export function AddToListButton({
 
   return (
     <>
-      <button
-        className={className}
+      <Button
+        className="w-full"
         onClick={() => (auth.user ? setOpen(true) : navigate('/login'))}
-        type="button"
+        size={size}
+        variant={variant}
       >
         Add to list
-      </button>
+      </Button>
       {open && <AddToListDialog item={item} onAdded={onAdded} onClose={() => setOpen(false)} />}
     </>
   );
@@ -187,7 +191,7 @@ export function CatalogGrid({
   const library = useLibraryStates(items);
   return (
     <>
-      {library.error && <p className="error-message mb-5">{library.error}</p>}
+      {library.error && <Alert className="mb-5" severity="error">{library.error}</Alert>}
       <div className={posterGridClass}>
         {items.map((item) => (
           <CatalogCard

app/frontend/src/components/CatalogRow.tsx

@@ -1,5 +1,8 @@
+import Alert from '@mui/material/Alert';
+import MuiLink from '@mui/material/Link';
 import { useEffect, useRef, useState, type ReactNode } from 'react';
 import { Link } from 'react-router';
+import { IconButton } from '@project-graphite/ui';
 import { catalogRef, type CatalogCandidate } from '../catalog';
 import { useLibraryStates } from '../useLibraryStates';
 import { CatalogCard } from './CatalogCard';
@@ -18,22 +21,12 @@ function ScrollButton({
   onClick: () => void;
 }) {
   return (
-    <button
-      aria-label={label}
+    <IconButton
       className={`${scrollButtonClass} ${direction < 0 ? '-left-3' : '-right-3'}`}
+      icon={direction < 0 ? 'chevron-left' : 'chevron-right'}
+      label={label}
       onClick={onClick}
-      type="button"
-    >
-      <svg aria-hidden="true" fill="none" height="20" viewBox="0 0 24 24" width="20">
-        <path
-          d={direction < 0 ? 'm15 18-6-6 6-6' : 'm9 18 6-6-6-6'}
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="2"
-        />
-      </svg>
-    </button>
+    />
   );
 }
 
@@ -87,13 +80,13 @@ export function CatalogRow({
           <h2 className="mt-2 mb-0 text-2xl font-medium">{title}</h2>
         </div>
         {link && (
-          <Link className="rule-link mono-sm" to={link.href}>
+          <MuiLink className="mono-sm" component={Link} to={link.href} underline="always">
             {link.label}
-          </Link>
+          </MuiLink>
         )}
       </div>
       {error || library.error ? (
-        <p className="error-message mt-5">{error || library.error}</p>
+        <Alert className="mt-5" severity="error">{error || library.error}</Alert>
       ) : !items ? (
         <div className="mt-5">
           <PosterRowSkeleton label={`Loading ${title}`} />

app/frontend/src/components/LibraryCard.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Link } from 'react-router';
-import { Dialog } from '@project-graphite/ui';
+import { Button, Dialog } from '@project-graphite/ui';
 import { useAdultBlur } from '../adultContent';
 import { categoryLabels } from '../catalog';
 import {
@@ -44,13 +44,9 @@ export function LibraryCard({
     entry.item.title
   );
   const editButton = (
-    <button
-      className={`secondary-button px-3 py-2 text-sm ${layout === 'grid' ? 'w-full' : ''}`}
-      onClick={() => setEditing(true)}
-      type="button"
-    >
+    <Button className={layout === 'grid' ? 'w-full' : undefined} onClick={() => setEditing(true)} size="small">
       Edit
-    </button>
+    </Button>
   );
 
   return (