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

Author: youknowriad

apps/studio/src/ipc-handlers.ts

@@ -616,13 +616,26 @@ function readProcessManagerLogs( siteId: string ): { stdout?: string[]; stderr?:
 export async function getSiteDetails( _event: IpcMainInvokeEvent ): Promise< SiteDetails[] > {
 	const sites = SiteServer.getAllDetails();
 	const userData = await loadUserData();
-	for ( const site of sites ) {
-		const appdataSite = userData.siteMetadata[ site.id ];
-		if ( appdataSite ) {
+	await Promise.all(
+		sites.map( async ( site ) => {
+			const appdataSite = userData.siteMetadata[ site.id ];
+			if ( ! appdataSite ) {
+				return;
+			}
 			site.sortOrder = appdataSite.sortOrder;
 			site.themeDetails = appdataSite.themeDetails;
-		}
-	}
+			site.siteIconPath = appdataSite.siteIconPath;
+
+			// Read the icon file from disk and hand the renderer a data URL.
+			// Keeping the base64 out of the persisted appdata avoids bloating
+			// app.json with image bytes.
+			if ( appdataSite.siteIconPath ) {
+				site.siteIcon = await getImageData( appdataSite.siteIconPath );
+			} else if ( appdataSite.siteIconPath === null ) {
+				site.siteIcon = null;
+			}
+		} )
+	);
 
 	return sites;
 }
@@ -694,6 +707,7 @@ export async function createSite(
 		// If the site is running after creation, fetch theme details and update thumbnail
 		if ( server.details.running ) {
 			void loadThemeDetails( event, server.details.id );
+			void loadSiteIcon( event, server.details.id );
 		}
 
 		return server.details;
@@ -878,6 +892,7 @@ export async function startServer( event: IpcMainInvokeEvent, id: string ): Prom
 
 	if ( server.details.running ) {
 		void loadThemeDetails( event, id );
+		void loadSiteIcon( event, id );
 	}
 
 	// Keep managed instruction files (STUDIO.md, CLAUDE.md) up-to-date
@@ -1264,6 +1279,29 @@ export async function loadThemeDetails(
 	return themeDetails;
 }
 
+// Mirror of loadThemeDetails for the Site Icon: fetch from the running
+// site's mu-plugin command and persist the resolved path so the renderer
+// can read it back from appdata via getSiteDetails.
+export async function loadSiteIcon(
+	_event: IpcMainInvokeEvent,
+	id: string
+): Promise< StartedSiteDetails[ 'siteIconPath' ] > {
+	const server = SiteServer.get( id );
+	if ( ! server ) {
+		throw new Error( 'Site not found.' );
+	}
+
+	const oldIconPath = server.details.siteIconPath;
+	const iconPath = await server.getSiteIcon();
+	const hasIconChanged = iconPath !== oldIconPath;
+
+	if ( hasIconChanged ) {
+		await server.persistSiteIcon();
+	}
+
+	return iconPath;
+}
+
 export async function getOnboardingData( _event: IpcMainInvokeEvent ): Promise< boolean > {
 	const userData = await loadUserData();
 	const { onboardingCompleted = false } = userData;

apps/studio/src/ipc-types.d.ts

@@ -31,6 +31,13 @@ interface StoppedSiteDetails {
 		supportsWidgets: boolean;
 		supportsMenus: boolean;
 	};
+	// Absolute filesystem path of the configured WordPress Site Icon.
+	// `null` means we've checked and the site has no icon configured;
+	// `undefined` means we've never fetched.
+	siteIconPath?: string | null;
+	// Data URL produced from `siteIconPath` for the renderer to display.
+	// Computed at the IPC boundary in `getSiteDetails`, never persisted.
+	siteIcon?: string | null;
 	isAddingSite?: boolean;
 	autoStart?: boolean;
 	latestCliPid?: number;

apps/studio/src/modules/cli/lib/cli-events-subscriber.ts

@@ -20,6 +20,7 @@ const STUDIO_ONLY_DETAIL_KEYS = [
 	'tlsKey',
 	'tlsCert',
 	'themeDetails',
+	'siteIconPath',
 	'sortOrder',
 	'isAddingSite',
 	'latestCliPid',
@@ -104,6 +105,7 @@ const handleSiteEvent = sequential( async ( event: SiteEvent ): Promise< void >
 	if ( wasNotRunning && running ) {
 		void captureSiteThumbnail( siteId );
 		await server.getThemeDetails();
+		await server.getSiteIcon();
 	}
 } );
 

apps/studio/src/preload.ts

@@ -97,6 +97,7 @@ const api: IpcApi = {
 	showItemInFolder: ( path ) => ipcRendererSend( 'showItemInFolder', path ),
 	loadThemeDetails: ( id, emitLoadingEvent = true ) =>
 		ipcRendererInvoke( 'loadThemeDetails', id, emitLoadingEvent ),
+	loadSiteIcon: ( id ) => ipcRendererInvoke( 'loadSiteIcon', id ),
 	getThumbnailData: ( id ) => ipcRendererInvoke( 'getThumbnailData', id ),
 	getInstalledAppsAndTerminals: () => ipcRendererInvoke( 'getInstalledAppsAndTerminals' ),
 	importSite: ( siteId, importArchivePath, options ) =>

apps/studio/src/site-server.ts

@@ -437,6 +437,55 @@ export class SiteServer {
 		}
 	}
 
+	private static siteIconSchema = z.object( {
+		relativePath: z.string(),
+	} );
+
+	async getSiteIcon(): Promise< SiteDetails[ 'siteIconPath' ] > {
+		if ( ! this.details.running ) {
+			return this.details.siteIconPath;
+		}
+
+		try {
+			const { stdout, stderr, exitCode } = await this.executeWpCliCommand( [
+				'studio',
+				'get-site-icon',
+			] );
+
+			if ( exitCode !== 0 ) {
+				console.error( 'Failed to get site icon via WP-CLI', { exitCode, stdout, stderr } );
+				return this.details.siteIconPath;
+			}
+
+			const parsed = parseJsonFromPhpOutput( stdout );
+			if ( parsed === null ) {
+				this.details.siteIconPath = null;
+			} else {
+				const { relativePath } = SiteServer.siteIconSchema.parse( parsed );
+				this.details.siteIconPath = nodePath.join( this.details.path, relativePath );
+			}
+		} catch ( error ) {
+			console.error( 'Failed to get site icon:', error );
+		}
+
+		return this.details.siteIconPath;
+	}
+
+	async persistSiteIcon(): Promise< void > {
+		try {
+			await lockAppdata();
+			const userData = await loadUserData();
+			const siteId = this.details.id;
+			userData.siteMetadata[ siteId ] = {
+				...userData.siteMetadata[ siteId ],
+				siteIconPath: this.details.siteIconPath,
+			};
+			await saveUserData( userData );
+		} finally {
+			await unlockAppdata();
+		}
+	}
+
 	async hasSQLitePlugin(): Promise< boolean > {
 		const wpContentPath = nodePath.join( this.details.path, 'wp-content' );
 

apps/studio/src/storage/storage-types.ts

@@ -13,6 +13,7 @@ export interface WindowBounds {
 
 export interface AppdataSiteData {
 	themeDetails?: SiteDetails[ 'themeDetails' ];
+	siteIconPath?: SiteDetails[ 'siteIconPath' ];
 	sortOrder?: number;
 }
 

apps/ui/src/components/session-view/index.tsx

@@ -22,6 +22,7 @@ import { Conversation } from '@/components/session-view/conversation';
 import { EmptyBackground } from '@/components/session-view/empty-background';
 import { QueuedPrompts } from '@/components/session-view/queued-prompts';
 import { SiteDropdown } from '@/components/site-dropdown';
+import { SiteIcon } from '@/components/site-icon';
 import { SitePreview } from '@/components/site-preview';
 import { type Annotation } from '@/components/site-preview/types';
 import { useConnector } from '@/data/core';
@@ -72,9 +73,16 @@ function SessionHeader( {
 		<div className={ styles.header }>
 			{ toggleSpacerClass ? <span className={ toggleSpacerClass } aria-hidden="true" /> : null }
 			{ site ? (
-				<SiteDropdown site={ site } activeEnvironment={ effectiveEnvironment } />
+				<SiteDropdown
+					site={ site }
+					activeEnvironment={ effectiveEnvironment }
+					showSiteIcon={ sidebarCollapsed }
+				/>
 			) : (
 				<>
+					{ sidebarCollapsed ? (
+						<SiteIcon className={ styles.headerSiteIcon } seed={ siteName } />
+					) : null }
 					<span className={ styles.headerSite }>{ siteName }</span>
 					<span className={ styles.headerDot } aria-hidden="true" />
 					<span className={ styles.headerEnv }>

apps/ui/src/components/session-view/style.module.css

@@ -18,7 +18,6 @@
 	color: var(--wpds-color-fg-content-neutral-weak);
 }
 
-
 .header {
 	display: flex;
 	align-items: center;
@@ -52,6 +51,10 @@
 	font-weight: 600;
 }
 
+.headerSiteIcon {
+	margin-inline-end: calc(-1 * var(--wpds-dimension-padding-xs));
+}
+
 .headerDot {
 	width: 6px;
 	height: 6px;

apps/ui/src/components/site-dropdown/dropdown-trigger.module.css

@@ -2,6 +2,10 @@
 	gap: var(--wpds-dimension-padding-lg);
 }
 
+.siteIcon {
+	margin-inline-end: calc(-1 * var(--wpds-dimension-padding-sm));
+}
+
 .site {
 	font-weight: 600;
 }

apps/ui/src/components/site-dropdown/dropdown-trigger.tsx

@@ -3,6 +3,7 @@ import { chevronDownSmall } from '@wordpress/icons';
 import { Button, Icon } from '@wordpress/ui';
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
+import { SiteIcon } from '@/components/site-icon';
 import styles from './dropdown-trigger.module.css';
 import type { ComponentProps, ElementRef } from 'react';
 
@@ -14,11 +15,25 @@ type Props = Omit< ComponentProps< typeof Button >, 'children' > & {
 	status: SiteStatus;
 	statusLabel: string;
 	environment: 'local' | 'live';
+	showSiteIcon?: boolean;
+	siteIconSeed?: string;
+	siteIconImage?: string | null;
 };
 
 export const DropdownTrigger = forwardRef< ElementRef< typeof Button >, Props >(
 	function DropdownTrigger(
-		{ siteName, siteUrl, status, statusLabel, environment, className, ...props },
+		{
+			siteName,
+			siteUrl,
+			status,
+			statusLabel,
+			environment,
+			showSiteIcon = false,
+			siteIconSeed,
+			siteIconImage,
+			className,
+			...props
+		},
 		ref
 	) {
 		// In live mode the local server's running/stopped status is irrelevant
@@ -34,6 +49,13 @@ export const DropdownTrigger = forwardRef< ElementRef< typeof Button >, Props >(
 				className={ clsx( styles.trigger, className ) }
 				{ ...props }
 			>
+				{ showSiteIcon ? (
+					<SiteIcon
+						className={ styles.siteIcon }
+						seed={ siteIconSeed ?? `${ siteName }:${ siteUrl }` }
+						imageSrc={ siteIconImage }
+					/>
+				) : null }
 				<span className={ styles.site }>{ siteName }</span>
 				<span className={ styles.status }>
 					<span className={ clsx( styles.dot, dotClass ) } role="img" aria-label={ statusLabel } />