diff --git a/src/lib/components/atoms/RowVirtualizer.svelte b/src/lib/components/atoms/RowVirtualizer.svelte index 55dc7a1..cd7f35f 100644 --- a/src/lib/components/atoms/RowVirtualizer.svelte +++ b/src/lib/components/atoms/RowVirtualizer.svelte @@ -13,24 +13,38 @@ let { class: className, count, item, itemHeight, placeholder }: Props = $props(); + let element: HTMLElement | undefined = $state(); + let scrollMargin = $state(0); + const virtualizer = $derived( createWindowVirtualizer({ count, estimateSize: itemHeight, + scrollMargin, }), ); const measureItem = (node: HTMLElement) => { $effect(() => $virtualizer.measureElement(node)); }; + + $effect(() => { + if (!element) return; + + const observer = new ResizeObserver(() => { + scrollMargin = element!.getBoundingClientRect().top + window.scrollY; + }); + observer.observe(element.parentElement!); + return () => observer.disconnect(); + }); -
+
{#each $virtualizer.getVirtualItems() as virtualItem (virtualItem.key)}
diff --git a/src/routes/(fullscreen)/file/[id]/+page.svelte b/src/routes/(fullscreen)/file/[id]/+page.svelte index 3249bf2..9e0ddc0 100644 --- a/src/routes/(fullscreen)/file/[id]/+page.svelte +++ b/src/routes/(fullscreen)/file/[id]/+page.svelte @@ -145,7 +145,9 @@ diff --git a/src/routes/(fullscreen)/gallery/+page.svelte b/src/routes/(fullscreen)/gallery/+page.svelte index 1826c47..b6f8239 100644 --- a/src/routes/(fullscreen)/gallery/+page.svelte +++ b/src/routes/(fullscreen)/gallery/+page.svelte @@ -22,5 +22,5 @@ - goto(`/file/${id}`)} /> + goto(`/file/${id}?from=gallery`)} /> diff --git a/src/routes/(main)/directory/[[id]]/DirectoryEntries/DirectoryEntries.svelte b/src/routes/(main)/directory/[[id]]/DirectoryEntries/DirectoryEntries.svelte index b761176..530cb97 100644 --- a/src/routes/(main)/directory/[[id]]/DirectoryEntries/DirectoryEntries.svelte +++ b/src/routes/(main)/directory/[[id]]/DirectoryEntries/DirectoryEntries.svelte @@ -25,56 +25,57 @@ showParentEntry = false, }: Props = $props(); - type FileEntry = + type Entry = + | { type: "parent" } + | { type: "directory"; name: string; details: (typeof info.subDirectories)[number] } | { type: "file"; name: string; details: (typeof info.files)[number] } | { type: "uploading-file"; name: string; details: LiveFileUploadState }; - const toFileEntry = - (type: T) => - (details: Extract["details"]) => ({ + const toEntry = + >(type: T) => + (details: Extract["details"]) => ({ type, name: details.name, details, }); - const subDirectories = $derived( - sortEntries(structuredClone($state.snapshot(info.subDirectories))), - ); - const files = $derived( - sortEntries([ - ...info.files.map(toFileEntry("file")), - ...getUploadingFiles(info.id).map(toFileEntry("uploading-file")), + const entries = $derived([ + ...(showParentEntry ? ([{ type: "parent" }] as const) : []), + ...sortEntries(info.subDirectories.map(toEntry("directory"))), + ...sortEntries([ + ...info.files.map(toEntry("file")), + ...getUploadingFiles(info.id).map(toEntry("uploading-file")), ]), - ); + ]); -{#if subDirectories.length + files.length > 0 || showParentEntry} -
- {#if showParentEntry} - - - - {/if} - {#each subDirectories as subDirectory} - - {/each} - {#if files.length > 0} - 56 + (index + 1 < files.length ? 4 : 0)} - > - {#snippet item(index)} - {@const file = files[index]!} -
- {#if file.type === "file"} - - {:else} - - {/if} -
- {/snippet} -
- {/if} +{#if entries.length > 0} +
+ 56 + (index + 1 < entries.length ? 4 : 0)} + > + {#snippet item(index)} + {@const entry = entries[index]!} +
+ {#if entry.type === "parent"} + + + + {:else if entry.type === "directory"} + + {:else if entry.type === "file"} + + {:else} + + {/if} +
+ {/snippet} +
{:else}