feat: QR Codes (#226)

* code gen updates

* qrcode support

* remove opacity on toast

* update item view to use tab-like pages

* adjust view for cards

* fix old API calls for ioutils

* move embed

* extract QR code

* add docs for QR codes

* add QR code

frontend/components/App/Toast.vue

@@ -4,7 +4,7 @@
       <div
         v-for="(notify, index) in notifications.slice(0, 4)"
         :key="notify.id"
-        class="my-2 w-[300px] rounded-md p-3 text-sm text-white opacity-75"
+        class="my-2 w-[300px] rounded-md p-3 text-sm text-white"
         :class="{
           'bg-primary': notify.type === 'info',
           'bg-red-600': notify.type === 'error',

frontend/components/Item/Card.vue

@@ -1,7 +1,7 @@
 <template>
   <NuxtLink class="group card rounded-md" :to="`/item/${item.id}`">
-    <div class="rounded-t flex flex-col bg-neutral text-neutral-content p-5">
-      <h2 class="text-base mb-4 last:mb-0 font-bold two-line min-h-[48px]">{{ item.name }}</h2>
+    <div class="rounded-t flex flex-col justify-center bg-neutral text-neutral-content p-5">
+      <h2 class="text-base mb-2 last:mb-0 font-bold two-line">{{ item.name }}</h2>
       <NuxtLink
         v-if="item.location"
         class="inline-flex text-sm items-center hover:link"

frontend/components/global/PageQRCode.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="dropdown dropdown-left">
+    <slot>
+      <label tabindex="0" class="btn btn-circle btn-sm">
+        <Icon name="mdi-qrcode" />
+      </label>
+    </slot>
+    <div tabindex="0" class="card compact dropdown-content shadow-lg bg-base-100 rounded-box w-64">
+      <div class="card-body">
+        <h2 class="text-center">Page URL</h2>
+        <img :src="getQRCodeUrl()" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  const api = useUserApi();
+
+  function getQRCodeUrl(): string {
+    const currentURL = window.location.href;
+
+    return `/api/v1/qrcode?data=${encodeURIComponent(currentURL)}&access_token=${api.items.attachmentToken}`;
+  }
+</script>
+
+<style lang="scss" scoped></style>