includio-cms 0.1.4 → 0.5.0

package/dist/admin/components/media/bulk-action-bar.svelte

@@ -2,7 +2,6 @@
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
 	import type { MediaTag } from '../../../types/media.js';
-	import Button from '../../../components/ui/button/button.svelte';
 	import * as AlertDialog from '../../../components/ui/alert-dialog/index.js';
 	import * as Popover from '../../../components/ui/popover/index.js';
 	import * as Command from '../../../components/ui/command/index.js';
@@ -117,150 +116,157 @@
 	}
 </script>
 
-<div class="fixed bottom-0 left-0 right-0 z-40 flex justify-center pb-6 pointer-events-none bulk-bar-enter">
-	<div class="pointer-events-auto flex items-center gap-2 rounded-2xl border border-white/20 bg-white/90 px-5 py-3 shadow-2xl shadow-black/10 backdrop-blur-xl dark:border-white/10 dark:bg-slate-900/90">
-		<!-- Selection count -->
-		<div class="flex items-center gap-2 pr-2">
-			<div class="flex h-7 min-w-7 items-center justify-center rounded-lg bg-primary px-2 text-xs font-semibold tabular-nums text-white dark:bg-primary">
-				{selectedCount}
-			</div>
-			<span class="text-sm text-foreground/70">{lang[interfaceLanguage.current].selected}</span>
-		</div>
+<div
+	class="ml-bulk-bar flex items-center gap-3 rounded-xl bg-plum-darker px-5 py-2.5 text-white shadow-xl"
+	aria-live="polite"
+>
+	<!-- Selection count -->
+	<span class="text-[13px] font-bold whitespace-nowrap tabular-nums">{selectedCount} {lang[interfaceLanguage.current].selected}</span>
 
-		<div class="h-5 w-px bg-border"></div>
+	<div class="h-5 w-px bg-white/20"></div>
 
