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/sharedlinks-page/actions/shared-link-copy.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import { copyToClipboard, makeSharedLinkUrl } from '$lib/utils';
   import type { SharedLinkResponseDto } from '@immich/sdk';
+  import { IconButton } from '@immich/ui';
   import { mdiContentCopy } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -21,5 +21,12 @@
 {#if menuItem}
   <MenuOption text={$t('copy_link')} icon={mdiContentCopy} onClick={handleCopy} />
 {:else}
-  <CircleIconButton title={$t('copy_link')} icon={mdiContentCopy} onclick={handleCopy} />
+  <IconButton
+    color="secondary"
+    shape="round"
+    variant="ghost"
+    aria-label={$t('copy_link')}
+    icon={mdiContentCopy}
+    onclick={handleCopy}
+  />
 {/if}

web/src/lib/components/sharedlinks-page/actions/shared-link-delete.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import { IconButton } from '@immich/ui';
   import { mdiDelete } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -15,5 +15,12 @@
 {#if menuItem}
   <MenuOption text={$t('delete_link')} icon={mdiDelete} onClick={onDelete} />
 {:else}
-  <CircleIconButton title={$t('delete_link')} icon={mdiDelete} onclick={onDelete} />
+  <IconButton
+    color="secondary"
+    shape="round"
+    variant="ghost"
+    aria-label={$t('delete_link')}
+    icon={mdiDelete}
+    onclick={onDelete}
+  />
 {/if}

web/src/lib/components/sharedlinks-page/actions/shared-link-edit.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
   import { AppRoute } from '$lib/constants';
   import type { SharedLinkResponseDto } from '@immich/sdk';
+  import { IconButton } from '@immich/ui';
   import { mdiCircleEditOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -22,5 +22,12 @@
 {#if menuItem}
   <MenuOption text={$t('edit_link')} icon={mdiCircleEditOutline} onClick={onEdit} />
 {:else}
-  <CircleIconButton title={$t('edit_link')} icon={mdiCircleEditOutline} onclick={onEdit} />
+  <IconButton
+    shape="round"
+    color="secondary"
+    variant="ghost"
+    aria-label={$t('edit_link')}
+    icon={mdiCircleEditOutline}
+    onclick={onEdit}
+  />
 {/if}

web/src/lib/components/sharedlinks-page/shared-link-card.svelte

@@ -103,11 +103,10 @@
 
     <div class="sm:hidden">
       <ButtonContextMenu
-        color="transparent"
+        color="primary"
         title={$t('shared_link_options')}
         icon={mdiDotsVertical}
-        size="24"
-        padding="3"
+        size="large"
         hideContent
       >
         <SharedLinkEdit menuItem sharedLink={link} />