valere/evilspins
1
0
Fork 0
Code Issues 26 Pull Requests Actions Packages Projects 4 Releases Wiki Activity

evilSpins v1
All checks were successful
Deploy App / build (push) Successful in 43s
Details
Deploy App / deploy (push) Successful in 41s
Details

Browse Source
This commit is contained in:
valere
2025-11-04 22:41:41 +01:00
parent deb15b3ea1
commit 34d22b3b17
49 changed files with 5791 additions and 2447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
app/components/SearchModal.vue
View File

@@ -1,58 +1,83 @@
<template>
<transition name="fade">
<div v-if="ui.showSearch" class="fixed inset-0 z-50 flex items-center justify-center transition-all">
<div
v-if="ui.showSearch"
class="fixed inset-0 z-50 flex items-center justify-center transition-all"
>
<div class="absolute inset-0 bg-black/60 backdrop-blur-md" @click="close"></div>
<div
class="relative w-full max-w-2xl rounded-xl bg-white shadow-xl ring-1 ring-slate-200 dark:bg-slate-900 dark:ring-slate-700"
role="dialog" aria-modal="true" @keydown.esc.prevent.stop="close">
role="dialog"
aria-modal="true"
@keydown.esc.prevent.stop="close"
>
<div class="flex items-center gap-2 dark:border-slate-700">
<svg class="ml-4 h-7 w-7 text-slate-500" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<svg
class="ml-4 h-7 w-7 text-slate-500"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="11" cy="11" r="8" />
<path d="m21 21-4.3-4.3" />
</svg>
<input ref="inputRef" v-model="ui.searchQuery" type="text" placeholder="Rechercher boxes, artistes, tracks..."
<input
ref="inputRef"
v-model="ui.searchQuery"
type="text"
placeholder="Rechercher boxes, artistes, tracks..."
class="flex-1 bg-transparent px-2 py-2 text-slate-900 text-3xl placeholder-slate-400 outline-none dark:text-slate-100"
@keydown.down.prevent="move(1)" @keydown.up.prevent="move(-1)" @keydown.enter.prevent="confirm" />
@keydown.down.prevent="move(1)"
@keydown.up.prevent="move(-1)"
@keydown.enter.prevent="confirm"
/>
</div>
<div class="max-h-72 overflow-auto results-scroll">
<template v-if="results.length">
<ul class="divide-y divide-slate-100 dark:divide-slate-800">
<li v-for="(resultItem, idx) in results" :key="resultItem.key" :class="[
'flex cursor-pointer items-center justify-between gap-3 px-2 py-3 hover:bg-slate-50 dark:hover:bg-slate-800',
idx === activeIndex ? 'bg-slate-100 dark:bg-slate-800' : ''
]" @mouseenter="activeIndex = idx" @click="selectResult(resultItem)">
<li
v-for="(resultItem, idx) in results"
:key="resultItem.key"
:class="[
'flex cursor-pointer items-center justify-between gap-3 px-2 py-3 hover:bg-slate-50 dark:hover:bg-slate-800',
idx === activeIndex ? 'bg-slate-100 dark:bg-slate-800' : ''
]"
@mouseenter="activeIndex = idx"
@click="selectResult(resultItem)"
>
<div class="flex items-center gap-3">
<img v-if="coverUrlFor(resultItem)" :src="coverUrlFor(resultItem)" alt="" loading="lazy"
class="h-10 w-10 rounded object-cover ring-1 ring-slate-200 dark:ring-slate-700" />
<img
v-if="coverUrlFor(resultItem)"
:src="coverUrlFor(resultItem)"
alt=""
loading="lazy"
class="h-10 w-10 rounded object-cover ring-1 ring-slate-200 dark:ring-slate-700"
/>
<span
class="inline-flex min-w-[68px] items-center justify-center rounded-md border px-2 py-0.5 text-xs font-semibold uppercase text-slate-600 dark:text-slate-300 dark:border-slate-600">{{
resultItem.type }}</span>
class="inline-flex min-w-[68px] items-center justify-center rounded-md border px-2 py-0.5 text-xs font-semibold uppercase text-slate-600 dark:text-slate-300 dark:border-slate-600"
>{{ resultItem.type }}</span
>
<span class="text-slate-900 dark:text-slate-100">{{ resultItem.label }}</span>
</div>
<div class="flex items-center gap-2">
<span v-if="resultItem.sublabel" class="text-sm text-slate-500 dark:text-slate-400">{{
resultItem.sublabel }}</span>
<button v-if="resultItem.type === 'TRACK'"
class="p-1 rounded hover:bg-slate-100 dark:hover:bg-slate-800" aria-label="Toggle favorite"
@click.stop="fav.toggle(resultItem.payload)">
<svg v-if="fav.isFavorite(resultItem.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>
<span
v-if="resultItem.sublabel"
class="text-sm text-slate-500 dark:text-slate-400"
>{{ resultItem.sublabel }}</span
>
<toggleFavorite v-if="resultItem.type === 'TRACK'" :track="resultItem.payload" />
</div>
</li>
</ul>
</template>
<div v-else-if="ui.searchQuery" class="px-2 py-6 text-center text-slate-500 dark:text-slate-400">
<div
v-else-if="ui.searchQuery"
class="px-2 py-6 text-center text-slate-500 dark:text-slate-400"
>
Aucun résultat
</div>
</div>
@@ -77,7 +102,11 @@ const activeIndex = ref(0)
const close = () => ui.closeSearch()
const normalized = (s: string) => s.normalize('NFD').replace(/\p{Diacritic}/gu, '').toLowerCase()
const normalized = (s: string) =>
s
.normalize('NFD')
.replace(/\p{Diacritic}/gu, '')
.toLowerCase()
type ResultItem = {
key: string
@@ -110,7 +139,10 @@ const results = computed<ResultItem[]>(() => {
}
}
for (const track of data.tracks) {
const artistName = typeof track.artist === 'object' && track.artist ? (track.artist as any).name ?? '' : String(track.artist)
const artistName =
typeof track.artist === 'object' && track.artist
? ((track.artist as any).name ?? '')
: String(track.artist)
const label = track.title
const sub = artistName
if (normalized(label).includes(q) || normalized(sub).includes(q)) {