feat: enhance ParticipantView to display user names with loading stat…

…e and handle participant removal in group

src/lib/components/session/ParticipantView.svelte

@@ -10,6 +10,7 @@
 	import { collection, query, where } from 'firebase/firestore';
 	import { subscribeAll } from '$lib/firebase/store';
 	import { onDestroy } from 'svelte';
+	import { getUser } from '$lib/utils/getUser';
 
 	let { session, user } = $props<{
 		session: Readable<Session>;
@@ -115,7 +116,19 @@
 							{#each $group[0][1].participants as participant}
 								<li class="flex items-center gap-2">
 									<Users class="h-4 w-4" />
-									<span>{participant === user.uid ? 'You' : participant}</span>
+									<span>
+										{#if participant === user.uid}
+											You
+										{:else}
+											{#await getUser(participant)}
+												<span class="text-gray-500">載入中...</span>
+											{:then profile}
+												{profile.displayName}
+											{:catch}
+												<span class="text-red-500">未知使用者</span>
+											{/await}
+										{/if}
+									</span>
 								</li>
 							{/each}
 						</ul>

src/routes/api/session/[id]/group/[group_number]/join/[participant]/+server.ts

@@ -27,10 +27,18 @@ export const DELETE: RequestHandler = async ({ params }) => {
 			throw error(400, '參與者不在此群組中');
 		}
 
-		// 從群組中移除參與者
-		await groupDoc.ref.update({
-			participants: groupData.participants.filter((p: string) => p !== participant)
-		});
+		// 計算移除參與者後的新參與者列表
+		const updatedParticipants = groupData.participants.filter((p: string) => p !== participant);
+
+		if (updatedParticipants.length === 0) {
+			// 如果群組將變成空的，直接刪除整個群組
+			await groupDoc.ref.delete();
+		} else {
+			// 否則只更新參與者列表
+			await groupDoc.ref.update({
+				participants: updatedParticipants
+			});
+		}
 
 		// 刪除參與者的對話記錄
 		const conversationsRef = groupDoc.ref.collection('conversations');