feat: view qr code from share modal (#17544)

i18n/en.json

@@ -1371,6 +1371,7 @@
   "view_next_asset": "View next asset",
   "view_previous_asset": "View previous asset",
   "view_stack": "View Stack",
+  "view_qr_code": "View QR code",
   "visibility_changed": "Visibility changed for {count, plural, one {# person} other {# people}}",
   "waiting": "Waiting",
   "warning": "Warning",

web/src/lib/components/album-page/album-shared-link.svelte

@@ -1,17 +1,20 @@
 <script lang="ts">
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import SharedLinkCopy from '$lib/components/sharedlinks-page/actions/shared-link-copy.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import type { AlbumResponseDto, SharedLinkResponseDto } from '@immich/sdk';
   import { Text } from '@immich/ui';
+  import { mdiQrcode } from '@mdi/js';
   import { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
 
   type Props = {
     album: AlbumResponseDto;
     sharedLink: SharedLinkResponseDto;
+    onViewQrCode: () => void;
   };
 
-  const { album, sharedLink }: Props = $props();
+  const { album, sharedLink, onViewQrCode }: Props = $props();
 
   const getShareProperties = () =>
     [
@@ -37,5 +40,8 @@
     <Text size="small">{sharedLink.description || album.albumName}</Text>
     <Text size="tiny" color="muted">{getShareProperties()}</Text>
   </div>
+  <div class="flex">
+    <CircleIconButton title={$t('view_qr_code')} icon={mdiQrcode} onclick={onViewQrCode} />
     <SharedLinkCopy link={sharedLink} />
+  </div>
 </div>

web/src/lib/components/album-page/user-selection-modal.svelte

@@ -3,7 +3,10 @@
   import Dropdown from '$lib/components/elements/dropdown.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
+  import QrCodeModal from '$lib/components/shared-components/qr-code-modal.svelte';
   import { AppRoute } from '$lib/constants';
+  import { serverConfig } from '$lib/stores/server-config.store';
+  import { makeSharedLinkUrl } from '$lib/utils';
   import {
     AlbumUserRole,
     getAllSharedLinks,
@@ -31,6 +34,11 @@
   let users: UserResponseDto[] = $state([]);
   let selectedUsers: Record<string, { user: UserResponseDto; role: AlbumUserRole }> = $state({});
 
+  let sharedLinkUrl = $state('');
+  const handleViewQrCode = (sharedLink: SharedLinkResponseDto) => {
+    sharedLinkUrl = makeSharedLinkUrl($serverConfig.externalDomain, sharedLink.key);
+  };
+
   const roleOptions: Array<{ title: string; value: AlbumUserRole | 'none'; icon?: string }> = [
     { title: $t('role_editor'), value: AlbumUserRole.Editor, icon: mdiPencil },
     { title: $t('role_viewer'), value: AlbumUserRole.Viewer, icon: mdiEye },
@@ -68,7 +76,10 @@
   };
 </script>
 
-<FullScreenModal title={$t('share')} showLogo {onClose}>
+{#if sharedLinkUrl}
+  <QrCodeModal title={$t('view_link')} onClose={() => (sharedLinkUrl = '')} value={sharedLinkUrl} />
+{:else}
+  <FullScreenModal title={$t('share')} showLogo {onClose}>
     {#if Object.keys(selectedUsers).length > 0}
       <div class="mb-2 py-2 sticky">
         <p class="text-xs font-medium">{$t('selected')}</p>
@@ -119,7 +130,11 @@
           {#each users as user (user.id)}
             {#if !Object.keys(selectedUsers).includes(user.id)}
               <div class="flex place-items-center transition-all hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl">
-              <button type="button" onclick={() => handleToggle(user)} class="flex w-full place-items-center gap-4 p-4">
+                <button
+                  type="button"
+                  onclick={() => handleToggle(user)}
+                  class="flex w-full place-items-center gap-4 p-4"
+                >
                   <UserAvatar {user} size="md" />
                   <div class="text-left flex-grow">
                     <p class="text-immich-fg dark:text-immich-dark-fg">
@@ -162,11 +177,12 @@
 
         <Stack gap={4}>
           {#each sharedLinks as sharedLink (sharedLink.id)}
-          <AlbumSharedLink {album} {sharedLink} />
+            <AlbumSharedLink {album} {sharedLink} onViewQrCode={() => handleViewQrCode(sharedLink)} />
           {/each}
         </Stack>
       {/if}
 
       <Button leadingIcon={mdiLink} size="small" shape="round" fullWidth onclick={onShare}>{$t('create_link')}</Button>
     </Stack>
-</FullScreenModal>
+  </FullScreenModal>
+{/if}

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

@@ -1,20 +1,20 @@
 <script lang="ts">
   import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
+  import QrCodeModal from '$lib/components/shared-components/qr-code-modal.svelte';
   import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
   import { SettingInputFieldType } from '$lib/constants';
   import { locale } from '$lib/stores/preferences.store';
   import { serverConfig } from '$lib/stores/server-config.store';
-  import { copyToClipboard, makeSharedLinkUrl } from '$lib/utils';
+  import { makeSharedLinkUrl } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { SharedLinkType, createSharedLink, updateSharedLink, type SharedLinkResponseDto } from '@immich/sdk';
-  import { Button, HStack, IconButton, Input } from '@immich/ui';
+  import { Button } from '@immich/ui';
-  import { mdiContentCopy, mdiLink } from '@mdi/js';
+  import { mdiLink } from '@mdi/js';
   import { DateTime, Duration } from 'luxon';
   import { t } from 'svelte-i18n';
   import { NotificationType, notificationController } from '../notification/notification';
   import SettingInputField from '../settings/setting-input-field.svelte';
   import SettingSwitch from '../settings/setting-switch.svelte';
-  import QRCode from '$lib/components/shared-components/qrcode.svelte';
 
   interface Props {
     onClose: () => void;
@@ -41,7 +41,6 @@
   let password = $state('');
   let shouldChangeExpirationTime = $state(false);
   let enablePassword = $state(false);
-  let modalWidth = $state(0);
 
   const expirationOptions: [number, Intl.RelativeTimeFormatUnit][] = [
     [30, 'minutes'],
@@ -248,26 +247,5 @@
     {/snippet}
   </FullScreenModal>
 {:else}
-  <FullScreenModal title={getTitle()} icon={mdiLink} {onClose}>
+  <QrCodeModal title={$t('view_link')} {onClose} value={sharedLink} />
-    <div class="w-full">
-      <div class="w-full py-2 px-10">
-        <div bind:clientWidth={modalWidth} class="w-full">
-          <QRCode value={sharedLink} width={modalWidth} />
-        </div>
-      </div>
-      <HStack class="w-full pt-3" gap={1}>
-        <Input bind:value={sharedLink} disabled class="flex flex-row" />
-        <div>
-          <IconButton
-            variant="ghost"
-            shape="round"
-            color="secondary"
-            icon={mdiContentCopy}
-            onclick={() => (sharedLink ? copyToClipboard(sharedLink) : '')}
-            aria-label={$t('copy_link_to_clipboard')}
-          />
-        </div>
-      </HStack>
-    </div>
-  </FullScreenModal>
 {/if}

web/src/lib/components/shared-components/qr-code-modal.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
+  import QRCode from '$lib/components/shared-components/qrcode.svelte';
+  import { copyToClipboard } from '$lib/utils';
+  import { HStack, IconButton, Input } from '@immich/ui';
+  import { mdiContentCopy, mdiLink } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    title: string;
+    onClose: () => void;
+    value: string;
+  };
+
+  let { onClose, title, value }: Props = $props();
+
+  let modalWidth = $state(0);
+</script>
+
+<FullScreenModal {title} icon={mdiLink} {onClose}>
+  <div class="w-full">
+    <div class="w-full py-2 px-10">
+      <div bind:clientWidth={modalWidth} class="w-full">
+        <QRCode {value} width={modalWidth} />
+      </div>
+    </div>
+    <HStack class="w-full pt-3" gap={1}>
+      <Input bind:value disabled class="flex flex-row" />
+      <div>
+        <IconButton
+          variant="ghost"
+          shape="round"
+          color="secondary"
+          icon={mdiContentCopy}
+          onclick={() => (value ? copyToClipboard(value) : '')}
+          aria-label={$t('copy_link_to_clipboard')}
+        />
+      </div>
+    </HStack>
+  </div>
+</FullScreenModal>