Skip to content

Replace custom JS toast system with HTMX-native patterns#177

Merged
chriscarrollsmith merged 3 commits intomainfrom
refactor/htmx-native-toast-and-avatar-oob
Mar 18, 2026
Merged

Replace custom JS toast system with HTMX-native patterns#177
chriscarrollsmith merged 3 commits intomainfrom
refactor/htmx-native-toast-and-avatar-oob

Conversation

@chriscarrollsmith
Copy link
Copy Markdown
Contributor

Summary

  • Toast migration: Replaced the custom showToast() JS function and client-side flash cookie reader with server-side rendering via htmx-ext-remove-me for auto-dismiss, HTMX responseHandling config for error-status OOB swaps, and a flash cookie middleware for full-page-load toasts.
  • Avatar update fix: Replaced HX-Refresh: true on avatar upload with OOB swaps for both the profile display and navbar avatar. This eliminates the visible flicker from full page reloads and ensures the "Profile updated successfully" toast always appears (previously lost during refresh).
  • Navbar avatar partial: Extracted the navbar avatar into a reusable partial (navbar_avatar.html) with an OOB variant (navbar_avatar_oob.html) for HTMX responses.

Test plan

  • All 362 non-browser unit/integration tests pass
  • All 7 Playwright browser tests pass, including:
    • test_htmx_success_toast_appears — name-only profile update shows toast
    • test_avatar_update_toast_appears — avatar update shows toast
    • test_avatar_update_no_full_reload — avatar update uses OOB swaps, no page reload
    • test_htmx_error_toast_appears — error responses show toast via OOB
    • test_flash_cookie_toast_appears — flash cookies render server-side on load
    • test_toast_auto_dismisses — toasts auto-dismiss after 5s via remove-me
    • test_toast_close_button — manual close button works

🤖 Generated with Claude Code

chriscarrollsmith and others added 3 commits March 18, 2026 16:14
Migrate showToast and flash cookie JS to server-side rendering with
htmx-ext-remove-me for auto-dismiss, HTMX responseHandling config for
error toasts, and a flash cookie middleware for full-page-load toasts.

Replace HX-Refresh on avatar update with OOB swaps for both the profile
card and navbar avatar, eliminating the visible flicker from full page
reloads and ensuring the success toast is always displayed.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@chriscarrollsmith chriscarrollsmith merged commit b67ef76 into main Mar 18, 2026
2 checks passed
@chriscarrollsmith chriscarrollsmith deleted the refactor/htmx-native-toast-and-avatar-oob branch March 18, 2026 22:54
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