includio-cms 0.25.0 → 0.26.0

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

@@ -12,14 +12,24 @@
 	import MediaSort from './media-sort.svelte';
 	import FilesList from './files-list.svelte';
 	import TagSidebar from './tag-sidebar.svelte';
-	import MediaSearch from './media-search.svelte';
-	import BulkActionBar from './bulk-action-bar.svelte';
 	import ListCheck from '@tabler/icons-svelte/icons/list-check';
+	import TagIcon from '@tabler/icons-svelte/icons/tag';
 	import Toggle from '../../../components/ui/toggle/toggle.svelte';
+	import { Badge } from '../../../components/ui/badge/index.js';
+	import * as Popover from '../../../components/ui/popover/index.js';
+	import * as Sheet from '../../../components/ui/sheet/index.js';
+	import Button from '../../../components/ui/button/button.svelte';
+	import PageHeader from '../layout/page-header.svelte';
+	import TableToolbar from '../../client/collection/table-toolbar.svelte';
+	import TablePagination from '../../client/collection/table-pagination.svelte';
+	import BulkActionsBar from '../../client/collection/bulk-actions-bar.svelte';
+	import StateDisplay from '../../client/collection/state-display.svelte';
+	import { IsMobile } from '../../../hooks/is-mobile.svelte.js';
 
 	const lang: Record<
 		InterfaceLanguage,
 		{
+			title: string;
 			fileDeletedToast: string;
 			currentFilePlaceholder: string;
 			currentFileDesc: string;
@@ -28,10 +38,29 @@
 			selectModeActive: string;
 			selectModeAnnounce: string;
 			selectModeOffAnnounce: string;
-			loadMore: string;
+			search: string;
+			searchPlaceholder: string;
+			tagsFilterLabel: string;
+			typeFilterLabel: string;
+			tagSidebarLabel: string;
+			filesGridLabel: string;
+			filesListLabel: string;
+			filesLabel: string;
+			detailsLabel: string;
+			emptyTitle: string;
+			emptyDescription: string;
+			noResults: string;
+			bulkTag: string;
+			bulkSelectAll: string;
+			typeImage: string;
+			typeVideo: string;
+			typeAudio: string;
+			typePdf: string;
+			typeOther: string;
 		}
 	> = {
 		pl: {
+			title: 'Biblioteka mediów',
 			fileDeletedToast: 'Plik został usunięty',
 			currentFilePlaceholder: 'Podgląd pliku',
 			currentFileDesc: 'Wybierz plik z listy, aby zobaczyć szczegóły i edytować metadane.',
@@ -40,9 +69,28 @@
 			selectModeActive: 'Zaznaczanie',
 			selectModeAnnounce: 'Tryb zaznaczania włączony. Klikaj pliki, aby je zaznaczyć.',
 			selectModeOffAnnounce: 'Tryb zaznaczania wyłączony.',
-			loadMore: 'Wczytaj więcej'
+			search: 'Szukaj',
+			searchPlaceholder: 'Szukaj po nazwie…',
+			tagsFilterLabel: 'Tag',
+			typeFilterLabel: 'Typ',
+			tagSidebarLabel: 'Filtry tagów',
+			filesGridLabel: 'Siatka plików',
+			filesListLabel: 'Lista plików',
+			filesLabel: 'Pliki',
+			detailsLabel: 'Szczegóły pliku',
+			emptyTitle: 'Brak plików',
+			emptyDescription: 'Prześlij pierwszy plik, aby zobaczyć go w bibliotece.',
+			noResults: 'Brak wyników.',
+			bulkTag: 'Otaguj',
+			bulkSelectAll: 'Zaznacz stronę',
+			typeImage: 'Obraz',
+			typeVideo: 'Wideo',
+			typeAudio: 'Audio',
+			typePdf: 'PDF',
+			typeOther: 'Inne'
 		},
 		en: {
+			title: 'Media library',
 			fileDeletedToast: 'File has been deleted',
 			currentFilePlaceholder: 'File preview',
 			currentFileDesc: 'Select a file from the list to view details and edit metadata.',
@@ -51,7 +99,25 @@
 			selectModeActive: 'Selecting',
 			selectModeAnnounce: 'Selection mode enabled. Click files to select them.',
 			selectModeOffAnnounce: 'Selection mode disabled.',
-			loadMore: 'Load more'
+			search: 'Search',
+			searchPlaceholder: 'Search by name…',
+			tagsFilterLabel: 'Tag',
+			typeFilterLabel: 'Type',
+			tagSidebarLabel: 'Tag filters',
+			filesGridLabel: 'File grid',
+			filesListLabel: 'File list',
+			filesLabel: 'Files',
+			detailsLabel: 'File details',
+			emptyTitle: 'No files',
+			emptyDescription: 'Upload your first file to see it here.',
+			noResults: 'No results.',
+			bulkTag: 'Tag',
+			bulkSelectAll: 'Select page',
+			typeImage: 'Image',
+			typeVideo: 'Video',
+			typeAudio: 'Audio',
+			typePdf: 'PDF',
+			typeOther: 'Other'
 		}
 	};
 
