refactor: buttons (#18317)

* refactor: buttons

* fix: woopsie

---------

Co-authored-by: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>

web/src/lib/components/faces-page/edit-name-input.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { type PersonResponseDto } from '@immich/sdk';
-  import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
-  import Button from '../elements/buttons/button.svelte';
   import SearchPeople from '$lib/components/faces-page/people-search.svelte';
+  import { type PersonResponseDto } from '@immich/sdk';
+  import { Button } from '@immich/ui';
   import { t } from 'svelte-i18n';
+  import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
 
   interface Props {
     person: PersonResponseDto;
@@ -44,6 +44,6 @@
       inputClass="w-full gap-2 bg-gray-100 dark:bg-gray-700 dark:text-white"
       bind:showLoadingSpinner={isSearchingPeople}
     />
-    <Button size="sm" type="submit">{$t('done')}</Button>
+    <Button size="small" shape="round" type="submit">{$t('done')}</Button>
   </form>
 </div>

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

@@ -1,9 +1,7 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
   import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
-  import Button from '$lib/components/elements/buttons/button.svelte';
   import PeopleInfiniteScroll from '$lib/components/faces-page/people-infinite-scroll.svelte';
-  import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import {
     notificationController,
     NotificationType,
@@ -13,6 +11,7 @@
   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 { mdiClose, mdiEye, mdiEyeOff, mdiEyeSettings, mdiRestart } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
@@ -126,11 +125,7 @@
       <CircleIconButton title={$t('reset_people_visibility')} icon={mdiRestart} onclick={handleResetVisibility} />
       <CircleIconButton title={toggleButton.label} icon={toggleButton.icon} onclick={handleToggleVisibility} />
     </div>
-    {#if !showLoadingSpinner}
-      <Button onclick={handleSaveVisibility} size="sm" rounded="lg">{$t('done')}</Button>
-    {:else}
-      <LoadingSpinner />
-    {/if}
+    <Button loading={showLoadingSpinner} onclick={handleSaveVisibility} size="small">{$t('done')}</Button>
   </div>
 </div>
 

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

@@ -6,13 +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 { 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 Button from '../elements/buttons/button.svelte';
   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';
@@ -108,10 +108,9 @@
       <div></div>
     {/snippet}
     {#snippet trailing()}
-      <Button size="sm" disabled={!hasSelection} onclick={handleMerge}>
-        <Icon path={mdiMerge} size={18} />
-        <span class="ms-2">{$t('merge')}</span></Button
-      >
+      <Button leadingIcon={mdiMerge} size="small" shape="round" disabled={!hasSelection} onclick={handleMerge}>
+        {$t('merge')}
+      </Button>
     {/snippet}
   </ControlAppBar>
   <section class="px-[70px] pt-[100px]">

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import Icon from '$lib/components/elements/icon.svelte';
   import { timeBeforeShowLoadingSpinner } from '$lib/constants';
   import { handleError } from '$lib/utils/handle-error';
   import {
@@ -9,14 +8,13 @@
     type AssetFaceUpdateItem,
     type PersonResponseDto,
   } from '@immich/sdk';
+  import { Button } from '@immich/ui';
   import { mdiMerge, mdiPlus } from '@mdi/js';
   import { onMount, type Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
   import { quintOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
-  import Button from '../elements/buttons/button.svelte';
   import ControlAppBar from '../shared-components/control-app-bar.svelte';
-  import LoadingSpinner from '../shared-components/loading-spinner.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
   import FaceThumbnail from './face-thumbnail.svelte';
   import PeopleList from './people-list.svelte';
@@ -130,33 +128,27 @@
     {#snippet trailing()}
       <div class="flex gap-4">
         <Button
+          shape="round"
           title={$t('create_new_person_hint')}
-          size="sm"
+          leadingIcon={mdiPlus}
+          loading={showLoadingSpinnerCreate}
+          size="small"
           disabled={disableButtons || hasSelection}
           onclick={handleCreate}
         >
-          {#if !showLoadingSpinnerCreate}
-            <Icon path={mdiPlus} size={18} />
-          {:else}
-            <LoadingSpinner />
-          {/if}
-          <span class="ms-2"> {$t('create_new_person')}</span></Button
+          {$t('create_new_person')}</Button
         >
         <Button
-          size="sm"
+          size="small"
+          shape="round"
           title={$t('reassing_hint')}
+          leadingIcon={mdiMerge}
+          loading={showLoadingSpinnerReassign}
           disabled={disableButtons || !hasSelection}
           onclick={handleReassign}
         >
-          {#if !showLoadingSpinnerReassign}
-            <div>
-              <Icon path={mdiMerge} size={18} class="rotate-180" />
-            </div>
-          {:else}
-            <LoadingSpinner />
-          {/if}
-          <span class="ms-2"> {$t('reassign')}</span></Button
-        >
+          {$t('reassign')}
+        </Button>
       </div>
     {/snippet}
   </ControlAppBar>