added qrcode

frontend/package-lock.json

@@ -18,6 +18,7 @@
         "mode-watcher": "^0.0.7",
         "nanoid": "^5.0.3",
         "postgres": "^3.4.3",
+        "qrious": "^4.0.2",
         "sveltekit-superforms": "^1.10.1",
         "tailwind-merge": "^2.0.0",
         "tailwind-variants": "^0.1.18",
@@ -3190,6 +3191,11 @@
       "integrity": "sha512-dKp+C4iXWK4vVYZmYSd0KBH5F/h1HoZRsbJ82AVKRO3PEo8L4lBS/vLwhVtpwwuYcoIsVY+1JYKR268yn480uQ==",
       "dev": true
     },
+    "node_modules/qrious": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/qrious/-/qrious-4.0.2.tgz",
+      "integrity": "sha512-xWPJIrK1zu5Ypn898fBp8RHkT/9ibquV2Kv24S/JY9VYEhMBMKur1gHVsOiNUh7PHP9uCgejjpZUHUIXXKoU/g=="
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",

frontend/package.json

@@ -42,6 +42,7 @@
     "mode-watcher": "^0.0.7",
     "nanoid": "^5.0.3",
     "postgres": "^3.4.3",
+    "qrious": "^4.0.2",
     "sveltekit-superforms": "^1.10.1",
     "tailwind-merge": "^2.0.0",
     "tailwind-variants": "^0.1.18",

frontend/src/lib/components/QR.svelte

@@ -0,0 +1,45 @@
+<script>
+	import { onMount } from 'svelte'
+	import { default as QrCode } from 'qrious'
+
+	const QRcode = new QrCode()
+
+	export let errorCorrection = 'L'
+	export let background = '#fff'
+	export let color = '#000'
+	export let size = '200'
+	export let value = ''
+	export let padding = 5
+	export let className = 'qrcode'
+
+	let image = ''
+
+	function generateQrCode() {
+		QRcode.set({
+			background,
+			foreground: color,
+			level: errorCorrection,
+			padding,
+			size,
+			value,
+		})
+
+		image = QRcode.toDataURL('image/jpeg')
+	}
+
+	export function getImage() {
+		return image
+	}
+
+	$: {
+		if (value) {
+			generateQrCode()
+		}
+	}
+
+	onMount(() => {
+		generateQrCode()
+	})
+</script>
+
+<img src={image} alt={value} class={className} />

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

@@ -14,8 +14,10 @@
 		Loader2,
 		MoreVertical,
 		PlusCircle,
+		QrCode,
 	} from 'lucide-svelte'
 	import { goto, invalidateAll } from '$app/navigation'
+	import Qr from '$lib/components/QR.svelte'
 
 	export let data: PageData
 
@@ -76,6 +78,14 @@
 		})
 		await invalidateAll()
 	}
+
+	let qrDialogOpen = false
+	let qrCode = ''
+
+	const openQRDialog = (code: string) => {
+		qrCode = code
+		qrDialogOpen = true
+	}
 </script>
 
 <div class="flex h-20 items-center justify-between p-4">
@@ -145,6 +155,11 @@
 									{shortener.visitor.length} visits
 								</div>
 							</Button>
+							<Button
+								class="bg-secondary flex h-8 items-center justify-center gap-1 rounded text-sm"
+								on:click={() => openQRDialog(shortener.code)}>
+								<QrCode size={20} />
+							</Button>
 						</div>
 						<DropdownMenu.Root>
 							<DropdownMenu.Trigger>
@@ -220,3 +235,15 @@
 		</Dialog.Footer>
 	</Dialog.Content>
 </Dialog.Root>
+
+<Dialog.Root bind:open={qrDialogOpen}>
+	<Dialog.Content class="sm:max-w-[425px]">
+		<Dialog.Header>
+			<Dialog.Title>Shortener QR</Dialog.Title>
+			<Dialog.Description>
+				Use this QR code to share the shortener.
+			</Dialog.Description>
+		</Dialog.Header>
+		<Qr value={qrCode} />
+	</Dialog.Content>
+</Dialog.Root>