fix: correctly sync shared link download with metadata toggle

web/src/lib/components/SharedLinkFormFields.spec.ts

@@ -0,0 +1,34 @@
+import { render } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import SharedLinkFormFields from './SharedLinkFormFields.svelte';
+
+describe('SharedLinkFormFields component', () => {
+  const isChecked = (element: Element) =>
+    element instanceof HTMLInputElement ? element.checked : element.getAttribute('aria-checked') === 'true';
+
+  it('turns downloads off when metadata is disabled', async () => {
+    const { container } = render(SharedLinkFormFields, {
+      props: {
+        slug: '',
+        password: '',
+        description: '',
+        allowDownload: true,
+        allowUpload: false,
+        showMetadata: true,
+        expiresAt: null,
+      },
+    });
+    const user = userEvent.setup();
+
+    const switches = Array.from(container.querySelectorAll('[role="switch"], input[type="checkbox"]'));
+    expect(switches).toHaveLength(3);
+
+    const [showMetadataSwitch, allowDownloadSwitch] = switches;
+    expect(isChecked(allowDownloadSwitch)).toBe(true);
+
+    await user.click(showMetadataSwitch);
+
+    expect(isChecked(showMetadataSwitch)).toBe(false);
+    expect(isChecked(allowDownloadSwitch)).toBe(false);
+  });
+});