@@ -62,32 +128,67 @@
 		selected?: string[] | string;
 		multiple?: boolean;
 		accept?: string;
+		showHeader?: boolean;
+		data?: MediaFile[];
+		state?: 'loading' | 'error' | 'ok';
 	};
 
-	let { selected = $bindable([]), multiple = false, accept }: Props = $props();
+	let {
+		selected = $bindable([]),
+		multiple = false,
+		accept,
+		showHeader = false,
+		data: injectedData,
+		state: injectedState
+	}: Props = $props();
+
+	const useInjectedData = $derived(injectedData !== undefined);
 
 	const PAGE_SIZE = 48;
+	const VIEW_MODE_STORAGE_KEY = 'includio-media-view';
+
+	function loadViewMode(): 'grid' | 'list' {
+		if (typeof window === 'undefined') return 'grid';
+		try {
+			const stored = localStorage.getItem(VIEW_MODE_STORAGE_KEY);
+			return stored === 'list' ? 'list' : 'grid';
+		} catch {
+			return 'grid';
+		}
+	}
 
 	let currentFile: MediaFile | null = $state(null);
 	let activeTagFilter = $state<string | null>(null);
+	let activeTypeFilter = $state<string | null>(null);
 	let searchQuery = $state('');
 	let selectedFileIds = $state<string[]>([]);
 	let dropZoneRef = $state<HTMLElement | null>(null);
 	let selectionMode = $state(false);
 	let selectionAnnouncement = $state('');
-	let page = $state(0);
-	let loadedFiles = $state<MediaFile[]>([]);
+	let pagination = $state({ pageIndex: 0, pageSize: PAGE_SIZE });
+	let viewMode = $state<'grid' | 'list'>(loadViewMode());
+
+	$effect(() => {
+		if (typeof window === 'undefined') return;
+		try {
+			localStorage.setItem(VIEW_MODE_STORAGE_KEY, viewMode);
+		} catch {
+			// ignore
+		}
+	});
+
+	const t = $derived(lang[interfaceLanguage.current]);
 
 	function exitSelectionMode() {
 		selectionMode = false;
 		selectedFileIds = [];
 		currentFile = null;
-		selectionAnnouncement = lang[interfaceLanguage.current].selectModeOffAnnounce;
+		selectionAnnouncement = t.selectModeOffAnnounce;
 	}
 
 	function enterSelectionMode() {
 		selectionMode = true;
-		selectionAnnouncement = lang[interfaceLanguage.current].selectModeAnnounce;
+		selectionAnnouncement = t.selectModeAnnounce;
 	}
 
 	const filterData = $derived({
@@ -97,81 +198,145 @@
 		search: searchQuery || undefined
 	});
 
-	// Reset page on filter/search change — track primitive sources only
 	$effect(() => {
 		void activeTagFilter;
+		void activeTypeFilter;
 		void searchQuery;
 		void accept;
 		untrack(() => {
-			page = 0;
-			loadedFiles = [];
+			pagination = { ...pagination, pageIndex: 0 };
 		});
 	});
 
 	const filesQuery = $derived(
-		remotes.getMediaFiles({
-			data: {
-				...filterData,
-				limit: PAGE_SIZE,
-				offset: page * PAGE_SIZE
-			}
-		})
+		useInjectedData
+			? null
+			: remotes.getMediaFiles({
+					data: {
+						...filterData,
+						limit: pagination.pageSize,
+						offset: pagination.pageIndex * pagination.pageSize
+					}
+				})
 	);
 
 	const countQuery = $derived(
-		remotes.countMediaFiles({
-			data: {
-				tagIds: filterData.tagIds,
-				untagged: filterData.untagged,
-				mimeTypes: filterData.mimeTypes,
-				search: filterData.search
-			}
-		})
+		useInjectedData
+			? null
+			: remotes.countMediaFiles({
+					data: {
+						tagIds: filterData.tagIds,
+						untagged: filterData.untagged,
+						mimeTypes: filterData.mimeTypes,
+						search: filterData.search
+					}
+				})
+	);
+
+	const tagCountsQuery = $derived(useInjectedData ? null : remotes.getMediaTagsWithCounts());
+	const totalCountQuery = $derived(
+		useInjectedData
+			? null
+			: remotes.countMediaFiles({ data: { mimeTypes: accept?.split(',') } })
+	);
+	const untaggedCountQuery = $derived(
+		useInjectedData
+			? null
+			: remotes.countMediaFiles({ data: { mimeTypes: accept?.split(','), untagged: true } })
 	);
 
