From ddc461ccf0f92376c50bbc02fa513319c41f5973 Mon Sep 17 00:00:00 2001
From: Jinjing <6427696+AmethystLiang@users.noreply.github.com>
Date: Fri, 24 Apr 2026 15:17:44 -0700
Subject: [PATCH] refactor(ui): polish sidebar typography and compact task page
 chrome

Tighten sidebar fonts/icons (Tasks label, WORKSPACES section, search) and
collapse the task page close button into the source-filter row so the top
chrome forms one compact band.
---
 src/renderer/src/components/TaskPage.tsx      | 53 +++++++++----------
 .../src/components/sidebar/SearchBar.tsx      |  9 ++--
 .../src/components/sidebar/SidebarHeader.tsx  |  6 +--
 .../src/components/sidebar/SidebarNav.tsx     |  6 +--
 4 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/src/renderer/src/components/TaskPage.tsx b/src/renderer/src/components/TaskPage.tsx
index 67e307d986c..7e0b831e921 100644
--- a/src/renderer/src/components/TaskPage.tsx
+++ b/src/renderer/src/components/TaskPage.tsx
@@ -1221,34 +1221,33 @@ export default function TaskPage(): React.JSX.Element {
           </div>
         ) : null}
 
-        {/* Why: Close sits in its own row below the titlebar strip so it can
-            never overlap the floating macOS traffic lights. Kept left-aligned
-            to stay out of the app sidebar on the right edge. */}
-        <div className="flex-none flex items-center justify-start px-5 pt-3 pb-1 md:px-8 md:pt-4">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="size-8 rounded-full"
-                onClick={closeTaskPage}
-                aria-label="Close tasks"
-              >
-                <X className="size-4" />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent side="bottom" sideOffset={6}>
-              Close · Esc
-            </TooltipContent>
-          </Tooltip>
-        </div>
-
-        <div className="mx-auto flex w-full flex-1 flex-col min-h-0 px-5 pb-5 md:px-8 md:pb-7">
-          <div className="flex-none flex flex-col gap-5">
-            <section className="flex flex-col gap-4">
-              <div className="flex flex-col gap-4">
-                <div className="flex items-center justify-between">
+        <div className="mx-auto flex w-full flex-1 flex-col min-h-0 px-5 pt-3 pb-5 md:px-8 md:pt-3 md:pb-7">
+          <div className="flex-none flex flex-col gap-3">
+            <section className="flex flex-col gap-3">
+              <div className="flex flex-col gap-3">
+                <div className="flex items-center justify-between gap-2">
                   <div className="flex items-center gap-2">
