Skip to content

Redesign user pages with page toppers and dynamic search#1275

Merged
maebeale merged 2 commits intomainfrom
maebeale/user-ux-updates
Mar 1, 2026
Merged

Redesign user pages with page toppers and dynamic search#1275
maebeale merged 2 commits intomainfrom
maebeale/user-ux-updates

Conversation

@maebeale
Copy link
Collaborator

@maebeale maebeale commented Mar 1, 2026

What is the goal of this PR and why is this important?

  • Bring user pages in line with the person/org page designs (page topper banners, white card sections, consistent spacing)
  • Add dynamic live search to the users index so filtering is instant without full page reloads

How did you approach the change?

Page topper banners (show, edit, new)

  • Added DomainTheme-based colored banner headers matching the person/org pattern
  • Applied domain background color to page body

Edit page identity header

  • Redesigned with avatar, bold email, person link, and right-aligned action buttons (Reset password, Resend invite, Change password)
  • Used form_class: "inline" on button_to to fix flex layout issues

Form reorganization

  • Wrapped form sections into white cards: Account Details, Notes, Preferences, Comments
  • Added "Account flags" label above Lock/Admin checkboxes
  • Removed redundant displayed name fields (kept hidden fields for form submission)

Dynamic search (index)

  • Replaced static table with Turbo Frame (turbo_frame_tag :users_results) and skeleton loader
  • Added Stimulus collection controller for debounced text search (400ms) and immediate select submission
  • Controller branches on turbo_frame_request? to render results partial
  • Count updates dynamically via turbo_stream.replace
  • Reordered columns: email (bold, primary) first, person second

UI Testing Checklist

  • Visit users index, verify skeleton loader appears briefly then results load
  • Type in search box, verify results update after typing stops (debounced)
  • Change Access/Permission level dropdowns, verify immediate filtering
  • Click "Clear filters", verify all filters reset and results reload
  • Verify pagination works within turbo frame
  • Visit user show page, verify page topper banner and white card layout
  • Visit user edit page, verify banner, identity header with action buttons
  • Visit new user page, verify banner displays
  • Verify links within turbo frame (Edit, View, Create person, Invite) navigate correctly

Anything else to add?

Nothing additional.

🤖 Generated with Claude Code

maebeale and others added 2 commits March 1, 2026 07:02
- Add DomainTheme page topper banners to user show, edit, and new pages
- Redesign edit page identity header with avatar, email, and right-aligned action buttons
- Reorganize user form into white card sections (Account Details, Notes, Preferences, Comments)
- Add dynamic live search to users index using Stimulus collection controller and Turbo Frames
- Reorder index columns: email (bold, primary) first, then person
- Swap inline JS handlers for Stimulus-based debounced search and immediate select submission

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The index now renders a skeleton loader inside a turbo frame
instead of actual user data, which loads via turbo frame request.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@maebeale maebeale merged commit 0e90125 into main Mar 1, 2026
3 checks passed
@maebeale maebeale deleted the maebeale/user-ux-updates branch March 1, 2026 12:26
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