refactor(app): simplify sidebar active state and tighten density by Astro-Han · Pull Request #237 · Astro-Han/pawwork

Astro-Han · 2026-04-25T17:54:33Z

Summary

Simplify the session sidebar visuals: drop the orange left-bar marker on the active row, align active and hover backgrounds, and tighten gutter, radius, and row gap toward Codex / ChatGPT polish.

Why

The active row used a 2px brand-coloured inset shadow as its primary marker. With the marker removed, the underlying bg-surface-base-active (alpha 0.059) is actually weaker than the hover background bg-surface-raised-base-hover (alpha 0.078), so an active row would have looked less prominent than a hovered row. Unifying the two backgrounds keeps a single visual signal — once the cursor leaves, only the active row stays highlighted, which is enough.

The gutter, radius, and gap changes are a small density pass aligned with the same goal — "less is more" — without touching design tokens or main conversation typography.

Related Issue

No tracking issue; standalone polish.

How To Verify

Local manual check in bun run dev:desktop (macOS, dark mode):

Pick a session: active row uses subtle bg fill, no orange left bar
Hover another row: same fill; cursor away leaves only the active row highlighted
Trigger spinner / permission / error / unread states: leading dot still visible inside the narrower 20px gutter
New chat row picks up the same active treatment
Skeleton placeholder matches the loaded row radius (no jump on load)

Screenshots or Recordings

Verified visually with the maintainer during dev:desktop iteration. Before/after screenshots can be attached if needed.

Checklist

No related issue (visual polish, no tracked bug)
Labels: enhancement + ui + P3 set on creation
Manual UI check via bun run dev:desktop on macOS
No macOS / Windows behaviour delta — pure CSS class changes in packages/app
No docs / dependency / permission impact
Targets dev, Conventional Commits in English

Summary by CodeRabbit

Style
- Reduced vertical spacing in the sidebar and pinned/group/session areas for tighter, more compact layout.
- Slightly decreased icon/pin control sizing for better proportion and density.
- Updated session and “new session” item corners to a softer radius and removed an extra active-state visual effect for a cleaner, more consistent appearance.
- Tweaked skeleton placeholders to match the refined spacing.

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

coderabbitai · 2026-04-25T17:54:47Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 99fdafc5-05b2-486d-a21a-c1e5fc3f6c24

📥 Commits

Reviewing files that changed from the base of the PR and between 877f2e1 and b82ea0c.

📒 Files selected for processing (2)

packages/app/src/pages/layout/pawwork-sidebar.tsx
packages/app/src/pages/layout/sidebar-items.tsx

📜 Recent review details

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (12)

GitHub Check: unit-windows-app
GitHub Check: unit-windows-opencode-session
GitHub Check: unit-windows-desktop
GitHub Check: unit-windows-opencode-config-project
GitHub Check: unit-windows-opencode-server-tools
GitHub Check: unit-app
GitHub Check: unit-opencode
GitHub Check: typecheck
GitHub Check: unit-desktop
GitHub Check: smoke-macos-arm64
GitHub Check: analyze-js-ts
GitHub Check: e2e-artifacts

🧰 Additional context used

📓 Path-based instructions (1)

packages/app/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (packages/app/AGENTS.md)

Always prefer createStore over multiple createSignal calls in SolidJS

Files:

packages/app/src/pages/layout/pawwork-sidebar.tsx
packages/app/src/pages/layout/sidebar-items.tsx

🧠 Learnings (7)

