added active/inactive to shortener

frontend/package.json

@@ -36,7 +36,7 @@
   "dependencies": {
     "@types/he": "^1.2.3",
     "apexcharts": "^3.44.0",
-    "bits-ui": "^0.18.2",
+    "bits-ui": "^0.19.6",
     "clsx": "^2.0.0",
     "cmdk-sv": "^0.0.13",
     "drizzle-orm": "^0.29.0",

frontend/src/lib/components/ui/checkbox/checkbox.svelte

@@ -1,30 +1,31 @@
 <script lang="ts">
-	import { Checkbox as CheckboxPrimitive } from 'bits-ui'
-	import { Check, Minus } from 'lucide-svelte'
-	import { cn } from '$lib/utils'
+	import { Checkbox as CheckboxPrimitive } from "bits-ui";
+	import Check from "lucide-svelte/icons/check";
+	import Minus from "lucide-svelte/icons/minus";
+	import { cn } from "$lib/utils.js";
 
-	type $$Props = CheckboxPrimitive.Props
-	type $$Events = CheckboxPrimitive.Events
+	type $$Props = CheckboxPrimitive.Props;
+	type $$Events = CheckboxPrimitive.Events;
 
-	let className: $$Props['class'] = undefined
-	export let checked: $$Props['checked'] = false
-	export { className as class }
+	let className: $$Props["class"] = undefined;
+	export let checked: $$Props["checked"] = false;
+	export { className as class };
 </script>
 
 <CheckboxPrimitive.Root
 	class={cn(
-		'peer box-content h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:opacity-50',
-		className,
+		"peer box-content h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled=true]:opacity-50",
+		className
 	)}
 	bind:checked
 	{...$$restProps}
-	on:click>
+	on:click
+>
 	<CheckboxPrimitive.Indicator
-		class={cn(
-			'flex h-4 w-4 items-center justify-center text-current',
-		)}
+		class={cn("flex h-4 w-4 items-center justify-center text-current")}
 		let:isChecked
-		let:isIndeterminate>
+		let:isIndeterminate
+	>
 		{#if isChecked}
 			<Check class="h-3.5 w-3.5" />
 		{:else if isIndeterminate}

frontend/src/lib/components/ui/checkbox/index.ts

@@ -1,6 +1,6 @@
-import Root from './checkbox.svelte'
+import Root from "./checkbox.svelte";
 export {
 	Root,
 	//
 	Root as Checkbox,
-}
+};

frontend/src/lib/db/schema.ts

@@ -5,6 +5,7 @@ import {
 	timestamp,
 	integer,
 	uuid,
+	boolean,
 } from 'drizzle-orm/pg-core'
 
 import { relations, type InferSelectModel } from 'drizzle-orm'
@@ -17,6 +18,7 @@ export const shortener = pgTable('shortener', {
 		.defaultNow()
 		.notNull(),
 	userId: integer('user_id').notNull(),
+	active: boolean('active').notNull().default(true),
 	projectId: integer('project_id'),
 })
 

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

@@ -12,6 +12,7 @@
 	import { Input } from '$lib/components/ui/input'
 	import { Label } from '$lib/components/ui/label'
 	import { Badge } from '$lib/components/ui/badge'
+	import { Checkbox } from '$lib/components/ui/checkbox'
 	import {
 		BarChart,
 		ExternalLink,
@@ -35,6 +36,7 @@
 	let editShortenerCode = ''
 	let editShortenerLink = ''
 	let editShortenerCategory: any = undefined
+	let editShortenerActive = false
 	let isEditLoading = false
 
 	let open: boolean = false
@@ -42,15 +44,27 @@
 
 	$: selectedProject = data.selected_project.label
 
-	const openEditDialog = (code: string, link: string) => {
+	const openEditDialog = (
+		code: string,
+		link: string,
+		projectId: number | null,
+		projectName: string | undefined,
+		active: boolean,
+	) => {
 		editDialogOpen = true
 		editShortenerCode = code
 		editShortenerLink = link
+		editShortenerActive = active
+		if (projectId) {
+			editShortenerCategory = { value: projectId, label: projectName }
+		} else {
 			editShortenerCategory = undefined
 		}
+	}
 
 	const editShortener = async (code: string, link: string) => {
 		isEditLoading = true
+		console.log(editShortenerCategory)
 		await fetch(`/api/shortener/${code}`, {
 			method: 'put',
 			body: JSON.stringify({
@@ -58,6 +72,7 @@
 				projectId: editShortenerCategory
 					? editShortenerCategory.value
 					: undefined,
+				active: editShortenerActive,
 			}),
 		})
 		await invalidateAll()
@@ -169,10 +184,25 @@
 							</a>
 							<ExternalLink size={16} />
 						</div>
-						<Badge variant="default"
+						<div class="flex gap-4">
+							<Badge variant="outline" class="flex gap-2">
+								{#if shortener.active}
+									<span
+										class="relative inline-flex h-2 w-2 rounded-full bg-green-400"
+									></span>
+									Active
+								{:else}
+									<span
+										class="relative inline-flex h-2 w-2 rounded-full bg-gray-600"
+									></span>
+									Inactive
+								{/if}
+							</Badge>
+							<Badge variant="secondary"
 								>{shortener.project
 									? shortener.project.name
 									: 'Uncategorized'}</Badge>
+						</div>
 					</Card.Title>
 					<Card.Description>{shortener.link}</Card.Description>
 				</Card.Header>
@@ -201,7 +231,13 @@
 								<DropdownMenu.Group>
 									<DropdownMenu.Item
 										on:click={() =>
-											openEditDialog(shortener.code, shortener.link)}>
+											openEditDialog(
+												shortener.code,
+												shortener.link,
+												shortener.projectId,
+												shortener.project?.name,
+												shortener.active,
+											)}>
 										Edit
 									</DropdownMenu.Item>
 									<DropdownMenu.Item
@@ -253,6 +289,17 @@
 					</Select.Content>
 				</Select.Root>
 			</div>
+			<div class="grid grid-cols-4 items-center gap-4">
+				<div></div>
+				<div class="flex items-center gap-4">
+					<Checkbox id="terms" bind:checked={editShortenerActive} />
+					<Label
+						for="terms"
+						class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+						Active
+					</Label>
+				</div>
+			</div>
 		</div>
 		<Dialog.Footer>
 			<Button

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

@@ -31,7 +31,8 @@ export const GET: RequestHandler = async (event) => {
 
 const updateShortenerSchema = z.object({
 	link: z.string().url(),
-	projectId: z.number().nullable(),
+	projectId: z.number().nullish(),
+	active: z.boolean(),
 })
 
 export const PUT: RequestHandler = async (event) => {
@@ -56,6 +57,7 @@ export const PUT: RequestHandler = async (event) => {
 		.set({
 			link: updateShortener.data.link,
 			projectId: updateShortener.data.projectId ?? undefined,
+			active: updateShortener.data.active,
 		})
 		.where(
 			and(