Improve onboarding card UX and dashboard layout (#26)

Move onboarding card to sidebar once challenge starts, show countdown
title before start date, widen right sidebar visibility to lg breakpoint,
and forward scroll events from sidebars to main content area.

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: prazgaitis

apps/web/app/challenges/[id]/dashboard/page.tsx

@@ -183,7 +183,9 @@ async function DashboardContent({
       initialSummary={initialSummary}
     >
       <div className="mx-auto max-w-2xl px-4 py-6 space-y-4">
-        <OnboardingCard challengeId={challenge.id} userId={user._id} />
+        {dateOnlyToUtcMs(challenge.startDate) > Date.now() && (
+          <OnboardingCard challengeId={challenge.id} userId={user._id} challengeStartDate={challenge.startDate} />
+        )}
         <ActivityFeed
           challengeId={challenge.id}
           initialItems={initialFeed.page}

apps/web/components/dashboard/challenge-sidebar.tsx

@@ -6,14 +6,17 @@ import { useChallengeRealtime } from './challenge-realtime-context';
 import { UserAvatar } from '@/components/user-avatar';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { ActiveMiniGames } from '@/components/mini-games';
+import { OnboardingCard } from './onboarding-card';
+import { dateOnlyToUtcMs } from '@/lib/date-only';
 import { cn } from '@/lib/utils';
 
 interface ChallengeSidebarProps {
   challengeId: string;
   currentUserId: string;
+  challengeStartDate: string;
 }
 
-export function ChallengeSidebar({ challengeId, currentUserId }: ChallengeSidebarProps) {
+export function ChallengeSidebar({ challengeId, currentUserId, challengeStartDate }: ChallengeSidebarProps) {
   const { summary } = useChallengeRealtime();
   const { stats, leaderboard } = summary;
 
@@ -112,6 +115,10 @@ export function ChallengeSidebar({ challengeId, currentUserId }: ChallengeSideba
           })}
         </CardContent>
       </Card>
+
+      {dateOnlyToUtcMs(challengeStartDate) <= Date.now() && (
+        <OnboardingCard challengeId={challengeId} userId={currentUserId} challengeStartDate={challengeStartDate} />
+      )}
     </div>
   );
 }

apps/web/components/dashboard/dashboard-layout.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ReactNode } from "react";
+import { ReactNode, useCallback, useRef, WheelEvent } from "react";
 import { Plus } from "lucide-react";
 import type { Doc } from "@repo/backend/_generated/dataModel";
 import { formatDateShortFromDateOnly } from "@/lib/date-only";