📓 Common learnings

Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 193
File: packages/app/src/pages/layout/sidebar-items.tsx:102-107
Timestamp: 2026-04-23T15:26:07.250Z
Learning: In Astro-Han/pawwork (`packages/app/src/pages/layout/sidebar-items.tsx`), the `indicator()` function in `SessionRow` intentionally renders `props.leadingSlot` (the pin button) only as a fallback when no status indicator (running/permission/error/unseen) is active. When a higher-priority status wins the slot, the pin button is removed from the DOM — this is a deliberate design choice for the merged leading slot (`#150`). The keyboard unpin path is preserved via: (1) focusing the row anchor triggers `group-focus-within` which reveals the dots menu trigger, then Tab → Enter → "Unpin Session"; (2) the context menu (right-click / Shift+F10) exposes "Unpin Session". The "always render + CSS overlay" approach was considered but rejected due to z-index/pointer-events complexity; residual `...` slot behavior is tracked in `#192`. Do NOT flag the absence of the pin button from the DOM when a status is active as an accessibility regression.

Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 208
File: packages/app/src/components/prompt-input.tsx:1569-1611
Timestamp: 2026-04-24T05:39:56.086Z
Learning: In Astro-Han/pawwork `packages/app/src/components/prompt-input.tsx`, after the composer unification in PR `#208` (fixed in commit 5d810aa):
- `SendButton.disabled` does NOT gate on `store.mode !== "normal"`. Shell mode has a fully visible, clickable orange submit button that calls `handleSubmit` directly (same path as the Enter key in `handleKeyDown`). Do NOT suggest re-adding the mode gate.
- `SendButton` does NOT use the `buttons()` spring opacity animation (`style={buttons()}`). It is always fully visible regardless of mode.
- `WorkspaceChip` is gated on `props.homeMode && store.mode === "normal"` so it hides in shell mode (preventing it from appearing isolated/bright while neighboring controls fade).
- The left-side chip group (`aria-hidden={store.mode !== "normal"}`) covers attach/model/variant/workspace controls only; `SendButton` remains in a separate right-side sibling div.

Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 224
File: packages/app/src/i18n/zh.ts:0-0
Timestamp: 2026-04-24T17:08:44.294Z
Learning: In Astro-Han/pawwork PR `#224`, the first-occurrence `PawWork 爪印` branding rule originally specified in issue `#196` was superseded by an updated Chinese-branding spec. On all zh UI surfaces in `packages/app/src/i18n/zh.ts` (e.g., `dialog.model.unpaid.freeModels.title`, `session.new.subtitle`, `sidebar.gettingStarted.line1`), the correct and intentional target is fully localized `爪印` branding — no `PawWork` prefix. Do NOT flag these strings as missing the first-occurrence `PawWork 爪印` rule in future reviews.

Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 126
File: packages/ui/src/theme/context.tsx:11-16
Timestamp: 2026-04-22T09:32:58.310Z
Learning: In Astro-Han/pawwork (`packages/ui/src/theme/context.tsx` and related files), the renaming of localStorage theme keys from `opencode-*` to `pawwork-*` (THEME_ID, COLOR_SCHEME, THEME_CSS_LIGHT, THEME_CSS_DARK) is intentional and should NOT include a migration path from the old keys. Migrating would re-couple PawWork and OpenCode browser storage namespaces, which the PR is explicitly designed to avoid. A reset to the PawWork default theme on upgrade is acceptable by design.

📚 Learning: 2026-04-23T15:26:07.250Z

Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 193
File: packages/app/src/pages/layout/sidebar-items.tsx:102-107
Timestamp: 2026-04-23T15:26:07.250Z
Learning: In Astro-Han/pawwork (`packages/app/src/pages/layout/sidebar-items.tsx`), the `indicator()` function in `SessionRow` intentionally renders `props.leadingSlot` (the pin button) only as a fallback when no status indicator (running/permission/error/unseen) is active. When a higher-priority status wins the slot, the pin button is removed from the DOM — this is a deliberate design choice for the merged leading slot (`#150`). The keyboard unpin path is preserved via: (1) focusing the row anchor triggers `group-focus-within` which reveals the dots menu trigger, then Tab → Enter → "Unpin Session"; (2) the context menu (right-click / Shift+F10) exposes "Unpin Session". The "always render + CSS overlay" approach was considered but rejected due to z-index/pointer-events complexity; residual `...` slot behavior is tracked in `#192`. Do NOT flag the absence of the pin button from the DOM when a status is active as an accessibility regression.

Applied to files:

packages/app/src/pages/layout/pawwork-sidebar.tsx
packages/app/src/pages/layout/sidebar-items.tsx

📚 Learning: 2026-04-22T09:32:58.310Z

Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 126
File: packages/ui/src/theme/context.tsx:11-16
Timestamp: 2026-04-22T09:32:58.310Z
Learning: In Astro-Han/pawwork (`packages/ui/src/theme/context.tsx` and related files), the renaming of localStorage theme keys from `opencode-*` to `pawwork-*` (THEME_ID, COLOR_SCHEME, THEME_CSS_LIGHT, THEME_CSS_DARK) is intentional and should NOT include a migration path from the old keys. Migrating would re-couple PawWork and OpenCode browser storage namespaces, which the PR is explicitly designed to avoid. A reset to the PawWork default theme on upgrade is acceptable by design.

Applied to files:

packages/app/src/pages/layout/pawwork-sidebar.tsx

