feat: add keyboard shortcut Cmd/Ctrl+S to SaveButton

- Add Cmd+S (Mac) or Ctrl+S (Windows/Linux) keyboard shortcut to save CSS
- Detect platform to display correct shortcut symbol (⌘ or Ctrl)
- Prevent default browser save behavior
- Translate tooltips to French
- Show shortcut in button tooltip

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-01-09 16:46:48 +01:00
parent cb5d056b51
commit 9127520ff7

View file

@ -39,7 +39,7 @@
</template>
<script setup>
import { ref, computed } from 'vue';
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { useStylesheetStore } from '../stores/stylesheet';
const stylesheetStore = useStylesheetStore();
@ -51,6 +51,10 @@ const lastSavedFormatted = computed(() => stylesheetStore.lastSavedFormatted);
const hasError = computed(() => !!saveError.value);
const showSuccess = ref(false);
// Detect platform for keyboard shortcut display
const isMac = typeof navigator !== 'undefined' && navigator.platform.toUpperCase().indexOf('MAC') >= 0;
const shortcutKey = isMac ? '⌘' : 'Ctrl';
const handleSave = async () => {
const result = await stylesheetStore.saveCustomCss();
@ -64,12 +68,34 @@ const handleSave = async () => {
// Errors are handled in the store and reflected in hasError
};
const getTooltip = () => {
if (!isDirty.value) return 'No changes to save';
if (isSaving.value) return 'Saving...';
if (hasError.value) return saveError.value;
return 'Save custom CSS';
const handleKeyDown = (event) => {
// Check for Cmd+S (Mac) or Ctrl+S (Windows/Linux)
if ((event.metaKey || event.ctrlKey) && event.key === 's') {
event.preventDefault();
// Only save if there are changes and not currently saving
if (isDirty.value && !isSaving.value) {
handleSave();
}
}
};
const getTooltip = () => {
if (!isDirty.value) return 'Aucune modification à enregistrer';
if (isSaving.value) return 'Enregistrement...';
if (hasError.value) return saveError.value;
return `Enregistrer le CSS personnalisé (${shortcutKey}+S)`;
};
// Add keyboard listener on mount
onMounted(() => {
window.addEventListener('keydown', handleKeyDown);
});
// Remove keyboard listener on unmount
onUnmounted(() => {
window.removeEventListener('keydown', handleKeyDown);
});
</script>
<style scoped>