refactor: prefer tv (#26993)

web/src/lib/components/album-page/album-title.svelte

@@ -4,6 +4,7 @@
   import { handleError } from '$lib/utils/handle-error';
   import { updateAlbumInfo } from '@immich/sdk';
   import { t } from 'svelte-i18n';
+  import { tv } from 'tailwind-variants';
 
   interface Props {
     id: string;
@@ -36,14 +37,22 @@
       return;
     }
   };
+
+  const styles = tv({
+    base: 'w-[99%] mb-2 border-b-2 border-transparent text-2xl md:text-4xl lg:text-6xl text-primary outline-none transition-all focus:border-b-2 focus:border-immich-primary focus:outline-none bg-light dark:focus:border-immich-dark-primary dark:focus:bg-immich-dark-gray placeholder:text-primary/90',
+    variants: {
+      isOwned: {
+        true: 'hover:border-gray-400',
+        false: 'hover:border-transparent',
+      },
+    },
+  });
 </script>
 
 <input
   use:shortcut={{ shortcut: { key: 'Enter' }, onShortcut: (e) => e.currentTarget.blur() }}
   onblur={handleUpdateName}
-  class="w-[99%] mb-2 border-b-2 border-transparent text-2xl md:text-4xl lg:text-6xl text-primary outline-none transition-all {isOwned
-    ? 'hover:border-gray-400'
-    : 'hover:border-transparent'} focus:border-b-2 focus:border-immich-primary focus:outline-none bg-light dark:focus:border-immich-dark-primary dark:focus:bg-immich-dark-gray placeholder:text-primary/90"
+  class={styles({ isOwned })}
   type="text"
   bind:value={newAlbumName}
   disabled={!isOwned}

web/src/lib/components/shared-components/search-bar/search-people-section.svelte

@@ -9,6 +9,7 @@
   import { mdiArrowRight, mdiClose } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { SvelteSet } from 'svelte/reactivity';
+  import { tv } from 'tailwind-variants';
 
   interface Props {
     selectedPeople: SvelteSet<string>;
@@ -49,6 +50,16 @@
     const nameLower = name.toLowerCase();
     return name ? list.filter((p) => p.name.toLowerCase().includes(nameLower)) : list;
   };
+
+  const styles = tv({
+    base: 'flex flex-col items-center rounded-3xl border-2 hover:bg-subtle dark:hover:bg-immich-dark-primary/20 p-2 transition-all',
+    variants: {
+      selected: {
+        true: 'dark:border-slate-500 border-slate-400 bg-slate-200 dark:bg-slate-800 dark:text-white',
+        false: 'border-transparent',
+      },
+    },
+  });
 </script>
 
 {#await peoplePromise}
@@ -74,11 +85,7 @@
         {#each peopleList as person (person.id)}
           <button
             type="button"
-            class="flex flex-col items-center rounded-3xl border-2 hover:bg-subtle dark:hover:bg-immich-dark-primary/20 p-2 transition-all {selectedPeople.has(
-              person.id,
-            )
-              ? 'dark:border-slate-500 border-slate-400 bg-slate-200 dark:bg-slate-800 dark:text-white'
-              : 'border-transparent'}"
+            class={styles({ selected: selectedPeople.has(person.id) })}
             onclick={() => togglePersonSelection(person.id)}
           >
             <ImageThumbnail circle shadow url={getPeopleThumbnailUrl(person)} altText={person.name} widthStyle="100%" />

web/src/lib/components/shared-components/single-grid-row.svelte

@@ -5,7 +5,7 @@
     children?: import('svelte').Snippet<[{ itemCount: number }]>;
   }
 
-  let { class: className = '', itemCount = $bindable(1), children }: Props = $props();
+  let { class: className, itemCount = $bindable(1), children }: Props = $props();
 
   let container: HTMLElement | undefined = $state();
   let contentRect: DOMRectReadOnly | undefined = $state();