feat: add list empty indicator

frontend/src/lib/components/advanced-table.svelte

@@ -4,6 +4,7 @@
 	import * as Pagination from '$lib/components/ui/pagination';
 	import * as Select from '$lib/components/ui/select';
 	import * as Table from '$lib/components/ui/table/index.js';
+	import Empty from '$lib/icons/empty.svelte';
 	import type { Paginated } from '$lib/types/pagination.type';
 	import { debounced } from '$lib/utils/debounce-util';
 	import type { Snippet } from 'svelte';
@@ -66,6 +67,12 @@
 	}
 </script>
 
+{#if items.data.length === 0}
+	<div class="my-5 flex flex-col items-center">
+		<Empty class="text-muted-foreground h-20" />
+		<p class="text-muted-foreground mt-3 text-sm">No items found</p>
+	</div>
+{:else}
 	<div class="w-full">
 		{#if !withoutSearch}
 			<Input
@@ -75,6 +82,7 @@
 				oninput={(e) => onSearch((e.target as HTMLInputElement).value)}
 			/>
 		{/if}
+
 		<Table.Root>
 			<Table.Header>
 				<Table.Row>
@@ -108,6 +116,7 @@
 				{/each}
 			</Table.Body>
 		</Table.Root>
+
 		<div class="mt-5 flex items-center justify-between space-x-2">
 			<div class="flex items-center space-x-2">
 				<p class="text-sm font-medium">Items per page</p>
@@ -156,3 +165,4 @@
 			</Pagination.Root>
 		</div>
 	</div>
+{/if}

frontend/src/lib/icons/empty.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	let {
+		class: className
+	}: {
+		class?: string;
+	} = $props();
+</script>
+
+<svg
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 336.19673868301203 129.38671875"
+	class={className}
+>
+	<g stroke-linecap="round" transform="translate(10 10) rotate(0 158.09836934150601 54.693359375)">
+		<path
+			d="M27.35 0 C121.36 -0.62, 208.79 0.52, 288.85 0 M288.85 0 C305.5 3.32, 316.8 6.14, 316.2 27.35 M316.2 27.35 C315.58 42.15, 314.92 54.54, 316.2 82.04 M316.2 82.04 C313.79 100.68, 304.9 110.1, 288.85 109.39 M288.85 109.39 C192.86 108.68, 93.17 110.07, 27.35 109.39 M27.35 109.39 C13.09 109.46, -1.61 102.22, 0 82.04 M0 82.04 C-0.35 60.8, -1.11 41.01, 0 27.35 M0 27.35 C1.94 9.62, 8.6 1.41, 27.35 0"
+			stroke="#A1A1AA"
+			stroke-width="4.5"
+			fill="none"
+			stroke-dasharray="8 12"
+		></path>
+	</g>
+</svg>