From 0e92aafd665897f48ac222806cb61eee37b50a8d Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Sun, 17 Mar 2024 05:24:34 +0800
Subject: [PATCH] update links dashboard and projects layout

---
 frontend/src/routes/(app)/+page.svelte        |  4 ++--
 frontend/src/routes/(app)/links/+page.svelte  |  2 +-
 .../src/routes/(app)/projects/+page.svelte    | 19 +++++--------------
 3 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/frontend/src/routes/(app)/+page.svelte b/frontend/src/routes/(app)/+page.svelte
index 9df533c..8aa0902 100644
--- a/frontend/src/routes/(app)/+page.svelte
+++ b/frontend/src/routes/(app)/+page.svelte
@@ -13,11 +13,11 @@
 	<Separator class="" />
 </div>
 
-<div class="flex w-full flex-col items-stretch gap-2 px-6">
+<div class="flex w-full flex-wrap items-stretch gap-2 px-6">
 	{#each data.projects as project}
 		<a href={'/links?project=' + project.uuid}>
 			<Card.Root
-				class="w-full max-w-[500px] hover:cursor-pointer hover:bg-secondary">
+				class="w-[500px] hover:cursor-pointer hover:bg-secondary">
 				<Card.Header>
 					<Card.Title class="flex items-center gap-2">
 						{project.name}
diff --git a/frontend/src/routes/(app)/links/+page.svelte b/frontend/src/routes/(app)/links/+page.svelte
index 7b37ae8..eb5a2c8 100644
--- a/frontend/src/routes/(app)/links/+page.svelte
+++ b/frontend/src/routes/(app)/links/+page.svelte
@@ -113,7 +113,7 @@
 	<title>Shorteners</title>
 </svelte:head>
 
-<div class="flex items-center justify-between p-4">
+<div class="flex items-center justify-start gap-4 p-4">
 	<Popover.Root bind:open>
 		<Popover.Trigger asChild let:builder>
 			<Button
diff --git a/frontend/src/routes/(app)/projects/+page.svelte b/frontend/src/routes/(app)/projects/+page.svelte
index e0f9403..81ba527 100644
--- a/frontend/src/routes/(app)/projects/+page.svelte
+++ b/frontend/src/routes/(app)/projects/+page.svelte
@@ -1,18 +1,11 @@
 <script lang="ts">
 	import type { PageData } from './$types'
-	import { Separator } from '$lib/components/ui/separator'
 	import { Button, buttonVariants } from '$lib/components/ui/button'
 	import * as Dialog from '$lib/components/ui/dialog'
 	import * as Card from '$lib/components/ui/card'
-	import * as DropdownMenu from '$lib/components/ui/dropdown-menu'
 	import { Input } from '$lib/components/ui/input'
 	import { Label } from '$lib/components/ui/label'
-	import {
-		ExternalLink,
-		Loader2,
-		MoreVertical,
-		PlusCircle,
-	} from 'lucide-svelte'
+	import { ExternalLink, Loader2, PlusCircle } from 'lucide-svelte'
 
 	import { invalidateAll } from '$app/navigation'
 
@@ -42,8 +35,7 @@
 	}
 </script>
 
-<div class="flex min-h-[80px] items-center justify-between p-4">
-	<div class="text-3xl font-bold">Projects</div>
+<div class="flex items-center justify-start p-4">
 	<Dialog.Root bind:open={dialogOpen}>
 		<Dialog.Trigger
 			class={buttonVariants({ variant: 'default' }) + 'flex gap-2'}>
@@ -77,14 +69,13 @@
 		</Dialog.Content>
 	</Dialog.Root>
 </div>
-<Separator />
 
 {#if data.projects.length > 0}
-	<div class="flex flex-col gap-4 overflow-scroll p-4">
+	<div class="flex flex-wrap gap-4 overflow-scroll p-4">
 		{#each data.projects as project}
 			<a href={'/links?project=' + project.uuid}>
 				<Card.Root
-					class="hover:bg-secondary w-full max-w-[500px] hover:cursor-pointer">
+					class="w-[500px] hover:cursor-pointer hover:bg-secondary">
 					<Card.Header>
 						<Card.Title class="flex items-center gap-2">
 							{project.name}
@@ -93,7 +84,7 @@
 					<Card.Content>
 						<div class="flex w-full justify-between">
 							<Button
-								class="bg-secondary flex h-8 items-center justify-center gap-1 rounded text-sm">
+								class="flex h-8 items-center justify-center gap-1 rounded bg-secondary text-sm">
 								<ExternalLink size={20} />
 								{project.shortener.length}
 								Shorteners