-		<!-- Select all / deselect all -->
-		<Button
-			size="sm"
-			variant="ghost"
-			class="gap-1.5 text-xs"
-			onclick={allSelected ? onClear : onSelectAll}
-		>
-			{#if allSelected}
-				<Deselect class="h-3.5 w-3.5" />
-				{lang[interfaceLanguage.current].deselectAll}
-			{:else}
-				<Checkbox class="h-3.5 w-3.5" />
-				{lang[interfaceLanguage.current].selectAll}
-			{/if}
-		</Button>
+	<!-- Select all / deselect all -->
+	<button
+		type="button"
+		class="inline-flex items-center gap-1.5 rounded-lg border border-white/20 px-3.5 py-1.5 text-xs font-semibold text-white transition-colors hover:bg-white/10 hover:border-white/40"
+		onclick={allSelected ? onClear : onSelectAll}
+	>
+		{#if allSelected}
+			<Deselect class="h-3.5 w-3.5" />
+			{lang[interfaceLanguage.current].deselectAll}
+		{:else}
+			<Checkbox class="h-3.5 w-3.5" />
+			{lang[interfaceLanguage.current].selectAll}
+		{/if}
+	</button>
 
-		<div class="h-5 w-px bg-border"></div>
+	<div class="h-5 w-px bg-white/20"></div>
 
-		<!-- Bulk tag -->
-		<Popover.Root bind:open={tagPopoverOpen}>
-			<Popover.Trigger>
-				{#snippet child({ props })}
-					<Button {...props} size="sm" variant="outline" class="gap-1.5 text-xs">
-						<Tags class="h-3.5 w-3.5" />
-						{lang[interfaceLanguage.current].setTags}
-					</Button>
-				{/snippet}
-			</Popover.Trigger>
-			<Popover.Content class="w-[250px] p-0" side="top">
-				{#if colorPickerTag && onUpdateTagColor}
-					<div class="p-3">
-						<div class="mb-2 flex items-center gap-2">
+	<!-- Bulk tag -->
+	<Popover.Root bind:open={tagPopoverOpen}>
+		<Popover.Trigger>
+			{#snippet child({ props })}
+				<button
+					{...props}
+					type="button"
+					class="inline-flex items-center gap-1.5 rounded-lg border border-white/20 px-3.5 py-1.5 text-xs font-semibold text-white transition-colors hover:bg-white/10 hover:border-white/40"
+				>
+					<Tags class="h-3.5 w-3.5" />
+					{lang[interfaceLanguage.current].setTags}
+				</button>
+			{/snippet}
+		</Popover.Trigger>
+		<Popover.Content class="w-[250px] p-0" side="top">
+			{#if colorPickerTag && onUpdateTagColor}
+				<div class="p-3">
+					<div class="mb-2 flex items-center gap-2">
+						<button
+							type="button"
+							class="text-xs text-muted-foreground hover:text-foreground"
+							onclick={() => (colorPickerTagId = null)}
+						>&larr;</button>
+						<span class="h-3 w-3 rounded-full" style="background-color: {colorPickerTag.color}"></span>
+						<span class="text-sm">{colorPickerTag.name}</span>
+					</div>
+					<div class="grid grid-cols-6 gap-1.5">
+						{#each TAG_COLORS as color}
 							<button
 								type="button"
-								class="text-xs text-muted-foreground hover:text-foreground"
-								onclick={() => (colorPickerTagId = null)}
-							>&larr;</button>
-							<span class="h-3 w-3 rounded-full" style="background-color: {colorPickerTag.color}"></span>
-							<span class="text-sm">{colorPickerTag.name}</span>
-						</div>
-						<div class="grid grid-cols-6 gap-1.5">
-							{#each TAG_COLORS as color}
-								<button
-									type="button"
-									class={cn(
-										'h-6 w-6 rounded-full transition-transform hover:scale-110',
-										colorPickerTag.color === color && 'ring-2 ring-foreground ring-offset-2 ring-offset-background'
-									)}
-									style="background-color: {color}"
-									onclick={() => {
-										onUpdateTagColor(colorPickerTag.id, color);
-										colorPickerTagId = null;
-									}}
-								></button>
-							{/each}
-						</div>
+								class={cn(
+									'h-6 w-6 rounded-full transition-transform hover:scale-110',
+									colorPickerTag.color === color && 'ring-2 ring-foreground ring-offset-2 ring-offset-background'
+								)}
+								style="background-color: {color}"
+								onclick={() => {
+									onUpdateTagColor(colorPickerTag.id, color);
+									colorPickerTagId = null;
+								}}
+							></button>
+						{/each}
 					</div>
-				{:else}
-					<Command.Root shouldFilter={true}>
-						<Command.Input placeholder={lang[interfaceLanguage.current].searchTags} bind:value={tagSearchValue} />
-						<Command.List>
-							<Command.Empty>{lang[interfaceLanguage.current].noTags}</Command.Empty>
+				</div>
+			{:else}
+				<Command.Root shouldFilter={true}>
+					<Command.Input placeholder={lang[interfaceLanguage.current].searchTags} bind:value={tagSearchValue} />
+					<Command.List>
+						<Command.Empty>{lang[interfaceLanguage.current].noTags}</Command.Empty>
+						<Command.Group>
+							{#each tags as tag (tag.id)}
+								<Command.Item
+									value={tag.name}
+									onSelect={() => toggleBulkTag(tag.id)}
+									class="group/tag"
+								>
+									<CheckIcon class={cn('mr-2 shrink-0', !bulkTagIds.includes(tag.id) && 'text-transparent')} />
+									{#if onUpdateTagColor}
+										<button
+											type="button"
+											class="mr-2 h-3 w-3 shrink-0 rounded-full ring-offset-1 hover:ring-2 hover:ring-foreground/30"
+											style="background-color: {tag.color}"
+											onclick={(e) => {
+												e.stopPropagation();
+												e.preventDefault();
+												colorPickerTagId = tag.id;
+											}}
+										></button>
+									{:else}
+										<span class="mr-2 h-3 w-3 shrink-0 rounded-full" style="background-color: {tag.color}"></span>
+									{/if}
+									<span class="flex-1 truncate">{tag.name}</span>
+								</Command.Item>
+							{/each}
+						</Command.Group>
+						{#if onCreateTag && tagSearchValue.trim() && !hasExactMatch}
 							<Command.Group>
-								{#each tags as tag (tag.id)}
-									<Command.Item
-										value={tag.name}
-										onSelect={() => toggleBulkTag(tag.id)}
-										class="group/tag"
-									>
-										<CheckIcon class={cn('mr-2 shrink-0', !bulkTagIds.includes(tag.id) && 'text-transparent')} />
-										{#if onUpdateTagColor}
-											<button
-												type="button"
-												class="mr-2 h-3 w-3 shrink-0 rounded-full ring-offset-1 hover:ring-2 hover:ring-foreground/30"
-												style="background-color: {tag.color}"
-												onclick={(e) => {
-													e.stopPropagation();
-													e.preventDefault();
-													colorPickerTagId = tag.id;
-												}}
-											></button>
-										{:else}
-											<span class="mr-2 h-3 w-3 shrink-0 rounded-full" style="background-color: {tag.color}"></span>
-										{/if}
-										<span class="flex-1 truncate">{tag.name}</span>
-									</Command.Item>
-								{/each}
+								<Command.Item
+									value="__create__{tagSearchValue.trim()}"
+									onSelect={handleCreateInline}
+								>
+									<span class="mr-2 text-muted-foreground">+</span>
+									{lang[interfaceLanguage.current].create} "{tagSearchValue.trim()}"
+								</Command.Item>
 							</Command.Group>
-							{#if onCreateTag && tagSearchValue.trim() && !hasExactMatch}
-								<Command.Group>
-									<Command.Item
-										value="__create__{tagSearchValue.trim()}"
-										onSelect={handleCreateInline}
-									>
-										<span class="mr-2 text-muted-foreground">+</span>
-										{lang[interfaceLanguage.current].create} "{tagSearchValue.trim()}"
-									</Command.Item>
-								</Command.Group>
-							{/if}
-						</Command.List>
-					</Command.Root>
-					<div class="border-t p-2">
-						<Button
-							size="sm"
-							variant="outline"
-							class="w-full"
-							onclick={async () => {
-								await onBulkTag(bulkTagIds);
-								tagPopoverOpen = false;
-								bulkTagIds = [];
-							}}
-						>
-							{lang[interfaceLanguage.current].apply}
-						</Button>
-					</div>
-				{/if}
-			</Popover.Content>
-		</Popover.Root>
+						{/if}
+					</Command.List>
+				</Command.Root>
+				<div class="border-t p-2">
+					<button
+						type="button"
+						class="w-full rounded-lg border border-white/20 bg-transparent px-3 py-1.5 text-xs font-semibold text-foreground transition-colors hover:bg-muted"
+						onclick={async () => {
+							await onBulkTag(bulkTagIds);
+							tagPopoverOpen = false;
+							bulkTagIds = [];
+						}}
+					>
+						{lang[interfaceLanguage.current].apply}
+					</button>
+				</div>
+			{/if}
+		</Popover.Content>
+	</Popover.Root>
 
-		<!-- Bulk delete -->
-		<Button size="sm" variant="destructive" class="gap-1.5 text-xs" onclick={() => (deleteDialogOpen = true)}>
-			<Trash class="h-3.5 w-3.5" />
-			{lang[interfaceLanguage.current].delete}
-		</Button>
+	<!-- Bulk delete -->
+	<button
+		type="button"
+		class="inline-flex items-center gap-1.5 rounded-lg border border-destructive/50 px-3.5 py-1.5 text-xs font-semibold text-white transition-colors hover:bg-destructive/20 hover:border-destructive/70"
+		onclick={() => (deleteDialogOpen = true)}
+	>
+		<Trash class="h-3.5 w-3.5" />
+		{lang[interfaceLanguage.current].delete}
+	</button>
 
-		<div class="h-5 w-px bg-border"></div>
+	<div class="h-5 w-px bg-white/20"></div>
 
-		<!-- Clear -->
-		<Button size="sm" variant="ghost" class="gap-1 text-xs text-foreground/70" onclick={onClear}>
-			<X class="h-3.5 w-3.5" />
-		</Button>
-	</div>
+	<!-- Clear -->
+	<button
+		type="button"
+		class="rounded-lg p-1.5 text-white/70 transition-colors hover:bg-white/10 hover:text-white"
+		onclick={onClear}
+		aria-label={lang[interfaceLanguage.current].clear}
+	>
+		<X class="h-4 w-4" />
+	</button>
 </div>
 
 <AlertDialog.Root bind:open={deleteDialogOpen}>
@@ -280,20 +286,3 @@
 		</AlertDialog.Footer>
 	</AlertDialog.Content>
 </AlertDialog.Root>
-
-<style>
-	.bulk-bar-enter {
-		animation: bulkBarSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-	}
-
-	@keyframes bulkBarSlideUp {
-		from {
-			opacity: 0;
-			transform: translateY(100%);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-</style>