includio-cms 0.1.3 → 0.5.0

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

@@ -3,11 +3,11 @@
 	import * as Command from '../../../components/ui/command/index.js';
 	import Label from '../../../components/ui/label/label.svelte';
 	import type { MediaTag } from '../../../types/media.js';
-	import { tick } from 'svelte';
 	import Button from '../../../components/ui/button/button.svelte';
 	import SelectorIcon from '@tabler/icons-svelte/icons/selector';
 	import { cn } from '../../../utils.js';
 	import CheckIcon from '@tabler/icons-svelte/icons/check';
+	import X from '@tabler/icons-svelte/icons/x';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 
@@ -26,6 +26,7 @@
 			noTags: string;
 			create: string;
 			searchTags: string;
+			addTagPlaceholder: string;
 		}
 	> = {
 		pl: {
@@ -34,7 +35,8 @@
 			empty: 'Brak tagów',
 			noTags: 'Brak tagów.',
 			create: 'Utwórz',
-			searchTags: 'Szukaj tagów...'
+			searchTags: 'Szukaj tagów...',
+			addTagPlaceholder: 'Dodaj tag...'
 		},
 		en: {
 			label: 'Tags',
@@ -42,7 +44,8 @@
 			empty: 'No tags',
 			noTags: 'No tags found.',
 			create: 'Create',
-			searchTags: 'Search tags...'
+			searchTags: 'Search tags...',
+			addTagPlaceholder: 'Add tag...'
 		}
 	};
 
@@ -54,9 +57,10 @@
 		onchange: (tagIds: string[]) => void;
 		showLabel?: boolean;
 		onCreate?: (name: string, color: string) => Promise<void>;
+		variant?: 'dropdown' | 'inline';
 	};
 
-	let { tags, selectedTagIds, onchange, showLabel = true, onCreate }: Props = $props();
+	let { tags, selectedTagIds, onchange, showLabel = true, onCreate, variant = 'dropdown' }: Props = $props();
 
 	let open = $state(false);
 	let triggerRef = $state<HTMLButtonElement>(null!);
@@ -74,6 +78,10 @@
 		onchange(newIds);
 	}
 
+	function removeTag(tagId: string) {
+		onchange(selectedTagIds.filter((id) => id !== tagId));
+	}
+
 	function getNextColor(): string {
 		const usedColors = tags.map((t) => t.color);
 		const available = TAG_COLORS.filter((c) => !usedColors.includes(c));
@@ -87,69 +95,136 @@
 	}
 </script>
 
