Feat/filter list display by kevinmdd · Pull Request #686 · Translation-Commons/lang-nav

kevinmdd · 2026-06-25T03:44:00Z

Fixes #671

Summary: Replaced dropdown/button displays for enum filters with a new Filter List display mode that shows options as a compact vertical list, showing the first 4 with an "Expand All" toggle when there are 5 or more.

User experience
- Enum filters (Language Authority, Modality, Languoid Type, Territory Type, ISO Language Status) now show as a vertical plain-text list instead of a dropdown or button group
- Options are visible at a glance without needing to open a dropdown
- Increased font bold size and spacing between labels for better visibility
- "Expand All" / "Collapse" button appears when there are more than 4 options
Logical changes
- Added FilterList to the SelectorDisplay enum
- Selector now slices visible options to the first 4 when in FilterList mode and not expanded
- FilterListMoreButton component added to Selector for the expand/collapse toggle
- SelectorContainer renders as flex-column with full width for FilterList
- useClickOutside guarded to not collapse FilterList state on outside click
Data
- No data changes
Refactors
- LanguageModalitySelector, LanguageScopeSelector, TerritoryScopeSelector, VitalitySelector updated to accept and forward a display prop
- VitalitySelector.test updated to include FilterList in the SelectorDisplay mock and added "Expand All" click before checking all options are visible
- Continued Refactors for: selectorbuttons, filterlist, and selectoroptions in controls.css

Out of scope/Future work: The dual meaning of expanded state (dropdown open vs filter list expanded) could be split into two separate state variables for clarity.

Test Plan and Screenshots

How to test the changes in this PR: Run npm run dev, open the Filter panel, then verify enum filters show as vertical lists and "Expand All" works.

Before	After

Checklist

Feel free to check off or just delete items in this section as you have completed them.

Summary

Clear description of what and why
Scope kept focused; note follow-ups if any
Set yourself as assignee
Mention the issue (usually by writing "Fixes #ISSUE_NUMBER" or "Closes #ISSUE_NUMBER")

Testing

Changes

Visual changes

Add screenshots to the table template at the top of this file. You can include images inside the table
Drag and drop images in the GitHub PR comment box to upload screenshots
Since more views can be reproduced by just sharing the URL -- add links (eg. link) to the relevant page and/or conditions to reproduce the view.

Data changes

TSV, SVG, etc. edits in public/data/
Corresponding readmes updated in public/data/
Load/connect/compute updates in src/features/data/ including how we aggregate data or compute derived values

Internal changes

Logical changes
Refactors, moving files around
If you notice any changes that require explanations, make sure to include the explanations in the code as well.

Docs

Code is self-documenting, or if not, comments are added where needed.
Updated markdown readme files documenting how the code behaves or how to develop in case there are any relevant changes to make.

github-actions · 2026-06-25T03:45:02Z

Cloudflare Pages preview

Deploy URL: https://f9939cf6.lang-nav.pages.dev/lang-nav/
Branch alias: https://pr-686.lang-nav.pages.dev/lang-nav/
Commit: 3816391

…tion-Commons/lang-nav into feat/filter-list-display # Please enter a commit message to explain why this merge is necessary, # especially if it merges an updated upstream into a topic branch. # # Lines starting with '#' will be ignored, and an empty message aborts # the commit.

conradarcturus

Great! Looking really good. I'm glad the strange errors resolved with the new base. There are just some minor edits so I'll approve it so you can edit it and merge the code after you're ready rather than waiting for another review.

Also, you see the screenshot tests are failing -- after you make your updates add a tag to your PR update-baselines and it will update the screenshot tests with the new screenshots.

conradarcturus · 2026-06-26T16:28:51Z

+  // For FilterList: collapse to first N items unless expanded
+  const isFilterList = display === SelectorDisplay.FilterList;
+  const filterListCollapsed =
+    isFilterList && !expanded && options.length > FILTER_LIST_INITIAL_COUNT;


When there are 5 options, showing the first 4 and keeping the 5th hidden under this is a funny restriction, so let's only collapse the list when there are more than 5 options.

Funny thing, 3 of the 4 enum lists have 5 elements >_< in the future that won't always be the case! but yea it's funny today.

Suggested change

isFilterList && !expanded && options.length > FILTER_LIST_INITIAL_COUNT;

