padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Replaces custom expand/collapse with Collapsible

Browse source 
Migrates ScheduledEventCard to use the Collapsible component from the UI library.

This simplifies the component's structure and improves accessibility by leveraging the built-in features of the Collapsible component.
Removes custom logic for managing the expanded/collapsed state.
This commit is contained in:
padreug 2025-10-21 23:14:56 +02:00
parent abaf7f2f5b
commit 9aa8c28bef
1 changed files with 68 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/modules/nostr-feed/components/ScheduledEventCard.vue
View file

@ -10,6 +10,11 @@ import {
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog'
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from '@/components/ui/collapsible'
import { Calendar, MapPin, Clock, CheckCircle } from 'lucide-vue-next'
import type { ScheduledEvent, EventCompletion } from '../services/ScheduledEventService'
@ -33,9 +38,6 @@ 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}`)
@ -116,29 +118,22 @@ 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 transition-all"
<Collapsible 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">
<!-- Collapsed View (Trigger) -->
<CollapsibleTrigger as-child>
<div class="flex items-center gap-3 p-3 md:p-4 cursor-pointer hover:bg-accent/50 transition-colors">
<!-- Time -->
<div @click="toggleExpanded" class="flex items-center gap-1.5 text-sm text-muted-foreground shrink-0 cursor-pointer">
<div class="flex items-center gap-1.5 text-sm text-muted-foreground shrink-0">
<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"
<h3 class="font-semibold text-sm md:text-base flex-1 truncate"
:class="{ 'line-through': isCompletable && isCompleted }">
{{ event.title }}
</h3>
@ -167,30 +162,12 @@ function toggleExpanded() {
</Badge>
</div>
</div>
</CollapsibleTrigger>
<!-- Expanded View -->
<div v-else class="p-4 md:p-6">
<!-- Expanded View (Content) -->
<CollapsibleContent class="p-4 md:p-6 pt-0">
<!-- 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>
<!-- 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">
@ -238,7 +215,9 @@ function toggleExpanded() {
</Button>
</div>
</div>
</div>
</CollapsibleContent>
</Collapsible>
<!-- Confirmation Dialog -->
<Dialog :open="showConfirmDialog" @update:open="(val: boolean) => showConfirmDialog = val">
@ -255,5 +234,4 @@ function toggleExpanded() {
</DialogFooter>
</DialogContent>
</Dialog>
</div>
</template>