Show user email on admin page while editing display name (#387)

Author: crthpl

frontend/src/routes/admin/+page.svelte

@@ -397,42 +397,44 @@
 				{#each filteredUsers as user (user.id)}
 					<div class="rounded-lg border p-2 px-3">
 						<div class="flex items-center justify-between">
-							<div class="flex items-center gap-2">
-								{#if editingUserId === user.id}
-									<input
-										class="w-48 rounded-md border bg-background px-2 py-0.5 text-sm"
-										bind:value={editingName}
-										onkeydown={(e) => {
-											if (e.key === 'Enter') saveEditingName();
-											if (e.key === 'Escape') editingUserId = null;
-										}}
-									/>
-									<button
-										class="rounded p-0.5 hover:bg-muted"
-										onclick={saveEditingName}
-										title="Save"
-									>
-										<Check class="h-4 w-4 text-green-600" />
-									</button>
-									<button
-										class="rounded p-0.5 hover:bg-muted"
-										onclick={() => (editingUserId = null)}
-										title="Cancel"
-									>
-										<X class="h-4 w-4 text-muted-foreground" />
-									</button>
-								{:else}
-									<span class="font-medium">{user.display_name}</span>
-									<button
-										class="rounded p-0.5 opacity-40 hover:bg-muted hover:opacity-100"
-										onclick={() => startEditingName(user)}
-										title="Edit display name"
-									>
-										<Pencil class="h-3.5 w-3.5" />
-									</button>
-									{#if user.email}
-										<span class="text-sm text-muted-foreground">{user.email}</span>
+							<div class="flex flex-col gap-1">
+								<div class="flex items-center gap-2">
+									{#if editingUserId === user.id}
+										<input
+											class="w-48 rounded-md border bg-background px-2 py-0.5 text-sm"
+											bind:value={editingName}
+											onkeydown={(e) => {
+												if (e.key === 'Enter') saveEditingName();
+												if (e.key === 'Escape') editingUserId = null;
+											}}
+										/>
+										<button
+											class="rounded p-0.5 hover:bg-muted"
+											onclick={saveEditingName}
+											title="Save"
+										>
+											<Check class="h-4 w-4 text-green-600" />
+										</button>
+										<button
+											class="rounded p-0.5 hover:bg-muted"
+											onclick={() => (editingUserId = null)}
+											title="Cancel"
+										>
+											<X class="h-4 w-4 text-muted-foreground" />
+										</button>
+									{:else}
+										<span class="font-medium">{user.display_name}</span>
+										<button
+											class="rounded p-0.5 opacity-40 hover:bg-muted hover:opacity-100"
+											onclick={() => startEditingName(user)}
+											title="Edit display name"
+										>
+											<Pencil class="h-3.5 w-3.5" />
+										</button>
 									{/if}
+								</div>
+								{#if user.email}
+									<span class="text-sm text-muted-foreground">{user.email}</span>
 								{/if}
 							</div>
 							<div class="flex items-center gap-2">

frontend/src/routes/admin/cohorts/[name]/+page.svelte

@@ -53,8 +53,8 @@
 		return globalUsers.filter((u) => !memberUserIds.has(u.id));
 	});
 
-	let selectedUserName = $derived(
-		selectedUserId ? (globalUsers.find((u) => u.id === selectedUserId)?.display_name ?? '') : ''
+	let selectedUser = $derived(
+		selectedUserId ? globalUsers.find((u) => u.id === selectedUserId) : null
 	);
 
 	function closePopoverAndFocusTrigger() {
@@ -239,8 +239,17 @@
 						role="combobox"
 						bind:ref={userTriggerRef}
 					>
-						{selectedUserId ? selectedUserName : 'Search users...'}
-						<ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+						<div class="flex flex-col text-left text-sm">
+							{#if selectedUser}
+								<span>{selectedUser.display_name}</span>
+								{#if selectedUser.email}
+									<span class="text-xs text-muted-foreground">{selectedUser.email}</span>
+								{/if}
+							{:else}
+								Search users...
+							{/if}
+						</div>
+						<ChevronsUpDown class="h-4 w-4 shrink-0 opacity-50" />
 					</Popover.Trigger>
 					<Popover.Content class="w-64 p-0">
 						<Command.Root>
@@ -256,10 +265,15 @@
 												closePopoverAndFocusTrigger();
 											}}
 										>
-											{user.display_name}
+											<div class="flex flex-1 flex-col">
+												<span>{user.display_name}</span>
+												{#if user.email}
+													<span class="text-xs text-muted-foreground">{user.email}</span>
+												{/if}
+											</div>
 											<Check
 												class={cn(
-													'ml-auto h-4 w-4',
+													'h-4 w-4 shrink-0',
 													user.id !== selectedUserId && 'text-transparent'
 												)}
 											/>