Add compact icon-based view switcher to the data page toolbar by hdprajwal · Pull Request #530 · Translation-Commons/lang-nav

hdprajwal · 2026-03-11T16:30:13Z

Summary: Reworks the data page controls so view switching is faster and more compact. It replaces the text-based display selector with an icon-based control, pulls the sort selector into the top toolbar, and extracts the filter toggle into its own reusable component.

Changes

User experience
- Replaces the display selector labels with recognizable icons and keeps the full view name in hover content.
- Moves view switching and sort controls into the main data page toolbar for quicker access.
- Keeps the filter toggle and result count grouped together to make the top controls easier to scan.
- Formats result counts with toLocaleString() for better readability on large result sets.
Logical changes
- Adds optionStyle support to the shared selector components so button-like selectors can customize layout without duplicating logic.
- Adds an optional showLabel prop to SortBySelector so it can be reused in tighter toolbar layouts.
- Extracts the filter panel button into src/widgets/controls/FilterPanelToggle.tsx.
Data
- No data changes.
Refactors
- Removes the old inline view selector from src/widgets/pathnav/PathNav.tsx.
- Simplifies src/pages/DataPageBody.tsx by composing dedicated controls instead of inline toggle logic.

Out of scope/Future work: Add screenshots and manual QA notes after testing the updated toolbar across desktop and mobile layouts.

Test Plan and Screenshots

How to test the changes in this PR:

Run npm run dev.
Open the data page and confirm the top toolbar shows the filter toggle, result count, path navigation, sort selector, and icon-based view selector.
Switch between Cards, Table, Hierarchy, Map, and Reports and verify the active icon updates correctly.
Change sort options and confirm the selected sort is still applied.
Toggle the filter panel open and closed and verify the button state still matches the panel state.

Page/View with link	Description of Changes	Screenshot Before	Screenshot After
Data page	Top toolbar now includes the extracted filter toggle, inline sort selector, and icon-based view switcher.
Data page - alternate views	View switching now uses compact icons while preserving view labels in hover content, including beta labels for Map and Reports.

Checklist

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

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.

Expose optionStyle on Selector and merge it into SelectorOption so options can be styled. Add a compact icon-based ViewSelector (uses lucide-react), place it in DataPageBody, and remove the inline ViewSelector from PathNav.

Add optional showLabel prop to SortBySelector (defaults to true) so callers can omit its label/description; DataPageBody now passes showLabel={false} for the top toolbar. Adjust ViewSelector optionStyle to use fit-content width and increased padding for better button sizing.

conradarcturus

Some style changes but the functionality generally looks good.

conradarcturus · 2026-03-12T05:25:01Z

src/features/transforms/sorting/SortBySelector.tsx

    <Selector
-      selectorLabel="Sort By"
-      selectorDescription="Choose the order of items in the view."
+      selectorLabel={showLabel ? 'Sort By' : undefined}


When not showing the text maybe we should show ArrowDownUpIcon?

Done, now shows ArrowDownUpIcon as the label when showLabel is false

conradarcturus · 2026-03-12T05:28:16Z

src/widgets/pathnav/PathNav.tsx

-import usePageParams from '@features/params/usePageParams';
 import FilterPath from '@features/transforms/filtering/FilterPath';

 const PathNav: React.FC = () => {


The PathNav component is almost completely empty now. It can probably be simplified.

Also can you remove the initial SlashIcon from FilterPath? It's not necessary since the selectors before it (Entity & View) have both been moved.

Simplified PathNav.tsx to only export PathContainer, DataPageBody now uses PathContainer + FilterPath directly.

conradarcturus · 2026-03-12T05:29:24Z

src/widgets/controls/selectors/ViewSelector.tsx

+      return <Grid2x2Icon size="1.2em" />;
    case View.Hierarchy:
-      return '/lang-nav/hierarchy.png';
+      return <GitBranchIcon size="1.2em" />;


NetworkIcon may be better? But I'll let you decide.

Went with ListTreeIcon instead, feels more intuitive for a language hierarchy.

oh yes ListTreeIcon is even better! Good find.

conradarcturus · 2026-03-12T05:31:49Z

src/pages/DataPageBody.tsx

-            </HoverableButton>
-            <ResultCount />
-          </div>
          <PathNav />


Since PathNav is now just the "ActiveFilters" we should probably put it on the left side, not the right side.

Moved active filters to the left side.

conradarcturus · 2026-03-12T05:32:26Z

src/pages/DataPageBody.tsx

+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',


The alignment doesn't line up between the right and left sides.

conradarcturus · 2026-03-12T05:36:32Z

src/widgets/controls/FilterPanelToggle.tsx

+
+import useFilterPanel from './useFilterPanel';
+
+const FilterPanelToggle: React.FC = () => {


Yes, this is a good idea. I'm a bit confused why it wasn't part of your previously merged commit -- But I guess you merged before you could get it in.

Yeah, it got left out before the merge. Added now.

conradarcturus · 2026-03-12T05:38:48Z

src/widgets/controls/selectors/ViewSelector.tsx

+      optionStyle={{
+        width: 'fit-content',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '0.5rem',
+      }}
+      selectorStyle={{ gap: '0.25rem' }}


TODO for me: check if we need all of these styles, I'm not certain (ideally it would come from SelectorDisplay so it scales better for more usages).

Nonetheless we don't need to get ahead of ourselves and scale things that we are only using in one place right now.

conradarcturus · 2026-03-12T05:39:07Z

src/widgets/controls/selectors/ViewSelector.tsx

      selected={view}
+      onChange={(nextView: View) => updatePageParams({ view: nextView })}
+      getOptionLabel={(option) => getViewIcon(option)}
+      getOptionDescription={(option) => getViewLabel(option)}


I see you removed the screenshots from the mouseover -- that was intentional because you want new screenshots?

I have added Screenshots back in the mouseover descriptions along with the view label.

conradarcturus

There are a few singletons in fragments that you can remove the fragments <></>

Otherwise it looks good!

conradarcturus · 2026-03-12T21:26:27Z

src/features/transforms/filtering/FilterPath.tsx

    return (
      <>
-        <SlashIcon size="1em" />
        <Deemphasized>No filters applied</Deemphasized>
      </>
    );


You can remove the <></> syntax since its only one component

conradarcturus · 2026-03-12T21:26:36Z

src/features/transforms/filtering/FilterPath.tsx

  return (
    <>
-      <SlashIcon size="1em" />


hdprajwal added 3 commits March 11, 2026 11:58

Add icon-based ViewSelector and optionStyle prop

e04694d

Expose optionStyle on Selector and merge it into SelectorOption so options can be styled. Add a compact icon-based ViewSelector (uses lucide-react), place it in DataPageBody, and remove the inline ViewSelector from PathNav.

Merge branch 'master' into feat/icon-view-switcher

8feff5f

hdprajwal self-assigned this Mar 11, 2026

hdprajwal requested a review from a team as a code owner March 11, 2026 16:30

hdprajwal changed the title ~~Feat/icon view switcher~~ Add compact icon-based view switcher to the data page toolbar Mar 11, 2026

hdprajwal requested a review from conradarcturus March 11, 2026 16:31

conradarcturus requested changes Mar 12, 2026

View reviewed changes

Update header controls and view selector

75e185c

hdprajwal requested a review from conradarcturus March 12, 2026 13:52

conradarcturus approved these changes Mar 12, 2026

View reviewed changes


		import useFilterPanel from './useFilterPanel';

		const FilterPanelToggle: React.FC = () => {

Conversation

hdprajwal commented Mar 11, 2026

Changes

Test Plan and Screenshots

Checklist

Summary

Testing

Internal changes

Docs

Uh oh!

conradarcturus left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

conradarcturus left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants