From 184732fc2097166921dd46fbb9a8ce433a96b237 Mon Sep 17 00:00:00 2001 From: David Hill <1879069+iamdavidhill@users.noreply.github.com> Date: Thu, 12 Mar 2026 18:26:50 +0000 Subject: fix(app): titlebar cleanup (#17206) --- .../ui/src/assets/icons/app/android-studio.svg | 370 ++++++++++++++++++++- packages/ui/src/assets/icons/app/antigravity.svg | 98 +++++- packages/ui/src/assets/icons/app/cursor.svg | 17 +- packages/ui/src/assets/icons/app/file-explorer.svg | 21 +- packages/ui/src/assets/icons/app/finder.png | Bin 279917 -> 2127 bytes packages/ui/src/assets/icons/app/ghostty.svg | 14 +- packages/ui/src/assets/icons/app/iterm2.svg | 26 +- packages/ui/src/assets/icons/app/powershell.svg | 15 +- packages/ui/src/assets/icons/app/sublimetext.svg | 18 +- packages/ui/src/assets/icons/app/terminal.png | Bin 43815 -> 969 bytes packages/ui/src/assets/icons/app/textmate.png | Bin 104374 -> 2900 bytes packages/ui/src/assets/icons/app/vscode.svg | 40 ++- packages/ui/src/assets/icons/app/warp.png | Bin 782232 -> 2470 bytes packages/ui/src/assets/icons/app/xcode.png | Bin 866979 -> 3470 bytes packages/ui/src/assets/icons/app/zed-dark.svg | 28 +- packages/ui/src/assets/icons/app/zed.svg | 28 +- packages/ui/src/components/button.css | 12 + packages/ui/src/components/dropdown-menu.css | 10 + packages/ui/src/components/icon.tsx | 22 +- packages/ui/src/components/message-part.css | 3 +- packages/ui/src/styles/tailwind/utilities.css | 5 + 21 files changed, 668 insertions(+), 59 deletions(-) (limited to 'packages/ui/src') diff --git a/packages/ui/src/assets/icons/app/android-studio.svg b/packages/ui/src/assets/icons/app/android-studio.svg index 6b545e27a..8d87619f7 100644 --- a/packages/ui/src/assets/icons/app/android-studio.svg +++ b/packages/ui/src/assets/icons/app/android-studio.svg @@ -1 +1,369 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/ui/src/assets/icons/app/antigravity.svg b/packages/ui/src/assets/icons/app/antigravity.svg index 3c3554af7..52f235068 100644 --- a/packages/ui/src/assets/icons/app/antigravity.svg +++ b/packages/ui/src/assets/icons/app/antigravity.svg @@ -1 +1,97 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/ui/src/assets/icons/app/cursor.svg b/packages/ui/src/assets/icons/app/cursor.svg index 5aa26e8e7..a77860864 100644 --- a/packages/ui/src/assets/icons/app/cursor.svg +++ b/packages/ui/src/assets/icons/app/cursor.svg @@ -1 +1,16 @@ - + + + + + + + + + + + + + + + + diff --git a/packages/ui/src/assets/icons/app/file-explorer.svg b/packages/ui/src/assets/icons/app/file-explorer.svg index 316cbab35..e21665796 100644 --- a/packages/ui/src/assets/icons/app/file-explorer.svg +++ b/packages/ui/src/assets/icons/app/file-explorer.svg @@ -1 +1,20 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + diff --git a/packages/ui/src/assets/icons/app/finder.png b/packages/ui/src/assets/icons/app/finder.png index 2cff579e6..2315b62b4 100644 Binary files a/packages/ui/src/assets/icons/app/finder.png and b/packages/ui/src/assets/icons/app/finder.png differ diff --git a/packages/ui/src/assets/icons/app/ghostty.svg b/packages/ui/src/assets/icons/app/ghostty.svg index 1dc652aac..d646bd32b 100644 --- a/packages/ui/src/assets/icons/app/ghostty.svg +++ b/packages/ui/src/assets/icons/app/ghostty.svg @@ -1 +1,13 @@ - \ No newline at end of file + + + + + + + + + + + + + diff --git a/packages/ui/src/assets/icons/app/iterm2.svg b/packages/ui/src/assets/icons/app/iterm2.svg index 0b00a1b7a..48c1aac51 100644 --- a/packages/ui/src/assets/icons/app/iterm2.svg +++ b/packages/ui/src/assets/icons/app/iterm2.svg @@ -1,23 +1,11 @@ - - - - - - - - + + + + + + - - - - - - - - - - - + diff --git a/packages/ui/src/assets/icons/app/powershell.svg b/packages/ui/src/assets/icons/app/powershell.svg index fa0c70f0b..46570203c 100644 --- a/packages/ui/src/assets/icons/app/powershell.svg +++ b/packages/ui/src/assets/icons/app/powershell.svg @@ -1 +1,14 @@ - \ No newline at end of file + + + + + + + + + + + + + + diff --git a/packages/ui/src/assets/icons/app/sublimetext.svg b/packages/ui/src/assets/icons/app/sublimetext.svg index f482ec5bb..7e625b559 100644 --- a/packages/ui/src/assets/icons/app/sublimetext.svg +++ b/packages/ui/src/assets/icons/app/sublimetext.svg @@ -1 +1,17 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + diff --git a/packages/ui/src/assets/icons/app/terminal.png b/packages/ui/src/assets/icons/app/terminal.png index 43857b632..1072b7deb 100644 Binary files a/packages/ui/src/assets/icons/app/terminal.png and b/packages/ui/src/assets/icons/app/terminal.png differ diff --git a/packages/ui/src/assets/icons/app/textmate.png b/packages/ui/src/assets/icons/app/textmate.png index 1eee73c5e..4545bfd2b 100644 Binary files a/packages/ui/src/assets/icons/app/textmate.png and b/packages/ui/src/assets/icons/app/textmate.png differ diff --git a/packages/ui/src/assets/icons/app/vscode.svg b/packages/ui/src/assets/icons/app/vscode.svg index aba7e19f6..6b1827a6a 100644 --- a/packages/ui/src/assets/icons/app/vscode.svg +++ b/packages/ui/src/assets/icons/app/vscode.svg @@ -1 +1,39 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/ui/src/assets/icons/app/warp.png b/packages/ui/src/assets/icons/app/warp.png index 753e4d911..5634adfe2 100644 Binary files a/packages/ui/src/assets/icons/app/warp.png and b/packages/ui/src/assets/icons/app/warp.png differ diff --git a/packages/ui/src/assets/icons/app/xcode.png b/packages/ui/src/assets/icons/app/xcode.png index c37d9f176..59da87749 100644 Binary files a/packages/ui/src/assets/icons/app/xcode.png and b/packages/ui/src/assets/icons/app/xcode.png differ diff --git a/packages/ui/src/assets/icons/app/zed-dark.svg b/packages/ui/src/assets/icons/app/zed-dark.svg index 67a99ae4a..0f9d12d05 100644 --- a/packages/ui/src/assets/icons/app/zed-dark.svg +++ b/packages/ui/src/assets/icons/app/zed-dark.svg @@ -1,15 +1,15 @@ - - - - - - - - - + + + + + + + + + + + + + + diff --git a/packages/ui/src/assets/icons/app/zed.svg b/packages/ui/src/assets/icons/app/zed.svg index a845bf181..37aa2d6c0 100644 --- a/packages/ui/src/assets/icons/app/zed.svg +++ b/packages/ui/src/assets/icons/app/zed.svg @@ -1,15 +1,15 @@ - - - - - - - - - + + + + + + + + + + + + + + diff --git a/packages/ui/src/components/button.css b/packages/ui/src/components/button.css index 4a6eeaf69..e26ace611 100644 --- a/packages/ui/src/components/button.css +++ b/packages/ui/src/components/button.css @@ -180,3 +180,15 @@ [data-component="button"].titlebar-icon[data-variant="ghost"][aria-expanded="true"]:hover:not(:disabled) { background-color: var(--surface-base-active); } + +[data-component="button"].titlebar-icon[data-variant="ghost"][aria-current="page"] { + background-color: var(--surface-base-active); +} + +[data-component="button"].titlebar-icon[data-variant="ghost"][aria-current="page"] [data-slot="icon-svg"] { + color: var(--icon-strong-base); +} + +[data-component="button"].titlebar-icon[data-variant="ghost"][aria-current="page"]:hover:not(:disabled) { + background-color: var(--surface-base-active); +} diff --git a/packages/ui/src/components/dropdown-menu.css b/packages/ui/src/components/dropdown-menu.css index cba041613..edc2eee9a 100644 --- a/packages/ui/src/components/dropdown-menu.css +++ b/packages/ui/src/components/dropdown-menu.css @@ -58,6 +58,11 @@ } } + [data-slot="dropdown-menu-checkbox-item"], + [data-slot="dropdown-menu-radio-item"] { + padding-right: 28px; + } + [data-slot="dropdown-menu-sub-trigger"] { &[data-expanded] { background: var(--surface-raised-base-hover); @@ -70,6 +75,10 @@ justify-content: center; width: 16px; height: 16px; + position: absolute; + right: 8px; + top: 50%; + transform: translateY(-50%); } [data-slot="dropdown-menu-item-label"] { @@ -88,6 +97,7 @@ } [data-slot="dropdown-menu-group-label"] { + display: block; padding: 4px 8px; font-family: var(--font-family-sans); font-size: var(--font-size-x-small); diff --git a/packages/ui/src/components/icon.tsx b/packages/ui/src/components/icon.tsx index 7f4598f29..aacfa476b 100644 --- a/packages/ui/src/components/icon.tsx +++ b/packages/ui/src/components/icon.tsx @@ -22,6 +22,12 @@ const icons = { "close-small": ``, checklist: ``, console: ``, + terminal: ``, + "terminal-active": ` +`, + review: ``, + "review-active": ` +`, expand: ``, collapse: ``, code: ``, @@ -31,12 +37,15 @@ const icons = { eye: ``, enter: ``, folder: ``, - "file-tree": ``, - "file-tree-active": ``, + "file-tree": ``, + "file-tree-active": ` +`, "magnifying-glass": ``, "plus-small": ``, plus: ``, - "new-session": ``, + "new-session": ``, + "new-session-active": ` +`, "pencil-line": ``, mcp: ``, glasses: ``, @@ -44,6 +53,13 @@ const icons = { "window-cursor": ``, task: ``, stop: ``, + status: ``, + "status-active": ` + +`, + sidebar: ``, + "sidebar-active": ` +`, "layout-left": ``, "layout-left-partial": ``, "layout-left-full": ``, diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css index 7ee537884..1052a591c 100644 --- a/packages/ui/src/components/message-part.css +++ b/packages/ui/src/components/message-part.css @@ -614,7 +614,7 @@ align-items: center; justify-content: flex-start; gap: 0px; - cursor: pointer; + cursor: default; [data-slot="context-tool-group-title"] { flex-shrink: 1; @@ -623,6 +623,7 @@ [data-slot="collapsible-arrow"] { color: var(--icon-weaker); + cursor: pointer; } } diff --git a/packages/ui/src/styles/tailwind/utilities.css b/packages/ui/src/styles/tailwind/utilities.css index 4318b9ec1..2ba9199db 100644 --- a/packages/ui/src/styles/tailwind/utilities.css +++ b/packages/ui/src/styles/tailwind/utilities.css @@ -13,6 +13,11 @@ mask-image: radial-gradient(circle 5px at calc(100% - 4px) 4px, transparent 5px, black 5.5px); } +@utility badge-mask-tight { + -webkit-mask-image: radial-gradient(circle 5px at calc(100% - 2px) 2px, transparent 5px, black 5.5px); + mask-image: radial-gradient(circle 5px at calc(100% - 2px) 2px, transparent 5px, black 5.5px); +} + @utility truncate-start { text-overflow: ellipsis; overflow: hidden; -- cgit v1.2.3