📚 Learning: 2026-04-24T05:39:56.086Z

Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 208
File: packages/app/src/components/prompt-input.tsx:1569-1611
Timestamp: 2026-04-24T05:39:56.086Z
Learning: In Astro-Han/pawwork `packages/app/src/components/prompt-input.tsx`, after the composer unification in PR `#208` (fixed in commit 5d810aa):
- `SendButton.disabled` does NOT gate on `store.mode !== "normal"`. Shell mode has a fully visible, clickable orange submit button that calls `handleSubmit` directly (same path as the Enter key in `handleKeyDown`). Do NOT suggest re-adding the mode gate.
- `SendButton` does NOT use the `buttons()` spring opacity animation (`style={buttons()}`). It is always fully visible regardless of mode.
- `WorkspaceChip` is gated on `props.homeMode && store.mode === "normal"` so it hides in shell mode (preventing it from appearing isolated/bright while neighboring controls fade).
- The left-side chip group (`aria-hidden={store.mode !== "normal"}`) covers attach/model/variant/workspace controls only; `SendButton` remains in a separate right-side sibling div.

Applied to files:

packages/app/src/pages/layout/pawwork-sidebar.tsx
packages/app/src/pages/layout/sidebar-items.tsx

📚 Learning: 2026-04-23T07:23:23.849Z

Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 180
File: packages/app/src/components/session/session-new-view.tsx:13-18
Timestamp: 2026-04-23T07:23:23.849Z
Learning: In pawwork (Astro-Han/pawwork), prefer using `createStore` instead of multiple `createSignal` calls only when the signals represent **coupled** object state that is updated together (i.e., there is at least one shared batch-update site where the state is changed in the same transaction). If the state fields are **independent** and are mutated by separate handlers (e.g., one handler updates only `selectedSkill` while another updates only `mode`), keep them as individual `createSignal` calls—using `createStore` for truly independent fields adds boilerplate without behavioral benefit.

Applied to files:

packages/app/src/pages/layout/pawwork-sidebar.tsx
packages/app/src/pages/layout/sidebar-items.tsx

📚 Learning: 2026-04-23T15:10:21.635Z

Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 191
File: packages/app/src/components/session/pawwork-skill-meta.ts:38-39
Timestamp: 2026-04-23T15:10:21.635Z
Learning: This repo configures Tailwind v4 with `--color-*: initial`, which effectively breaks standard Tailwind palette utilities (e.g., `text-violet-500` can resolve to no CSS variable and render as a no-op/black). For brand/accent colors that are not backed by semantic design tokens, use inline styles with the exact hex value (e.g., `style={{ color: '#8B5FBF' }}` / `homeIconStyle: { color: '#8B5FBF' }`) and add a short comment explaining that Tailwind palette utilities won’t work due to the `--color-*: initial` setup. Do not suggest replacing these inline hex colors with Tailwind palette classes anywhere in this repo.

Applied to files:

packages/app/src/pages/layout/pawwork-sidebar.tsx
packages/app/src/pages/layout/sidebar-items.tsx

📚 Learning: 2026-04-23T17:02:39.474Z

Learnt from: Astro-Han
Repo: Astro-Han/pawwork PR: 198
File: packages/ui/src/theme/themes/pawwork.json:32-33
Timestamp: 2026-04-23T17:02:39.474Z
Learning: In Astro-Han/pawwork, `#FF5910` is the locked PawWork brand orange used for `button-primary-base` (and `--accent-brand` in `index.css`, theme token `interactive`/`primary`). The `text-on-interactive-base: `#FFFFFF`` on `button-primary-base: `#FF5910`` combination produces a contrast ratio of ~3.14:1. This intentionally fails WCAG AA normal-text (4.5:1) but passes AA non-text (SC 1.4.11, 3:1) and AA large-text (SC 1.4.3, 3:1). The tradeoff is accepted for brand consistency; do NOT flag this contrast pair as a WCAG violation in future reviews. If a specific surface requires stricter contrast, it should be addressed individually (e.g., larger text, ghost variant, outline button) rather than changing the palette.

Applied to files:

packages/app/src/pages/layout/sidebar-items.tsx

🔇 Additional comments (5)

packages/app/src/pages/layout/pawwork-sidebar.tsx (2)

133-133: Pin control size now aligns with leading slot density.

Good adjustment to size-5; this keeps pin/status affordances consistent with the tightened 20px gutter and avoids visual overflow.

298-300: Sidebar spacing changes are internally consistent.

gap-0.5 updates across nav/pinned/group sections are coherent and match the density pass without affecting behavior.

Also applies to: 330-330

packages/app/src/pages/layout/sidebar-items.tsx (3)

122-122: Leading icon/indicator sizing is now consistent across row types.

Both session rows and new-session rows use size-5, which keeps the tightened gutter visually aligned.

