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">

web/src/lib/components/faces-page/manage-people-visibility.svelte

@@ -11,10 +11,9 @@
   import { getPeopleThumbnailUrl } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { updatePeople, type PersonResponseDto } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, IconButton } from '@immich/ui';
   import { mdiClose, mdiEye, mdiEyeOff, mdiEyeSettings, mdiRestart } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
 
   interface Props {
     people: PersonResponseDto[];
@@ -114,7 +113,14 @@
   class="fixed top-0 flex h-16 w-full items-center justify-between border-b bg-white p-1 dark:border-immich-dark-gray dark:bg-black dark:text-immich-dark-fg md:p-8"
 >
   <div class="flex items-center">
-    <CircleIconButton title={$t('close')} icon={mdiClose} onclick={onClose} />
+    <IconButton
+      shape="round"
+      color="secondary"
+      variant="ghost"
+      aria-label={$t('close')}
+      icon={mdiClose}
+      onclick={onClose}
+    />
     <div class="flex gap-2 items-center">
       <p id={titleId} class="ms-2">{$t('show_and_hide_people')}</p>
       <p class="text-sm text-gray-400 dark:text-gray-600">({totalPeopleCount.toLocaleString($locale)})</p>
@@ -122,8 +128,22 @@
   </div>
   <div class="flex items-center justify-end">
     <div class="flex items-center md:me-4">
-      <CircleIconButton title={$t('reset_people_visibility')} icon={mdiRestart} onclick={handleResetVisibility} />
-      <CircleIconButton title={toggleButton.label} icon={toggleButton.icon} onclick={handleToggleVisibility} />
+      <IconButton
+        shape="round"
+        color="secondary"
+        variant="ghost"
+        aria-label={$t('reset_people_visibility')}
+        icon={mdiRestart}
+        onclick={handleResetVisibility}
+      />
+      <IconButton
+        shape="round"
+        color="secondary"
+        variant="ghost"
+        aria-label={toggleButton.label}
+        icon={toggleButton.icon}
+        onclick={handleToggleVisibility}
+      />
     </div>
     <Button loading={showLoadingSpinner} onclick={handleSaveVisibility} size="small">{$t('done')}</Button>
   </div>

web/src/lib/components/faces-page/merge-face-selector.svelte

@@ -6,14 +6,13 @@
   import { modalManager } from '$lib/managers/modal-manager.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { getAllPeople, getPerson, mergePerson, type PersonResponseDto } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, IconButton } from '@immich/ui';
   import { mdiCallMerge, mdiMerge, mdiSwapHorizontal } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import { flip } from 'svelte/animate';
   import { quintOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
-  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import ControlAppBar from '../shared-components/control-app-bar.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
   import FaceThumbnail from './face-thumbnail.svelte';
@@ -133,10 +132,13 @@
                 </div>
                 {#if selectedPeople.length === 1}
                   <div class="absolute bottom-2">
-                    <CircleIconButton
-                      title={$t('swap_merge_direction')}
+                    <IconButton
+                      shape="round"
+                      color="secondary"
+                      variant="ghost"
+                      aria-label={$t('swap_merge_direction')}
                       icon={mdiSwapHorizontal}
-                      size="24"
+                      size="large"
                       onclick={handleSwapPeople}
                     />
                   </div>

web/src/lib/components/faces-page/people-card.svelte

@@ -65,9 +65,8 @@
     <div class="absolute top-2 end-2 z-1">
       <ButtonContextMenu
         buttonClass="icon-white-drop-shadow focus:opacity-100 {showVerticalDots ? 'opacity-100' : 'opacity-0'}"
-        color="opaque"
-        padding="2"
-        size="20"
+        color="primary"
+        size="medium"
         icon={mdiDotsVertical}
         title={$t('show_person_options')}
       >

web/src/lib/components/faces-page/people-list.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { type PersonResponseDto } from '@immich/sdk';
-  import FaceThumbnail from './face-thumbnail.svelte';
   import SearchPeople from '$lib/components/faces-page/people-search.svelte';
+  import { type PersonResponseDto } from '@immich/sdk';
   import { t } from 'svelte-i18n';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import FaceThumbnail from './face-thumbnail.svelte';
   import { mdiSwapVertical } from '@mdi/js';
+  import { IconButton } from '@immich/ui';
 
   interface Props {
     screenHeight: number;
@@ -32,15 +32,17 @@
   </div>
 
   {#if handleSearch}
-    <CircleIconButton
+    <IconButton
+      shape="round"
+      color="secondary"
+      variant="ghost"
       icon={mdiSwapVertical}
       onclick={() => {
         sortBySimilarirty = !sortBySimilarirty;
         handleSearch(sortBySimilarirty);
       }}
-      color="neutral"
-      title={$t('sort_people_by_similarity')}
-    ></CircleIconButton>
+      aria-label={$t('sort_people_by_similarity')}
+    />
   {/if}
 </div>
 

web/src/lib/components/faces-page/person-side-panel.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import { timeBeforeShowLoadingSpinner } from '$lib/constants';
@@ -29,6 +28,7 @@
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
   import AssignFaceSidePanel from './assign-face-side-panel.svelte';
+  import { IconButton } from '@immich/ui';
 
   interface Props {
     assetId: string;
@@ -197,7 +197,14 @@
 >
   <div class="flex place-items-center justify-between gap-2">
     <div class="flex items-center gap-2">
-      <CircleIconButton icon={mdiArrowLeftThin} title={$t('back')} onclick={onClose} />
+      <IconButton
+        shape="round"
+        color="secondary"
+        variant="ghost"
+        icon={mdiArrowLeftThin}
+        aria-label={$t('back')}
+        onclick={onClose}
+      />
       <p class="flex text-lg text-immich-fg dark:text-immich-dark-fg">{$t('edit_faces')}</p>
     </div>
     {#if !isShowLoadingDone}
@@ -304,22 +311,22 @@
 
               <div class="absolute -end-[5px] -top-[5px] h-[20px] w-[20px] rounded-full">
                 {#if selectedPersonToCreate[face.id] || selectedPersonToReassign[face.id]}
-                  <CircleIconButton
+                  <IconButton
+                    shape="round"
+                    variant="ghost"
                     color="primary"
                     icon={mdiRestart}
-                    title={$t('reset')}
-                    size="18"
-                    padding="1"
+                    aria-label={$t('reset')}
+                    size="medium"
                     class="absolute start-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform"
                     onclick={() => handleReset(face.id)}
                   />
                 {:else}
-                  <CircleIconButton
+                  <IconButton
                     color="primary"
                     icon={mdiPencil}
-                    title={$t('select_new_face')}
-                    size="18"
-                    padding="1"
+                    aria-label={$t('select_new_face')}
+                    size="medium"
                     class="absolute start-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform"
                     onclick={() => handleFacePicker(face)}
                   />
@@ -336,12 +343,12 @@
               </div>
               {#if face.person != null}
                 <div class="absolute -end-[5px] top-[25px] h-[20px] w-[20px] rounded-full">
-                  <CircleIconButton
-                    color="red"
+                  <IconButton
+                    shape="round"
+                    color="danger"
                     icon={mdiTrashCan}
-                    title={$t('delete_face')}
-                    size="18"
-                    padding="1"
+                    aria-label={$t('delete_face')}
+                    size="medium"
                     class="absolute start-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform"
                     onclick={() => deleteAssetFace(face)}
                   />