wip: dashboard home layout + sample data

megany128 · claude · megany128 · commit e03f9f474ad3 · 2026-04-23T21:05:25.000-04:00
Remove broken feed Toggle, move SearchBar into feed header, swap
hardcoded Landing hex for secondary-500 token, add Manrope to font
link. Wire RoutedHome with client-side sample posts / side panels
(Convex schema has no post table yet). New playwright helper for
/home screenshots.

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/apps/dashboard/index.html b/apps/dashboard/index.html
@@ -8,7 +8,7 @@
 
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;0,9..40,900&family=Inter:wght@400;500;700&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;0,9..40,900&family=Inter:wght@400;500;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
   </head>
   <body>
     <div id="root"></div>
diff --git a/apps/dashboard/src/App.tsx b/apps/dashboard/src/App.tsx
@@ -10,6 +10,7 @@ import { Org } from "./pages/Org";
 import { Profile } from "./pages/profile";
 import type { SideBarItemId } from "@app/ui";
 import DesignSystem from "./pages/DesignSystem";
+import { SAMPLE_POSTS, SAMPLE_SIDE_PANELS } from "./data/sampleHome";
 
 /**
  * Maps a SideBar nav id to its route path.
@@ -53,6 +54,8 @@ function RoutedHome() {
     <Home
       activeNavItem="home"
       onNavigate={(id) => navigate(pathForNavItem(id))}
+      posts={SAMPLE_POSTS}
+      sidePanels={SAMPLE_SIDE_PANELS}
     />
   );
 }
diff --git a/apps/dashboard/src/data/sampleHome.ts b/apps/dashboard/src/data/sampleHome.ts
@@ -0,0 +1,118 @@
+/**
+ * Sample data for /home preview.
+ *
+ * Convex schema currently only carries auth tables
+ * (apps/dashboard/convex/schema.ts), so posts/events are not persisted yet.
+ * These constants let us preview the feed against the DashboardPost and
+ * HomeSidePanel shapes exported from shared/ui and apps/dashboard/src/pages/Home.tsx.
+ *
+ * Content here is original placeholder copy (not taken from the Figma mockup).
+ */
+
+import type { DashboardPostProps } from "@app/ui";
+import type { HomeSidePanelProps } from "../pages/Home";
+
+export const SAMPLE_POSTS: DashboardPostProps[] = [
+  {
+    organizations: [{ name: "Cornell Outing Club" }],
+    postedAt: "Apr 21",
+    title: "Sunrise hike at Taughannock Falls",
+    datetime: "April 27, 5:30am - 8:30am",
+    location: "Taughannock Falls trailhead",
+    description:
+      "Start the weekend early with a guided sunrise hike along the gorge trail. We'll meet at the trailhead, watch the sun come up over the falls, and be back in time for brunch. All experience levels welcome — we'll keep the pace easygoing.",
+    descriptionTruncated: true,
+    tags: [
+      { label: "Outdoors" },
+      { label: "Just for Fun" },
+    ],
+  },
+  {
+    organizations: [
+      { name: "WICC" },
+      { name: "CUAUV" },
+    ],
+    postedAt: "Apr 20",
+    title: "Spring industry mixer with alumni engineers",
+    datetime: "April 29, 6:00pm - 8:00pm",
+    location: "Duffield Hall Atrium",
+    description:
+      "Meet Cornell engineering alumni working at early-stage startups and mid-sized tech companies. Casual format — snacks, drinks, and roundtables grouped by discipline. Bring questions about the first two years of an engineering career.",
+    descriptionTruncated: true,
+    tags: [
+      { label: "You're free!", color: "blue" },
+      { label: "Early Career" },
+      { label: "Tech" },
+    ],
+  },
+  {
+    organizations: [{ name: "Cornell Fintech Club" }],
+    postedAt: "Apr 18",
+    title: "Portfolio construction workshop",
+    datetime: "April 24, 4:30pm - 6:00pm",
+    location: "Statler Hall 265",
+    description:
+      "A hands-on session on building and rebalancing a long-only equity portfolio. No finance background required — we'll walk through the math and run through a paper-trading exercise together.",
+    descriptionTruncated: true,
+    tags: [
+      { label: "Mentorship" },
+      { label: "Finance" },
+    ],
+  },
+  {
+    organizations: [{ name: "Big Red Robotics" }],
+    postedAt: "Apr 15",
+    title: "Open lab night: meet the team",
+    datetime: "April 23, 7:00pm - 9:30pm",
+    location: "Upson Hall B17",
+    description:
+      "Drop by the lab for a tour of our current build, chat with sub-team leads, and see live demos of the drivetrain and vision stack. Pizza while it lasts.",
+    descriptionTruncated: true,
+    tags: [
+      { label: "Recruitment" },
+      { label: "Tech" },
+    ],
+  },
+];
+
+export const SAMPLE_SIDE_PANELS: HomeSidePanelProps[] = [
+  {
+    title: "This week",
+    items: [
+      {
+        title: "Sunrise hike at Taughannock",
+        orgName: "Cornell Outing Club",
+        isForYou: true,
+      },
+      {
+        title: "Portfolio construction workshop",
+        orgName: "Cornell Fintech Club",
+      },
+      {
+        title: "Open lab night",
+        orgName: "Big Red Robotics",
+        hasIndicator: true,
+      },
+    ],
+  },
+  {
+    title: "Trending",
+    items: [
+      {
+        title: "Spring industry mixer",
+        orgName: "WICC",
+        isForYou: true,
+        hasIndicator: true,
+      },
+      {
+        title: "Intro to quantum computing talk",
+        orgName: "Cornell Physics Society",
+      },
+      {
+        title: "Campus community cleanup",
+        orgName: "Cornell Sustainability",
+        isForYou: false,
+      },
+    ],
+  },
+];
diff --git a/apps/dashboard/src/pages/Home.tsx b/apps/dashboard/src/pages/Home.tsx
@@ -22,7 +22,6 @@
 import type { ComponentPropsWithoutRef } from "react";
 import { SideBar } from "@app/ui";
 import type { SideBarItemId } from "@app/ui";
