Skip to content

fix: restore share page navigation and dark theme - #2261

Open
pavzagor wants to merge 1 commit into
CapSoftware:mainfrom
pavzagor:codex/share-navigation-dark-theme
Open

fix: restore share page navigation and dark theme#2261
pavzagor wants to merge 1 commit into
CapSoftware:mainfrom
pavzagor:codex/share-navigation-dark-theme

Conversation

@pavzagor

@pavzagor pavzagor commented Sep 9, 2026

Copy link
Copy Markdown

Opening a shared video could reset a saved dark theme to light and leave the return-to-dashboard action hidden inside Manage Cap. This adds a visible My Caps link in both player and timeline views and keeps share pages consistent with the viewer's theme.

The share route now restores the theme on direct loads and client navigation, honors an explicit light/dark preference, and falls back to the system theme when none is saved. Fixed white panels and fixed gray text use theme-aware colors. The mobile return control has a 44 × 44 px minimum target. Signed-out viewers retain the existing navigation.

Validation

  • 10 focused tests pass: theme initialization, cookie handling, system fallback, and signed-in/signed-out navigation.
  • Next.js route type generation passes.
  • Scoped Biome check passes with one existing noImgElement warning in TimelineHoverGhost.tsx; diff whitespace check passes.
  • Browser checks confirm direct-load and dashboard-to-video dark theme, player/timeline return links, and no horizontal overflow at 393 px.
  • The clean-checkout TypeScript project build is blocked by 14 Buffer/ArrayBufferView compatibility errors in unchanged shared packages: database auth/crypto and backend comment/storage signing. These packages have no diff against main.

Evidence

Captured against the real local app with the synthetic Diarization Tester account and its existing test recording. Local media storage on port 9000 was unavailable, so the player displays an error in both versions. This validates navigation and appearance, not successful playback or production delivery.

Before After
Before: light share page, no visible My Caps link After: dark share page with My Caps link

Mobile before · Mobile after

The videos contain actual browser frames sampled at approximately 4 fps and encoded at 30 fps; idle gaps are shortened. They are not continuous 30 fps screen recordings. Evidence is committed with this change so the links remain tied to the reviewed commit.

RetriggerView in GreptileConfidence Score: 4/5

The PR appears safe to merge, with a non-blocking theme flash remaining during dashboard-to-share client navigation.

Findings

  1. P2 Theme flashes during navigation
Prompt To Fix All With AI
### Issue 1
apps/web/app/s/ShareTheme.tsx:7-19
When navigating from the dashboard to a share page, the dashboard cleanup resets the body to light. This component restores the saved dark theme only in a passive effect after the destination renders, so the share page can briefly appear in light mode before switching to dark.

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

Summary

  • Adds a visible, touch-sized “My Caps” link in player and timeline headers.
  • Initializes share-route themes during direct loads and client navigation.
  • Replaces fixed light surfaces and text colors with theme-aware tokens.
  • Adds focused tests for theme selection, cookie parsing, system fallback, and navigation visibility.

Comment on lines +7 to +19
useEffect(() => {
const preference = window.matchMedia("(prefers-color-scheme: dark)");
const applyTheme = () => {
const savedTheme = Cookies.get("theme");
const theme =
savedTheme === "dark" || savedTheme === "light"
? savedTheme
: preference.matches
? "dark"
: "light";
document.body.classList.remove("light", "dark");
document.body.classList.add(theme);
};

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Theme flashes during navigation

When navigating from the dashboard to a share page, the dashboard cleanup resets the body to light. This component restores the saved dark theme only in a passive effect after the destination renders, so the share page can briefly appear in light mode before switching to dark.

Knowledge Base Used:

Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/web/app/s/ShareTheme.tsx
Line: 7-19

Comment:
**Theme flashes during navigation**

When navigating from the dashboard to a share page, the dashboard cleanup resets the body to light. This component restores the saved dark theme only in a passive effect after the destination renders, so the share page can briefly appear in light mode before switching to dark.

**Knowledge Base Used:**
- [Web product and collaborative workspace](https://app.greptile.com/cap/-/custom-context/knowledge-base/capsoftware/cap/-/docs/web-product.md)
- [Web application routes and components](https://app.greptile.com/cap/-/custom-context/knowledge-base/capsoftware/cap/-/docs/web-application-routes.md)

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

@richiemcilroy

Copy link
Copy Markdown
Member

Hey @pavzagor thanks so much! can you get this to 5/5? you can request from greptile in the comments

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants