diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx index 101153a..5673263 100644 --- a/frontend/app/layout.tsx +++ b/frontend/app/layout.tsx @@ -7,6 +7,7 @@ import HeaderActions from './ui/HeaderActions' import HeaderIdentity from './ui/HeaderIdentity' import SiteStatus from './ui/SiteStatus' import UserViewBanner from './ui/UserViewBanner' +import WorkspaceNavigation from './ui/WorkspaceNavigation' export const metadata = { title: 'Magent', @@ -37,6 +38,7 @@ export default function RootLayout({ children }: { children: ReactNode }) { + {children} diff --git a/frontend/app/new-requests/NewRequestClient.tsx b/frontend/app/new-requests/NewRequestClient.tsx index a662a8b..bfb85e6 100644 --- a/frontend/app/new-requests/NewRequestClient.tsx +++ b/frontend/app/new-requests/NewRequestClient.tsx @@ -306,6 +306,15 @@ export default function NewRequestClient() { } const selectedPoster = artworkUrl(selected?.posterPath, 'w185') + const currentFlowStep = success + ? 5 + : selected + ? 4 + : searchAttempted + ? 3 + : mediaType + ? 2 + : 1 return (
@@ -322,6 +331,18 @@ export default function NewRequestClient() { +
    + {['Type', 'Search', 'Select', 'Config', 'Submit'].map((label, index) => { + const step = index + 1 + return ( +
  1. + {step < currentFlowStep ? '✓' : step} + {label} +
  2. + ) + })} +
+ {error &&
{error}
} {success &&
{success}
} diff --git a/frontend/app/ops-redesign.css b/frontend/app/ops-redesign.css index c7b85ba..f98bf08 100644 --- a/frontend/app/ops-redesign.css +++ b/frontend/app/ops-redesign.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); :root, [data-theme='dark'], @@ -46,6 +46,42 @@ --error-ink: #ffd6d6; } +/* Stitch production handoff: Media-Ops master system */ +:root, +[data-theme='dark'], +[data-theme='light'] { + --ops-bg: #131315; + --ops-bg-2: #0e0e10; + --ops-panel: #1c1b1d; + --ops-panel-2: #201f21; + --ops-panel-3: #2a2a2c; + --ops-line: #46464d; + --ops-line-soft: rgba(145, 144, 152, 0.24); + --ops-text: #e5e1e4; + --ops-muted: #c7c5ce; + --ops-faint: #919098; + --ops-primary: #090d25; + --ops-primary-2: #c2c4e5; + --ops-cyan: #22d3ee; + --ops-cyan-2: #3b82f6; + --ops-coral: #ffb5a0; + --ops-green: #14b8a6; + --ops-red: #ef4444; + --ops-warn: #f59e0b; + --ops-radius-sm: 4px; + --ops-radius: 8px; + --ops-radius-lg: 12px; + --ink: var(--ops-text); + --ink-muted: var(--ops-muted); + --paper: var(--ops-bg); + --paper-strong: var(--ops-panel); + --border: var(--ops-line-soft); + --panel: var(--ops-panel); + --panel-soft: rgba(255, 255, 255, 0.035); + --input-bg: #0e0e10; + --input-ink: var(--ops-text); +} + * { letter-spacing: 0 !important; } @@ -2727,6 +2763,772 @@ button:disabled, .request-complete-actions { display: grid; } } +/* ========================================================================== */ +/* Stitch master layout and component alignment */ +/* ========================================================================== */ + +html, +body { + background: var(--ops-bg); +} + +body { + background-image: none; + font-family: Inter, "Segoe UI", Arial, sans-serif; + font-size: 14px; + line-height: 1.45; +} + +h1, +h2, +h3, +h4, +.brand { + font-family: "DM Sans", "Segoe UI", sans-serif; +} + +button, +input, +select, +textarea { + font-family: Inter, "Segoe UI", sans-serif; +} + +.page { + display: block; + width: 100%; + max-width: none; + min-height: 100vh; + margin: 0; + padding: 64px 0 88px; +} + +.header { + position: fixed; + inset: 0 0 auto; + z-index: 1000; + display: grid; + grid-template-columns: minmax(220px, 1fr) minmax(480px, auto) minmax(220px, 1fr); + grid-template-rows: 64px; + align-items: center; + width: 100%; + height: 64px; + margin: 0; + padding: 0 24px; + border: 0; + border-bottom: 1px solid var(--ops-line); + background: rgba(14, 14, 16, 0.96); + backdrop-filter: blur(16px); +} + +.header-left, +.header-right, +.header-nav { + grid-row: 1; + margin: 0; +} + +.header-left { grid-column: 1; } +.header-nav { grid-column: 2; } +.header-right { grid-column: 3; justify-self: end; } +.brand-link { gap: 10px; } +.brand-logo--header { width: 32px; height: 32px; } +.brand { + color: var(--ops-primary-2); + font-size: 1.7rem; + font-weight: 700; + text-transform: none; + text-shadow: none; +} +.tagline { display: none; } +.beta-chip { + min-height: 28px; + padding: 4px 10px; + border-color: var(--ops-line); + background: var(--ops-panel-2); + color: var(--ops-primary-2); + font-size: 0.65rem; +} +.header-actions { gap: 4px; flex-wrap: nowrap; } +.header-actions a { + min-height: 64px; + padding: 0 12px; + border: 0; + border-bottom: 2px solid transparent; + border-radius: 0; + background: transparent; + color: var(--ops-muted); + font-family: "JetBrains Mono", Consolas, monospace; + font-size: 0.76rem; +} +.header-actions a span { color: var(--ops-faint); font-size: 0.68rem; } +.header-actions a:hover, +.header-actions a.is-active { + border-color: var(--ops-primary-2); + background: transparent; + color: var(--ops-primary-2); +} +.header-actions a.is-active span { color: var(--ops-primary-2); } +.user-view-toggle { + min-height: 32px; + border-color: var(--ops-line); + background: var(--ops-primary); + color: var(--ops-primary-2); +} +.avatar-button { + width: 34px; + height: 34px; + border-radius: 50%; + background: var(--ops-panel-3); +} +.signed-in-dropdown { background: #1c1b1d; } + +.workspace-sidebar { + position: fixed; + inset: 64px auto 0 0; + z-index: 90; + display: flex; + width: 280px; + padding: 24px 16px 18px; + flex-direction: column; + gap: 22px; + border-right: 1px solid var(--ops-line); + background: #201f21; +} + +.workspace-sidebar-identity { + display: grid; + grid-template-columns: 42px minmax(0, 1fr); + align-items: center; + gap: 12px; +} +.workspace-sidebar-logo { + width: 42px; + height: 42px; + border-radius: 8px; +} +.workspace-sidebar-identity > div { display: grid; gap: 2px; min-width: 0; } +.workspace-sidebar-identity strong { font-family: "DM Sans", sans-serif; font-size: 1.05rem; } +.workspace-sidebar-identity span { + overflow: hidden; + color: var(--ops-muted); + font-family: "JetBrains Mono", monospace; + font-size: 0.64rem; + text-overflow: ellipsis; + white-space: nowrap; +} +.workspace-new-request, +.admin-new-request { + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + min-height: 48px; + border: 1px solid #2f3455; + border-radius: 8px; + background: var(--ops-primary); + color: var(--ops-primary-2); + font-family: "DM Sans", sans-serif; + font-size: 1rem; + font-weight: 600; + text-decoration: none; +} +.workspace-new-request span, +.admin-new-request span { font-size: 1.4rem; font-weight: 400; } +.workspace-sidebar > nav { display: grid; gap: 5px; } +.workspace-sidebar > nav a { + display: flex; + align-items: center; + gap: 13px; + min-height: 45px; + padding: 9px 13px; + border: 1px solid transparent; + border-radius: 8px; + color: var(--ops-muted); + font-family: "JetBrains Mono", monospace; + font-size: 0.78rem; + text-decoration: none; +} +.workspace-sidebar svg, +.workspace-mobile-nav svg { + width: 21px; + height: 21px; + fill: none; + stroke: currentColor; + stroke-linecap: round; + stroke-linejoin: round; + stroke-width: 1.8; +} +.workspace-sidebar > nav a:hover, +.workspace-sidebar > nav a.is-active { + border-color: rgba(194, 196, 229, 0.12); + background: #454652; + color: #e5e1e4; +} +.workspace-sidebar-footer { + display: grid; + gap: 4px; + margin-top: auto; + padding-top: 16px; + border-top: 1px solid var(--ops-line); +} +.workspace-sidebar-footer a { + padding: 9px 13px; + color: var(--ops-muted); + font-family: "JetBrains Mono", monospace; + font-size: 0.75rem; + text-decoration: none; +} +.workspace-mobile-nav { display: none; } + +.page:has(.workspace-sidebar) > main, +.page:has(.workspace-sidebar) > .user-view-banner, +.page:has(.workspace-sidebar) > .site-banner { + width: auto; + margin-right: 24px; + margin-left: 304px; +} +.page:has(.workspace-sidebar) > main { + max-width: 1600px; + margin-top: 0; + padding: 32px 0; +} +.page > .user-view-banner, +.page > .site-banner { + margin-top: 16px; +} + +.card, +.admin-card, +.admin-panel, +.main-panel, +.summary-card, +.portal-overview-card, +.status-box, +.timeline-card, +.modal-card, +.admin-zone, +.admin-rail-card, +.users-summary-card, +.stat-card { + border-color: var(--ops-line) !important; + background: var(--ops-panel) !important; +} +.page:has(.workspace-sidebar) > main.card, +.admin-card { + border: 0 !important; + background: transparent !important; +} +button:not(.avatar-button), +.button { + border-radius: 8px; +} +button:not(.ghost-button):not(.avatar-button):not(.issue-category-card):not(.request-type-card):not(.request-result-card):not(.recent-card), +.settings-action-button { + border-color: #30365d; + background: var(--ops-primary); + color: var(--ops-primary-2); + box-shadow: none; +} +.ghost-button, +button.ghost-button { + border-color: var(--ops-line); + background: var(--ops-panel-3); + color: var(--ops-text); +} +input, +select, +textarea { + border-color: var(--ops-line) !important; + background: var(--ops-bg-2) !important; + color: var(--ops-text) !important; +} +input:focus, +select:focus, +textarea:focus { + border-color: var(--ops-primary-2) !important; + box-shadow: 0 0 0 1px rgba(194, 196, 229, 0.28) !important; +} +.section-kicker, +.eyebrow, +.request-overview-label, +.request-stage-number, +.request-stage-state, +.request-flow-heading > div > span, +.invite-flow-number, +.admin-nav-title { + font-family: "JetBrains Mono", monospace !important; +} + +/* My Requests masters */ +.home-page { max-width: 1400px !important; gap: 22px; } +.home-command { + grid-template-columns: minmax(0, 1fr) minmax(380px, 0.8fr); + padding: 0 0 22px; + border: 0; + border-bottom: 1px solid var(--ops-line); + border-radius: 0; + background: transparent; +} +.home-command-copy h1 { font-size: 2.25rem; letter-spacing: -0.02em !important; } +.home-command-copy p { font-size: 0.9rem; } +.home-search-row input, +.home-search-row button { min-height: 44px; } +.home-metric-strip { display: none; } +.home-recent { + padding: 0; + border: 0; + background: transparent; +} +.home-recent-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } +.home-recent-grid .recent-card { + display: grid; + grid-template-columns: 82px minmax(0, 1fr); + grid-template-rows: minmax(118px, 1fr) auto; + align-items: stretch; + min-height: 250px; + padding: 12px; + overflow: hidden; + border-color: var(--ops-line) !important; + border-radius: 12px !important; + background: var(--ops-panel-2) !important; +} +.home-recent-grid .recent-poster { + grid-column: 1; + grid-row: 1; + width: 72px; + height: 108px; + align-self: start; + border-radius: 7px !important; + object-fit: cover; +} +.home-recent-grid .recent-info { + display: flex; + grid-column: 2; + grid-row: 1; + flex-direction: column; + gap: 9px; + min-width: 0; + padding: 7px 3px; +} +.home-recent-grid .recent-title { font-family: "DM Sans", sans-serif; font-size: 1.08rem; } +.home-recent-grid .recent-meta { + display: flex; + align-items: center; + gap: 7px; + color: var(--ops-muted) !important; + font-family: "JetBrains Mono", monospace; + font-size: 0.68rem; +} +.home-recent-grid .recent-meta::before { + width: 7px; + height: 7px; + border-radius: 50%; + background: var(--ops-faint); + content: ""; +} +.home-recent-grid .is-processing .recent-meta::before { background: var(--ops-primary-2); } +.home-recent-grid .is-attention .recent-meta::before { background: var(--ops-coral); } +.home-recent-grid .is-ready .recent-meta::before { background: var(--ops-green); } +.home-recent-grid .recent-open-cue { + grid-column: 1 / -1; + grid-row: 2; + align-self: end; + padding: 9px; + border: 1px solid var(--ops-line); + border-radius: 6px; + background: var(--ops-primary); + color: var(--ops-primary-2); + text-align: center; +} +.request-filter-chips { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin: 18px 0; +} +.request-filter-chips button { + min-height: 32px; + padding: 5px 15px; + border: 1px solid var(--ops-line) !important; + border-radius: 999px !important; + background: var(--ops-panel-3) !important; + color: var(--ops-muted) !important; + font-size: 0.74rem; +} +.request-filter-chips button.is-active { + border-color: #343b71 !important; + background: var(--ops-primary) !important; + color: var(--ops-primary-2) !important; +} +.request-filter-chips i { + display: inline-block; + width: 6px; + height: 6px; + margin-right: 6px; + border-radius: 50%; + background: var(--ops-coral); +} + +/* New Request master */ +.request-portal-page { max-width: 1180px !important; } +.request-portal-hero { + min-height: 0; + padding: 0 0 18px; + border-bottom: 1px solid var(--ops-line); + background: transparent; +} +.request-portal-hero h1 { font-size: 2rem; } +.request-portal-route { background: var(--ops-panel-2); } +.request-master-stepper { + position: relative; + display: grid; + grid-template-columns: repeat(5, 1fr); + margin: 4px 0 16px; + padding: 0; + list-style: none; +} +.request-master-stepper::before { + position: absolute; + top: 15px; + right: 10%; + left: 10%; + height: 1px; + background: var(--ops-line); + content: ""; +} +.request-master-stepper li { + position: relative; + z-index: 1; + display: grid; + justify-items: center; + gap: 6px; + color: var(--ops-faint); + font-family: "JetBrains Mono", monospace; + font-size: 0.68rem; +} +.request-master-stepper li > span { + display: grid; + place-items: center; + width: 30px; + height: 30px; + border: 4px solid var(--ops-bg); + border-radius: 50%; + background: var(--ops-panel-3); +} +.request-master-stepper li.is-active, +.request-master-stepper li.is-complete { color: var(--ops-primary-2); } +.request-master-stepper li.is-active > span, +.request-master-stepper li.is-complete > span { + background: var(--ops-primary-2); + color: #2b2f48; + box-shadow: 0 0 12px rgba(194, 196, 229, 0.22); +} +.request-flow-stage { + border-color: var(--ops-line); + background: var(--ops-panel); +} +.request-type-card, +.request-result-card, +.request-selection-summary, +.request-existing-state, +.request-submit-bar { + border-color: var(--ops-line) !important; + background: var(--ops-panel-2) !important; +} +.request-type-card { min-height: 220px; } +.request-type-card.is-selected, +.request-result-card.is-selected { + border-color: var(--ops-primary-2) !important; + background: rgba(194, 196, 229, 0.055) !important; + box-shadow: 0 0 22px rgba(194, 196, 229, 0.07); +} + +/* Request Details master */ +.request-detail-page { max-width: 1500px !important; gap: 24px; } +.request-detail-page .request-header { + min-height: 180px; + padding: 24px; + border: 1px solid var(--ops-line); + border-radius: 12px; + background: var(--ops-panel); +} +.request-detail-page .request-poster { width: 92px; height: 138px; object-fit: cover; } +.request-detail-page .request-header h1 { font-size: clamp(2rem, 4vw, 3rem); } +.request-overview, +.request-journey, +.request-repair-activity, +.request-advanced { + border-color: var(--ops-line) !important; + background: var(--ops-panel) !important; +} +.request-overview { border-radius: 12px; overflow: hidden; } +.request-stage-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } +.request-stage { + min-height: 180px; + border-color: var(--ops-line) !important; + border-radius: 10px; + background: var(--ops-panel-2) !important; +} +.request-stage.stage-complete { + border-top: 3px solid var(--ops-green) !important; + background: linear-gradient(180deg, rgba(20, 184, 166, 0.07), var(--ops-panel-2) 38%) !important; +} +.request-stage.stage-active { + border-color: rgba(194, 196, 229, 0.58) !important; + border-top: 3px solid var(--ops-primary-2) !important; + background: linear-gradient(180deg, rgba(194, 196, 229, 0.08), var(--ops-panel-2) 40%) !important; + box-shadow: 0 0 18px rgba(194, 196, 229, 0.08) !important; +} +.request-stage.stage-attention { border-top: 3px solid var(--ops-warn) !important; } +.request-live-indicator { border-color: rgba(20, 184, 166, 0.4); color: #5eead4; } +.request-meter-track { background: #353437; } +.request-meter-track > span { background: var(--ops-primary-2); } +.request-release-modal { background: #201f21; } + +/* Issues and Invites masters */ +.portal-page, +.profile-invites-section { max-width: 1500px !important; } +.issue-portal-page > .issue-portal-hero { + min-height: 0; + padding: 0 0 20px; + border: 0; + border-bottom: 1px solid var(--ops-line); + border-radius: 0; + background: transparent; +} +.issue-flow, +.issue-reports-column, +.profile-section, +.invite-flow-step, +.profile-invites-list { + border-color: var(--ops-line) !important; + background: var(--ops-panel) !important; +} +.issue-category-card { + border-color: var(--ops-line-soft); + background: var(--ops-panel-2); +} +.issue-category-card.is-selected { + border-color: var(--ops-primary-2); + background: rgba(194, 196, 229, 0.055); + box-shadow: 0 0 16px rgba(194, 196, 229, 0.06); +} +.issue-category-marker { border-color: var(--ops-line); color: var(--ops-primary-2); } +.issue-detail-modal { background: #201f21; } +.issue-modal-backdrop { background: rgba(5, 5, 7, 0.76); backdrop-filter: blur(6px); } +.invite-flow-route { border-color: var(--ops-line); background: var(--ops-bg-2); } +.invite-flow-route li.is-active, +.invite-flow-route li.is-complete { color: var(--ops-primary-2); } +.invite-flow-step.is-active { + border-color: rgba(194, 196, 229, 0.55) !important; + box-shadow: 0 0 18px rgba(194, 196, 229, 0.06); +} +.invite-delivery-grid > button, +.invite-policy-note, +.invite-delivery-summary, +.invite-created-card, +.admin-list-item { + border-color: var(--ops-line) !important; + background: var(--ops-panel-2) !important; +} + +/* Configuration master: each concern is its own service/operational region */ +.admin-shell { + width: 100%; + max-width: none; + grid-template-columns: 280px minmax(0, 1fr); + gap: 0; + align-items: stretch; +} +.admin-shell.admin-shell--with-rail { + grid-template-columns: 280px minmax(0, 1fr) 320px; + gap: 0; +} +.admin-shell-nav { + position: sticky; + top: 64px; + align-self: start; + height: calc(100vh - 64px); +} +.admin-sidebar { + height: 100%; + padding: 24px 16px; + overflow-y: auto; + border: 0; + border-right: 1px solid var(--ops-line); + border-radius: 0; + background: #201f21; +} +.admin-sidebar-identity { display: grid; gap: 4px; } +.admin-sidebar-identity strong { color: var(--ops-primary-2); font-family: "DM Sans", sans-serif; font-size: 1.35rem; } +.admin-sidebar-identity span { color: var(--ops-muted); font-family: "JetBrains Mono", monospace; font-size: 0.65rem; } +.admin-sidebar-identity i { + display: inline-block; + width: 7px; + height: 7px; + margin-right: 7px; + border-radius: 50%; + background: var(--ops-green); +} +.admin-new-request { margin: 12px 0 4px; } +.admin-nav-title { + color: var(--ops-faint); + font-size: 0.62rem; + letter-spacing: 0.08em !important; +} +.admin-nav-links a { min-height: 34px; padding: 7px 10px; font-family: "JetBrains Mono", monospace; font-size: 0.7rem; } +.admin-nav-links a:hover, +.admin-nav-links a.is-active { border-color: transparent; background: #454652; color: #e5e1e4; } +.admin-card { padding: 32px 40px 60px; } +.admin-header { align-items: end; } +.admin-header h1 { color: var(--ops-primary-2); font-size: 2rem; } +.admin-shell-rail { + top: 80px; + align-self: start; + padding: 24px 20px 24px 0; +} +.service-status-panel { + border-color: var(--ops-line) !important; + background: var(--ops-panel-3) !important; +} +.service-status-grid > div, +.config-subsection-nav, +.config-subsection { + border-color: var(--ops-line) !important; + background: var(--ops-panel) !important; +} +.config-subsection-nav { + position: sticky; + top: 72px; + z-index: 8; + backdrop-filter: blur(12px); +} +.config-subsection-nav a { border-color: var(--ops-line); background: var(--ops-panel-2); } +.config-subsection-nav a small { color: var(--ops-primary-2); } +.config-subsection { + padding: 24px !important; + border-radius: 12px !important; +} +.config-subsection .section-header { + padding-bottom: 14px; + border-bottom: 1px solid var(--ops-line); +} +.config-subsection .section-header h2 { font-size: 1.2rem; } +.admin-form .admin-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 16px; +} +.admin-form .admin-grid > label { + min-height: 142px; + padding: 16px; + border-color: var(--ops-line-soft); + background: var(--ops-panel-2); +} +.admin-form .admin-grid > label.field-span-full { grid-column: 1 / -1; } +.admin-form .label-row > span:first-child { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; } +.admin-form .admin-grid label[data-helper]::after { color: var(--ops-muted); font-family: Inter, sans-serif; } +.settings-section-actions { margin-top: 4px; padding-top: 18px; } + +@media (max-width: 1250px) { + .header { grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr); } + .header-actions a { padding-inline: 8px; font-size: 0.7rem; } + .workspace-sidebar { width: 240px; } + .page:has(.workspace-sidebar) > main, + .page:has(.workspace-sidebar) > .user-view-banner, + .page:has(.workspace-sidebar) > .site-banner { margin-left: 264px; } + .request-stage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } + .admin-shell, + .admin-shell.admin-shell--with-rail { grid-template-columns: 240px minmax(0, 1fr); } + .admin-shell-rail { display: none; } +} + +@media (max-width: 980px) { + .header { grid-template-columns: minmax(0, 1fr) auto; padding-inline: 16px; } + .header-left { grid-column: 1; } + .header-right { grid-column: 2; } + .header-nav { display: none; } + .workspace-sidebar { display: none; } + .workspace-mobile-nav { + position: fixed; + inset: auto 0 0; + z-index: 1000; + display: flex; + min-height: 70px; + align-items: center; + justify-content: space-around; + padding: 7px 10px max(7px, env(safe-area-inset-bottom)); + border-top: 1px solid var(--ops-line); + border-radius: 12px 12px 0 0; + background: #353437; + } + .workspace-mobile-nav a { + display: grid; + min-width: 58px; + justify-items: center; + gap: 3px; + padding: 7px 8px; + border-radius: 999px; + color: var(--ops-muted); + font-family: "JetBrains Mono", monospace; + font-size: 0.58rem; + text-decoration: none; + } + .workspace-mobile-nav a.is-active { background: var(--ops-primary); color: var(--ops-primary-2); } + .workspace-mobile-nav svg { width: 22px; height: 22px; } + .page:has(.workspace-sidebar) > main, + .page:has(.workspace-sidebar) > .user-view-banner, + .page:has(.workspace-sidebar) > .site-banner { + width: auto; + margin-right: 14px; + margin-left: 14px; + } + .page:has(.workspace-sidebar) > main { padding-top: 18px; padding-bottom: 28px; } + .home-command { grid-template-columns: 1fr; } + .home-recent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .admin-shell, + .admin-shell.admin-shell--with-rail { display: block; } + .admin-shell-nav { position: static; height: auto; } + .admin-sidebar { height: auto; border-right: 0; border-bottom: 1px solid var(--ops-line); } + .admin-sidebar-identity, + .admin-new-request { display: none; } + .admin-nav-group { min-width: 200px; } + .admin-sidebar { display: flex; overflow-x: auto; } + .admin-card { padding: 24px 18px 90px; } +} + +@media (max-width: 680px) { + .page { padding-bottom: 78px; } + .header { height: 58px; grid-template-rows: 58px; } + .page { padding-top: 58px; } + .brand-logo--header { width: 28px; height: 28px; } + .brand { font-size: 1.35rem; } + .beta-chip { display: none; } + .user-view-toggle { max-width: 96px; overflow: hidden; padding-inline: 7px; font-size: 0.56rem; white-space: nowrap; } + .home-command { gap: 16px; } + .home-command-copy h1 { font-size: 1.75rem; } + .home-search-row { grid-template-columns: 1fr auto; } + .home-search-row button { padding-inline: 12px; } + .home-section-heading { align-items: flex-start; } + .home-recent-grid { grid-template-columns: 1fr; } + .home-recent-grid .recent-card { + grid-template-columns: 78px minmax(0, 1fr); + grid-template-rows: auto; + min-height: 128px; + } + .home-recent-grid .recent-open-cue { display: none; } + .request-filter-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; } + .request-filter-chips button { flex: 0 0 auto; } + .request-master-stepper li strong { font-size: 0.58rem; } + .request-master-stepper li > span { width: 27px; height: 27px; } + .request-stage-grid { grid-template-columns: 1fr; } + .request-stage { min-height: 0; } + .admin-form .admin-grid { grid-template-columns: 1fr; } + .admin-form .admin-grid > label.field-span-full { grid-column: auto; } + .config-subsection { padding: 18px !important; } + .config-subsection-nav { top: 62px; } +} + /* Guided issue reporting */ .issue-portal-page { display: grid; @@ -4010,3 +4812,53 @@ button:disabled, .issue-pipeline-card li { grid-template-columns: 25px minmax(0, 1fr); align-items: center; justify-items: start; text-align: left; } .issue-pipeline-card li::before { top: -9px; right: auto; left: 12px; width: 2px; height: 10px; } } + +/* Final screen-specific alignment: these rules intentionally follow the + legacy Issues styles so the Stitch tokens remain authoritative. */ +.issue-flow, +.issue-reports-column, +.issue-detail-modal.is-open, +.issue-pipeline-card, +.issue-resolution-card, +.issue-media-search, +.media-status-card { + border-color: var(--ops-line) !important; + background: var(--ops-panel) !important; +} + +.issue-category-card, +.issue-choice-card, +.issue-season-card, +.issue-episode-card { + border-color: var(--ops-line-soft); + background: var(--ops-panel-2); +} + +.issue-category-card:hover, +.issue-choice-card:hover, +.issue-season-card:hover, +.issue-episode-card:hover { + border-color: rgba(194, 196, 229, 0.48); +} + +.issue-category-card.is-selected, +.issue-choice-card.is-selected, +.issue-season-card.is-selected, +.issue-episode-card.is-selected { + border-color: rgba(194, 196, 229, 0.7); + background: rgba(194, 196, 229, 0.07); + box-shadow: 0 0 18px rgba(194, 196, 229, 0.06); +} + +.issue-detail-modal.is-open { + top: max(80px, 5vh); + bottom: 4vh; + max-height: calc(96vh - 80px); +} + +@media (max-width: 640px) { + .issue-detail-modal.is-open { + inset: 74px 10px 10px; + max-height: calc(100vh - 84px); + } +} diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx index 8c32fcb..20f9073 100644 --- a/frontend/app/page.tsx +++ b/frontend/app/page.tsx @@ -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 (
- Request lookup + Media operations

My requests

-

- Enter a title and year, or jump straight to a request using its request number. -

+

Manage and track your media processing queue.

@@ -334,17 +343,24 @@ export default function HomePage() { - )} + {authReady && ( +
+ {REQUEST_STAGE_OPTIONS.filter((option) => ['all', 'pending', 'in_progress', 'working', 'ready'].includes(option.value)).map((option) => ( +