From 7240a09417a3c35b4e71bd5242cafdb6cd7de551 Mon Sep 17 00:00:00 2001
From: shawn <shineoutgx@gmail.com>
Date: Mon, 30 Mar 2026 00:40:33 +0800
Subject: [PATCH 1/3] feat: redesign sidebar as icon-only activity bar with
 view titles

Remove text labels from sidebar tabs, keeping only enlarged icons (22px,
bold stroke) with native title tooltips. Add a view title header to each
main content area. Remove badge indicators and dead hookCount code.
Clean up unused badge CSS and variables.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/App.tsx    | 28 ++++++++++++----------
 src/styles.css | 64 +++++++++++++++++++++-----------------------------
 2 files changed, 42 insertions(+), 50 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 8095c89..bb80f60 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -617,7 +617,6 @@ export default function App({ repoPath }: { repoPath: string }) {
 
   const launchers = repo?.mergedConfig.launchers ?? [];
   const hooksMap: HooksMap = repo?.mergedConfig.hooks ?? {};
-  const hookCount = Object.keys(hooksMap).filter((e) => (hooksMap[e as HookEvent]?.length ?? 0) > 0).length;
 
   return (
     <div className="shell">
@@ -644,35 +643,32 @@ export default function App({ repoPath }: { repoPath: string }) {
           <button
             className={`sidebar-tab${view === "repository" ? " active" : ""}`}
             onClick={() => setView("repository")}
+            title={t.tabRepository}
           >
-            <HousePlus className="sidebar-tab-icon" size={16} />
-            <span className="sidebar-tab-label">{t.tabRepository}</span>
+            <HousePlus className="sidebar-tab-icon" size={22} strokeWidth={2.25} />
           </button>
           <button
             className={`sidebar-tab${view === "worktrees" ? " active" : ""}`}
             onClick={() => setView("worktrees")}
             disabled={!repo}
+            title={t.tabWorktrees}
           >
-            <FolderTree className="sidebar-tab-icon" size={16} />
-            <span className="sidebar-tab-label">{t.tabWorktrees}</span>
-            {repo && <span className="sidebar-tab-badge">{repo.worktrees.length}</span>}
+            <FolderTree className="sidebar-tab-icon" size={22} strokeWidth={2.25} />
           </button>
           <button
             className={`sidebar-tab${view === "hooks" ? " active" : ""}`}
             onClick={() => setView("hooks")}
             disabled={!repo}
+            title={t.hooks}
           >
-            <FishingHook className="sidebar-tab-icon" size={16} />
-            <span className="sidebar-tab-label">{t.hooks}</span>
-            {hookCount > 0 && <span className="sidebar-tab-badge">{hookCount}</span>}
+            <FishingHook className="sidebar-tab-icon" size={22} strokeWidth={2.25} />
           </button>
           <button
             className={`sidebar-tab${view === "settings" ? " active" : ""}`}
             onClick={() => setView("settings")}
+            title={t.settings}
           >
-            <Settings className="sidebar-tab-icon" size={16} />
-            <span className="sidebar-tab-label">{t.settings}</span>
-            {updateInfo && <span className="sidebar-tab-badge" />}
+            <Settings className="sidebar-tab-icon" size={22} strokeWidth={2.25} />
           </button>
         </aside>
 
@@ -682,6 +678,7 @@ export default function App({ repoPath }: { repoPath: string }) {
 
         {view === "repository" && (
           <div className="repo-view">
+            <h1 className="view-title">{t.tabRepository}</h1>
             <section className="hero card">
               <h2>{t.heroTitle}</h2>
               <p>{t.heroDescription}</p>
@@ -726,6 +723,7 @@ export default function App({ repoPath }: { repoPath: string }) {
 
         {view === "worktrees" && (
           <>
+            <h1 className="view-title">{t.tabWorktrees}</h1>
             {!repo ? (
               <div className="repo-view">
                 <section className="hero card">
@@ -825,6 +823,7 @@ export default function App({ repoPath }: { repoPath: string }) {
 
         {view === "hooks" && (
           <div className="hooks-view">
+            <h1 className="view-title">{t.hooks}</h1>
             {!repo ? (
               <section className="hero card">
                 <h2>{t.hooks}</h2>
@@ -850,7 +849,9 @@ export default function App({ repoPath }: { repoPath: string }) {
         )}
 
         {view === "settings" && (
-          <SettingsPage
+          <>
+            <h1 className="view-title">{t.settings}</h1>
+            <SettingsPage
             toolStatuses={repo?.toolStatuses ?? bootstrapState.toolStatuses}
             logs={logs}
             onClearLogs={() => setLogs([])}
@@ -898,6 +899,7 @@ export default function App({ repoPath }: { repoPath: string }) {
             }}
             onRetryDownload={() => setDownloadProgress(INITIAL_PROGRESS)}
           />
+          </>
         )}
       </main>
       </div>
diff --git a/src/styles.css b/src/styles.css
index 1e61404..ab6cd34 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -336,29 +336,29 @@ pre {
 }
 
 .sidebar {
-  width: 54px;
+  width: 48px;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  padding: 10px 8px;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 6px;
   border-right: 1px solid var(--border-faint);
   background: var(--surface-sidebar);
 }
 
 .sidebar-tab {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 3px;
-  padding: 8px 8px 6px;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
   border-radius: 10px;
   background: transparent;
   color: var(--ink-ghost);
-  font-size: 9px;
-  font-weight: 500;
-  white-space: nowrap;
   border: none;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
   cursor: pointer;
   transition:
     color 140ms ease,
@@ -366,12 +366,12 @@ pre {
   position: relative;
 }
 
-.sidebar-tab-icon {
-  flex-shrink: 0;
+.sidebar-tab:focus-visible {
+  outline: none;
 }
 
-.sidebar-tab-label {
-  line-height: 1;
+.sidebar-tab-icon {
+  flex-shrink: 0;
 }
 
 .sidebar-tab:hover {
@@ -393,29 +393,6 @@ pre {
   background: transparent;
 }
 
-.sidebar-tab-badge {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 14px;
-  height: 14px;
-  padding: 0 3px;
-  border-radius: 999px;
-  background: var(--teal-bg-strong);
-  color: var(--teal-muted);
-  font-size: 0.55rem;
-  font-weight: 700;
-  line-height: 1;
-}
-
-.sidebar-tab.active .sidebar-tab-badge {
-  background: var(--teal-bg-strong);
-  color: var(--teal-hover);
-}
-
 .topbar-path {
   position: absolute;
   left: 50%;
@@ -465,9 +442,22 @@ pre {
   overflow-y: auto;
 }
 
-.main:has(> .worktrees-layout) {
+.main:has(.worktrees-layout) {
   padding: 0;
   overflow: hidden;
+  gap: 0;
+}
+
+.main:has(.worktrees-layout) > .view-title {
+  padding: 14px 14px 8px;
+}
+
+.view-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ink-primary);
+  margin: 0;
+  letter-spacing: -0.01em;
 }
 
 .brand-mark {

From 245dcdc743ef41b37bc8b9740c03793456a6b4cf Mon Sep 17 00:00:00 2001
From: shawn <shineoutgx@gmail.com>
Date: Mon, 30 Mar 2026 10:30:24 +0800
Subject: [PATCH 2/3] fix: move view titles to main container for consistent
 left alignment

View titles for Repository and Hooks were inside their respective view
containers, inheriting centered layout. Move all four view titles to be
direct children of .main for uniform left-aligned positioning.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/App.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index bb80f60..63bd559 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -677,8 +677,9 @@ export default function App({ repoPath }: { repoPath: string }) {
         {error && <div className="error-banner">{error}</div>}
 
         {view === "repository" && (
+          <>
+          <h1 className="view-title">{t.tabRepository}</h1>
           <div className="repo-view">
-            <h1 className="view-title">{t.tabRepository}</h1>
             <section className="hero card">
               <h2>{t.heroTitle}</h2>
               <p>{t.heroDescription}</p>
@@ -719,6 +720,7 @@ export default function App({ repoPath }: { repoPath: string }) {
               </div>
             </section>
           </div>
+          </>
         )}
 
         {view === "worktrees" && (
@@ -822,8 +824,9 @@ export default function App({ repoPath }: { repoPath: string }) {
         )}
 
         {view === "hooks" && (
+          <>
+          <h1 className="view-title">{t.hooks}</h1>
           <div className="hooks-view">
-            <h1 className="view-title">{t.hooks}</h1>
             {!repo ? (
               <section className="hero card">
                 <h2>{t.hooks}</h2>
@@ -846,6 +849,7 @@ export default function App({ repoPath }: { repoPath: string }) {
               />
             )}
           </div>
+          </>
         )}
 
         {view === "settings" && (

From 6f21931839431d76503ea8c480a4a11836d60c88 Mon Sep 17 00:00:00 2001
From: shawn <shineoutgx@gmail.com>
Date: Mon, 30 Mar 2026 11:47:19 +0800
Subject: [PATCH 3/3] fix: place worktrees view title inside grid layout for
 proper alignment

Move the title into a dedicated grid row above the sidebar panel so it
visually belongs to the worktree list column rather than floating in the
main container.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/App.tsx    | 18 ++++++++++++------
 src/styles.css | 17 ++++++++++++-----
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 63bd559..695848b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -725,15 +725,21 @@ export default function App({ repoPath }: { repoPath: string }) {
 
         {view === "worktrees" && (
           <>
-            <h1 className="view-title">{t.tabWorktrees}</h1>
             {!repo ? (
-              <div className="repo-view">
-                <section className="hero card">
-                  <h2>{t.loading}</h2>
-                </section>
-              </div>
+              <>
+                <h1 className="view-title">{t.tabWorktrees}</h1>
+                <div className="repo-view">
+                  <section className="hero card">
+                    <h2>{t.loading}</h2>
+                  </section>
+                </div>
+              </>
             ) : (
               <div className="worktrees-layout">
+                <div className="worktrees-title-panel">
+                  <h1 className="view-title">{t.tabWorktrees}</h1>
+                </div>
+                <div className="worktrees-title-spacer" aria-hidden="true" />
                 <div className="worktrees-panel">
                   <div className="repo-name-label">{repo.repoRoot.split("/").pop()}</div>
                   <div className="worktree-toolbar">
diff --git a/src/styles.css b/src/styles.css
index ab6cd34..952c115 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -435,7 +435,7 @@ pre {
 .main {
   flex: 1;
   min-width: 0;
-  padding: 24px 28px;
+  padding: 18px 18px 24px;
   display: flex;
   flex-direction: column;
   gap: 20px;
@@ -448,10 +448,6 @@ pre {
   gap: 0;
 }
 
-.main:has(.worktrees-layout) > .view-title {
-  padding: 14px 14px 8px;
-}
-
 .view-title {
   font-size: 14px;
   font-weight: 600;
@@ -471,11 +467,20 @@ pre {
 .worktrees-layout {
   display: grid;
   grid-template-columns: 280px minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr);
   gap: 0;
   flex: 1;
   min-height: 0;
 }
 
+.worktrees-title-panel {
+  display: flex;
+  align-items: flex-start;
+  padding: 18px 18px 6px;
+  background: var(--surface-warm);
+  border-right: 1px solid var(--border-default);
+}
+
 .worktrees-panel {
   background: var(--surface-warm);
   border-right: 1px solid var(--border-default);
@@ -483,6 +488,7 @@ pre {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  min-height: 0;
 }
 
 .worktree-toolbar {
@@ -517,6 +523,7 @@ pre {
 }
 
 .worktrees-detail {
+  min-height: 0;
   padding: 24px 28px;
   overflow-y: auto;
   display: flex;