chore: svelte 5 🎉 (#13738)

chore: svelte 5 Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com> Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
2025-11-14 17:36:12 +00:00 · 2024-11-02 16:49:07 +01:00 · 2024-11-02 16:49:07 +01:00 · eadcbd52fb
commit eadcbd52fb
parent fed882a28a
61 changed files with 287 additions and 217 deletions
--- a/web/src/lib/mocks/animate.mock.ts
+++ b/web/src/lib/mocks/animate.mock.ts
@ -0,0 +1,17 @@
+import { tick } from 'svelte';
+import { vi } from 'vitest';
+
+export const getAnimateMock = () =>
+  vi.fn().mockImplementation(() => {
+    let onfinish: (() => void) | null = null;
+    void tick().then(() => onfinish?.());
+
+    return {
+      set onfinish(fn: () => void) {
+        onfinish = fn;
+      },
+      cancel() {
+        onfinish = null;
+      },
+    };
+  });
--- a/web/src/lib/components/admin-page/jobs/job-tile.svelte
+++ b/web/src/lib/components/admin-page/jobs/job-tile.svelte
@ -14,14 +14,14 @@
    mdiPlay,
    mdiSelectionSearch,
  } from '@mdi/js';
-  import { type ComponentType } from 'svelte';
+  import { type Component } from 'svelte';
  import { t } from 'svelte-i18n';
  import JobTileButton from './job-tile-button.svelte';
  import JobTileStatus from './job-tile-status.svelte';

  export let title: string;
  export let subtitle: string | undefined;
-  export let description: ComponentType | undefined;
+  export let description: Component | undefined;
  export let jobCounts: JobCountsDto;
  export let queueStatus: QueueStatusDto;
  export let icon: string;
--- a/web/src/lib/components/admin-page/jobs/jobs-panel.svelte
+++ b/web/src/lib/components/admin-page/jobs/jobs-panel.svelte
@ -19,7 +19,7 @@
    mdiTagFaces,
    mdiVideo,
  } from '@mdi/js';
-  import type { ComponentType } from 'svelte';
+  import type { Component } from 'svelte';
  import JobTile from './job-tile.svelte';
  import StorageMigrationDescription from './storage-migration-description.svelte';
  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
@ -30,7 +30,7 @@
  interface JobDetails {
    title: string;
    subtitle?: string;
-    description?: ComponentType;
+    description?: Component;
    allText?: string;
    refreshText?: string;
    missingText: string;
@ -56,6 +56,7 @@
    await handleCommand(jobId, dto);
  };

+  // svelte-ignore reactive_declaration_non_reactive_property
  $: jobDetails = <Partial<Record<JobName, JobDetails>>>{
    [JobName.ThumbnailGeneration]: {
      icon: mdiFileJpgBox,
--- a/web/src/lib/components/album-page/albums-controls.svelte
+++ b/web/src/lib/components/album-page/albums-controls.svelte
@ -87,6 +87,7 @@
    }
  }

+  // svelte-ignore reactive_declaration_non_reactive_property
  $: {
    if (selectedGroupOption.id === AlbumGroupBy.None) {
      groupIcon = mdiFolderRemoveOutline;
@ -96,8 +97,10 @@
    }
  }

+  // svelte-ignore reactive_declaration_non_reactive_property
  $: sortIcon = $albumViewSettings.sortOrder === SortOrder.Desc ? mdiArrowDownThin : mdiArrowUpThin;

+  // svelte-ignore reactive_declaration_non_reactive_property
  $: albumFilterNames = ((): Record<AlbumFilter, string> => {
    return {
      [AlbumFilter.All]: $t('all'),
@ -106,6 +109,7 @@
    };
  })();

+  // svelte-ignore reactive_declaration_non_reactive_property
  $: albumSortByNames = ((): Record<AlbumSortBy, string> => {
    return {
      [AlbumSortBy.Title]: $t('sort_title'),
@ -117,6 +121,7 @@
    };
  })();

