fix: resolve hydration mismatch on relative time display (#130)

[zacharias-ona]

Closes #130

What

The workspace home page rendered relative time strings (e.g. "47m ago") that differed between SSR and client hydration because wall-clock time advances between the two passes. This caused React hydration mismatch errors reported in Sentry (MEMO-8).

How

Extracted a reusable RelativeTime client component that uses suppressHydrationWarning on the time span element. React ignores the text content difference between server and client for that element. A setInterval keeps the display current after mount. The inline formatRelativeDate function was moved out of workspace-home.tsx into the new component as a named export for testability.

Testing

• Added relative-time.test.ts with 7 tests:
  • 5 unit tests for formatRelativeDate covering all time buckets (just now, minutes, hours, days, formatted date)
  • 2 structural tests verifying the component uses suppressHydrationWarning and useEffect/setInterval
• All 112 unit tests pass, all 42 E2E tests pass
• pnpm lint && pnpm typecheck && pnpm test && pnpm test:e2e all green

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
memo	Ready	Preview, Comment	Apr 16, 2026 11:37pm

[zacharias-ona]

✅ UI verification passed — design spec compliance confirmed.

Static analysis: No violations found. The RelativeTime component correctly passes through text-xs text-muted-foreground styling from the parent, matching the design spec for secondary text/timestamps. No new colors, spacing, or typography outside the token set.

Visual verification (Playwright screenshots):

• Desktop (1280×800, dark): Workspace home renders correctly. Relative timestamps ("3m ago", "1h ago") display with proper styling and alignment.
• Mobile (375×812, dark): Layout responsive, sidebar hidden with hamburger toggle, timestamps visible and correctly positioned, touch targets adequate, no horizontal scroll.

[zacharias-ona]

✅ Post-merge verification passed.

E2E suite: 41/42 passed. 1 known flaky failure (search › typing in search input shows matching results — pre-existing, tracked in #118/#140, unrelated to this PR).

Ad-hoc smoke tests — all passed:

• Landing page (/) — loaded, has title
• Sign-in page (/sign-in) — rendered with email input
• Health endpoint (/api/health) — healthy
• Authenticated login — redirected to workspace
• Workspace page — fully loaded
• Editor navigation — page button click navigated to editor route, editor element rendered
• No console errors (unauthenticated or authenticated)