fix(ui): theme flash on navigation + search filter button alignment by timon0305 · Pull Request #41 · cppalliance/cppa-cursor-browser

timon0305 · 2026-05-15T22:16:07Z

Closes #40.

Theme flash: add a synchronous IIFE in <head> that reads localStorage.theme and sets data-theme on documentElement BEFORE the stylesheet is parsed, so the first paint uses the user's stored palette. Wrapped in try/catch for storage-blocked browsers. The existing applyTheme() on DOMContentLoaded stays as the source of truth for runtime toggles.

Search button alignment: add style="align-self:center" to the .btn-group in templates/search.html so the filter buttons vertically center with the <h1>Search</h1>. Scoped to the search page so other pages using the shared .page-header aren't touched.

Test plan

In light mode, click between projects / chats / search — no dark flash on navigation
In dark mode, same — no light flash, theme stays dark
/search — filter buttons vertically centered with the Search heading

Summary by CodeRabbit

New Features
- Theme preference now loads instantly without visual flashing
Style
- Improved alignment of search filter buttons

- base.html: apply stored theme synchronously in <head> so light-mode users no longer see a brief dark paint on every navigation - search.html: vertically center the All / Ask Logs / Agent Logs filter buttons with the Search heading

coderabbitai · 2026-05-15T22:16:19Z

📝 Walkthrough

Walkthrough

This PR addresses two cosmetic UI issues. It adds an early theme initialization script to templates/base.html that reads the user's theme preference from localStorage before the stylesheet loads, eliminating a visible theme flash during navigation. It also centers the filter button group on the search page by adding a vertical alignment style.

Changes

UI Cosmetic Fixes

Layer / File(s)	Summary
Theme flash prevention with early localStorage read `templates/base.html`	Inline `<script>` in the document head reads the saved `theme` from `localStorage` (defaulting to `dark`) and sets `data-theme` on `document.documentElement` before the stylesheet loads, with `try/catch` error handling to prevent theme initialization errors.
Search filter button vertical alignment `templates/search.html`	Filter button group wrapper updated with inline `style="align-self:center"` to center the buttons vertically with the page heading instead of aligning flush to the top.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 The theme now holds before paint,
No flash to make a complaint,
The buttons sit just right,
With headers, aligned tight—
Two tweaks to banish UI taint! ✨

🚥 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	The PR title directly and accurately summarizes both main changes: fixing theme flash on navigation and search filter button alignment.
Linked Issues check	✅ Passed	The code changes fully address both requirements from issue `#40`: the theme initialization script in base.html prevents theme flash, and the align-self:center style centers search filter buttons.
Out of Scope Changes check	✅ Passed	Both changes are scoped precisely to the objectives in issue `#40` with no unrelated modifications; the inline script and style alignment change directly target the identified UI bugs.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch feat/ui-layout-consistency

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

coderabbitai

🧹 Nitpick comments (1)

templates/base.html (1)

12-13: ⚡ Quick win

Validate stored theme before applying it.

At Line 12–Line 13, any localStorage.theme value is accepted. A stale/invalid value can leave data-theme in an unsupported state and break styling consistency.

Suggested hardening

-        var t = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', t);
+        var t = localStorage.getItem('theme');
+        var theme = (t === 'light' || t === 'dark') ? t : 'dark';
+        document.documentElement.setAttribute('data-theme', theme);

🤖 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 `@templates/base.html` around lines 12 - 13, The code currently trusts
localStorage.getItem('theme') and directly sets
document.documentElement.setAttribute('data-theme', t'), which can apply
stale/invalid themes; update the logic around localStorage.getItem('theme') to
validate t against a whitelist of supported values (e.g. 'light' and 'dark') and
only call document.documentElement.setAttribute('data-theme', t) when t is one
of those values, otherwise fall back to the default ('dark'); reference the
existing localStorage.getItem('theme') retrieval and
document.documentElement.setAttribute('data-theme', t) lines when making the
change.

🤖 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.

Nitpick comments:
In `@templates/base.html`:
- Around line 12-13: The code currently trusts localStorage.getItem('theme') and
directly sets document.documentElement.setAttribute('data-theme', t'), which can
apply stale/invalid themes; update the logic around
localStorage.getItem('theme') to validate t against a whitelist of supported
values (e.g. 'light' and 'dark') and only call
document.documentElement.setAttribute('data-theme', t) when t is one of those
values, otherwise fall back to the default ('dark'); reference the existing
localStorage.getItem('theme') retrieval and
document.documentElement.setAttribute('data-theme', t) lines when making the
change.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 09503fe9-dc4e-4eee-a80b-6f227282e4fe

📥 Commits

Reviewing files that changed from the base of the PR and between 0018ce7 and 74e9840.

📒 Files selected for processing (2)

templates/base.html
templates/search.html

timon0305 self-assigned this May 15, 2026

coderabbitai Bot reviewed May 15, 2026

View reviewed changes

timon0305 requested a review from wpak-ai May 15, 2026 22:19

wpak-ai approved these changes May 15, 2026

View reviewed changes

wpak-ai merged commit 91a8d6e into master May 15, 2026
11 checks passed

wpak-ai deleted the feat/ui-layout-consistency branch May 15, 2026 22:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(ui): theme flash on navigation + search filter button alignment#41

fix(ui): theme flash on navigation + search filter button alignment#41
wpak-ai merged 1 commit into
masterfrom
feat/ui-layout-consistency

timon0305 commented May 15, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 15, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

timon0305 commented May 15, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test plan

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented May 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

timon0305 commented May 15, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 15, 2026 •

edited

Loading