Skip to content

apps/ui: Add active site icons to the UI#3266

Merged
youknowriad merged 5 commits into
trunkfrom
add-site-icon-sidebar
May 3, 2026
Merged

apps/ui: Add active site icons to the UI#3266
youknowriad merged 5 commits into
trunkfrom
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

wpmobilebot commented Apr 28, 2026

📊 Performance Test Results

Comparing 8bcac07 vs trunk

app-size

Metric trunk 8bcac07 Diff Change
App Size (Mac) 1557.90 MB 1557.91 MB +0.01 MB ⚪ 0.0%

site-editor

Metric trunk 8bcac07 Diff Change
load 1507 ms 1533 ms +26 ms ⚪ 0.0%

site-startup

Metric trunk 8bcac07 Diff Change
siteCreation 8079 ms 8096 ms +17 ms ⚪ 0.0%
siteStartup 4953 ms 4949 ms 4 ms ⚪ 0.0%

Results are median values from multiple test runs.

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

youknowriad and others added 3 commits May 3, 2026 11:24
Adds a `wp studio get-site-icon` mu-plugin command that reports the icon
attachment's path. SiteServer caches the host path in app.json and the
IPC boundary reads the file as a data URL so the renderer can show it
in the sidebar `SiteIcon`. Falls back to the procedural mesh gradient
when no icon is configured or the image fails to load. Backfills icons
for sites already running at app launch since they never trigger the
cli-events-subscriber's running-transition branch.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@youknowriad youknowriad force-pushed the add-site-icon-sidebar branch from a6358eb to dea8b47 Compare May 3, 2026 11:30
Comment thread apps/studio/src/modules/cli/lib/cli-events-subscriber.ts Outdated
Comment thread apps/studio/src/index.ts Outdated
Comment thread apps/studio/src/site-server.ts Outdated
Comment thread apps/studio/src/site-server.ts
youknowriad and others added 2 commits May 3, 2026 12:37
Mirrors the loadThemeDetails / persistThemeDetails pair: re-add
persistSiteIcon and call it from a new loadSiteIcon IPC handler
invoked alongside loadThemeDetails after createSite and startServer.
The cli-events-subscriber stays in-memory only.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@youknowriad youknowriad changed the title Add active site icons to the UI apps/ui: Add active site icons to the UI May 3, 2026
@youknowriad youknowriad merged commit 6340abd into trunk May 3, 2026
11 checks passed
@youknowriad youknowriad deleted the add-site-icon-sidebar branch May 3, 2026 12:53
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