includio-cms 0.1.3 → 0.5.0

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

@@ -3,7 +3,6 @@
 	import { onMount } from 'svelte';
 	import type { MediaFile, MediaTag } from '../../../types/media.js';
 	import { getRemotes } from '../../context/remotes.js';
-	import Button from '../../../components/ui/button/button.svelte';
 	import { toast } from 'svelte-sonner';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
@@ -15,24 +14,41 @@
 	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 Toggle from '../../../components/ui/toggle/toggle.svelte';
 
 	const lang: Record<
 		InterfaceLanguage,
 		{
 			fileDeletedToast: string;
 			currentFilePlaceholder: string;
+			currentFileDesc: string;
 			bulkDeletedToast: string;
+			selectMode: string;
+			selectModeActive: string;
+			selectModeAnnounce: string;
+			selectModeOffAnnounce: string;
 		}
 	> = {
 		pl: {
 			fileDeletedToast: 'Plik został usunięty',
-			currentFilePlaceholder: 'Wybierz plik, aby zobaczyć szczegóły',
-			bulkDeletedToast: 'Pliki zostały usunięte'
+			currentFilePlaceholder: 'Podgląd pliku',
+			currentFileDesc: 'Wybierz plik z listy, aby zobaczyć szczegóły i edytować metadane.',
+			bulkDeletedToast: 'Pliki zostały usunięte',
+			selectMode: 'Wybierz',
+			selectModeActive: 'Zaznaczanie',
+			selectModeAnnounce: 'Tryb zaznaczania włączony. Klikaj pliki, aby je zaznaczyć.',
+			selectModeOffAnnounce: 'Tryb zaznaczania wyłączony.'
 		},
 		en: {
 			fileDeletedToast: 'File has been deleted',
-			currentFilePlaceholder: 'Select a file to see details',
-			bulkDeletedToast: 'Files have been deleted'
+			currentFilePlaceholder: 'File preview',
+			currentFileDesc: 'Select a file from the list to view details and edit metadata.',
+			bulkDeletedToast: 'Files have been deleted',
+			selectMode: 'Select',
+			selectModeActive: 'Selecting',
+			selectModeAnnounce: 'Selection mode enabled. Click files to select them.',
+			selectModeOffAnnounce: 'Selection mode disabled.'
 		}
 	};
 
@@ -51,8 +67,21 @@
 	let activeTagFilter = $state<string | null>(null);
 	let searchQuery = $state('');
 	let selectedFileIds = $state<string[]>([]);
-	let lastClickedIndex = $state<number>(-1);
 	let dropZoneRef = $state<HTMLElement | null>(null);
