feat: modal routes (#24726)

feat: new user route

web/src/routes/admin/library-management/(list)/+layout.svelte

@@ -4,27 +4,29 @@
   import OnEvents from '$lib/components/OnEvents.svelte';
   import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import { AppRoute } from '$lib/constants';
-  import { getLibrariesActions, handleShowLibraryCreateModal, handleViewLibrary } from '$lib/services/library.service';
+  import { getLibrariesActions, handleViewLibrary } from '$lib/services/library.service';
   import { locale } from '$lib/stores/preferences.store';
   import { getBytesWithUnit } from '$lib/utils/byte-units';
   import { getLibrary, getLibraryStatistics, type LibraryResponseDto } from '@immich/sdk';
   import { Button, CommandPaletteContext } from '@immich/ui';
+  import type { Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
-  import type { PageData } from './$types';
+  import type { LayoutData } from './$types';
 
   type Props = {
-    data: PageData;
+    children?: Snippet;
+    data: LayoutData;
   };
 
-  let { data }: Props = $props();
+  let { children, data }: Props = $props();
 
   let libraries = $state(data.libraries);
   let statistics = $state(data.statistics);
   let owners = $state(data.owners);
 
   const onLibraryCreate = async (library: LibraryResponseDto) => {
-    await goto(`${AppRoute.ADMIN_LIBRARY_MANAGEMENT}/${library.id}`);
+    await goto(`${AppRoute.ADMIN_LIBRARIES}/${library.id}`);
   };
 
   const onLibraryUpdate = async (library: LibraryResponseDto) => {
@@ -100,10 +102,12 @@
       {:else}
         <EmptyPlaceholder
           text={$t('no_libraries_message')}
-          onClick={handleShowLibraryCreateModal}
+          onClick={() => goto(AppRoute.ADMIN_LIBRARIES_NEW)}
           class="mt-10 mx-auto"
         />
       {/if}
+
+      {@render children?.()}
     </div>
   </section>
 </AdminPageLayout>

web/src/routes/admin/library-management/(list)/+layout.ts

@@ -1,7 +1,7 @@
 import { authenticate, requestServerInfo } from '$lib/utils/auth';
 import { getFormatter } from '$lib/utils/i18n';
 import { getAllLibraries, getLibraryStatistics, getUserAdmin, searchUsersAdmin } from '@immich/sdk';
-import type { PageLoad } from './$types';
+import type { LayoutLoad } from './$types';
 
 export const load = (async ({ url }) => {
   await authenticate(url, { admin: true });
@@ -26,4 +26,4 @@ export const load = (async ({ url }) => {
       title: $t('external_libraries'),
     },
   };
-}) satisfies PageLoad;
+}) satisfies LayoutLoad;

web/src/routes/admin/library-management/(list)/new/+page.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
+  import { AppRoute } from '$lib/constants';
+  import { handleCreateLibrary } from '$lib/services/library.service';
+  import { user } from '$lib/stores/user.store';
+  import { searchUsersAdmin } from '@immich/sdk';
+  import { FormModal, Text } from '@immich/ui';
+  import { mdiFolderSync } from '@mdi/js';
+  import { onMount } from 'svelte';
+  import { t } from 'svelte-i18n';
+
+  let ownerId: string = $state($user.id);
+
+  let userOptions: { value: string; text: string }[] = $state([]);
+
+  onMount(async () => {
+    const users = await searchUsersAdmin({});
+    userOptions = users.map((user) => ({ value: user.id, text: user.name }));
+  });
+
+  const onClose = async () => {
+    await goto(AppRoute.ADMIN_LIBRARIES);
+  };
+
+  const onSubmit = async () => {
+    const library = await handleCreateLibrary({ ownerId });
+    if (library) {
+      await goto(`${AppRoute.ADMIN_LIBRARIES}/${library.id}`, { replaceState: true });
+    }
+  };
+</script>
+
+<FormModal
+  title={$t('create_library')}
+  icon={mdiFolderSync}
+  {onClose}
+  size="small"
+  {onSubmit}
+  submitText={$t('create')}
+>
+  <SettingSelect label={$t('owner')} bind:value={ownerId} options={userOptions} name="user" />
+  <Text color="warning" size="small">{$t('admin.note_cannot_be_changed_later')}</Text>
+</FormModal>

web/src/routes/admin/library-management/(list)/new/+page.ts

@@ -0,0 +1,14 @@
+import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ url }) => {
+  await authenticate(url, { admin: true });
+  const $t = await getFormatter();
+
+  return {
+    meta: {
+      title: $t('external_libraries'),
+    },
+  };
+}) satisfies PageLoad;