isFilterList && !expanded && options.length > FILTER_LIST_INITIAL_COUNT. +1;

conradarcturus · 2026-06-26T16:30:03Z

+  toggle,
+}) => {
+  const { display } = useSelectorDisplay();
+  if (display !== SelectorDisplay.FilterList || totalCount <= FILTER_LIST_INITIAL_COUNT)


In line with the prior feedback, allow for 5 items -- only hide them if we're hiding 2 or more.

Suggested change

if (display !== SelectorDisplay.FilterList || totalCount <= FILTER_LIST_INITIAL_COUNT)

if (display !== SelectorDisplay.FilterList || totalCount <= FILTER_LIST_INITIAL_COUNT + 1)

conradarcturus · 2026-06-26T16:35:22Z

+  width: fit-content;
+  border-width: 0.2em;
+  border-radius: 0.35em;
+  color: inherit;
+  cursor: pointer;
+  font-size: 0.9em;
+  padding: 0.25em 3.5em;


We can let this mostly match the global button default style. I think width and cursor are redundant. I'm not sure about the color -- I do like that it is black, but now it does not respond to the hover styling.

Suggested change

width: fit-content;

border-width: 0.2em;

border-radius: 0.35em;

color: inherit;

cursor: pointer;

font-size: 0.9em;

padding: 0.25em 3.5em;

font-size: 0.9em;

padding: 0.25em 3.5em;

conradarcturus · 2026-06-26T16:39:11Z

-    lineHeight: '1em',
+    lineHeight: '2.25em', // more spacing for visibility
    alignItems: 'center',
-    fontWeight: 'bold',
+    fontWeight: '800', // adjusted font weight for easier visibility
    padding: '0.5em',
    margin: 'auto 0', // Vertically center
    whiteSpace: 'nowrap',
    borderRadius: '1em',
+    marginBottom: '-0.5em', // adjusted to have selector buttons closer to their label


You are affecting the selector buttons for other display types (for example, see the view options in the top-right gear menu).

Move the lineHeight and marginBottom styles down to case SelectorDisplay.FilterList:

kevinmdd added 3 commits June 18, 2026 14:33

feat: add FilterList display mode for enum filters

42a8208

revert pr template changes

8902ed9

refactor: move FilterList styles to CSS

9c2be51

kevinmdd requested a review from a team as a code owner June 25, 2026 03:44

kevinmdd self-assigned this Jun 25, 2026

Style: auto-fix with prettier and eslint

582c2c3

kevinmdd added 2 commits June 24, 2026 20:45

fix prettier formatting

92fff7f

conradarcturus approved these changes Jun 26, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feat/filter list display#686

Feat/filter list display#686
kevinmdd wants to merge 6 commits into
masterfrom
feat/filter-list-display

kevinmdd commented Jun 25, 2026

Uh oh!

github-actions Bot commented Jun 25, 2026 •

edited

Loading

Uh oh!

conradarcturus left a comment

Uh oh!

conradarcturus Jun 26, 2026

Uh oh!

conradarcturus Jun 26, 2026

Uh oh!

conradarcturus Jun 26, 2026

Uh oh!

conradarcturus Jun 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	isFilterList && !expanded && options.length > FILTER_LIST_INITIAL_COUNT;
	isFilterList && !expanded && options.length > FILTER_LIST_INITIAL_COUNT. +1;

	if (display !== SelectorDisplay.FilterList \|\| totalCount <= FILTER_LIST_INITIAL_COUNT)
	if (display !== SelectorDisplay.FilterList \|\| totalCount <= FILTER_LIST_INITIAL_COUNT + 1)

Uh oh!

Conversation

kevinmdd commented Jun 25, 2026

Test Plan and Screenshots

Checklist

Summary

Testing

Changes

Visual changes

Data changes

Internal changes

Docs

Uh oh!

github-actions Bot commented Jun 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Cloudflare Pages preview

Uh oh!

conradarcturus left a comment

Choose a reason for hiding this comment

Uh oh!

conradarcturus Jun 26, 2026

Choose a reason for hiding this comment

Uh oh!

conradarcturus Jun 26, 2026

Choose a reason for hiding this comment

Uh oh!

conradarcturus Jun 26, 2026

Choose a reason for hiding this comment

Uh oh!

conradarcturus Jun 26, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

github-actions Bot commented Jun 25, 2026 •

edited

Loading