refactor: clean class (#26885)

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(

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
 >

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

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'}

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'}