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/jobs-status/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import JobsPanel from '$lib/components/admin-page/jobs/jobs-panel.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 Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
@@ -13,6 +12,7 @@
   import { asyncTimeout } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';
   import { createJob, getAllJobsStatus, ManualJobName, type AllJobStatusResponseDto } from '@immich/sdk';
+  import { Button, HStack } from '@immich/ui';
   import { mdiCog, mdiPlus } from '@mdi/js';
   import { onDestroy, onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -71,20 +71,16 @@
 
 <UserPageLayout title={data.meta.title} admin>
   {#snippet buttons()}
-    <div class="flex justify-end">
-      <LinkButton onclick={() => (isOpen = true)}>
-        <div class="flex place-items-center gap-2 text-sm">
-          <Icon path={mdiPlus} size="18" />
-          {$t('admin.create_job')}
-        </div>
-      </LinkButton>
-      <LinkButton href="{AppRoute.ADMIN_SETTINGS}?isOpen=job">
-        <div class="flex place-items-center gap-2 text-sm">
-          <Icon path={mdiCog} size="18" />
-          {$t('admin.manage_concurrency')}
-        </div>
-      </LinkButton>
-    </div>
+    <HStack gap={0}>
+      <Button onclick={() => (isOpen = true)} size="small" variant="ghost" color="secondary">
+        <Icon path={mdiPlus} size="18" />
+        {$t('admin.create_job')}
+      </Button>
+      <Button href="{AppRoute.ADMIN_SETTINGS}?isOpen=job" size="small" variant="ghost" color="secondary">
+        <Icon path={mdiCog} size="18" />
+        {$t('admin.manage_concurrency')}
+      </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]">

web/src/routes/admin/library-management/+page.svelte

@@ -1,17 +1,20 @@
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
-  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import LibraryImportPathsForm from '$lib/components/forms/library-import-paths-form.svelte';
   import LibraryRenameForm from '$lib/components/forms/library-rename-form.svelte';
   import LibraryScanSettingsForm from '$lib/components/forms/library-scan-settings-form.svelte';
   import LibraryUserPickerForm from '$lib/components/forms/library-user-picker-form.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
+  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import {
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
+  import { locale } from '$lib/stores/preferences.store';
   import { ByteUnit, getBytesWithUnit } from '$lib/utils/byte-units';
   import { handleError } from '$lib/utils/handle-error';
   import {
@@ -26,15 +29,12 @@
     type LibraryStatsResponseDto,
     type UserResponseDto,
   } from '@immich/sdk';
+  import { Button } from '@immich/ui';
   import { mdiDatabase, mdiDotsVertical, mdiPlusBoxOutline, mdiSync } from '@mdi/js';
   import { onMount } from 'svelte';
-  import { fade, slide } from 'svelte/transition';
-  import LinkButton from '../../../lib/components/elements/buttons/link-button.svelte';
-  import type { PageData } from './$types';
-  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
   import { t } from 'svelte-i18n';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
-  import { locale } from '$lib/stores/preferences.store';
+  import { fade, slide } from 'svelte/transition';
+  import type { PageData } from './$types';
 
   interface Props {
     data: PageData;
@@ -220,19 +220,19 @@
   {#snippet buttons()}
     <div class="flex justify-end gap-2">
       {#if libraries.length > 0}
-        <LinkButton onclick={() => handleScanAll()}>
+        <Button onclick={handleScanAll} size="small" variant="ghost" color="secondary">
           <div class="flex gap-1 text-sm">
             <Icon path={mdiSync} size="18" />
             <span>{$t('scan_all_libraries')}</span>
           </div>
-        </LinkButton>
+        </Button>
       {/if}
-      <LinkButton onclick={() => (toCreateLibrary = true)}>
+      <Button onclick={() => (toCreateLibrary = true)} size="small" variant="ghost" color="secondary">
         <div class="flex gap-1 text-sm">
           <Icon path={mdiPlusBoxOutline} size="18" />
           <span>{$t('create_library')}</span>
         </div>
-      </LinkButton>
+      </Button>
     </div>
   {/snippet}
   <section class="my-4">

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]">

web/src/routes/admin/system-settings/+page.svelte

@@ -17,7 +17,7 @@
   import ThemeSettings from '$lib/components/admin-page/settings/theme/theme-settings.svelte';
   import TrashSettings from '$lib/components/admin-page/settings/trash-settings/trash-settings.svelte';
   import UserSettings from '$lib/components/admin-page/settings/user-settings/user-settings.svelte';
-  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
+  import { Button, HStack } from '@immich/ui';
   import Icon from '$lib/components/elements/icon.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import SettingAccordionState from '$lib/components/shared-components/settings/setting-accordion-state.svelte';
@@ -255,31 +255,30 @@
 
   <UserPageLayout title={data.meta.title} admin>
     {#snippet buttons()}
-      <div class="flex justify-end gap-2">
+      <HStack gap={1}>
         <div class="hidden lg:block">
           <SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
         </div>
-        <LinkButton onclick={() => copyToClipboard(JSON.stringify(config, jsonReplacer, 2))}>
-          <div class="flex place-items-center gap-2 text-sm">
-            <Icon path={mdiContentCopy} size="18" />
-            {$t('copy_to_clipboard')}
-          </div>
-        </LinkButton>
-        <LinkButton onclick={() => downloadConfig()}>
-          <div class="flex place-items-center gap-2 text-sm">
-            <Icon path={mdiDownload} size="18" />
-            {$t('export_as_json')}
-          </div>
-        </LinkButton>
+        <Button
+          onclick={() => copyToClipboard(JSON.stringify(config, jsonReplacer, 2))}
+          size="small"
+          variant="ghost"
+          color="secondary"
+        >
+          <Icon path={mdiContentCopy} />
+          {$t('copy_to_clipboard')}
+        </Button>
+        <Button onclick={() => downloadConfig()} size="small" variant="ghost" color="secondary">
+          <Icon path={mdiDownload} />
+          {$t('export_as_json')}
+        </Button>
         {#if !$featureFlags.configFile}
-          <LinkButton onclick={() => inputElement?.click()}>
-            <div class="flex place-items-center gap-2 text-sm">
-              <Icon path={mdiUpload} size="18" />
-              {$t('import_from_json')}
-            </div>
-          </LinkButton>
+          <Button onclick={() => inputElement?.click()} size="small" variant="ghost" color="secondary">
+            <Icon path={mdiUpload} />
+            {$t('import_from_json')}
+          </Button>
         {/if}
-      </div>
+      </HStack>
     {/snippet}
 
     <AdminSettings bind:config bind:this={adminSettingElement}>