refactor: replace link-button component with immich-ui buttons (#15374)

* refactor: replace link-button component with immich-ui buttons

* minor styling tweak

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

web/src/routes/admin/repair/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import empty4Url from '$lib/assets/empty-4.svg';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
@@ -10,14 +9,15 @@
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
   import { downloadManager } from '$lib/stores/download';
+  import { locale } from '$lib/stores/preferences.store';
   import { copyToClipboard } from '$lib/utils';
   import { downloadBlob } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { fixAuditFiles, getAuditFiles, getFileChecksums, type FileReportItemDto } from '@immich/sdk';
+  import { Button, HStack } from '@immich/ui';
   import { mdiCheckAll, mdiContentCopy, mdiDownload, mdiRefresh, mdiWrench } from '@mdi/js';
-  import type { PageData } from './$types';
   import { t } from 'svelte-i18n';
-  import { locale } from '$lib/stores/preferences.store';
+  import type { PageData } from './$types';
 
   interface Props {
     data: PageData;
@@ -185,32 +185,42 @@
 
 <UserPageLayout title={data.meta.title} admin>
   {#snippet buttons()}
-    <div class="flex justify-end gap-2">
-      <LinkButton onclick={() => handleRepair()} disabled={matches.length === 0 || repairing}>
-        <div class="flex place-items-center gap-2 text-sm">
-          <Icon path={mdiWrench} size="18" />
-          {$t('admin.repair_all')}
-        </div>
-      </LinkButton>
-      <LinkButton onclick={() => handleCheckAll()} disabled={extras.length === 0 || checking}>
-        <div class="flex place-items-center gap-2 text-sm">
-          <Icon path={mdiCheckAll} size="18" />
-          {$t('admin.check_all')}
-        </div>
-      </LinkButton>
-      <LinkButton onclick={() => handleDownload()} disabled={extras.length + orphans.length === 0}>
-        <div class="flex place-items-center gap-2 text-sm">
-          <Icon path={mdiDownload} size="18" />
-          {$t('export')}
-        </div>
-      </LinkButton>
-      <LinkButton onclick={() => handleRefresh()}>
-        <div class="flex place-items-center gap-2 text-sm">
-          <Icon path={mdiRefresh} size="18" />
-          {$t('refresh')}
-        </div>
-      </LinkButton>
-    </div>
+    <HStack gap={0}>
+      <Button
+        onclick={() => handleRepair()}
+        disabled={matches.length === 0 || repairing}
+        size="small"
+        variant="ghost"
+        color="secondary"
+      >
+        <Icon path={mdiWrench} />
+        {$t('admin.repair_all')}
+      </Button>
+      <Button
+        onclick={() => handleCheckAll()}
+        disabled={extras.length === 0 || checking}
+        size="small"
+        variant="ghost"
+        color="secondary"
+      >
+        <Icon path={mdiCheckAll} />
+        {$t('admin.check_all')}
+      </Button>
+      <Button
+        onclick={() => handleDownload()}
+        disabled={extras.length + orphans.length === 0}
+        size="small"
+        variant="ghost"
+        color="secondary"
+      >
+        <Icon path={mdiDownload} />
+        {$t('export')}
+      </Button>
+      <Button onclick={() => handleRefresh()} size="small" variant="ghost" color="secondary">
+        <Icon path={mdiRefresh} />
+        {$t('refresh')}
+      </Button>
+    </HStack>
   {/snippet}
   <section id="setting-content" class="flex place-content-center sm:mx-4">
     <section class="w-full pb-28 sm:w-5/6 md:w-[850px]">