Skip to content

feat: SPA topbar with repo name and theme toggle#17

Merged
dastratakos merged 4 commits into
mainfrom
dastratakos/web-topbar
May 3, 2026
Merged

feat: SPA topbar with repo name and theme toggle#17
dastratakos merged 4 commits into
mainfrom
dastratakos/web-topbar

Conversation

@dastratakos

@dastratakos dastratakos commented May 3, 2026

Copy link
Copy Markdown
Contributor

Summary

Adds a sticky topbar to the stage-cli SPA matching the hosted stage monorepo: git repo basename on the left and a Sun/Moon/System theme dropdown on the right that persists to localStorage["ui-theme"]. An inline IIFE in index.html applies the persisted theme class to <html> before paint to avoid a flash of the wrong theme.

Changes

  • packages/types/src/chapters.ts + packages/cli/src/routes/runs.ts: add repoName (basename of the run's repoRoot) to ChapterRunSchema / the /api/runs/:runId/chapters response.
  • packages/web/src/lib/theme.tsx: ports the monorepo's ThemeProvider / useTheme (light/dark/system, USER_THEME / APP_THEME enums, system-preference media-query subscription).
  • packages/web/src/components/{layout/topbar.tsx,layout/theme-toggle.tsx,ui/dropdown-menu.tsx}: new sticky topbar (h-12 z-30), shadcn-style theme toggle, and a trimmed shadcn dropdown-menu (added @radix-ui/react-dropdown-menu).
  • packages/web/src/lib/use-chapters.ts: shared useChapters(runId) hook so Topbar and PullRequestLayout dedupe via the same TanStack Query key.
  • packages/web/src/{App.tsx,main.tsx}: wraps the app in <ThemeProvider> and renders <Topbar /> above both the empty state and PullRequestLayout.
  • packages/web/src/routes/pull-request-layout.tsx + globals.css: tab nav moved to sticky top-12, --content-top bumped to 3rem so chapter file headers clear the topbar.

Testing

  • pnpm typecheck / pnpm lint / pnpm test (72/72 passing).
  • Built the CLI and curled /api/runs/<id>/chapters against a fixture run — confirmed run.repoName === "monterrey-v3".
  • Verified the production index.html ships the FOUC-prevention IIFE and the JS bundle contains Toggle theme, repoName, and ui-theme. Did not visually inspect in a real browser — recommend eyeballing the dropdown + dark/light switch before merging.

Open in Stage

Adds a sticky topbar above the chapter UI showing the git repo basename on
the left (new `repoName` field on the chapters response) and a Sun/Moon/
System dropdown on the right that persists to `localStorage["ui-theme"]`.
Mirrors the hosted stage monorepo's theme system: an inline IIFE in
index.html applies the persisted class before paint to avoid FOUC.

Refactors PullRequestLayout to use a shared `useChapters(runId)` hook so
the topbar and the chapter list share one cache entry, and offsets the
sticky tab nav (`top-12`) and `--content-top` to clear the new topbar.

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Code Review

This pull request implements a comprehensive theme management system, including a pre-paint script to prevent theme flashing and a new theme toggle component. It also introduces a global Topbar that displays the repository name, which was added to the run data models. The PullRequestLayout was refactored to use a centralized useChapters hook and its layout was updated to accommodate the new header. Feedback was provided to adjust the --content-top variable in the sticky navigation bar to 6rem to avoid overlapping with chapter file headers.

Comment thread packages/web/src/routes/pull-request-layout.tsx
The topbar was showing the worktree directory basename, which for Conductor
worktrees (and any clone into a renamed directory) is the workspace name,
not the repo name. Switch to parsing `git remote get-url origin` and
fall back to the basename only when there's no remote.

Snapshot the URL on `chapter_run.originUrl` at import time so the run
keeps reading consistently if the remote is later renamed — same shape
as `repoRoot`/`baseSha`/`headSha`. Adds an additive nullable column
(no backfill needed; old rows fall back to basename).

- New `packages/cli/src/git.ts` consolidates git introspection
  (`readRepoContext`, `readRepoRoot`, `parseRepoName`, `NotInGitRepoError`).
  `db/path.ts` now only does path resolution.
- `insertChaptersFile` takes a `RepoContext` instead of a bare `repoRoot`
  string, per AGENTS.md "consolidate sibling props that travel together".
- `parseRepoName` handles SSH/HTTPS/ssh:// URLs with or without `.git`,
  with full unit-test coverage (6 cases) for the parser.
@dastratakos dastratakos marked this pull request as ready for review May 3, 2026 16:42
@dastratakos dastratakos merged commit 2115653 into main May 3, 2026
5 checks passed
@dastratakos dastratakos deleted the dastratakos/web-topbar branch May 4, 2026 05:09
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.

1 participant