able to change shortener project

frontend/src/routes/(app)/links/+page.server.ts

@@ -7,10 +7,13 @@ export const load = (async (event) => {
 	const shorteners = await db.query.shortener.findMany({
 		with: {
 			visitor: true,
+			project: true,
 		},
 		where: (shortener, { eq, and, isNull }) =>
 			and(eq(shortener.userId, user.id), isNull(shortener.projectId)),
 	})
 
-	return { shorteners }
+	const projects = await db.query.project.findMany()
+
+	return { shorteners, projects }
 }) satisfies PageServerLoad

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

@@ -5,6 +5,7 @@
 	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 * as Select from '$lib/components/ui/select'
 	import { Input } from '$lib/components/ui/input'
 	import { Label } from '$lib/components/ui/label'
 	import {
@@ -43,12 +44,14 @@
 	let editDialogOpen = false
 	let editShortenerCode = ''
 	let editShortenerLink = ''
+	let editShortenerCategory: any = undefined
 	let isEditLoading = false
 
 	const openEditDialog = (code: string, link: string) => {
 		editDialogOpen = true
 		editShortenerCode = code
 		editShortenerLink = link
+		editShortenerCategory = undefined
 	}
 
 	const editShortener = async (code: string, link: string) => {
@@ -57,6 +60,9 @@
 			method: 'put',
 			body: JSON.stringify({
 				link,
+				projectId: editShortenerCategory
+					? editShortenerCategory.value
+					: undefined,
 			}),
 		})
 		await invalidateAll()
@@ -184,6 +190,22 @@
 					bind:value={editShortenerLink}
 					class="col-span-3" />
 			</div>
+			<div class="grid grid-cols-4 items-center gap-4">
+				<Label class="text-right">Category</Label>
+				<Select.Root
+					bind:selected={editShortenerCategory}
+					multiple={false}>
+					<Select.Trigger class="col-span-3">
+						<Select.Value placeholder="Select a Category" />
+					</Select.Trigger>
+					<Select.Content>
+						{#each data.projects as project}
+							<Select.Item value={project.id}
+								>{project.name}</Select.Item>
+						{/each}
+					</Select.Content>
+				</Select.Root>
+			</div>
 		</div>
 		<Dialog.Footer>
 			<Button

frontend/src/routes/(app)/projects/[uuid]/+page.server.ts

@@ -27,7 +27,9 @@ export const load = (async (event) => {
 				),
 		})
 
-		return { project, shorteners }
+		const projects = await db.query.project.findMany()
+
+		return { project, shorteners, projects }
 	} catch (error) {
 		throw redirect(303, '/projects')
 	}

frontend/src/routes/(app)/projects/[uuid]/+page.svelte

@@ -5,6 +5,7 @@
 	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 * as Select from '$lib/components/ui/select'
 	import { Input } from '$lib/components/ui/input'
 	import { Label } from '$lib/components/ui/label'
 	import {
@@ -43,12 +44,14 @@
 	let editDialogOpen = false
 	let editShortenerCode = ''
 	let editShortenerLink = ''
+	let editShortenerCategory: any = undefined
 	let isEditLoading = false
 
 	const openEditDialog = (code: string, link: string) => {
 		editDialogOpen = true
 		editShortenerCode = code
 		editShortenerLink = link
+		editShortenerCategory = undefined
 	}
 
 	const editShortener = async (code: string, link: string) => {
@@ -57,6 +60,9 @@
 			method: 'put',
 			body: JSON.stringify({
 				link,
+				projectId: editShortenerCategory
+					? editShortenerCategory.value
+					: undefined,
 			}),
 		})
 		await invalidateAll()
@@ -184,6 +190,22 @@
 					bind:value={editShortenerLink}
 					class="col-span-3" />
 			</div>
+			<div class="grid grid-cols-4 items-center gap-4">
+				<Label class="text-right">Category</Label>
+				<Select.Root
+					bind:selected={editShortenerCategory}
+					multiple={false}>
+					<Select.Trigger class="col-span-3">
+						<Select.Value placeholder="Select a Category" />
+					</Select.Trigger>
+					<Select.Content>
+						{#each data.projects as project}
+							<Select.Item value={project.id}
+								>{project.name}</Select.Item>
+						{/each}
+					</Select.Content>
+				</Select.Root>
+			</div>
 		</div>
 		<Dialog.Footer>
 			<Button

frontend/src/routes/api/shortener/[id]/+server.ts

@@ -31,6 +31,7 @@ export const GET: RequestHandler = async (event) => {
 
 const updateShortenerSchema = z.object({
 	link: z.string().url(),
+	projectId: z.number().nullable(),
 })
 
 export const PUT: RequestHandler = async (event) => {
@@ -52,7 +53,10 @@ export const PUT: RequestHandler = async (event) => {
 
 	await db
 		.update(shortenerSchema)
-		.set({ link: updateShortener.data.link })
+		.set({
+			link: updateShortener.data.link,
+			projectId: updateShortener.data.projectId ?? undefined,
+		})
 		.where(
 			and(
 				eq(shortenerSchema.code, shortenerId),