+  // svelte-ignore reactive_declaration_non_reactive_property
  $: albumGroupByNames = ((): Record<AlbumGroupBy, string> => {
    return {
      [AlbumGroupBy.None]: $t('group_no'),
--- a/web/src/lib/components/album-page/albums-list.svelte
+++ b/web/src/lib/components/album-page/albums-list.svelte
@ -135,6 +135,7 @@
  let isOpen = false;

  // Step 1: Filter between Owned and Shared albums, or both.
+  // svelte-ignore reactive_declaration_non_reactive_property
  $: {
    switch (userSettings.filter) {
      case AlbumFilter.Owned: {
--- a/web/src/lib/components/album-page/albums-table-header.svelte
+++ b/web/src/lib/components/album-page/albums-table-header.svelte
@ -13,7 +13,7 @@
      $albumViewSettings.sortOrder = option.defaultOrder;
    }
  };
-
+  // svelte-ignore reactive_declaration_non_reactive_property
  $: albumSortByNames = ((): Record<AlbumSortBy, string> => {
    return {
      [AlbumSortBy.Title]: $t('sort_title'),
--- a/web/src/lib/components/asset-viewer/activity-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/activity-viewer.svelte
@ -293,7 +293,7 @@
              class="h-[18px] {disabled
                ? 'cursor-not-allowed'
                : ''} w-full max-h-56 pr-2 items-center overflow-y-auto leading-4 outline-none resize-none bg-gray-200"
-            />
+            ></textarea>
          </div>
          {#if isSendingMessage}
            <div class="flex items-end place-items-center pb-2 ml-0">
--- a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.spec.ts
+++ b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.spec.ts
@ -15,13 +15,31 @@ describe('AssetViewerNavBar component', () => {
    showShareButton: false,
    onZoomImage: () => {},
    onCopyImage: () => {},
+    onAction: () => {},
+    onRunJob: () => {},
+    onPlaySlideshow: () => {},
+    onShowDetail: () => {},
+    onClose: () => {},
  };

+  beforeAll(() => {
+    Element.prototype.animate = vi.fn().mockImplementation(() => ({
+      cancel: () => {},
+    }));
+    vi.stubGlobal(
+      'ResizeObserver',
+      vi.fn(() => ({ observe: vi.fn(), unobserve: vi.fn(), disconnect: vi.fn() })),
+    );
+  });
+
  afterEach(() => {
-    vi.resetAllMocks();
    resetSavedUser();
  });

+  afterAll(() => {
+    vi.restoreAllMocks();
+  });
+
  it('shows back button', () => {
    const asset = assetFactory.build({ isTrashed: false });
    const { getByTitle } = render(AssetViewerNavBar, { asset, ...additionalProps });
--- a/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
@ -61,6 +61,7 @@

  const sharedLink = getSharedLink();
  $: isOwner = $user && asset.ownerId === $user?.id;
+  // svelte-ignore reactive_declaration_non_reactive_property
  $: showDownloadButton = sharedLink ? sharedLink.allowDownload : !asset.isOffline;
  // $: showEditorButton =
  //   isOwner &&
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@ -598,7 +598,7 @@

            {#if stackedAsset.id == asset.id}
              <div class="w-full flex place-items-center place-content-center">
-                <div class="w-2 h-2 bg-white rounded-full flex mt-[2px]" />
+                <div class="w-2 h-2 bg-white rounded-full flex mt-[2px]"></div>
              </div>
            {/if}
          </div>
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@ -154,7 +154,7 @@
        <div class="border border-t-0 border-red-400 bg-red-100 px-4 py-3 text-red-700">
          <p>
            {#if $user?.isAdmin}
-              <p>{$t('admin.asset_offline_description')}</p>
+              {$t('admin.asset_offline_description')}
            {:else}
              {$t('asset_offline_description')}
            {/if}
--- a/web/src/lib/components/asset-viewer/download-panel.svelte
+++ b/web/src/lib/components/asset-viewer/download-panel.svelte
@ -32,7 +32,7 @@
            </div>
            <div class="flex place-items-center gap-2">
              <div class="h-[7px] w-full rounded-full bg-gray-200 dark:bg-gray-700">
-                <div class="h-[7px] rounded-full bg-immich-primary" style={`width: ${download.percentage}%`} />
+                <div class="h-[7px] rounded-full bg-immich-primary" style={`width: ${download.percentage}%`}></div>
              </div>
              <p class="min-w-[4em] whitespace-nowrap text-right">
                <span class="text-immich-primary">
--- a/web/src/lib/components/asset-viewer/editor/editor-panel.svelte
+++ b/web/src/lib/components/asset-viewer/editor/editor-panel.svelte
@ -23,6 +23,7 @@
  export let onClose: () => void;

  let selectedType: string = editTypes[0].name;
+  // svelte-ignore reactive_declaration_non_reactive_property
  $: selectedTypeObj = editTypes.find((t) => t.name === selectedType) || editTypes[0];

  setTimeout(() => {
--- a/web/src/lib/components/asset-viewer/photo-sphere-viewer-adapter.svelte
+++ b/web/src/lib/components/asset-viewer/photo-sphere-viewer-adapter.svelte
@ -55,4 +55,4 @@
  });
 </script>

-<div class="h-full w-full mb-0" bind:this={container} />
+<div class="h-full w-full mb-0" bind:this={container}></div>
--- a/web/src/lib/components/asset-viewer/photo-viewer.spec.ts
+++ b/web/src/lib/components/asset-viewer/photo-viewer.spec.ts
@ -1,3 +1,4 @@
+import { getAnimateMock } from '$lib/__mocks__/animate.mock';
 import PhotoViewer from '$lib/components/asset-viewer/photo-viewer.svelte';
 import * as utils from '$lib/utils';
 import { AssetMediaSize } from '@immich/sdk';
@ -24,6 +25,10 @@ describe('PhotoViewer component', () => {
    getAssetThumbnailUrlSpy = vi.spyOn(utils, 'getAssetThumbnailUrl');
  });

+  beforeEach(() => {
+    Element.prototype.animate = getAnimateMock();
+  });
+
  afterEach(() => {
    vi.resetAllMocks();
  });
--- a/web/src/lib/components/asset-viewer/photo-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/photo-viewer.svelte
@ -193,7 +193,7 @@
        <div
          class="absolute border-solid border-white border-[3px] rounded-lg"
          style="top: {boundingbox.top}px; left: {boundingbox.left}px; height: {boundingbox.height}px; width: {boundingbox.width}px;"
-        />
+        ></div>
      {/each}
    </div>
  {/if}
--- a/web/src/lib/components/assets/thumbnail/test/image-thumbnail.spec.ts
+++ b/web/src/lib/components/assets/thumbnail/test/image-thumbnail.spec.ts
@ -3,9 +3,9 @@ import { render } from '@testing-library/svelte';

 describe('ImageThumbnail component', () => {
  beforeAll(() => {
-    Object.defineProperty(HTMLImageElement.prototype, 'complete', {
-      value: true,
-    });
+    Element.prototype.animate = vi.fn().mockImplementation(() => ({
+      cancel: () => {},
+    }));
  });

  it('shows thumbhash while image is loading', () => {
--- a/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/image-thumbnail.svelte
@ -96,5 +96,5 @@
    class:rounded-full={circle}
    draggable="false"
    out:fade={{ duration: THUMBHASH_FADE_DURATION }}
-  />
+  ></canvas>
 {/if}
--- a/web/src/lib/components/assets/thumbnail/thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/thumbnail.svelte
@ -218,6 +218,7 @@
          href={currentUrlReplaceAssetId(asset.id)}
          on:click={(evt) => evt.preventDefault()}
          tabindex={0}
+          aria-label="Thumbnail URL"
        >
        </a>
      {/if}
@ -255,12 +256,12 @@
        <div
          class="absolute z-10 h-full w-full bg-gradient-to-b from-black/25 via-[transparent_25%] opacity-0 transition-opacity group-hover:opacity-100"
          class:rounded-xl={selected}
-        />
+        ></div>

        <!-- Outline on focus -->
        <div
          class="absolute size-full group-focus-visible:outline outline-4 -outline-offset-4 outline-immich-primary"
-        />
+        ></div>

        <!-- Favorite asset star -->
        {#if !isSharedLink() && asset.isFavorite}
@ -339,7 +340,7 @@
          class="absolute top-0 h-full w-full bg-immich-primary opacity-40"
          in:fade={{ duration: 100 }}
          out:fade={{ duration: 100 }}
-        />
+        ></div>
      {/if}
    </div>
  {/if}
--- a/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
@ -113,7 +113,10 @@
    }}
    on:timeupdate={({ currentTarget }) => {
      const remaining = currentTarget.duration - currentTarget.currentTime;
-      remainingSeconds = Math.min(Math.ceil(remaining), durationInSeconds);
+      remainingSeconds = Math.min(
+        Math.ceil(Number.isNaN(remaining) ? Number.POSITIVE_INFINITY : remaining),
+        durationInSeconds,
+      );
    }}
-  />
+  ></video>
 {/if}
--- a/web/src/lib/components/elements/dropdown.svelte
+++ b/web/src/lib/components/elements/dropdown.svelte
@ -102,7 +102,7 @@
              {renderedOption.title}
            </p>
          {:else}
-            <div />
+            <div></div>
            <p class="justify-self-start">
              {renderedOption.title}
            </p>
--- a/web/src/lib/components/elements/slider.svelte
+++ b/web/src/lib/components/elements/slider.svelte
@ -28,11 +28,11 @@
  {#if disabled}
    <span
      class="slider slider-disabled cursor-not-allowed border border-transparent before:border before:border-transparent"
-    />
+    ></span>
  {:else}
    <span
      class="slider slider-enabled cursor-pointer border-2 border-transparent before:border-2 before:border-transparent peer-focus-visible:outline before:peer-focus-visible:outline peer-focus-visible:dark:outline-gray-200 before:peer-focus-visible:dark:outline-gray-200 peer-focus-visible:outline-gray-600 before:peer-focus-visible:outline-gray-600 peer-focus-visible:dark:border-black before:peer-focus-visible:dark:border-black peer-focus-visible:border-white before:peer-focus-visible:border-white"
-    />
+    ></span>
  {/if}
 </label>

--- a/web/src/lib/components/faces-page/face-thumbnail.svelte
+++ b/web/src/lib/components/faces-page/face-thumbnail.svelte
@ -36,14 +36,14 @@
    class:hover:opacity-100={selectable}
    class:rounded-full={circle}
    class:rounded-lg={!circle}
-  />
+  ></div>

  {#if selected}
    <div
      class="absolute left-0 top-0 h-full w-full bg-blue-500/80"
      class:rounded-full={circle}
      class:rounded-lg={!circle}
-    />
+    ></div>
  {/if}

  {#if person.name}
--- a/web/src/lib/components/faces-page/manage-people-visibility.svelte
+++ b/web/src/lib/components/faces-page/manage-people-visibility.svelte
@ -44,6 +44,8 @@
    return personIsHidden;
  };

+  // svelte-ignore reactive_declaration_non_reactive_property
+  // svelte-ignore reactive_declaration_module_script_dependency
  $: toggleButtonOptions = ((): Record<ToggleVisibility, { icon: string; label: string }> => {
    return {
      [ToggleVisibility.HIDE_ALL]: { icon: mdiEyeOff, label: $t('hide_all_people') },
--- a/web/src/lib/components/faces-page/merge-face-selector.svelte
+++ b/web/src/lib/components/faces-page/merge-face-selector.svelte
@ -102,7 +102,7 @@
      {:else}
        {$t('merge_people')}
      {/if}
-      <div />
+      <div></div>
    </svelte:fragment>
    <svelte:fragment slot="trailing">
      <Button size={'sm'} disabled={!hasSelection} on:click={handleMerge}>
--- a/web/src/lib/components/faces-page/unmerge-face-selector.svelte
+++ b/web/src/lib/components/faces-page/unmerge-face-selector.svelte
@ -119,7 +119,7 @@
  <ControlAppBar {onClose}>
    <svelte:fragment slot="leading">
      <slot name="header" />
-      <div />
+      <div></div>
    </svelte:fragment>
    <svelte:fragment slot="trailing">
      <div class="flex gap-4">
--- a/web/src/lib/components/forms/api-key-secret.svelte
+++ b/web/src/lib/components/forms/api-key-secret.svelte
@ -18,7 +18,7 @@

  <div class="my-4 flex flex-col gap-2">
    <!-- <label class="immich-form-label" for="secret">{ $t("api_key") }</label> -->
-    <textarea class="immich-form-input" id="secret" name="secret" readonly={true} value={secret} />
+    <textarea class="immich-form-input" id="secret" name="secret" readonly={true} value={secret}></textarea>
  </div>

  <svelte:fragment slot="sticky-bottom">
--- a/web/src/lib/components/forms/edit-album-form.svelte
+++ b/web/src/lib/components/forms/edit-album-form.svelte
@ -52,7 +52,7 @@

        <div class="m-4 flex flex-col gap-2">
          <label class="immich-form-label" for="description">{$t('description')}</label>
-          <textarea class="immich-form-input" id="description" bind:value={description} />
+          <textarea class="immich-form-input" id="description" bind:value={description}></textarea>
        </div>
      </div>
    </div>
--- a/web/src/lib/components/i18n/test/format-message.spec.ts
+++ b/web/src/lib/components/i18n/test/format-message.spec.ts
@ -5,6 +5,8 @@ import { render, screen } from '@testing-library/svelte';
 import { init, locale, register, waitLocale, type Translations } from 'svelte-i18n';
 import { describe } from 'vitest';

+const getSanitizedHTML = (container: HTMLElement) => container.innerHTML.replaceAll('<!---->', '');
+
 describe('FormatMessage component', () => {
  beforeAll(async () => {
    register('en', () =>
@ -57,7 +59,7 @@ describe('FormatMessage component', () => {
      key: 'html' as Translations,
      values: { name: 'test' },
    });
-    expect(container.innerHTML).toBe('Hello <strong>test</strong>');
+    expect(getSanitizedHTML(container)).toBe('Hello <strong>test</strong>');
  });

  it('renders a message with html and plural', () => {
@ -65,7 +67,7 @@ describe('FormatMessage component', () => {
      key: 'plural' as Translations,
      values: { count: 1 },
    });
-    expect(container.innerHTML).toBe('You have <strong>1 item</strong>');
+    expect(getSanitizedHTML(container)).toBe('You have <strong>1 item</strong>');
  });

  it('protects agains XSS injection', () => {
@ -85,7 +87,7 @@ describe('FormatMessage component', () => {
      key: 'plural_with_html' as Translations,
      values: { count: 10 },
    });
-    expect(container.innerHTML).toBe('You have <strong>10</strong> items');
+    expect(getSanitizedHTML(container)).toBe('You have <strong>10</strong> items');
  });

  it('supports html tags inside select', () => {
@ -93,7 +95,7 @@ describe('FormatMessage component', () => {
      key: 'select_with_html' as Translations,
      values: { status: true },
    });
-    expect(container.innerHTML).toBe('Item is <strong>disabled</strong>');
+    expect(getSanitizedHTML(container)).toBe('Item is <strong>disabled</strong>');
  });

  it('supports html tags inside selectordinal', () => {
@ -101,6 +103,6 @@ describe('FormatMessage component', () => {
      key: 'ordinal_with_html' as Translations,
      values: { count: 4 },
    });
-    expect(container.innerHTML).toBe('<strong>4th</strong> item');
+    expect(getSanitizedHTML(container)).toBe('<strong>4th</strong> item');
  });
 });
--- a/web/src/lib/components/memory-page/memory-viewer.svelte
+++ b/web/src/lib/components/memory-page/memory-viewer.svelte
@ -267,14 +267,15 @@

        {#each current.memory.assets as asset, index}
          <a class="relative w-full py-2" href={asHref(asset)}>
-            <span class="absolute left-0 h-[2px] w-full bg-gray-500" />
+            <span class="absolute left-0 h-[2px] w-full bg-gray-500"></span>
            {#await resetPromise}
-              <span class="absolute left-0 h-[2px] bg-white" style:width={`${index < current.assetIndex ? 100 : 0}%`} />
+              <span class="absolute left-0 h-[2px] bg-white" style:width={`${index < current.assetIndex ? 100 : 0}%`}
+              ></span>
            {:then}
              <span
                class="absolute left-0 h-[2px] bg-white"
                style:width={`${index < current.assetIndex ? 100 : index > current.assetIndex ? 0 : $progress * 100}%`}
-              />
+              ></span>
            {/await}
          </a>
        {/each}
--- a/web/src/lib/components/photos-page/actions/asset-job-actions.svelte
+++ b/web/src/lib/components/photos-page/actions/asset-job-actions.svelte
@ -18,6 +18,7 @@

  const { clearSelect, getOwnedAssets } = getAssetControlContext();

+  // svelte-ignore reactive_declaration_non_reactive_property
  $: isAllVideos = [...getOwnedAssets()].every((asset) => asset.type === AssetTypeEnum.Video);

  const handleRunJob = async (name: AssetJobName) => {
--- a/web/src/lib/components/photos-page/asset-grid.svelte
+++ b/web/src/lib/components/photos-page/asset-grid.svelte
@ -766,7 +766,7 @@
 {#if showShortcuts}
  <ShowShortcuts onClose={() => (showShortcuts = !showShortcuts)} />
 {/if}
-{#if assetStore.buckets.length > 0}
+{#if $assetStore.buckets.length > 0}
  <Scrubber
    invisible={showSkeleton}
    {assetStore}
--- a/web/src/lib/components/photos-page/memory-lane.svelte
+++ b/web/src/lib/components/photos-page/memory-lane.svelte
@ -86,7 +86,7 @@
            </p>
            <div
              class="absolute left-0 top-0 z-0 h-full w-full rounded-xl bg-gradient-to-t from-black/40 via-transparent to-transparent transition-all hover:bg-black/20"
-            />
+            ></div>
          </a>
        {/if}
      {/each}
--- a/web/src/lib/components/shared-components/test/number-range-input.spec.ts
+++ b/web/src/lib/components/shared-components/test/number-range-input.spec.ts
@ -1,5 +1,5 @@
 import NumberRangeInput from '$lib/components/shared-components/number-range-input.svelte';
-import { act, render, type RenderResult } from '@testing-library/svelte';
+import { render, type RenderResult } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';

 describe('NumberRangeInput component', () => {
@ -8,13 +8,18 @@ describe('NumberRangeInput component', () => {
  let input: HTMLInputElement;

  beforeEach(() => {
-    sut = render(NumberRangeInput, { id: '', min: -90, max: 90, onInput: () => {} });
+    sut = render(NumberRangeInput, {
+      id: '',
+      min: -90,
+      max: 90,
+      onInput: () => {},
+    });
    input = sut.getByRole('spinbutton') as HTMLInputElement;
  });

  it('updates value', async () => {
    expect(input.value).toBe('');
-    await act(() => sut.component.$set({ value: 10 }));
+    await sut.rerender({ value: 10 });
    expect(input.value).toBe('10');
  });

--- a/web/src/lib/components/shared-components/album-selection-modal.svelte
+++ b/web/src/lib/components/shared-components/album-selection-modal.svelte
@ -51,12 +51,12 @@
    {#if loading}
      {#each { length: 3 } as _}
        <div class="flex animate-pulse gap-4 px-6 py-2">
-          <div class="h-12 w-12 rounded-xl bg-slate-200" />
+          <div class="h-12 w-12 rounded-xl bg-slate-200"></div>
          <div class="flex flex-col items-start justify-center gap-2">
-            <span class="h-4 w-36 animate-pulse bg-slate-200" />
+            <span class="h-4 w-36 animate-pulse bg-slate-200"></span>
            <div class="flex animate-pulse gap-1">
-              <span class="h-3 w-8 bg-slate-200" />
-              <span class="h-3 w-20 bg-slate-200" />
+              <span class="h-3 w-8 bg-slate-200"></span>
+              <span class="h-3 w-20 bg-slate-200"></span>
            </div>
          </div>
        </div>
--- a/web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
+++ b/web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
@ -52,6 +52,7 @@
    })),
  ];

+  // svelte-ignore reactive_declaration_non_reactive_property
  $: shareType = albumId ? SharedLinkType.Album : SharedLinkType.Individual;
  $: {
    if (!showMetadata) {
--- a/web/src/lib/components/shared-components/map/map.svelte
+++ b/web/src/lib/components/shared-components/map/map.svelte
@ -57,6 +57,7 @@
  let map: maplibregl.Map;
  let marker: maplibregl.Marker | null = null;

+  // svelte-ignore reactive_declaration_non_reactive_property
  $: style = (async () => {
    const config = await getServerConfig();
    const theme = $mapSettings.allowDarkMode ? $colorTheme.value : Theme.LIGHT;
--- a/web/src/lib/components/shared-components/navigation-loading-bar.svelte
+++ b/web/src/lib/components/shared-components/navigation-loading-bar.svelte
@ -27,6 +27,6 @@

 {#if showing}
  <div class="absolute left-0 top-0 z-[999999999] h-[3px] w-screen bg-white">
-    <span class="absolute h-[3px] bg-immich-primary" style:width={`${$progress}%`} />
+    <span class="absolute h-[3px] bg-immich-primary" style:width={`${$progress}%`}></span>
  </div>
 {/if}
--- a/web/src/lib/components/shared-components/notification/tests/notification-card.spec.ts
+++ b/web/src/lib/components/shared-components/notification/tests/notification-card.spec.ts
@ -79,6 +79,8 @@ describe('NotificationCard component', () => {
    });

    expect(sut.getByTestId('title')).toHaveTextContent('info');
-    expect(sut.getByTestId('message').innerHTML).toEqual('Notification <b>message</b> with <a href="link">link</a>');
+    expect(sut.getByTestId('message').innerHTML.replaceAll('<!---->', '')).toEqual(
+      'Notification <b>message</b> with <a href="link">link</a>',
+    );
  });
 });
--- a/web/src/lib/components/shared-components/notification/tests/notification-list.spec.ts
+++ b/web/src/lib/components/shared-components/notification/tests/notification-list.spec.ts
@ -1,3 +1,4 @@
+import { getAnimateMock } from '$lib/__mocks__/animate.mock';
 import '@testing-library/jest-dom';
 import { render, waitFor, type RenderResult } from '@testing-library/svelte';
 import { get } from 'svelte/store';
@ -10,10 +11,7 @@ function _getNotificationListElement(sut: RenderResult<NotificationList>): HTMLA

 describe('NotificationList component', () => {
  beforeAll(() => {
-    // https://testing-library.com/docs/svelte-testing-library/faq#why-arent-transition-events-running
-    vi.stubGlobal('requestAnimationFrame', (fn: FrameRequestCallback) => {
-      setTimeout(() => fn(Date.now()), 16);
-    });
+    Element.prototype.animate = getAnimateMock();
  });

  afterAll(() => {
@ -21,7 +19,7 @@ describe('NotificationList component', () => {
  });

  it('shows a notification when added and closes it automatically after the delay timeout', async () => {
-    const sut: RenderResult<NotificationList> = render(NotificationList);
+    const sut: RenderResult<NotificationList> = render(NotificationList, { intro: false });
    const status = await sut.findAllByRole('status');

    expect(status).toHaveLength(1);
--- a/web/src/lib/components/shared-components/notification/notification-card.svelte
+++ b/web/src/lib/components/shared-components/notification/notification-card.svelte
@ -15,6 +15,7 @@

  export let notification: Notification | ComponentNotification;

+  // svelte-ignore reactive_declaration_non_reactive_property
  $: icon = notification.type === NotificationType.Error ? mdiCloseCircleOutline : mdiInformationOutline;
  $: hoverStyle = notification.action.type === 'discard' ? 'hover:cursor-pointer' : '';

--- a/web/src/lib/components/shared-components/notification/notification.ts
+++ b/web/src/lib/components/shared-components/notification/notification.ts
@ -1,4 +1,4 @@
-import type { ComponentProps, ComponentType, SvelteComponent } from 'svelte';
+import type { Component as ComponentType } from 'svelte';
 import { writable } from 'svelte/store';

 export enum NotificationType {
@ -28,27 +28,26 @@ type NoopAction = { type: 'noop' };

 export type NotificationAction = DiscardAction | NoopAction;

-type Component<T extends ComponentType> = {
-  type: T;
-  props: ComponentProps<InstanceType<T>>;
+type Props = Record<string, unknown>;
+type Component<T extends Props> = {
+  type: ComponentType<T>;
+  props: T;
 };

 type BaseNotificationOptions<T, R extends keyof T> = Partial<Omit<T, 'id'>> & Pick<T, R>;

 export type NotificationOptions = BaseNotificationOptions<Notification, 'message'>;
-export type ComponentNotificationOptions<T extends ComponentType> = BaseNotificationOptions<
+export type ComponentNotificationOptions<T extends Props> = BaseNotificationOptions<
  ComponentNotification<T>,
  'component'
 >;

-export type ComponentNotification<T extends ComponentType = ComponentType<SvelteComponent>> = Omit<
-  Notification,
-  'message'
-> & {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type ComponentNotification<T extends Props = any> = Omit<Notification, 'message'> & {
  component: Component<T>;
 };

-export const isComponentNotification = <T extends ComponentType>(
+export const isComponentNotification = <T extends Props>(
  notification: Notification | ComponentNotification<T>,
 ): notification is ComponentNotification<T> => {
  return 'component' in notification;
@ -58,7 +57,7 @@ function createNotificationList() {
  const notificationList = writable<(Notification | ComponentNotification)[]>([]);
  let count = 1;

-  const show = <T>(options: T extends ComponentType ? ComponentNotificationOptions<T> : NotificationOptions) => {
+  const show = <T>(options: T extends Props ? ComponentNotificationOptions<T> : NotificationOptions) => {
    notificationList.update((currentList) => {
      currentList.push({
        id: count++,
--- a/web/src/lib/components/shared-components/password-field.svelte
+++ b/web/src/lib/components/shared-components/password-field.svelte
@ -6,7 +6,7 @@

  interface $$Props extends HTMLInputAttributes {
    password: string;
-    autocomplete: string;
+    autocomplete: AutoFill;
    required?: boolean;
    onInput?: (value: string) => void;
  }
--- a/web/src/lib/components/shared-components/progress-bar/progress-bar.svelte
+++ b/web/src/lib/components/shared-components/progress-bar/progress-bar.svelte
@ -86,5 +86,5 @@
 </script>

 {#if !hidden}
-  <span class="absolute left-0 h-[3px] bg-immich-primary shadow-2xl" style:width={`${$progress * 100}%`} />
+  <span class="absolute left-0 h-[3px] bg-immich-primary shadow-2xl" style:width={`${$progress * 100}%`}></span>
 {/if}
--- a/web/src/lib/components/shared-components/purchasing/purchase-content.svelte
+++ b/web/src/lib/components/shared-components/purchasing/purchase-content.svelte
@ -50,7 +50,7 @@
        <p>
          {$t('purchase_panel_info_2')}
        </p>
-        <div />
+        <div></div>
      </div>
    {/if}

--- a/web/src/lib/components/shared-components/scrubber/scrubber.svelte
+++ b/web/src/lib/components/shared-components/scrubber/scrubber.svelte
@ -257,7 +257,7 @@
  {/if}
  <div id="lead-in" class="relative" style:height={relativeTopOffset + 'px'} data-label={segments.at(0)?.dateFormatted}>
    {#if relativeTopOffset > 6}
-      <div class="absolute right-[0.75rem] h-[4px] w-[4px] rounded-full bg-gray-300" />
+      <div class="absolute right-[0.75rem] h-[4px] w-[4px] rounded-full bg-gray-300"></div>
    {/if}
  </div>
  <!-- Time Segment -->
@ -282,7 +282,7 @@
        <div
          aria-label={segment.dateFormatted + ' ' + segment.count}
          class="absolute right-[0.75rem] bottom-0 h-[4px] w-[4px] rounded-full bg-gray-300"
-        />
+        ></div>
      {/if}
    </div>
  {/each}
--- a/web/src/lib/components/shared-components/settings/setting-input-field.svelte
+++ b/web/src/lib/components/shared-components/settings/setting-input-field.svelte
@ -28,7 +28,7 @@
  export let disabled = false;
  export let isEdited = false;
  export let autofocus = false;
-  export let passwordAutocomplete: string = 'current-password';
+  export let passwordAutocomplete: AutoFill = 'current-password';

  let input: HTMLInputElement;

--- a/web/src/lib/components/shared-components/settings/setting-textarea.svelte
+++ b/web/src/lib/components/shared-components/settings/setting-textarea.svelte
@ -50,5 +50,5 @@
    {value}
    on:input={handleInput}
    {disabled}
-  />
+  ></textarea>
 </div>
--- a/web/src/lib/components/shared-components/side-bar/server-status.svelte
+++ b/web/src/lib/components/shared-components/side-bar/server-status.svelte
@ -38,12 +38,12 @@
 >
  {#if $connected}
    <div class="flex gap-2 place-items-center place-content-center">
-      <div class="w-[7px] h-[7px] bg-green-500 rounded-full" />
+      <div class="w-[7px] h-[7px] bg-green-500 rounded-full"></div>
      <p class="dark:text-immich-gray">{$t('server_online')}</p>
    </div>
  {:else}
    <div class="flex gap-2 place-items-center place-content-center">
-      <div class="w-[7px] h-[7px] bg-red-500 rounded-full" />
+      <div class="w-[7px] h-[7px] bg-red-500 rounded-full"></div>
      <p class="text-red-500">{$t('server_offline')}</p>
    </div>
  {/if}
--- a/web/src/lib/components/shared-components/side-bar/storage-space.svelte
+++ b/web/src/lib/components/shared-components/side-bar/storage-space.svelte
@ -63,7 +63,7 @@
      </p>

      <div class="mt-4 h-[7px] w-full rounded-full bg-gray-200 dark:bg-gray-700">
-        <div class="h-[7px] rounded-full {usageClasses}" style="width: {usedPercentage}%" />
+        <div class="h-[7px] rounded-full {usageClasses}" style="width: {usedPercentage}%"></div>
      </div>
    {:else}
      <div class="mt-2">
--- a/web/src/lib/components/shared-components/theme-button.svelte
+++ b/web/src/lib/components/shared-components/theme-button.svelte
@ -5,8 +5,11 @@
  import { colorTheme, handleToggleTheme } from '$lib/stores/preferences.store';
  import { t } from 'svelte-i18n';

+  // svelte-ignore reactive_declaration_non_reactive_property
  $: icon = $colorTheme.value === Theme.LIGHT ? moonPath : sunPath;
+  // svelte-ignore reactive_declaration_non_reactive_property
  $: viewBox = $colorTheme.value === Theme.LIGHT ? moonViewBox : sunViewBox;
+  // svelte-ignore reactive_declaration_non_reactive_property
  $: isDark = $colorTheme.value === Theme.DARK;

  export let padding: Padding = '3';
--- a/web/src/lib/components/shared-components/upload-asset-preview.svelte
+++ b/web/src/lib/components/shared-components/upload-asset-preview.svelte
@ -92,7 +92,7 @@

  {#if uploadAsset.state === UploadState.STARTED}
    <div class="text-black relative mt-[5px] h-[15px] w-full rounded-md bg-gray-300 dark:bg-immich-dark-gray">
-      <div class="h-[15px] rounded-md bg-immich-primary transition-all" style={`width: ${uploadAsset.progress}%`} />
+      <div class="h-[15px] rounded-md bg-immich-primary transition-all" style={`width: ${uploadAsset.progress}%`}></div>
      <p class="absolute top-0 h-full w-full text-center text-[10px]">
        {#if uploadAsset.message}
          {uploadAsset.message}
--- a/web/src/lib/components/user-settings-page/app-settings.svelte
+++ b/web/src/lib/components/user-settings-page/app-settings.svelte
@ -33,6 +33,7 @@
  });
  $: selectedDate = `${formattedDate} ${timePortion}`;
  $: editedLocale = findLocale($locale).code;
+  // svelte-ignore reactive_declaration_non_reactive_property
  $: selectedOption = {
    value: findLocale(editedLocale).code || fallbackLocale.code,
    label: findLocale(editedLocale).name || fallbackLocale.name,
--- a/web/src/lib/stores/preferences.store.ts
+++ b/web/src/lib/stores/preferences.store.ts
@ -16,7 +16,7 @@ export const handleToggleTheme = () => {
 };

 const initTheme = (): ThemeSetting => {
-  if (browser && !window.matchMedia('(prefers-color-scheme: dark)').matches) {
+  if (browser && window.matchMedia && !window.matchMedia('(prefers-color-scheme: dark)').matches) {
    return { value: Theme.LIGHT, system: false };
  }
  return { value: Theme.DARK, system: false };