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/photos-page/actions/archive-action.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import type { OnArchive } from '$lib/utils/actions';
   import { archiveAssets } from '$lib/utils/asset-utils';
   import { AssetVisibility } from '@immich/sdk';
@@ -7,6 +6,7 @@
   import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { IconButton } from '@immich/ui';
 
   interface Props {
     onArchive?: OnArchive;
@@ -42,8 +42,15 @@
 
 {#if !menuItem}
   {#if loading}
-    <CircleIconButton title={$t('loading')} icon={mdiTimerSand} onclick={() => {}} />
+    <IconButton
+      shape="round"
+      color="secondary"
+      variant="ghost"
+      aria-label={$t('loading')}
+      icon={mdiTimerSand}
+      onclick={() => {}}
+    />
   {:else}
-    <CircleIconButton title={text} {icon} onclick={handleArchive} />
+    <IconButton shape="round" color="secondary" variant="ghost" aria-label={text} {icon} onclick={handleArchive} />
   {/if}
 {/if}

web/src/lib/components/photos-page/actions/create-shared-link.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { getAssetControlContext } from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import { modalManager } from '$lib/managers/modal-manager.svelte';
   import QrCodeModal from '$lib/modals/QrCodeModal.svelte';
@@ -7,6 +6,7 @@
   import { makeSharedLinkUrl } from '$lib/utils';
   import { mdiShareVariantOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
+  import { IconButton } from '@immich/ui';
 
   const { getAssets } = getAssetControlContext();
 
@@ -21,4 +21,11 @@
   };
 </script>
 
-<CircleIconButton title={$t('share')} icon={mdiShareVariantOutline} onclick={handleClick} />
+<IconButton
+  shape="round"
+  color="secondary"
+  variant="ghost"
+  aria-label={$t('share')}
+  icon={mdiShareVariantOutline}
+  onclick={handleClick}
+/>

web/src/lib/components/photos-page/actions/delete-assets.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { type OnDelete, deleteAssets } from '$lib/utils/actions';
   import { mdiDeleteForeverOutline, mdiDeleteOutline, mdiTimerSand } from '@mdi/js';
@@ -7,6 +6,7 @@
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
   import DeleteAssetDialog from '../delete-asset-dialog.svelte';
+  import { IconButton } from '@immich/ui';
 
   interface Props {
     onAssetDelete: OnDelete;
@@ -45,9 +45,23 @@
 {#if menuItem}
   <MenuOption text={label} icon={mdiDeleteOutline} onClick={handleTrash} />
 {:else if loading}
-  <CircleIconButton title={$t('loading')} icon={mdiTimerSand} onclick={() => {}} />
+  <IconButton
+    shape="round"
+    color="secondary"
+    variant="ghost"
+    aria-label={$t('loading')}
+    icon={mdiTimerSand}
+    onclick={() => {}}
+  />
 {:else}
-  <CircleIconButton title={label} icon={mdiDeleteForeverOutline} onclick={handleTrash} />
+  <IconButton
+    shape="round"
+    color="secondary"
+    variant="ghost"
+    aria-label={label}
+    icon={mdiDeleteForeverOutline}
+    onclick={handleTrash}
+  />
 {/if}
 
 {#if isShowConfirmation}

web/src/lib/components/photos-page/actions/download-action.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
 
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { downloadArchive, downloadFile } from '$lib/utils/asset-utils';
@@ -9,6 +8,7 @@
   import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { IconButton } from '@immich/ui';
 
   interface Props {
     filename?: string;
@@ -40,5 +40,12 @@
 {#if menuItem}
   <MenuOption text={$t('download')} icon={menuItemIcon} onClick={handleDownloadFiles} />
 {:else}
-  <CircleIconButton title={$t('download')} icon={mdiCloudDownloadOutline} onclick={handleDownloadFiles} />
+  <IconButton
+    shape="round"
+    color="secondary"
+    variant="ghost"
+    aria-label={$t('download')}
+    icon={mdiCloudDownloadOutline}
+    onclick={handleDownloadFiles}
+  />
 {/if}

web/src/lib/components/photos-page/actions/favorite-action.svelte

@@ -1,5 +1,4 @@
 <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 {
     NotificationType,
@@ -9,8 +8,9 @@
   import { handleError } from '$lib/utils/handle-error';
   import { updateAssets } from '@immich/sdk';
   import { mdiHeartMinusOutline, mdiHeartOutline, mdiTimerSand } from '@mdi/js';
-  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
   import { t } from 'svelte-i18n';
+  import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { IconButton } from '@immich/ui';
 
   interface Props {
     onFavorite?: OnFavorite;
@@ -68,8 +68,15 @@
 
 {#if !menuItem}
   {#if loading}
-    <CircleIconButton title={$t('loading')} icon={mdiTimerSand} onclick={() => {}} />
+    <IconButton
+      shape="round"
+      color="secondary"
+      variant="ghost"
+      aria-label={$t('loading')}
+      icon={mdiTimerSand}
+      onclick={() => {}}
+    />
   {:else}
-    <CircleIconButton title={text} {icon} onclick={handleFavorite} />
+    <IconButton shape="round" color="secondary" variant="ghost" aria-label={text} {icon} onclick={handleFavorite} />
   {/if}
 {/if}

web/src/lib/components/photos-page/actions/link-live-photo-action.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { getAssetControlContext } from '$lib/components/photos-page/asset-select-control-bar.svelte';
   import type { TimelineAsset } from '$lib/stores/assets-store.svelte';
-
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import type { OnLink, OnUnlink } from '$lib/utils/actions';
   import { handleError } from '$lib/utils/handle-error';
@@ -11,6 +9,7 @@
   import { mdiLinkOff, mdiMotionPlayOutline, mdiTimerSand } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
+  import { IconButton } from '@immich/ui';
 
   interface Props {
     onLink: OnLink;
@@ -77,8 +76,15 @@
 
 {#if !menuItem}
   {#if loading}
-    <CircleIconButton title={$t('loading')} icon={mdiTimerSand} onclick={() => {}} />
+    <IconButton
+      shape="round"
+      color="secondary"
+      variant="ghost"
+      aria-label={$t('loading')}
+      icon={mdiTimerSand}
+      onclick={() => {}}
+    />
   {:else}
-    <CircleIconButton title={text} {icon} onclick={onClick} />
+    <IconButton shape="round" color="secondary" variant="ghost" aria-label={text} {icon} onclick={onClick} />
   {/if}
 {/if}

web/src/lib/components/photos-page/actions/remove-from-album.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import {
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
   import { modalManager } from '$lib/managers/modal-manager.svelte';
   import { getAlbumInfo, removeAssetFromAlbum, type AlbumResponseDto } from '@immich/sdk';
+  import { IconButton } from '@immich/ui';
   import { mdiDeleteOutline, mdiImageRemoveOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
@@ -61,5 +61,12 @@
 {#if menuItem}
   <MenuOption text={$t('remove_from_album')} icon={mdiImageRemoveOutline} onClick={removeFromAlbum} />
 {:else}
-  <CircleIconButton title={$t('remove_from_album')} icon={mdiDeleteOutline} onclick={removeFromAlbum} />
+  <IconButton
+    shape="round"
+    color="secondary"
+    variant="ghost"
+    aria-label={$t('remove_from_album')}
+    icon={mdiDeleteOutline}
+    onclick={removeFromAlbum}
+  />
 {/if}

web/src/lib/components/photos-page/actions/remove-from-shared-link.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { modalManager } from '$lib/managers/modal-manager.svelte';
   import { handleError } from '$lib/utils/handle-error';
@@ -8,6 +7,7 @@
   import { t } from 'svelte-i18n';
   import { NotificationType, notificationController } from '../../shared-components/notification/notification';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
+  import { IconButton } from '@immich/ui';
 
   interface Props {
     sharedLink: SharedLinkResponseDto;
@@ -59,4 +59,11 @@
   };
 </script>
 
-<CircleIconButton title={$t('remove_from_shared_link')} onclick={handleRemove} icon={mdiDeleteOutline} />
+<IconButton
+  shape="round"
+  color="secondary"
+  variant="ghost"
+  aria-label={$t('remove_from_shared_link')}
+  onclick={handleRemove}
+  icon={mdiDeleteOutline}
+/>

web/src/lib/components/photos-page/actions/select-all-assets.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
   import { type AssetStore, isSelectingAllAssets } from '$lib/stores/assets-store.svelte';
   import { cancelMultiselect, selectAllAssets } from '$lib/utils/asset-utils';
-  import { Button } from '@immich/ui';
+  import { Button, IconButton } from '@immich/ui';
   import { mdiSelectAll, mdiSelectRemove } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
@@ -35,8 +34,11 @@
     {$isSelectingAllAssets ? $t('unselect_all') : $t('select_all')}
   </Button>
 {:else}
-  <CircleIconButton
-    title={$isSelectingAllAssets ? $t('unselect_all') : $t('select_all')}
+  <IconButton
+    shape="round"
+    color="secondary"
+    variant="ghost"
+    aria-label={$isSelectingAllAssets ? $t('unselect_all') : $t('select_all')}
     icon={$isSelectingAllAssets ? mdiSelectRemove : mdiSelectAll}
     onclick={$isSelectingAllAssets ? handleCancel : handleSelectAll}
   />

web/src/lib/components/photos-page/actions/tag-action.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import TagAssetForm from '$lib/components/forms/tag-asset-form.svelte';
   import { tagAssets } from '$lib/utils/asset-utils';
   import { mdiTagMultipleOutline, mdiTimerSand } from '@mdi/js';
   import { t } from 'svelte-i18n';
+  import { IconButton } from '@immich/ui';
   import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
   import { getAssetControlContext } from '../asset-select-control-bar.svelte';
 
@@ -43,9 +43,16 @@
 
 {#if !menuItem}
   {#if loading}
-    <CircleIconButton title={$t('loading')} icon={mdiTimerSand} onclick={() => {}} />
+    <IconButton
+      shape="round"
+      color="secondary"
+      variant="ghost"
+      aria-label={$t('loading')}
+      icon={mdiTimerSand}
+      onclick={() => {}}
+    />
   {:else}
-    <CircleIconButton title={text} {icon} onclick={handleOpen} />
+    <IconButton shape="round" color="secondary" variant="ghost" aria-label={text} {icon} onclick={handleOpen} />
   {/if}
 {/if}