includio-cms 0.1.3 → 0.5.0

package/dist/admin/client/collection/collection-view.svelte.d.ts

@@ -1,14 +1,15 @@
 import type { SortingState } from '@tanstack/table-core';
+import type { EntryStatus } from '../../../types/entries.js';
 export type ViewMode = 'list' | 'grid';
 export type DateFormat = 'relative' | 'absolute';
-export type ActiveTab = 'active' | 'archived';
+export type StatusFilter = EntryStatus | 'all' | null;
 export interface CollectionViewState {
     viewMode: ViewMode;
     dateFormat: DateFormat;
     pageSize: number;
     sorting: SortingState;
     pageIndex: number;
-    activeTab: ActiveTab;
+    statusFilter: StatusFilter;
 }
 export declare function createCollectionViewState(collectionSlug: string): {
     viewMode: ViewMode;
@@ -16,5 +17,5 @@ export declare function createCollectionViewState(collectionSlug: string): {
     pageSize: number;
     sorting: SortingState;
     pageIndex: number;
-    activeTab: ActiveTab;
+    statusFilter: StatusFilter;
 };

package/dist/admin/client/collection/collection-view.svelte.js

@@ -4,7 +4,7 @@ const DEFAULT_STATE = {
     pageSize: 10,
     sorting: [],
     pageIndex: 0,
-    activeTab: 'active'
+    statusFilter: null
 };
 function getStorageKey(collectionSlug) {
     return `includio-collection-${collectionSlug}-view`;
@@ -16,6 +16,10 @@ function loadState(collectionSlug) {
         const stored = localStorage.getItem(getStorageKey(collectionSlug));
         if (stored) {
             const parsed = JSON.parse(stored);
+            // Migration: drop old activeTab key
+            if ('activeTab' in parsed) {
+                delete parsed.activeTab;
+            }
             return { ...DEFAULT_STATE, ...parsed };
         }
     }
@@ -72,11 +76,11 @@ export function createCollectionViewState(collectionSlug) {
         set pageIndex(value) {
             state.pageIndex = value;
         },
-        get activeTab() {
-            return state.activeTab;
+        get statusFilter() {
+            return state.statusFilter;
         },
-        set activeTab(value) {
-            state.activeTab = value;
+        set statusFilter(value) {
+            state.statusFilter = value;
             state.pageIndex = 0;
         }
     };

package/dist/admin/client/collection/collection.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import Plus from '@tabler/icons-svelte/icons/plus';
-	import Button from '../../../components/ui/button/button.svelte';
 	import { goto } from '$app/navigation';
 	import { getRemotes } from '../../context/remotes.js';
 	import CollectionEntries from './collection-entries.svelte';
@@ -13,9 +11,9 @@
 	const remotes = getRemotes();
 	const interfaceLanguage = useInterfaceLanguage();
 
-	const lang: Record<InterfaceLanguage, { add: string }> = {
-		en: { add: 'Create new' },
-		pl: { add: 'Dodaj' }
+	const lang: Record<InterfaceLanguage, { add: string; collections: string }> = {
+		en: { add: 'Create new', collections: 'Collections' },
+		pl: { add: 'Dodaj', collections: 'Kolekcje' }
 	};
 
 	type Props = {
@@ -39,7 +37,10 @@
 	$effect(() => {
 		breadcrumbs.state = [
 			{
-				label: entryCount !== null ? `${collectionLabel} (${entryCount})` : collectionLabel
+				label: lang[interfaceLanguage.current].collections
+			},
+			{
+				label: collectionLabel
 			}
 		];
 	});
@@ -51,10 +52,19 @@
 	});
 </script>
 
-<div class="p-4 md:p-6">
-	<div
-		class="overflow-hidden rounded-2xl border border-slate-200/50 bg-white/80 shadow-lg backdrop-blur-xl dark:border-white/10 dark:bg-slate-900/60"
-	>
-		<CollectionEntries {collection} {onCreateEntry} addLabel={lang[interfaceLanguage.current].add} />
-	</div>
+<div class="p-5 pb-24 md:p-7">
+	<header class="mb-6">
+		<div class="mb-1 flex items-center gap-3">
+			<h1 class="text-foreground text-2xl font-bold">{collectionLabel}</h1>
+			{#if entryCount !== null}
+				<span
+					class="bg-muted text-muted-foreground inline-flex items-center justify-center rounded-full px-2.5 py-0.5 text-xs font-semibold"
+				>
+					{entryCount}
+				</span>
+			{/if}
+		</div>
+	</header>
+
+	<CollectionEntries {collection} {onCreateEntry} addLabel={lang[interfaceLanguage.current].add} />
 </div>

package/dist/admin/client/collection/data-table.svelte

@@ -13,6 +13,8 @@
 	} from '@tanstack/table-core';
 	import { createSvelteTable, FlexRender } from '../../../components/ui/data-table/index.js';
 	import * as Table from '../../../components/ui/table/index.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
 
 	type DataTableProps<TData, TValue> = {
 		columns: ColumnDef<TData, TValue>[];
@@ -32,6 +34,7 @@
 		manualPagination?: boolean;
 		pageCount?: number;
 		rowCount?: number;
+		emptyMessage?: string;
 	};
 
 	let {
@@ -51,9 +54,17 @@
 		tableRef,
 		manualPagination: manualPaginationProp = false,
 		pageCount: pageCountProp,
-		rowCount: rowCountProp
+		rowCount: rowCountProp,
+		emptyMessage
 	}: DataTableProps<TData, TValue> = $props();
 
+	const interfaceLanguage = useInterfaceLanguage();
+
+	const defaultEmptyMessages: Record<InterfaceLanguage, string> = {
+		en: 'No results.',
+		pl: 'Brak wyników.'
+	};
+
 	const table = createSvelteTable({
 		get data() {
 			return data;
@@ -102,41 +113,41 @@
 	});
 </script>
 
-<div class="overflow-hidden rounded-2xl">
-	<Table.Root>
-		<Table.Header>
-			{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
-				<Table.Row>
-					{#each headerGroup.headers as header (header.id)}
-						<Table.Head>
-							{#if !header.isPlaceholder}
-								<FlexRender
-									content={header.column.columnDef.header}
-									context={header.getContext()}
-								/>
-							{/if}
-						</Table.Head>
-					{/each}
-				</Table.Row>
-			{/each}
-		</Table.Header>
-		<Table.Body>
-			{#each table.getRowModel().rows as row (row.id)}
-				<Table.Row
-					data-state={row.getIsSelected() && 'selected'}
-					class="hover:bg-slate-50 dark:hover:bg-slate-800/50"
-				>
-					{#each row.getVisibleCells() as cell (cell.id)}
-						<Table.Cell>
-							<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
-						</Table.Cell>
-					{/each}
-				</Table.Row>
-			{:else}
-				<Table.Row>
-					<Table.Cell colspan={columns.length} class="h-24 text-center">No results.</Table.Cell>
-				</Table.Row>
-			{/each}
-		</Table.Body>
-	</Table.Root>
-</div>
+<Table.Root>
+	<Table.Header class="bg-muted sticky top-0 z-10">
+		{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+			<Table.Row class="border-b-0 hover:bg-transparent">
+				{#each headerGroup.headers as header (header.id)}
+					<Table.Head class="text-[11px] font-bold uppercase tracking-[0.04em] text-muted-foreground h-10">
+						{#if !header.isPlaceholder}
+							<FlexRender
+								content={header.column.columnDef.header}
+								context={header.getContext()}
+							/>
+						{/if}
+					</Table.Head>
+				{/each}
+			</Table.Row>
+		{/each}
+	</Table.Header>
+	<Table.Body>
+		{#each table.getRowModel().rows as row, i (row.id)}
+			<Table.Row
+				data-state={row.getIsSelected() && 'selected'}
+				class="hover:bg-lavender-lighter/50 data-[state=selected]:bg-lavender-lighter/30 {i === table.getRowModel().rows.length - 1 ? 'border-b-0' : ''}"
+			>
+				{#each row.getVisibleCells() as cell (cell.id)}
+					<Table.Cell class="py-3">
+						<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+					</Table.Cell>
+				{/each}
+			</Table.Row>
+		{:else}
+			<Table.Row>
+				<Table.Cell colspan={columns.length} class="h-24 text-center text-muted-foreground">
+					{emptyMessage ?? defaultEmptyMessages[interfaceLanguage.current]}
+				</Table.Cell>
+			</Table.Row>
+		{/each}
+	</Table.Body>
+</Table.Root>

package/dist/admin/client/collection/data-table.svelte.d.ts

@@ -17,6 +17,7 @@ type DataTableProps<TData, TValue> = {
     manualPagination?: boolean;
     pageCount?: number;
     rowCount?: number;
+    emptyMessage?: string;
 };
 declare function $$render<TData, TValue>(): {
     props: DataTableProps<TData, TValue>;

package/dist/admin/client/collection/date-cell.svelte

@@ -1,25 +1,27 @@
 <script lang="ts">
-	import { formatRelativeDate, formatAbsoluteDate } from '../../utils/formatDate.js';
+	import { formatRelativeDate, formatAbsoluteDate, formatShortDate } from '../../utils/formatDate.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 
 	type Props = {
 		date: Date | string;
-		format: 'relative' | 'absolute';
+		format: 'relative' | 'absolute' | 'short';
 	};
 
-	let { date, format }: Props = $props();
+	let { date, format = 'short' }: Props = $props();
 
 	const interfaceLanguage = useInterfaceLanguage();
 
 	const formattedDate = $derived(
 		format === 'relative'
 			? formatRelativeDate(date, interfaceLanguage.current)
-			: formatAbsoluteDate(date, interfaceLanguage.current)
+			: format === 'short'
+				? formatShortDate(date, interfaceLanguage.current)
+				: formatAbsoluteDate(date, interfaceLanguage.current)
 	);
 
 	const absoluteDate = $derived(formatAbsoluteDate(date, interfaceLanguage.current));
 </script>
 
-<span title={absoluteDate} class="text-muted-foreground text-sm">
+<span title={absoluteDate} class="text-muted-foreground text-sm whitespace-nowrap">
 	{formattedDate}
 </span>

package/dist/admin/client/collection/date-cell.svelte.d.ts

@@ -1,6 +1,6 @@
 type Props = {
     date: Date | string;
-    format: 'relative' | 'absolute';
+    format: 'relative' | 'absolute' | 'short';
 };
 declare const DateCell: import("svelte").Component<Props, {}, "">;
 type DateCell = ReturnType<typeof DateCell>;

package/dist/admin/client/collection/empty-state.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import FileText from '@tabler/icons-svelte/icons/file-text';
+	import Button from '../../../components/ui/button/button.svelte';
+	import Plus from '@tabler/icons-svelte/icons/plus';
+
+	type Props = {
+		title: string;
+		description: string;
+		ctaLabel?: string;
+		onCta?: () => void;
+	};
+
+	let { title, description, ctaLabel, onCta }: Props = $props();
+</script>
+
+<div class="flex flex-col items-center justify-center py-16 px-4 text-center">
+	<div class="flex items-center justify-center w-[72px] h-[72px] rounded-2xl bg-muted mb-5">
+		<FileText class="size-8 text-muted-foreground" />
+	</div>
+	<h3 class="text-lg font-bold text-foreground mb-2">{title}</h3>
+	<p class="text-sm text-muted-foreground max-w-[360px] mb-6">{description}</p>
+	{#if ctaLabel && onCta}
+		<Button variant="default" onclick={onCta}>
+			<Plus class="size-4 mr-1.5" />
+			{ctaLabel}
+		</Button>
+	{/if}
+</div>

package/dist/admin/client/collection/empty-state.svelte.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    title: string;
+    description: string;
+    ctaLabel?: string;
+    onCta?: () => void;
+};
+declare const EmptyState: import("svelte").Component<Props, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/admin/client/collection/entry-link.svelte

@@ -2,11 +2,17 @@
 	type Props = {
 		name: string;
 		url: string;
+		slug?: string;
 	};
 
-	let { name, url }: Props = $props();
+	let { name, url, slug }: Props = $props();
 </script>
 
-<a href={url} class="hover:underline">
-	{name}
-</a>
+<div>
+	<a href={url} class="font-medium text-foreground hover:text-primary hover:underline">
+		{name}
+	</a>
+	{#if slug}
+		<div class="text-[11px] text-muted-foreground font-mono mt-0.5 truncate max-w-[200px]">/{slug}</div>
+	{/if}
+</div>

package/dist/admin/client/collection/entry-link.svelte.d.ts

@@ -1,6 +1,7 @@
 type Props = {
     name: string;
     url: string;
+    slug?: string;
 };
 declare const EntryLink: import("svelte").Component<Props, {}, "">;
 type EntryLink = ReturnType<typeof EntryLink>;

package/dist/admin/client/collection/grid-view.svelte

@@ -4,11 +4,12 @@
 	import DateCell from './date-cell.svelte';
 	import SelectionCell from './selection-cell.svelte';
 	import Photo from '@tabler/icons-svelte/icons/photo';
-	import type { DateFormat } from './collection-view.svelte.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 
 	export interface GridItem {
 		id: string;
 		name: string;
+		slug?: string;
 		status: EntryStatus;
 		url: string;
 		thumbnail: string | null;
@@ -17,14 +18,14 @@
 
 	type Props = {
 		items: GridItem[];
-		dateFormat: DateFormat;
 		enableSelection?: boolean;
 		selectedIds: Set<string>;
 		onSelectionChange: (ids: Set<string>) => void;
 	};
 
-	let { items, dateFormat, enableSelection = false, selectedIds, onSelectionChange }: Props =
-		$props();
+	const interfaceLanguage = useInterfaceLanguage();
+
+	let { items, enableSelection = false, selectedIds, onSelectionChange }: Props = $props();
 
 	function toggleSelection(id: string) {
 		const newSet = new Set(selectedIds);
@@ -37,15 +38,15 @@
 	}
 </script>
 
-<div class="grid grid-cols-2 gap-4 p-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
+<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
 	{#each items as item (item.id)}
 		<a
 			href={item.url}
-			class="group relative flex flex-col overflow-hidden rounded-xl border border-slate-200 bg-white transition-all hover:border-slate-300 hover:shadow-md dark:border-slate-700 dark:bg-slate-800 dark:hover:border-slate-600"
+			class="group border-border bg-card hover:bg-lavender-lighter/40 relative flex flex-col overflow-hidden rounded-xl border transition-all hover:shadow-md"
 		>
 			{#if enableSelection}
 				<div
-					class="absolute left-2 top-2 z-10"
+					class="absolute top-2 left-2 z-10"
 					onclick={(e) => {
 						e.preventDefault();
 						e.stopPropagation();
@@ -68,31 +69,28 @@
 				</div>
 			{/if}
 
-			<div
-				class="flex aspect-video items-center justify-center bg-slate-100 dark:bg-slate-700"
-			>
+			<div class="bg-muted flex aspect-video items-center justify-center">
 				{#if item.thumbnail}
-					<img
-						src={item.thumbnail}
-						alt={item.name}
-						class="h-full w-full object-cover"
-					/>
+					<img src={item.thumbnail} alt={item.name} class="h-full w-full object-cover" />
 				{:else}
 					<Photo class="text-muted-foreground size-8 opacity-30" />
 				{/if}
 			</div>
 
 			<div class="flex flex-1 flex-col gap-1 p-3">
-				<div class="flex items-start justify-between gap-2">
-					<h3
-						class="line-clamp-2 flex-1 text-sm font-medium leading-tight group-hover:text-primary"
-					>
-						{item.name}
-					</h3>
-				</div>
+				<h3
+					class="text-foreground group-hover:text-primary line-clamp-2 text-sm leading-tight font-medium"
+				>
+					{item.name}
+				</h3>
+				{#if item.slug}
+					<div class="text-muted-foreground truncate font-mono text-[10px]">
+						/{item.slug?.[interfaceLanguage.current]}
+					</div>
+				{/if}
 				<div class="mt-auto flex flex-col items-start gap-1.5 pt-2">
 					<StatusBadge status={item.status} />
-					<DateCell date={item.updatedAt} format={dateFormat} />
+					<DateCell date={item.updatedAt} format="short" />
 				</div>
 			</div>
 		</a>

package/dist/admin/client/collection/grid-view.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { EntryStatus } from '../../../types/entries.js';
-import type { DateFormat } from './collection-view.svelte.js';
 export interface GridItem {
     id: string;
     name: string;
+    slug?: string;
     status: EntryStatus;
     url: string;
     thumbnail: string | null;
@@ -10,7 +10,6 @@ export interface GridItem {
 }
 type Props = {
     items: GridItem[];
-    dateFormat: DateFormat;
     enableSelection?: boolean;
     selectedIds: Set<string>;
     onSelectionChange: (ids: Set<string>) => void;

package/dist/admin/client/collection/row-actions.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import DotsVertical from '@tabler/icons-svelte/icons/dots-vertical';
+	import ExternalLink from '@tabler/icons-svelte/icons/external-link';
+	import Archive from '@tabler/icons-svelte/icons/archive';
+	import Trash from '@tabler/icons-svelte/icons/trash';
+	import Button from '../../../components/ui/button/button.svelte';
+	import * as DropdownMenu from '../../../components/ui/dropdown-menu/index.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
+
+	type Props = {
+		entryUrl: string;
+		entryName: string;
+		onArchive: () => void;
+		onDelete: () => void;
+	};
+
+	let { entryUrl, entryName, onArchive, onDelete }: Props = $props();
+
+	const interfaceLanguage = useInterfaceLanguage();
+
+	const lang: Record<InterfaceLanguage, { open: string; archive: string; delete: string; moreActions: string }> = {
+		en: { open: 'Open', archive: 'Archive', delete: 'Delete', moreActions: 'More actions for' },
+		pl: { open: 'Otwórz', archive: 'Archiwizuj', delete: 'Usuń', moreActions: 'Więcej akcji dla' }
+	};
+
+	const t = $derived(lang[interfaceLanguage.current]);
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger>
+		{#snippet child({ props })}
+			<Button
+				{...props}
+				variant="ghost"
+				size="icon"
+				class="h-8 w-8 text-muted-foreground hover:text-foreground"
+				aria-label="{t.moreActions} {entryName}"
+				onclick={(e) => e.stopPropagation()}
+			>
+				<DotsVertical class="size-4" />
+			</Button>
+		{/snippet}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content align="end" class="w-40">
+		<DropdownMenu.Item href={entryUrl}>
+			<ExternalLink class="mr-2 size-4" />
+			{t.open}
+		</DropdownMenu.Item>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item onclick={onArchive}>
+			<Archive class="mr-2 size-4" />
+			{t.archive}
+		</DropdownMenu.Item>
+		<DropdownMenu.Item class="text-destructive focus:text-destructive" onclick={onDelete}>
+			<Trash class="mr-2 size-4" />
+			{t.delete}
+		</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>

package/dist/admin/client/collection/row-actions.svelte.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    entryUrl: string;
+    entryName: string;
+    onArchive: () => void;
+    onDelete: () => void;
+};
+declare const RowActions: import("svelte").Component<Props, {}, "">;
+type RowActions = ReturnType<typeof RowActions>;
+export default RowActions;

package/dist/admin/client/collection/status-badge.svelte

@@ -26,18 +26,17 @@
 		}
 	};
 
-	const statusClasses: Record<EntryStatus, string> = {
-		published: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',
-		draft: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300',
-		scheduled: 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400',
-		archived: 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400'
+	const statusConfig: Record<EntryStatus, { dot: string; classes: string }> = {
+		published: { dot: '●', classes: 'bg-success-bg text-success' },
+		draft: { dot: '○', classes: 'bg-muted text-muted-foreground' },
+		scheduled: { dot: '◐', classes: 'bg-warning-bg text-warning' },
+		archived: { dot: '◎', classes: 'bg-muted text-muted-foreground' }
 	};
 </script>
 
 <span
-	class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium {statusClasses[
-		status
-	]}"
+	class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-[11px] font-semibold leading-none {statusConfig[status].classes}"
 >
+	<span class="text-[9px]" aria-hidden="true">{statusConfig[status].dot}</span>
 	{labels[interfaceLanguage.current][status]}
 </span>