From 6bb8f4fcc4eb2954ec34a3d7138bfb20b5a11e25 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Thu, 12 Mar 2026 14:47:35 -0400
Subject: [PATCH] refactor: clean class (#26885)

---
 web/src/lib/components/album-page/album-cover.svelte       | 2 +-
 web/src/lib/components/assets/broken-asset.svelte          | 7 ++++---
 .../lib/components/assets/thumbnail/video-thumbnail.svelte | 5 +++--
 .../components/sharedlinks-page/covers/asset-cover.svelte  | 5 +++--
 .../lib/components/sharedlinks-page/covers/no-cover.svelte | 6 ++++--
 5 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/web/src/lib/components/album-page/album-cover.svelte b/web/src/lib/components/album-page/album-cover.svelte
index c6242c5fad..2af2be77f6 100644
--- a/web/src/lib/components/album-page/album-cover.svelte
+++ b/web/src/lib/components/album-page/album-cover.svelte
@@ -11,7 +11,7 @@
     class?: string;
   }
 
-  let { album, preload = false, class: className = '' }: Props = $props();
+  let { album, preload = false, class: className }: Props = $props();
 
   let alt = $derived(album.albumName || $t('unnamed_album'));
   let thumbnailUrl = $derived(
diff --git a/web/src/lib/components/assets/broken-asset.svelte b/web/src/lib/components/assets/broken-asset.svelte
index fbbbf4c815..bb67de390e 100644
--- a/web/src/lib/components/assets/broken-asset.svelte
+++ b/web/src/lib/components/assets/broken-asset.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { cleanClass } from '$lib';
   import { Icon } from '@immich/ui';
   import { mdiImageBrokenVariant } from '@mdi/js';
   import { t } from 'svelte-i18n';
@@ -11,15 +12,15 @@
     height?: string | undefined;
   }
 
-  let { class: className = '', hideMessage = false, width = undefined, height = undefined }: Props = $props();
+  let { class: className, hideMessage = false, width = undefined, height = undefined }: Props = $props();
 </script>
 
 <div
   data-broken-asset
-  class={[
+  class={cleanClass(
     '@container flex flex-col overflow-hidden max-h-full max-w-full justify-center items-center bg-gray-100/40 dark:bg-gray-700/40 dark:text-gray-100 p-4',
     className,
-  ]}
+  )}
   style:width
   style:height
 >
diff --git a/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte b/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
index b4772cc1c4..76956fbb26 100644
--- a/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
+++ b/web/src/lib/components/assets/thumbnail/video-thumbnail.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { cleanClass } from '$lib';
   import { Icon, LoadingSpinner } from '@immich/ui';
   import { mdiAlertCircleOutline, mdiPauseCircleOutline, mdiPlayCircleOutline } from '@mdi/js';
   import { Duration } from 'luxon';
@@ -25,7 +26,7 @@
     curve = false,
     playIcon = mdiPlayCircleOutline,
     pauseIcon = mdiPauseCircleOutline,
-    class: className = undefined,
+    class: className,
   }: Props = $props();
 
   let remainingSeconds = $state(durationInSeconds);
@@ -60,7 +61,7 @@
 {#if enablePlayback}
   <video
     bind:this={player}
-    class={['h-full w-full object-cover', className]}
+    class={cleanClass('h-full w-full object-cover', className)}
     class:rounded-xl={curve}
     muted
     autoplay
diff --git a/web/src/lib/components/sharedlinks-page/covers/asset-cover.svelte b/web/src/lib/components/sharedlinks-page/covers/asset-cover.svelte
index 76822cc786..1e2533804c 100644
--- a/web/src/lib/components/sharedlinks-page/covers/asset-cover.svelte
+++ b/web/src/lib/components/sharedlinks-page/covers/asset-cover.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { cleanClass } from '$lib';
   import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
 
   interface Props {
@@ -8,7 +9,7 @@
     class?: string;
   }
 
-  let { alt, preload = false, src, class: className = '' }: Props = $props();
+  let { alt, preload = false, src, class: className }: Props = $props();
 
   let isBroken = $state(false);
 </script>
@@ -19,7 +20,7 @@
   <img
     {alt}
     onerror={() => (isBroken = true)}
-    class="size-full rounded-xl object-cover aspect-square {className}"
+    class={cleanClass('size-full rounded-xl object-cover aspect-square', className)}
     data-testid="album-image"
     draggable="false"
     loading={preload ? 'eager' : 'lazy'}
diff --git a/web/src/lib/components/sharedlinks-page/covers/no-cover.svelte b/web/src/lib/components/sharedlinks-page/covers/no-cover.svelte
index 1e09c6bcfa..319a5e7f9e 100644
--- a/web/src/lib/components/sharedlinks-page/covers/no-cover.svelte
+++ b/web/src/lib/components/sharedlinks-page/covers/no-cover.svelte
@@ -1,16 +1,18 @@
 <script lang="ts">
+  import { cleanClass } from '$lib';
+
   interface Props {
     alt?: string;
     preload?: boolean;
     class?: string;
   }
 
-  let { alt = '', preload = false, class: className = '' }: Props = $props();
+  let { alt = '', preload = false, class: className }: Props = $props();
 </script>
 
 <enhanced:img
   {alt}
-  class="size-full rounded-xl object-cover aspect-square {className}"
+  class={cleanClass('size-full rounded-xl object-cover aspect-square', className)}
   data-testid="album-image"
   draggable="false"
   loading={preload ? 'eager' : 'lazy'}