Skip to content

feat: floating save bar in admin panel (Discord-style)#97

Merged
arediss merged 1 commit intomainfrom
feat/floating-save-bar
Apr 7, 2026
Merged

feat: floating save bar in admin panel (Discord-style)#97
arediss merged 1 commit intomainfrom
feat/floating-save-bar

Conversation

@arediss
Copy link
Copy Markdown
Owner

@arediss arediss commented Apr 7, 2026

Summary

Replaces the static top save button in admin tabs with a Discord-style floating save bar that slides up from the bottom when unsaved changes are detected.

How it works

  • Hidden by default — only appears when values differ from their initial loaded state
  • Fixed bottom — always accessible, no scrolling needed
  • "Careful — you have unsaved changes!" message with Save and Reset buttons
  • Reset restores all fields to their last saved values
  • Success state — green styling with checkmark, auto-hides after 3s
  • Slide animation — smooth 300ms transition

Reusable component

FloatingSaveBar accepts show, saving, saved, onSave, onReset props — ready to plug into any admin tab.

Applied to

  • General tab (change detection on all 9 settings fields + banner)
  • AdminTabLayout gets pb-20 padding to prevent bar overlap at bottom of scroll

Other tabs (Notifications, Paths, Roles, etc.) can adopt it incrementally.

Closes #65

Test plan

  • Frontend compiles
  • Bar appears when changing any setting
  • Bar disappears after save with success animation
  • Reset restores all values
  • Bar doesn't overlap last settings item
  • i18n EN + FR

- FloatingSaveBar component: slides up when unsaved changes detected
- Shows "Careful — you have unsaved changes!" with Save and Reset buttons
- Success state with green styling before auto-hiding
- Smooth slide-in/out animation (300ms)
- Change detection via initial values comparison
- Reset button restores all fields to last saved state
- Applied to General tab (other tabs to follow)
- Added pb-20 padding to AdminTabLayout to prevent bar overlap
- i18n: EN + FR translations

Closes #65
@arediss arediss merged commit 7e9825b into main Apr 7, 2026
6 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.

feat: floating save bar in admin panel (Discord-style)

1 participant