From 5f534f7f6df6765f01efe037123ed00d641c91a1 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Tue, 21 Oct 2025 22:57:43 +0200
Subject: [PATCH] Adds expandable event card

Improves the Scheduled Event Card component by adding an expandable view.

This change introduces a collapsed view that shows the event time and title, and an expanded view which displays all event details. This allows users to quickly scan the scheduled events and expand those they are interested in.
---
 .../components/ScheduledEventCard.vue         | 157 ++++++++++++------
 1 file changed, 109 insertions(+), 48 deletions(-)

diff --git a/src/modules/nostr-feed/components/ScheduledEventCard.vue b/src/modules/nostr-feed/components/ScheduledEventCard.vue
index 058425f..5acfa51 100644
--- a/src/modules/nostr-feed/components/ScheduledEventCard.vue
+++ b/src/modules/nostr-feed/components/ScheduledEventCard.vue
@@ -33,6 +33,9 @@ const emit = defineEmits<Emits>()
 // Confirmation dialog state
 const showConfirmDialog = ref(false)
 
+// Collapsed state (collapsed by default)
+const isExpanded = ref(false)
+
 // Event address for tracking completion
 const eventAddress = computed(() => `31922:${props.event.pubkey}:${props.event.dTag}`)
 
@@ -113,69 +116,127 @@ function confirmMarkComplete() {
 function cancelMarkComplete() {
   showConfirmDialog.value = false
 }
+
+// Toggle expanded/collapsed state
+function toggleExpanded() {
+  isExpanded.value = !isExpanded.value
+}
 </script>
 
 <template>
-  <div class="border-b md:border md:rounded-lg bg-card p-4 md:p-6 transition-all"
+  <div class="border-b md:border md:rounded-lg bg-card transition-all"
        :class="{ 'opacity-60': isCompletable && isCompleted }">
-    <!-- Event Details -->
-    <div class="flex-1 min-w-0">
-      <!-- Title and badges -->
-      <div class="flex items-start gap-2 mb-2 flex-wrap">
-        <h3 class="font-semibold text-base md:text-lg flex-1"
-            :class="{ 'line-through': isCompletable && isCompleted }">
-          {{ event.title }}
-        </h3>
-        <Badge v-if="isAdminEvent" variant="secondary" class="shrink-0">
+
+    <!-- Collapsed View (Default) -->
+    <div v-if="!isExpanded"
+         class="flex items-center gap-3 p-3 md:p-4">
+      <!-- Time -->
+      <div @click="toggleExpanded" class="flex items-center gap-1.5 text-sm text-muted-foreground shrink-0 cursor-pointer">
+        <Clock class="h-3.5 w-3.5" />
+        <span class="font-medium">{{ formattedTimeRange || formattedDate }}</span>
+      </div>
+
+      <!-- Title -->
+      <h3 @click="toggleExpanded"
+          class="font-semibold text-sm md:text-base flex-1 truncate cursor-pointer hover:text-foreground/80 transition-colors"
+          :class="{ 'line-through': isCompletable && isCompleted }">
+        {{ event.title }}
+      </h3>
+
+      <!-- Badges and Actions -->
+      <div class="flex items-center gap-2 shrink-0">
+        <!-- Mark Complete Button (for uncompleted tasks) -->
+        <Button
+          v-if="isCompletable && !isCompleted"
+          @click.stop="handleMarkComplete"
+          variant="ghost"
+          size="sm"
+          class="h-7 w-7 p-0"
+        >
+          <CheckCircle class="h-4 w-4" />
+        </Button>
+
+        <!-- Completed Badge -->
+        <Badge v-if="isCompletable && isCompleted" variant="secondary" class="text-xs">
+          ✓
+        </Badge>
+
+        <!-- Admin Badge -->
+        <Badge v-if="isAdminEvent" variant="secondary" class="text-xs">
           Admin
         </Badge>
       </div>
+    </div>
 
-      <!-- Date/Time -->
-      <div class="flex items-center gap-4 text-sm text-muted-foreground mb-2 flex-wrap">
-        <div class="flex items-center gap-1.5">
-          <Calendar class="h-4 w-4" />
-          <span>{{ formattedDate }}</span>
+    <!-- Expanded View -->
+    <div v-else class="p-4 md:p-6">
+      <!-- Event Details -->
+      <div class="flex-1 min-w-0">
+        <!-- Title and badges with close button -->
+        <div class="flex items-start gap-2 mb-2 flex-wrap">
+          <h3 class="font-semibold text-base md:text-lg flex-1"
+              :class="{ 'line-through': isCompletable && isCompleted }">
+            {{ event.title }}
+          </h3>
+          <Badge v-if="isAdminEvent" variant="secondary" class="shrink-0">
+            Admin
+          </Badge>
+          <Button
+            @click="toggleExpanded"
+            variant="ghost"
+            size="sm"
+            class="h-6 w-6 p-0 shrink-0"
+          >
+            ✕
+          </Button>
         </div>
-        <div v-if="formattedTimeRange" class="flex items-center gap-1.5">
-          <Clock class="h-4 w-4" />
-          <span>{{ formattedTimeRange }}</span>
+
+        <!-- Date/Time -->
+        <div class="flex items-center gap-4 text-sm text-muted-foreground mb-2 flex-wrap">
+          <div class="flex items-center gap-1.5">
+            <Calendar class="h-4 w-4" />
+            <span>{{ formattedDate }}</span>
+          </div>
+          <div v-if="formattedTimeRange" class="flex items-center gap-1.5">
+            <Clock class="h-4 w-4" />
+            <span>{{ formattedTimeRange }}</span>
+          </div>
         </div>
-      </div>
 
-      <!-- Location -->
-      <div v-if="event.location" class="flex items-center gap-1.5 text-sm text-muted-foreground mb-3">
-        <MapPin class="h-4 w-4" />
-        <span>{{ event.location }}</span>
-      </div>
+        <!-- Location -->
+        <div v-if="event.location" class="flex items-center gap-1.5 text-sm text-muted-foreground mb-3">
+          <MapPin class="h-4 w-4" />
+          <span>{{ event.location }}</span>
+        </div>
 
-      <!-- Description/Content -->
-      <div v-if="event.description || event.content" class="text-sm mb-3">
-        <p class="whitespace-pre-wrap break-words">{{ event.description || event.content }}</p>
-      </div>
+        <!-- Description/Content -->
+        <div v-if="event.description || event.content" class="text-sm mb-3">
+          <p class="whitespace-pre-wrap break-words">{{ event.description || event.content }}</p>
+        </div>
 
-      <!-- Completion info (only for completable events) -->
-      <div v-if="isCompletable && isCompleted && getCompletion(eventAddress)" class="text-xs text-muted-foreground mb-3">
-        ✓ Completed by {{ getDisplayName(getCompletion(eventAddress)!.pubkey) }}
-        <span v-if="getCompletion(eventAddress)!.notes"> - {{ getCompletion(eventAddress)!.notes }}</span>
-      </div>
+        <!-- Completion info (only for completable events) -->
+        <div v-if="isCompletable && isCompleted && getCompletion(eventAddress)" class="text-xs text-muted-foreground mb-3">
+          ✓ Completed by {{ getDisplayName(getCompletion(eventAddress)!.pubkey) }}
+          <span v-if="getCompletion(eventAddress)!.notes"> - {{ getCompletion(eventAddress)!.notes }}</span>
+        </div>
 
-      <!-- Author (if not admin) -->
-      <div v-if="!isAdminEvent" class="text-xs text-muted-foreground mb-3">
-        Posted by {{ getDisplayName(event.pubkey) }}
-      </div>
+        <!-- Author (if not admin) -->
+        <div v-if="!isAdminEvent" class="text-xs text-muted-foreground mb-3">
+          Posted by {{ getDisplayName(event.pubkey) }}
+        </div>
 
-      <!-- Mark Complete Button (only for completable task events) -->
-      <div v-if="isCompletable && !isCompleted" class="mt-3">
-        <Button
-          @click="handleMarkComplete"
-          variant="outline"
-          size="sm"
-          class="gap-2"
-        >
-          <CheckCircle class="h-4 w-4" />
-          Mark Complete
-        </Button>
+        <!-- Mark Complete Button (only for completable task events) -->
+        <div v-if="isCompletable && !isCompleted" class="mt-3">
+          <Button
+            @click.stop="handleMarkComplete"
+            variant="outline"
+            size="sm"
+            class="gap-2"
+          >
+            <CheckCircle class="h-4 w-4" />
+            Mark Complete
+          </Button>
+        </div>
       </div>
     </div>