refactor: checkbox (#18337)

refactor: checkboxes

web/src/lib/components/elements/checkbox.svelte

@@ -1,37 +0,0 @@
-<script lang="ts">
-  interface Props {
-    id: string;
-    label: string;
-    checked?: boolean | undefined;
-    disabled?: boolean;
-    labelClass?: string | undefined;
-    name?: string | undefined;
-    value?: string | undefined;
-    onchange?: () => void;
-  }
-
-  let {
-    id,
-    label,
-    checked = $bindable(),
-    disabled = false,
-    labelClass = undefined,
-    name = undefined,
-    value = undefined,
-    onchange = () => {},
-  }: Props = $props();
-</script>
-
-<div class="flex items-center space-x-2">
-  <input
-    type="checkbox"
-    {name}
-    {id}
-    {value}
-    {disabled}
-    class="size-5 flex-shrink-0 focus-visible:ring"
-    bind:checked
-    {onchange}
-  />
-  <label class={labelClass} for={id}>{label}</label>
-</div>

web/src/lib/components/photos-page/delete-asset-dialog.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import Checkbox from '$lib/components/elements/checkbox.svelte';
   import FormatMessage from '$lib/components/i18n/format-message.svelte';
   import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
   import { showDeleteModal } from '$lib/stores/preferences.store';
+  import { Checkbox, Label } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -38,8 +38,9 @@
     </p>
     <p><b>{$t('cannot_undo_this_action')}</b></p>
 
-    <div class="pt-4 flex justify-center items-center">
+    <div class="pt-4 flex justify-center items-center gap-2">
-      <Checkbox id="confirm-deletion-input" label={$t('do_not_show_again')} bind:checked />
+      <Checkbox id="confirm-deletion-input" bind:checked color="secondary" />
+      <Label label={$t('do_not_show_again')} for="confirm-deletion-input" />
     </div>
   {/snippet}
 </ConfirmModal>

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;
+    isNotInAlbum: boolean;
-    isArchive?: boolean;
+    isArchive: boolean;
-    isFavorite?: 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} />
+      <div class="flex items-center gap-2">
-      <Checkbox id="archive-checkbox" label={$t('archive')} bind:checked={filters.isArchive} />
+        <Checkbox id="not-in-album-checkbox" size="tiny" bind:checked={filters.isNotInAlbum} />
-      <Checkbox id="favorite-checkbox" label={$t('favorites')} bind:checked={filters.isFavorite} />
+        <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
+      <div class="flex gap-2 items-center">
-        id="{option.value}-checkbox"
+        <Checkbox
-        label={option.text}
+          size="tiny"
-        checked={value.includes(option.value)}
+          id="{option.value}-checkbox"
-        {disabled}
+          checked={value.includes(option.value)}
-        labelClass="text-gray-500 dark:text-gray-300"
+          {disabled}
-        onchange={() => handleCheckboxChange(option.value)}
+          onCheckedChange={() => handleCheckboxChange(option.value)}
-      />
+        />
+        <Label label={option.text} for="{option.value}-checkbox">
+          {option.text}
+        </Label>
+      </div>
     {/each}
   </div>
 </div>

web/src/lib/modals/SearchFilterModal.svelte

@@ -84,8 +84,8 @@
     },
     display: {
       isArchive: searchQuery.visibility === AssetVisibility.Archive,
-      isFavorite: searchQuery.isFavorite,
+      isFavorite: searchQuery.isFavorite ?? false,
-      isNotInAlbum: 'isNotInAlbum' in searchQuery ? searchQuery.isNotInAlbum : undefined,
+      isNotInAlbum: 'isNotInAlbum' in searchQuery ? (searchQuery.isNotInAlbum ?? false) : false,
     },
     mediaType:
       searchQuery.type === AssetTypeEnum.Image
@@ -105,7 +105,11 @@
       location: {},
       camera: {},
       date: {},
-      display: {},
+      display: {
+        isArchive: false,
+        isFavorite: false,
+        isNotInAlbum: false,
+      },
       mediaType: MediaType.All,
       rating: undefined,
     };

web/src/lib/modals/UserDeleteConfirmModal.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import Checkbox from '$lib/components/elements/checkbox.svelte';
   import FormatMessage from '$lib/components/i18n/format-message.svelte';
   import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
   import { serverConfig } from '$lib/stores/server-config.store';
   import { handleError } from '$lib/utils/handle-error';
   import { deleteUserAdmin, type UserAdminResponseDto, type UserResponseDto } from '@immich/sdk';
+  import { Checkbox, Label } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -66,16 +66,14 @@
         </p>
       {/if}
 
-      <div class="flex justify-center m-4 gap-2">
+      <div class="flex justify-center items-center gap-2">
         <Checkbox
           id="queue-user-deletion-checkbox"
-          label={$t('admin.user_delete_immediately_checkbox')}
+          color="secondary"
-          labelClass="text-sm dark:text-immich-dark-fg"
           bind:checked={forceDelete}
-          onchange={() => {
+          onCheckedChange={() => (deleteButtonDisabled = forceDelete)}
-            deleteButtonDisabled = forceDelete;
-          }}
         />
+        <Label label={$t('admin.user_delete_immediately_checkbox')} for="queue-user-deletion-checkbox" />
       </div>
 
       {#if forceDelete}