-	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 } }));
+	const fetchedFiles = $derived(
+		filesQuery?.ready && filesQuery.current ? (filesQuery.current as MediaFile[]) : []
+	);
 
-	// 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 allInjected = $derived<MediaFile[]>(injectedData ?? []);
+	const filteredInjected = $derived.by(() => {
+		if (!useInjectedData) return [];
+		const q = searchQuery.trim().toLowerCase();
+		let list = allInjected;
+		if (q) list = list.filter((f) => f.name.toLowerCase().includes(q));
+		if (activeTypeFilter) list = list.filter((f) => f.type === activeTypeFilter);
+		if (activeTagFilter && activeTagFilter !== 'untagged') {
+			list = list.filter((f) => f.tags.some((tag) => tag.id === activeTagFilter));
+		} else if (activeTagFilter === 'untagged') {
+			list = list.filter((f) => f.tags.length === 0);
+		}
+		return list;
+	});
+
+	const visibleFiles = $derived.by<MediaFile[]>(() => {
+		if (useInjectedData) {
+			const start = pagination.pageIndex * pagination.pageSize;
+			return filteredInjected.slice(start, start + pagination.pageSize);
 		}
+		if (activeTypeFilter) return fetchedFiles.filter((f) => f.type === activeTypeFilter);
+		return fetchedFiles;
 	});
 
-	const totalCount = $derived(countQuery.ready ? (countQuery.current as number) : 0);
-	const hasMore = $derived(loadedFiles.length < totalCount);
+	const totalCount = $derived(
+		useInjectedData
+			? filteredInjected.length
+			: countQuery?.ready
+				? (countQuery.current as number)
+				: 0
+	);
+
+	const pageCount = $derived(Math.max(1, Math.ceil(totalCount / pagination.pageSize)));
+
+	const isLoading = $derived(
+		useInjectedData
+			? injectedState === 'loading'
+			: !(filesQuery?.ready ?? false) && pagination.pageIndex === 0
+	);
+	const isError = $derived(
+		useInjectedData ? injectedState === 'error' : Boolean(filesQuery?.error)
+	);
+	const isPopulated = $derived(!isError && !isLoading && visibleFiles.length > 0);
+
+	const tagsQueryRaw = $derived(useInjectedData ? null : remotes.getMediaTags());
+	const allTags = $derived<MediaTag[]>(
+		useInjectedData
+			? Array.from(
+					new Map(
+						allInjected.flatMap((f) => f.tags).map((tag) => [tag.id, tag] as const)
+					).values()
+				)
+			: ((tagsQueryRaw?.current as MediaTag[] | undefined) ?? [])
+	);
 
