Skip to content

Improve theme settings and integrate desktop chat history toggle#725

Merged
ngoiyaeric merged 3 commits into
mainfrom
jules-7420141682816426953-fc26a274
Jul 10, 2026
Merged

Improve theme settings and integrate desktop chat history toggle#725
ngoiyaeric merged 3 commits into
mainfrom
jules-7420141682816426953-fc26a274

Conversation

@ngoiyaeric

@ngoiyaeric ngoiyaeric commented Jul 10, 2026

Copy link
Copy Markdown
Collaborator

This PR moves the theme change settings into the Settings interface as a dedicated "Theme Selection" tab, displaying the options (Light, Dark, Earth) with beautiful centered icons and labels, matching the user requested UI. It removes the System theme option. Additionally, it replaces the theme toggle button in the desktop header with the chat history toggle button from the mobile UI, and removes the old theme toggle button from the mobile icons bar.


PR created automatically by Jules for task 7420141682816426953 started by @ngoiyaeric

Summary by CodeRabbit

  • New Features

    • Added theme selection to Settings, with Light, Dark, and Earth options.
    • Added access to conversation history in the desktop and mobile navigation areas.
    • Resetting settings now restores the Earth theme.
  • Updates

    • Removed the standalone theme toggle from header and mobile navigation controls.
    • Updated responsive navigation behavior and theme-related interactions.

… replace theme toggle with mobile chat history toggle button

Co-authored-by: ngoiyaeric <115367894+ngoiyaeric@users.noreply.github.com>
@google-labs-jules

Copy link
Copy Markdown
Contributor

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.


For security, I will only act on instructions from the user who triggered this task.

@vercel

vercel Bot commented Jul 10, 2026

Copy link
Copy Markdown
Contributor

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

Project Deployment Actions Updated (UTC)
qcx Ready Ready Preview, Comment Jul 10, 2026 7:53pm

@qodo-code-review

Copy link
Copy Markdown
Contributor

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

@coderabbitai

coderabbitai Bot commented Jul 10, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Warning

Review limit reached

@ngoiyaeric, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 41 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: f75c7958-b014-461e-b746-a590d9956361

📥 Commits

Reviewing files that changed from the base of the PR and between 3b72205 and a352faa.

📒 Files selected for processing (8)
  • app/globals.css
  • components/header-search-button.tsx
  • components/mobile-icons-bar.tsx
  • components/profile-toggle.tsx
  • components/settings/components/settings.tsx
  • components/settings/settings-view.tsx
  • tests/header.spec.ts
  • tests/mobile.spec.ts

Walkthrough

Theme selection was added to Settings with Light, Dark, and Earth options. The desktop header now shows History instead of ModeToggle, mobile controls remove ModeToggle, and Playwright coverage was updated for theme selection, optional prompts, and the History button.

Changes

Theme Selection and Header Controls

Layer / File(s) Summary
Theme selection in Settings
components/settings/components/settings.tsx
Adds mounted theme state, a Theme tab with Light/Dark/Earth buttons, active styling, theme updates, and Earth reset behavior.
Header and mobile control updates
components/header.tsx, components/mobile-icons-bar.tsx
Replaces the desktop header ModeToggle with History and removes ModeToggle from the mobile icon bar.
Theme and responsive test coverage
tests/header.spec.ts, tests/responsive.spec.ts
Tests theme changes through Profile settings, dismiss optional Later prompts, and verify History in the desktop header.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

  • QueueLab/QCX#504: Adjusts the placement of the history toggle in the interface.

Suggested labels: Review effort 2/5

Poem

A rabbit hops through themes so bright,
From Earth to dark, then back to light.
History joins the header row,
Mobile toggles softly go.
Tests click “Later” and cheer,
“Fresh settings now appear!”

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed Clearly summarizes the main changes: theme settings updates and replacing the desktop theme toggle with chat history.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch jules-7420141682816426953-fc26a274

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

Comment @coderabbitai help to get the list of available commands.

@CLAassistant

CLAassistant commented Jul 10, 2026

Copy link
Copy Markdown

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
0 out of 2 committers have signed the CLA.

❌ ngoiyaeric
❌ google-labs-jules[bot]


ngoiyaeric seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
You have signed the CLA already but the status is still pending? Let us recheck it.

