refactor(participant-list): use the component only once and better border logic

Author: BreadGenie

frontend/src/components/PeoplePanel.vue

@@ -35,33 +35,23 @@
 				</div>
 
 				<div class="flex-1 overflow-y-auto">
-					<!-- Current User -->
-					<div v-if="showCurrentUser" class="border-b border-gray-200">
+					<!-- All Participants -->
+					<div v-if="allVisibleParticipants.length > 0">
 						<PeopleParticipantTile
-							:participant="currentUserData"
-							:isCurrentUser="true"
-							:showHostBadge="isCreator"
-							:canControlParticipant="false"
-						/>
-					</div>
-
-					<!-- Remote Participants -->
-					<div v-if="filteredParticipants.length > 0">
-						<PeopleParticipantTile
-							v-for="participant in filteredParticipants"
+							v-for="participant in allVisibleParticipants"
 							:key="participant.user_id"
-							:participant="participant"
-							:isCurrentUser="false"
-							:showHostBadge="participant.user_id === creatorUserId"
-							:canControlParticipant="isCreator"
+							:participant="participant.participantData"
+							:isCurrentUser="participant.isCurrentUser"
+							:showHostBadge="participant.showHostBadge"
+							:canControlParticipant="participant.canControlParticipant"
 							@muteParticipant="handleMuteParticipant"
 							@kickParticipant="handleKickParticipant"
 							@lowerHand="handleLowerHand"
 						/>
 					</div>
 
 					<div
-						v-if="!showCurrentUser && filteredParticipants.length === 0"
+						v-if="allVisibleParticipants.length === 0"
 						class="text-ink-gray-5 text-sm text-center mt-8 px-4"
 					>
 						{{ searchQuery ? "No participants found" : "No other participants" }}
@@ -184,6 +174,32 @@ const showCurrentUser = computed(() => {
 	return name.includes(query);
 });
 
+const allVisibleParticipants = computed(() => {
+	const participants = [];
+
+	if (showCurrentUser.value) {
+		participants.push({
+			user_id: props.currentUser?.user_id || "",
+			participantData: currentUserData.value,
+			isCurrentUser: true,
+			showHostBadge: isCreator.value,
+			canControlParticipant: false,
+		});
+	}
+
+	for (const participant of filteredParticipants.value) {
+		participants.push({
+			user_id: participant.user_id,
+			participantData: participant,
+			isCurrentUser: false,
+			showHostBadge: participant.user_id === props.creatorUserId,
+			canControlParticipant: isCreator.value,
+		});
+	}
+
+	return participants;
+});
+
 const currentUserData = computed<Participant>(() => ({
 	user_id: props.currentUser?.user_id || "",
 	user_name: props.currentUser?.full_name || props.currentUser?.name || "You",

frontend/src/components/PeopleParticipantTile.vue

@@ -1,7 +1,5 @@
 <template>
-	<div
-		class="flex items-center gap-3 p-3 rounded-lg transition-colors"
-	>
+		<div class="flex items-center gap-3 py-3 mx-4 border-b border-gray-200 last:border-b-0 transition-colors">
 		<div class="flex-shrink-0">
 			<div
 				class="relative flex items-center justify-center rounded-full overflow-hidden bg-gradient-to-br from-gray-500 to-gray-600 text-white shadow-inner w-10 h-10"