Also applies to: 297-297

207-207: Active/hover treatment unification looks correct and cohesive.

Using the same raised fill for hover and active states (and removing the inset marker) cleanly delivers the intended simplified highlight model.

Also applies to: 305-305

323-325: Skeleton density and radius now match loaded rows.

gap-0.5 plus rounded-xl prevents placeholder-to-loaded shape/spacing jump.

📝 Walkthrough

Walkthrough

Adjusted CSS utility classes in sidebar components to tighten vertical spacing, reduce icon/pin control sizes, change item corner radius to rounded-xl, and remove an active-state inset shadow. No logic, state, or rendering structure was changed. (≤50 words)

Changes

Cohort / File(s)	Summary
Sidebar layout & controls `packages/app/src/pages/layout/pawwork-sidebar.tsx`	Reduced vertical gaps (`gap-1` → `gap-0.5`) and decreased pin action button size (`size-6` → `size-5`). No logic changes.
Sidebar items & skeletons `packages/app/src/pages/layout/sidebar-items.tsx`	Reduced icon/indicator wrapper size (`size-6` → `size-5`), changed item/new-session corners from `rounded-md` → `rounded-xl`, removed active-state inset shadow, and tightened skeleton gaps (`gap-1` → `gap-0.5`).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

feat: PawWork brand chrome icon set v2 (issue #181 slice 3) #191: Overlapping edits to pawwork-sidebar.tsx and sidebar-items.tsx adjusting icon/pin sizes and spacing.
fix: keep sidebar row action width reserved #202: Related changes in sidebar-items.tsx affecting action-slot/icon sizing and reserved widths.
feat(ui): polish pawwork theme to match mockups and enable dark mode #198: Modifies sidebar layout and CSS classes similar to the spacing adjustments here.

Suggested labels

app

Poem

🐇 Hop-scotch pixels snug and neat,

Pins grown slim, gaps turned petite,
Corners rounded, shadows flee,
Sidebar hums in harmony,
A rabbit's nibble—now complete. 🥕

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main changes: removing the active state marker (simplify) and reducing spacing/sizes (tighten density), matching the core refactoring objectives.
Description check	✅ Passed	The description includes all required sections: Summary, Why, Related Issue, How To Verify, and a completed Checklist. It provides clear context, verification steps, and addresses all checklist items.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch worktree-claude+sidebar-active-simplify

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

gemini-code-assist

Code Review

This pull request updates the sidebar UI by tightening the layout spacing from gap-1 to gap-0.5, reducing icon container sizes to size-5, and increasing the border radius of session items to rounded-xl. Feedback suggests ensuring the pin button size is also updated to size-5 to prevent misalignment and adjusting the skeleton container's gap to gap-0.5 to maintain visual consistency with the actual session lists.

…sity 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

Astro-Han added enhancement New feature or request P3 Low priority ui Design system and user interface labels Apr 25, 2026

gemini-code-assist Bot reviewed Apr 25, 2026

View reviewed changes

Comment thread packages/app/src/pages/layout/sidebar-items.tsx

Comment thread packages/app/src/pages/layout/sidebar-items.tsx

Astro-Han commented Apr 26, 2026

View reviewed changes

Comment thread packages/app/src/pages/layout/sidebar-items.tsx

Astro-Han merged commit c053064 into dev Apr 26, 2026
25 checks passed

Astro-Han deleted the worktree-claude+sidebar-active-simplify branch April 26, 2026 02:10

Astro-Han mentioned this pull request Apr 26, 2026

chore: bump desktop release to 0.2.12 #240

Merged

7 tasks

This was referenced Apr 28, 2026

feat(ui): font hierarchy redesign per #300 #306

Merged

refactor(app): grayscale execution polish — composer overlay, sidebar row, error page, right-panel divider #342

Merged

refactor(app): reduce sidebar to two states (docked / hidden) #346

Merged

coderabbitai Bot mentioned this pull request May 9, 2026

feat(ui,app): composer rewrite (slice 10, issue #440) #508

Merged

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(app): simplify sidebar active state and tighten density#237

refactor(app): simplify sidebar active state and tighten density#237
Astro-Han merged 2 commits into
devfrom
worktree-claude+sidebar-active-simplify

Astro-Han commented Apr 25, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Apr 25, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Poem

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

Astro-Han commented Apr 25, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why

Related Issue

How To Verify

Screenshots or Recordings

Checklist

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Apr 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Poem

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Astro-Han commented Apr 25, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Apr 25, 2026 •

edited

Loading