includio-cms 0.0.68 → 0.1.0

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

@@ -117,6 +117,46 @@
 	let deleteDialogOpen = $state(false);
 	let pendingDeleteId = $state<string | null>(null);
 
+	// Determine if we need fetch-all fallback (search active or sorting by name)
+	const isSortingByName = $derived(
+		viewState.sorting.length > 0 && viewState.sorting[0].id === 'name'
+	);
+	const useServerPagination = $derived(!searchQuery && !isSortingByName);
+
+	// Build orderBy from sorting state for server-side mode
+	const serverOrderBy = $derived.by(() => {
+		if (!viewState.sorting.length) return undefined;
+		const { id, desc } = viewState.sorting[0];
+		if (id === 'createdAt' || id === 'updatedAt') {
+			return { column: id as 'createdAt' | 'updatedAt', direction: (desc ? 'desc' : 'asc') as 'asc' | 'desc' };
+		}
+		return undefined;
+	});
+
+	// Server-side query params
+	const activeQueryParams = $derived(
+		useServerPagination
+			? {
+					slug: collection.slug,
+					limit: viewState.pageSize,
+					offset: viewState.pageIndex * viewState.pageSize,
+					orderBy: serverOrderBy
+				}
+			: { slug: collection.slug }
+	);
+
+	const archivedQueryParams = $derived(
+		useServerPagination
+			? {
+					slug: collection.slug,
+					onlyArchived: true as const,
+					limit: viewState.pageSize,
+					offset: viewState.pageIndex * viewState.pageSize,
+					orderBy: serverOrderBy
+				}
+			: { slug: collection.slug, onlyArchived: true as const }
+	);
+
 	const columns: ColumnDef<CollectionDataTableRow>[] = $derived([
 		{
 			id: 'select',
@@ -232,13 +272,15 @@
 		}
 	]);
 
-	let activeTab = $state('active');
+	function refreshQueries() {
+		remotes.getRawEntries(activeQueryParams).refresh();
+		remotes.getRawEntries(archivedQueryParams).refresh();
+	}
 
 	async function handleRestore(id: string) {
 		await remotes.unarchiveEntryCommand(id);
 		toast.success(lang[interfaceLanguage.current].entryRestored);
-		remotes.getRawEntries({ slug: collection.slug, onlyArchived: true }).refresh();
-		remotes.getRawEntries({ slug: collection.slug }).refresh();
+		refreshQueries();
 	}
 
 	function handleDelete(id: string) {
@@ -250,7 +292,7 @@
 		if (!pendingDeleteId) return;
 		await remotes.deleteEntryCommand(pendingDeleteId);
 		toast.success(lang[interfaceLanguage.current].entryDeleted);
-		remotes.getRawEntries({ slug: collection.slug, onlyArchived: true }).refresh();
+		refreshQueries();
 		deleteDialogOpen = false;
 		pendingDeleteId = null;
 	}
@@ -319,12 +361,18 @@
 		}
 		toast.success(lang[interfaceLanguage.current].entriesArchived);
 		rowSelection = {};
-		remotes.getRawEntries({ slug: collection.slug }).refresh();
-		remotes.getRawEntries({ slug: collection.slug, onlyArchived: true }).refresh();
+		refreshQueries();
 	}
+
 </script>
 
-<Tabs.Root bind:value={activeTab} class="w-full">
+<Tabs.Root
+	value={viewState.activeTab}
+	onValueChange={(v) => {
+		if (v === 'active' || v === 'archived') viewState.activeTab = v;
+	}}
+	class="w-full"
+>
 	<div class="flex items-center justify-between border-b border-slate-200/50 px-4 py-3 dark:border-white/10">
 		<Tabs.List class="h-auto gap-1 bg-transparent p-0">
 			<Tabs.Trigger value="active" class="rounded-lg px-3 py-1.5 text-sm font-medium data-[state=active]:bg-slate-100 data-[state=active]:text-slate-900 dark:data-[state=active]:bg-slate-800 dark:data-[state=active]:text-white">{lang[interfaceLanguage.current].active}</Tabs.Trigger>
@@ -336,57 +384,94 @@
 	</div>
 
 	<Tabs.Content value="active" class="mt-0">