-<div class="grid grid-cols-1 gap-2">
-	{#if showLabel}
-		<Label>{lang[interfaceLanguage.current].label}</Label>
-	{/if}
-	<Popover.Root bind:open>
-		<Popover.Trigger bind:ref={triggerRef}>
-			{#snippet child({ props })}
-				<Button
-					{...props}
-					variant="outline"
-					class="w-full justify-between"
-					role="combobox"
-					aria-expanded={open}
+{#if variant === 'inline'}
+	<!-- Inline variant: chip container with colored dots + text input -->
+	<div class="flex flex-wrap items-center gap-1 rounded-lg bg-muted/60 border border-transparent px-2 py-1.5 min-h-[36px] transition-all focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/10 focus-within:bg-card">
+		{#each selectedTags as tag (tag.id)}
+			<span class="inline-flex items-center gap-1 rounded-full bg-card border border-border px-2 py-0.5 text-xs font-medium text-muted-foreground">
+				<span class="h-1.5 w-1.5 rounded-full shrink-0" style="background-color: {tag.color}"></span>
+				{tag.name}
+				<button
+					type="button"
+					class="flex items-center justify-center w-3.5 h-3.5 ml-0.5 rounded-full text-text-light transition-colors hover:bg-error-bg hover:text-destructive"
+					onclick={() => removeTag(tag.id)}
+					aria-label="Usuń tag {tag.name}"
 				>
-					{#if selectedTags.length > 0}
-						<span class="flex items-center gap-1 truncate">
-							{#each selectedTags.slice(0, 3) as tag}
-								<span class="inline-flex items-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-xs">
-									<span class="h-2 w-2 rounded-full" style="background-color: {tag.color}"></span>
-									{tag.name}
-								</span>
+					<X class="h-2.5 w-2.5" />
+				</button>
+			</span>
+		{/each}
+		<!-- Inline input to search/add -->
+		<Popover.Root bind:open>
+			<Popover.Trigger>
+				{#snippet child({ props })}
+					<input
+						{...props}
+						type="text"
+						class="flex-1 min-w-[60px] border-none bg-transparent text-xs text-foreground placeholder:text-text-light outline-none py-0.5"
+						placeholder={lang[interfaceLanguage.current].addTagPlaceholder}
+						bind:value={searchValue}
+						onfocus={() => (open = true)}
+					/>
+				{/snippet}
+			</Popover.Trigger>
+			<Popover.Content class="w-[220px] p-0" align="start">
+				<Command.Root shouldFilter={true}>
+					<Command.Input placeholder={lang[interfaceLanguage.current].searchTags} bind:value={searchValue} />
+					<Command.List>
+						<Command.Empty>{lang[interfaceLanguage.current].noTags}</Command.Empty>
+						<Command.Group>
+							{#each tags as tag (tag.id)}
+								<Command.Item
+									value={tag.name}
+									onSelect={() => toggleTag(tag.id)}
+								>
+									<CheckIcon class={cn('mr-2 shrink-0', !selectedTagIds.includes(tag.id) && 'text-transparent')} />
+									<span class="mr-2 h-3 w-3 shrink-0 rounded-full" style="background-color: {tag.color}"></span>
+									<span class="flex-1 truncate">{tag.name}</span>
+								</Command.Item>
 							{/each}
-							{#if selectedTags.length > 3}
-								<span class="text-xs text-muted-foreground">+{selectedTags.length - 3}</span>
-							{/if}
-						</span>
-					{:else}
-						{lang[interfaceLanguage.current].placeholder}
-					{/if}
-					<SelectorIcon class="opacity-50" />
-				</Button>
-			{/snippet}
-		</Popover.Trigger>
-		<Popover.Content class="w-[220px] p-0">
-			<Command.Root shouldFilter={true}>
-				<Command.Input placeholder={lang[interfaceLanguage.current].searchTags} bind:value={searchValue} />
-				<Command.List>
-					<Command.Empty>{lang[interfaceLanguage.current].noTags}</Command.Empty>
-					<Command.Group>
-						{#each tags as tag (tag.id)}
-							<Command.Item
-								value={tag.name}
-								onSelect={() => toggleTag(tag.id)}
-							>
-								<CheckIcon class={cn('mr-2 shrink-0', !selectedTagIds.includes(tag.id) && 'text-transparent')} />
-								<span class="mr-2 h-3 w-3 shrink-0 rounded-full" style="background-color: {tag.color}"></span>
-								<span class="flex-1 truncate">{tag.name}</span>
-							</Command.Item>
-						{/each}
-					</Command.Group>
-					{#if onCreate && searchValue.trim() && !hasExactMatch}
+						</Command.Group>
+						{#if onCreate && searchValue.trim() && !hasExactMatch}
+							<Command.Group>
+								<Command.Item
+									value="__create__{searchValue.trim()}"
+									onSelect={handleCreateInline}
+								>
+									<span class="mr-2 text-muted-foreground">+</span>
+									{lang[interfaceLanguage.current].create} "{searchValue.trim()}"
+								</Command.Item>
+							</Command.Group>
+						{/if}
+					</Command.List>
+				</Command.Root>
+			</Popover.Content>
+		</Popover.Root>
+	</div>
+{:else}
+	<!-- Dropdown variant (default) -->
+	<div class="grid grid-cols-1 gap-2">
+		{#if showLabel}
+			<Label>{lang[interfaceLanguage.current].label}</Label>
+		{/if}
+		<Popover.Root bind:open>
+			<Popover.Trigger bind:ref={triggerRef}>
+				{#snippet child({ props })}
+					<Button
+						{...props}
+						variant="outline"
+						class="w-full justify-between"
+						role="combobox"
+						aria-expanded={open}
+					>
+						{#if selectedTags.length > 0}
+							<span class="flex items-center gap-1 truncate">
+								{#each selectedTags.slice(0, 3) as tag}
+									<span class="inline-flex items-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-xs">
+										<span class="h-2 w-2 rounded-full" style="background-color: {tag.color}"></span>
+										{tag.name}
+									</span>
+								{/each}
+								{#if selectedTags.length > 3}
+									<span class="text-xs text-muted-foreground">+{selectedTags.length - 3}</span>
+								{/if}
+							</span>
+						{:else}
+							{lang[interfaceLanguage.current].placeholder}
+						{/if}
+						<SelectorIcon class="opacity-50" />
+					</Button>
+				{/snippet}
+			</Popover.Trigger>
+			<Popover.Content class="w-[220px] p-0">
+				<Command.Root shouldFilter={true}>
+					<Command.Input placeholder={lang[interfaceLanguage.current].searchTags} bind:value={searchValue} />
+					<Command.List>
+						<Command.Empty>{lang[interfaceLanguage.current].noTags}</Command.Empty>
 						<Command.Group>
-							<Command.Item
-								value="__create__{searchValue.trim()}"
-								onSelect={handleCreateInline}
-							>
-								<span class="mr-2 text-muted-foreground">+</span>
-								{lang[interfaceLanguage.current].create} "{searchValue.trim()}"
-							</Command.Item>
+							{#each tags as tag (tag.id)}
+								<Command.Item
+									value={tag.name}
+									onSelect={() => toggleTag(tag.id)}
+								>
+									<CheckIcon class={cn('mr-2 shrink-0', !selectedTagIds.includes(tag.id) && 'text-transparent')} />
+									<span class="mr-2 h-3 w-3 shrink-0 rounded-full" style="background-color: {tag.color}"></span>
+									<span class="flex-1 truncate">{tag.name}</span>
+								</Command.Item>
+							{/each}
 						</Command.Group>
-					{/if}
-				</Command.List>
-			</Command.Root>
-		</Popover.Content>
-	</Popover.Root>
-</div>
+						{#if onCreate && searchValue.trim() && !hasExactMatch}
+							<Command.Group>
+								<Command.Item
+									value="__create__{searchValue.trim()}"
+									onSelect={handleCreateInline}
+								>
+									<span class="mr-2 text-muted-foreground">+</span>
+									{lang[interfaceLanguage.current].create} "{searchValue.trim()}"
+								</Command.Item>
+							</Command.Group>
+						{/if}
+					</Command.List>
+				</Command.Root>
+			</Popover.Content>
+		</Popover.Root>
+	</div>
+{/if}

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

@@ -5,6 +5,7 @@ type Props = {
     onchange: (tagIds: string[]) => void;
     showLabel?: boolean;
     onCreate?: (name: string, color: string) => Promise<void>;
+    variant?: 'dropdown' | 'inline';
 };
 declare const TagCombobox: import("svelte").Component<Props, {}, "">;
 type TagCombobox = ReturnType<typeof TagCombobox>;

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

@@ -2,7 +2,6 @@
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
 	import type { MediaFile, MediaTag } from '../../../types/media.js';
-	import Button from '../../../components/ui/button/button.svelte';
 	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';
@@ -67,7 +66,7 @@
 	type Props = {
 		tags: MediaTag[];
 		files: MediaFile[];
-		activeFilter: string | null; // null = all, 'untagged', or tag id
+		activeFilter: string | null;
 		onFilterChange: (filter: string | null) => void;
 		onCreateTag: (name: string, color: string) => Promise<void>;
 		onUpdateTag: (id: string, name: string, color: string) => Promise<void>;
@@ -132,146 +131,165 @@
 	}
 </script>
 
-<div class="flex h-full flex-col gap-0.5">
-	<!-- All files -->
-	<button
-		type="button"
-		class={cn(
-			'flex items-center gap-2 rounded-lg px-3 py-1.5 text-left text-sm transition-colors',
-			activeFilter === null
-				? 'bg-[#2D4A77]/10 text-[#2D4A77] dark:bg-[#4975AE]/15 dark:text-[#4975AE] font-medium'
-				: 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'
-		)}
-		onclick={() => onFilterChange(null)}
-	>
-		<Tag class="h-4 w-4 shrink-0" />
-		<span class="flex-1">{lang[interfaceLanguage.current].all}</span>
-		<span class="text-xs tabular-nums opacity-80">{files.length}</span>
-	</button>
-
-	<!-- Untagged -->
-	<button
-		type="button"
-		class={cn(
-			'flex items-center gap-2 rounded-lg px-3 py-1.5 text-left text-sm transition-colors',
-			activeFilter === 'untagged'
-				? 'bg-[#2D4A77]/10 text-[#2D4A77] dark:bg-[#4975AE]/15 dark:text-[#4975AE] font-medium'
-				: 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'
-		)}
-		onclick={() => onFilterChange('untagged')}
-	>
-		<TagOff class="h-4 w-4 shrink-0" />
-		<span class="flex-1">{lang[interfaceLanguage.current].untagged}</span>
-		<span class="text-xs tabular-nums opacity-80">{untaggedCount}</span>
-	</button>
-
-	<div class="my-1.5 border-t"></div>
+<div class="flex h-full flex-col">
+	<div class="flex-1 overflow-y-auto py-2 scrollbar-thin" role="listbox" aria-label="Filtry tagów">
+		<ul class="flex flex-col gap-px px-1.5">
+			<!-- All files -->
+			<li>
+				<button
+					type="button"
+					role="option"
+					aria-selected={activeFilter === null}
+					class={cn(
+						'flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-[13px] font-medium transition-colors',
+						activeFilter === null
+							? 'bg-primary/8 text-primary font-semibold'
+							: 'text-muted-foreground hover:bg-muted hover:text-foreground'
+					)}
+					onclick={() => onFilterChange(null)}
+				>
+					<span class="flex h-[18px] w-[18px] shrink-0 items-center justify-center">
+						<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>
+				</button>
+			</li>
 
-	<!-- Tags list -->
-	<div class="flex-1 space-y-0.5 overflow-y-auto">
-		{#each tags as tag (tag.id)}
-			{#if editingTagId === tag.id}
-				<form
-					class="flex items-center gap-1 px-1"
-					onsubmit={(e) => { e.preventDefault(); handleRename(tag); }}
+			<!-- Untagged -->
+			<li>
+				<button
+					type="button"
+					role="option"
+					aria-selected={activeFilter === 'untagged'}
+					class={cn(
+						'flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-[13px] font-medium transition-colors',
+						activeFilter === 'untagged'
+							? 'bg-primary/8 text-primary font-semibold'
+							: 'text-muted-foreground hover:bg-muted hover:text-foreground'
+					)}
+					onclick={() => onFilterChange('untagged')}
 				>
-					<span class="h-3 w-3 shrink-0 rounded-full" style="background-color: {tag.color}"></span>
-					<Input
-						class="h-7 text-xs"
-						bind:value={editingTagName}
-						autofocus
-						onblur={() => handleRename(tag)}
-						onkeydown={(e) => e.key === 'Escape' && (editingTagId = null)}
-					/>
-				</form>
-			{:else}
-				<div class="group relative flex items-center">
-					<button
-						type="button"
-						class={cn(
-							'flex flex-1 items-center gap-2 rounded-lg px-3 py-1.5 text-left text-sm transition-colors',
-							activeFilter === tag.id
-								? 'bg-[#2D4A77]/10 text-[#2D4A77] dark:bg-[#4975AE]/15 dark:text-[#4975AE] font-medium'
-								: 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'
-						)}
-						onclick={() => onFilterChange(tag.id)}
-					>
-						<span class="h-3 w-3 shrink-0 rounded-full" style="background-color: {tag.color}"></span>
-						<span class="flex-1 truncate">{tag.name}</span>
-						<span class="text-xs tabular-nums opacity-80">{getTagFileCount(tag.id)}</span>
-					</button>
+					<span class="flex h-[18px] w-[18px] shrink-0 items-center justify-center">
+						<TagOff class="h-4 w-4" />
+					</span>
+					<span class="flex-1 truncate">{lang[interfaceLanguage.current].untagged}</span>
+					<span class="text-[11px] font-semibold tabular-nums {activeFilter === 'untagged' ? 'text-primary' : 'text-text-light'}">{untaggedCount}</span>
+				</button>
+			</li>
 
-					<!-- Context menu -->
-					<Popover.Root bind:open={
-						() => menuOpenTagId === tag.id,
-						(v) => { menuOpenTagId = v ? tag.id : null; }
-					}>
-						<Popover.Trigger>
-							{#snippet child({ props })}
-								<button
-									{...props}
-									type="button"
-									class="absolute right-1 rounded p-1 opacity-0 transition-opacity hover:bg-accent group-hover:opacity-100"
-								>
-									<Dots class="h-3.5 w-3.5" />
-								</button>
-							{/snippet}
-						</Popover.Trigger>
-						<Popover.Content class="w-40 p-1" align="start">
+			<!-- Separator -->
+			<li aria-hidden="true" class="my-1.5 mx-2.5 h-px bg-border"></li>
+
+			<!-- User tags -->
+			{#each tags as tag (tag.id)}
+				<li>
+					{#if editingTagId === tag.id}
+						<form
+							class="flex items-center gap-1 px-1"
+							onsubmit={(e) => { e.preventDefault(); handleRename(tag); }}
+						>
+							<span class="h-2 w-2 shrink-0 rounded-full" style="background-color: {tag.color}"></span>
+							<Input
+								class="h-7 text-xs"
+								bind:value={editingTagName}
+								autofocus
+								onblur={() => handleRename(tag)}
+								onkeydown={(e) => e.key === 'Escape' && (editingTagId = null)}
+							/>
+						</form>
+					{:else}
+						<div class="group relative flex items-center">
 							<button
 								type="button"
-								class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs hover:bg-accent"
-								onclick={() => startRename(tag)}
+								role="option"
+								aria-selected={activeFilter === tag.id}
+								class={cn(
+									'flex w-full flex-1 items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-[13px] font-medium transition-colors',
+									activeFilter === tag.id
+										? 'bg-primary/8 text-primary font-semibold'
+										: 'text-muted-foreground hover:bg-muted hover:text-foreground'
+								)}
+								onclick={() => onFilterChange(tag.id)}
 							>
-								{lang[interfaceLanguage.current].rename}
+								<span class="h-2 w-2 shrink-0 rounded-full" style="background-color: {tag.color}"></span>
+								<span class="flex-1 truncate">{tag.name}</span>
+								<span class="text-[11px] font-semibold tabular-nums {activeFilter === tag.id ? 'text-primary' : 'text-text-light'}">{getTagFileCount(tag.id)}</span>
 							</button>
+
+							<!-- Context menu -->
 							<Popover.Root bind:open={
-								() => colorPickerTagId === tag.id,
-								(v) => { colorPickerTagId = v ? tag.id : null; }
+								() => menuOpenTagId === tag.id,
+								(v) => { menuOpenTagId = v ? tag.id : null; }
 							}>
 								<Popover.Trigger>
 									{#snippet child({ props })}
 										<button
 											{...props}
 											type="button"
-											class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs hover:bg-accent"
+											class="absolute right-1 rounded p-1 opacity-0 transition-opacity hover:bg-accent group-hover:opacity-100"
 										>
-											{lang[interfaceLanguage.current].changeColor}
+											<Dots class="h-3.5 w-3.5" />
 										</button>
 									{/snippet}
 								</Popover.Trigger>
-								<Popover.Content class="w-auto p-2" side="right">
-									<div class="grid grid-cols-6 gap-1">
-										{#each TAG_COLORS as color}
-											<button
-												type="button"
-												class={cn(
-													'h-6 w-6 rounded-full transition-transform hover:scale-110',
-													tag.color === color && 'ring-2 ring-foreground ring-offset-2'
-												)}
-												style="background-color: {color}"
-												onclick={() => handleColorChange(tag, color)}
-											></button>
-										{/each}
-									</div>
+								<Popover.Content class="w-40 p-1" align="start">
+									<button
+										type="button"
+										class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs hover:bg-accent"
+										onclick={() => startRename(tag)}
+									>
+										{lang[interfaceLanguage.current].rename}
+									</button>
+									<Popover.Root bind:open={
+										() => colorPickerTagId === tag.id,
+										(v) => { colorPickerTagId = v ? tag.id : null; }
+									}>
+										<Popover.Trigger>
+											{#snippet child({ props })}
+												<button
+													{...props}
+													type="button"
+													class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs hover:bg-accent"
+												>
+													{lang[interfaceLanguage.current].changeColor}
+												</button>
+											{/snippet}
+										</Popover.Trigger>
+										<Popover.Content class="w-auto p-2" side="right">
+											<div class="grid grid-cols-6 gap-1">
+												{#each TAG_COLORS as color}
+													<button
+														type="button"
+														class={cn(
+															'h-6 w-6 rounded-full transition-transform hover:scale-110',
+															tag.color === color && 'ring-2 ring-foreground ring-offset-2'
+														)}
+														style="background-color: {color}"
+														onclick={() => handleColorChange(tag, color)}
+													></button>
+												{/each}
+											</div>
+										</Popover.Content>
+									</Popover.Root>
+									<button
+										type="button"
+										class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs text-destructive hover:bg-destructive/10"
+										onclick={() => { deleteTagId = tag.id; menuOpenTagId = null; }}
+									>
+										{lang[interfaceLanguage.current].deleteTag}
+									</button>
 								</Popover.Content>
 							</Popover.Root>
-							<button
-								type="button"
-								class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs text-destructive hover:bg-destructive/10"
-								onclick={() => { deleteTagId = tag.id; menuOpenTagId = null; }}
-							>
-								{lang[interfaceLanguage.current].deleteTag}
-							</button>
-						</Popover.Content>
-					</Popover.Root>
-				</div>
-			{/if}
-		{/each}
+						</div>
+					{/if}
+				</li>
+			{/each}
+		</ul>
 	</div>
 
-	<!-- Add tag -->
-	<div class="mt-2 border-t pt-2">
+	<!-- Add tag footer -->
+	<div class="border-t p-1.5">
 		{#if isAdding}
 			<form
 				class="flex items-center gap-1 px-1"
@@ -289,7 +307,7 @@
 		{:else}
 			<button
 				type="button"
-				class="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-xs text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
+				class="flex w-full items-center gap-1.5 rounded-md border border-dashed border-border px-2.5 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:border-lavender hover:bg-lavender-lighter hover:text-primary"
 				onclick={() => (isAdding = true)}
 			>
 				<Plus class="h-3.5 w-3.5" />