web/src/lib/components/SharedLinkFormFields.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import SharedLinkExpiration from '$lib/components/SharedLinkExpiration.svelte';
+  import { Field, Input, PasswordInput, Switch, Text } from '@immich/ui';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    slug: string;
+    password: string;
+    description: string;
+    allowDownload: boolean;
+    allowUpload: boolean;
+    showMetadata: boolean;
+    expiresAt: string | null;
+    createdAt?: string;
+  };
+
+  let {
+    slug = $bindable(),
+    password = $bindable(),
+    description = $bindable(),
+    allowDownload = $bindable(),
+    allowUpload = $bindable(),
+    showMetadata = $bindable(),
+    expiresAt = $bindable(),
+    createdAt,
+  }: Props = $props();
+
+  $effect(() => {
+    if (!showMetadata && allowDownload) {
+      allowDownload = false;
+    }
+  });
+</script>
+
+<div class="flex flex-col gap-4 mt-4">
+  <div>
+    <Field label={$t('custom_url')} description={$t('shared_link_custom_url_description')}>
+      <Input bind:value={slug} autocomplete="off" />
+    </Field>
+    {#if slug}
+      <Text size="tiny" color="muted" class="pt-2 break-all">/s/{encodeURIComponent(slug)}</Text>
+    {/if}
+  </div>
+
+  <Field label={$t('password')} description={$t('shared_link_password_description')}>
+    <PasswordInput bind:value={password} autocomplete="new-password" />
+  </Field>
+
+  <Field label={$t('description')}>
+    <Input bind:value={description} autocomplete="off" />
+  </Field>
+
+  <SharedLinkExpiration {createdAt} bind:expiresAt />
+  <Field label={$t('show_metadata')}>
+    <Switch bind:checked={showMetadata} />
+  </Field>
+
+  <Field label={$t('allow_public_user_to_download')} disabled={!showMetadata}>
+    <Switch bind:checked={allowDownload} />
+  </Field>
+
+  <Field label={$t('allow_public_user_to_upload')}>
+    <Switch bind:checked={allowUpload} />
+  </Field>
+</div>

web/src/lib/modals/SharedLinkCreateModal.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import SharedLinkExpiration from '$lib/components/SharedLinkExpiration.svelte';
+  import SharedLinkFormFields from '$lib/components/SharedLinkFormFields.svelte';
   import { handleCreateSharedLink } from '$lib/services/shared-link.service';
   import { SharedLinkType } from '@immich/sdk';
-  import { Field, FormModal, Input, PasswordInput, Switch, Text } from '@immich/ui';
+  import { FormModal } from '@immich/ui';
   import { mdiLink } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -24,12 +24,6 @@
 
   let type = $derived(albumId ? SharedLinkType.Album : SharedLinkType.Individual);
 
-  $effect(() => {
-    if (!showMetadata) {
-      allowDownload = false;
-    }
-  });
-
   const onSubmit = async () => {
     const success = await handleCreateSharedLink({
       type,
@@ -65,36 +59,13 @@
     <div>{$t('create_link_to_share_description')}</div>
   {/if}
 
-  <div class="flex flex-col gap-4 mt-4">
-    <div>
-      <Field label={$t('custom_url')} description={$t('shared_link_custom_url_description')}>
-        <Input bind:value={slug} autocomplete="off" />
-      </Field>
-      {#if slug}
-        <Text size="tiny" color="muted" class="pt-2 break-all">/s/{encodeURIComponent(slug)}</Text>
-      {/if}
-    </div>
-
-    <Field label={$t('password')} description={$t('shared_link_password_description')}>
-      <PasswordInput bind:value={password} autocomplete="new-password" />
-    </Field>
-
-    <Field label={$t('description')}>
-      <Input bind:value={description} autocomplete="off" />
-    </Field>
-
-    <SharedLinkExpiration bind:expiresAt />
-
-    <Field label={$t('show_metadata')}>
-      <Switch bind:checked={showMetadata} />
-    </Field>
-
-    <Field label={$t('allow_public_user_to_download')} disabled={!showMetadata}>
-      <Switch bind:checked={allowDownload} />
-    </Field>
-
-    <Field label={$t('allow_public_user_to_upload')}>
-      <Switch bind:checked={allowUpload} />
-    </Field>
-  </div>
+  <SharedLinkFormFields
+    bind:slug
+    bind:password
+    bind:description
+    bind:allowDownload
+    bind:allowUpload
+    bind:showMetadata
+    bind:expiresAt
+  />
 </FormModal>

web/src/routes/(user)/shared-links/(list)/[id]/edit/+page.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import SharedLinkExpiration from '$lib/components/SharedLinkExpiration.svelte';
+  import SharedLinkFormFields from '$lib/components/SharedLinkFormFields.svelte';
   import { Route } from '$lib/route';
   import { handleUpdateSharedLink } from '$lib/services/shared-link.service';
   import { SharedLinkType } from '@immich/sdk';
-  import { Field, FormModal, Input, PasswordInput, Switch, Text } from '@immich/ui';
+  import { FormModal } from '@immich/ui';
   import { mdiLink } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
@@ -61,36 +61,14 @@
     </div>
   {/if}
 
-  <div class="flex flex-col gap-4 mt-4">
-    <div>
-      <Field label={$t('custom_url')} description={$t('shared_link_custom_url_description')}>
-        <Input bind:value={slug} autocomplete="off" />
-      </Field>
-      {#if slug}
-        <Text size="tiny" color="muted" class="pt-2">/s/{encodeURIComponent(slug)}</Text>
-      {/if}
-    </div>
-
-    <Field label={$t('password')} description={$t('shared_link_password_description')}>
-      <PasswordInput bind:value={password} autocomplete="new-password" />
-    </Field>
-
-    <Field label={$t('description')}>
-      <Input bind:value={description} autocomplete="off" />
-    </Field>
-
-    <SharedLinkExpiration createdAt={sharedLink.createdAt} bind:expiresAt />
-
-    <Field label={$t('show_metadata')}>
-      <Switch bind:checked={showMetadata} />
-    </Field>
-
-    <Field label={$t('allow_public_user_to_download')} disabled={!showMetadata}>
-      <Switch bind:checked={allowDownload} />
-    </Field>
-
-    <Field label={$t('allow_public_user_to_upload')}>
-      <Switch bind:checked={allowUpload} />
-    </Field>
-  </div>
+  <SharedLinkFormFields
+    bind:slug
+    bind:password
+    bind:description
+    bind:allowDownload
+    bind:allowUpload
+    bind:showMetadata
+    bind:expiresAt
+    createdAt={sharedLink.createdAt}
+  />
 </FormModal>