Apply Stitch media operations redesign

2026-09-01 22:58:48 +12:00
parent 32bfa20ab7
commit f65e1b114c
6 changed files with 1003 additions and 16 deletions
@@ -16,6 +16,7 @@ const normalizeRecentResults = (items: any[]) =>
        id,
        title: !rawTitle || placeholder ? `Request #${id}` : rawTitle,
        year: item.year,
+        type: item.type,
        statusLabel: item.statusLabel,
        artwork: item.artwork,
        createdAt: item.createdAt ?? null,
@@ -41,8 +42,9 @@ export default function HomePage() {
      id: number
      title: string
      year?: number
+      type?: string
      statusLabel?: string
-      artwork?: { poster_url?: string }
+      artwork?: { poster_url?: string; backdrop_url?: string }
      createdAt?: string | null
    }[]
  >([])
@@ -248,15 +250,22 @@ export default function HomePage() {
    return label.includes('ready') || label.includes('available')
  }).length

+  const requestCardState = (value?: string) => {
+    const label = String(value ?? '').toLowerCase()
+    if (label.includes('ready') || label.includes('available')) return { key: 'ready', label: value || 'Ready', progress: 100 }
+    if (label.includes('declined') || label.includes('failed') || label.includes('error')) return { key: 'attention', label: value || 'Needs attention', progress: 12 }
+    if (label.includes('partial')) return { key: 'attention', label: value || 'Partially ready', progress: 65 }
+    if (label.includes('working') || label.includes('progress') || label.includes('download')) return { key: 'processing', label: value || 'In progress', progress: 58 }
+    return { key: 'waiting', label: value || 'Waiting', progress: 4 }
+  }
+
  return (
    <main className="card home-page">
      <section className="home-command">
        <div className="home-command-copy">
-          <span className="section-kicker">Request lookup</span>
+          <span className="section-kicker">Media operations</span>
          <h1>My requests</h1>
-          <p>
-            Enter a title and year, or jump straight to a request using its request number.
-          </p>
+          <p>Manage and track your media processing queue.</p>
        </div>
        <form onSubmit={submit} className="home-search">
          <label htmlFor="request-search">Title, year, or request number</label>
@@ -334,17 +343,24 @@ export default function HomePage() {
                  <option value={180}>180 days</option>
                </select>
              </label>
-              <label className="recent-filter">
-                <span>Stage</span>
-                <select value={recentStage} onChange={(event) => setRecentStage(event.target.value)}>
-                  {REQUEST_STAGE_OPTIONS.map((option) => (
-                    <option key={option.value} value={option.value}>{option.label}</option>
-                  ))}
-                </select>
-              </label>
            </div>
          )}
        </div>
+        {authReady && (
+          <div className="request-filter-chips" aria-label="Filter requests by stage">
+            {REQUEST_STAGE_OPTIONS.filter((option) => ['all', 'pending', 'in_progress', 'working', 'ready'].includes(option.value)).map((option) => (
+              <button
+                type="button"
+                key={option.value}
+                className={recentStage === option.value ? 'is-active' : undefined}
+                onClick={() => setRecentStage(option.value)}
+              >
+                {option.value === 'working' ? <i aria-hidden="true" /> : null}
+                {option.value === 'all' ? 'All' : option.label}
+              </button>
+            ))}
+          </div>
+        )}
        <div className="recent-grid home-recent-grid">
          {recentLoading ? (
            <div className="loading-center">
@@ -364,7 +380,7 @@ export default function HomePage() {
                key={item.id}
                type="button"
                onClick={() => router.push(`/requests/${item.id}`)}
-                className="recent-card"
+                className={`recent-card is-${requestCardState(item.statusLabel).key}`}
              >
                {item.artwork?.poster_url ? (
                  <img