fix(theme-toggle): resolve hydration error and add to Projects page

[ThanhNguyxn]

Summary

This PR fixes two related issues with the ThemeToggle component:

Fixes #648 - ThemeToggle hydration error and wrong icon display

Problem:

• The ThemeToggle component always displayed the Sun icon regardless of the current theme
• It caused hydration errors because useTheme() returns undefined on the server

Solution:

• Added mounted state to prevent hydration mismatch between server and client
• Used resolvedTheme instead of theme to correctly detect the actual theme (handles "system" theme)
• Display Sun icon in dark mode (to switch to light) and Moon icon in light mode (to switch to dark)
• Fixed className prop not being applied

Fixes #646 - Add theme toggle to Projects page

Problem:

• The Projects page didn't have a theme toggle, making it inconsistent with other pages

Solution:

• Added the ThemeToggle component to the Projects page header next to the action buttons

Changes

• apps/web/src/components/theme-toggle.tsx: Fixed hydration error and icon logic
• apps/web/src/app/projects/page.tsx: Added ThemeToggle import and component

Testing

1. Navigate to any page with the theme toggle
2. Verify the correct icon is displayed (Moon in light mode, Sun in dark mode)
3. Click to toggle theme and verify it switches correctly
4. Check browser console - no hydration errors
5. Navigate to Projects page and verify theme toggle is present

Summary by CodeRabbit

• New Features

  • Added a theme toggle to the projects page header (visible outside selection mode) for quick light/dark switching.

• Bug Fixes

  • Prevents hydration mismatch by rendering the toggle only when ready.
  • Ensures the toggle icon and accessible label reflect the current theme.
  • Accepts optional styling for improved layout integration.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify]

👷 Deploy request for appcut pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	7c23a91

[vercel]

@ThanhNguyxn is attempting to deploy a commit to the OpenCut OSS Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Warning

Rate limit exceeded

@ThanhNguyxn has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 18 minutes and 1 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📝 Walkthrough

Walkthrough

Adds a client-mounted ThemeToggle to prevent SSR hydration mismatches and updates the Projects page header to render ThemeToggle when not in selection mode.

Changes

Cohort / File(s)	Summary
ThemeToggle component apps/web/src/components/theme-toggle.tsx	Adds mounted state with useEffect to delay client-only rendering, uses resolvedTheme from next-themes, fixes icon conditional logic (Sun vs Moon), updates accessible text, and accepts className.
Projects page UI apps/web/src/app/projects/page.tsx	Imports and renders ThemeToggle in the header when not in selection mode, positioned before the "Select Projects" button.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I hopped in code to hush the fight,
I waited to mount until the client’s light,
Moon and Sun now swap their role at night,
Projects header now toggles just right.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title accurately summarizes both main changes: fixing hydration error in ThemeToggle and adding it to Projects page.
Description check	✅ Passed	The description comprehensively covers both issues with clear problem/solution sections, testing steps, and technical details about the fixes.
Linked Issues check	✅ Passed	Changes directly address both #648 (hydration fix, correct icon display) and #646 (add ThemeToggle to Projects page) with appropriate implementation.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to the two linked issues; no extraneous modifications to unrelated files or functionality.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@apps/web/src/components/theme-toggle.tsx`:
- Around line 22-26: The Button elements in theme-toggle.tsx currently lack an
explicit type, which can cause accidental form submission; update both Button
usages (the one returning the icon span and the one in the alternate block at
lines referenced) to include type="button" on the <Button> components so they do
not act as default submit buttons when placed inside a form.