web/src/routes/admin/library-management/[id]/+layout.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import emptyFoldersUrl from '$lib/assets/empty-folders.svg';
+  import AdminCard from '$lib/components/AdminCard.svelte';
+  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
+  import OnEvents from '$lib/components/OnEvents.svelte';
+  import ServerStatisticsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
+  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
+  import TableButton from '$lib/components/TableButton.svelte';
+  import { AppRoute } from '$lib/constants';
+  import LibraryFolderAddModal from '$lib/modals/LibraryFolderAddModal.svelte';
+  import {
+    getLibraryActions,
+    getLibraryExclusionPatternActions,
+    getLibraryFolderActions,
+  } from '$lib/services/library.service';
+  import { getBytesWithUnit } from '$lib/utils/byte-units';
+  import type { LibraryResponseDto } from '@immich/sdk';
+  import { Code, CommandPaletteContext, Container, Heading, modalManager } from '@immich/ui';
+  import { mdiCameraIris, mdiChartPie, mdiFilterMinusOutline, mdiFolderOutline, mdiPlayCircle } from '@mdi/js';
+  import type { Snippet } from 'svelte';
+  import { t } from 'svelte-i18n';
+  import type { LayoutData } from './$types';
+
+  type Props = {
+    children?: Snippet;
+    data: LayoutData;
+  };
+
+  const { children, data }: Props = $props();
+
+  const statistics = data.statistics;
+  const [storageUsage, unit] = getBytesWithUnit(statistics.usage);
+
+  let library = $state(data.library);
+
+  const onLibraryUpdate = (newLibrary: LibraryResponseDto) => {
+    if (newLibrary.id === library.id) {
+      library = newLibrary;
+    }
+  };
+
+  const onLibraryDelete = async ({ id }: { id: string }) => {
+    if (id === library.id) {
+      await goto(AppRoute.ADMIN_LIBRARIES);
+    }
+  };
+
+  const { Edit, Delete, AddFolder, AddExclusionPattern, Scan } = $derived(getLibraryActions($t, library));
+</script>
+
+<OnEvents {onLibraryUpdate} {onLibraryDelete} />
+
+<CommandPaletteContext commands={[Edit, Delete, AddFolder, AddExclusionPattern, Scan]} />
+
+<AdminPageLayout
+  breadcrumbs={[{ title: $t('external_libraries'), href: AppRoute.ADMIN_LIBRARIES }, { title: library.name }]}
+  actions={[Scan, Edit, Delete]}
+>
+  <Container size="large" center>
+    <div class="grid gap-4 grid-cols-1 lg:grid-cols-2 w-full">
+      <Heading tag="h1" size="large" class="col-span-full my-4">{library.name}</Heading>
+      <div class="flex flex-col lg:flex-row gap-4 col-span-full">
+        <ServerStatisticsCard icon={mdiCameraIris} title={$t('photos')} value={statistics.photos} />
+        <ServerStatisticsCard icon={mdiPlayCircle} title={$t('videos')} value={statistics.videos} />
+        <ServerStatisticsCard icon={mdiChartPie} title={$t('usage')} value={storageUsage} {unit} />
+      </div>
+
+      <AdminCard icon={mdiFolderOutline} title={$t('folders')} headerAction={AddFolder}>
+        {#if library.importPaths.length === 0}
+          <EmptyPlaceholder
+            src={emptyFoldersUrl}
+            text={$t('admin.library_folder_description')}
+            fullWidth
+            onClick={() => modalManager.show(LibraryFolderAddModal, { library })}
+          />
+        {:else}
+          <table class="w-full">
+            <tbody>
+              {#each library.importPaths as folder (folder)}
+                {@const { Edit, Delete } = getLibraryFolderActions($t, library, folder)}
+                <tr class="h-12">
+                  <td>
+                    <Code>{folder}</Code>
+                  </td>
+                  <td class="flex gap-2 justify-end">
+                    <TableButton action={Edit} />
+                    <TableButton action={Delete} />
+                  </td>
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        {/if}
+      </AdminCard>
+
+      <AdminCard icon={mdiFilterMinusOutline} title={$t('exclusion_pattern')} headerAction={AddExclusionPattern}>
+        <table class="w-full">
+          <tbody>
+            {#each library.exclusionPatterns as exclusionPattern (exclusionPattern)}
+              {@const { Edit, Delete } = getLibraryExclusionPatternActions($t, library, exclusionPattern)}
+              <tr class="h-12">
+                <td>
+                  <Code>{exclusionPattern}</Code>
+                </td>
+                <td class="flex gap-2 justify-end">
+                  <TableButton action={Edit} />
+                  <TableButton action={Delete} />
+                </td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </AdminCard>
+    </div>
+    {@render children?.()}
+  </Container>
+</AdminPageLayout>

web/src/routes/admin/library-management/[id]/+layout.ts

@@ -0,0 +1,29 @@
+import { AppRoute } from '$lib/constants';
+import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
+import { getLibrary, getLibraryStatistics, type LibraryResponseDto } from '@immich/sdk';
+import { redirect } from '@sveltejs/kit';
+import type { LayoutLoad } from './$types';
+
+export const load = (async ({ params: { id }, url }) => {
+  await authenticate(url, { admin: true });
+
+  let library: LibraryResponseDto;
+
+  try {
+    library = await getLibrary({ id });
+  } catch {
+    redirect(302, AppRoute.ADMIN_LIBRARIES);
+  }
+
+  const statistics = await getLibraryStatistics({ id });
+  const $t = await getFormatter();
+
+  return {
+    library,
+    statistics,
+    meta: {
+      title: $t('admin.library_details'),
+    },
+  };
+}) satisfies LayoutLoad;

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

@@ -1,105 +0,0 @@
-<script lang="ts">
-  import { goto } from '$app/navigation';
-  import emptyFoldersUrl from '$lib/assets/empty-folders.svg';
-  import AdminCard from '$lib/components/AdminCard.svelte';
-  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
-  import OnEvents from '$lib/components/OnEvents.svelte';
-  import ServerStatisticsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
-  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
-  import TableButton from '$lib/components/TableButton.svelte';
-  import { AppRoute } from '$lib/constants';
-  import LibraryFolderAddModal from '$lib/modals/LibraryFolderAddModal.svelte';
-  import {
-    getLibraryActions,
-    getLibraryExclusionPatternActions,
-    getLibraryFolderActions,
-  } from '$lib/services/library.service';
-  import { getBytesWithUnit } from '$lib/utils/byte-units';
-  import { Code, CommandPaletteContext, Container, Heading, modalManager } from '@immich/ui';
-  import { mdiCameraIris, mdiChartPie, mdiFilterMinusOutline, mdiFolderOutline, mdiPlayCircle } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-  import type { PageData } from './$types';
-
-  type Props = {
-    data: PageData;
-  };
-
-  const { data }: Props = $props();
-
-  const statistics = data.statistics;
-  const [storageUsage, unit] = getBytesWithUnit(statistics.usage);
-
-  let library = $derived(data.library);
-
-  const { Rename, Delete, AddFolder, AddExclusionPattern, Scan } = $derived(getLibraryActions($t, library));
-</script>
-
-<OnEvents
-  onLibraryUpdate={(newLibrary) => (library = newLibrary)}
-  onLibraryDelete={({ id }) => id === library.id && goto(AppRoute.ADMIN_LIBRARY_MANAGEMENT)}
-/>
-
-<CommandPaletteContext commands={[Rename, Delete, AddFolder, AddExclusionPattern, Scan]} />
-
-<AdminPageLayout
-  breadcrumbs={[{ title: $t('external_libraries'), href: AppRoute.ADMIN_LIBRARY_MANAGEMENT }, { title: library.name }]}
-  actions={[Scan, Rename, Delete]}
->
-  <Container size="large" center>
-    <div class="grid gap-4 grid-cols-1 lg:grid-cols-2 w-full">
-      <Heading tag="h1" size="large" class="col-span-full my-4">{library.name}</Heading>
-      <div class="flex flex-col lg:flex-row gap-4 col-span-full">
-        <ServerStatisticsCard icon={mdiCameraIris} title={$t('photos')} value={statistics.photos} />
-        <ServerStatisticsCard icon={mdiPlayCircle} title={$t('videos')} value={statistics.videos} />
-        <ServerStatisticsCard icon={mdiChartPie} title={$t('usage')} value={storageUsage} {unit} />
-      </div>
-
-      <AdminCard icon={mdiFolderOutline} title={$t('folders')} headerAction={AddFolder}>
-        {#if library.importPaths.length === 0}
-          <EmptyPlaceholder
-            src={emptyFoldersUrl}
-            text={$t('admin.library_folder_description')}
-            fullWidth
-            onClick={() => modalManager.show(LibraryFolderAddModal, { library })}
-          />
-        {:else}
-          <table class="w-full">
-            <tbody>
-              {#each library.importPaths as folder (folder)}
-                {@const { Edit, Delete } = getLibraryFolderActions($t, library, folder)}
-                <tr class="h-12">
-                  <td>
-                    <Code>{folder}</Code>
-                  </td>
-                  <td class="flex gap-2 justify-end">
-                    <TableButton action={Edit} />
-                    <TableButton action={Delete} />
-                  </td>
-                </tr>
-              {/each}
-            </tbody>
-          </table>
-        {/if}
-      </AdminCard>
-
-      <AdminCard icon={mdiFilterMinusOutline} title={$t('exclusion_pattern')} headerAction={AddExclusionPattern}>
-        <table class="w-full">
-          <tbody>
-            {#each library.exclusionPatterns as exclusionPattern (exclusionPattern)}
-              {@const { Edit, Delete } = getLibraryExclusionPatternActions($t, library, exclusionPattern)}
-              <tr class="h-12">
-                <td>
-                  <Code>{exclusionPattern}</Code>
-                </td>
-                <td class="flex gap-2 justify-end">
-                  <TableButton action={Edit} />
-                  <TableButton action={Delete} />
-                </td>
-              </tr>
-            {/each}
-          </tbody>
-        </table>
-      </AdminCard>
-    </div>
-  </Container>
-</AdminPageLayout>

web/src/routes/admin/library-management/[id]/+page.ts

@@ -1,26 +1,13 @@
-import { AppRoute } from '$lib/constants';
 import { authenticate } from '$lib/utils/auth';
 import { getFormatter } from '$lib/utils/i18n';
-import { getLibrary, getLibraryStatistics, type LibraryResponseDto } from '@immich/sdk';
-import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
-export const load = (async ({ params: { id }, url }) => {
+export const load = (async ({ url }) => {
   await authenticate(url, { admin: true });
-  let library: LibraryResponseDto;
 
-  try {
-    library = await getLibrary({ id });
-  } catch {
-    redirect(302, AppRoute.ADMIN_LIBRARY_MANAGEMENT);
-  }
-
-  const statistics = await getLibraryStatistics({ id });
   const $t = await getFormatter();
 
   return {
-    library,
-    statistics,
     meta: {
       title: $t('admin.library_details'),
     },

web/src/routes/admin/library-management/[id]/edit/+page.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { AppRoute } from '$lib/constants';
+  import { handleUpdateLibrary } from '$lib/services/library.service';
+  import { Field, FormModal, Input } from '@immich/ui';
+  import { mdiRenameOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import type { PageData } from '../$types';
+
+  type Props = {
+    data: PageData;
+  };
+
+  let { data }: Props = $props();
+
+  const library = $state(data.library);
+  let name = $state(library.name);
+
+  const onClose = async () => {
+    await goto(`${AppRoute.ADMIN_LIBRARIES}/${library.id}`);
+  };
+
+  const onSubmit = async () => {
+    const success = await handleUpdateLibrary(library, { name });
+    if (success) {
+      await onClose();
+    }
+  };
+</script>
+
+<FormModal icon={mdiRenameOutline} title={$t('edit')} {onSubmit} {onClose} size="small">
+  <Field label={$t('name')}>
+    <Input bind:value={name} />
+  </Field>
+</FormModal>

web/src/routes/admin/library-management/[id]/edit/+page.ts

@@ -0,0 +1,15 @@
+import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ url }) => {
+  await authenticate(url, { admin: true });
+
+  const $t = await getFormatter();
+
+  return {
+    meta: {
+      title: $t('admin.library_details'),
+    },
+  };
+}) satisfies PageLoad;

web/src/routes/admin/users/(list)/+layout.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
+  import OnEvents from '$lib/components/OnEvents.svelte';
+  import { getUserAdminsActions, handleNavigateUserAdmin } from '$lib/services/user-admin.service';
+  import { locale } from '$lib/stores/preferences.store';
+  import { getByteUnitString } from '$lib/utils/byte-units';
+  import { searchUsersAdmin, type UserAdminResponseDto } from '@immich/sdk';
+  import { Button, CommandPaletteContext, Container, Icon } from '@immich/ui';
+  import { mdiInfinity } from '@mdi/js';
+  import type { Snippet } from 'svelte';
+  import { t } from 'svelte-i18n';
+  import type { LayoutData } from './$types';
+
+  type Props = {
+    children?: Snippet;
+    data: LayoutData;
+  };
+
+  let { children, data }: Props = $props();
+
+  let users: UserAdminResponseDto[] = $state(data.users);
+
+  const onUpdate = async (user: UserAdminResponseDto) => {
+    const index = users.findIndex(({ id }) => id === user.id);
+    if (index === -1) {
+      users = await searchUsersAdmin({ withDeleted: true });
+    } else {
+      users[index] = user;
+    }
+  };
+
+  const onUserAdminDeleted = ({ id: userId }: { id: string }) => {
+    users = users.filter(({ id }) => id !== userId);
+  };
+
+  const { Create } = $derived(getUserAdminsActions($t));
+</script>
+
+<OnEvents
+  onUserAdminCreate={onUpdate}
+  onUserAdminUpdate={onUpdate}
+  onUserAdminDelete={onUpdate}
+  onUserAdminRestore={onUpdate}
+  {onUserAdminDeleted}
+/>
+
+<CommandPaletteContext commands={[Create]} />
+
+<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]} actions={[Create]}>
+  <Container center size="large">
+    <table class="my-5 w-full text-start">
+      <thead
+        class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray"
+      >
+        <tr class="flex w-full place-items-center">
+          <th class="w-8/12 sm:w-5/12 lg:w-6/12 xl:w-4/12 2xl:w-5/12 text-center text-sm font-medium">{$t('email')}</th>
+          <th class="hidden sm:block w-3/12 text-center text-sm font-medium">{$t('name')}</th>
+          <th class="hidden xl:block w-3/12 2xl:w-2/12 text-center text-sm font-medium">{$t('has_quota')}</th>
+        </tr>
+      </thead>
+      <tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
+        {#each users as user (user.id)}
+          <tr
+            class="flex h-20 overflow-hidden w-full place-items-center text-center dark:text-immich-dark-fg {user.deletedAt
+              ? 'bg-red-300 dark:bg-red-900'
+              : 'even:bg-subtle/20 odd:bg-subtle/80'}"
+          >
+            <td class="w-8/12 sm:w-5/12 lg:w-6/12 xl:w-4/12 2xl:w-5/12 text-ellipsis break-all px-2 text-sm">
+              {user.email}
+            </td>
+            <td class="hidden sm:block w-3/12 text-ellipsis break-all px-2 text-sm">{user.name}</td>
+            <td class="hidden xl:block w-3/12 2xl:w-2/12 text-ellipsis break-all px-2 text-sm">
+              <div class="container mx-auto flex flex-wrap justify-center">
+                {#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
+                  {getByteUnitString(user.quotaSizeInBytes, $locale)}
+                {:else}
+                  <Icon icon={mdiInfinity} size="16" />
+                {/if}
+              </div>
+            </td>
+            <td
+              class="flex flex-row flex-wrap justify-center gap-x-2 gap-y-1 w-4/12 lg:w-3/12 xl:w-2/12 text-ellipsis break-all text-sm"
+            >
+              <Button onclick={() => handleNavigateUserAdmin(user)}>{$t('view')}</Button>
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+
+    {@render children?.()}
+  </Container>
+</AdminPageLayout>

web/src/routes/admin/users/(list)/+layout.ts

@@ -1,18 +1,18 @@
 import { authenticate, requestServerInfo } from '$lib/utils/auth';
 import { getFormatter } from '$lib/utils/i18n';
 import { searchUsersAdmin } from '@immich/sdk';
-import type { PageLoad } from './$types';
+import type { LayoutLoad } from './$types';
 
 export const load = (async ({ url }) => {
   await authenticate(url, { admin: true });
   await requestServerInfo();
-  const allUsers = await searchUsersAdmin({ withDeleted: true });
+  const users = await searchUsersAdmin({ withDeleted: true });
   const $t = await getFormatter();
 
   return {
-    allUsers,
+    users,
     meta: {
       title: $t('admin.user_management'),
     },
   };
-}) satisfies PageLoad;
+}) satisfies LayoutLoad;

web/src/routes/admin/users/(list)/new/+page.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { AppRoute } from '$lib/constants';
+  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
+  import { handleCreateUserAdmin } from '$lib/services/user-admin.service';
+  import { userInteraction } from '$lib/stores/user.svelte';
+  import { ByteUnit, convertToBytes } from '$lib/utils/byte-units';
+  import {
+    Button,
+    Field,
+    HelperText,
+    HStack,
+    Input,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    PasswordInput,
+    Stack,
+    Switch,
+  } from '@immich/ui';
+  import { t } from 'svelte-i18n';
+
+  let success = $state(false);
+
+  let email = $state('');
+  let password = $state('');
+  let passwordConfirm = $state('');
+  let name = $state('');
+  let shouldChangePassword = $state(true);
+  let notify = $state(true);
+  let isAdmin = $state(false);
+
+  let quotaSize: string | undefined = $state();
+  let isCreatingUser = $state(false);
+
+  let quotaSizeInBytes = $derived(quotaSize === null ? null : convertToBytes(Number(quotaSize), ByteUnit.GiB));
+  let quotaSizeWarning = $derived(
+    quotaSizeInBytes && userInteraction.serverInfo && quotaSizeInBytes > userInteraction.serverInfo.diskSizeRaw,
+  );
+
+  const passwordMismatch = $derived(password !== passwordConfirm && passwordConfirm.length > 0);
+  const passwordMismatchMessage = $derived(passwordMismatch ? $t('password_does_not_match') : '');
+  const valid = $derived(!passwordMismatch && !isCreatingUser);
+
+  const onClose = async () => {
+    await goto(AppRoute.ADMIN_USERS);
+  };
+
+  const onSubmit = async (event: Event) => {
+    event.preventDefault();
+
+    if (!valid) {
+      return;
+    }
+
+    isCreatingUser = true;
+
+    const user = await handleCreateUserAdmin({
+      email,
+      password,
+      shouldChangePassword,
+      name,
+      quotaSizeInBytes,
+      notify,
+      isAdmin,
+    });
+
+    if (user) {
+      await goto(`${AppRoute.ADMIN_USERS}/${user.id}`, { replaceState: true });
+    }
+
+    isCreatingUser = false;
+  };
+</script>
+
+<Modal title={$t('create_new_user')} {onClose} size="small">
+  <ModalBody>
+    <form onsubmit={onSubmit} autocomplete="off" id="create-new-user-form">
+      {#if success}
+        <p class="text-sm text-immich-primary">{$t('new_user_created')}</p>
+      {/if}
+
+      <Stack gap={4}>
+        <Field label={$t('email')} required>
+          <Input bind:value={email} type="email" />
+        </Field>
+
+        {#if featureFlagsManager.value.email}
+          <Field label={$t('admin.send_welcome_email')}>
+            <Switch id="send-welcome-email" bind:checked={notify} class="text-sm" />
+          </Field>
+        {/if}
+
+        <Field label={$t('password')} required={!featureFlagsManager.value.oauth}>
+          <PasswordInput id="password" bind:value={password} autocomplete="new-password" />
+        </Field>
+
+        <Field label={$t('confirm_password')} required={!featureFlagsManager.value.oauth}>
+          <PasswordInput id="confirmPassword" bind:value={passwordConfirm} autocomplete="new-password" />
+          <HelperText color="danger">{passwordMismatchMessage}</HelperText>
+        </Field>
+
+        <Field label={$t('admin.require_password_change_on_login')}>
+          <Switch id="require-password-change" bind:checked={shouldChangePassword} class="text-sm text-start" />
+        </Field>
+
+        <Field label={$t('name')} required>
+          <Input bind:value={name} />
+        </Field>
+
+        <Field label={$t('admin.quota_size_gib')}>
+          <Input bind:value={quotaSize} type="number" placeholder={$t('unlimited')} min="0" step="1" />
+          {#if quotaSizeWarning}
+            <HelperText color="danger">{$t('errors.quota_higher_than_disk_size')}</HelperText>
+          {/if}
+        </Field>
+
+        <Field label={$t('admin.admin_user')}>
+          <Switch bind:checked={isAdmin} />
+        </Field>
+      </Stack>
+    </form>
+  </ModalBody>
+
+  <ModalFooter>
+    <HStack fullWidth>
+      <Button color="secondary" fullWidth onclick={() => onClose()} shape="round">{$t('cancel')}</Button>
+      <Button type="submit" disabled={!valid} fullWidth shape="round" form="create-new-user-form"
+        >{$t('create')}
+      </Button>
+    </HStack>
+  </ModalFooter>
+</Modal>

web/src/routes/admin/users/(list)/new/+page.ts

@@ -0,0 +1,14 @@
+import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ url }) => {
+  await authenticate(url, { admin: true });
+  const $t = await getFormatter();
+
+  return {
+    meta: {
+      title: $t('admin.user_management'),
+    },
+  };
+}) satisfies PageLoad;

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

@@ -1,93 +0,0 @@
-<script lang="ts">
-  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
-  import OnEvents from '$lib/components/OnEvents.svelte';
-  import { getUserAdminsActions, handleNavigateUserAdmin } from '$lib/services/user-admin.service';
-  import { locale } from '$lib/stores/preferences.store';
-  import { getByteUnitString } from '$lib/utils/byte-units';
-  import { searchUsersAdmin, type UserAdminResponseDto } from '@immich/sdk';
-  import { Button, CommandPaletteContext, Icon } from '@immich/ui';
-  import { mdiInfinity } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-  import type { PageData } from './$types';
-
-  type Props = {
-    data: PageData;
-  };
-
-  let { data }: Props = $props();
-
-  let allUsers: UserAdminResponseDto[] = $state(data.allUsers);
-
-  const onUpdate = async (user: UserAdminResponseDto) => {
-    const index = allUsers.findIndex(({ id }) => id === user.id);
-    if (index === -1) {
-      allUsers = await searchUsersAdmin({ withDeleted: true });
-    } else {
-      allUsers[index] = user;
-    }
-  };
-
-  const onUserAdminDeleted = ({ id: userId }: { id: string }) => {
-    allUsers = allUsers.filter(({ id }) => id !== userId);
-  };
-
-  const { Create } = $derived(getUserAdminsActions($t));
-</script>
-
-<OnEvents
-  onUserAdminCreate={onUpdate}
-  onUserAdminUpdate={onUpdate}
-  onUserAdminDelete={onUpdate}
-  onUserAdminRestore={onUpdate}
-  {onUserAdminDeleted}
-/>
-
-<CommandPaletteContext commands={[Create]} />
-
-<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]} actions={[Create]}>
-  <section id="setting-content" class="flex place-content-center sm:mx-4">
-    <section class="w-full pb-28 lg:w-212.5">
-      <table class="my-5 w-full text-start">
-        <thead
-          class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray"
-        >
-          <tr class="flex w-full place-items-center">
-            <th class="w-8/12 sm:w-5/12 lg:w-6/12 xl:w-4/12 2xl:w-5/12 text-center text-sm font-medium"
-              >{$t('email')}</th
-            >
-            <th class="hidden sm:block w-3/12 text-center text-sm font-medium">{$t('name')}</th>
-            <th class="hidden xl:block w-3/12 2xl:w-2/12 text-center text-sm font-medium">{$t('has_quota')}</th>
-          </tr>
-        </thead>
-        <tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
-          {#each allUsers as user (user.id)}
-            <tr
-              class="flex h-20 overflow-hidden w-full place-items-center text-center dark:text-immich-dark-fg {user.deletedAt
-                ? 'bg-red-300 dark:bg-red-900'
-                : 'even:bg-subtle/20 odd:bg-subtle/80'}"
-            >
-              <td class="w-8/12 sm:w-5/12 lg:w-6/12 xl:w-4/12 2xl:w-5/12 text-ellipsis break-all px-2 text-sm">
-                {user.email}
-              </td>
-              <td class="hidden sm:block w-3/12 text-ellipsis break-all px-2 text-sm">{user.name}</td>
-              <td class="hidden xl:block w-3/12 2xl:w-2/12 text-ellipsis break-all px-2 text-sm">
-                <div class="container mx-auto flex flex-wrap justify-center">
-                  {#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
-                    {getByteUnitString(user.quotaSizeInBytes, $locale)}
-                  {:else}
-                    <Icon icon={mdiInfinity} size="16" />
-                  {/if}
-                </div>
-              </td>
-              <td
-                class="flex flex-row flex-wrap justify-center gap-x-2 gap-y-1 w-4/12 lg:w-3/12 xl:w-2/12 text-ellipsis break-all text-sm"
-              >
-                <Button onclick={() => handleNavigateUserAdmin(user)}>{$t('view')}</Button>
-              </td>
-            </tr>
-          {/each}
-        </tbody>
-      </table>
-    </section>
-  </section>
-</AdminPageLayout>

web/src/routes/admin/users/[id]/+layout.svelte

@@ -0,0 +1,222 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import AdminCard from '$lib/components/AdminCard.svelte';
+  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
+  import OnEvents from '$lib/components/OnEvents.svelte';
+  import ServerStatisticsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
+  import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
+  import DeviceCard from '$lib/components/user-settings-page/device-card.svelte';
+  import FeatureSetting from '$lib/components/users/FeatureSetting.svelte';
+  import { AppRoute } from '$lib/constants';
+  import { getUserAdminActions } from '$lib/services/user-admin.service';
+  import { locale } from '$lib/stores/preferences.store';
+  import { createDateFormatter, findLocale } from '$lib/utils';
+  import { getBytesWithUnit } from '$lib/utils/byte-units';
+  import { type UserAdminResponseDto } from '@immich/sdk';
+  import {
+    Alert,
+    Badge,
+    Code,
+    CommandPaletteContext,
+    Container,
+    getByteUnitString,
+    Heading,
+    Icon,
+    MenuItemType,
+    Stack,
+    Text,
+  } from '@immich/ui';
+  import {
+    mdiAccountOutline,
+    mdiCameraIris,
+    mdiChartPie,
+    mdiChartPieOutline,
+    mdiCheckCircle,
+    mdiDevices,
+    mdiFeatureSearchOutline,
+    mdiPlayCircle,
+    mdiTrashCanOutline,
+  } from '@mdi/js';
+  import type { Snippet } from 'svelte';
+  import { t } from 'svelte-i18n';
+  import type { LayoutData } from './$types';
+
+  type Props = {
+    children?: Snippet;
+    data: LayoutData;
+  };
+
+  const { children, data }: Props = $props();
+
+  let user = $state(data.user);
+  const userPreferences = $state(data.userPreferences);
+  const userStatistics = $state(data.userStatistics);
+  const userSessions = $state(data.userSessions);
+  const TiB = 1024 ** 4;
+  const usage = $derived(user.quotaUsageInBytes ?? 0);
+  let [statsUsage, statsUsageUnit] = $derived(getBytesWithUnit(usage, usage > TiB ? 2 : 0));
+  const usedBytes = $derived(user.quotaUsageInBytes ?? 0);
+  const availableBytes = $derived(user.quotaSizeInBytes ?? 1);
+  let usedPercentage = $derived(Math.min(Math.round((usedBytes / availableBytes) * 100), 100));
+
+  let editedLocale = $derived(findLocale($locale).code);
+  let createAtDate: Date = $derived(new Date(user.createdAt));
+  let updatedAtDate: Date = $derived(new Date(user.updatedAt));
+  let userCreatedAtDateAndTime: string = $derived(createDateFormatter(editedLocale).formatDateTime(createAtDate));
+  let userUpdatedAtDateAndTime: string = $derived(createDateFormatter(editedLocale).formatDateTime(updatedAtDate));
+
+  const getUsageClass = () => {
+    if (usedPercentage >= 95) {
+      return 'bg-red-500';
+    }
+
+    if (usedPercentage > 80) {
+      return 'bg-yellow-500';
+    }
+
+    return 'bg-primary';
+  };
+
+  const { ResetPassword, ResetPinCode, Update, Delete, Restore } = $derived(getUserAdminActions($t, user));
+
+  const onUpdate = (update: UserAdminResponseDto) => {
+    if (update.id === user.id) {
+      user = update;
+    }
+  };
+
+  const onUserAdminDeleted = async ({ id }: { id: string }) => {
+    if (id === user.id) {
+      await goto(AppRoute.ADMIN_USERS);
+    }
+  };
+</script>
+
+<OnEvents
+  onUserAdminUpdate={onUpdate}
+  onUserAdminDelete={onUpdate}
+  onUserAdminRestore={onUpdate}
+  {onUserAdminDeleted}
+/>
+
+<CommandPaletteContext commands={[ResetPassword, ResetPinCode, Update, Delete, Restore]} />
+
+<AdminPageLayout
+  breadcrumbs={[{ title: $t('admin.user_management'), href: AppRoute.ADMIN_USERS }, { title: user.name }]}
+  actions={[ResetPassword, ResetPinCode, Update, Restore, MenuItemType.Divider, Delete]}
+>
+  <div>
+    <Container size="large" center>
+      {#if user.deletedAt}
+        <Alert color="danger" class="my-4" title={$t('user_has_been_deleted')} icon={mdiTrashCanOutline} />
+      {/if}
+
+      <div class="grid gap-4 grid-cols-1 lg:grid-cols-2 w-full">
+        <div class="col-span-full flex flex-col gap-4 my-4">
+          <div class="flex items-center gap-4">
+            <UserAvatar {user} size="md" />
+            <Heading tag="h1" size="large">{user.name}</Heading>
+          </div>
+          {#if user.isAdmin}
+            <div>
+              <Badge color="primary" size="small">{$t('admin.admin_user')}</Badge>
+            </div>
+          {/if}
+        </div>
+        <div class="col-span-full">
+          <div class="flex flex-col lg:flex-row gap-4 w-full">
+            <ServerStatisticsCard icon={mdiCameraIris} title={$t('photos')} value={userStatistics.images} />
+            <ServerStatisticsCard icon={mdiPlayCircle} title={$t('videos')} value={userStatistics.videos} />
+            <ServerStatisticsCard icon={mdiChartPie} title={$t('storage')} value={statsUsage} unit={statsUsageUnit} />
+          </div>
+        </div>
+
+        <AdminCard icon={mdiAccountOutline} title={$t('profile')}>
+          <Stack gap={2}>
+            <div>
+              <Heading tag="h3" size="tiny">{$t('name')}</Heading>
+              <Text>{user.name}</Text>
+            </div>
+            <div>
+              <Heading tag="h3" size="tiny">{$t('email')}</Heading>
+              <Text>{user.email}</Text>
+            </div>
+            <div>
+              <Heading tag="h3" size="tiny">{$t('created_at')}</Heading>
+              <Text>{userCreatedAtDateAndTime}</Text>
+            </div>
+            <div>
+              <Heading tag="h3" size="tiny">{$t('updated_at')}</Heading>
+              <Text>{userUpdatedAtDateAndTime}</Text>
+            </div>
+            <div>
+              <Heading tag="h3" size="tiny">{$t('id')}</Heading>
+              <Code>{user.id}</Code>
+            </div>
+          </Stack>
+        </AdminCard>
+
+        <AdminCard icon={mdiFeatureSearchOutline} title={$t('features')}>
+          <Stack gap={3}>
+            <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>
+        </AdminCard>
+
+        <AdminCard icon={mdiChartPieOutline} title={$t('storage_quota')}>
+          {#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
+            <Text>
+              {$t('storage_usage', {
+                values: {
+                  used: getByteUnitString(usedBytes, $locale, 3),
+                  available: getByteUnitString(availableBytes, $locale, 3),
+                },
+              })}
+            </Text>
+          {:else}
+            <Text class="flex items-center gap-1">
+              <Icon icon={mdiCheckCircle} size="1.25rem" class="text-success" />
+              {$t('unlimited')}
+            </Text>
+          {/if}
+
+          {#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
+            <div
+              class="storage-status p-4 mt-4 bg-gray-100 dark:bg-immich-dark-primary/10 rounded-lg text-sm w-full"
+              title={$t('storage_usage', {
+                values: {
+                  used: getByteUnitString(usedBytes, $locale, 3),
+                  available: getByteUnitString(availableBytes, $locale, 3),
+                },
+              })}
+            >
+              <p class="font-medium text-immich-dark-gray dark:text-white mb-2">{$t('storage')}</p>
+              <div class="mt-4 h-[7px] w-full rounded-full bg-gray-200 dark:bg-gray-700">
+                <div class="h-[7px] rounded-full {getUsageClass()}" style="width: {usedPercentage}%"></div>
+              </div>
+            </div>
+          {/if}
+        </AdminCard>
+
+        <AdminCard icon={mdiDevices} title={$t('authorized_devices')}>
+          <Stack gap={3}>
+            {#each userSessions as session (session.id)}
+              <DeviceCard {session} />
+            {:else}
+              <span class="text-dark">{$t('no_devices')}</span>
+            {/each}
+          </Stack>
+        </AdminCard>
+      </div>
+
+      {@render children?.()}
+    </Container>
+  </div>
+</AdminPageLayout>

web/src/routes/admin/users/[id]/+layout.ts

@@ -0,0 +1,38 @@
+import { AppRoute, UUID_REGEX } from '$lib/constants';
+import { authenticate, requestServerInfo } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
+import { getUserPreferencesAdmin, getUserSessionsAdmin, getUserStatisticsAdmin, searchUsersAdmin } from '@immich/sdk';
+import { redirect } from '@sveltejs/kit';
+import type { LayoutLoad } from './$types';
+
+export const load = (async ({ params, url }) => {
+  await authenticate(url, { admin: true });
+  await requestServerInfo();
+
+  if (!UUID_REGEX.test(params.id)) {
+    redirect(302, AppRoute.ADMIN_USERS);
+  }
+
+  const [user] = await searchUsersAdmin({ id: params.id, withDeleted: true }).catch(() => []);
+  if (!user) {
+    redirect(302, AppRoute.ADMIN_USERS);
+  }
+
+  const [userPreferences, userStatistics, userSessions] = await Promise.all([
+    getUserPreferencesAdmin({ id: user.id }),
+    getUserStatisticsAdmin({ id: user.id }),
+    getUserSessionsAdmin({ id: user.id }),
+  ]);
+
+  const $t = await getFormatter();
+
+  return {
+    user,
+    userPreferences,
+    userStatistics,
+    userSessions,
+    meta: {
+      title: $t('admin.user_details'),
+    },
+  };
+}) satisfies LayoutLoad;

web/src/routes/admin/users/[id]/+page.svelte

@@ -1,218 +0,0 @@
-<script lang="ts">
-  import { goto } from '$app/navigation';
-  import AdminCard from '$lib/components/AdminCard.svelte';
-  import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
-  import OnEvents from '$lib/components/OnEvents.svelte';
-  import ServerStatisticsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
-  import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
-  import DeviceCard from '$lib/components/user-settings-page/device-card.svelte';
-  import FeatureSetting from '$lib/components/users/FeatureSetting.svelte';
-  import { AppRoute } from '$lib/constants';
-  import { getUserAdminActions } from '$lib/services/user-admin.service';
-  import { locale } from '$lib/stores/preferences.store';
-  import { createDateFormatter, findLocale } from '$lib/utils';
-  import { getBytesWithUnit } from '$lib/utils/byte-units';
-  import { type UserAdminResponseDto } from '@immich/sdk';
-  import {
-    Alert,
-    Badge,
-    Code,
-    CommandPaletteContext,
-    Container,
-    getByteUnitString,
-    Heading,
-    Icon,
-    MenuItemType,
-    Stack,
-    Text,
-  } from '@immich/ui';
-  import {
-    mdiAccountOutline,
-    mdiCameraIris,
-    mdiChartPie,
-    mdiChartPieOutline,
-    mdiCheckCircle,
-    mdiDevices,
-    mdiFeatureSearchOutline,
-    mdiPlayCircle,
-    mdiTrashCanOutline,
-  } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-  import type { PageData } from './$types';
-
-  type Props = {
-    data: PageData;
-  };
-
-  const { data }: Props = $props();
-
-  let user = $derived(data.user);
-  const userPreferences = $derived(data.userPreferences);
-  const userStatistics = $derived(data.userStatistics);
-  const userSessions = $derived(data.userSessions);
-  const TiB = 1024 ** 4;
-  const usage = $derived(user.quotaUsageInBytes ?? 0);
-  let [statsUsage, statsUsageUnit] = $derived(getBytesWithUnit(usage, usage > TiB ? 2 : 0));
-  const usedBytes = $derived(user.quotaUsageInBytes ?? 0);
-  const availableBytes = $derived(user.quotaSizeInBytes ?? 1);
-  let usedPercentage = $derived(Math.min(Math.round((usedBytes / availableBytes) * 100), 100));
-
-  let editedLocale = $derived(findLocale($locale).code);
-  let createAtDate: Date = $derived(new Date(user.createdAt));
-  let updatedAtDate: Date = $derived(new Date(user.updatedAt));
-  let userCreatedAtDateAndTime: string = $derived(createDateFormatter(editedLocale).formatDateTime(createAtDate));
-  let userUpdatedAtDateAndTime: string = $derived(createDateFormatter(editedLocale).formatDateTime(updatedAtDate));
-
-  const getUsageClass = () => {
-    if (usedPercentage >= 95) {
-      return 'bg-red-500';
-    }
-
-    if (usedPercentage > 80) {
-      return 'bg-yellow-500';
-    }
-
-    return 'bg-primary';
-  };
-
-  const { ResetPassword, ResetPinCode, Update, Delete, Restore } = $derived(getUserAdminActions($t, user));
-
-  const onUpdate = (update: UserAdminResponseDto) => {
-    if (update.id === user.id) {
-      user = update;
-    }
-  };
-
-  const onUserAdminDeleted = async ({ id }: { id: string }) => {
-    if (id === user.id) {
-      await goto(AppRoute.ADMIN_USERS);
-    }
-  };
-</script>
-
-<OnEvents
-  onUserAdminUpdate={onUpdate}
-  onUserAdminDelete={onUpdate}
-  onUserAdminRestore={onUpdate}
-  {onUserAdminDeleted}
-/>
-
-<CommandPaletteContext commands={[ResetPassword, ResetPinCode, Update, Delete, Restore]} />
-
-<AdminPageLayout
-  breadcrumbs={[{ title: $t('admin.user_management'), href: AppRoute.ADMIN_USERS }, { title: user.name }]}
-  actions={[ResetPassword, ResetPinCode, Update, Restore, MenuItemType.Divider, Delete]}
->
-  <div>
-    <Container size="large" center>
-      {#if user.deletedAt}
-        <Alert color="danger" class="my-4" title={$t('user_has_been_deleted')} icon={mdiTrashCanOutline} />
-      {/if}
-
-      <div class="grid gap-4 grid-cols-1 lg:grid-cols-2 w-full">
-        <div class="col-span-full flex flex-col gap-4 my-4">
-          <div class="flex items-center gap-4">
-            <UserAvatar {user} size="md" />
-            <Heading tag="h1" size="large">{user.name}</Heading>
-          </div>
-          {#if user.isAdmin}
-            <div>
-              <Badge color="primary" size="small">{$t('admin.admin_user')}</Badge>
-            </div>
-          {/if}
-        </div>
-        <div class="col-span-full">
-          <div class="flex flex-col lg:flex-row gap-4 w-full">
-            <ServerStatisticsCard icon={mdiCameraIris} title={$t('photos')} value={userStatistics.images} />
-            <ServerStatisticsCard icon={mdiPlayCircle} title={$t('videos')} value={userStatistics.videos} />
-            <ServerStatisticsCard icon={mdiChartPie} title={$t('storage')} value={statsUsage} unit={statsUsageUnit} />
-          </div>
-        </div>
-
-        <AdminCard icon={mdiAccountOutline} title={$t('profile')}>
-          <Stack gap={2}>
-            <div>
-              <Heading tag="h3" size="tiny">{$t('name')}</Heading>
-              <Text>{user.name}</Text>
-            </div>
-            <div>
-              <Heading tag="h3" size="tiny">{$t('email')}</Heading>
-              <Text>{user.email}</Text>
-            </div>
-            <div>
-              <Heading tag="h3" size="tiny">{$t('created_at')}</Heading>
-              <Text>{userCreatedAtDateAndTime}</Text>
-            </div>
-            <div>
-              <Heading tag="h3" size="tiny">{$t('updated_at')}</Heading>
-              <Text>{userUpdatedAtDateAndTime}</Text>
-            </div>
-            <div>
-              <Heading tag="h3" size="tiny">{$t('id')}</Heading>
-              <Code>{user.id}</Code>
-            </div>
-          </Stack>
-        </AdminCard>
-
-        <AdminCard icon={mdiFeatureSearchOutline} title={$t('features')}>
-          <Stack gap={3}>
-            <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>
-        </AdminCard>
-
-        <AdminCard icon={mdiChartPieOutline} title={$t('storage_quota')}>
-          {#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
-            <Text>
-              {$t('storage_usage', {
-                values: {
-                  used: getByteUnitString(usedBytes, $locale, 3),
-                  available: getByteUnitString(availableBytes, $locale, 3),
-                },
-              })}
-            </Text>
-          {:else}
-            <Text class="flex items-center gap-1">
-              <Icon icon={mdiCheckCircle} size="1.25rem" class="text-success" />
-              {$t('unlimited')}
-            </Text>
-          {/if}
-
-          {#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
-            <div
-              class="storage-status p-4 mt-4 bg-gray-100 dark:bg-immich-dark-primary/10 rounded-lg text-sm w-full"
-              title={$t('storage_usage', {
-                values: {
-                  used: getByteUnitString(usedBytes, $locale, 3),
-                  available: getByteUnitString(availableBytes, $locale, 3),
-                },
-              })}
-            >
-              <p class="font-medium text-immich-dark-gray dark:text-white mb-2">{$t('storage')}</p>
-              <div class="mt-4 h-[7px] w-full rounded-full bg-gray-200 dark:bg-gray-700">
-                <div class="h-[7px] rounded-full {getUsageClass()}" style="width: {usedPercentage}%"></div>
-              </div>
-            </div>
-          {/if}
-        </AdminCard>
-
-        <AdminCard icon={mdiDevices} title={$t('authorized_devices')}>
-          <Stack gap={3}>
-            {#each userSessions as session (session.id)}
-              <DeviceCard {session} />
-            {:else}
-              <span class="text-dark">{$t('no_devices')}</span>
-            {/each}
-          </Stack>
-        </AdminCard>
-      </div>
-    </Container>
-  </div>
-</AdminPageLayout>

web/src/routes/admin/users/[id]/+page.ts

@@ -1,31 +1,12 @@
-import { AppRoute } from '$lib/constants';
-import { authenticate, requestServerInfo } from '$lib/utils/auth';
+import { authenticate } from '$lib/utils/auth';
 import { getFormatter } from '$lib/utils/i18n';
-import { getUserPreferencesAdmin, getUserSessionsAdmin, getUserStatisticsAdmin, searchUsersAdmin } from '@immich/sdk';
-import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
-export const load = (async ({ params, url }) => {
+export const load = (async ({ url }) => {
   await authenticate(url, { admin: true });
-  await requestServerInfo();
-  const [user] = await searchUsersAdmin({ id: params.id, withDeleted: true }).catch(() => []);
-  if (!user) {
-    redirect(302, AppRoute.ADMIN_USERS);
-  }
-
-  const [userPreferences, userStatistics, userSessions] = await Promise.all([
-    getUserPreferencesAdmin({ id: user.id }),
-    getUserStatisticsAdmin({ id: user.id }),
-    getUserSessionsAdmin({ id: user.id }),
-  ]);
-
   const $t = await getFormatter();
 
   return {
-    user,
-    userPreferences,
-    userStatistics,
-    userSessions,
     meta: {
       title: $t('admin.user_details'),
     },

web/src/routes/admin/users/[id]/edit/+page.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { AppRoute } from '$lib/constants';
+  import { handleUpdateUserAdmin } from '$lib/services/user-admin.service';
+  import { user as authUser } from '$lib/stores/user.store';
+  import { userInteraction } from '$lib/stores/user.svelte';
+  import { ByteUnit, convertFromBytes, convertToBytes } from '$lib/utils/byte-units';
+  import {
+    Button,
+    Field,
+    HStack,
+    Input,
+    Link,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    NumberInput,
+    Switch,
+    Text,
+  } from '@immich/ui';
+  import { mdiAccountEditOutline } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import type { PageData } from './$types';
+
+  type Props = {
+    data: PageData;
+  };
+
+  let { data }: Props = $props();
+
+  const user = $state(data.user);
+  let isAdmin = $state(user.isAdmin);
+  let name = $state(user.name);
+  let email = $state(user.email);
+  let storageLabel = $state(user.storageLabel || '');
+  const previousQuota = $state(user.quotaSizeInBytes);
+
+  let quotaSize = $derived(
+    typeof user.quotaSizeInBytes === 'number' ? convertFromBytes(user.quotaSizeInBytes, ByteUnit.GiB) : undefined,
+  );
+
+  const quotaSizeBytes = $derived(typeof quotaSize === 'number' ? convertToBytes(quotaSize, ByteUnit.GiB) : null);
+
+  let quotaSizeWarning = $derived(
+    previousQuota !== quotaSizeBytes &&
+      !!quotaSizeBytes &&
+      userInteraction.serverInfo &&
+      quotaSizeBytes > userInteraction.serverInfo.diskSizeRaw,
+  );
+
+  const onClose = async () => {
+    await goto(`${AppRoute.ADMIN_USERS}/${user.id}`);
+  };
+
+  const onSubmit = async (event: Event) => {
+    event.preventDefault();
+
+    const success = await handleUpdateUserAdmin(user, {
+      email,
+      name,
+      storageLabel,
+      quotaSizeInBytes: typeof quotaSize === 'number' ? convertToBytes(quotaSize, ByteUnit.GiB) : null,
+      isAdmin,
+    });
+
+    if (success) {
+      await onClose();
+    }
+  };
+</script>
+
+<Modal title={$t('edit_user')} size="small" icon={mdiAccountEditOutline} {onClose}>
+  <ModalBody>
+    <form onsubmit={onSubmit} autocomplete="off" id="edit-user-form">
+      <Field label={$t('email')} required>
+        <Input type="email" bind:value={email} />
+      </Field>
+
+      <Field label={$t('name')} required class="mt-4">
+        <Input bind:value={name} />
+      </Field>
+
+      <Field label={$t('admin.quota_size_gib')} class="mt-4">
+        <NumberInput bind:value={quotaSize} min="0" step="1" placeholder={$t('unlimited')} />
+        {#if quotaSizeWarning}
+          <Text size="small" color="danger">{$t('errors.quota_higher_than_disk_size')}</Text>
+        {/if}
+      </Field>
+
+      <Field label={$t('storage_label')} class="mt-4">
+        <Input bind:value={storageLabel} />
+      </Field>
+
+      <Text size="small" class="mt-2" color="muted">
+        {$t('admin.note_apply_storage_label_previous_assets')}
+        <Link href={AppRoute.ADMIN_QUEUES}>
+          {$t('admin.storage_template_migration_job')}
+        </Link>
+      </Text>
+
+      {#if user.id !== $authUser.id}
+        <Field label={$t('admin.admin_user')}>
+          <Switch bind:checked={isAdmin} class="mt-4" />
+        </Field>
+      {/if}
+    </form>
+  </ModalBody>
+
+  <ModalFooter>
+    <HStack fullWidth>
+      <Button shape="round" color="secondary" fullWidth form="edit-user-form" onclick={() => onClose()}
+        >{$t('cancel')}</Button
+      >
+      <Button type="submit" shape="round" fullWidth form="edit-user-form">{$t('confirm')}</Button>
+    </HStack>
+  </ModalFooter>
+</Modal>

web/src/routes/admin/users/[id]/edit/+page.ts

@@ -0,0 +1,15 @@
+import { authenticate } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ url }) => {
+  await authenticate(url, { admin: true });
+
+  const $t = await getFormatter();
+
+  return {
+    meta: {
+      title: $t('admin.user_details'),
+    },
+  };
+}) satisfies PageLoad;