+                    {/* Why: Close is anchored left in the same row as the
+                        source icons so the top chrome is one compact band.
+                        Left-aligned keeps it clear of the app sidebar on the
+                        right edge. */}
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="size-7 rounded-full"
+                          onClick={closeTaskPage}
+                          aria-label="Close tasks"
+                        >
+                          <X className="size-4" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent side="bottom" sideOffset={6}>
+                        Close · Esc
+                      </TooltipContent>
+                    </Tooltip>
+                    <div className="mx-1 h-5 w-px bg-border/50" aria-hidden />
                     {SOURCE_OPTIONS.map((source) => {
                       const active = taskSource === source.id
                       return (
diff --git a/src/renderer/src/components/sidebar/SearchBar.tsx b/src/renderer/src/components/sidebar/SearchBar.tsx
index 86e3bc52cad..f762d47260b 100644
--- a/src/renderer/src/components/sidebar/SearchBar.tsx
+++ b/src/renderer/src/components/sidebar/SearchBar.tsx
@@ -75,12 +75,15 @@ const SearchBar = React.memo(function SearchBar() {
   return (
     <div className="px-2 pb-4">
       <div className="relative flex items-center">
-        <Search className="absolute left-2 size-3.5 text-muted-foreground pointer-events-none" />
+        <Search
+          className="absolute left-2.5 size-3.5 text-muted-foreground pointer-events-none"
+          strokeWidth={2.25}
+        />
         <Input
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.target.value)}
           placeholder="Search..."
-          className="h-7 pl-7 pr-20 text-[11px] border-none bg-muted/50 shadow-none focus-visible:ring-1 focus-visible:ring-ring/30"
+          className="h-7 pl-7 pr-20 text-[12px] border-none bg-muted/50 shadow-none focus-visible:ring-1 focus-visible:ring-ring/30 placeholder:text-muted-foreground/70"
         />
         <div className="absolute right-1 flex items-center gap-0.5">
           {searchQuery && (
@@ -104,7 +107,7 @@ const SearchBar = React.memo(function SearchBar() {
                         : 'size-5 w-5 bg-transparent hover:bg-accent/60'
                     )}
                   >
-                    <ListFilter className="size-3 shrink-0" />
+                    <ListFilter className="size-3 shrink-0" strokeWidth={2.25} />
                     {filterSummary}
                   </Button>
                 </DropdownMenuTrigger>
diff --git a/src/renderer/src/components/sidebar/SidebarHeader.tsx b/src/renderer/src/components/sidebar/SidebarHeader.tsx
index 3feab666434..bb0d118ccfc 100644
--- a/src/renderer/src/components/sidebar/SidebarHeader.tsx
+++ b/src/renderer/src/components/sidebar/SidebarHeader.tsx
@@ -56,7 +56,7 @@ const SidebarHeader = React.memo(function SidebarHeader() {
 
   return (
     <div className="flex h-8 items-center justify-between px-4 mt-1">
-      <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground select-none">
+      <span className="text-[10.5px] font-semibold uppercase tracking-[0.12em] text-muted-foreground/80 select-none">
         Workspaces
       </span>
       <div className="flex items-center gap-1.5 shrink-0">
@@ -70,7 +70,7 @@ const SidebarHeader = React.memo(function SidebarHeader() {
                   className="text-muted-foreground"
                   aria-label="View options"
                 >
-                  <SlidersHorizontal className="size-3.5" />
+                  <SlidersHorizontal className="size-3.5" strokeWidth={2.25} />
                 </Button>
               </DropdownMenuTrigger>
             </TooltipTrigger>
@@ -153,7 +153,7 @@ const SidebarHeader = React.memo(function SidebarHeader() {
               aria-label="New workspace"
               disabled={!canCreateWorktree}
             >
-              <Plus className="size-3.5" />
+              <Plus className="size-3.5" strokeWidth={2.25} />
             </Button>
           </TooltipTrigger>
           <TooltipContent side="right" sideOffset={6}>
diff --git a/src/renderer/src/components/sidebar/SidebarNav.tsx b/src/renderer/src/components/sidebar/SidebarNav.tsx
index adeb411ed61..e15f13497b6 100644
--- a/src/renderer/src/components/sidebar/SidebarNav.tsx
+++ b/src/renderer/src/components/sidebar/SidebarNav.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Github, ListChecks } from 'lucide-react'
+import { Github, List } from 'lucide-react'
 import { useAppStore } from '@/store'
 import { useRepoMap } from '@/store/selectors'
 import { cn } from '@/lib/utils'
@@ -65,14 +65,14 @@ const SidebarNav = React.memo(function SidebarNav() {
         disabled={!canBrowseTasks}
         aria-current={tasksActive ? 'page' : undefined}
         className={cn(
-          'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors',
+          'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] font-medium tracking-tight transition-colors',
           tasksActive
             ? 'bg-sidebar-accent text-sidebar-accent-foreground'
             : 'text-sidebar-foreground hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground',
           !canBrowseTasks && 'cursor-not-allowed opacity-50 hover:bg-transparent'
         )}
       >
-        <ListChecks className="size-4 shrink-0" />
+        <List className="size-4 shrink-0" strokeWidth={2.25} />
         <span className="flex-1">Tasks</span>
         <span className="flex items-center gap-1">
           <span