From 1c50e198947e475a4bb2f851555f001287fba24b Mon Sep 17 00:00:00 2001
From: Brandon Wees <brandonwees@gmail.com>
Date: Fri, 20 Jun 2025 09:48:18 -0500
Subject: [PATCH] fix: use icons instead of toggles for admin user features
 view (#19369)

* fix: use icons instead of toggles for admin user features view

* fix: use red for X icon
---
 .../admin-page/user/feature-setting.svelte    | 16 ++++++++
 web/src/routes/admin/users/[id]/+page.svelte  | 39 +++++--------------
 2 files changed, 26 insertions(+), 29 deletions(-)
 create mode 100644 web/src/lib/components/admin-page/user/feature-setting.svelte

diff --git a/web/src/lib/components/admin-page/user/feature-setting.svelte b/web/src/lib/components/admin-page/user/feature-setting.svelte
new file mode 100644
index 0000000000..efeb13e22f
--- /dev/null
+++ b/web/src/lib/components/admin-page/user/feature-setting.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { Icon, Text } from '@immich/ui';
+  import { mdiCheck, mdiClose } from '@mdi/js';
+
+  interface Props {
+    title: string;
+    state: boolean;
+  }
+
+  let { title, state }: Props = $props();
+</script>
+
+<div class="flex justify-between items-center">
+  <Text class="text-sm font-medium">{title}</Text>
+  <Icon icon={state ? mdiCheck : mdiClose} class={state ? 'text-primary' : 'text-danger'} size="24" />
+</div>
diff --git a/web/src/routes/admin/users/[id]/+page.svelte b/web/src/routes/admin/users/[id]/+page.svelte
index 2b73f4c8ed..79e76e5d0f 100644
--- a/web/src/routes/admin/users/[id]/+page.svelte
+++ b/web/src/routes/admin/users/[id]/+page.svelte
@@ -25,13 +25,11 @@
     CardTitle,
     Code,
     Container,
-    Field,
     getByteUnitString,
     Heading,
     HStack,
     Icon,
     Stack,
-    Switch,
     Text,
   } from '@immich/ui';
   import {
@@ -50,6 +48,7 @@
   } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
+  import FeatureSetting from '$lib/components/admin-page/user/feature-setting.svelte';
 
   interface Props {
     data: PageData;
@@ -292,33 +291,15 @@
           <CardBody>
             <div class="px-4 pb-4">
               <Stack gap={3}>
-                <Field readOnly label={$t('email_notifications')}>
-                  <Switch checked={userPreferences.emailNotifications.enabled} color="primary" />
-                </Field>
-                <Field readOnly label={$t('folders')}>
-                  <Switch checked={userPreferences.folders.enabled} color="primary" />
-                </Field>
-                <Field readOnly label={$t('memories')}>
-                  <Switch checked={userPreferences.memories.enabled} color="primary" />
-                </Field>
-                <Field readOnly label={$t('people')}>
-                  <Switch checked={userPreferences.people.enabled} color="primary" />
-                </Field>
-                <Field readOnly label={$t('rating')}>
-                  <Switch checked={userPreferences.ratings.enabled} color="primary" />
-                </Field>
-                <Field readOnly label={$t('shared_links')}>
-                  <Switch checked={userPreferences.sharedLinks.enabled} color="primary" />
-                </Field>
-                <Field readOnly label={$t('show_supporter_badge')}>
-                  <Switch checked={userPreferences.purchase.showSupportBadge} color="primary" />
-                </Field>
-                <Field readOnly label={$t('tags')}>
-                  <Switch checked={userPreferences.tags.enabled} color="primary" />
-                </Field>
-                <Field readOnly label={$t('gcast_enabled')}>
-                  <Switch checked={userPreferences.cast.gCastEnabled} color="primary" />
-                </Field>
+                <FeatureSetting title={$t('email_notifications')} state={userPreferences.emailNotifications.enabled} />
+                <FeatureSetting title={$t('folders')} state={userPreferences.folders.enabled} />
+                <FeatureSetting title={$t('memories')} state={userPreferences.memories.enabled} />
+                <FeatureSetting title={$t('people')} state={userPreferences.people.enabled} />
+                <FeatureSetting title={$t('rating')} state={userPreferences.ratings.enabled} />
+                <FeatureSetting title={$t('shared_links')} state={userPreferences.sharedLinks.enabled} />
+                <FeatureSetting title={$t('show_supporter_badge')} state={userPreferences.purchase.showSupportBadge} />
+                <FeatureSetting title={$t('tags')} state={userPreferences.tags.enabled} />
+                <FeatureSetting title={$t('gcast_enabled')} state={userPreferences.cast.gCastEnabled} />
               </Stack>
             </div>
           </CardBody>