feat: add QR code for shared link

i18n/cs.json

@@ -773,6 +773,7 @@
   "force_re-scan_library_files": "Vynucené prohledání všech souborů knihovny",
   "forward": "Dopředu",
   "general": "Obecné",
+  "generate_qr_code": "Vygenerovat QR kod",
   "get_help": "Získat pomoc",
   "getting_started": "Začínáme",
   "go_back": "Přejít zpět",

i18n/en.json

@@ -732,6 +732,7 @@
   "folders_feature_description": "Browsing the folder view for the photos and videos on the file system",
   "forward": "Forward",
   "general": "General",
+  "generate_qr_code": "Generate QR code",
   "get_help": "Get Help",
   "getting_started": "Getting Started",
   "go_back": "Go back",

i18n/sk.json

@@ -580,6 +580,7 @@
   "force_re-scan_library_files": "",
   "forward": "",
   "general": "Všeobecné",
+  "generate_qr_code": "Vygenerovat QR kod",
   "get_help": "",
   "getting_started": "",
   "go_back": "",

web/package.json

@@ -84,6 +84,7 @@
     "svelte-i18n": "^4.0.0",
     "svelte-local-storage-store": "^0.6.4",
     "svelte-maplibre": "^0.9.13",
+    "svelte-qrcode-image": "^2.0.0-alpha.1",
     "thumbhash": "^0.1.1"
   },
   "volta": {

web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte

@@ -15,6 +15,7 @@
   import { locale } from '$lib/stores/preferences.store';
   import { DateTime, Duration } from 'luxon';
   import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
+  import { QRCodeImage } from 'svelte-qrcode-image';
 
   export let onClose: () => void;
   export let albumId: string | undefined = undefined;
@@ -23,6 +24,8 @@
   export let onCreated: () => void = () => {};
 
   let sharedLink: string | null = null;
+  let QRCodeGenerated: boolean;
+  let QRCodeWidth: number = 376;
   let description = '';
   let allowDownload = true;
   let allowUpload = false;
@@ -99,6 +102,10 @@
     }
   };
 
+  const generateQRCode = () => {
+    QRCodeGenerated = true;
+  };
+
   const handleEditLink = async () => {
     if (!editingLink) {
       return;
@@ -218,6 +225,17 @@
             number={true}
           />
         </div>
+        <div class="mt-3" id="qrcode">
+          {#if sharedLink}
+            {#if !QRCodeGenerated}
+              <Button size="sm" fullwidth on:click={generateQRCode}>{$t('generate_qr_code')}</Button>
+            {:else}
+              <div class="container">
+                <QRCodeImage text={sharedLink} displayStyle="border-style: dotted;" displayWidth={QRCodeWidth} />
+              </div>
+            {/if}
+          {/if}
+        </div>
       </div>
     </div>
   </section>