feat: view the user's app version on the user page (#21345)

Co-authored-by: Daniel Dietzler <mail@ddietzler.dev>

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

@@ -6,6 +6,7 @@
     NotificationType,
   } from '$lib/components/shared-components/notification/notification';
   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 PasswordResetSuccessModal from '$lib/modals/PasswordResetSuccessModal.svelte';
   import UserDeleteConfirmModal from '$lib/modals/UserDeleteConfirmModal.svelte';
@@ -36,6 +37,7 @@
   } from '@immich/ui';
   import {
     mdiAccountOutline,
+    mdiAppsBox,
     mdiCameraIris,
     mdiChartPie,
     mdiChartPieOutline,
@@ -60,11 +62,10 @@
   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));
@@ -350,6 +351,25 @@
             {/if}
           </CardBody>
         </Card>
+        <Card color="secondary">
+          <CardHeader>
+            <div class="flex items-center gap-2 px-4 py-2 text-primary">
+              <Icon icon={mdiAppsBox} size="1.5rem" />
+              <CardTitle>Sessions</CardTitle>
+            </div>
+          </CardHeader>
+          <CardBody>
+            <div class="px-4 pb-7">
+              <Stack gap={3}>
+                {#each userSessions as session (session.id)}
+                  <DeviceCard {session} />
+                {:else}
+                  <span class="text-subtle">No mobile devices</span>
+                {/each}
+              </Stack>
+            </div>
+          </CardBody>
+        </Card>
       </div>
     </Container>
   </div>

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

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