refactor: checkbox (#18337)

refactor: checkboxes

web/src/lib/modals/SearchFilterModal.svelte

@@ -84,8 +84,8 @@
     },
     display: {
       isArchive: searchQuery.visibility === AssetVisibility.Archive,
-      isFavorite: searchQuery.isFavorite,
-      isNotInAlbum: 'isNotInAlbum' in searchQuery ? searchQuery.isNotInAlbum : undefined,
+      isFavorite: searchQuery.isFavorite ?? false,
+      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')}
-          labelClass="text-sm dark:text-immich-dark-fg"
+          color="secondary"
           bind:checked={forceDelete}
-          onchange={() => {
-            deleteButtonDisabled = forceDelete;
-          }}
+          onCheckedChange={() => (deleteButtonDisabled = forceDelete)}
         />
+        <Label label={$t('admin.user_delete_immediately_checkbox')} for="queue-user-deletion-checkbox" />
       </div>
 
       {#if forceDelete}