reservations applyable, fixed folder views, checkmarks

This commit is contained in:
Karlsson
2025-11-22 13:00:24 +01:00
parent a3a001d8e1
commit 74537558a8
15 changed files with 434 additions and 137 deletions

View File

@ -1,6 +1,7 @@
<script lang="ts">
import { page } from '$app/stores';
import { enhance } from '$app/forms';
import { invalidateAll } from '$app/navigation';
import ItemModal from '$lib/components/ItemModal.svelte';
import MoveItemModal from '$lib/components/MoveItemModal.svelte';
import DeleteConfirmModal from '$lib/components/DeleteConfirmModal.svelte';
@ -102,10 +103,10 @@
<span>/</span>
<span class="font-medium text-white">{category.name}</span>
</div>
<div class="flex gap-2">
<div class="relative flex gap-2">
{#if selectedItems.size > 0}
<div
class="animate-in fade-in slide-in-from-top-2 mr-4 flex items-center gap-2 duration-200"
class="animate-in fade-in slide-in-from-top-2 absolute top-1/2 right-full mr-4 flex -translate-y-1/2 items-center gap-2 whitespace-nowrap duration-200"
>
<span class="text-sm font-medium text-zinc-400">{selectedItems.size} selected</span>
<button
@ -169,7 +170,10 @@
currentFolderId={null}
currentCategoryId={category.id}
user={data.user}
onClose={() => (showItemModal = false)}
onClose={() => {
showItemModal = false;
invalidateAll();
}}
/>
<!-- Move Item Modal -->
@ -205,7 +209,7 @@
checked={allSelected}
indeterminate={isIndeterminate}
on:change={toggleAll}
class="checked:bg-[url('data:image/svg+xml,%3csvg viewBox=\'0 0 16 16\' fill=\'white\' xmlns=\'http://www.w3.org/2000/svg\'%3e%3cpath d=\'M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z\'/%3e%3c/svg%3e')] h-4 w-4 shrink-0 cursor-pointer appearance-none rounded border border-zinc-700 bg-zinc-900 bg-center bg-no-repeat transition-colors checked:border-zinc-700 checked:bg-zinc-900 focus:ring-1 focus:ring-red-500 focus:ring-offset-0"
class="h-4 w-4 shrink-0 cursor-pointer appearance-none rounded border border-zinc-700 bg-zinc-900 bg-center bg-no-repeat transition-colors checked:border-zinc-700 checked:bg-zinc-900 checked:bg-[url('data:image/svg+xml,%3csvg%20viewBox=%270%200%2016%2016%27%20fill=%27white%27%20xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath%20d=%27M12.207%204.793a1%201%200%20010%201.414l-5%205a1%201%200%2001-1.414%200l-2-2a1%201%200%20011.414-1.414L6.5%209.086l4.293-4.293a1%201%200%20011.414%200z%27/%3e%3c/svg%3e')] checked:bg-[length:75%] focus:ring-1 focus:ring-red-500 focus:ring-offset-0"
/>
</th>
<th class="px-4 py-2 font-medium text-zinc-500">Name</th>
@ -232,7 +236,7 @@
type="checkbox"
checked={selectedItems.has(item.id)}
on:change={() => toggleSelection(item.id)}
class="checked:bg-[url('data:image/svg+xml,%3csvg viewBox=\'0 0 16 16\' fill=\'white\' xmlns=\'http://www.w3.org/2000/svg\'%3e%3cpath d=\'M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z\'/%3e%3c/svg%3e')] h-4 w-4 shrink-0 cursor-pointer appearance-none rounded border border-zinc-700 bg-zinc-900 bg-center bg-no-repeat transition-colors checked:border-zinc-700 checked:bg-zinc-900 focus:ring-1 focus:ring-red-500 focus:ring-offset-0"
class="h-4 w-4 shrink-0 cursor-pointer appearance-none rounded border border-zinc-700 bg-zinc-900 bg-center bg-no-repeat transition-colors checked:border-zinc-700 checked:bg-zinc-900 checked:bg-[url('data:image/svg+xml,%3csvg%20viewBox=%270%200%2016%2016%27%20fill=%27white%27%20xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath%20d=%27M12.207%204.793a1%201%200%20010%201.414l-5%205a1%201%200%2001-1.414%200l-2-2a1%201%200%20011.414-1.414L6.5%209.086l4.293-4.293a1%201%200%20011.414%200z%27/%3e%3c/svg%3e')] checked:bg-[length:75%] focus:ring-1 focus:ring-red-500 focus:ring-offset-0"
/>
</td>
<td class="px-4 py-2 font-medium text-zinc-200">