FEAT: playlist filters

app/components/Card.vue

@@ -35,7 +35,8 @@
 
         <!-- Body -->
 
-        <!-- <div class="p-3 text-center bg-white rounded-b-xl">
+        <div
+          class="p-3 text-center bg-white rounded-b-xl opacity-0 -mt-16 hover:opacity-100 hover:-mt-0 transition-all duration-300">
           <div v-if="isOrder" class="label">
             {{ props.track.order }}
           </div>
@@ -45,10 +46,10 @@
           <p v-if="isPlaylistTrack" class="select-text text-base text-neutral-800 font-bold capitalize truncate">
             {{ props.track.artist.name }}
           </p>
-          <p class="select-text">
+          <!-- <p class="select-text">
             {{ props.track.url.split('/')[4]?.split('__')[0] }}
-          </p>
-        </div> -->
+          </p> -->
+        </div>
       </main>
 
       <!-- Face-Down -->

app/components/deck/DeckPlaylist.vue

@@ -1,16 +1,28 @@
 <template>
-  <div ref="deck" class="deck flex flex-wrap justify-center gap-4" :class="{ 'pb-36': playerStore.currentTrack }">
-    <button @click="closeDatBox" v-if="uiStore.isBoxSelected"
-      class="absolute top-10 right-10 px-4 py-2 text-black hover:text-black bg-esyellow transition-colors z-50"
-      aria-label="close the box">
-      close
-    </button>
-    <button class="absolute top-24 right-10 px-4 py-2 text-black hover:text-black bg-esyellow transition-colors z-50"
-      @click="cardStore.revealAllCards(tracks)">
-      reveal
-    </button>
-    <card v-for="(track, i) in tracks" :key="track.id" :track="track" tabindex="i"
-      :is-face-up="isCardRevealed(track.id)" />
+  <div class="deck-playlist">
+    <div class="flex flex-col fixed right-0 top-0 z-50">
+      <button @click="closeDatBox" v-if="uiStore.isBoxSelected"
+        class="px-4 py-2 text-black hover:text-black bg-esyellow transition-colors z-50" aria-label="close the box">
+        close
+      </button>
+    </div>
+    <div class="controls flex justify-center z-50 relative">
+      <button class="px-4 py-2 text-black hover:text-black bg-esyellow transition-colors"
+        @click="cardStore.revealAllCards(tracks)">
+        reveal
+      </button>
+      <button class="px-4 py-2 text-black hover:text-black bg-esyellow transition-colors"
+        @click="cardStore.hideAllCards(tracks)">
+        hide
+      </button>
+      <SearchInput @search="onSearch" />
+      <SelectCardRank @change="onRankChange" />
+      <SelectCardSuit @change="onSuitChange" />
+    </div>
+    <div ref="deck" class="deck flex flex-wrap justify-center gap-4" :class="{ 'pb-36': playerStore.currentTrack }">
+      <card v-for="(track, i) in filteredTracks" :key="track.id" :track="track" tabindex="i"
+        :is-face-up="isCardRevealed(track.id)" />
+    </div>
   </div>
 </template>
 
@@ -21,6 +33,9 @@ import { useCardStore } from '~/store/card'
 import { usePlayerStore } from '~/store/player'
 import { useUiStore } from '~/store/ui'
 import type { Box } from '~~/types/types'
