refacto card / box / deck ajout du template default

app/plugins/search-shortcut.client.ts

@@ -1,17 +0,0 @@
-import { useUiStore } from '~/store/ui'
-export default defineNuxtPlugin((nuxtApp) => {
-  const ui = useUiStore()
-  const isMobile = nuxtApp.$isMobile as boolean | undefined
-
-  const onKeyDown = (e: KeyboardEvent) => {
-    if ((e.metaKey || e.ctrlKey) && (e.key === 'f' || e.key === 'F')) {
-      if (isMobile) return
-      e.preventDefault()
-      if (!ui.showSearch) ui.openSearch()
-    }
-  }
-
-  if (process.client) {
-    window.addEventListener('keydown', onKeyDown)
-  }
-})

app/plugins/shortcut.client.ts

@@ -0,0 +1,106 @@
+import { useUiStore } from '~/store/ui'
+import { usePlayerStore } from '~/store/player'
+import { onBeforeUnmount, onUnmounted, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { useDataStore } from '~/store/data'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  // Ne s'exécuter que côté client
+  if (process.server) return
+
+  const ui = useUiStore()
+  const player = usePlayerStore()
+  const route = useRoute()
+  const dataStore = useDataStore()
+
+  function isInputElement(target: EventTarget | null): boolean {
+    return (
+      target instanceof HTMLInputElement ||
+      target instanceof HTMLTextAreaElement ||
+      target instanceof HTMLSelectElement ||
+      (target instanceof HTMLElement && target.isContentEditable)
+    )
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    console.log('Key pressed:', e.code, 'Key:', e.key, 'Target:', e.target)
+
+    // Ne pas interférer avec les champs de formulaire
+    if (isInputElement(e.target as HTMLElement)) {
+      console.log('Input element, ignoring key')
+      return
+    }
+
+    // Gestion du raccourci de recherche (Ctrl+F / Cmd+F)
+    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'f') {
+      e.preventDefault()
+      if (!ui.showSearch) {
+        ui.openSearch()
+      }
+      return
+    }
+
+    // Gestion des autres touches uniquement si pas de touche de contrôle enfoncée
+    if (e.ctrlKey || e.altKey || e.metaKey) {
+      return
+    }
+
+    switch (e.code) {
+      // Gestion de la barre d'espace pour play/pause
+      case 'Space':
+        console.log('Space pressed, toggling play/pause')
+        e.preventDefault()
+        e.stopPropagation()
+        if (player.currentTrack) {
+          console.log('Toggling play state')
+          player.togglePlay()
+        } else {
+          console.log('No current track to play/pause')
+        }
+        return false
+
+      // Gestion de la touche Échap pour fermer la boîte
+      case 'Escape':
+        e.preventDefault()
+        ui.closeBox()
+        break
+
+      // Gestion de la touche Entrée pour ouvrir une boîte
+      case 'Enter':
+        if (document.activeElement?.id) {
+          e.preventDefault()
+          ui.selectBox(document.activeElement.id)
+          window.scrollTo({ top: 0, behavior: 'smooth' })
+        }
+        break
+
+      // Gestion des touches fléchées (à implémenter si nécessaire)
+      case 'ArrowUp':
+      case 'ArrowDown':
+      case 'ArrowLeft':
+      case 'ArrowRight':
+        // Implémentation future de la navigation au clavier
+        break
+    }
+  }
+
+  // Ajout de l'écouteur d'événements avec capture pour intercepter l'événement plus tôt
+  window.addEventListener('keydown', handleKeyDown, { capture: true, passive: false })
+  console.log('Keyboard event listener added')
+
+  // Nettoyage lors de la destruction
+  const stop = () => {
+    window.removeEventListener('keydown', handleKeyDown)
+  }
+
+  // Nettoyage quand le composant est démonté
+  onUnmounted(stop)
+
+  // Nettoyage quand la page est déchargée
+  if (process.client) {
+    window.addEventListener('unload', stop)
+    onBeforeUnmount(() => {
+      window.removeEventListener('unload', stop)
+    })
+  }
+})