refactor: ui icon buttons (#15531)

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 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';
   import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
@@ -12,7 +11,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 { Button, HStack, Text } from '@immich/ui';
   import { mdiCog, mdiPlus } from '@mdi/js';
   import { onDestroy, onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -72,13 +71,17 @@
 <UserPageLayout title={data.meta.title} admin>
   {#snippet buttons()}
     <HStack gap={0}>
-      <Button onclick={() => (isOpen = true)} size="small" variant="ghost" color="secondary">
-        <Icon path={mdiPlus} size="18" />
-        {$t('admin.create_job')}
+      <Button leadingIcon={mdiPlus} onclick={() => (isOpen = true)} size="small" variant="ghost" color="secondary">
+        <Text class="hidden md:block">{$t('admin.create_job')}</Text>
       </Button>
-      <Button href="{AppRoute.ADMIN_SETTINGS}?isOpen=job" size="small" variant="ghost" color="secondary">
-        <Icon path={mdiCog} size="18" />
-        {$t('admin.manage_concurrency')}
+      <Button
+        leadingIcon={mdiCog}
+        href="{AppRoute.ADMIN_SETTINGS}?isOpen=job"
+        size="small"
+        variant="ghost"
+        color="secondary"
+      >
+        <Text class="hidden md:block">{$t('admin.manage_concurrency')}</Text>
       </Button>
     </HStack>
   {/snippet}

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

@@ -29,7 +29,7 @@
     type LibraryStatsResponseDto,
     type UserResponseDto,
   } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, Text } from '@immich/ui';
   import { mdiDatabase, mdiDotsVertical, mdiPlusBoxOutline, mdiSync } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -220,18 +220,18 @@
   {#snippet buttons()}
     <div class="flex justify-end gap-2">
       {#if libraries.length > 0}
-        <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>
+        <Button leadingIcon={mdiSync} onclick={handleScanAll} size="small" variant="ghost" color="secondary">
+          <Text class="hidden md:block">{$t('scan_all_libraries')}</Text>
         </Button>
       {/if}
-      <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>
+      <Button
+        leadingIcon={mdiPlusBoxOutline}
+        onclick={() => (toCreateLibrary = true)}
+        size="small"
+        variant="ghost"
+        color="secondary"
+      >
+        <Text class="hidden md:block">{$t('create_library')}</Text>
       </Button>
     </div>
   {/snippet}

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 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';
   import {
@@ -14,7 +13,7 @@
   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 { Button, HStack, Text } from '@immich/ui';
   import { mdiCheckAll, mdiContentCopy, mdiDownload, mdiRefresh, mdiWrench } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
@@ -187,38 +186,37 @@
   {#snippet buttons()}
     <HStack gap={0}>
       <Button
+        leadingIcon={mdiWrench}
         onclick={() => handleRepair()}
         disabled={matches.length === 0 || repairing}
         size="small"
         variant="ghost"
         color="secondary"
       >
-        <Icon path={mdiWrench} />
-        {$t('admin.repair_all')}
+        <Text class="hidden md:block">{$t('admin.repair_all')}</Text>
       </Button>
       <Button
+        leadingIcon={mdiCheckAll}
         onclick={() => handleCheckAll()}
         disabled={extras.length === 0 || checking}
         size="small"
         variant="ghost"
         color="secondary"
       >
-        <Icon path={mdiCheckAll} />
-        {$t('admin.check_all')}
+        <Text class="hidden md:block">{$t('admin.check_all')}</Text>
       </Button>
       <Button
+        leadingIcon={mdiDownload}
         onclick={() => handleDownload()}
         disabled={extras.length + orphans.length === 0}
         size="small"
         variant="ghost"
         color="secondary"
       >
-        <Icon path={mdiDownload} />
-        {$t('export')}
+        <Text class="hidden md:block">{$t('export')}</Text>
       </Button>
-      <Button onclick={() => handleRefresh()} size="small" variant="ghost" color="secondary">
-        <Icon path={mdiRefresh} />
-        {$t('refresh')}
+      <Button leadingIcon={mdiRefresh} onclick={() => handleRefresh()} size="small" variant="ghost" color="secondary">
+        <Text class="hidden md:block">{$t('refresh')}</Text>
       </Button>
     </HStack>
   {/snippet}

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

@@ -17,8 +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 { Button, HStack } from '@immich/ui';
-  import Icon from '$lib/components/elements/icon.svelte';
+  import { Button, Text, HStack, Alert } from '@immich/ui';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
   import SettingAccordionState from '$lib/components/shared-components/settings/setting-accordion-state.svelte';
   import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
@@ -29,7 +28,6 @@
   import { downloadBlob } from '$lib/utils/asset-utils';
   import {
     mdiAccountOutline,
-    mdiAlert,
     mdiBackupRestore,
     mdiBellOutline,
     mdiBookshelf,
@@ -243,68 +241,64 @@
 
 <input bind:this={inputElement} type="file" accept=".json" style="display: none" onchange={uploadConfig} />
 
-<div class="h-svh flex flex-col overflow-hidden">
-  {#if $featureFlags.configFile}
-    <div class="flex flex-row items-center gap-2 bg-gray-100 p-3 dark:bg-gray-800">
-      <Icon path={mdiAlert} class="text-yellow-400" size={18} />
-      <h2 class="text-md text-immich-primary dark:text-immich-dark-primary">
-        {$t('admin.config_set_by_file')}
-      </h2>
-    </div>
-  {/if}
-
-  <UserPageLayout title={data.meta.title} admin>
-    {#snippet buttons()}
-      <HStack gap={1}>
-        <div class="hidden lg:block">
-          <SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
-        </div>
+<UserPageLayout title={data.meta.title} admin>
+  {#snippet buttons()}
+    <HStack gap={1}>
+      <div class="hidden lg:block">
+        <SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
+      </div>
+      <Button
+        leadingIcon={mdiContentCopy}
+        onclick={() => copyToClipboard(JSON.stringify(config, jsonReplacer, 2))}
+        size="small"
+        variant="ghost"
+        color="secondary"
+      >
+        <Text class="hidden md:block">{$t('copy_to_clipboard')}</Text>
+      </Button>
+      <Button leadingIcon={mdiDownload} onclick={() => downloadConfig()} size="small" variant="ghost" color="secondary">
+        <Text class="hidden md:block">{$t('export_as_json')}</Text>
+      </Button>
+      {#if !$featureFlags.configFile}
         <Button
-          onclick={() => copyToClipboard(JSON.stringify(config, jsonReplacer, 2))}
+          leadingIcon={mdiUpload}
+          onclick={() => inputElement?.click()}
           size="small"
           variant="ghost"
           color="secondary"
         >
-          <Icon path={mdiContentCopy} />
-          {$t('copy_to_clipboard')}
+          <Text class="hidden md:block">{$t('import_from_json')}</Text>
         </Button>
-        <Button onclick={() => downloadConfig()} size="small" variant="ghost" color="secondary">
-          <Icon path={mdiDownload} />
-          {$t('export_as_json')}
-        </Button>
-        {#if !$featureFlags.configFile}
-          <Button onclick={() => inputElement?.click()} size="small" variant="ghost" color="secondary">
-            <Icon path={mdiUpload} />
-            {$t('import_from_json')}
-          </Button>
-        {/if}
-      </HStack>
-    {/snippet}
+      {/if}
+    </HStack>
+  {/snippet}
 
-    <AdminSettings bind:config bind:this={adminSettingElement}>
-      {#snippet children({ savedConfig, defaultConfig })}
-        <section id="setting-content" class="flex place-content-center sm:mx-4">
-          <section class="w-full pb-28 sm:w-5/6 md:w-[896px]">
-            <div class="block lg:hidden">
-              <SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
-            </div>
-            <SettingAccordionState queryParam={QueryParameter.IS_OPEN}>
-              {#each filteredSettings as { component: Component, title, subtitle, key, icon } (key)}
-                <SettingAccordion {title} {subtitle} {key} {icon}>
-                  <Component
-                    onSave={(config) => adminSettingElement?.handleSave(config)}
-                    onReset={(options) => adminSettingElement?.handleReset(options)}
-                    disabled={$featureFlags.configFile}
-                    bind:config
-                    {defaultConfig}
-                    {savedConfig}
-                  />
-                </SettingAccordion>
-              {/each}
-            </SettingAccordionState>
-          </section>
+  <AdminSettings bind:config bind:this={adminSettingElement}>
+    {#snippet children({ savedConfig, defaultConfig })}
+      <section id="setting-content" class="flex place-content-center sm:mx-4">
+        <section class="w-full pb-28 sm:w-5/6 md:w-[896px]">
+          {#if $featureFlags.configFile}
+            <Alert color="warning" class="text-dark my-4" title={$t('admin.config_set_by_file')} />
+          {/if}
+          <div class="block lg:hidden">
+            <SearchBar placeholder={$t('search_settings')} bind:name={searchQuery} showLoadingSpinner={false} />
+          </div>
+          <SettingAccordionState queryParam={QueryParameter.IS_OPEN}>
+            {#each filteredSettings as { component: Component, title, subtitle, key, icon } (key)}
+              <SettingAccordion {title} {subtitle} {key} {icon}>
+                <Component
+                  onSave={(config) => adminSettingElement?.handleSave(config)}
+                  onReset={(options) => adminSettingElement?.handleReset(options)}
+                  disabled={$featureFlags.configFile}
+                  bind:config
+                  {defaultConfig}
+                  {savedConfig}
+                />
+              </SettingAccordion>
+            {/each}
+          </SettingAccordionState>
         </section>
-      {/snippet}
-    </AdminSettings>
-  </UserPageLayout>
-</div>
+      </section>
+    {/snippet}
+  </AdminSettings>
+</UserPageLayout>