refactor: checkbox (#18337)

refactor: checkboxes

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

@@ -1,13 +1,14 @@
 <script lang="ts" module>
   export interface SearchDisplayFilters {
-    isNotInAlbum?: boolean;
-    isArchive?: boolean;
-    isFavorite?: boolean;
+    isNotInAlbum: boolean;
+    isArchive: boolean;
+    isFavorite: boolean;
   }
 </script>
 
 <script lang="ts">
-  import Checkbox from '$lib/components/elements/checkbox.svelte';
+  import { Checkbox, Label } from '@immich/ui';
+
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -21,9 +22,18 @@
   <fieldset>
     <legend class="immich-form-label">{$t('display_options').toUpperCase()}</legend>
     <div class="flex flex-wrap gap-x-5 gap-y-2 mt-1">
-      <Checkbox id="not-in-album-checkbox" label={$t('not_in_any_album')} bind:checked={filters.isNotInAlbum} />
-      <Checkbox id="archive-checkbox" label={$t('archive')} bind:checked={filters.isArchive} />
-      <Checkbox id="favorite-checkbox" label={$t('favorites')} bind:checked={filters.isFavorite} />
+      <div class="flex items-center gap-2">
+        <Checkbox id="not-in-album-checkbox" size="tiny" bind:checked={filters.isNotInAlbum} />
+        <Label label={$t('not_in_any_album')} for="not-in-album-checkbox" />
+      </div>
+      <div class="flex items-center gap-2">
+        <Checkbox id="archive-checkbox" size="tiny" bind:checked={filters.isArchive} />
+        <Label label={$t('archive')} for="archive-checkbox" />
+      </div>
+      <div class="flex items-center gap-2">
+        <Checkbox id="favorites-checkbox" size="tiny" bind:checked={filters.isFavorite} />
+        <Label label={$t('favorites')} for="favorites-checkbox" />
+      </div>
     </div>
   </fieldset>
 </div>

web/src/lib/components/shared-components/settings/setting-checkboxes.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import Checkbox from '$lib/components/elements/checkbox.svelte';
+  import { Checkbox, Label } from '@immich/ui';
+  import { t } from 'svelte-i18n';
   import { quintOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
-  import { t } from 'svelte-i18n';
 
   interface Props {
     value: string[];
@@ -52,14 +52,18 @@
   {/if}
   <div class="flex flex-col gap-2">
     {#each options as option (option.value)}
-      <Checkbox
-        id="{option.value}-checkbox"
-        label={option.text}
-        checked={value.includes(option.value)}
-        {disabled}
-        labelClass="text-gray-500 dark:text-gray-300"
-        onchange={() => handleCheckboxChange(option.value)}
-      />
+      <div class="flex gap-2 items-center">
+        <Checkbox
+          size="tiny"
+          id="{option.value}-checkbox"
+          checked={value.includes(option.value)}
+          {disabled}
+          onCheckedChange={() => handleCheckboxChange(option.value)}
+        />
+        <Label label={option.text} for="{option.value}-checkbox">
+          {option.text}
+        </Label>
+      </div>
     {/each}
   </div>
 </div>