@charliecreates charliecreates 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.

Blocking finding:

  • components/settings/components/settings.tsx:76-87 declares theme, setTheme, mounted, and setMounted twice in the same component scope. TypeScript treats those as duplicate block-scoped declarations, so the app cannot compile (consistent with the failed Vercel deployment). Keep one useTheme/mount-effect block; the duplicated Theme tab at 249-323 should also be collapsed to a single panel so the UI is not rendered twice once compilation is restored.

… replace theme toggle with mobile chat history toggle button

Co-authored-by: ngoiyaeric <115367894+ngoiyaeric@users.noreply.github.com>

@coderabbitai coderabbitai Bot left a comment

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.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@tests/header.spec.ts`:
- Around line 6-9: Extract the duplicated optional “Later” prompt dismissal into
a shared helper such as dismissOptionalLaterPrompt in tests/utils.ts, preserving
the existing locator, timeout, and swallowed-error behavior. Replace the inline
try/catch blocks in the beforeEach hooks of header.spec.ts and
responsive.spec.ts with calls to this helper.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 96ffb0c9-eec8-4b81-a20a-c1136292d50f

📥 Commits

Reviewing files that changed from the base of the PR and between c843f8a and 3b72205.

📒 Files selected for processing (5)
  • components/header.tsx
  • components/mobile-icons-bar.tsx
  • components/settings/components/settings.tsx
  • tests/header.spec.ts
  • tests/responsive.spec.ts
💤 Files with no reviewable changes (1)
  • components/mobile-icons-bar.tsx
📜 Review details
🔇 Additional comments (6)
tests/responsive.spec.ts (2)

8-10: The duplicated text=Later dismissal pattern across these beforeEach hooks is already flagged in tests/header.spec.ts. Consider extracting to a shared helper as proposed there.

Also applies to: 50-52, 105-107, 207-209, 244-246


24-24: LGTM!

components/settings/components/settings.tsx (2)

76-81: LGTM!

Also applies to: 164-164, 176-181, 242-279


10-10: Earth is a valid lucide-react export The Earth import exists in lucide-react@0.507.0, so this warning can be dismissed.

			> Likely an incorrect or invalid review comment.
components/header.tsx (1)

5-5: LGTM!

Also applies to: 84-84

tests/header.spec.ts (1)

11-22: LGTM!

Comment thread tests/header.spec.ts
Comment on lines +6 to 9
try {
await page.locator('text=Later').click({ timeout: 3000 });
} catch (e) {}
});

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.

📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Extract the Later dismissal into a shared test helper.

The same try/catch block to dismiss the optional text=Later prompt is duplicated across 6 beforeEach hooks (1 in this file, 5 in tests/responsive.spec.ts). Extract it into a shared helper to reduce duplication and make future changes easier.

♻️ Proposed helper extraction

Create a shared helper, e.g. in tests/utils.ts:

export async function dismissOptionalLaterPrompt(page: import('`@playwright/test`').Page) {
  try {
    await page.locator('text=Later').click({ timeout: 3000 });
  } catch {}
}

Then use it in each beforeEach:

 test.beforeEach(async ({ page }) => {
   await page.goto('/');
-  try {
-    await page.locator('text=Later').click({ timeout: 3000 });
-  } catch (e) {}
+  await dismissOptionalLaterPrompt(page);
 });
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@tests/header.spec.ts` around lines 6 - 9, Extract the duplicated optional
“Later” prompt dismissal into a shared helper such as dismissOptionalLaterPrompt
in tests/utils.ts, preserving the existing locator, timeout, and swallowed-error
behavior. Replace the inline try/catch blocks in the beforeEach hooks of
header.spec.ts and responsive.spec.ts with calls to this helper.

…equal icon spacing, fix resolution search

- Enable profile toggle on mobile (removed disabled prop, added onClick to open settings)
- Move theme selector icons above settings tabs instead of separate Theme tab
- Make mobile icons bar icons equally spaced using flex-1 wrappers
- Fix resolution search button disabled logic to support Google Maps (check mapProvider)
- Update tests to reflect new behavior
@ngoiyaeric ngoiyaeric merged commit 622d566 into main Jul 10, 2026
5 of 6 checks passed
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