Skip to content

[#308] GitHub-style inline filter bar with clickable params#309

Merged
realproject7 merged 2 commits intomainfrom
task/308-inline-filter-bar
Mar 18, 2026
Merged

[#308] GitHub-style inline filter bar with clickable params#309
realproject7 merged 2 commits intomainfrom
task/308-inline-filter-bar

Conversation

@realproject7
Copy link
Copy Markdown
Owner

Summary

  • New FilterBar client component replacing WriterFilter, GenreFilter, LanguageFilter, and SortDropdown
  • Single bordered box with inline label:value tokens — values in green accent
  • Clicking a token opens a positioned dropdown below it; only one open at a time
  • Outside click closes dropdown
  • Mobile: sort collapsed to icon to fit everything on one line
  • Desktop: sort shows full sort:Recent label
  • Same URL query param behavior (tab, writer, genre, lang) preserved
  • Removed unused extraParams variable

Fixes #308

Test plan

  • Verify all filters appear as inline tokens in one bordered box
  • Verify values are green accent color
  • Click each token — dropdown opens below with correct options
  • Only one dropdown open at a time
  • Click outside closes dropdown
  • Mobile: sort shows icon only, all tokens fit one line
  • Selecting a filter navigates with correct query params
  • Desktop layout looks clean

🤖 Generated with Claude Code

New FilterBar component replaces separate Writer/Genre/Language/Sort
controls with a single bordered box of label:value tokens. Values in
accent green, clicking opens positioned dropdown below. Only one
dropdown open at a time, outside click closes. Mobile: sort collapses
to icon only so everything fits one line.

Fixes #308

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Copy link
Copy Markdown
Collaborator

@project7-interns project7-interns left a comment

Choose a reason for hiding this comment

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

Well-structured refactor. Single FilterBar replaces four separate components cleanly. Query param behavior preserved via buildHref. Outside-click dismiss, mobile sort icon, dropdown max-height for long lists — all solid.

Minor nit (non-blocking): dropdowns position at left-0/right-0 relative to the whole bar rather than below each specific token. GitHub's pattern anchors per-token, but this works fine functionally.

LGTM.

Copy link
Copy Markdown
Collaborator

@project7-interns project7-interns left a comment

Choose a reason for hiding this comment

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

Verdict: REQUEST CHANGES

Summary

The unified filter bar is directionally right, but one acceptance criterion is still not met in the current dropdown behavior.

Findings

  • [medium] The filter dropdowns are positioned relative to the whole bar, not below the clicked token.
    • File: src/components/FilterBar.tsx:184
    • Suggestion: Anchor each menu to its corresponding token trigger so writer, genre, and lang open under the token that was clicked, not all from left-0 on the container. The issue explicitly calls for positioned dropdowns below each token.

Decision

Requesting changes because the current implementation only partially matches the inline-token interaction spec; the dropdown placement still needs to follow the clicked token.

Each token now wrapped in relative container so its dropdown
opens directly below the clicked token.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Copy link
Copy Markdown
Collaborator

@project7-interns project7-interns left a comment

Choose a reason for hiding this comment

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

Verdict: APPROVE

Summary

The dropdown anchoring issue is fixed, and the PR now matches the inline-token interaction model requested in issue #308.

Findings

  • No blocking findings.

Decision

Approving because each filter token now anchors its own dropdown, only one menu is open at a time, outside-click close behavior is present, the mobile sort control collapses to an icon, and the existing query-param behavior is preserved.

@realproject7 realproject7 merged commit 2f86452 into main Mar 18, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[design] GitHub-style inline filter bar with clickable params

2 participants