From 65f11d7c8f1f90a8cfe121141e71645c66441cf6 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 26 Aug 2025 17:22:29 +0530
Subject: [PATCH] feat: enhance attendee display with toggle for showing all
 participants

---
 .../Calendar/CalendarEventPanel.vue           | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Calendar/CalendarEventPanel.vue b/frontend/src/components/Calendar/CalendarEventPanel.vue
index a308de98..d716ab6a 100644
--- a/frontend/src/components/Calendar/CalendarEventPanel.vue
+++ b/frontend/src/components/Calendar/CalendarEventPanel.vue
@@ -89,7 +89,7 @@
           <PeopleIcon class="size-4" />
           <div>{{ __('{0} Attendees', [peoples.length + 1]) }}</div>
         </div>
-        <div class="flex flex-col gap-1 -ml-1">
+        <div class="flex flex-col gap-2 -ml-1">
           <Button
             :key="_event.owner"
             variant="ghost"
@@ -108,7 +108,7 @@
             </template>
           </Button>
           <Button
-            v-for="att in peoples"
+            v-for="att in displayedPeoples"
             :key="att.email"
             :label="att.email"
             variant="ghost"
@@ -120,6 +120,22 @@
               <UserAvatar :user="att.email" class="-ml-1 !size-5" />
             </template>
           </Button>
+          <Button
+            v-if="!showAllParticipants && peoples.length > 2"
+            variant="ghost"
+            :label="__('See all participants')"
+            iconLeft="more-horizontal"
+            class="!justify-start w-fit"
+            @click="showAllParticipants = true"
+          />
+          <Button
+            v-else
+            variant="ghost"
+            :label="__('Show less')"
+            iconLeft="chevron-up"
+            class="!justify-start w-fit"
+            @click="showAllParticipants = false"
+          />
         </div>
       </div>
       <div
@@ -419,12 +435,18 @@ const title = computed(() => {
 
 const eventTitle = ref(null)
 const error = ref(null)
+const showAllParticipants = ref(false)
 
 const oldEvent = ref(null)
 const dirty = computed(() => {
   return JSON.stringify(oldEvent.value) !== JSON.stringify(_event.value)
 })
 
+const displayedPeoples = computed(() => {
+  if (showAllParticipants.value) return peoples.value
+  return peoples.value.slice(0, 2)
+})
+
 watch(
   [() => props.mode, () => props.event],
   () => {
@@ -458,6 +480,7 @@ function fetchEvent() {
     _event.value = props.event
     oldEvent.value = { ...props.event }
   }
+  showAllParticipants.value = false
 }
 
 function parseEvent(_e) {