Bring daily check-ins forward with compact workspace layout

src/components/design-system/WelcomePanel.tsx

@@ -8,12 +8,14 @@ export function WelcomePanel({
   date,
   timezone,
   children,
+  compact = false,
 }: {
   name: string;
   avatarUrl: string | null;
   date?: string;
   timezone: string;
   children: ReactNode;
+  compact?: boolean;
 }) {
   const [failedAvatar, setFailedAvatar] = useState<string | null>(null);
   // The API date already belongs to the account's timezone. Keep its date parts
@@ -21,7 +23,7 @@ export function WelcomePanel({
   const day = date ? new Date(`${date}T12:00:00Z`) : null;
 
   return (
-    <section className="ds-welcome-panel" aria-labelledby="dashboard-title">
+    <section className={`ds-welcome-panel${compact ? " ds-welcome-panel--compact" : ""}`} aria-labelledby="dashboard-title">
       <div className="ds-welcome-content">
         <div className="ds-welcome-identity">
           <div className="ds-avatar">
@@ -41,14 +43,16 @@ export function WelcomePanel({
           </div>
           <p className="ds-eyebrow">YOUR DAILY CHECK-IN</p>
         </div>
-        <h1 id="dashboard-title" className="type-display">
+        <h1 id="dashboard-title" className={compact ? "type-title" : "type-display"}>
           Welcome back, <em>{name}.</em>
         </h1>
-        <p className="ds-welcome-subtitle">Make time for today.</p>
+        {!compact && <p className="ds-welcome-subtitle">Make time for today.</p>}
         {children}
       </div>
       <div className="ds-welcome-calendar">
-        {day && date ? (
+        {compact && date ? (
+          <time dateTime={date} className="type-small">{formatTrackingDate(date)}</time>
+        ) : 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" })}