chore(web): migrate CircleIconButton to @immich/ui IconButton (#18486)

* remove import and referenced file

* first pass at replacing all CircleIconButtons

* fix linting issues

* fix combobox formatting issues

* fix button context menu coloring

* remove circle icon button from search history box

* use theme switcher from UI lib

* dark mode force the asset viewer icons

* fix forced dark mode icons

* dark mode memory viewer icons

* fix: back button in memory viewer

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>

web/src/lib/components/user-settings-page/device-card.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import type { SessionResponseDto } from '@immich/sdk';
+  import { IconButton } from '@immich/ui';
   import {
     mdiAndroid,
     mdiApple,
@@ -75,11 +75,13 @@
     </div>
     {#if !device.current && onDelete}
       <div>
-        <CircleIconButton
-          color="primary"
+        <IconButton
+          color="danger"
+          variant="ghost"
+          shape="round"
           icon={mdiTrashCanOutline}
-          title={$t('log_out')}
-          size="16"
+          aria-label={$t('log_out')}
+          size="small"
           onclick={onDelete}
         />
       </div>

web/src/lib/components/user-settings-page/partner-settings.svelte

@@ -12,12 +12,11 @@
     type PartnerResponseDto,
     type UserResponseDto,
   } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, IconButton } from '@immich/ui';
   import { mdiCheck, mdiClose } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import { handleError } from '../../utils/handle-error';
-  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import Icon from '../elements/icon.svelte';
 
   interface PartnerSharing {
@@ -144,11 +143,14 @@
           </div>
 
           {#if partner.sharedByMe}
-            <CircleIconButton
+            <IconButton
+              shape="round"
+              color="secondary"
+              variant="ghost"
               onclick={() => handleRemovePartner(partner.user)}
               icon={mdiClose}
-              size="16"
-              title={$t('stop_sharing_photos_with_user')}
+              size="small"
+              aria-label={$t('stop_sharing_photos_with_user')}
             />
           {/if}
         </div>

web/src/lib/components/user-settings-page/user-api-key-list.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { dateFormats } from '$lib/constants';
   import { modalManager } from '$lib/managers/modal-manager.svelte';
   import ApiKeyModal from '$lib/modals/ApiKeyModal.svelte';
   import ApiKeySecretModal from '$lib/modals/ApiKeySecretModal.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { createApiKey, deleteApiKey, getApiKeys, updateApiKey, type ApiKeyResponseDto } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, IconButton } from '@immich/ui';
   import { mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
@@ -126,18 +125,20 @@
                 >{new Date(key.createdAt).toLocaleDateString($locale, dateFormats.settings)}
               </td>
               <td class="flex flex-row flex-wrap justify-center gap-x-2 gap-y-1 w-1/4">
-                <CircleIconButton
+                <IconButton
+                  shape="round"
                   color="primary"
                   icon={mdiPencilOutline}
-                  title={$t('edit_key')}
-                  size="16"
+                  aria-label={$t('edit_key')}
+                  size="small"
                   onclick={() => handleUpdate(key)}
                 />
-                <CircleIconButton
+                <IconButton
+                  shape="round"
                   color="primary"
                   icon={mdiTrashCanOutline}
-                  title={$t('delete_key')}
-                  size="16"
+                  aria-label={$t('delete_key')}
+                  size="small"
                   onclick={() => handleDelete(key)}
                 />
               </td>