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/shared-components/theme-button.svelte

@@ -1,27 +1,13 @@
 <script lang="ts">
-  import { moonPath, moonViewBox, sunPath, sunViewBox } from '$lib/assets/svg-paths';
-  import CircleIconButton, { type Padding } from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { Theme } from '$lib/constants';
   import { themeManager } from '$lib/managers/theme-manager.svelte';
-  import { t } from 'svelte-i18n';
-
-  let icon = $derived(themeManager.isDark ? sunPath : moonPath);
-  let viewBox = $derived(themeManager.isDark ? sunViewBox : moonViewBox);
-
-  interface Props {
-    padding?: Padding;
-  }
-
-  let { padding = '3' }: Props = $props();
+  import { ThemeSwitcher } from '@immich/ui';
 </script>
 
 {#if !themeManager.theme.system}
-  <CircleIconButton
-    title={$t('toggle_theme')}
-    {icon}
-    {viewBox}
-    role="switch"
-    aria-checked={themeManager.isDark ? 'true' : 'false'}
-    onclick={() => themeManager.toggleTheme()}
-    {padding}
+  <ThemeSwitcher
+    size="medium"
+    color="secondary"
+    onChange={(theme) => themeManager.setTheme(theme == 'dark' ? Theme.DARK : Theme.LIGHT)}
   />
 {/if}