feat(ux): Sticky Save/Cancel buttons on forms (#38)

- Add sticky positioning to form action buttons (always visible at bottom)
- Add Ctrl+S / Cmd+S keyboard shortcut to save forms
- Create reusable useFormShortcuts hook
- Apply to all create forms: spool, filament, vendor

Fixes: https://github.com/Donkie/Spoolman/issues/274

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-16 00:09:06 -06:00
parent 88747307e5
commit 94612a6dd3
5 changed files with 62 additions and 3 deletions

View File

@@ -0,0 +1,26 @@
import { useEffect } from "react";
/**
* Hook to add keyboard shortcuts to forms.
* - Ctrl+S / Cmd+S: Save (calls onSave callback)
* - Escape: Cancel (calls onCancel callback if provided)
*/
export function useFormShortcuts(onSave: () => void, onCancel?: () => void) {
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
// Ctrl+S or Cmd+S to save
if ((e.ctrlKey || e.metaKey) && e.key === "s") {
e.preventDefault();
onSave();
}
// Escape to cancel (if handler provided)
if (e.key === "Escape" && onCancel) {
e.preventDefault();
onCancel();
}
};
document.addEventListener("keydown", handleKeyDown);
return () => document.removeEventListener("keydown", handleKeyDown);
}, [onSave, onCancel]);
}