Rephl3x/Magent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make request status badges prominent and easier to scan
Magent CI/CD / verify (push) Successful in 10m32s
Details
Magent CI/CD / deploy-prod (push) Skipped
Details
Magent CI/CD / deploy-beta (push) Skipped
Details

Browse Source
This commit is contained in:
Assclaw
2026-09-07 17:31:16 +12:00
parent edca300d27
commit bd1f2cb1cb
2 changed files with 31 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/MyRequests.tsx
+7 -3
View File
@@ -254,9 +254,9 @@ export default function HomePage() {
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 (!/not |unavailable|waiting/.test(label) && (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('working') || label.includes('progress') || label.includes('download')) return { key: 'processing', label: value || 'In progress', progress: 58 }
return { key: 'waiting', label: value || 'Waiting', progress: 4 }
}
@@ -391,8 +391,12 @@ export default function HomePage() {
)}
<span className="recent-info">
<span className="recent-title">{item.title || 'Untitled'}{item.year ? ` (${item.year})` : ''}</span>
<span className="recent-status-badge">
<span aria-hidden="true">{({ ready: '✓', processing: '↻', attention: '!', waiting: '◷' })[requestCardState(item.statusLabel).key]}</span>
{item.statusLabel || 'Status not available yet'}
</span>
<span className="recent-meta">
{item.statusLabel || 'Status not available yet'} · Request {item.id}
Request {item.id}
{item.createdAt ? ` · ${formatRequestTime(item.createdAt)}` : ''}
</span>
</span>
frontend/app/ops-redesign.css
+24 -5
View File
@@ -3121,12 +3121,31 @@ textarea:focus {
font-size: 0.68rem;
}
.home-recent-grid .recent-meta::before {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ops-faint);
content: "";
content: none;
}
.home-recent-grid .recent-status-badge {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: 9px;
max-width: 100%;
padding: 8px 12px;
border: 1px solid #9c8044;
border-radius: 8px;
background: #352c1b;
color: #ffe0a0;
font-family: "DM Sans", sans-serif;
font-size: 1rem;
font-weight: 700;
line-height: 1.35;
text-align: left;
text-transform: none;
overflow-wrap: anywhere;
}
.home-recent-grid .recent-status-badge > span { flex: 0 0 auto; font-size: 1.2rem; }
.home-recent-grid .is-ready .recent-status-badge { color: #a7f3cd; background: #16372b; border-color: #398663; }
.home-recent-grid .is-processing .recent-status-badge { color: #b6e6ff; background: #183344; border-color: #448bad; }
.home-recent-grid .is-attention .recent-status-badge { color: #ffd2b4; background: #40281e; border-color: #aa7150; }
.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); }