+	let selectionMode = $state(false);
+	let selectionAnnouncement = $state('');
+
+	function exitSelectionMode() {
+		selectionMode = false;
+		selectedFileIds = [];
+		currentFile = null;
+		selectionAnnouncement = lang[interfaceLanguage.current].selectModeOffAnnounce;
+	}
+
+	function enterSelectionMode() {
+		selectionMode = true;
+		selectionAnnouncement = lang[interfaceLanguage.current].selectModeAnnounce;
+	}
 
 	const filesQuery = $derived(
 		remotes.getMediaFiles({
@@ -71,21 +100,24 @@
 
 	let tagsQuery = $derived(remotes.getMediaTags());
 
-	// Multi-select with shift/ctrl
 	function handleFileSelect(file: MediaFile, event?: MouseEvent) {
-		if (event && (event.ctrlKey || event.metaKey)) {
-			// Toggle selection
+		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 (event?.shiftKey && lastClickedIndex >= 0) {
-			// Range selection - need resolved files
-			// Just select the single file if we can't resolve the range
+		} 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;
-			selectedFileIds = [file.id];
 		} else {
-			// Single select
+			// Normal click without selection mode: open details
 			selectedFileIds = [];
 			currentFile = file;
 			if (multiple && Array.isArray(selected)) {
@@ -98,6 +130,12 @@
 		}
 	}
 
+	function handleRangeSelect(fileIds: string[]) {
+		// Merge range into selection (union)
+		const merged = new Set([...selectedFileIds, ...fileIds]);
+		selectedFileIds = [...merged];
+	}
+
 	async function deleteFileCommand() {
 		if (currentFile) {
 			await remotes.deleteMediaFile(currentFile.id);
@@ -123,13 +161,14 @@
 			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();
 			}
 			return result;
 		}
 		throw new Error('No current file selected');
 	}
 
-	// Tag CRUD
 	async function handleCreateTag(name: string, color: string) {
 		await remotes.createMediaTag({ name, color });
 		await tagsQuery.refresh();
@@ -149,7 +188,6 @@
 		await allFilesQuery.refresh();
 	}
 
-	// Bulk operations
 	async function handleBulkTag(tagIds: string[]) {
 		const fileIds = selectedFileIds;
 		await remotes.bulkSetMediaFileTags({ fileIds, tagIds });
@@ -158,7 +196,7 @@
 	}
 
 	async function handleBulkDelete() {
-		await remotes.bulkDeleteMediaFiles(selectedFileIds);
+		await remotes.bulkDeleteMediaFiles({ ids: selectedFileIds });
 		toast.success(lang[interfaceLanguage.current].bulkDeletedToast);
 		selectedFileIds = [];
 		currentFile = null;
@@ -175,9 +213,9 @@
 	});
 </script>
 
-<div class="flex h-full" bind:this={dropZoneRef}>
-	<!-- Tag sidebar -->
-	<div class="w-48 shrink-0 border-r p-3">
+<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">
 		{#await Promise.all([tagsQuery, allFilesQuery]) then [tags, allFiles]}
 			<TagSidebar
 				{tags}
@@ -189,13 +227,26 @@
 				onDeleteTag={handleDeleteTag}
 			/>
 		{/await}
-	</div>
+	</aside>
 
-	<!-- Main content -->
-	<div class="flex flex-1 flex-col overflow-hidden">
-		<div class="flex items-center gap-2 border-b px-4 py-3">
+	<!-- 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={() => { filesQuery.refresh(); allFilesQuery.refresh(); }}
 				{accept}
@@ -203,66 +254,72 @@
 			/>
 		</div>
 
-		<div class="flex-1 overflow-y-auto p-4">
-			<div class="grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-2">
+		<!-- Selection mode announcement (sr-only) -->
+		<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">
 				{#await filesQuery}
 					{#each Array(8) as _}
-						<Skeleton class="block aspect-square rounded-2xl" />
+						<Skeleton class="block h-[168px] rounded-xl" />
 					{/each}
 				{:then files}
 					<FilesList
 						{files}
 						selected={selectedFileIds.length > 0 ? selectedFileIds : (selected ?? '')}
 						onSelect={handleFileSelect}
+						onRangeSelect={handleRangeSelect}
+						{selectionMode}
 					/>
 				{/await}
 			</div>
 		</div>
-	</div>
+	</section>
 
-	<!-- Detail panel -->
-	<div class="w-96 shrink-0 overflow-y-auto border-l">
-		<div class="sticky top-0">
-			{#if selectedFileIds.length > 1}
-				{#await filesQuery then allFiles}
-					{#await tagsQuery then tags}
-						<MultiFileSummary
-							files={allFiles.filter((f) => selectedFileIds.includes(f.id))}
-							allTags={tags}
-							onBulkTag={handleBulkTag}
-							onBulkDelete={handleBulkDelete}
-						/>
-					{/await}
+	<!-- 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}
+			{#await filesQuery then allFiles}
+				{#await tagsQuery then tags}
+					<MultiFileSummary
+						files={allFiles.filter((f) => selectedFileIds.includes(f.id))}
+						allTags={tags}
+						onBulkTag={handleBulkTag}
+						onBulkDelete={handleBulkDelete}
+					/>
 				{/await}
-			{:else if currentFile}
-				{#key currentFile}
-					{#await tagsQuery then tags}
-						<FileDetails
-							file={currentFile}
-							allTags={tags}
-							onDelete={deleteFileCommand}
-							onReplace={(updated) => {
-								currentFile = updated;
-								filesQuery.refresh();
-								allFilesQuery.refresh();
-							}}
-							{onTagUpdate}
-							{onNameUpdate}
-						/>
-					{/await}
-				{/key}
-			{:else}
-				<div class="flex flex-col items-center justify-center p-12 text-center">
-					<div class="mb-3 rounded-full bg-muted/50 p-4">
-						<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-muted-foreground" 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-sm text-muted-foreground">{lang[interfaceLanguage.current].currentFilePlaceholder}</p>
+			{/await}
+		{:else if currentFile}
+			{#key currentFile}
+				{#await tagsQuery then tags}
+					<FileDetails
+						file={currentFile}
+						allTags={tags}
+						onDelete={deleteFileCommand}
+						onReplace={(updated) => {
+							currentFile = updated;
+							filesQuery.refresh();
+							allFilesQuery.refresh();
+						}}
+						{onTagUpdate}
+						{onNameUpdate}
+					/>
+				{/await}
+			{/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>
 				</div>
-			{/if}
-		</div>
-	</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>
 </div>
 
 <!-- Bulk action bar -->
@@ -274,7 +331,7 @@
 			{tags}
 			onBulkTag={handleBulkTag}
 			onBulkDelete={handleBulkDelete}
-			onClear={() => (selectedFileIds = [])}
+			onClear={exitSelectionMode}
 			onSelectAll={() => { selectedFileIds = allFiles.map((f) => f.id); }}
 			onCreateTag={handleCreateTag}
 			onUpdateTagColor={async (id, color) => {

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

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
-	import Input from '../../../components/ui/input/input.svelte';
 	import Search from '@tabler/icons-svelte/icons/search';
 	import X from '@tabler/icons-svelte/icons/x';
 
@@ -36,20 +35,21 @@
 	}
 </script>
 
-<div class="relative flex-1">
-	<Search class="text-muted-foreground pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2" />
-	<Input
+<div class="flex flex-1 items-center gap-2 rounded-lg bg-muted/60 border border-transparent px-3 py-1.5 transition-all focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/10 focus-within:bg-card max-w-xs min-w-[200px]">
+	<Search class="h-4 w-4 shrink-0 text-text-light" />
+	<input
 		type="search"
+		class="flex-1 border-none bg-transparent text-[13px] text-foreground placeholder:text-text-light outline-none"
 		placeholder={lang[interfaceLanguage.current].placeholder}
-		class="h-9 w-full pl-9 pr-8 text-sm"
 		value={inputValue}
 		oninput={handleInput}
 	/>
 	{#if inputValue}
 		<button
 			type="button"
-			class="absolute right-2 top-1/2 -translate-y-1/2 rounded-sm p-0.5 text-muted-foreground hover:text-foreground transition-colors"
+			class="rounded-sm p-0.5 text-muted-foreground hover:text-foreground transition-colors"
 			onclick={clear}
+			aria-label="Wyczyść wyszukiwanie"
 		>
 			<X class="h-3.5 w-3.5" />
 		</button>

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

@@ -3,6 +3,7 @@
 	import type { InterfaceLanguage } from '../../../types/languages.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { sortOptions, getMediaSort } from '../../state/media-sort.svelte.js';
+	import ArrowsSort from '@tabler/icons-svelte/icons/arrows-sort';
 
 	const lang: Record<
 		InterfaceLanguage,
@@ -34,7 +35,8 @@
 </script>
 
 <Select.Root type="single" name="sort" value={sort.current}>
-	<Select.Trigger>
+	<Select.Trigger class="inline-flex items-center gap-1.5 rounded-lg border border-border bg-card px-3 py-1.5 text-[13px] font-medium text-muted-foreground transition-colors hover:bg-lavender-lighter hover:border-lavender hover:text-primary focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 h-auto">
+		<ArrowsSort class="h-3.5 w-3.5" />
 		{triggerContent}
 	</Select.Trigger>
 	<Select.Content>

package/dist/admin/components/media/multi-file-summary.svelte

@@ -22,6 +22,8 @@
 			deleteConfirmDesc: string;
 			cancel: string;
 			delete: string;
+			typesLabel: string;
+			emptyHint: string;
 		}
 	> = {
 		pl: {
@@ -35,7 +37,9 @@
 			deleteConfirmTitle: 'Usunąć pliki?',
 			deleteConfirmDesc: 'Zaznaczone pliki zostaną trwale usunięte.',
 			cancel: 'Anuluj',
-			delete: 'Usuń'
+			delete: 'Usuń',
+			typesLabel: 'Typy',
+			emptyHint: 'Kliknij pliki, aby je zaznaczyć'
 		},
 		en: {
 			filesSelected: 'files selected',
@@ -48,7 +52,9 @@
 			deleteConfirmTitle: 'Delete files?',
 			deleteConfirmDesc: 'Selected files will be permanently deleted.',
 			cancel: 'Cancel',
-			delete: 'Delete'
+			delete: 'Delete',
+			typesLabel: 'Types',
+			emptyHint: 'Click files to select them'
 		}
 	};
 
@@ -89,7 +95,6 @@
 		return allTags.filter((t) => firstTagIds.has(t.id));
 	});
 
-	// Initialize bulkTagIds with shared tags when files change
 	$effect(() => {
 		bulkTagIds = sharedTags.map((t) => t.id);
 	});
@@ -103,87 +108,101 @@
 	});
 </script>
 
-<!-- Header -->
-<div class="flex items-center gap-3 border-b border-white/10 px-5 py-4">
-	<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10">
-		<Files class="h-5 w-5 text-primary" />
-	</div>
-	<div>
-		<div class="text-lg font-semibold tabular-nums">{files.length}</div>
-		<div class="text-xs glass-text-muted">{lang[interfaceLanguage.current].filesSelected}</div>
+{#if files.length === 0}
+<div class="flex flex-1 flex-col items-center justify-center px-5 py-10 text-center h-full">
+	<div class="mb-3.5 flex h-14 w-14 items-center justify-center rounded-xl bg-muted">
+		<Files class="h-6 w-6 text-text-light" />
 	</div>
+	<p class="text-sm font-bold text-foreground">0 {lang[interfaceLanguage.current].filesSelected}</p>
+	<p class="mt-1 text-[13px] leading-relaxed text-muted-foreground">{lang[interfaceLanguage.current].emptyHint}</p>
 </div>
-
-<div class="space-y-4 p-5">
-	<!-- Stats -->
-	<div class="grid grid-cols-2 gap-3">
-		<div class="rounded-xl bg-muted/30 px-3 py-2.5">
-			<div class="text-xs glass-text-muted">{lang[interfaceLanguage.current].totalSize}</div>
-			<div class="mt-0.5 text-sm font-medium">{formatFileSize(totalSize)}</div>
-		</div>
-		<div class="rounded-xl bg-muted/30 px-3 py-2.5">
-			<div class="text-xs glass-text-muted">Types</div>
-			<div class="mt-0.5 flex gap-1.5 text-sm font-medium">
-				{#each Object.entries(typeBreakdown) as [type, count]}
-					<span class="text-xs">{count} {type}</span>
-				{/each}
+{:else}
+<div class="flex h-full flex-col overflow-hidden">
+	<div class="flex-1 overflow-y-auto scrollbar-thin">
+		<!-- Header -->
+		<div class="flex items-center gap-3 border-b px-5 py-4">
+			<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10">
+				<Files class="h-5 w-5 text-primary" />
+			</div>
+			<div>
+				<div class="text-lg font-bold tabular-nums text-foreground">{files.length}</div>
+				<div class="text-xs text-text-light font-medium">{lang[interfaceLanguage.current].filesSelected}</div>
 			</div>
 		</div>
-	</div>
 
-	<!-- Shared tags -->
-	<div class="space-y-2">
-		<div class="text-xs font-medium glass-text-muted">{lang[interfaceLanguage.current].sharedTags}</div>
-		{#if sharedTags.length > 0}
-			<div class="flex flex-wrap gap-1.5">
-				{#each sharedTags as tag}
-					<span class="inline-flex items-center gap-1.5 rounded-full bg-muted/50 px-2.5 py-1 text-xs">
-						<span class="h-2 w-2 rounded-full" style="background-color: {tag.color}"></span>
-						{tag.name}
-					</span>
-				{/each}
+		<div class="space-y-4 p-5">
+			<!-- Stats -->
+			<div class="grid grid-cols-2 gap-3">
+				<div class="rounded-xl bg-muted/40 px-3 py-2.5">
+					<div class="text-[11px] font-bold uppercase tracking-wide text-text-light">{lang[interfaceLanguage.current].totalSize}</div>
+					<div class="mt-0.5 text-sm font-semibold text-foreground">{formatFileSize(totalSize)}</div>
+				</div>
+				<div class="rounded-xl bg-muted/40 px-3 py-2.5">
+					<div class="text-[11px] font-bold uppercase tracking-wide text-text-light">{lang[interfaceLanguage.current].typesLabel}</div>
+					<div class="mt-0.5 flex gap-1.5 text-sm font-semibold text-foreground">
+						{#each Object.entries(typeBreakdown) as [type, count]}
+							<span class="text-xs">{count} {type}</span>
+						{/each}
+					</div>
+				</div>
+			</div>
+
+			<!-- Shared tags -->
+			<div class="space-y-1.5">
+				<div class="text-[11px] font-bold uppercase tracking-wide text-text-light">{lang[interfaceLanguage.current].sharedTags}</div>
+				{#if sharedTags.length > 0}
+					<div class="flex flex-wrap gap-1.5">
+						{#each sharedTags as tag}
+							<span class="inline-flex items-center gap-1.5 rounded-full bg-muted/50 px-2.5 py-1 text-xs font-medium">
+								<span class="h-1.5 w-1.5 rounded-full" style="background-color: {tag.color}"></span>
+								{tag.name}
+							</span>
+						{/each}
+					</div>
+				{:else}
+					<p class="text-xs text-muted-foreground">{lang[interfaceLanguage.current].noSharedTags}</p>
+				{/if}
 			</div>
-		{:else}
-			<p class="text-xs text-muted-foreground">{lang[interfaceLanguage.current].noSharedTags}</p>
-		{/if}
+
+			<!-- Bulk tag -->
+			<div class="space-y-1.5">
+				<div class="text-[11px] font-bold uppercase tracking-wide text-text-light">{lang[interfaceLanguage.current].setTags}</div>
+				<TagCombobox
+					tags={allTags}
+					selectedTagIds={bulkTagIds}
+					onchange={(ids) => (bulkTagIds = ids)}
+					showLabel={false}
+				/>
+				<Button
+					size="sm"
+					variant="outline"
+					class="w-full"
+					onclick={async () => {
+						await onBulkTag(bulkTagIds);
+					}}
+				>
+					{lang[interfaceLanguage.current].apply}
+				</Button>
+			</div>
+		</div>
 	</div>
 
-	<!-- Bulk tag -->
-	<div class="space-y-2">
-		<div class="text-xs font-medium glass-text-muted">{lang[interfaceLanguage.current].setTags}</div>
-		<TagCombobox
-			tags={allTags}
-			selectedTagIds={bulkTagIds}
-			onchange={(ids) => (bulkTagIds = ids)}
-			showLabel={false}
-		/>
+	<!-- Delete -->
+	<div class="shrink-0 border-t px-5 py-4">
 		<Button
 			size="sm"
-			variant="outline"
-			class="w-full"
-			onclick={async () => {
-				await onBulkTag(bulkTagIds);
-			}}
+			variant="destructive"
+			class="w-full gap-1.5"
+			onclick={() => (deleteDialogOpen = true)}
 		>
-			{lang[interfaceLanguage.current].apply}
+			<Trash class="h-3.5 w-3.5" />
+			{lang[interfaceLanguage.current].deleteAll}
 		</Button>
 	</div>
 </div>
 
-<!-- Delete -->
-<div class="border-t border-white/10 px-5 py-4">
-	<Button
-		size="sm"
-		variant="destructive"
-		class="w-full gap-1.5"
-		onclick={() => (deleteDialogOpen = true)}
-	>
-		<Trash class="h-3.5 w-3.5" />
-		{lang[interfaceLanguage.current].deleteAll}
-	</Button>
-</div>
-
 <AlertDialog.Root bind:open={deleteDialogOpen}>
+
 	<AlertDialog.Content>
 		<AlertDialog.Title>{lang[interfaceLanguage.current].deleteConfirmTitle}</AlertDialog.Title>
 		<AlertDialog.Description>{lang[interfaceLanguage.current].deleteConfirmDesc}</AlertDialog.Description>
@@ -200,3 +219,4 @@
 		</AlertDialog.Footer>
 	</AlertDialog.Content>
 </AlertDialog.Root>
+{/if}