Skip to content

Add active site icons to the UI#3266

Open
youknowriad wants to merge 1 commit intotrunkfrom
add-site-icon-sidebar
Open

Add active site icons to the UI#3266
youknowriad wants to merge 1 commit intotrunkfrom
add-site-icon-sidebar

Conversation

@youknowriad
Copy link
Copy Markdown
Contributor

@youknowriad youknowriad commented Apr 28, 2026

Adds active site icons to the sidebar list and collapsed site header so the current site remains identifiable in compact layouts.

Proposed Changes

  • Adds a reusable SiteIcon component for compact site identity in UI chrome.
  • Shows the icon next to the active site title in the sidebar list with an animated transition.
  • Shows the same icon in the site status dropdown header when the sidebar is collapsed on session and site settings views.

Testing Instructions

  • Open Studio with multiple sites and confirm the active site row in the sidebar shows its icon next to the site title.
  • Switch between sites and confirm the icon transition does not shift the surrounding sidebar layout unexpectedly.
  • Collapse the sidebar and confirm the session and site settings headers show the active site icon in the status dropdown trigger.
  • Check a site without a custom icon and confirm the fallback icon still looks aligned and legible.

Automated Checks

  • npx eslint --fix apps/ui/src/components/session-view/index.tsx apps/ui/src/components/session-view/style.module.css apps/ui/src/components/site-dropdown/dropdown-trigger.module.css apps/ui/src/components/site-dropdown/dropdown-trigger.tsx apps/ui/src/components/site-dropdown/index.tsx apps/ui/src/components/site-list/index.tsx apps/ui/src/components/site-list/style.module.css apps/ui/src/components/site-settings-view/index.tsx apps/ui/src/components/site-icon/index.tsx apps/ui/src/components/site-icon/style.module.css
  • npm run typecheck
  • npm test -- --passWithNoTests apps/ui/src/components/site-list apps/ui/src/components/site-dropdown apps/ui/src/components/session-view apps/ui/src/components/site-settings-view

Pre-merge Checklist

  • Have you checked for TypeScript, React or other console errors?

@wpmobilebot
Copy link
Copy Markdown
Collaborator

📊 Performance Test Results

Comparing 592c282 vs trunk

app-size

Metric trunk 592c282 Diff Change
App Size (Mac) 1453.95 MB 1453.95 MB +0.00 MB ⚪ 0.0%

site-editor

Metric trunk 592c282 Diff Change
load 1904 ms 1813 ms 91 ms 🟢 -4.8%

site-startup

Metric trunk 592c282 Diff Change
siteCreation 8087 ms 8084 ms 3 ms ⚪ 0.0%
siteStartup 4951 ms 4959 ms +8 ms ⚪ 0.0%

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

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