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/faces-page/assign-face-side-panel.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import SearchPeople from '$lib/components/faces-page/people-search.svelte';
   import { timeBeforeShowLoadingSpinner } from '$lib/constants';
   import { photoViewerImgElement } from '$lib/stores/assets-store.svelte';
@@ -8,6 +7,7 @@
   import { zoomImageToBase64 } from '$lib/utils/people-utils';
   import { getPersonNameWithHiddenValue } from '$lib/utils/person';
   import { AssetTypeEnum, getAllPeople, type AssetFaceResponseDto, type PersonResponseDto } from '@immich/sdk';
+  import { IconButton } from '@immich/ui';
   import { mdiArrowLeftThin, mdiClose, mdiMagnify, mdiPlus } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -79,19 +79,36 @@
   <div class="flex place-items-center justify-between gap-2">
     {#if !searchFaces}
       <div class="flex items-center gap-2">
-        <CircleIconButton icon={mdiArrowLeftThin} title={$t('back')} onclick={onClose} />
+        <IconButton
+          color="secondary"
+          variant="ghost"
+          shape="round"
+          icon={mdiArrowLeftThin}
+          aria-label={$t('back')}
+          onclick={onClose}
+        />
         <p class="flex text-lg text-immich-fg dark:text-immich-dark-fg">{$t('select_face')}</p>
       </div>
       <div class="flex justify-end gap-2">
-        <CircleIconButton
+        <IconButton
+          color="secondary"
+          variant="ghost"
+          shape="round"
           icon={mdiMagnify}
-          title={$t('search_for_existing_person')}
+          aria-label={$t('search_for_existing_person')}
           onclick={() => {
             searchFaces = true;
           }}
         />
         {#if !isShowLoadingNewPerson}
-          <CircleIconButton icon={mdiPlus} title={$t('create_new_person')} onclick={handleCreatePerson} />
+          <IconButton
+            color="secondary"
+            variant="ghost"
+            shape="round"
+            icon={mdiPlus}
+            aria-label={$t('create_new_person')}
+            onclick={handleCreatePerson}
+          />
         {:else}
           <div class="flex place-content-center place-items-center">
             <LoadingSpinner />
@@ -99,7 +116,14 @@
         {/if}
       </div>
     {:else}
-      <CircleIconButton icon={mdiArrowLeftThin} title={$t('back')} onclick={onClose} />
+      <IconButton
+        color="secondary"
+        variant="ghost"
+        shape="round"
+        icon={mdiArrowLeftThin}
+        aria-label={$t('back')}
+        onclick={onClose}
+      />
       <div class="w-full flex">
         <SearchPeople
           type="input"
@@ -113,7 +137,14 @@
           </div>
         {/if}
       </div>
-      <CircleIconButton icon={mdiClose} title={$t('cancel_search')} onclick={() => (searchFaces = false)} />
+      <IconButton
+        color="secondary"
+        variant="ghost"
+        shape="round"
+        icon={mdiClose}
+        aria-label={$t('cancel_search')}
+        onclick={() => (searchFaces = false)}
+      />
     {/if}
   </div>
   <div class="px-4 py-4 text-sm">