From 72a7be26c0ae6523c23934aa446e2e4bbb8beae8 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Wed, 12 Mar 2025 16:56:55 -0400
Subject: [PATCH] refactor: use immich/ui button component in user settings
 (#16836)

---
 .../change-password-settings.svelte             | 14 +++++++-------
 .../user-settings-page/device-list.svelte       |  4 ++--
 .../user-settings-page/download-settings.svelte | 17 ++++++++---------
 .../user-settings-page/feature-settings.svelte  | 13 ++++++-------
 .../notifications-settings.svelte               |  4 ++--
 .../user-settings-page/oauth-settings.svelte    |  8 +++++---
 .../partner-selection-modal.svelte              |  4 ++--
 .../user-settings-page/partner-settings.svelte  | 12 ++++++------
 .../user-settings-page/user-api-key-list.svelte | 12 ++++++------
 .../user-profile-settings.svelte                | 13 ++++++-------
 .../user-purchase-settings.svelte               | 10 +++++++---
 11 files changed, 57 insertions(+), 54 deletions(-)

diff --git a/web/src/lib/components/user-settings-page/change-password-settings.svelte b/web/src/lib/components/user-settings-page/change-password-settings.svelte
index b31cbac34f..dc8cfac42e 100644
--- a/web/src/lib/components/user-settings-page/change-password-settings.svelte
+++ b/web/src/lib/components/user-settings-page/change-password-settings.svelte
@@ -3,14 +3,13 @@
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
-  import { changePassword } from '@immich/sdk';
-  import { fade } from 'svelte/transition';
-
-  import Button from '$lib/components/elements/buttons/button.svelte';
-  import type { HttpError } from '@sveltejs/kit';
   import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import { t } from 'svelte-i18n';
   import { SettingInputFieldType } from '$lib/constants';
+  import { changePassword } from '@immich/sdk';
+  import { Button } from '@immich/ui';
+  import type { HttpError } from '@sveltejs/kit';
+  import { t } from 'svelte-i18n';
+  import { fade } from 'svelte/transition';
 
   let password = $state('');
   let newPassword = $state('');
@@ -72,8 +71,9 @@
 
         <div class="flex justify-end">
           <Button
+            shape="round"
             type="submit"
-            size="sm"
+            size="small"
             disabled={!(password && newPassword && newPassword === confirmPassword)}
             onclick={() => handleChangePassword()}>{$t('save')}</Button
           >
diff --git a/web/src/lib/components/user-settings-page/device-list.svelte b/web/src/lib/components/user-settings-page/device-list.svelte
index ab9159eae9..96870046df 100644
--- a/web/src/lib/components/user-settings-page/device-list.svelte
+++ b/web/src/lib/components/user-settings-page/device-list.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import { deleteAllSessions, deleteSession, getSessions, type SessionResponseDto } from '@immich/sdk';
   import { handleError } from '../../utils/handle-error';
-  import Button from '../elements/buttons/button.svelte';
   import { notificationController, NotificationType } from '../shared-components/notification/notification';
   import DeviceCard from './device-card.svelte';
   import { dialogController } from '$lib/components/shared-components/dialog/dialog';
   import { t } from 'svelte-i18n';
+  import { Button } from '@immich/ui';
 
   interface Props {
     devices: SessionResponseDto[];
@@ -82,7 +82,7 @@
       {$t('log_out_all_devices').toUpperCase()}
     </h3>
     <div class="flex justify-end">
-      <Button color="red" size="sm" onclick={handleDeleteAll}>{$t('log_out_all_devices')}</Button>
+      <Button shape="round" color="danger" size="small" onclick={handleDeleteAll}>{$t('log_out_all_devices')}</Button>
     </div>
   {/if}
 </section>
diff --git a/web/src/lib/components/user-settings-page/download-settings.svelte b/web/src/lib/components/user-settings-page/download-settings.svelte
index 97da347fb7..e2401a8a76 100644
--- a/web/src/lib/components/user-settings-page/download-settings.svelte
+++ b/web/src/lib/components/user-settings-page/download-settings.svelte
@@ -3,17 +3,16 @@
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
-  import { updateMyPreferences } from '@immich/sdk';
-  import { fade } from 'svelte/transition';
-  import { handleError } from '../../utils/handle-error';
-
-  import { preferences } from '$lib/stores/user.store';
-  import Button from '../elements/buttons/button.svelte';
-  import { t } from 'svelte-i18n';
   import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import { ByteUnit, convertFromBytes, convertToBytes } from '$lib/utils/byte-units';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import { SettingInputFieldType } from '$lib/constants';
+  import { preferences } from '$lib/stores/user.store';
+  import { ByteUnit, convertFromBytes, convertToBytes } from '$lib/utils/byte-units';
+  import { updateMyPreferences } from '@immich/sdk';
+  import { Button } from '@immich/ui';
+  import { t } from 'svelte-i18n';
+  import { fade } from 'svelte/transition';
+  import { handleError } from '../../utils/handle-error';
 
   let archiveSize = $state(convertFromBytes($preferences?.download?.archiveSize || 4, ByteUnit.GiB));
   let includeEmbeddedVideos = $state($preferences?.download?.includeEmbeddedVideos || false);
@@ -57,7 +56,7 @@
           bind:checked={includeEmbeddedVideos}
         ></SettingSwitch>
         <div class="flex justify-end">
-          <Button type="submit" size="sm" onclick={() => handleSave()}>{$t('save')}</Button>
+          <Button shape="round" type="submit" size="small" onclick={() => handleSave()}>{$t('save')}</Button>
         </div>
       </div>
     </form>
diff --git a/web/src/lib/components/user-settings-page/feature-settings.svelte b/web/src/lib/components/user-settings-page/feature-settings.svelte
index c3868070c3..4fdd8f21d7 100644
--- a/web/src/lib/components/user-settings-page/feature-settings.svelte
+++ b/web/src/lib/components/user-settings-page/feature-settings.svelte
@@ -3,15 +3,14 @@
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
-  import { updateMyPreferences } from '@immich/sdk';
-  import { fade } from 'svelte/transition';
-  import { handleError } from '../../utils/handle-error';
-
+  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import { preferences } from '$lib/stores/user.store';
-  import Button from '../elements/buttons/button.svelte';
+  import { updateMyPreferences } from '@immich/sdk';
+  import { Button } from '@immich/ui';
   import { t } from 'svelte-i18n';
-  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
+  import { fade } from 'svelte/transition';
+  import { handleError } from '../../utils/handle-error';
 
   // Folders
   let foldersEnabled = $state($preferences?.folders?.enabled ?? false);
@@ -140,7 +139,7 @@
         </SettingAccordion>
 
         <div class="flex justify-end">
-          <Button type="submit" size="sm" onclick={() => handleSave()}>{$t('save')}</Button>
+          <Button shape="round" type="submit" size="small" onclick={() => handleSave()}>{$t('save')}</Button>
         </div>
       </div>
     </form>
diff --git a/web/src/lib/components/user-settings-page/notifications-settings.svelte b/web/src/lib/components/user-settings-page/notifications-settings.svelte
index bec0633964..51a6558f43 100644
--- a/web/src/lib/components/user-settings-page/notifications-settings.svelte
+++ b/web/src/lib/components/user-settings-page/notifications-settings.svelte
@@ -9,8 +9,8 @@
 
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import { preferences } from '$lib/stores/user.store';
-  import Button from '../elements/buttons/button.svelte';
   import { t } from 'svelte-i18n';
+  import { Button } from '@immich/ui';
 
   let emailNotificationsEnabled = $state($preferences?.emailNotifications?.enabled ?? true);
   let albumInviteNotificationEnabled = $state($preferences?.emailNotifications?.albumInvite ?? true);
@@ -71,7 +71,7 @@
         </div>
 
         <div class="flex justify-end">
-          <Button type="submit" size="sm" onclick={() => handleSave()}>{$t('save')}</Button>
+          <Button shape="round" type="submit" size="small" onclick={() => handleSave()}>{$t('save')}</Button>
         </div>
       </div>
     </form>
diff --git a/web/src/lib/components/user-settings-page/oauth-settings.svelte b/web/src/lib/components/user-settings-page/oauth-settings.svelte
index 40ea82fd8c..8b97e6847b 100644
--- a/web/src/lib/components/user-settings-page/oauth-settings.svelte
+++ b/web/src/lib/components/user-settings-page/oauth-settings.svelte
@@ -6,10 +6,10 @@
   import { onMount } from 'svelte';
   import { fade } from 'svelte/transition';
   import { handleError } from '../../utils/handle-error';
-  import Button from '../elements/buttons/button.svelte';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
   import { notificationController, NotificationType } from '../shared-components/notification/notification';
   import { t } from 'svelte-i18n';
+  import { Button } from '@immich/ui';
 
   interface Props {
     user: UserAdminResponseDto;
@@ -62,9 +62,11 @@
         </div>
       {:else if $featureFlags.oauth}
         {#if user.oauthId}
-          <Button size="sm" onclick={() => handleUnlink()}>{$t('unlink_oauth')}</Button>
+          <Button shape="round" size="small" onclick={() => handleUnlink()}>{$t('unlink_oauth')}</Button>
         {:else}
-          <Button size="sm" onclick={() => oauth.authorize(globalThis.location)}>{$t('link_to_oauth')}</Button>
+          <Button shape="round" size="small" onclick={() => oauth.authorize(globalThis.location)}
+            >{$t('link_to_oauth')}</Button
+          >
         {/if}
       {/if}
     </div>
diff --git a/web/src/lib/components/user-settings-page/partner-selection-modal.svelte b/web/src/lib/components/user-settings-page/partner-selection-modal.svelte
index d4080eb042..f5f76e099f 100644
--- a/web/src/lib/components/user-settings-page/partner-selection-modal.svelte
+++ b/web/src/lib/components/user-settings-page/partner-selection-modal.svelte
@@ -3,8 +3,8 @@
   import { getPartners, PartnerDirection, searchUsers, type UserResponseDto } from '@immich/sdk';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
-  import Button from '../elements/buttons/button.svelte';
   import UserAvatar from '../shared-components/user-avatar.svelte';
+  import { Button } from '@immich/ui';
 
   interface Props {
     user: UserResponseDto;
@@ -72,7 +72,7 @@
 
     {#if selectedUsers.length > 0}
       <div class="pt-5">
-        <Button size="sm" fullwidth onclick={() => onAddUsers(selectedUsers)}>{$t('add')}</Button>
+        <Button shape="round" fullWidth onclick={() => onAddUsers(selectedUsers)}>{$t('add')}</Button>
       </div>
     {/if}
   </div>
diff --git a/web/src/lib/components/user-settings-page/partner-settings.svelte b/web/src/lib/components/user-settings-page/partner-settings.svelte
index 7db78082bb..909b9ec517 100644
--- a/web/src/lib/components/user-settings-page/partner-settings.svelte
+++ b/web/src/lib/components/user-settings-page/partner-settings.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
   import {
     createPartner,
     getPartners,
@@ -8,17 +11,14 @@
     type PartnerResponseDto,
     type UserResponseDto,
   } from '@immich/sdk';
+  import { Button } from '@immich/ui';
   import { mdiCheck, mdiClose } from '@mdi/js';
   import { onMount } from 'svelte';
+  import { t } from 'svelte-i18n';
   import { handleError } from '../../utils/handle-error';
-  import Button from '../elements/buttons/button.svelte';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
   import Icon from '../elements/icon.svelte';
-  import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
   import PartnerSelectionModal from './partner-selection-modal.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
-  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
-  import { t } from 'svelte-i18n';
 
   interface PartnerSharing {
     user: UserResponseDto;
@@ -189,7 +189,7 @@
   {/if}
 
   <div class="flex justify-end mt-5">
-    <Button size="sm" onclick={() => (createPartnerFlag = true)}>{$t('add_partner')}</Button>
+    <Button shape="round" size="small" onclick={() => (createPartnerFlag = true)}>{$t('add_partner')}</Button>
   </div>
 </section>
 
diff --git a/web/src/lib/components/user-settings-page/user-api-key-list.svelte b/web/src/lib/components/user-settings-page/user-api-key-list.svelte
index ffea572111..53e9079bff 100644
--- a/web/src/lib/components/user-settings-page/user-api-key-list.svelte
+++ b/web/src/lib/components/user-settings-page/user-api-key-list.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
   import { locale } from '$lib/stores/preferences.store';
   import {
     createApiKey,
@@ -8,16 +10,14 @@
     updateApiKey,
     type ApiKeyResponseDto,
   } from '@immich/sdk';
+  import { Button } from '@immich/ui';
   import { mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
   import { handleError } from '../../utils/handle-error';
-  import Button from '../elements/buttons/button.svelte';
   import APIKeyForm from '../forms/api-key-form.svelte';
   import APIKeySecret from '../forms/api-key-secret.svelte';
-  import { NotificationType, notificationController } from '../shared-components/notification/notification';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
-  import { t } from 'svelte-i18n';
+  import { notificationController, NotificationType } from '../shared-components/notification/notification';
 
   interface Props {
     keys: ApiKeyResponseDto[];
@@ -122,7 +122,7 @@
 <section class="my-4">
   <div class="flex flex-col gap-2" in:fade={{ duration: 500 }}>
     <div class="mb-2 flex justify-end">
-      <Button size="sm" onclick={() => (newKey = { name: $t('api_key') })}>{$t('new_api_key')}</Button>
+      <Button shape="round" size="small" onclick={() => (newKey = { name: $t('api_key') })}>{$t('new_api_key')}</Button>
     </div>
 
     {#if keys.length > 0}
diff --git a/web/src/lib/components/user-settings-page/user-profile-settings.svelte b/web/src/lib/components/user-settings-page/user-profile-settings.svelte
index a49eabcf13..c36c36d7cc 100644
--- a/web/src/lib/components/user-settings-page/user-profile-settings.svelte
+++ b/web/src/lib/components/user-settings-page/user-profile-settings.svelte
@@ -1,22 +1,21 @@
 <script lang="ts">
-  import { createBubbler, preventDefault } from 'svelte/legacy';
-
-  const bubble = createBubbler();
   import {
     notificationController,
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
   import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import { SettingInputFieldType } from '$lib/constants';
   import { user } from '$lib/stores/user.store';
   import { updateMyUser } from '@immich/sdk';
+  import { Button } from '@immich/ui';
   import { cloneDeep } from 'lodash-es';
+  import { t } from 'svelte-i18n';
+  import { createBubbler, preventDefault } from 'svelte/legacy';
   import { fade } from 'svelte/transition';
   import { handleError } from '../../utils/handle-error';
-  import Button from '../elements/buttons/button.svelte';
-  import { t } from 'svelte-i18n';
-  import { SettingInputFieldType } from '$lib/constants';
 
   let editedUser = $state(cloneDeep($user));
+  const bubble = createBubbler();
 
   const handleSaveProfile = async () => {
     try {
@@ -69,7 +68,7 @@
         />
 
         <div class="flex justify-end">
-          <Button type="submit" size="sm" onclick={() => handleSaveProfile()}>{$t('save')}</Button>
+          <Button shape="round" type="submit" size="small" onclick={() => handleSaveProfile()}>{$t('save')}</Button>
         </div>
       </div>
     </form>
diff --git a/web/src/lib/components/user-settings-page/user-purchase-settings.svelte b/web/src/lib/components/user-settings-page/user-purchase-settings.svelte
index 2408651234..64dac133f2 100644
--- a/web/src/lib/components/user-settings-page/user-purchase-settings.svelte
+++ b/web/src/lib/components/user-settings-page/user-purchase-settings.svelte
@@ -15,13 +15,13 @@
   } from '@immich/sdk';
   import Icon from '$lib/components/elements/icon.svelte';
   import { mdiKey } from '@mdi/js';
-  import Button from '$lib/components/elements/buttons/button.svelte';
   import { dialogController } from '$lib/components/shared-components/dialog/dialog';
   import { handleError } from '$lib/utils/handle-error';
   import PurchaseContent from '$lib/components/shared-components/purchasing/purchase-content.svelte';
   import { t } from 'svelte-i18n';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import { setSupportBadgeVisibility } from '$lib/utils/purchase-utils';
+  import { Button } from '@immich/ui';
   const { isPurchased } = purchaseStore;
 
   let isServerProduct = $state(false);
@@ -145,7 +145,9 @@
 
         {#if $user.isAdmin}
           <div class="text-right mt-4">
-            <Button size="sm" color="red" onclick={removeServerProductKey}>{$t('purchase_button_remove_key')}</Button>
+            <Button shape="round" size="small" color="danger" onclick={removeServerProductKey}
+              >{$t('purchase_button_remove_key')}</Button
+            >
           </div>
         {/if}
       {:else}
@@ -169,7 +171,9 @@
         </div>
 
         <div class="text-right mt-4">
-          <Button size="sm" color="red" onclick={removeIndividualProductKey}>{$t('purchase_button_remove_key')}</Button>
+          <Button shape="round" size="small" color="danger" onclick={removeIndividualProductKey}
+            >{$t('purchase_button_remove_key')}</Button
+          >
         </div>
       {/if}
     {:else}