includio-cms 0.7.2 → 0.13.1

package/dist/admin/components/media/file-upload.svelte

@@ -31,9 +31,10 @@
 		accept?: string;
 		onUpload?: () => void;
 		dropZoneRef?: HTMLElement | null;
+		tagIds?: string[];
 	};
 
-	let { accept, onUpload, dropZoneRef = $bindable(null) }: Props =
+	let { accept, onUpload, dropZoneRef = $bindable(null), tagIds }: Props =
 		$props();
 
 	let inputElement: HTMLInputElement;
@@ -43,6 +44,9 @@
 	async function uploadFile(file: File, index: number) {
 		const form = new FormData();
 		form.append('file', file);
+		if (tagIds && tagIds.length > 0) {
+			form.append('tagIds', JSON.stringify(tagIds));
+		}
 
 		return new Promise<void>((resolve) => {
 			const xhr = new XMLHttpRequest();

package/dist/admin/components/media/file-upload.svelte.d.ts

@@ -2,6 +2,7 @@ type Props = {
     accept?: string;
     onUpload?: () => void;
     dropZoneRef?: HTMLElement | null;
+    tagIds?: string[];
 };
 declare const FileUpload: import("svelte").Component<Props, {}, "dropZoneRef">;
 type FileUpload = ReturnType<typeof FileUpload>;

package/dist/admin/components/media/files-list.svelte

@@ -9,6 +9,15 @@
 	import Music from '@tabler/icons-svelte/icons/music';
 	import Pdf from '@tabler/icons-svelte/icons/pdf';
 	import File from '@tabler/icons-svelte/icons/file';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
+
+	const interfaceLanguage = useInterfaceLanguage();
+	const filesLang: Record<InterfaceLanguage, { noFiles: string; uploadOrFilter: string; tags: string }> = {
+		pl: { noFiles: 'Brak plików', uploadOrFilter: 'Prześlij pliki lub zmień filtry', tags: 'Tagi' },
+		en: { noFiles: 'No files', uploadOrFilter: 'Upload files or change filters', tags: 'Tags' }
+	};
+	const ft = $derived(filesLang[interfaceLanguage.current]);
 
 	type Props = {
 		files: MediaFile[];
@@ -94,8 +103,8 @@
 				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
 			</svg>
 		</div>
-		<p class="text-sm font-medium text-foreground">Brak plików</p>
-		<p class="text-xs text-muted-foreground mt-1">Prześlij pliki lub zmień filtry</p>
+		<p class="text-sm font-medium text-foreground">{ft.noFiles}</p>
+		<p class="text-xs text-muted-foreground mt-1">{ft.uploadOrFilter}</p>
 	</div>
 {:else}
 	{#each sortedFiles as file, i (file.id)}
@@ -146,7 +155,7 @@
 						<span class="text-[11px] font-medium text-text-light">{formatFileSize(file.size)}</span>
 					{/if}
 					{#if file.tags && file.tags.length > 0}
-						<span class="flex items-center gap-0.5 ml-auto" role="list" aria-label="Tagi">
+						<span class="flex items-center gap-0.5 ml-auto" role="list" aria-label={ft.tags}>
 							{#each file.tags as tag (tag.id)}
 								<span
 									class="h-2 w-2 rounded-full"

package/dist/admin/components/media/media-library.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import FileUpload from './file-upload.svelte';
-	import { onMount } from 'svelte';
+	import { onMount, untrack } from 'svelte';
 	import type { MediaFile, MediaTag } from '../../../types/media.js';
 	import { getRemotes } from '../../context/remotes.js';
 	import { toast } from 'svelte-sonner';
@@ -28,6 +28,7 @@
 			selectModeActive: string;
 			selectModeAnnounce: string;
 			selectModeOffAnnounce: string;
+			loadMore: string;
 		}
 	> = {
 		pl: {
@@ -38,7 +39,8 @@
 			selectMode: 'Wybierz',
 			selectModeActive: 'Zaznaczanie',
 			selectModeAnnounce: 'Tryb zaznaczania włączony. Klikaj pliki, aby je zaznaczyć.',
-			selectModeOffAnnounce: 'Tryb zaznaczania wyłączony.'
+			selectModeOffAnnounce: 'Tryb zaznaczania wyłączony.',
+			loadMore: 'Wczytaj więcej'
 		},
 		en: {
 			fileDeletedToast: 'File has been deleted',
@@ -48,7 +50,8 @@
 			selectMode: 'Select',
 			selectModeActive: 'Selecting',
 			selectModeAnnounce: 'Selection mode enabled. Click files to select them.',
-			selectModeOffAnnounce: 'Selection mode disabled.'
+			selectModeOffAnnounce: 'Selection mode disabled.',
+			loadMore: 'Load more'
 		}
 	};
 
@@ -63,6 +66,8 @@
 
 	let { selected = $bindable([]), multiple = false, accept }: Props = $props();
 
+	const PAGE_SIZE = 48;
+
 	let currentFile: MediaFile | null = $state(null);
 	let activeTagFilter = $state<string | null>(null);
 	let searchQuery = $state('');
@@ -70,6 +75,8 @@
 	let dropZoneRef = $state<HTMLElement | null>(null);
 	let selectionMode = $state(false);
 	let selectionAnnouncement = $state('');
+	let page = $state(0);
+	let loadedFiles = $state<MediaFile[]>([]);
 
 	function exitSelectionMode() {
 		selectionMode = false;
@@ -83,21 +90,68 @@
 		selectionAnnouncement = lang[interfaceLanguage.current].selectModeAnnounce;
 	}
 
+	const filterData = $derived({
+		tagIds: activeTagFilter && activeTagFilter !== 'untagged' ? [activeTagFilter] : undefined,
+		untagged: activeTagFilter === 'untagged' ? true : undefined,
+		mimeTypes: accept?.split(','),
+		search: searchQuery || undefined
+	});
+
+	// Reset page on filter/search change — track primitive sources only
+	$effect(() => {
+		void activeTagFilter;
+		void searchQuery;
+		void accept;
+		untrack(() => {
+			page = 0;
+			loadedFiles = [];
+		});
+	});
+
 	const filesQuery = $derived(
 		remotes.getMediaFiles({
 			data: {
-				tagIds: activeTagFilter && activeTagFilter !== 'untagged' ? [activeTagFilter] : undefined,
-				untagged: activeTagFilter === 'untagged' ? true : undefined,
-				mimeTypes: accept?.split(','),
-				search: searchQuery || undefined
+				...filterData,
+				limit: PAGE_SIZE,
+				offset: page * PAGE_SIZE
 			}
 		})
 	);
 
-	const allFilesQuery = $derived(
-		remotes.getMediaFiles({ data: { mimeTypes: accept?.split(',') } })
+	const countQuery = $derived(
+		remotes.countMediaFiles({
+			data: {
+				tagIds: filterData.tagIds,
+				untagged: filterData.untagged,
+				mimeTypes: filterData.mimeTypes,
+				search: filterData.search
+			}
+		})
 	);
 
+	const tagCountsQuery = $derived(remotes.getMediaTagsWithCounts());
+	const totalCountQuery = $derived(remotes.countMediaFiles({ data: { mimeTypes: accept?.split(',') } }));
+	const untaggedCountQuery = $derived(remotes.countMediaFiles({ data: { mimeTypes: accept?.split(','), untagged: true } }));
+
+	// Append new page results — only react to filesQuery changes
+	$effect(() => {
+		const ready = filesQuery.ready;
+		const current = filesQuery.current;
+		if (ready && current) {
+			untrack(() => {
+				if (page === 0) {
+					loadedFiles = current;
+				} else {
+					const existingIds = new Set(loadedFiles.map((f) => f.id));
+					loadedFiles = [...loadedFiles, ...current.filter((f) => !existingIds.has(f.id))];
+				}
+			});
+		}
+	});
+
+	const totalCount = $derived(countQuery.ready ? (countQuery.current as number) : 0);
+	const hasMore = $derived(loadedFiles.length < totalCount);
+
 	let tagsQuery = $derived(remotes.getMediaTags());
 
 	function handleFileSelect(file: MediaFile, event?: MouseEvent) {
@@ -136,12 +190,21 @@
 		selectedFileIds = [...merged];
 	}
 
+	function refreshAll() {
+		page = 0;
+		loadedFiles = [];
+		filesQuery.refresh();
+		countQuery.refresh();
+		tagCountsQuery.refresh();
+		totalCountQuery.refresh();
+		untaggedCountQuery.refresh();
+	}
+
 	async function deleteFileCommand() {
 		if (currentFile) {
 			await remotes.deleteMediaFile(currentFile.id);
 			toast.success(lang[interfaceLanguage.current].fileDeletedToast);
-			filesQuery.refresh();
-			allFilesQuery.refresh();
+			refreshAll();
 			currentFile = null;
 		}
 	}
@@ -153,8 +216,7 @@
 			if (tags) {
 				currentFile = { ...currentFile, tags: tags.filter((t) => tagIds.includes(t.id)) };
 			}
-			await filesQuery.refresh();
-			await allFilesQuery.refresh();
+			refreshAll();
 		}
 	}
 
@@ -163,8 +225,7 @@
 			const result = await remotes.renameMediaFile({ fileId: currentFile.id, newName });
 			if (result.success === true) {
 				currentFile = { ...currentFile, name: result.name, url: result.url };
-				await filesQuery.refresh();
-				await allFilesQuery.refresh();
+				refreshAll();
 			}
 			return result;
 		}
@@ -174,27 +235,25 @@
 	async function handleCreateTag(name: string, color: string) {
 		await remotes.createMediaTag({ name, color });
 		await tagsQuery.refresh();
+		await tagCountsQuery.refresh();
 	}
 
 	async function handleUpdateTag(id: string, name: string, color: string) {
 		await remotes.updateMediaTag({ id, name, color });
 		await tagsQuery.refresh();
-		await filesQuery.refresh();
-		await allFilesQuery.refresh();
+		refreshAll();
 	}
 
 	async function handleDeleteTag(id: string) {
 		await remotes.deleteMediaTag(id);
 		await tagsQuery.refresh();
-		await filesQuery.refresh();
-		await allFilesQuery.refresh();
+		refreshAll();
 	}
 
 	async function handleBulkTag(tagIds: string[]) {
 		const fileIds = selectedFileIds;
 		await remotes.bulkSetMediaFileTags({ fileIds, tagIds });
-		await filesQuery.refresh();
-		await allFilesQuery.refresh();
+		refreshAll();
 	}
 
 	async function handleBulkDelete() {
@@ -202,8 +261,7 @@
 		toast.success(lang[interfaceLanguage.current].bulkDeletedToast);
 		selectedFileIds = [];
 		currentFile = null;
-		await filesQuery.refresh();
-		await allFilesQuery.refresh();
+		refreshAll();
 	}
 
 	onMount(() => {
@@ -218,10 +276,12 @@
 <div class="flex h-full overflow-hidden" bind:this={dropZoneRef}>
 	<!-- Tag sidebar (192px) -->
 	<aside class="w-48 min-w-48 shrink-0 border-r bg-card flex flex-col overflow-hidden" aria-label="Filtry tagów">
-		{#if tagsQuery.ready && allFilesQuery.ready && tagsQuery.current && allFilesQuery.current}
+		{#if tagsQuery.ready && tagsQuery.current}
 			<TagSidebar
 				tags={tagsQuery.current}
-				files={allFilesQuery.current}
+				tagCounts={tagCountsQuery.ready ? tagCountsQuery.current : []}
+				totalCount={totalCountQuery.ready ? totalCountQuery.current : 0}
+				untaggedCount={untaggedCountQuery.ready ? untaggedCountQuery.current : 0}
 				activeFilter={activeTagFilter}
 				onFilterChange={(f) => (activeTagFilter = f)}
 				onCreateTag={handleCreateTag}
@@ -250,9 +310,10 @@
 			</Toggle>
 			<div class="flex-1"></div>
 			<FileUpload
-				onUpload={() => { filesQuery.refresh(); allFilesQuery.refresh(); }}
+				onUpload={() => refreshAll()}
 				{accept}
 				bind:dropZoneRef
+				tagIds={activeTagFilter && activeTagFilter !== 'untagged' ? [activeTagFilter] : undefined}
 			/>
 		</div>
 
@@ -261,14 +322,14 @@
 
 		<!-- File grid -->
 		<div class="flex-1 overflow-y-auto px-5 pt-4 pb-24 scrollbar-thin" role="listbox" aria-multiselectable="true" aria-label="Siatka plików">
-			<div class="grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-3" class:opacity-60={filesQuery.loading} style="transition: opacity 200ms">
-				{#if !filesQuery.ready}
+			<div class="grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-3" class:opacity-60={filesQuery.loading && page === 0} style="transition: opacity 200ms">
+				{#if !filesQuery.ready && page === 0}
 					{#each Array(8) as _}
 						<Skeleton class="block h-[168px] rounded-xl" />
 					{/each}
-				{:else if filesQuery.current}
+				{:else}
 					<FilesList
-						files={filesQuery.current}
+						files={loadedFiles}
 						selected={selectedFileIds.length > 0 ? selectedFileIds : (selected ?? '')}
 						onSelect={handleFileSelect}
 						onRangeSelect={handleRangeSelect}
@@ -276,15 +337,27 @@
 					/>
 				{/if}
 			</div>
+			{#if hasMore}
+				<div class="flex justify-center py-6">
+					<button
+						type="button"
+						class="inline-flex items-center gap-2 rounded-lg border border-border px-5 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted disabled:opacity-50"
+						disabled={filesQuery.loading}
+						onclick={() => page++}
+					>
+						{lang[interfaceLanguage.current].loadMore} ({loadedFiles.length} / {totalCount})
+					</button>
+				</div>
+			{/if}
 		</div>
 	</section>
 
 	<!-- Detail panel (384px) -->
 	<aside class="w-96 min-w-96 shrink-0 border-l bg-card flex flex-col overflow-hidden" aria-label="Szczegóły pliku">
 		{#if selectionMode}
-			{#if filesQuery.ready && filesQuery.current && tagsQuery.ready && tagsQuery.current}
+			{#if tagsQuery.ready && tagsQuery.current}
 				<MultiFileSummary
-					files={filesQuery.current.filter((f) => selectedFileIds.includes(f.id))}
+					files={loadedFiles.filter((f) => selectedFileIds.includes(f.id))}
 					allTags={tagsQuery.current}
 					onBulkTag={handleBulkTag}
 					onBulkDelete={handleBulkDelete}
@@ -299,8 +372,7 @@
 						onDelete={deleteFileCommand}
 						onReplace={(updated) => {
 							currentFile = updated;
-							filesQuery.refresh();
-							allFilesQuery.refresh();
+							refreshAll();
 						}}
 						{onTagUpdate}
 						{onNameUpdate}
@@ -323,15 +395,15 @@
 </div>
 
 <!-- Bulk action bar -->
-{#if selectedFileIds.length > 0 && tagsQuery.ready && tagsQuery.current && allFilesQuery.ready && allFilesQuery.current}
+{#if selectedFileIds.length > 0 && tagsQuery.ready && tagsQuery.current}
 	<BulkActionBar
 		selectedCount={selectedFileIds.length}
-		totalCount={allFilesQuery.current.length}
+		totalCount={totalCount}
 		tags={tagsQuery.current}
 		onBulkTag={handleBulkTag}
 		onBulkDelete={handleBulkDelete}
 		onClear={exitSelectionMode}
-		onSelectAll={() => { selectedFileIds = allFilesQuery.current!.map((f) => f.id); }}
+		onSelectAll={() => { selectedFileIds = loadedFiles.map((f) => f.id); }}
 		onCreateTag={handleCreateTag}
 		onUpdateTagColor={async (id, color) => {
 			const tag = tagsQuery.current?.find((t) => t.id === id);

package/dist/admin/components/media/media-selector.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import FileUpload from './file-upload.svelte';
-	import { onMount } from 'svelte';
+	import { onMount, untrack } from 'svelte';
 	import type { MediaFile, MediaTag } from '../../../types/media.js';
 	import { getRemotes } from '../../context/remotes.js';
 	import Button from '../../../components/ui/button/button.svelte';
@@ -29,6 +29,8 @@
 			cancel: string;
 			confirm: string;
 			selectedCount: string;
+			clickToSelect: string;
+			selectedFile: string;
 		}
 	> = {
 		pl: {
@@ -39,7 +41,9 @@
 			selectionResetLabel: 'Resetuj wybór',
 			cancel: 'Anuluj',
 			confirm: 'Potwierdź',
-			selectedCount: 'Wybrano'
+			selectedCount: 'Wybrano',
+			clickToSelect: '{lang[interfaceLanguage.current].clickToSelect}',
+			selectedFile: 'Wybrany plik:'
 		},
 		en: {
 			fileDeletedToast: 'File has been deleted',
@@ -49,7 +53,9 @@
 			selectionResetLabel: 'Reset selection',
 			cancel: 'Cancel',
 			confirm: 'Confirm',
-			selectedCount: 'Selected'
+			selectedCount: 'Selected',
+			clickToSelect: 'Click a file to select it',
+			selectedFile: 'Selected file:'
 		}
 	};
 
@@ -66,10 +72,14 @@
 
 	let { selected = $bindable([]), multiple = false, accept, onConfirm, onCancel }: Props = $props();
 
+	const PAGE_SIZE = 48;
+
 	let currentFile: MediaFile | null = $state(null);
 	let activeTagFilter = $state<string | null>(null);
 	let searchQuery = $state('');
 	let dropZoneRef = $state<HTMLElement | null>(null);
+	let page = $state(0);
+	let loadedFiles = $state<MediaFile[]>([]);
 
 	// Staged selection - changes are only committed on confirm
 	let stagedSelection = $state<string[] | string>(
@@ -86,17 +96,66 @@
 		onCancel?.();
 	}
 
+	const filterData = $derived({
+		tagIds: activeTagFilter && activeTagFilter !== 'untagged' ? [activeTagFilter] : undefined,
+		untagged: activeTagFilter === 'untagged' ? true : undefined,
+		mimeTypes: accept?.split(','),
+		search: searchQuery || undefined
+	});
+
+	$effect(() => {
+		void activeTagFilter;
+		void searchQuery;
+		void accept;
+		untrack(() => {
+			page = 0;
+			loadedFiles = [];
+		});
+	});
+
 	const filesQuery = $derived(
 		remotes.getMediaFiles({
 			data: {
-				tagIds: activeTagFilter && activeTagFilter !== 'untagged' ? [activeTagFilter] : undefined,
-				untagged: activeTagFilter === 'untagged' ? true : undefined,
-				mimeTypes: accept?.split(','),
-				search: searchQuery || undefined
+				...filterData,
+				limit: PAGE_SIZE,
+				offset: page * PAGE_SIZE
+			}
+		})
+	);
+
+	const countQuery = $derived(
+		remotes.countMediaFiles({
+			data: {
+				tagIds: filterData.tagIds,
+				untagged: filterData.untagged,
+				mimeTypes: filterData.mimeTypes,
+				search: filterData.search
 			}
 		})
 	);
 
+	const tagCountsQuery = $derived(remotes.getMediaTagsWithCounts());
+	const totalCountQuery = $derived(remotes.countMediaFiles({ data: { mimeTypes: accept?.split(',') } }));
+	const untaggedCountQuery = $derived(remotes.countMediaFiles({ data: { mimeTypes: accept?.split(','), untagged: true } }));
+
+	$effect(() => {
+		const ready = filesQuery.ready;
+		const current = filesQuery.current;
+		if (ready && current) {
+			untrack(() => {
+				if (page === 0) {
+					loadedFiles = current;
+				} else {
+					const existingIds = new Set(loadedFiles.map((f) => f.id));
+					loadedFiles = [...loadedFiles, ...current.filter((f) => !existingIds.has(f.id))];
+				}
+			});
+		}
+	});
+
+	const totalFilteredCount = $derived(countQuery.ready ? (countQuery.current as number) : 0);
+	const hasMore = $derived(loadedFiles.length < totalFilteredCount);
+
 	let tagsQuery = $derived(remotes.getMediaTags());
 
 	onMount(() => {
@@ -115,7 +174,9 @@
 			{#if tagsQuery.ready && tagsQuery.current}
 				<TagSidebar
 					tags={tagsQuery.current}
-					files={[]}
+					tagCounts={tagCountsQuery.ready ? tagCountsQuery.current : []}
+					totalCount={totalCountQuery.ready ? totalCountQuery.current : 0}
+					untaggedCount={untaggedCountQuery.ready ? untaggedCountQuery.current : 0}
 					activeFilter={activeTagFilter}
 					onFilterChange={(f) => (activeTagFilter = f)}
 					onCreateTag={async (name, color) => {
@@ -141,22 +202,23 @@
 				<MediaSearch bind:value={searchQuery} />
 				<MediaSort />
 				<FileUpload
-					onUpload={() => filesQuery.refresh()}
+					onUpload={() => { page = 0; loadedFiles = []; filesQuery.refresh(); countQuery.refresh(); tagCountsQuery.refresh(); totalCountQuery.refresh(); untaggedCountQuery.refresh(); }}
 					{accept}
 					bind:dropZoneRef
+					tagIds={activeTagFilter && activeTagFilter !== 'untagged' ? [activeTagFilter] : undefined}
 				/>
 			</div>
 
 			<!-- Grid z plikami -->
 			<div class="flex-1 overflow-y-auto pr-2">
-				<div class="grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-3 p-4" class:opacity-60={filesQuery.loading} style="transition: opacity 200ms">
-					{#if !filesQuery.ready}
+				<div class="grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-3 p-4" class:opacity-60={filesQuery.loading && page === 0} style="transition: opacity 200ms">
+					{#if !filesQuery.ready && page === 0}
 						{#each Array(8) as _}
 							<Skeleton class="block aspect-square rounded-2xl" />
 						{/each}
-					{:else if filesQuery.current}
+					{:else}
 						<FilesList
-							files={filesQuery.current}
+							files={loadedFiles}
 							selected={stagedSelection}
 							onSelect={(file) => {
 								currentFile = file;
@@ -171,6 +233,18 @@
 						/>
 					{/if}
 				</div>
+				{#if hasMore}
+					<div class="flex justify-center py-4">
+						<button
+							type="button"
+							class="inline-flex items-center gap-2 rounded-lg border border-border px-5 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted disabled:opacity-50"
+							disabled={filesQuery.loading}
+							onclick={() => page++}
+						>
+							{loadedFiles.length} / {totalFilteredCount}
+						</button>
+					</div>
+				{/if}
 			</div>
 		</div>
 
@@ -215,15 +289,15 @@
 					{/each}
 
 					{#if stagedSelection.length === 0}
-						<p class="text-sm text-muted-foreground py-8 text-center">Kliknij na plik aby go wybrać</p>
+						<p class="text-sm text-muted-foreground py-8 text-center">{lang[interfaceLanguage.current].clickToSelect}</p>
 					{/if}
 				{:else}
-					<p class="text-sm font-medium text-muted-foreground">Wybrany plik:</p>
+					<p class="text-sm font-medium text-muted-foreground">{lang[interfaceLanguage.current].selectedFile}</p>
 
 					{#if stagedSelection}
 						<FilePreview fileId={stagedSelection} />
 					{:else}
-						<p class="text-sm text-muted-foreground py-8 text-center">Kliknij na plik aby go wybrać</p>
+						<p class="text-sm text-muted-foreground py-8 text-center">{lang[interfaceLanguage.current].clickToSelect}</p>
 					{/if}
 				{/if}
 			</div>

package/dist/admin/components/media/tag-sidebar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
-	import type { MediaFile, MediaTag } from '../../../types/media.js';
+	import type { MediaTag } from '../../../types/media.js';
 	import Input from '../../../components/ui/input/input.svelte';
 	import * as Popover from '../../../components/ui/popover/index.js';
 	import * as AlertDialog from '../../../components/ui/alert-dialog/index.js';
@@ -65,7 +65,9 @@
 
 	type Props = {
 		tags: MediaTag[];
-		files: MediaFile[];
+		tagCounts?: { tag: MediaTag; count: number }[];
+		totalCount?: number;
+		untaggedCount?: number;
 		activeFilter: string | null;
 		onFilterChange: (filter: string | null) => void;
 		onCreateTag: (name: string, color: string) => Promise<void>;
@@ -75,7 +77,9 @@
 
 	let {
 		tags,
-		files,
+		tagCounts = [],
+		totalCount = 0,
+		untaggedCount: untaggedCountProp = 0,
 		activeFilter,
 		onFilterChange,
 		onCreateTag,
@@ -92,10 +96,10 @@
 	let menuOpenTagId = $state<string | null>(null);
 
 	function getTagFileCount(tagId: string): number {
-		return files.filter((f) => f.tags.some((t) => t.id === tagId)).length;
+		return tagCounts.find((tc) => tc.tag.id === tagId)?.count ?? 0;
 	}
 
-	const untaggedCount = $derived(files.filter((f) => f.tags.length === 0).length);
+	const untaggedCount = $derived(untaggedCountProp);
 
 	function getNextColor(): string {
 		const usedColors = tags.map((t) => t.color);
@@ -152,7 +156,7 @@
 						<Tag class="h-4 w-4" />
 					</span>
 					<span class="flex-1 truncate">{lang[interfaceLanguage.current].all}</span>
-					<span class="text-[11px] font-semibold tabular-nums {activeFilter === null ? 'text-primary' : 'text-text-light'}">{files.length}</span>
+					<span class="text-[11px] font-semibold tabular-nums {activeFilter === null ? 'text-primary' : 'text-text-light'}">{totalCount}</span>
 				</button>
 			</li>
 

package/dist/admin/components/media/tag-sidebar.svelte.d.ts

@@ -1,7 +1,12 @@
-import type { MediaFile, MediaTag } from '../../../types/media.js';
+import type { MediaTag } from '../../../types/media.js';
 type Props = {
     tags: MediaTag[];
-    files: MediaFile[];
+    tagCounts?: {
+        tag: MediaTag;
+        count: number;
+    }[];
+    totalCount?: number;
+    untaggedCount?: number;
     activeFilter: string | null;
     onFilterChange: (filter: string | null) => void;
     onCreateTag: (name: string, color: string) => Promise<void>;