-		{#await remotes.getRawEntries({ slug: collection.slug }) then entries}
-			{@const items = entries
-				.filter((entry) => entry.archivedAt === null)
-				.map(mapEntryToRow)}
-			{@const filteredItems = searchQuery
-				? items.filter((item) => item.searchText.includes(searchQuery.toLowerCase()))
-				: items}
-			{@const totalItems = filteredItems.length}
+		{#await remotes.getRawEntries(activeQueryParams) then result}
+			{@const allRows = result.entries.map(mapEntryToRow)}
+			{@const items = useServerPagination
+				? allRows
+				: (() => {
+						let filtered = searchQuery
+							? allRows.filter((item) => item.searchText.includes(searchQuery.toLowerCase()))
+							: allRows;
+						return sortItems(filtered, viewState.sorting);
+					})()}
+			{@const totalItems = useServerPagination ? result.total : items.length}
 			{@const pageCount = Math.ceil(totalItems / viewState.pageSize)}
 
 			<TableToolbar
 				{searchQuery}
-				onSearchChange={(q) => (searchQuery = q)}
+				onSearchChange={(q) => {
+					searchQuery = q;
+					viewState.pageIndex = 0;
+				}}
 				viewMode={viewState.viewMode}
 				onViewModeChange={(m) => (viewState.viewMode = m)}
 				dateFormat={viewState.dateFormat}
 				onDateFormatChange={(f) => (viewState.dateFormat = f)}
 				{selectedCount}
-				onBulkArchive={() => handleBulkArchive(sortItems(filteredItems, viewState.sorting))}
+				onBulkArchive={() => handleBulkArchive(items)}
 			/>
 
 			{#if viewState.viewMode === 'list'}
-				<DataTable
-					data={sortItems(filteredItems, viewState.sorting)}
-					{columns}
-					enableSorting
-					enableFiltering
-					enableSelection
-					enablePagination
-					sorting={viewState.sorting}
-					onSortingChange={(s) => (viewState.sorting = s)}
-					{rowSelection}
-					onRowSelectionChange={(s) => (rowSelection = s)}
-					pagination={{ pageIndex: 0, pageSize: viewState.pageSize }}
-					tableRef={(t) => (tableInstance = t)}
-				/>
+				{#if useServerPagination}
+					<DataTable
+						data={items}
+						{columns}
+						enableSorting
+						enableFiltering
+						enableSelection
+						enablePagination
+						manualPagination={true}
+						pageCount={pageCount}
+						rowCount={totalItems}
+						sorting={viewState.sorting}
+						onSortingChange={(s) => (viewState.sorting = s)}
+						{rowSelection}
+						onRowSelectionChange={(s) => (rowSelection = s)}
+						pagination={{ pageIndex: viewState.pageIndex, pageSize: viewState.pageSize }}
+						onPaginationChange={(p) => {
+							viewState.pageIndex = p.pageIndex;
+						}}
+						tableRef={(t) => (tableInstance = t)}
+					/>
+				{:else}
+					<DataTable
+						data={items}
+						{columns}
+						enableSorting
+						enableFiltering
+						enableSelection
+						enablePagination
+						sorting={viewState.sorting}
+						onSortingChange={(s) => (viewState.sorting = s)}
+						{rowSelection}
+						onRowSelectionChange={(s) => (rowSelection = s)}
+						pagination={{ pageIndex: viewState.pageIndex, pageSize: viewState.pageSize }}
+						onPaginationChange={(p) => {
+							viewState.pageIndex = p.pageIndex;
+						}}
+						tableRef={(t) => (tableInstance = t)}
+					/>
+				{/if}
 
 				<TablePagination
-					pageIndex={tableInstance?.getState().pagination.pageIndex ?? 0}
+					pageIndex={viewState.pageIndex}
 					pageSize={viewState.pageSize}
 					{pageCount}
 					{totalItems}
-					onPageChange={(p) => tableInstance?.setPageIndex(p)}
+					onPageChange={(p) => (viewState.pageIndex = p)}
 					onPageSizeChange={(s) => {
 						viewState.pageSize = s;
-						tableInstance?.setPageSize(s);
 					}}
 				/>
 			{:else}
+				{@const displayItems = useServerPagination
+					? items
+					: items.slice(
+							viewState.pageIndex * viewState.pageSize,
+							(viewState.pageIndex + 1) * viewState.pageSize
+						)}
 				<GridView
-					items={sortItems(filteredItems, viewState.sorting).map((item) => ({
+					items={displayItems.map((item) => ({
 						id: item.id,
 						name: item.name,
 						status: item.status,
@@ -396,12 +481,11 @@
 					}))}
 					dateFormat={viewState.dateFormat}
 					enableSelection
-					selectedIds={new Set(selectedIndices.map((idx) => sortItems(filteredItems, viewState.sorting)[idx]?.id).filter(Boolean))}
+					selectedIds={new Set(selectedIndices.map((idx) => items[idx]?.id).filter(Boolean))}
 					onSelectionChange={(ids) => {
-						const sorted = sortItems(filteredItems, viewState.sorting);
 						const newSelection: RowSelectionState = {};
 						for (const id of ids) {
-							const idx = sorted.findIndex((i) => i.id === id);
+							const idx = items.findIndex((i) => i.id === id);
 							if (idx !== -1) {
 								newSelection[idx] = true;
 							}
@@ -409,20 +493,61 @@
 						rowSelection = newSelection;
 					}}
 				/>
+
+				<TablePagination
+					pageIndex={viewState.pageIndex}
+					pageSize={viewState.pageSize}
+					{pageCount}
+					{totalItems}
+					onPageChange={(p) => (viewState.pageIndex = p)}
+					onPageSizeChange={(s) => {
+						viewState.pageSize = s;
+					}}
+				/>
 			{/if}
 		{/await}
 	</Tabs.Content>
 
 	<Tabs.Content value="archived" class="mt-0">
-		{#await remotes.getRawEntries({ slug: collection.slug, onlyArchived: true }) then entries}
-			{@const items = entries.map((entry) => ({
+		{#await remotes.getRawEntries(archivedQueryParams) then result}
+			{@const items = result.entries.map((entry) => ({
 				...mapEntryToRow(entry),
 				onRestore: () => handleRestore(entry.id),
 				onDelete: () => handleDelete(entry.id)
 			}))}
-			<div class="p-4">
-				<DataTable data={items} columns={archivedColumns} />
-			</div>
+			{@const totalItems = result.total}
+			{@const pageCount = Math.ceil(totalItems / viewState.pageSize)}
+
+			{#if useServerPagination}
+				<div class="p-4">
+					<DataTable
+						data={items}
+						columns={archivedColumns}
+						manualPagination={true}
+						pageCount={pageCount}
+						rowCount={totalItems}
+						enablePagination
+						pagination={{ pageIndex: viewState.pageIndex, pageSize: viewState.pageSize }}
+						onPaginationChange={(p) => {
+							viewState.pageIndex = p.pageIndex;
+						}}
+					/>
+				</div>
+				<TablePagination
+					pageIndex={viewState.pageIndex}
+					pageSize={viewState.pageSize}
+					{pageCount}
+					{totalItems}
+					onPageChange={(p) => (viewState.pageIndex = p)}
+					onPageSizeChange={(s) => {
+						viewState.pageSize = s;
+					}}
+				/>
+			{:else}
+				<div class="p-4">
+					<DataTable data={items} columns={archivedColumns} />
+				</div>
+			{/if}
 		{/await}
 	</Tabs.Content>
 </Tabs.Root>

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

@@ -1,15 +1,20 @@
 import type { SortingState } from '@tanstack/table-core';
 export type ViewMode = 'list' | 'grid';
 export type DateFormat = 'relative' | 'absolute';
+export type ActiveTab = 'active' | 'archived';
 export interface CollectionViewState {
     viewMode: ViewMode;
     dateFormat: DateFormat;
     pageSize: number;
     sorting: SortingState;
+    pageIndex: number;
+    activeTab: ActiveTab;
 }
 export declare function createCollectionViewState(collectionSlug: string): {
     viewMode: ViewMode;
     dateFormat: DateFormat;
     pageSize: number;
     sorting: SortingState;
+    pageIndex: number;
+    activeTab: ActiveTab;
 };

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

@@ -2,7 +2,9 @@ const DEFAULT_STATE = {
     viewMode: 'list',
     dateFormat: 'relative',
     pageSize: 10,
-    sorting: []
+    sorting: [],
+    pageIndex: 0,
+    activeTab: 'active'
 };
 function getStorageKey(collectionSlug) {
     return `includio-collection-${collectionSlug}-view`;
@@ -42,25 +44,40 @@ export function createCollectionViewState(collectionSlug) {
             return state.viewMode;
         },
         set viewMode(value) {
-            state = { ...state, viewMode: value };
+            state.viewMode = value;
         },
         get dateFormat() {
             return state.dateFormat;
         },
         set dateFormat(value) {
-            state = { ...state, dateFormat: value };
+            state.dateFormat = value;
         },
         get pageSize() {
             return state.pageSize;
         },
         set pageSize(value) {
-            state = { ...state, pageSize: value };
+            state.pageSize = value;
+            state.pageIndex = 0;
         },
         get sorting() {
             return state.sorting;
         },
         set sorting(value) {
-            state = { ...state, sorting: value };
+            state.sorting = value;
+            state.pageIndex = 0;
+        },
+        get pageIndex() {
+            return state.pageIndex;
+        },
+        set pageIndex(value) {
+            state.pageIndex = value;
+        },
+        get activeTab() {
+            return state.activeTab;
+        },
+        set activeTab(value) {
+            state.activeTab = value;
+            state.pageIndex = 0;
         }
     };
 }

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

@@ -45,8 +45,8 @@
 	});
 
 	$effect(() => {
-		remotes.getRawEntries({ slug: collection.slug }).then((entries) => {
-			entryCount = entries.filter((e) => e.archivedAt === null).length;
+		remotes.getRawEntries({ slug: collection.slug }).then(({ total }) => {
+			entryCount = total;
 		});
 	});
 </script>

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

@@ -29,6 +29,9 @@
 		pagination?: PaginationState;
 		onPaginationChange?: (pagination: PaginationState) => void;
 		tableRef?: (table: TableType<TData>) => void;
+		manualPagination?: boolean;
+		pageCount?: number;
+		rowCount?: number;
 	};
 
 	let {
@@ -45,7 +48,10 @@
 		onRowSelectionChange,
 		pagination = { pageIndex: 0, pageSize: 10 },
 		onPaginationChange,
-		tableRef
+		tableRef,
+		manualPagination: manualPaginationProp = false,
+		pageCount: pageCountProp,
+		rowCount: rowCountProp
 	}: DataTableProps<TData, TValue> = $props();
 
 	const table = createSvelteTable({
@@ -81,8 +87,14 @@
 			onPaginationChange?.(newPagination);
 		},
 		globalFilterFn: 'includesString',
-		manualPagination: false,
-		manualSorting: true
+		manualPagination: manualPaginationProp,
+		manualSorting: true,
+		get pageCount() {
+			return pageCountProp;
+		},
+		get rowCount() {
+			return rowCountProp;
+		}
 	});
 
 	$effect(() => {

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

@@ -14,6 +14,9 @@ type DataTableProps<TData, TValue> = {
     pagination?: PaginationState;
     onPaginationChange?: (pagination: PaginationState) => void;
     tableRef?: (table: TableType<TData>) => void;
+    manualPagination?: boolean;
+    pageCount?: number;
+    rowCount?: number;
 };
 declare function $$render<TData, TValue>(): {
     props: DataTableProps<TData, TValue>;

package/dist/admin/client/entry/entry.svelte

@@ -74,6 +74,8 @@
 			saveDraftToast: string;
 			publishToast: string;
 			scheduledToast: string;
+			saveFailed: string;
+			cannotPublish: string;
 		}
 	> = {
 		en: {
@@ -81,14 +83,18 @@
 			saveToast: 'Entry saved successfully',
 			saveDraftToast: 'Draft saved successfully',
 			publishToast: 'Entry published successfully',
-			scheduledToast: 'Entry scheduled successfully'
+			scheduledToast: 'Entry scheduled successfully',
+			saveFailed: 'Save failed',
+			cannotPublish: 'Cannot publish'
 		},
 		pl: {
 			entryArchived: 'Wpis został zarchiwizowany pomyślnie',
 			saveToast: 'Wpis został pomyślnie zapisany',
 			saveDraftToast: 'Wersja robocza została pomyślnie zapisana',
 			publishToast: 'Wpis został pomyślnie opublikowany',
-			scheduledToast: 'Wpis został zaplanowany pomyślnie'
+			scheduledToast: 'Wpis został zaplanowany pomyślnie',
+			saveFailed: 'Błąd zapisu',
+			cannotPublish: 'Nie można opublikować'
 		}
 	};
 
@@ -199,7 +205,7 @@
 			} catch (e) {
 				console.error('Save error:', e);
 				saveStatus = 'error';
-				toast.error(interfaceLanguage.current === 'pl' ? 'Błąd zapisu' : 'Save failed', {
+				toast.error(lang[interfaceLanguage.current].saveFailed, {
 					description: e instanceof Error ? e.message : undefined
 				});
 			}
@@ -234,16 +240,14 @@
 			} catch (e) {
 				console.error('Publish error:', e);
 				saveStatus = 'error';
-				toast.error(interfaceLanguage.current === 'pl' ? 'Błąd zapisu' : 'Save failed', {
+				toast.error(lang[interfaceLanguage.current].saveFailed, {
 					description: e instanceof Error ? e.message : undefined
 				});
 			}
 		} else {
 			const errors = flattenErrors(validatedForm.errors, collection.fields);
 			toast.error(
-				interfaceLanguage.current === 'pl'
-					? 'Nie można opublikować'
-					: 'Cannot publish',
+				lang[interfaceLanguage.current].cannotPublish,
 				{
 					description: errors.slice(0, 3).join('\n') + (errors.length > 3 ? '\n...' : ''),
 					duration: 5000

package/dist/admin/client/entry/header/status-badge.svelte

@@ -17,6 +17,7 @@
 			publishedBy: string;
 			createdAt: string;
 			scheduledFor: string;
+			publishedVersion: string;
 		}
 	> = {
 		en: {
@@ -29,7 +30,8 @@
 			publishedAt: 'Published at',
 			publishedBy: 'Published by',
 			createdAt: 'Created at',
-			scheduledFor: 'Scheduled for'
+			scheduledFor: 'Scheduled for',
+			publishedVersion: 'Published version'
 		},
 		pl: {
 			status: {
@@ -41,7 +43,8 @@
 			publishedAt: 'Opublikowano',
 			publishedBy: 'Opublikował',
 			createdAt: 'Utworzono',
-			scheduledFor: 'Zaplanowano na'
+			scheduledFor: 'Zaplanowano na',
+			publishedVersion: 'Opublikowana wersja'
 		}
 	};
 
@@ -152,7 +155,7 @@
 			{#if entry.publishedVersion && entry.publishedVersion.id !== version.id}
 				<div class="border-t pt-2 mt-2">
 					<div class="text-muted-foreground text-xs">
-						{interfaceLanguage.current === 'pl' ? 'Opublikowana wersja' : 'Published version'}: v{entry.publishedVersion.versionNumber}
+						{lang[interfaceLanguage.current].publishedVersion}: v{entry.publishedVersion.versionNumber}
 					</div>
 				</div>
 			{/if}

package/dist/admin/client/entry/header/version-history-sheet.svelte

@@ -22,6 +22,7 @@
 			draft: string;
 			changedFields: string;
 			noChanges: string;
+			versionsCount: string;
 		}
 	> = {
 		en: {
@@ -33,7 +34,8 @@
 			scheduled: 'Scheduled',
 			draft: 'Draft',
 			changedFields: 'Changed fields',
-			noChanges: 'No changes'
+			noChanges: 'No changes',
+			versionsCount: 'versions'
 		},
 		pl: {
 			history: 'Historia wersji',
@@ -44,7 +46,8 @@
 			scheduled: 'Zaplanowana',
 			draft: 'Szkic',
 			changedFields: 'Zmienione pola',
-			noChanges: 'Brak zmian'
+			noChanges: 'Brak zmian',
+			versionsCount: 'wersji'
 		}
 	};
 
@@ -153,7 +156,7 @@
 		<Sheet.Header>
 			<Sheet.Title>{lang[interfaceLanguage.current].history}</Sheet.Title>
 			<Sheet.Description>
-				{sortedVersions.length} {interfaceLanguage.current === 'pl' ? 'wersji' : 'versions'}
+				{sortedVersions.length} {lang[interfaceLanguage.current].versionsCount}
 			</Sheet.Description>
 		</Sheet.Header>
 

package/dist/admin/client/form/form-submissions.svelte

@@ -10,6 +10,7 @@
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
+	import { formatRelativeDate as formatRelativeDateUtil, formatAbsoluteDate as formatAbsoluteDateUtil } from '../../utils/formatDate.js';
 	import type { DateFormat } from '../collection/collection-view.svelte.js';
 	import Checkbox from '../../../components/ui/checkbox/checkbox.svelte';
 	import { getRemotes } from '../../context/remotes.js';
@@ -188,35 +189,11 @@
 	});
 
 	function formatRelativeDate(date: Date): string {
-		const now = new Date();
-		const diff = now.getTime() - date.getTime();
-		const minutes = Math.floor(diff / 60000);
-		const hours = Math.floor(diff / 3600000);
-		const days = Math.floor(diff / 86400000);
-		const weeks = Math.floor(days / 7);
-		const months = Math.floor(days / 30);
-
-		if (minutes < 1) return interfaceLanguage.current === 'pl' ? 'teraz' : 'now';
-		if (minutes < 60)
-			return interfaceLanguage.current === 'pl' ? `${minutes} min temu` : `${minutes} min ago`;
-		if (hours < 24)
-			return interfaceLanguage.current === 'pl' ? `${hours} godz. temu` : `${hours}h ago`;
-		if (days < 7) return interfaceLanguage.current === 'pl' ? `${days} dni temu` : `${days}d ago`;
-		if (weeks < 5)
-			return interfaceLanguage.current === 'pl' ? `${weeks} tyg. temu` : `${weeks}w ago`;
-		if (months < 12)
-			return interfaceLanguage.current === 'pl' ? `${months} mies. temu` : `${months}mo ago`;
-		return formatAbsoluteDate(date);
+		return formatRelativeDateUtil(date, interfaceLanguage.current);
 	}
 
 	function formatAbsoluteDate(date: Date): string {
-		return date.toLocaleString(interfaceLanguage.current === 'pl' ? 'pl-PL' : 'en-US', {
-			year: 'numeric',
-			month: '2-digit',
-			day: '2-digit',
-			hour: '2-digit',
-			minute: '2-digit'
-		});
+		return formatAbsoluteDateUtil(date, interfaceLanguage.current);
 	}
 
 	async function handleBulkDelete() {

package/dist/admin/components/dashboard/form-submissions-widget.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { formatRelativeDate as formatRelativeDateUtil } from '../../utils/formatDate.js';
 	import * as Card from '../../../components/ui/card/index.js';
 	import { Badge } from '../../../components/ui/badge/index.js';
 	import { Button } from '../../../components/ui/button/index.js';
@@ -45,18 +46,7 @@
 	};
 
 	function formatRelativeDate(date: Date): string {
-		const now = new Date();
-		const diff = now.getTime() - date.getTime();
-		const minutes = Math.floor(diff / 60000);
-		const hours = Math.floor(diff / 3600000);
-		const days = Math.floor(diff / 86400000);
-
-		if (minutes < 1) return interfaceLanguage.current === 'pl' ? 'teraz' : 'now';
-		if (minutes < 60)
-			return interfaceLanguage.current === 'pl' ? `${minutes} min` : `${minutes}m`;
-		if (hours < 24)
-			return interfaceLanguage.current === 'pl' ? `${hours} godz.` : `${hours}h`;
-		return interfaceLanguage.current === 'pl' ? `${days} dni` : `${days}d`;
+		return formatRelativeDateUtil(date, interfaceLanguage.current);
 	}
 </script>
 

package/dist/admin/components/dashboard/recent-activity.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { formatRelativeDate as formatRelativeDateUtil } from '../../utils/formatDate.js';
 	import * as Card from '../../../components/ui/card/index.js';
 	import Skeleton from '../../../components/ui/skeleton/skeleton.svelte';
 	import { getRemotes } from '../../../sveltekit/index.js';
@@ -34,18 +35,7 @@
 	};
 
 	function formatRelativeDate(date: Date): string {
-		const now = new Date();
-		const diff = now.getTime() - date.getTime();
-		const minutes = Math.floor(diff / 60000);
-		const hours = Math.floor(diff / 3600000);
-		const days = Math.floor(diff / 86400000);
-
-		if (minutes < 1) return interfaceLanguage.current === 'pl' ? 'teraz' : 'now';
-		if (minutes < 60)
-			return interfaceLanguage.current === 'pl' ? `${minutes} min temu` : `${minutes}m ago`;
-		if (hours < 24)
-			return interfaceLanguage.current === 'pl' ? `${hours} godz. temu` : `${hours}h ago`;
-		return interfaceLanguage.current === 'pl' ? `${days} dni temu` : `${days}d ago`;
+		return formatRelativeDateUtil(date, interfaceLanguage.current);
 	}
 </script>