From 03576504bc0bd3e47b0fc57c64311444c8a7d4b5 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Wed, 25 Feb 2026 11:14:38 -0500 Subject: [PATCH 1/5] Redesign titlebar: add window title, remove Howdy text, improve button sizing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Replace "Howdy, {user}" with Gravatar-only button (tooltip shows name) - Add centered "Studio • {site name}" window title - Add padding and rounded-lg to all titlebar icon buttons - Increase sidebar toggle spacing from traffic lights - Reduce top padding and right padding for better alignment Co-Authored-By: Claude Opus 4.6 --- apps/studio/src/components/top-bar.tsx | 51 ++++++++++++++++++-------- 1 file changed, 36 insertions(+), 15 deletions(-) diff --git a/apps/studio/src/components/top-bar.tsx b/apps/studio/src/components/top-bar.tsx index 154b35750b..b078895ab2 100644 --- a/apps/studio/src/components/top-bar.tsx +++ b/apps/studio/src/components/top-bar.tsx @@ -1,4 +1,3 @@ -import { sprintf } from '@wordpress/i18n'; import { Icon, help, drawerLeft, cog } from '@wordpress/icons'; import { useI18n } from '@wordpress/react-i18n'; import Button from 'src/components/button'; @@ -8,6 +7,7 @@ import { Tooltip } from 'src/components/tooltip'; import { WordPressLogo } from 'src/components/wordpress-logo'; import { useAuth } from 'src/hooks/use-auth'; import { useOffline } from 'src/hooks/use-offline'; +import { useSiteDetails } from 'src/hooks/use-site-details'; import { getIpcApi } from 'src/lib/get-ipc-api'; import { getLocalizedLink } from 'src/lib/get-localized-link'; import { useI18nLocale } from 'src/stores'; @@ -20,13 +20,12 @@ const DEFAULT_TOOLTIP_PLACEMENT = 'bottom-start'; function ToggleSidebar( { onToggleSidebar }: TopBarProps ) { const { __ } = useI18n(); return ( -
+
- @@ -75,15 +74,16 @@ function Authentication() { const isOffline = useOffline(); if ( isAuthenticated ) { return ( - + + + ); } @@ -114,6 +114,7 @@ function SettingsButton() { onClick={ () => getIpcApi().showUserSettings( 'preferences' ) } aria-label={ __( 'Open settings' ) } variant="icon" + className="!p-1.5 !rounded-lg" data-testid="settings-button" > @@ -121,6 +122,24 @@ function SettingsButton() { ); } +function WindowTitle() { + const { __ } = useI18n(); + const { selectedSite } = useSiteDetails(); + return ( +
+ + { __( 'Studio' ) } + { selectedSite && ( + <> + { '\u2022' } + { selectedSite.name } + + ) } + +
+ ); +} + export default function TopBar( { onToggleSidebar }: TopBarProps ) { const { __ } = useI18n(); const locale = useI18nLocale(); @@ -130,17 +149,19 @@ export default function TopBar( { onToggleSidebar }: TopBarProps ) { }; return ( -
+
+ +
- From 47122db7468769cfb6c912601f3110d42bba6cb9 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Thu, 26 Feb 2026 10:40:55 -0500 Subject: [PATCH 2/5] Refactor offline indicator from button to status span MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The offline indicator isn't interactive — replace Button with a plain span[role=status] to remove misleading hover state while keeping the tooltip and accessibility attributes. Co-Authored-By: Claude Opus 4.6 --- apps/studio/src/components/top-bar.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/studio/src/components/top-bar.tsx b/apps/studio/src/components/top-bar.tsx index b078895ab2..ac5bc3aab1 100644 --- a/apps/studio/src/components/top-bar.tsx +++ b/apps/studio/src/components/top-bar.tsx @@ -54,14 +54,14 @@ function OfflineIndicator() { className="h-6" placement={ DEFAULT_TOOLTIP_PLACEMENT } > - + +
) From 151211649417aef2a4b189b107e3932d01e53408 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Thu, 26 Feb 2026 10:42:12 -0500 Subject: [PATCH 3/5] Update topbar test to match offline indicator role change Co-Authored-By: Claude Opus 4.6 --- apps/studio/src/components/tests/topbar.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/studio/src/components/tests/topbar.test.tsx b/apps/studio/src/components/tests/topbar.test.tsx index 7df62080c6..15ba44a02b 100644 --- a/apps/studio/src/components/tests/topbar.test.tsx +++ b/apps/studio/src/components/tests/topbar.test.tsx @@ -58,7 +58,7 @@ describe( 'TopBar', () => { it( 'shows offline indicator', async () => { vi.mocked( useOffline ).mockReturnValue( true ); await act( async () => renderWithProvider( ) ); - const offlineIndicator = screen.getByRole( 'button', { + const offlineIndicator = screen.getByRole( 'status', { name: 'Offline indicator', } ); expect( offlineIndicator ).toHaveAttribute( 'aria-description' ); From 97c0ed468c7322a359fc992f926777d9f7167026 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Thu, 26 Feb 2026 10:51:32 -0500 Subject: [PATCH 4/5] Add settings tooltip, align right-side tooltips to bottom-end Co-Authored-By: Claude Opus 4.6 --- apps/studio/src/components/top-bar.tsx | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/apps/studio/src/components/top-bar.tsx b/apps/studio/src/components/top-bar.tsx index ac5bc3aab1..c79000d9e3 100644 --- a/apps/studio/src/components/top-bar.tsx +++ b/apps/studio/src/components/top-bar.tsx @@ -74,7 +74,7 @@ function Authentication() { const isOffline = useOffline(); if ( isAuthenticated ) { return ( - + + + + ); } @@ -160,7 +162,7 @@ export default function TopBar( { onToggleSidebar }: TopBarProps ) {
- + From fa357a284d5a146c449e80e1828bec97b05e9231 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Thu, 26 Feb 2026 11:12:45 -0500 Subject: [PATCH 5/5] Fix prettier formatting in top-bar Co-Authored-By: Claude Opus 4.6 --- apps/studio/src/components/top-bar.tsx | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/apps/studio/src/components/top-bar.tsx b/apps/studio/src/components/top-bar.tsx index c79000d9e3..37d29a5ccd 100644 --- a/apps/studio/src/components/top-bar.tsx +++ b/apps/studio/src/components/top-bar.tsx @@ -21,11 +21,13 @@ function ToggleSidebar( { onToggleSidebar }: TopBarProps ) { const { __ } = useI18n(); return (
- - @@ -163,7 +165,12 @@ export default function TopBar( { onToggleSidebar }: TopBarProps ) { -