Skip to content

refactor(ui): extract shared search & filter toolbar component#144

Merged
appleboy merged 1 commit intomainfrom
worktree-ui
Mar 31, 2026
Merged

refactor(ui): extract shared search & filter toolbar component#144
appleboy merged 1 commit intomainfrom
worktree-ui

Conversation

@appleboy
Copy link
Copy Markdown
Member

Summary

  • Extract the sf-toolbar search + filter toolbar from the sessions page into reusable shared components (SfToolbar, SfSearchRow, SfFilterTab)
  • Migrate all 4 list pages (sessions, admin clients, my apps, audit logs) to use the shared toolbar for consistent UI
  • Clean up deprecated components (ClientsSearchBar, SessionsFilterTab, AdminClientsStatusTab) and unused CSS

Changes

New files:

  • search_filter_toolbar_component.templ — 3 composable templ components + SfSearchRowProps in props.go
  • components/search-filter-toolbar.css — shared sf-* CSS extracted from account-sessions.css

Migrated pages:

  • /account/sessions — uses SfToolbar + SfSearchRow + SfFilterTab (Status + Type tabs)
  • /admin/clients — replaced status-filter-tabs + ClientsSearchBar with sf-toolbar segmented tabs
  • /apps — replaced ClientsSearchBar with SfToolbar + SfSearchRow
  • /admin/audit — wrapped in SfToolbar, uses sf-* CSS classes inline (advanced filters need single form)

Security hardening:

  • Use templ.Classes() for dot-class sanitization instead of raw string concatenation
  • Sort hidden field map keys for deterministic HTML output

Test plan

  • make generate && make build && make lint pass (verified)
  • Visual check: all 4 pages render toolbar with consistent styling
  • Verify dark mode toggle works on all pages
  • Verify responsive layout at 768px breakpoint
  • Verify search, filter tabs, pagination still function correctly

🤖 Generated with Claude Code

- Extract sf-toolbar CSS from account-sessions.css into shared
  components/search-filter-toolbar.css
- Create SfToolbar, SfSearchRow, and SfFilterTab reusable templ
  components with SfSearchRowProps configuration
- Migrate account sessions, admin clients, my apps, and audit logs
  pages to use the shared toolbar pattern
- Remove deprecated ClientsSearchBar, SessionsFilterTab, and
  AdminClientsStatusTab components
- Clean up unused CSS classes from search.css, admin-clients.css,
  and admin-audit-logs.css
- Use templ.Classes for dotClass sanitization to prevent XSS
- Sort hidden field keys for deterministic HTML output

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

codecov bot commented Mar 31, 2026

Codecov Report

❌ Patch coverage is 0% with 8 lines in your changes missing coverage. Please review.

Files with missing lines Patch % Lines
internal/templates/props.go 0.00% 8 Missing ⚠️

📢 Thoughts on this report? Let us know!

@appleboy appleboy merged commit 98ede36 into main Mar 31, 2026
15 of 17 checks 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.

1 participant