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.

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,14 +116,63 @@ 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 }">
+
+    <!-- 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>
+
+    <!-- Expanded View -->
+    <div v-else class="p-4 md:p-6">
       <!-- Event Details -->
       <div class="flex-1 min-w-0">
-      <!-- Title and badges -->
+        <!-- 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 }">
@@ -129,6 +181,14 @@ function cancelMarkComplete() {
           <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>
 
         <!-- Date/Time -->
@@ -168,7 +228,7 @@ function cancelMarkComplete() {
         <!-- Mark Complete Button (only for completable task events) -->
         <div v-if="isCompletable && !isCompleted" class="mt-3">
           <Button
-          @click="handleMarkComplete"
+            @click.stop="handleMarkComplete"
             variant="outline"
             size="sm"
             class="gap-2"
@@ -178,6 +238,7 @@ function cancelMarkComplete() {
           </Button>
         </div>
       </div>
+    </div>
 
     <!-- Confirmation Dialog -->
     <Dialog :open="showConfirmDialog" @update:open="(val: boolean) => showConfirmDialog = val">