This commit is contained in:
Doar Mihai
2026-05-30 18:56:17 +03:00
parent 17a2211952
commit afc49488a9
5 changed files with 93 additions and 33 deletions
+21 -20
View File
@@ -196,27 +196,28 @@
<div x-show="open" @click.outside="open = false" x-transition
class="mt-1 w-56 bg-[#16161d] border border-white/10 rounded-lg shadow-xl overflow-hidden z-10"
style="display:none;">
@if($userLists->isEmpty())
<div class="px-4 py-3 text-sm text-slate-500">
No lists yet.
<a href="{{ route('lists.index') }}" class="text-purple-400 hover:text-purple-300">Create one</a>
</div>
@else
<template x-for="list in lists" :key="list.id">
<button type="button" @click="toggleList(list.id)"
<template x-if="lists.length === 0">
<div class="px-4 py-3 text-sm text-slate-500">
No lists yet.
<a href="{{ route('lists.index') }}" class="text-purple-400 hover:text-purple-300">Create one</a>
</div>
</template>
<template x-for="list in lists" :key="list.slug">
<button type="button" @click="toggleList(list.slug)"
class="w-full flex items-center gap-2 px-4 py-2.5 text-sm hover:bg-white/5 transition-colors"
:class="added[list.id] ? 'text-purple-400' : 'text-slate-300'">
<svg x-show="added[list.id]" class="w-4 h-4 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
:class="added[list.slug] ? 'text-purple-400' : 'text-slate-300'">
<svg x-show="added[list.slug]" class="w-4 h-4 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
</svg>
<span x-show="!added[list.id]" class="w-4 h-4 flex-shrink-0"></span>
<span x-show="!added[list.slug]" class="w-4 h-4 flex-shrink-0"></span>
<span x-text="list.title" class="truncate"></span>
</button>
</template>
<div class="border-t border-white/5 px-4 py-2">
<a href="{{ route('lists.index') }}" class="text-xs text-slate-500 hover:text-slate-300 transition-colors">Manage lists →</a>
</div>
@endif
<template x-if="lists.length > 0">
<div class="border-t border-white/5 px-4 py-2">
<a href="{{ route('lists.index') }}" class="text-xs text-slate-500 hover:text-slate-300 transition-colors">Manage lists →</a>
</div>
</template>
</div>
</div>
@else
@@ -799,11 +800,11 @@ function addToListWidget(gameId, lists) {
open: false,
added: {},
async toggleList(listId) {
const isAdded = this.added[listId];
async toggleList(listSlug) {
const isAdded = this.added[listSlug];
const url = isAdded
? `/lists/${listId}/games/${this.gameId}`
: `/lists/${listId}/games`;
? `/lists/${listSlug}/games/${this.gameId}`
: `/lists/${listSlug}/games`;
const method = isAdded ? 'DELETE' : 'POST';
const res = await fetch(url, {
@@ -817,7 +818,7 @@ function addToListWidget(gameId, lists) {
});
if (res.ok) {
this.added[listId] = !isAdded;
this.added[listSlug] = !isAdded;
}
},
};
+3 -3
View File
@@ -56,7 +56,7 @@
<x-game-card :game="$entry->game" />
@auth
@if(auth()->id() === $list->user_id)
<button onclick="removeGameFromList({{ $list->id }}, {{ $entry->game->id }}, this)"
<button onclick="removeGameFromList('{{ $list->slug }}', '{{ $entry->game->slug }}', this)"
class="absolute top-2 right-2 w-6 h-6 bg-red-600 hover:bg-red-700 text-white rounded-full text-xs font-bold opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center leading-none">
×
</button>
@@ -71,9 +71,9 @@
@push('scripts')
<script>
function removeGameFromList(listId, gameId, btn) {
function removeGameFromList(listSlug, gameSlug, btn) {
if (!confirm('Remove from list?')) return;
fetch(`/lists/${listId}/games/${gameId}`, {
fetch(`/lists/${listSlug}/games/${gameSlug}`, {
method: 'DELETE',
headers: {
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,