From 69018f0ed541d19510ebbb418204e56dcf04787d Mon Sep 17 00:00:00 2001
From: MinerAle <66887063+MinerAle00@users.noreply.github.com>
Date: Sun, 16 Feb 2025 20:24:40 +0100
Subject: [PATCH 1/8] feat: generate default slug lenght if not provided in
 link creation using api

---
 server/api/link/create.post.ts | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/server/api/link/create.post.ts b/server/api/link/create.post.ts
index e3be9b1..b7ae2fd 100644
--- a/server/api/link/create.post.ts
+++ b/server/api/link/create.post.ts
@@ -1,7 +1,15 @@
-import { LinkSchema } from '@/schemas/link'
+import { LinkSchema, nanoid } from '@/schemas/link'
 
 export default eventHandler(async (event) => {
-  const link = await readValidatedBody(event, LinkSchema.parse)
+  const body = await readBody(event)
+
+  // If no slug provided, generate one with default length from env
+  if (!body.slug) {
+    const { slugDefaultLength } = useRuntimeConfig().public
+    body.slug = nanoid(+slugDefaultLength)()
+  }
+
+  const link = await LinkSchema.parse(body)
 
   const { caseSensitive } = useRuntimeConfig(event)
 

From 3e9f3bb02d326e3f57347d29acb975c2aa5c6f21 Mon Sep 17 00:00:00 2001
From: MinerAle <66887063+MinerAle00@users.noreply.github.com>
Date: Mon, 17 Feb 2025 11:48:00 +0100
Subject: [PATCH 2/8] fix: enhance slug generation to fallback to default if
 length is not specified

---
 server/api/link/create.post.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/server/api/link/create.post.ts b/server/api/link/create.post.ts
index b7ae2fd..7d0977a 100644
--- a/server/api/link/create.post.ts
+++ b/server/api/link/create.post.ts
@@ -3,10 +3,10 @@ import { LinkSchema, nanoid } from '@/schemas/link'
 export default eventHandler(async (event) => {
   const body = await readBody(event)
 
-  // If no slug provided, generate one with default length from env
+  // If no slug provided, generate one with default length from env or fall back to default
   if (!body.slug) {
     const { slugDefaultLength } = useRuntimeConfig().public
-    body.slug = nanoid(+slugDefaultLength)()
+    body.slug = slugDefaultLength ? nanoid(+slugDefaultLength)() : nanoid()()
   }
 
   const link = await LinkSchema.parse(body)

From c4626101d5e408078a144178488781a59c7c1520 Mon Sep 17 00:00:00 2001
From: MinerAle <66887063+MinerAle00@users.noreply.github.com>
Date: Mon, 24 Feb 2025 21:00:47 +0100
Subject: [PATCH 3/8] feat: add download button for QR code in dashboard links

---
 components/dashboard/links/QRCode.vue | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/components/dashboard/links/QRCode.vue b/components/dashboard/links/QRCode.vue
index d782c99..cdf8559 100644
--- a/components/dashboard/links/QRCode.vue
+++ b/components/dashboard/links/QRCode.vue
@@ -1,4 +1,6 @@
 <script setup>
+import { Button } from '#components'
+import { Download } from 'lucide-vue-next'
 import QRCodeStyling from 'qr-code-styling'
 
 const props = defineProps({
@@ -68,14 +70,27 @@ const options = {
 const qrCode = new QRCodeStyling(options)
 const qrCodeEl = ref(null)
 
+function downloadQRCode() {
+  qrCode.download({
+    extension: 'png',
+    name: `qr-${props.data}`,
+  })
+}
+
 onMounted(() => {
   qrCode.append(qrCodeEl.value)
 })
 </script>
 
 <template>
-  <div
-    ref="qrCodeEl"
-    :data-text="data"
-  />
+  <div class="flex flex-col items-center gap-4">
+    <div
+      ref="qrCodeEl"
+      :data-text="data"
+    />
+    <Button variant="outline" @click="downloadQRCode">
+      <Download class="w-4 h-4 mr-2" />
+      Download QR Code
+    </Button>
+  </div>
 </template>

From c1c84ab0f95a18e7559d708aca4a518bb823a551 Mon Sep 17 00:00:00 2001
From: MinerAle <66887063+MinerAle00@users.noreply.github.com>
Date: Mon, 24 Feb 2025 21:05:56 +0100
Subject: [PATCH 4/8] fix: update QR code download filename format to use slug
 instead of full URL

---
 components/dashboard/links/QRCode.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/dashboard/links/QRCode.vue b/components/dashboard/links/QRCode.vue
index cdf8559..437561e 100644
--- a/components/dashboard/links/QRCode.vue
+++ b/components/dashboard/links/QRCode.vue
@@ -71,9 +71,10 @@ const qrCode = new QRCodeStyling(options)
 const qrCodeEl = ref(null)
 
 function downloadQRCode() {
+  const slug = props.data.split('/').pop()
   qrCode.download({
     extension: 'png',
-    name: `qr-${props.data}`,
+    name: `qr_${slug}`,
   })
 }
 

From ce18b5eae3158c5a791f04e8618779c9bbbb7016 Mon Sep 17 00:00:00 2001
From: MinerAle <66887063+MinerAle00@users.noreply.github.com>
Date: Mon, 24 Feb 2025 21:19:33 +0100
Subject: [PATCH 5/8] Removed the api modification for the qrcode pull request

---
 server/api/link/create.post.ts | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/server/api/link/create.post.ts b/server/api/link/create.post.ts
index 7d0977a..e3be9b1 100644
--- a/server/api/link/create.post.ts
+++ b/server/api/link/create.post.ts
@@ -1,15 +1,7 @@
-import { LinkSchema, nanoid } from '@/schemas/link'
+import { LinkSchema } from '@/schemas/link'
 
 export default eventHandler(async (event) => {
-  const body = await readBody(event)
-
-  // If no slug provided, generate one with default length from env or fall back to default
-  if (!body.slug) {
-    const { slugDefaultLength } = useRuntimeConfig().public
-    body.slug = slugDefaultLength ? nanoid(+slugDefaultLength)() : nanoid()()
-  }
-
-  const link = await LinkSchema.parse(body)
+  const link = await readValidatedBody(event, LinkSchema.parse)
 
   const { caseSensitive } = useRuntimeConfig(event)
 

From 3d5c4b0dd4d646aa16a8e9404ad5665cf029d38b Mon Sep 17 00:00:00 2001
From: MinerAle <66887063+MinerAle00@users.noreply.github.com>
Date: Thu, 27 Feb 2025 08:11:31 +0100
Subject: [PATCH 6/8] feat: add color picker to customize QR code appearance

---
 components/dashboard/links/QRCode.vue | 35 +++++++++++++++++++++++----
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/components/dashboard/links/QRCode.vue b/components/dashboard/links/QRCode.vue
index 437561e..cda6391 100644
--- a/components/dashboard/links/QRCode.vue
+++ b/components/dashboard/links/QRCode.vue
@@ -1,7 +1,8 @@
 <script setup>
 import { Button } from '#components'
-import { Download } from 'lucide-vue-next'
+import { Download, Palette } from 'lucide-vue-next'
 import QRCodeStyling from 'qr-code-styling'
+import { ref, watch } from 'vue'
 
 const props = defineProps({
   data: {
@@ -13,6 +14,7 @@ const props = defineProps({
     default: '',
   },
 })
+const color = ref('#000000')
 const options = {
   width: 256,
   height: 256,
@@ -70,6 +72,18 @@ const options = {
 const qrCode = new QRCodeStyling(options)
 const qrCodeEl = ref(null)
 
+function updateColor(newColor) {
+  qrCode.update({
+    dotsOptions: { type: 'dots', color: newColor, gradient: null },
+    cornersSquareOptions: { type: 'extra-rounded', color: newColor },
+    cornersDotOptions: { type: 'dot', color: newColor },
+  })
+}
+
+watch(color, (newColor) => {
+  updateColor(newColor)
+})
+
 function downloadQRCode() {
   const slug = props.data.split('/').pop()
   qrCode.download({
@@ -89,9 +103,20 @@ onMounted(() => {
       ref="qrCodeEl"
       :data-text="data"
     />
-    <Button variant="outline" @click="downloadQRCode">
-      <Download class="w-4 h-4 mr-2" />
-      Download QR Code
-    </Button>
+    <div class="flex items-center gap-2">
+      <div class="flex items-center gap-2 px-3 py-2 border rounded-md">
+        <Palette class="w-4 h-4" />
+        <input
+          v-model="color"
+          type="color"
+          class="w-20 h-8 rounded cursor-pointer"
+          title="Change QR code color"
+        >
+      </div>
+      <Button variant="outline" @click="downloadQRCode">
+        <Download class="w-4 h-4 mr-2" />
+        Download QR Code
+      </Button>
+    </div>
   </div>
 </template>

From 1d04e199cef97dadc092bb2b99d04d05b42c9fd8 Mon Sep 17 00:00:00 2001
From: MinerAle <66887063+MinerAle00@users.noreply.github.com>
Date: Thu, 27 Feb 2025 08:21:51 +0100
Subject: [PATCH 7/8] feat: add icon toggle and color picker to QR code
 component

---
 components/dashboard/links/QRCode.vue | 54 +++++++++++++++++++--------
 1 file changed, 39 insertions(+), 15 deletions(-)

diff --git a/components/dashboard/links/QRCode.vue b/components/dashboard/links/QRCode.vue
index cda6391..e903ead 100644
--- a/components/dashboard/links/QRCode.vue
+++ b/components/dashboard/links/QRCode.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { Button } from '#components'
+import { Button, Switch } from '#components'
 import { Download, Palette } from 'lucide-vue-next'
 import QRCodeStyling from 'qr-code-styling'
 import { ref, watch } from 'vue'
@@ -14,6 +14,8 @@ const props = defineProps({
     default: '',
   },
 })
+
+const showIcon = ref(true)
 const color = ref('#000000')
 const options = {
   width: 256,
@@ -21,7 +23,12 @@ const options = {
   data: props.data,
   margin: 10,
   qrOptions: { typeNumber: '0', mode: 'Byte', errorCorrectionLevel: 'Q' },
-  imageOptions: { hideBackgroundDots: true, imageSize: 0.4, margin: 2 },
+  imageOptions: {
+    hideBackgroundDots: true,
+    imageSize: 0.3,
+    margin: 0,
+    crossOrigin: 'anonymous',
+  },
   dotsOptions: { type: 'dots', color: '#000000', gradient: null },
   backgroundOptions: { color: '#ffffff', gradient: null },
   image: props.image,
@@ -72,6 +79,16 @@ const options = {
 const qrCode = new QRCodeStyling(options)
 const qrCodeEl = ref(null)
 
+function updateIcon(show) {
+  qrCode.update({
+    image: show ? props.image : '',
+  })
+}
+
+watch(showIcon, (show) => {
+  updateIcon(show)
+})
+
 function updateColor(newColor) {
   qrCode.update({
     dotsOptions: { type: 'dots', color: newColor, gradient: null },
@@ -94,6 +111,7 @@ function downloadQRCode() {
 
 onMounted(() => {
   qrCode.append(qrCodeEl.value)
+  updateIcon(showIcon.value)
 })
 </script>
 
@@ -103,20 +121,26 @@ onMounted(() => {
       ref="qrCodeEl"
       :data-text="data"
     />
-    <div class="flex items-center gap-2">
-      <div class="flex items-center gap-2 px-3 py-2 border rounded-md">
-        <Palette class="w-4 h-4" />
-        <input
-          v-model="color"
-          type="color"
-          class="w-20 h-8 rounded cursor-pointer"
-          title="Change QR code color"
-        >
+    <div class="flex items-center gap-4">
+      <div class="flex items-center gap-2">
+        <div class="flex items-center gap-2 px-3 py-2 border rounded-md">
+          <Palette class="w-4 h-4" />
+          <input
+            v-model="color"
+            type="color"
+            class="w-20 h-8 rounded cursor-pointer"
+            title="Change QR code color"
+          >
+        </div>
+        <Button variant="outline" @click="downloadQRCode">
+          <Download class="w-4 h-4 mr-2" />
+          Download QR Code
+        </Button>
+      </div>
+      <div class="flex items-center gap-2">
+        <span class="text-sm text-gray-500">Icon</span>
+        <Switch v-model="showIcon" />
       </div>
-      <Button variant="outline" @click="downloadQRCode">
-        <Download class="w-4 h-4 mr-2" />
-        Download QR Code
-      </Button>
     </div>
   </div>
 </template>

From 9a9975c6a99d3f255abe626c8de64fe3f6eb7fc8 Mon Sep 17 00:00:00 2001
From: MinerAle <66887063+MinerAle00@users.noreply.github.com>
Date: Thu, 27 Feb 2025 08:29:35 +0100
Subject: [PATCH 8/8] refactor: remove icon toggle functionality and simplify
 QR code component

---
 components/dashboard/links/QRCode.vue | 48 ++++++++-------------------
 1 file changed, 14 insertions(+), 34 deletions(-)

diff --git a/components/dashboard/links/QRCode.vue b/components/dashboard/links/QRCode.vue
index e903ead..3ef8ba8 100644
--- a/components/dashboard/links/QRCode.vue
+++ b/components/dashboard/links/QRCode.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { Button, Switch } from '#components'
-import { Download, Palette } from 'lucide-vue-next'
+import { Button } from '#components'
+import { Download } from 'lucide-vue-next'
 import QRCodeStyling from 'qr-code-styling'
 import { ref, watch } from 'vue'
 
@@ -14,8 +14,6 @@ const props = defineProps({
     default: '',
   },
 })
-
-const showIcon = ref(true)
 const color = ref('#000000')
 const options = {
   width: 256,
@@ -23,12 +21,7 @@ const options = {
   data: props.data,
   margin: 10,
   qrOptions: { typeNumber: '0', mode: 'Byte', errorCorrectionLevel: 'Q' },
-  imageOptions: {
-    hideBackgroundDots: true,
-    imageSize: 0.3,
-    margin: 0,
-    crossOrigin: 'anonymous',
-  },
+  imageOptions: { hideBackgroundDots: true, imageSize: 0.4, margin: 2 },
   dotsOptions: { type: 'dots', color: '#000000', gradient: null },
   backgroundOptions: { color: '#ffffff', gradient: null },
   image: props.image,
@@ -79,16 +72,6 @@ const options = {
 const qrCode = new QRCodeStyling(options)
 const qrCodeEl = ref(null)
 
-function updateIcon(show) {
-  qrCode.update({
-    image: show ? props.image : '',
-  })
-}
-
-watch(showIcon, (show) => {
-  updateIcon(show)
-})
-
 function updateColor(newColor) {
   qrCode.update({
     dotsOptions: { type: 'dots', color: newColor, gradient: null },
@@ -111,7 +94,6 @@ function downloadQRCode() {
 
 onMounted(() => {
   qrCode.append(qrCodeEl.value)
-  updateIcon(showIcon.value)
 })
 </script>
 
@@ -121,26 +103,24 @@ onMounted(() => {
       ref="qrCodeEl"
       :data-text="data"
     />
-    <div class="flex items-center gap-4">
-      <div class="flex items-center gap-2">
-        <div class="flex items-center gap-2 px-3 py-2 border rounded-md">
-          <Palette class="w-4 h-4" />
+    <div class="flex items-center gap-2">
+      <div class="relative flex items-center">
+        <div
+          class="w-8 h-8 rounded-full border cursor-pointer overflow-hidden"
+          :style="{ backgroundColor: color }"
+        >
           <input
             v-model="color"
             type="color"
-            class="w-20 h-8 rounded cursor-pointer"
+            class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
             title="Change QR code color"
           >
         </div>
-        <Button variant="outline" @click="downloadQRCode">
-          <Download class="w-4 h-4 mr-2" />
-          Download QR Code
-        </Button>
-      </div>
-      <div class="flex items-center gap-2">
-        <span class="text-sm text-gray-500">Icon</span>
-        <Switch v-model="showIcon" />
       </div>
+      <Button variant="outline" @click="downloadQRCode">
+        <Download class="w-4 h-4 mr-2" />
+        Download QR Code
+      </Button>
     </div>
   </div>
 </template>