favorite: v0.1

app/components/SearchModal.vue

@@ -31,7 +31,22 @@
                       r.type }}</span>
                   <span class="text-slate-900 dark:text-slate-100">{{ r.label }}</span>
                 </div>
-                <span v-if="r.sublabel" class="text-sm text-slate-500 dark:text-slate-400">{{ r.sublabel }}</span>
+                <div class="flex items-center gap-2">
+                  <span v-if="r.sublabel" class="text-sm text-slate-500 dark:text-slate-400">{{ r.sublabel }}</span>
+                  <button
+                    v-if="r.type === 'TRACK'"
+                    class="p-1 rounded hover:bg-slate-100 dark:hover:bg-slate-800"
+                    aria-label="Toggle favorite"
+                    @click.stop="fav.toggle(r.payload)"
+                  >
+                    <svg v-if="fav.isFavorite(r.payload.id)" class="h-5 w-5 text-rose-500" viewBox="0 0 24 24" fill="currentColor">
+                      <path d="M12 21s-6.716-4.35-9.428-7.062C.86 12.226.5 10.64.5 9.5.5 6.462 2.962 4 6 4c1.657 0 3.157.806 4 2.09C10.843 4.806 12.343 4 14 4c3.038 0 5.5 2.462 5.5 5.5 0 1.14-.36 2.726-2.072 4.438C18.716 16.65 12 21 12 21z"/>
+                    </svg>
+                    <svg v-else class="h-5 w-5 text-slate-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                      <path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z"/>
+                    </svg>
+                  </button>
+                </div>
               </li>
             </ul>
           </template>
@@ -49,10 +64,12 @@ import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { useUiStore } from '~/store/ui'
 import { useDataStore } from '~/store/data'
 import { usePlayerStore } from '~/store/player'
+import { useFavoritesStore } from '~/store/favorites'
 
 const ui = useUiStore()
 const data = useDataStore()
 const player = usePlayerStore()
+const fav = useFavoritesStore()
 const inputRef = ref<HTMLInputElement | null>(null)
 const activeIndex = ref(0)