-import { Toggle } from "@app/ui";
 import { Tag } from "@app/ui";
 import { SearchBar } from "@app/ui";
 import { DashboardPost } from "@app/ui";
@@ -49,8 +48,6 @@ const SECTION_TITLE =
 
 // ─── Public types ─────────────────────────────────────────────────────────────
 
-export type FeedTab = "for-you" | "following";
-
 export interface FeedTagItem {
   /** Display label for the filter tag, e.g. "Recruitment". */
   label: string;
@@ -93,12 +90,6 @@ export interface HomeProps extends ComponentPropsWithoutRef<"div"> {
   /** Called with the nav item id when a sidebar tab is clicked. */
   onNavigate?: (id: SideBarItemId) => void;
 
-  // ── Feed toggle ──
-  /** Active feed tab. Defaults to 'for-you'. */
-  activeTab?: FeedTab;
-  /** Called with the new tab value when the toggle changes. */
-  onTabChange?: (tab: FeedTab) => void;
-
   // ── Tag filter bar ──
   /**
    * List of tags shown in the horizontal filter bar.
@@ -339,8 +330,6 @@ function HomeSidePanel({ title, items, onShowMore }: HomeSidePanelProps) {
 export function Home({
   activeNavItem = "home",
   onNavigate,
-  activeTab = "for-you",
-  onTabChange,
   feedTags = DEFAULT_FEED_TAGS,
   onTagClick,
   onAddTag,
@@ -364,34 +353,25 @@ export function Home({
 
       {/* ── Main feed ── */}
       <main
-        className="flex-1 min-w-0 flex flex-col gap-[var(--space-6)] py-[var(--space-6)] overflow-y-auto"
+        className="flex-1 min-w-0 flex flex-col gap-[var(--space-6)] py-[var(--space-6)] overflow-y-auto bg-[var(--color-surface-subtle)]"
         aria-label="Feed"
       >
-        {/* ── Feed header: tab toggle + tag filter bar ── */}
-        <div className="flex flex-col gap-[var(--space-6)] w-full shrink-0">
-          {/*
-           * Feed tab toggle — "For you" / "Following".
-           * w-full stretches the toggle to fill the padded container.
-           * Figma (node 263:3535): full-width pill container, px 24px.
-           */}
-          <div className="px-[var(--space-6)]">
-            <Toggle
-              options={[
-                { value: "for-you", label: "For you" },
-                { value: "following", label: "Following" },
-              ]}
-              value={activeTab}
-              onChange={(v) => onTabChange?.(v as FeedTab)}
-              className="w-full"
-            />
-          </div>
-
-          {/*
-           * Tag filter bar — horizontal scrollable row of neutral Tag chips.
-           * Figma (node 263:3540): px 32px, gap 12px.
-           * The final "+" tag triggers onAddTag to open a tag picker.
-           */}
-          <div className="flex items-center gap-[var(--space-3)] px-[var(--space-8)] overflow-x-auto">
+        {/* ── Feed header: search bar + tag filter bar ── */}
+        {/*
+         * Figma node 506:8718: SearchBar sits above the tag filter bar within
+         * the main feed, gap 16px. Tags row is the category filter shown
+         * beneath it; the "+" tag opens a picker.
+         */}
+        <div className="flex flex-col gap-[var(--space-4)] w-full shrink-0 px-[var(--space-8)]">
+          <SearchBar
+            value={searchValue}
+            onChange={onSearchChange}
+            onClear={onSearchClear}
+            placeholder="Search"
+            className="w-full shrink-0"
+          />
+
+          <div className="flex items-center gap-[var(--space-3)] overflow-x-auto">
             {feedTags.map((tag) => (
               <Tag
                 key={tag.label}
@@ -453,15 +433,6 @@ export function Home({
         ].join(" ")}
         aria-label="Contextual panel"
       >
-        {/* Search bar — Figma node 263:3692 */}
-        <SearchBar
-          value={searchValue}
-          onChange={onSearchChange}
-          onClear={onSearchClear}
-          placeholder="Search"
-          className="w-full shrink-0"
-        />
-
         {/* Contextual event sections — "This week", "Trending", etc. */}
         {sidePanels.map((panel, i) => (
           <HomeSidePanel key={i} {...panel} />
diff --git a/apps/dashboard/src/pages/Landing.tsx b/apps/dashboard/src/pages/Landing.tsx
@@ -243,7 +243,7 @@ export default function Landing() {
   }, []);
 
   return (
-    <div className="relative min-h-screen overflow-x-hidden bg-[#5BA0DC]">
+    <div className="relative min-h-screen overflow-x-hidden bg-[var(--color-secondary-500)]">
       {/* ── Background ─────────────────────────────────────────────── */}
       {/* Texture image tiled full-page height */}
       <img
diff --git a/scripts/home-shot.mjs b/scripts/home-shot.mjs
@@ -0,0 +1,49 @@
+/**
+ * /home screenshot for Figma alignment loop.
+ * Usage: bun scripts/home-shot.mjs <iter>
+ * Writes /tmp/home-iter-<iter>/full.png + header.png
+ */
+import { chromium } from 'playwright';
+import { mkdirSync } from 'node:fs';
+
+const iter = process.argv[2] ?? '0';
+const outDir = `/tmp/home-iter-${iter}`;
+mkdirSync(outDir, { recursive: true });
+
+const PORTS = [5173, 5174, 5175, 5176, 5177];
+const browser = await chromium.launch();
+const page = await browser.newPage({ viewport: { width: 1280, height: 832 } });
+
+page.on('console', (msg) => {
+  if (msg.type() === 'error' || msg.type() === 'warning') {
+    console.log(`[${msg.type()}] ${msg.text()}`);
+  }
+});
+page.on('pageerror', (err) => console.log(`[pageerror] ${err.message}`));
+
+let url = null;
+for (const p of PORTS) {
+  const candidate = `http://localhost:${p}/home`;
+  try {
+    await page.goto(candidate, { timeout: 3000, waitUntil: 'networkidle' });
+    url = candidate;
+    break;
+  } catch {
+    /* next */
+  }
+}
+if (!url) throw new Error('No dev server on 5173–5177');
+
+await page.waitForTimeout(1000);
+await page.evaluate(() => document.fonts?.ready);
+await page.waitForTimeout(400);
+
+await page.screenshot({ path: `${outDir}/full.png`, fullPage: false });
+await page.screenshot({
+  path: `${outDir}/header.png`,
+  fullPage: false,
+  clip: { x: 0, y: 0, width: 1280, height: 260 },
+});
+
+console.log(`iter ${iter} → ${outDir} (source ${url})`);
+await browser.close();
