From 54b7291f7a022edc7d0cf0e75cd856a49a83b207 Mon Sep 17 00:00:00 2001
From: Shaun Andrews <shaun@automattic.com>
Date: Mon, 6 Jul 2026 13:24:42 -0400
Subject: [PATCH] Show the sidebar Studio wordmark only in the browser UI, not
 the desktop app

---
 apps/ui/src/components/sidebar-header/index.tsx        | 8 +++++++-
 apps/ui/src/components/sidebar-header/style.module.css | 9 +++++----
 apps/ui/src/data/core/connectors/hosted/index.ts       | 1 +
 apps/ui/src/data/core/connectors/ipc/index.ts          | 1 +
 apps/ui/src/data/core/connectors/local/index.ts        | 1 +
 apps/ui/src/data/core/types.ts                         | 4 ++++
 6 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/apps/ui/src/components/sidebar-header/index.tsx b/apps/ui/src/components/sidebar-header/index.tsx
index 5b586c2a03..bb8ea2974a 100644
--- a/apps/ui/src/components/sidebar-header/index.tsx
+++ b/apps/ui/src/components/sidebar-header/index.tsx
@@ -3,6 +3,7 @@ import { __ } from '@wordpress/i18n';
 import { comment, download, globe, plus } from '@wordpress/icons';
 import { Icon, IconButton } from '@wordpress/ui';
 import * as Menu from '@/components/menu';
+import { useConnector } from '@/data/core';
 import { useTrafficLightSpace } from '@/hooks/use-traffic-light-space';
 import { drawerIcon } from '@/lib/icons';
 import styles from './style.module.css';
@@ -12,11 +13,16 @@ type Props = {
 };
 
 export function SidebarHeader( { onToggleSidebar }: Props ) {
+	const connector = useConnector();
 	const reserveTrafficLightSpace = useTrafficLightSpace();
 	const navigate = useNavigate();
 	return (
 		<div className={ `${ styles.root } ${ reserveTrafficLightSpace ? '' : styles.flush }` }>
-			<span className={ styles.title }>{ __( 'Studio' ) }</span>
+			{ /* In a browser tab nothing else names the app, so the header carries a
+			     small wordmark. In the desktop app the window chrome already does. */ }
+			{ ! connector.capabilities.appWindow ? (
+				<span className={ styles.title }>{ __( 'Studio' ) }</span>
+			) : null }
 			<div className={ styles.actions }>
 				<Menu.Root modal={ false }>
 					<Menu.Trigger
diff --git a/apps/ui/src/components/sidebar-header/style.module.css b/apps/ui/src/components/sidebar-header/style.module.css
index 264d632622..0a0e9f26e5 100644
--- a/apps/ui/src/components/sidebar-header/style.module.css
+++ b/apps/ui/src/components/sidebar-header/style.module.css
@@ -23,14 +23,15 @@
 
 /* When there are no traffic lights to clear — non-macOS, the browser
    (`studio ui` / hosted), or macOS fullscreen (which hides them) — reclaim the
-   reserved padding and align the title with the site list entries below. The
-   site list outer padding is `2xl` and its rows now start flush with that edge
-   (no row/button inline-start padding), so the site label text starts at `2xl`
-   from the sidebar edge. */
+   reserved padding so the header content lines up with the site list entries
+   below. The site list outer padding is `2xl` and its rows start flush with
+   that edge, so text starts at `2xl` from the sidebar edge. */
 .flush {
 	padding-left: var(--wpds-dimension-padding-2xl);
 }
 
+/* Browser-tab wordmark (see the `appWindow` capability) — hidden in the
+   desktop app, where the window chrome already names the app. */
 .title {
 	flex: 1;
 	min-width: 0;
diff --git a/apps/ui/src/data/core/connectors/hosted/index.ts b/apps/ui/src/data/core/connectors/hosted/index.ts
index f156b39748..1ef592638e 100644
--- a/apps/ui/src/data/core/connectors/hosted/index.ts
+++ b/apps/ui/src/data/core/connectors/hosted/index.ts
@@ -112,6 +112,7 @@ export function createHostedConnector( { apiBaseUrl }: HostedConnectorOptions ):
 			nativeSaveDialog: false,
 			openInOS: false,
 			annotatePreview: false,
+			appWindow: false,
 		},
 
 		// Auth — runs unauthenticated, like the desktop app. WordPress.com login
diff --git a/apps/ui/src/data/core/connectors/ipc/index.ts b/apps/ui/src/data/core/connectors/ipc/index.ts
index d4a7e14f08..92e9fe0797 100644
--- a/apps/ui/src/data/core/connectors/ipc/index.ts
+++ b/apps/ui/src/data/core/connectors/ipc/index.ts
@@ -204,6 +204,7 @@ export function createIpcConnector(): Connector {
 			nativeSaveDialog: true,
 			openInOS: true,
 			annotatePreview: true,
+			appWindow: true,
 		},
 
 		// Auth — optional in Electron, delegated to main process
diff --git a/apps/ui/src/data/core/connectors/local/index.ts b/apps/ui/src/data/core/connectors/local/index.ts
index 56839f5c0d..b740c66d50 100644
--- a/apps/ui/src/data/core/connectors/local/index.ts
+++ b/apps/ui/src/data/core/connectors/local/index.ts
@@ -213,6 +213,7 @@ export function createLocalConnector( { apiBaseUrl }: LocalConnectorOptions ): C
 			nativeSaveDialog: false,
 			openInOS: true,
 			annotatePreview: false,
+			appWindow: false,
 		},
 
 		// Auth — surfaces the WordPress.com user the CLI is already logged in as
diff --git a/apps/ui/src/data/core/types.ts b/apps/ui/src/data/core/types.ts
index d1a5171cfc..b4d814d317 100644
--- a/apps/ui/src/data/core/types.ts
+++ b/apps/ui/src/data/core/types.ts
@@ -110,6 +110,10 @@ export interface ConnectorCapabilities {
 	// browser the preview is a cross-origin <iframe> that can't be injected, so
 	// the Annotate control is hidden.
 	annotatePreview: boolean;
+	// The UI runs in a dedicated app window whose chrome (dock icon, title bar)
+	// already identifies the app. When false — a browser tab (`studio ui` /
+	// hosted) — the sidebar header shows a small "Studio" wordmark instead.
+	appWindow: boolean;
 }
 
 export interface Connector {