Skip to content

fix(app): stabilize session row left-side visuals (status slot + Pin/Filter icons)#149

Merged
Astro-Han merged 2 commits into
devfrom
worktree-issue-143-sidebar-visuals
Apr 22, 2026
Merged

fix(app): stabilize session row left-side visuals (status slot + Pin/Filter icons)#149
Astro-Han merged 2 commits into
devfrom
worktree-issue-143-sidebar-visuals

Conversation

@Astro-Han

@Astro-Han Astro-Han commented Apr 22, 2026

Copy link
Copy Markdown
Owner

Closes #143.

Summary

  • Commit 1 (fix) removes the outer <Show> wrapper around the sidebar session-row status slot in sidebar-items.tsx, so the size-6 container always reserves 24px of width. The inner <Switch> (running / permission / error / unseen) is unchanged. Session title baseline no longer shifts when status indicators toggle.
  • Commit 2 (refactor) redraws FilterIcon and PinIcon in pawwork-sidebar.tsx on the 20x20 grid. FilterIcon uses stroke-linecap="square" to match upstream straight-line glyphs (close, arrow-right, menu). PinIcon uses a hexagonal head polygon + diagonal needle, default stroke width, default size 16. Needle origin (8, 11) sits on the head's bottom-left edge y = x + 3 for clean attachment.

Follow-up (out of scope)

During live review we noticed that the Pin button (rendered in SessionItem leadingSlot) and the status slot (inside SessionRow) are two separate reserved slots. The original intent implied by the issue reporter was for running state to appear in the pin button position — i.e. one unified slot with priority running > permission > error > unseen > pin > empty. This PR ships the #143 scope as written (two stable slots, matching the issue body's "Not in scope: Pin slot" note), and defers the merge refactor to #150. Merge is medium-risk: changes pin button a11y contract (pin must remain keyboard-reachable when pinned + running), requires passing leadingSlot into SessionRow, and shifts the top-level title baseline left by 28px.

Test plan

  • bun run typecheck passes
  • Manual live verification on bun dev:desktop:
    • idle / pinned / running rows maintain stable title baseline
    • Pin icon at size 16 reads at roughly the visual weight of neighbouring sidebar icons
    • Filter icon three bars descending cleanly on 20x20 grid
    • Pinned (accent brand) / hover-to-reveal (weak) pin states render correctly
  • crosscheck reviewed (zero P0/P1; one P2 geometry fix autosquashed)

@Astro-Han Astro-Han added enhancement New feature or request P2 Medium priority ui Design system and user interface labels Apr 22, 2026
@coderabbitai

coderabbitai Bot commented Apr 22, 2026

Copy link
Copy Markdown
Contributor

Warning

Rate limit exceeded

@Astro-Han has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 5 minutes and 55 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 5 minutes and 55 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 62ab5659-14f8-473c-9708-3a4516873be2

📥 Commits

Reviewing files that changed from the base of the PR and between 68ec9cc and 611ec3f.

📒 Files selected for processing (2)
  • packages/app/src/pages/layout/pawwork-sidebar.tsx
  • packages/app/src/pages/layout/sidebar-items.tsx
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch worktree-issue-143-sidebar-visuals

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

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request updates the sidebar icons to a 20x20 grid and refactors the SessionRow component by removing a conditional wrapper around the status indicators. Feedback focuses on maintaining visual consistency for the new SVG paths, specifically suggesting the addition of stroke-width and adjustments to stroke-linejoin to match the previous design's visual weight.

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

@Astro-Han Astro-Han left a comment

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review Summary

Overall the changes align with the issue requirements, but there are some geometry and visual consistency concerns worth addressing.

P0: None

P1: 1 issue

  • PinIcon geometry mismatch: The pin head is a pentagon (not hexagon as described), and needle origin is slightly misaligned with the bottom edge.

P2: 2 issues

  • FilterIcon rendering size: size=14 is 70% of 20x20 grid, making it smaller than adjacent icons (16px/80%)
  • Icon shape redesign scope: PinIcon changed from traditional pushpin to geometric shape without explicit mention in issue

P3: 1 note

  • Empty Switch fallback: When no status matches, Switch renders empty - this is intentional for baseline stability

See inline comments for details.

Comment thread packages/app/src/pages/layout/pawwork-sidebar.tsx
Comment thread packages/app/src/pages/layout/pawwork-sidebar.tsx
Comment thread packages/app/src/pages/layout/pawwork-sidebar.tsx
Comment thread packages/app/src/pages/layout/sidebar-items.tsx
@Astro-Han Astro-Han merged commit 4a4e7b1 into dev Apr 22, 2026
24 checks passed
@Astro-Han Astro-Han deleted the worktree-issue-143-sidebar-visuals branch April 22, 2026 15:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request P2 Medium priority ui Design system and user interface

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature] Stabilize session row left-side visuals (status slot width + Pin/Filter icons)

1 participant