+import SelectCardSuit from '~/components/ui/SelectCardSuit.vue'
+import SelectCardRank from '~/components/ui/SelectCardRank.vue'
+import SearchInput from '~/components/ui/SearchInput.vue'
 
 const props = defineProps<{
   box: Box
@@ -33,10 +48,63 @@ const uiStore = useUiStore()
 
 const deck = ref()
 const tracks = computed(() => dataStore.getTracksByboxId(props.box.id))
+const filteredTracks = ref(tracks.value)
+
+// Variables réactives pour les filtres
+const selectedSuit = ref('')
+const selectedRank = ref('')
+const searchQuery = ref('')
 
 const isCardRevealed = (trackId: number) => cardStore.isCardRevealed(trackId)
 
 const closeDatBox = () => {
   uiStore.closeBox()
 }
+
+const onSuitChange = (suit: string) => {
+  selectedSuit.value = suit
+  applyFilters()
+}
+
+const onRankChange = (rank: string) => {
+  selectedRank.value = rank
+  applyFilters()
+}
+
+const onSearch = (query: string) => {
+  searchQuery.value = query
+  applyFilters()
+}
+
+// Applique tous les filtres (couleur, rang et recherche)
+const applyFilters = () => {
+  let result = [...tracks.value]
+
+  // Filtre par couleur
+  if (selectedSuit.value) {
+    result = result.filter(track => track.card?.suit === selectedSuit.value)
+  }
+
+  // Filtre par rang
+  if (selectedRank.value) {
+    result = result.filter(track => track.card?.rank === selectedRank.value)
+  }
+
+  // Filtre par recherche textuelle
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase()
+    result = result.filter(track => {
+      // Gestion du nom d'artiste (peut être un objet ou une chaîne)
+      const artistName = typeof track.artist === 'object' ? track.artist?.name : String(track.artist || '')
+      // Recherche dans le titre, l'artiste et l'année
+      return (
+        track.title?.toLowerCase().includes(query) ||
+        artistName.toLowerCase().includes(query) ||
+        String(track.year || '').includes(query)
+      )
+    })
+  }
+
+  filteredTracks.value = result
+}
 </script>

app/components/ui/SearchInput.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="relative">
+    <input v-model="searchQuery" type="text" placeholder="Rechercher..."
+      class="px-4 py-2 pl-10 w-48 m-4 h-12 font-bold text-black bg-esyellow border border-none rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-estyellow-dark focus:border-estyellow-dark"
+      @input="handleSearch">
+    <div class="absolute inset-y-0 left-0 flex items-center pl-6 pointer-events-none">
+      <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+      </svg>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const emit = defineEmits(['search'])
+
+const searchQuery = ref('')
+
+const handleSearch = () => {
+  emit('search', searchQuery.value.trim().toLowerCase())
+}
+</script>

app/components/ui/SelectCardRank.vue

@@ -0,0 +1,37 @@
+<template>
+  <select v-model="selectedRank" @change="handleChange"
+    class="px-4 py-2 m-4 font-bold h-12 border-none text-center bg-esyellow transition-colors border border-esyellow-dark rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-estyellow-dark focus:border-estyellow-dark cursor-pointer appearance-none">
+    <option value="">rank</option>
+    <option v-for="rank in ranks" :key="rank.value" :value="rank.value">
+      {{ rank.label }}
+    </option>
+  </select>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const emit = defineEmits(['change'])
+
+const ranks = [
+  { value: 'A', label: 'Ace' },
+  { value: '2', label: '2' },
+  { value: '3', label: '3' },
+  { value: '4', label: '4' },
+  { value: '5', label: '5' },
+  { value: '6', label: '6' },
+  { value: '7', label: '7' },
+  { value: '8', label: '8' },
+  { value: '9', label: '9' },
+  { value: '10', label: '10' },
+  { value: 'J', label: 'Jack' },
+  { value: 'Q', label: 'Queen' },
+  { value: 'K', label: 'King' }
+]
+
+const selectedRank = ref('')
+
+const handleChange = () => {
+  emit('change', selectedRank.value)
+}
+</script>

app/components/ui/SelectCardSuit.vue

@@ -0,0 +1,28 @@
+<template>
+  <select v-model="selectedSuit" @change="handleChange"
+    class="px-4 py-2 m-4 text-black font-bold h-12 border-none text-center hover:text-black bg-esyellow transition-colors border border-esyellow-dark rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-esyellow-dark focus:border-esyellow-dark cursor-pointer appearance-none">
+    <option value="">♠♣♦♥</option>
+    <option v-for="suit in suits" :key="suit.value" :value="suit.value">
+      {{ suit.label }}
+    </option>
+  </select>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const emit = defineEmits(['change'])
+
+const suits = [
+  { value: '♥', label: '♥' },
+  { value: '♦', label: '♦' },
+  { value: '♣', label: '♣' },
+  { value: '♠', label: '♠' }
+]
+
+const selectedSuit = ref('')
+
+const handleChange = () => {
+  emit('change', selectedSuit.value)
+}
+</script>

app/layouts/default.vue

@@ -3,6 +3,6 @@
     <slot />
     <searchModal />
     <loader />
-    <Platine />
+    <Player />
   </div>
 </template>