syntaxbullet/minabot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish dashboard hierarchy and unify daily controls

Browse Source
This commit is contained in:
syntaxbullet
2026-09-05 07:58:35 +02:00
parent 0d0aca5604
commit 7ebf936218
3 changed files with 123 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/design-system/WelcomePanel.tsx
View File

@@ -22,37 +22,58 @@ export function WelcomePanel({
// intact instead of interpreting them in the browser's timezone.
const day = date ? new Date(`${date}T12:00:00Z`) : null;
const avatar = (
<div className="ds-avatar">
{avatarUrl && failedAvatar !== avatarUrl ? (
<img
src={avatarUrl}
alt={`${name}’s Discord avatar`}
width={64}
height={64}
onError={() => setFailedAvatar(avatarUrl)}
/>
) : (
<span aria-label={`${name}’s avatar`} role="img">
{Array.from(name.trim())[0]?.toUpperCase() || "?"}
</span>
)}
</div>
);
if (compact) return (
<section className="ds-welcome-panel ds-welcome-panel--compact" aria-labelledby="dashboard-title">
<div className="ds-welcome-top">
<div className="ds-welcome-identity">
{avatar}
<div>
<p className="ds-eyebrow">YOUR DAILY CHECK-IN</p>
<h1 id="dashboard-title" className="type-title">Welcome back, <em>{name}.</em></h1>
</div>
</div>
<div className="ds-welcome-calendar">
{date ? <time dateTime={date} className="type-small">{formatTrackingDate(date)}</time> : <p role="status">Your day is loading…</p>}
<p className="ds-welcome-timezone"><Globe2 size={16} aria-hidden="true" /><span>{timezone}</span></p>
</div>
</div>
<div className="ds-welcome-body">{children}</div>
</section>
);
return (
<section className={`ds-welcome-panel${compact ? " ds-welcome-panel--compact" : ""}`} aria-labelledby="dashboard-title">
<section className="ds-welcome-panel" aria-labelledby="dashboard-title">
<div className="ds-welcome-content">
<div className="ds-welcome-identity">
<div className="ds-avatar">
{avatarUrl && failedAvatar !== avatarUrl ? (
<img
src={avatarUrl}
alt={`${name}’s Discord avatar`}
width={64}
height={64}
onError={() => setFailedAvatar(avatarUrl)}
/>
) : (
<span aria-label={`${name}’s avatar`} role="img">
{Array.from(name.trim())[0]?.toUpperCase() || "?"}
</span>
)}
</div>
{avatar}
<p className="ds-eyebrow">YOUR DAILY CHECK-IN</p>
</div>
<h1 id="dashboard-title" className={compact ? "type-title" : "type-display"}>
<h1 id="dashboard-title" className="type-display">
Welcome back, <em>{name}.</em>
</h1>
{!compact && <p className="ds-welcome-subtitle">Make time for today.</p>}
<p className="ds-welcome-subtitle">Make time for today.</p>
{children}
</div>
<div className="ds-welcome-calendar">
{compact && date ? (
<time dateTime={date} className="type-small">{formatTrackingDate(date)}</time>
) : day && date ? (
{day && date ? (
<time className="ds-date-sheet" dateTime={date} aria-label={formatTrackingDate(date)}>
<span className="ds-date-month">
{day.toLocaleDateString("en", { month: "long", timeZone: "UTC" })}