-	let tagsQuery = $derived(remotes.getMediaTags());
+	const tagFilterOptions = $derived([
+		{ value: 'untagged', label: t.tagsFilterLabel + ': —' },
+		...allTags.map((tag) => ({ value: tag.id, label: tag.name }))
+	]);
+
+	const typeFilterOptions = $derived([
+		{ value: 'image', label: t.typeImage },
+		{ value: 'video', label: t.typeVideo },
+		{ value: 'audio', label: t.typeAudio },
+		{ value: 'pdf', label: t.typePdf },
+		{ value: 'other', label: t.typeOther }
+	]);
+
+	const dataFilters = $derived([
+		{ slug: 'tag', label: t.tagsFilterLabel, options: tagFilterOptions },
+		{ slug: 'type', label: t.typeFilterLabel, options: typeFilterOptions }
+	]);
+	const activeDataFilters = $derived({ tag: activeTagFilter, type: activeTypeFilter });
 
 	function handleFileSelect(file: MediaFile, event?: MouseEvent) {
 		const isModifier = event && (event.ctrlKey || event.metaKey);
-
 		if (isModifier) {
-			// Cmd/Ctrl+click: toggle selection, auto-enter selection mode
 			if (!selectionMode) enterSelectionMode();
 			selectedFileIds = selectedFileIds.includes(file.id)
 				? selectedFileIds.filter((id) => id !== file.id)
 				: [...selectedFileIds, file.id];
 			currentFile = file;
 		} else if (selectionMode) {
-			// Normal click in selection mode: toggle
 			selectedFileIds = selectedFileIds.includes(file.id)
 				? selectedFileIds.filter((id) => id !== file.id)
 				: [...selectedFileIds, file.id];
 			currentFile = file;
 		} else {
-			// Normal click without selection mode: open details
 			selectedFileIds = [];
 			currentFile = file;
 			if (multiple && Array.isArray(selected)) {
@@ -185,43 +350,41 @@
 	}
 
 	function handleRangeSelect(fileIds: string[]) {
-		// Merge range into selection (union)
 		const merged = new Set([...selectedFileIds, ...fileIds]);
 		selectedFileIds = [...merged];
 	}
 
 	function refreshAll() {
-		page = 0;
-		loadedFiles = [];
-		filesQuery.refresh();
-		countQuery.refresh();
-		tagCountsQuery.refresh();
-		totalCountQuery.refresh();
-		untaggedCountQuery.refresh();
+		pagination = { ...pagination, pageIndex: 0 };
+		filesQuery?.refresh();
+		countQuery?.refresh();
+		tagCountsQuery?.refresh();
+		totalCountQuery?.refresh();
+		untaggedCountQuery?.refresh();
 	}
 
 	async function deleteFileCommand() {
-		if (currentFile) {
+		if (currentFile && !useInjectedData) {
 			await remotes.deleteMediaFile(currentFile.id);
-			toast.success(lang[interfaceLanguage.current].fileDeletedToast);
+			toast.success(t.fileDeletedToast);
 			refreshAll();
 			currentFile = null;
 		}
 	}
 
 	async function onTagUpdate(tagIds: string[]) {
-		if (currentFile) {
+		if (currentFile && !useInjectedData) {
 			await remotes.setMediaFileTags({ fileId: currentFile.id, tagIds });
-			const tags = tagsQuery.current as MediaTag[] | undefined;
+			const tags = tagsQueryRaw?.current as MediaTag[] | undefined;
 			if (tags) {
-				currentFile = { ...currentFile, tags: tags.filter((t) => tagIds.includes(t.id)) };
+				currentFile = { ...currentFile, tags: tags.filter((tag) => tagIds.includes(tag.id)) };
 			}
 			refreshAll();
 		}
 	}
 
 	async function onNameUpdate(newName: string) {
-		if (currentFile) {
+		if (currentFile && !useInjectedData) {
 			const result = await remotes.renameMediaFile({ fileId: currentFile.id, newName });
 			if (result.success === true) {
 				currentFile = { ...currentFile, name: result.name, url: result.url };
@@ -233,37 +396,58 @@
 	}
 
 	async function handleCreateTag(name: string, color: string) {
+		if (useInjectedData) return;
 		await remotes.createMediaTag({ name, color });
-		await tagsQuery.refresh();
-		await tagCountsQuery.refresh();
+		await tagsQueryRaw?.refresh();
+		await tagCountsQuery?.refresh();
 	}
 
 	async function handleUpdateTag(id: string, name: string, color: string) {
+		if (useInjectedData) return;
 		await remotes.updateMediaTag({ id, name, color });
-		await tagsQuery.refresh();
+		await tagsQueryRaw?.refresh();
 		refreshAll();
 	}
 
 	async function handleDeleteTag(id: string) {
+		if (useInjectedData) return;
 		await remotes.deleteMediaTag(id);
-		await tagsQuery.refresh();
+		await tagsQueryRaw?.refresh();
 		refreshAll();
 	}
 
 	async function handleBulkTag(tagIds: string[]) {
+		if (useInjectedData) return;
 		const fileIds = selectedFileIds;
 		await remotes.bulkSetMediaFileTags({ fileIds, tagIds });
 		refreshAll();
 	}
 
 	async function handleBulkDelete() {
+		if (useInjectedData) return;
 		await remotes.bulkDeleteMediaFiles({ ids: selectedFileIds });
-		toast.success(lang[interfaceLanguage.current].bulkDeletedToast);
+		toast.success(t.bulkDeletedToast);
 		selectedFileIds = [];
 		currentFile = null;
 		refreshAll();
 	}
 
+	let bulkTagOpen = $state(false);
+
+	const isMobile = new IsMobile();
+	let tagSheetOpen = $state(false);
+	let detailsSheetOpen = $state(false);
+
+	// Auto-open the details Sheet on mobile when a file becomes selected (or
+	// bulk selection starts). Desktop keeps the inline aside, so this is a no-op
+	// when isMobile.current is false.
+	$effect(() => {
+		if (!isMobile.current) return;
+		if (currentFile || selectionMode) {
+			detailsSheetOpen = true;
+		}
+	});
+
 	onMount(() => {
 		if (Array.isArray(selected)) {
 			selected = selected.filter((id) => !id.startsWith('/uploads'));
@@ -273,141 +457,336 @@
 	});
 </script>
 
-<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 && tagsQuery.current}
-			<TagSidebar
-				tags={tagsQuery.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}
-				onUpdateTag={handleUpdateTag}
-				onDeleteTag={handleDeleteTag}
-			/>
-		{/if}
-	</aside>
-
-	<!-- Main content (flex-1) -->
-	<section class="flex flex-1 flex-col overflow-hidden" aria-label="Pliki">
-		<!-- Toolbar -->
-		<div class="flex items-center gap-2.5 border-b bg-card px-5 py-3 shrink-0">
-			<MediaSearch bind:value={searchQuery} />
-			<MediaSort />
-			<Toggle
-				variant="outline"
-				size="sm"
-				pressed={selectionMode}
-				onPressedChange={(pressed) => pressed ? enterSelectionMode() : exitSelectionMode()}
-				class="gap-1.5 px-2.5 text-xs font-semibold whitespace-nowrap shrink-0 {selectionMode ? 'bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground border-primary' : ''}"
-				aria-label={selectionMode ? lang[interfaceLanguage.current].selectModeActive : lang[interfaceLanguage.current].selectMode}
-			>
-				<ListCheck class="h-4 w-4" />
-				{selectionMode ? lang[interfaceLanguage.current].selectModeActive : lang[interfaceLanguage.current].selectMode}
-			</Toggle>
-			<div class="flex-1"></div>
-			<FileUpload
-				onUpload={() => refreshAll()}
-				{accept}
-				bind:dropZoneRef
-				tagIds={activeTagFilter && activeTagFilter !== 'untagged' ? [activeTagFilter] : undefined}
-			/>
-		</div>
+<div class="flex h-full flex-col overflow-hidden">
+	{#if showHeader}
+		<PageHeader title={t.title} count={!isLoading && !isError ? totalCount : undefined}>
+			{#snippet primaryActions()}
+				<FileUpload
+					onUpload={() => refreshAll()}
+					{accept}
+					bind:dropZoneRef
+					tagIds={activeTagFilter && activeTagFilter !== 'untagged' ? [activeTagFilter] : undefined}
+				/>
+			{/snippet}
+		</PageHeader>
+	{/if}
+
+	<div class="flex flex-1 overflow-hidden" bind:this={dropZoneRef}>
+		<aside
+			class="bg-card hidden w-48 min-w-48 shrink-0 flex-col overflow-hidden border-r md:flex"
+			aria-label={t.tagSidebarLabel}
+		>
+			{#if useInjectedData}
+				<div class="text-muted-foreground p-3 text-xs">
+					{allTags.length === 0 ? '—' : `${allTags.length} tag(s)`}
+				</div>
+			{:else if tagsQueryRaw?.ready && tagsQueryRaw.current}
+				<TagSidebar
+					tags={tagsQueryRaw.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}
+					onUpdateTag={handleUpdateTag}
+					onDeleteTag={handleDeleteTag}
+				/>
+			{/if}
+		</aside>
+
+		<section class="flex flex-1 flex-col overflow-hidden" aria-label={t.filesLabel}>
+			<div class="bg-card shrink-0 border-b px-5 py-3">
+				<TableToolbar
+					{searchQuery}
+					searchPlaceholder={t.searchPlaceholder}
+					searchLabel={t.search}
+					onSearchChange={(q) => (searchQuery = q)}
+					hideStatusFilter
+					{viewMode}
+					onViewModeChange={(m) => (viewMode = m)}
+					{dataFilters}
+					{activeDataFilters}
+					onDataFilterChange={(slug, value) => {
+						if (slug === 'tag') activeTagFilter = value;
+						else if (slug === 'type') activeTypeFilter = value;
+					}}
+				>
+					{#snippet actions()}
+						<Sheet.Root bind:open={tagSheetOpen}>
+							<Sheet.Trigger>
+								{#snippet child({ props })}
+									<Button
+										{...props}
+										variant="outline"
+										size="sm"
+										class="gap-1.5 md:hidden"
+										aria-label={t.tagSidebarLabel}
+									>
+										<TagIcon class="size-3.5" />
+										{t.tagsFilterLabel}
+									</Button>
+								{/snippet}
+							</Sheet.Trigger>
+							<Sheet.Content side="left" class="w-72 max-w-[85vw] gap-0 p-0">
+								<Sheet.Header class="border-b p-3">
+									<Sheet.Title>{t.tagSidebarLabel}</Sheet.Title>
+								</Sheet.Header>
+								<div class="flex flex-1 flex-col overflow-hidden">
+									{#if useInjectedData}
+										<div class="text-muted-foreground p-3 text-xs">
+											{allTags.length === 0 ? '—' : `${allTags.length} tag(s)`}
+										</div>
+									{:else if tagsQueryRaw?.ready && tagsQueryRaw.current}
+										<TagSidebar
+											tags={tagsQueryRaw.current}
+											tagCounts={tagCountsQuery?.ready ? tagCountsQuery.current : []}
+											totalCount={totalCountQuery?.ready ? totalCountQuery.current : 0}
+											untaggedCount={untaggedCountQuery?.ready ? untaggedCountQuery.current : 0}
+											activeFilter={activeTagFilter}
+											onFilterChange={(f) => {
+												activeTagFilter = f;
+												tagSheetOpen = false;
+											}}
+											onCreateTag={handleCreateTag}
+											onUpdateTag={handleUpdateTag}
+											onDeleteTag={handleDeleteTag}
+										/>
+									{/if}
+								</div>
+							</Sheet.Content>
+						</Sheet.Root>
+						<MediaSort />
+						<Toggle
+							variant="outline"
+							size="sm"
+							pressed={selectionMode}
+							onPressedChange={(pressed) =>
+								pressed ? enterSelectionMode() : exitSelectionMode()}
+							class="gap-1.5 px-2.5 text-xs font-semibold whitespace-nowrap"
+							aria-label={selectionMode ? t.selectModeActive : t.selectMode}
+						>
+							<ListCheck class="h-4 w-4" />
+							{selectionMode ? t.selectModeActive : t.selectMode}
+						</Toggle>
+						{#if !showHeader}
+							<FileUpload
+								onUpload={() => refreshAll()}
+								{accept}
+								bind:dropZoneRef
+								tagIds={activeTagFilter && activeTagFilter !== 'untagged'
+									? [activeTagFilter]
+									: undefined}
+							/>
+						{/if}
+					{/snippet}
+				</TableToolbar>
+			</div>
 
-		<!-- Selection mode announcement (sr-only) -->
-		<div class="sr-only" aria-live="polite" role="status">{selectionAnnouncement}</div>
+			<div class="sr-only" aria-live="polite" role="status">{selectionAnnouncement}</div>
 
-		<!-- 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 && page === 0} style="transition: opacity 200ms">
-				{#if !filesQuery.ready && page === 0}
-					{#each Array(8) as _}
-						<Skeleton class="block h-[168px] rounded-xl" />
-					{/each}
+			<div
+				class="scrollbar-thin flex-1 overflow-y-auto px-5 pt-4 pb-24"
+				role={isPopulated ? 'listbox' : undefined}
+				aria-multiselectable={isPopulated ? 'true' : undefined}
+				aria-label={isPopulated ? (viewMode === 'list' ? t.filesListLabel : t.filesGridLabel) : undefined}
+			>
+				{#if isError}
+					<StateDisplay kind="error" />
+				{:else if isLoading}
+					{#if viewMode === 'list'}
+						<div class="flex flex-col gap-1.5">
+							{#each Array(8) as _}
+								<Skeleton class="block h-[56px] rounded-lg" />
+							{/each}
+						</div>
+					{:else}
+						<div class="grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-3">
+							{#each Array(8) as _}
+								<Skeleton class="block h-[168px] rounded-xl" />
+							{/each}
+						</div>
+					{/if}
+				{:else if visibleFiles.length === 0}
+					<StateDisplay kind="empty" title={t.emptyTitle} description={t.emptyDescription} />
 				{:else}
-					<FilesList
-						files={loadedFiles}
-						selected={selectedFileIds.length > 0 ? selectedFileIds : (selected ?? '')}
-						onSelect={handleFileSelect}
-						onRangeSelect={handleRangeSelect}
-						{selectionMode}
-					/>
+					<div
+						class={viewMode === 'list'
+							? 'flex flex-col gap-1.5'
+							: 'grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-3'}
+						role="presentation"
+					>
+						<FilesList
+							files={visibleFiles}
+							selected={selectedFileIds.length > 0 ? selectedFileIds : (selected ?? '')}
+							onSelect={handleFileSelect}
+							onRangeSelect={handleRangeSelect}
+							{selectionMode}
+							{viewMode}
+						/>
+					</div>
+
+					{#if totalCount > pagination.pageSize}
+						<TablePagination
+							pageIndex={pagination.pageIndex}
+							pageSize={pagination.pageSize}
+							{pageCount}
+							totalItems={totalCount}
+							onPageChange={(p) => (pagination = { ...pagination, pageIndex: p })}
+							onPageSizeChange={(s) => (pagination = { pageIndex: 0, pageSize: s })}
+						/>
+					{/if}
+
+					{#if visibleFiles.some((f) => f.tags.length > 0)}
+						<div class="mt-6 flex flex-wrap items-center gap-1.5">
+							{#each Array.from(new Set(visibleFiles.flatMap((f) => f.tags.map((tag) => tag.id)))) as tagId (tagId)}
+								{@const tag = allTags.find((tagItem) => tagItem.id === tagId)}
+								{#if tag}
+									<Badge variant="secondary">{tag.name}</Badge>
+								{/if}
+							{/each}
+						</div>
+					{/if}
 				{/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 tagsQuery.ready && tagsQuery.current}
-				<MultiFileSummary
-					files={loadedFiles.filter((f) => selectedFileIds.includes(f.id))}
-					allTags={tagsQuery.current}
-					onBulkTag={handleBulkTag}
-					onBulkDelete={handleBulkDelete}
-				/>
-			{/if}
-		{:else if currentFile}
-			{#key currentFile}
-				{#if tagsQuery.ready && tagsQuery.current}
-					<FileDetails
-						file={currentFile}
-						allTags={tagsQuery.current}
-						onDelete={deleteFileCommand}
-						onReplace={(updated) => {
-							currentFile = updated;
-							refreshAll();
-						}}
-						{onTagUpdate}
-						{onNameUpdate}
+		</section>
+
+		<aside
+			class="bg-card hidden w-96 min-w-96 shrink-0 flex-col overflow-hidden border-l md:flex"
+			aria-label={t.detailsLabel}
+		>
+			{#if selectionMode}
+				{#if !useInjectedData && tagsQueryRaw?.ready && tagsQueryRaw.current}
+					<MultiFileSummary
+						files={visibleFiles.filter((f) => selectedFileIds.includes(f.id))}
+						allTags={tagsQueryRaw.current}
+						onBulkTag={handleBulkTag}
+						onBulkDelete={handleBulkDelete}
 					/>
 				{/if}
-			{/key}
-		{:else}
-			<!-- Empty state -->
-			<div class="flex flex-1 flex-col items-center justify-center px-5 py-10 text-center">
-				<div class="mb-3.5 flex h-14 w-14 items-center justify-center rounded-xl bg-muted">
-					<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-text-light" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-						<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>
+			{:else if currentFile}
+				{#key currentFile}
+					{#if !useInjectedData && tagsQueryRaw?.ready && tagsQueryRaw.current}
+						<FileDetails
+							file={currentFile}
+							allTags={tagsQueryRaw.current}
+							onDelete={deleteFileCommand}
+							onReplace={(updated) => {
+								currentFile = updated;
+								refreshAll();
+							}}
+							{onTagUpdate}
+							{onNameUpdate}
+						/>
+					{/if}
+				{/key}
+			{:else}
+				<div class="flex flex-1 flex-col items-center justify-center px-5 py-10 text-center">
+					<div class="bg-muted mb-3.5 flex h-14 w-14 items-center justify-center rounded-xl">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="text-text-light h-6 w-6"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<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-foreground text-sm font-bold">{t.currentFilePlaceholder}</p>
+					<p class="text-muted-foreground mt-1 text-[13px] leading-relaxed">{t.currentFileDesc}</p>
 				</div>
-				<p class="text-sm font-bold text-foreground">{lang[interfaceLanguage.current].currentFilePlaceholder}</p>
-				<p class="mt-1 text-[13px] leading-relaxed text-muted-foreground">{lang[interfaceLanguage.current].currentFileDesc}</p>
-			</div>
-		{/if}
-	</aside>
+			{/if}
+		</aside>
+	</div>
 </div>
 
-<!-- Bulk action bar -->
-{#if selectedFileIds.length > 0 && tagsQuery.ready && tagsQuery.current}
-	<BulkActionBar
-		selectedCount={selectedFileIds.length}
-		totalCount={totalCount}
-		tags={tagsQuery.current}
-		onBulkTag={handleBulkTag}
-		onBulkDelete={handleBulkDelete}
-		onClear={exitSelectionMode}
-		onSelectAll={() => { selectedFileIds = loadedFiles.map((f) => f.id); }}
-		onCreateTag={handleCreateTag}
-		onUpdateTagColor={async (id, color) => {
-			const tag = tagsQuery.current?.find((t) => t.id === id);
-			if (tag) await handleUpdateTag(id, tag.name, color);
-		}}
-	/>
-{/if}
+<Sheet.Root bind:open={detailsSheetOpen}>
+	<Sheet.Content side="right" class="w-full max-w-md gap-0 p-0 md:hidden">
+		<Sheet.Header class="border-b p-3">
+			<Sheet.Title>{t.detailsLabel}</Sheet.Title>
+		</Sheet.Header>
+		<div class="flex flex-1 flex-col overflow-y-auto">
+			{#if selectionMode}
+				{#if !useInjectedData && tagsQueryRaw?.ready && tagsQueryRaw.current}
+					<MultiFileSummary
+						files={visibleFiles.filter((f) => selectedFileIds.includes(f.id))}
+						allTags={tagsQueryRaw.current}
+						onBulkTag={handleBulkTag}
+						onBulkDelete={handleBulkDelete}
+					/>
+				{/if}
+			{:else if currentFile}
+				{#key currentFile}
+					{#if !useInjectedData && tagsQueryRaw?.ready && tagsQueryRaw.current}
+						<FileDetails
+							file={currentFile}
+							allTags={tagsQueryRaw.current}
+							onDelete={() => {
+								deleteFileCommand();
+								detailsSheetOpen = false;
+							}}
+							onReplace={(updated) => {
+								currentFile = updated;
+								refreshAll();
+							}}
+							{onTagUpdate}
+							{onNameUpdate}
+						/>
+					{/if}
+				{/key}
+			{/if}
+		</div>
+	</Sheet.Content>
+</Sheet.Root>
+
+<BulkActionsBar
+	selectedCount={selectedFileIds.length}
+	onDelete={handleBulkDelete}
+	onClear={exitSelectionMode}
+>
+	{#snippet actions()}
+		<Button
+			variant="ghost"
+			size="sm"
+			class="border border-white/20 text-white hover:bg-white/10 hover:text-white"
+			onclick={() => (selectedFileIds = visibleFiles.map((f) => f.id))}
+		>
+			{t.bulkSelectAll}
+		</Button>
+		<Popover.Root bind:open={bulkTagOpen}>
+			<Popover.Trigger>
+				{#snippet child({ props })}
+					<Button
+						{...props}
+						variant="ghost"
+						size="sm"
+						class="border border-white/20 text-white hover:bg-white/10 hover:text-white"
+					>
+						{t.bulkTag}
+					</Button>
+				{/snippet}
+			</Popover.Trigger>
+			<Popover.Content class="w-56 p-1" align="center" side="top">
+				{#each allTags as tag (tag.id)}
+					<button
+						type="button"
+						class="hover:bg-accent flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors"
+						onclick={() => {
+							handleBulkTag([tag.id]);
+							bulkTagOpen = false;
+						}}
+					>
+						<span class="size-2 rounded-full" style="background:{tag.color}"></span>
+						{tag.name}
+					</button>
+				{/each}
+			</Popover.Content>
+		</Popover.Root>
+	{/snippet}
+</BulkActionsBar>