feat(activities): ownership + status badges on cards & detail
ActivityCard now renders a "Yours" badge (top-right corner of the image) when activity.isMine, and a "Pending review" / "Rejected" badge (bottom-left) when activity.lnbitsStatus is non-approved. The creator can spot their own posts at a glance on the main feed — particularly important for pending drafts that don't exist on Nostr yet. ActivityDetailPage echoes both badges next to the category row so users landing on the detail link of their own draft have the same signal. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
dbc8b7abf4
commit
556b9e5cfe
2 changed files with 37 additions and 1 deletions
|
|
@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n'
|
||||||
import { format } from 'date-fns'
|
import { format } from 'date-fns'
|
||||||
import { Card, CardContent } from '@/components/ui/card'
|
import { Card, CardContent } from '@/components/ui/card'
|
||||||
import { Badge } from '@/components/ui/badge'
|
import { Badge } from '@/components/ui/badge'
|
||||||
import { MapPin, Calendar, Ticket } from 'lucide-vue-next'
|
import { MapPin, Calendar, Ticket, User } from 'lucide-vue-next'
|
||||||
import BookmarkButton from './BookmarkButton.vue'
|
import BookmarkButton from './BookmarkButton.vue'
|
||||||
import { useDateLocale } from '../composables/useDateLocale'
|
import { useDateLocale } from '../composables/useDateLocale'
|
||||||
import type { Activity } from '../types/activity'
|
import type { Activity } from '../types/activity'
|
||||||
|
|
@ -87,6 +87,17 @@ const placeholderBg = computed(() => {
|
||||||
{{ categoryLabel }}
|
{{ categoryLabel }}
|
||||||
</Badge>
|
</Badge>
|
||||||
|
|
||||||
|
<!-- Ownership badge — the creator can spot their own events at a
|
||||||
|
glance on the feed. -->
|
||||||
|
<Badge
|
||||||
|
v-if="activity.isMine"
|
||||||
|
variant="outline"
|
||||||
|
class="absolute bottom-2 right-2 text-xs gap-1 bg-background/80 backdrop-blur"
|
||||||
|
>
|
||||||
|
<User class="w-3 h-3" />
|
||||||
|
Yours
|
||||||
|
</Badge>
|
||||||
|
|
||||||
<!-- Price badge -->
|
<!-- Price badge -->
|
||||||
<Badge
|
<Badge
|
||||||
v-if="priceDisplay"
|
v-if="priceDisplay"
|
||||||
|
|
@ -95,6 +106,17 @@ const placeholderBg = computed(() => {
|
||||||
{{ priceDisplay }}
|
{{ priceDisplay }}
|
||||||
</Badge>
|
</Badge>
|
||||||
|
|
||||||
|
<!-- Pending/rejected overlay for the creator's own non-approved
|
||||||
|
drafts. Only present when the activity originated from a
|
||||||
|
local LNbits event (Nostr-sourced activities have no
|
||||||
|
lnbitsStatus). -->
|
||||||
|
<Badge
|
||||||
|
v-if="activity.lnbitsStatus && activity.lnbitsStatus !== 'approved'"
|
||||||
|
:variant="activity.lnbitsStatus === 'rejected' ? 'destructive' : 'secondary'"
|
||||||
|
class="absolute bottom-2 left-2 text-xs capitalize"
|
||||||
|
>
|
||||||
|
{{ activity.lnbitsStatus === 'rejected' ? 'Rejected' : 'Pending review' }}
|
||||||
|
</Badge>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<CardContent class="p-4 flex-1 flex flex-col gap-2">
|
<CardContent class="p-4 flex-1 flex flex-col gap-2">
|
||||||
|
|
|
||||||
|
|
@ -156,6 +156,20 @@ function goBack() {
|
||||||
<Badge v-if="categoryLabel" variant="secondary" class="shrink-0 mt-1">
|
<Badge v-if="categoryLabel" variant="secondary" class="shrink-0 mt-1">
|
||||||
{{ categoryLabel }}
|
{{ categoryLabel }}
|
||||||
</Badge>
|
</Badge>
|
||||||
|
<Badge
|
||||||
|
v-if="activity.lnbitsStatus && activity.lnbitsStatus !== 'approved'"
|
||||||
|
:variant="activity.lnbitsStatus === 'rejected' ? 'destructive' : 'secondary'"
|
||||||
|
class="shrink-0 mt-1 capitalize"
|
||||||
|
>
|
||||||
|
{{ activity.lnbitsStatus === 'rejected' ? 'Rejected' : 'Pending review' }}
|
||||||
|
</Badge>
|
||||||
|
<Badge
|
||||||
|
v-if="activity.isMine"
|
||||||
|
variant="outline"
|
||||||
|
class="shrink-0 mt-1"
|
||||||
|
>
|
||||||
|
Yours
|
||||||
|
</Badge>
|
||||||
<div v-for="tag in activity.tags.slice(1)" :key="tag">
|
<div v-for="tag in activity.tags.slice(1)" :key="tag">
|
||||||
<Badge variant="outline" class="text-xs">{{ tag }}</Badge>
|
<Badge variant="outline" class="text-xs">{{ tag }}</Badge>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue