Skip to content

design: apply Filter redesign for env var and public URL#9173

Open
royendo wants to merge 18 commits intomainfrom
royendo/add-shared-table-toolbar
Open

design: apply Filter redesign for env var and public URL#9173
royendo wants to merge 18 commits intomainfrom
royendo/add-shared-table-toolbar

Conversation

@royendo
Copy link
Copy Markdown
Contributor

@royendo royendo commented Apr 2, 2026 •
edited
Loading

  • Add a reusable TableToolbar component (web-common/src/components/table-toolbar/) with composable sub-components: filter dropdown, expandable search, sort
    toggle, applied filter chips, and view mode toggle
  • Replace the inline search + dropdown filter on the environment variables page with TableToolbar, adding sort direction toggle and applied filter chips with
    "Clear all"
  • Replace the inline search on the public URLs page with TableToolbar, adding sort direction toggle
  • Add ResourceTableToolbar bridge component that wires TableToolbar to TanStack Table context with URL sync (?q= param) for alerts/reports pages
  • Add FilterOutlined icon from Rill design system

Search bar can be removed if req'd

Components:

  • TableToolbar — orchestrator with children snippet slot for inline extras (e.g. + button)
  • TableToolbarFilterDropdown — checkbox filter groups via DropdownMenu
  • TableToolbarSearch — collapsible search icon that expands to inline input
  • TableToolbarSort — "Newest"/"Oldest" text toggle with ArrowUpDown icon
  • TableToolbarAppliedFilters — removable filter pills + "Clear all"
  • TableToolbarViewToggle — grid/list view toggle (optional)

loom: https://www.loom.com/share/16b8de614c214305b385d966e7352b0a?from_recorder=1&focus_title=1

Will replace: #9156

Screenshot 2026-04-02 at 18 34 00 Screenshot 2026-04-02 at 18 34 10 Screenshot 2026-04-02 at 18 34 04

Checklist:

  • Covered by tests
  • Ran it and it works as intended
  • Reviewed the diff before requesting a review
  • Checked for unhandled edge cases
  • Linked the issues it closes
  • Checked if the docs need to be updated. If so, create a separate Linear DOCS issue
  • Intend to cherry-pick into the release branch
  • I'm proud of this work!

royendo and others added 12 commits April 2, 2026 16:00
@royendo @claude
feat: add shared TableToolbar component for table view pages
3c1bc9a 
Replaces inconsistent toolbar UIs across alerts, reports, public URLs,
and environment variables pages with a single reusable component.

The toolbar provides: filter dropdown (left), search + sort + optional
grid/list toggle (right). Filter options are page-specific via props.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@royendo @claude
refactor: redesign TableToolbar to match updated specs
bc8ced5 
- "Filter" is now plain clickable text opening a dropdown; applied
  filters show as removable chips with "Clear all" below the toolbar
- "Newest" is a toggle button (not dropdown) that flips sort order
- Search is a magnifying glass icon (h-9) that expands to an inline
  input; search text syncs to URL via ?q= param
- Add `TableToolbarAppliedFilters`, `TableToolbarSearch`,
  `TableToolbarSort` sub-components
- Remove old `TableToolbarSortDropdown`

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@royendo @claude
fix: resolve infinite loop in ResourceTableToolbar effects
0ccd11c 
Use `untrack` and `get()` to break circular reactive dependencies:
- `$table.setGlobalFilter()` was re-triggering its own effect via store subscription
- URL sync effects were creating `searchText` <-> `$page` cycles

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@royendo @claude
fix: filter dropdown context error and search input binding
8dae5bf 
- Wrap DropdownMenu.Label inside DropdownMenu.Group to provide
  required Menu.Group context for GroupHeading
- Use explicit oninput handler instead of bind:value for search
  to ensure reliable propagation through $bindable chain

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@royendo @claude
fix: switch search to callback pattern for reliable state propagation
f0cdb02 
Replace $bindable chain (3-level deep binding wasn't propagating in
TanStack pages) with onSearchChange callback. All consumers now use
the callback to update search state.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@royendo @claude
fix: remove prop shadow in TableToolbar search handler
59d9882 
Remove local `searchText = text` write in `handleSearchChange` which
created a Svelte 5 prop shadow, disconnecting the input from parent state.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@royendo @claude
fix: revert alerts/reports, polish TableToolbar UI
b09fcb2 
- Revert alerts and reports tables to original `ResourceList` pattern
- Replace filter icon with `ListFilter` from lucide-svelte
- Filter pills: white bg, h-7, in h-9 container vertically centered
- Reorder toolbar right side: Search, Newest, View toggle
- Filter and Newest text use `text-fg-primary`
- Env vars page: `+` button aligns top with `items-start`

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@royendo @claude
fix: applied filters layout and toolbar children slot
0182467 
- Filter pills: font-medium, border-t divider restored, h-7 in h-9 container
- Add children snippet to TableToolbar for inline extras (e.g. + button)
- Env vars: + button rendered inside toolbar so applied filters span full width
- Reorder: Newest before Search

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@royendo @claude
fix: use Rill FilterOutlined icon, add section gap-y-2
a7a8fb6 
- Add FilterOutlined.svelte from Rill design system SVG
- Use it in TableToolbarFilterDropdown instead of lucide ListFilter
- Wrap toolbar in section with gap-y-2 for spacing between rows

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@royendo @claude
fix: always show divider, clean filter SVG, reduce env vars gap
3990f06 
- Add persistent <hr> between toolbar and applied filters
- Replace complex mask-based SVG with clean stroked outline path
- Reduce env vars page gap from gap-6 to gap-3

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@royendo
prettier
770d639
@royendo @claude
fix: use bg-surface-background for filter pills instead of hardcode…
4351c42 
…d white

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@royendo royendo requested a review from Di7design April 2, 2026 22:09
royendo and others added 4 commits April 2, 2026 18:24
@royendo @claude
refactor: code review fixes for TableToolbar system
47d815d 
- Remove trivial `handleSearchChange` wrapper, pass callback directly
- Remove `$bindable` on `viewMode`, use callback pattern consistently
- Sort: icon-only button (ArrowDownNarrowWide/ArrowUpNarrowWide), no text/border
- Swap order: Search before Sort
- Add `enableSorting` prop to BasicTable; env vars disables it
- Fix disabled search button: proper `disabled` attr instead of CSS-only
- Add `aria-label` to filter trigger and sort button
- View toggle: `bg-gray-200` to `bg-surface-hover` for theme support
- Trim barrel exports to `TableToolbar` + types only
- Use optional chaining on `onSortToggle?.()` for consistency

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@royendo @claude
fix: borderless search icon, revert sort toggle, remove default sort …
533800b 
…arrow

- Search icon: remove border/bg, match sort icon style
- Revert sort to text "Newest"/"Oldest" + ArrowUpDown
- Show hr/applied filters only when filterGroups exist
- Revert BasicTable enableSorting prop (keep column sorting)
- Remove sortDescFirst from Activity column so no arrow shows by default

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@royendo @claude
feat: add externalSort prop to BasicTable to hide sort arrows
7eae959 
When toolbar controls sort order, BasicTable clears its internal
sorting state so column header arrows don't show.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@royendo @claude
fix: clear column sort arrows when toolbar sort changes
cbd75a0 
Replace boolean `externalSort` with `externalSortKey` that reacts to
value changes. Pass `sortDirection` through to BasicTable so clicking
Newest/Oldest clears any active column header arrow.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@royendo royendo changed the title apply Filter redesign for env var and apply Filter redesign for env var and public URL Apr 3, 2026
@royendo royendo changed the title apply Filter redesign for env var and public URL design: apply Filter redesign for env var and public URL Apr 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Di7design Di7design Awaiting requested review from Di7design

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@royendo