From 877f2e10efcd572d80c3dc4d4dfed9b8f8028263 Mon Sep 17 00:00:00 2001
From: Yuhan Lei <lei.yuhan@outlook.com>
Date: Sun, 26 Apr 2026 01:54:04 +0800
Subject: [PATCH 1/2] refactor(app): simplify sidebar active state and tighten
 density

Drop the 2px orange left-bar marker on the active session row and
unify active/hover backgrounds to surface-raised-base-hover. The
previous surface-base-active token (alpha 0.059) was lighter than
the hover background (alpha 0.078), so active would have looked
weaker than hover once the brand bar was removed.

Polish surrounding density to align with Codex / ChatGPT:
- Leading indicator gutter 24px -> 20px
- Row corner radius rounded-md -> rounded-xl
- Row gap 4px -> 2px in pinned, time, and project sections
- Skeleton radius matches new row radius to avoid load-state jump
---
 packages/app/src/pages/layout/pawwork-sidebar.tsx |  6 +++---
 packages/app/src/pages/layout/sidebar-items.tsx   | 10 +++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/app/src/pages/layout/pawwork-sidebar.tsx b/packages/app/src/pages/layout/pawwork-sidebar.tsx
index c697fc663..4a3ede4c8 100644
--- a/packages/app/src/pages/layout/pawwork-sidebar.tsx
+++ b/packages/app/src/pages/layout/pawwork-sidebar.tsx
@@ -295,9 +295,9 @@ export const PawworkSidebar = (props: {
             when={props.sessions().length > 0}
             fallback={<div class="px-2 text-13-regular text-text-weak">{language.t("sidebar.pawwork.empty.sessions")}</div>}
           >
-            <nav class="flex flex-col gap-1">
+            <nav class="flex flex-col gap-0.5">
               <Show when={pinnedRows().length > 0}>
-                <section data-component="pawwork-sidebar-pinned" class="flex flex-col gap-1">
+                <section data-component="pawwork-sidebar-pinned" class="flex flex-col gap-0.5">
                   <div class="px-2 pb-1 text-11-medium text-text-weak">{language.t("sidebar.pawwork.pinned")}</div>
                   <For each={pinnedRows()}>{(entry) => renderSessionItem(entry)}</For>
                 </section>
@@ -327,7 +327,7 @@ export const PawworkSidebar = (props: {
               <Show when={props.sortMode() === "project"}>
                 <For each={groupedRows()}>
                   {(group) => (
-                    <section class="flex flex-col gap-1">
+                    <section class="flex flex-col gap-0.5">
                       <div data-component="pawwork-group-header" class="px-2 pt-3 pb-1 text-11-medium font-mono text-text-weak">
                         {group.label}
                       </div>
diff --git a/packages/app/src/pages/layout/sidebar-items.tsx b/packages/app/src/pages/layout/sidebar-items.tsx
index ce78e115a..5ff5e4b2b 100644
--- a/packages/app/src/pages/layout/sidebar-items.tsx
+++ b/packages/app/src/pages/layout/sidebar-items.tsx
@@ -119,7 +119,7 @@ const SessionRow = (props: {
       }}
     >
       <div
-        class="shrink-0 size-6 flex items-center justify-center"
+        class="shrink-0 size-5 flex items-center justify-center"
         style={{ color: props.tint() ?? "var(--icon-interactive-base)" }}
       >
         {indicator()}
@@ -204,7 +204,7 @@ export const SessionItem = (props: SessionItemProps): JSX.Element => {
     <>
       <div
         data-session-id={props.session.id}
-        class="group/session relative w-full min-w-0 rounded-md cursor-default pr-3 transition-colors hover:bg-surface-raised-base-hover [&:has(:focus-visible)]:bg-surface-raised-base-hover has-[[data-expanded]]:bg-surface-raised-base-hover has-[.active]:bg-surface-base-active has-[.active]:shadow-[inset_2px_0_0_var(--color-accent-brand)]"
+        class="group/session relative w-full min-w-0 rounded-xl cursor-default pr-3 transition-colors hover:bg-surface-raised-base-hover [&:has(:focus-visible)]:bg-surface-raised-base-hover has-[[data-expanded]]:bg-surface-raised-base-hover has-[.active]:bg-surface-raised-base-hover"
         style={{ "padding-left": `${8 + (props.level ?? 0) * 16}px` }}
       >
         <div class="flex min-w-0 items-center gap-1">
@@ -294,7 +294,7 @@ export const NewSessionItem = (props: {
         props.clearHoverProjectSoon()
       }}
     >
-      <div class="shrink-0 size-6 flex items-center justify-center">
+      <div class="shrink-0 size-5 flex items-center justify-center">
         <Icon name="new-session" size="small" class="text-icon-weak" />
       </div>
       <span class="text-14-regular text-text-strong min-w-0 flex-1 truncate">{label}</span>
@@ -302,7 +302,7 @@ export const NewSessionItem = (props: {
   )
 
   return (
-    <div class="group/session relative w-full min-w-0 rounded-md cursor-default transition-colors pl-2 pr-3 hover:bg-surface-raised-base-hover [&:has(:focus-visible)]:bg-surface-raised-base-hover has-[.active]:bg-surface-base-active">
+    <div class="group/session relative w-full min-w-0 rounded-xl cursor-default transition-colors pl-2 pr-3 hover:bg-surface-raised-base-hover [&:has(:focus-visible)]:bg-surface-raised-base-hover has-[.active]:bg-surface-raised-base-hover">
       <Show
         when={!tooltip()}
         fallback={
@@ -322,7 +322,7 @@ export const SessionSkeleton = (props: { count?: number }): JSX.Element => {
   return (
     <div class="flex flex-col gap-1">
       <For each={items}>
-        {() => <div class="h-8 w-full rounded-md bg-surface-raised-base opacity-60 animate-pulse" />}
+        {() => <div class="h-8 w-full rounded-xl bg-surface-raised-base opacity-60 animate-pulse" />}
       </For>
     </div>
   )

From b82ea0cb68c6125ea1bcf96a5d7e31f0100e4aed Mon Sep 17 00:00:00 2001
From: Yuhan Lei <lei.yuhan@outlook.com>
Date: Sun, 26 Apr 2026 09:49:10 +0800
Subject: [PATCH 2/2] refactor(app): align pin button and skeleton gap with new
 sidebar density

Address review on #237:
- Pin button (pawwork-sidebar.tsx leadingSlot) was still inline-flex
  size-6, overflowing the new 20px session gutter; shrink to size-5
  so spinner, status dots, and pin share one slot width
- SessionSkeleton container still used gap-1; tighten to gap-0.5 to
  match the sidebar list spacing
---
 packages/app/src/pages/layout/pawwork-sidebar.tsx | 2 +-
 packages/app/src/pages/layout/sidebar-items.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/pages/layout/pawwork-sidebar.tsx b/packages/app/src/pages/layout/pawwork-sidebar.tsx
index 4a3ede4c8..b2dc449e1 100644
--- a/packages/app/src/pages/layout/pawwork-sidebar.tsx
+++ b/packages/app/src/pages/layout/pawwork-sidebar.tsx
@@ -130,7 +130,7 @@ export const PawworkSidebar = (props: {
                   props.onTogglePinnedSession(session.id)
                 }}
                 classList={{
-                  "inline-flex size-6 items-center justify-center rounded transition-colors": true,
+                  "inline-flex size-5 items-center justify-center rounded transition-colors": true,
                   "text-text-strong opacity-100 pointer-events-auto": isPinned(),
                   "text-text-weak opacity-0 pointer-events-none group-hover/session:opacity-100 group-hover/session:pointer-events-auto group-focus-within/session:opacity-100 group-focus-within/session:pointer-events-auto hover:text-text-base":
                     !isPinned(),
diff --git a/packages/app/src/pages/layout/sidebar-items.tsx b/packages/app/src/pages/layout/sidebar-items.tsx
index 5ff5e4b2b..395195405 100644
--- a/packages/app/src/pages/layout/sidebar-items.tsx
+++ b/packages/app/src/pages/layout/sidebar-items.tsx
@@ -320,7 +320,7 @@ export const NewSessionItem = (props: {
 export const SessionSkeleton = (props: { count?: number }): JSX.Element => {
   const items = Array.from({ length: props.count ?? 4 }, (_, index) => index)
   return (
-    <div class="flex flex-col gap-1">
+    <div class="flex flex-col gap-0.5">
       <For each={items}>
         {() => <div class="h-8 w-full rounded-xl bg-surface-raised-base opacity-60 animate-pulse" />}
       </For>