Sidebar: a lighter highlight for the current entry

Open Beginner friendly
  • Is something wrong?
#317 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@shovon is already working on this.

Since Nov 7, 2026.

  • #318 by @shovon — open

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
76/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
tailwindcss, typescript
Domain
frontend

Research direction

Start in project/Sidebar/Sidebar.tsx and inspect the current, entry, and place styles; compare the existing Properties use of bg-line/40 for the transparency pattern. Apply bg-line/50 to the current entry and hover styles, then check the Sidebar stories and the running app in light and dark mode. Done when the current row and hovered rows have the lighter fill while the specified typography, corners, icons, and layout remain unchanged.

Written by the indexing model from the issue text.

Description

enhancement

The highlighted entry in the sidebar (project/Sidebar/Sidebar.tsx), the page on screen, Journal or All pages, is too heavy. It's filled with bg-line, the full-strength border colour (#e3e3e6 light, #313135 dark), so the current row reads as a solid grey bar rather than a quiet "you are here". Make it lighter.

What it should do

  • The current entry is lighter but still clearly marked, in light and dark mode.
  • Hover stays in step. Hover also uses bg-line today, so a hovered row and the current row look the same. Lighten hover by the same amount, so hovering another row never looks stronger than the page you're on.
  • The rest stays. font-medium on the current entry, the rounded corners, the icons and the layout don't change.

Approach

Fade the existing colour instead of adding a new one: bg-line/50 for the current entry (current) and for hover: on both entry styles (entry, place). Tailwind mixes the token with transparency, so it follows the dark palette by itself; Properties already uses bg-line/40 the same way. Pick the final fraction by eye in the running app; 50% is the starting point.

A dedicated token (say --color-selected) isn't needed yet. Add one only if a faded line can't be made to look right in both themes.

Out of scope

  • Hover on tabs and other buttons (TabStrip, Card), which also use hover:bg-line. Worth matching later if the sidebar change looks right.
  • Changing --color-line itself: borders should keep their current strength.

Done when

  • The current sidebar entry and hovered entries use the lighter fill.
  • The Sidebar stories show it.
  • Checked in the running app in light and dark mode.
Dominant language
TypeScript
Stars
0
Forks
1
Avg merge
46m
Merged PRs (30d)
117

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from shovon/pbnotes

All issues in shovon/pbnotes

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.