@@ -34,10 +34,15 @@ export function DashboardLayout({
   children,
   hideRightSidebar = false,
 }: DashboardLayoutProps) {
+  const mainRef = useRef<HTMLElement>(null);
+  const forwardScroll = useCallback((e: WheelEvent) => {
+    mainRef.current?.scrollBy({ top: e.deltaY, left: e.deltaX });
+  }, []);
+
   return (
     <div className="flex h-screen bg-black text-white">
       {/* Left Sidebar - Collapsed (lg) */}
-      <aside className="hidden w-[72px] flex-shrink-0 flex-col border-r border-zinc-800 lg:flex xl:hidden">
+      <aside onWheel={forwardScroll} className="hidden w-[72px] flex-shrink-0 flex-col border-r border-zinc-800 lg:flex xl:hidden">
         <div className="flex h-full flex-col items-center py-4">
           {/* Logo/Icon */}
           <div className="mb-4 h-10 w-10 rounded-full bg-gradient-to-r from-indigo-500 to-fuchsia-500" />
@@ -80,7 +85,7 @@ export function DashboardLayout({
       </aside>
 
       {/* Left Sidebar - Full (xl) */}
-      <aside className="hidden w-72 flex-shrink-0 flex-col border-r border-zinc-800 xl:flex">
+      <aside onWheel={forwardScroll} className="hidden w-72 flex-shrink-0 flex-col border-r border-zinc-800 xl:flex">
         <div className="flex h-full flex-col">
           {/* Challenge Header */}
           <div className="p-4">
@@ -125,20 +130,20 @@ export function DashboardLayout({
       </aside>
 
       {/* Main Content - Scrollable */}
-      <main className="flex-1 overflow-y-auto scrollbar-hide pb-20 lg:pb-0">
+      <main ref={mainRef} className="flex-1 overflow-y-auto overscroll-contain scrollbar-hide pb-20 lg:pb-0">
         <PaymentRequiredBanner challengeId={challenge.id} />
         <AnnouncementBanner challengeId={challenge.id} />
         {children}
       </main>
 
       {/* Right Sidebar - Fixed (xl only) */}
       {!hideRightSidebar && (
-        <aside className="hidden w-96 flex-shrink-0 flex-col border-l border-zinc-800 xl:flex">
+        <aside onWheel={forwardScroll} className="hidden w-96 flex-shrink-0 flex-col border-l border-zinc-800 lg:flex">
           <div className="p-4">
             <UserSearch challengeId={challenge.id} />
           </div>
           <div className="flex-1 overflow-y-auto scrollbar-hide p-4">
-            <ChallengeSidebar challengeId={challenge.id} currentUserId={currentUserId} />
+            <ChallengeSidebar challengeId={challenge.id} currentUserId={currentUserId} challengeStartDate={challenge.startDate} />
           </div>
         </aside>
       )}

apps/web/components/dashboard/onboarding-card.tsx

@@ -9,7 +9,6 @@ import { Input } from "@/components/ui/input";
 import {
   Card,
   CardContent,
-  CardDescription,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
@@ -21,6 +20,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { StravaConnectButton } from "@/components/integrations/strava-connect-button";
+import { parseDateOnlyToUtcMs } from "@/lib/date-only";
 import {
   CheckCircle2,
   UserPlus,
@@ -35,12 +35,22 @@ import {
   ChevronUp,
 } from "lucide-react";
 
+function getOnboardingTitle(startDate: string): string {
+  const startMs = parseDateOnlyToUtcMs(startDate);
+  const now = Date.now();
+  const daysUntilStart = Math.ceil((startMs - now) / (1000 * 60 * 60 * 24));
+  if (daysUntilStart > 1) return `${daysUntilStart} days until the challenge`;
+  if (daysUntilStart === 1) return "Challenge starts tomorrow";
+  return "Getting started";
+}
+
 interface OnboardingCardProps {
   challengeId: string;
   userId: string;
+  challengeStartDate: string;
 }
 
-export function OnboardingCard({ challengeId, userId }: OnboardingCardProps) {
+export function OnboardingCard({ challengeId, userId, challengeStartDate }: OnboardingCardProps) {
   const [dismissed, setDismissed] = useState(false);
   const [expandedStep, setExpandedStep] = useState<number | null>(null);
 
@@ -127,13 +137,6 @@ export function OnboardingCard({ challengeId, userId }: OnboardingCardProps) {
     },
   ];
 
-  const completedCount = steps.filter((s) => s.complete).length;
-  // Don't count the invite step in total since it's never "complete"
-  const completableCount = steps.filter((s) => s.key !== "invite").length;
-  const completedCompletable = steps.filter(
-    (s) => s.key !== "invite" && s.complete
-  ).length;
-
   const toggleStep = (index: number) => {
     setExpandedStep(expandedStep === index ? null : index);
   };
@@ -143,10 +146,7 @@ export function OnboardingCard({ challengeId, userId }: OnboardingCardProps) {
       <CardHeader className="pb-3">
         <div className="flex items-center justify-between">
           <div>
-            <CardTitle className="text-base">Get ready for the challenge</CardTitle>
-            <CardDescription>
-              {completedCompletable}/{completableCount} steps completed
-            </CardDescription>
+            <CardTitle className="text-base">{getOnboardingTitle(challengeStartDate)}</CardTitle>
           </div>
           {allCompletableStepsDone && (
             <Button

packages/backend/_generated/api.d.ts

@@ -56,6 +56,7 @@ import type * as mutations_payments from "../mutations/payments.js";
 import type * as mutations_stravaWebhook from "../mutations/stravaWebhook.js";
 import type * as mutations_templates from "../mutations/templates.js";
 import type * as mutations_users from "../mutations/users.js";
+import type * as mutations_webhookPayloads from "../mutations/webhookPayloads.js";
 import type * as queries_achievements from "../queries/achievements.js";
 import type * as queries_activities from "../queries/activities.js";
 import type * as queries_activityTypes from "../queries/activityTypes.js";
@@ -141,6 +142,7 @@ declare const fullApi: ApiFromModules<{
   "mutations/stravaWebhook": typeof mutations_stravaWebhook;
   "mutations/templates": typeof mutations_templates;
   "mutations/users": typeof mutations_users;
+  "mutations/webhookPayloads": typeof mutations_webhookPayloads;
   "queries/achievements": typeof queries_achievements;
   "queries/activities": typeof queries_activities;
   "queries/activityTypes": typeof queries_activityTypes;