Skip to content

feat: theme-specific white-label logos#48

Open
pthmas wants to merge 2 commits intomainfrom
pthmas/light-dark-logos
Open

feat: theme-specific white-label logos#48
pthmas wants to merge 2 commits intomainfrom
pthmas/light-dark-logos

Conversation

@pthmas
Copy link
Copy Markdown
Collaborator

@pthmas pthmas commented Mar 31, 2026

Summary

  • add separate light and dark white-label logo config fields while keeping the shared logo as fallback
  • resolve the active app logo and favicon from the current theme, reusing the available custom logo when only one is configured
  • cover the new backend config/API shape and frontend logo resolution with tests

Summary by CodeRabbit

  • New Features

    • Theme-aware logo support: configure separate light and dark logos; the app selects the appropriate logo with fallback to the general logo when needed.
  • Documentation

    • Example environment settings updated to show optional light/dark logo URL entries.
  • Tests

    • Added/updated tests to verify theme-specific logo selection and fallback behavior.

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 31, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 9e1579a8-3c2e-418e-857a-fae71bfe1ab9

📥 Commits

Reviewing files that changed from the base of the PR and between e508a55 and daa99c1.

⛔ Files ignored due to path filters (1)
  • frontend/bun.lock is excluded by !**/*.lock
📒 Files selected for processing (3)
  • frontend/package.json
  • frontend/src/hooks/useChartData.ts
  • frontend/tsconfig.app.json
✅ Files skipped from review due to trivial changes (2)
  • frontend/tsconfig.app.json
  • frontend/src/hooks/useChartData.ts

📝 Walkthrough

Walkthrough

This PR adds theme-specific logo support by introducing optional CHAIN_LOGO_URL_LIGHT and CHAIN_LOGO_URL_DARK config fields. The backend CLI/env/config, AppState and API BrandingConfig were extended to carry these values; the frontend received theme-aware logo resolution and favicon updates to prefer light/dark variants.

Changes

Cohort / File(s) Summary
Environment Configuration
\.env.example
Added CHAIN_LOGO_URL_LIGHT and CHAIN_LOGO_URL_DARK environment variable entries.
Backend CLI & Configuration
backend/crates/atlas-server/src/cli.rs, backend/crates/atlas-server/src/config.rs
Added logo_url_light / logo_url_dark to CLI ChainArgs and Config; populated from --atlas.chain.logo-url-light / --atlas.chain.logo-url-dark and CHAIN_LOGO_URL_LIGHT / CHAIN_LOGO_URL_DARK with trimming and blank->None logic.
Backend API State & Handlers
backend/crates/atlas-server/src/api/mod.rs, backend/crates/atlas-server/src/api/handlers/config.rs, backend/crates/atlas-server/src/main.rs
Added chain_logo_url_light and chain_logo_url_dark to AppState; extended BrandingConfig and get_config to include these optional fields; passed config values into AppState construction.
Backend Tests / Fixtures
backend/crates/atlas-server/src/api/handlers/faucet.rs, backend/crates/atlas-server/src/api/handlers/status.rs, backend/crates/atlas-server/tests/integration/common.rs
Updated test state helpers and fixtures to initialize the new chain_logo_url_light/chain_logo_url_dark fields (set to None); added unit tests for conditional serialization and env trimming.
Frontend API Typings
frontend/src/api/config.ts
Extended BrandingConfig interface with optional logo_url_light? and logo_url_dark? fields to match backend contract.
Frontend Branding Utilities & Tests
frontend/src/context/branding.ts, frontend/src/context/branding.test.ts
Added resolveLogoUrl and resolveBrandingValue helpers; new tests covering theme-specific selection, fallbacks, and null behavior.
Frontend Branding Context
frontend/src/context/BrandingContext.tsx
Refactored to use theme-aware resolution, added setFavicon helper, split effects so branding/title/favicon update when [config, theme] changes; uses theme-resolved logo on init and updates.
Build / Types
frontend/package.json, frontend/tsconfig.app.json
Switched build script to bunx vite build and added @types/bun; added bun to TS global types.
Timer Typing
frontend/src/hooks/useChartData.ts
Changed timeoutId types to `ReturnType

Sequence Diagram(s)

sequenceDiagram
  participant Env as Environment / CLI
  participant Backend as Atlas Server
  participant API as /api/config GET
  participant Frontend as Browser App
  participant Branding as BrandingContext

  Env->>Backend: start with CHAIN_LOGO_URL_LIGHT/DARK or CLI args
  Backend->>Backend: Config::from_env / from_run_args -> populate Config fields
  Backend->>API: build AppState with chain_logo_url_light/dark
  Frontend->>API: GET /api/config
  API-->>Frontend: JSON includes logo_url_light/logo_url_dark when set
  Frontend->>Branding: BrandingContext receives config + theme
  Branding->>Branding: resolveLogoUrl(config, theme)
  Branding->>Frontend: set document.title and favicon (fallback to default if null)
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Suggested reviewers

  • tac0turtle

Poem

🐰 Two logos, light and dark, I bring with cheer,
The theme decides which one hops near.
I set the favicon and name with delight,
Day or night, our branding looks just right! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 44.83% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'feat: theme-specific white-label logos' directly and clearly describes the main change—adding theme-aware logo configuration options for white-label customization.

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

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch pthmas/light-dark-logos

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 and usage tips.

@pthmas pthmas changed the title Add theme-specific white-label logos feat: theme-specific white-label logos Mar 31, 2026
Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🧹 Nitpick comments (1)
frontend/src/context/BrandingContext.tsx (1)

20-29: Consider deriving favicon MIME type from the URL.

The type='image/png' is hardcoded, but logos could be SVG or other formats. While browsers typically ignore this attribute for favicons, consider deriving from the URL extension for correctness:

🔧 Optional: derive type from URL
 function setFavicon(href: string) {
   let link = document.querySelector<HTMLLinkElement>("link[rel='icon']");
   if (!link) {
     link = document.createElement('link');
     link.rel = 'icon';
-    link.type = 'image/png';
     document.head.appendChild(link);
   }
+  // Derive type from extension, fallback to png
+  const ext = href.split('.').pop()?.toLowerCase();
+  link.type = ext === 'svg' ? 'image/svg+xml' : 'image/png';
   link.href = href;
 }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@frontend/src/context/BrandingContext.tsx` around lines 20 - 29, The
setFavicon function currently hardcodes link.type = 'image/png'; change it to
derive the MIME type from the href extension: parse the href (strip query/hash),
get the file extension (svg, png, ico, jpg/jpeg, webp, etc.), map it to the
correct MIME (e.g., image/svg+xml, image/png, image/x-icon, image/jpeg,
image/webp) and set link.type to that value (or omit/set to empty if unknown);
update the code around the document.querySelector/createElement logic so
link.type uses this derived MIME before appending or updating the href, and
ensure it handles URLs with query strings or fragments.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@frontend/src/context/branding.test.ts`:
- Around line 1-2: The CI fails because TypeScript type-checking runs over test
files importing "bun:test" (see frontend/src/context/branding.test.ts import of
'bun:test'), so replace the build pipeline command "tsc -b && vite build" in
package.json with "bunx vite build" to skip global tsc type-checking; also add
"@types/bun" to devDependencies and update tsconfig.app.json to include "types":
["bun/types"] so editors/linters resolve bun symbols (affects imports like
'bun:test' and functions referenced such as resolveLogoUrl).

---

Nitpick comments:
In `@frontend/src/context/BrandingContext.tsx`:
- Around line 20-29: The setFavicon function currently hardcodes link.type =
'image/png'; change it to derive the MIME type from the href extension: parse
the href (strip query/hash), get the file extension (svg, png, ico, jpg/jpeg,
webp, etc.), map it to the correct MIME (e.g., image/svg+xml, image/png,
image/x-icon, image/jpeg, image/webp) and set link.type to that value (or
omit/set to empty if unknown); update the code around the
document.querySelector/createElement logic so link.type uses this derived MIME
before appending or updating the href, and ensure it handles URLs with query
strings or fragments.
🪄 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: defaults

Review profile: CHILL

Plan: Pro

Run ID: a4d52312-074f-4722-9206-8f8a9d852b30

📥 Commits

Reviewing files that changed from the base of the PR and between 1f86eb2 and e508a55.

📒 Files selected for processing (13)
  • .env.example
  • backend/crates/atlas-server/src/api/handlers/config.rs
  • backend/crates/atlas-server/src/api/handlers/faucet.rs
  • backend/crates/atlas-server/src/api/handlers/status.rs
  • backend/crates/atlas-server/src/api/mod.rs
  • backend/crates/atlas-server/src/cli.rs
  • backend/crates/atlas-server/src/config.rs
  • backend/crates/atlas-server/src/main.rs
  • backend/crates/atlas-server/tests/integration/common.rs
  • frontend/src/api/config.ts
  • frontend/src/context/BrandingContext.tsx
  • frontend/src/context/branding.test.ts
  • frontend/src/context/branding.ts

@pthmas
Copy link
Copy Markdown
Collaborator Author

pthmas commented Mar 31, 2026

@coderabbitai review

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 31, 2026

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

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