update links page filter bar to change layout on screen size

frontend/src/routes/(app)/links/(component)/ShortenerCard.svelte

@@ -16,7 +16,7 @@
 	import Qr from '$lib/components/QR.svelte'
 
 	export let shortener: Shortener & {
-		projectName: string
+		projectName: string | null
 		visitorCount: number
 	}
 	export let shortener_url: string

frontend/src/routes/(app)/links/+page.svelte

@@ -53,54 +53,31 @@
 	}
 </script>
 
-<div class="flex gap-4 justify-start items-center p-4">
+<div
-	<Popover.Root bind:open>
+	class="flex flex-wrap-reverse gap-4 justify-start items-center p-4">
-		<Popover.Trigger asChild let:builder>
+	<div class="flex gap-4 items-center">
-			<Button
+		<Popover.Root bind:open>
-				builders={[builder]}
+			<Popover.Trigger asChild let:builder>
-				variant="outline"
+				<Button
-				role="combobox"
+					builders={[builder]}
-				aria-expanded={open}
+					variant="outline"
-				class="justify-between w-[200px]">
+					role="combobox"
-				{selectedProject}
+					aria-expanded={open}
-				<ChevronsUpDown class="ml-2 w-4 h-4 opacity-50 shrink-0" />
+					class="justify-between w-[200px]">
-			</Button>
+					{selectedProject}
-		</Popover.Trigger>
+					<ChevronsUpDown class="ml-2 w-4 h-4 opacity-50 shrink-0" />
-		<Popover.Content class="p-0 w-[200px]">
+				</Button>
-			<Command.Root>
+			</Popover.Trigger>
-				<Command.Input placeholder="Search project..." />
+			<Popover.Content class="p-0 w-[200px]">
-				<Command.Empty>No project found.</Command.Empty>
+				<Command.Root>
-				<Command.Group>
+					<Command.Input placeholder="Search project..." />
-					<a
+					<Command.Empty>No project found.</Command.Empty>
-						href={updateSearchParam([
+					<Command.Group>
-							{
-								name: 'project',
-								value: undefined,
-							},
-							{
-								name: 'page',
-								value: 1,
-							},
-						])}>
-						<Command.Item
-							onSelect={() => {
-								open = false
-							}}>
-							<Check
-								class={cn(
-									'mr-2 h-4 w-4',
-									data.selected_project.value !== null &&
-										'text-transparent',
-								)} />
-							All
-						</Command.Item>
-					</a>
-					{#each data.projects as project}
 						<a
 							href={updateSearchParam([
 								{
 									name: 'project',
-									value: project.uuid,
+									value: undefined,
 								},
 								{
 									name: 'page',
@@ -114,54 +91,83 @@
 								<Check
 									class={cn(
 										'mr-2 h-4 w-4',
-										data.selected_project.value !== project.uuid &&
+										data.selected_project.value !== null &&
 											'text-transparent',
 									)} />
-								{project.name}
+								All
 							</Command.Item>
 						</a>
+						{#each data.projects as project}
+							<a
+								href={updateSearchParam([
+									{
+										name: 'project',
+										value: project.uuid,
+									},
+									{
+										name: 'page',
+										value: 1,
+									},
+								])}>
+								<Command.Item
+									onSelect={() => {
+										open = false
+									}}>
+									<Check
+										class={cn(
+											'mr-2 h-4 w-4',
+											data.selected_project.value !== project.uuid &&
+												'text-transparent',
+										)} />
+									{project.name}
+								</Command.Item>
+							</a>
+						{/each}
+					</Command.Group>
+				</Command.Root>
+			</Popover.Content>
+		</Popover.Root>
+		<Select.Root
+			selected={{ label: data.sortBy, value: data.sortBy }}>
+			<Select.Trigger class="w-[180px]" customIcon={SortDescIcon}>
+				<Select.Value placeholder="Sort By" />
+			</Select.Trigger>
+			<Select.Content>
+				<Select.Group>
+					<Select.Label>Sort By</Select.Label>
+					{#each ['latest', 'oldest', 'most_visited'] as sortBy}
+						<a
+							href={updateSearchParam([
+								{ name: 'sortBy', value: sortBy },
+								{ name: 'page', value: 1 },
+							])}>
+							<Select.Item value={sortBy} label={sortBy}>
+								{sortBy}
+							</Select.Item>
+						</a>
 					{/each}
-				</Command.Group>
+				</Select.Group>
-			</Command.Root>
+			</Select.Content>
-		</Popover.Content>
+			<Select.Input name="favoriteFruit" />
-	</Popover.Root>
+		</Select.Root>
-	<Select.Root selected={{ label: data.sortBy, value: data.sortBy }}>
+	</div>
-		<Select.Trigger class="w-[180px]" customIcon={SortDescIcon}>
+	<div class="flex gap-4 items-center">
-			<Select.Value placeholder="Sort By" />
+		<Input
-		</Select.Trigger>
+			type="text"
-		<Select.Content>
+			placeholder="search"
-			<Select.Group>
+			class="max-w-[250px]"
-				<Select.Label>Sort By</Select.Label>
+			autofocus
-				{#each ['latest', 'oldest', 'most_visited'] as sortBy}
+			value={search}
-					<a
+			on:input={({ target }) => {
-						href={updateSearchParam([
+				clearTimeout(searchUpdateTimeout)
-							{ name: 'sortBy', value: sortBy },
+				searchUpdateTimeout = setTimeout(() => {
-							{ name: 'page', value: 1 },
+					search = target.value
-						])}>
+				}, 500)
-						<Select.Item value={sortBy} label={sortBy}>
+			}} />
-							{sortBy}
+		<Button disabled={!search} on:click={() => (search = '')}
-						</Select.Item>
+			>Clear</Button>
-					</a>
+		<AddShortenerDialog bind:dialogOpen projects={data.projects} />
-				{/each}
+	</div>
-			</Select.Group>
-		</Select.Content>
-		<Select.Input name="favoriteFruit" />
-	</Select.Root>
-	<Input
-		type="text"
-		placeholder="search"
-		class="max-w-[250px]"
-		autofocus
-		value={search}
-		on:input={({ target }) => {
-			clearTimeout(searchUpdateTimeout)
-			searchUpdateTimeout = setTimeout(() => {
-				search = target.value
-			}, 500)
-		}} />
-	<Button disabled={!search} on:click={() => (search = '')}
-		>Clear</Button>
-	<AddShortenerDialog bind:dialogOpen projects={data.projects} />
 </div>
 
 {#await data.shorteners}
@@ -184,16 +190,23 @@
 			</div>
 		</ScrollArea>
 	{:else}
-		<div class="flex flex-grow justify-center items-center w-full">
+		<div class="flex flex-grow p-4">
-			<div class="flex flex-col gap-12 items-center">
+			<div
-				<div class="flex flex-col gap-4 items-center">
+				class="flex flex-1 justify-center items-center rounded-lg border border-dashed shadow-sm">
-					<div class="text-4xl font-bold">No Shortener Found</div>
+				<div
+					class="flex flex-grow justify-center items-center w-full">
+					<div class="flex flex-col gap-8 items-center">
+						<div class="flex flex-col gap-2 items-center">
+							<div class="text-4xl font-bold">No Shortener Found</div>
+							<p class="text-muted-foreground">Add a new shortener</p>
+						</div>
+						<Button
+							on:click={() => {
+								dialogOpen = true
+							}}
+							class="w-fit">Add Shortener</Button>
+					</div>
 				</div>
-				<Button
-					on:click={() => {
-						dialogOpen = true
-					}}
-					class="w-fit">Add Shortener</Button>
 			</div>
 		</div>
 	{/if}