From 520bbf46a75d64c7824b9bc03f0b66387347b6fd Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Thu, 4 Jun 2026 22:10:38 +0200
Subject: [PATCH] feat(activities): drop image placeholder when an event has no
 image
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Cards without an image no longer render the solid-color 16:9
placeholder + calendar glyph. They go straight to the content area
with the badges (category, price, Yours, status, Past) shown
inline in a small row at the top, so the title and details aren't
pushed below a meaningless filler block.

The placeholderBg computed (hash → HSL) is removed; it was only
feeding the deleted no-image branch.
---
 src/modules/events/components/EventCard.vue | 54 ++++++++++++++-------
 1 file changed, 37 insertions(+), 17 deletions(-)

diff --git a/src/modules/events/components/EventCard.vue b/src/modules/events/components/EventCard.vue
index 694df6a..26ec0cf 100644
--- a/src/modules/events/components/EventCard.vue
+++ b/src/modules/events/components/EventCard.vue
@@ -52,13 +52,6 @@ const priceDisplay = computed(() => {
   return `${info.price} ${info.currency}`
 })
 
-const placeholderBg = computed(() => {
-  // Generate a consistent hue from the event title
-  const hash = props.event.title.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
-  const hue = hash % 360
-  return `hsl(${hue}, 40%, 85%)`
-})
-
 const isPast = computed(() => {
   const a = props.event
   const end = a.endDate ?? a.startDate
@@ -72,22 +65,18 @@ const isPast = computed(() => {
     class="overflow-hidden cursor-pointer hover:shadow-lg transition-shadow duration-200 flex flex-col"
     @click="emit('click', event)"
   >
-    <!-- Image / Placeholder -->
-    <div class="relative aspect-[16/9] overflow-hidden">
+    <!-- Image with overlaid badges. Cards without an image skip the
+         hero area entirely and surface their badges inline at the top
+         of the content block — the solid-color placeholder + calendar
+         glyph wasn't communicating anything the title + details don't
+         already. -->
+    <div v-if="event.image" class="relative aspect-[16/9] overflow-hidden">
       <img
-        v-if="event.image"
         :src="event.image"
         :alt="event.title"
         class="w-full h-full object-cover"
         loading="lazy"
       />
-      <div
-        v-else
-        class="w-full h-full flex items-center justify-center"
-        :style="{ backgroundColor: placeholderBg }"
-      >
-        <Calendar class="w-12 h-12 text-foreground/20" />
-      </div>
 
       <!-- Category badge -->
       <Badge
@@ -147,6 +136,37 @@ const isPast = computed(() => {
     </div>
 
     <CardContent class="p-4 flex-1 flex flex-col gap-2">
+      <!-- Inline badge row (no-image variant). Same badges as the
+           image-overlay set, just stacked horizontally at the top of
+           the content area. -->
+      <div v-if="!event.image" class="flex flex-wrap items-center gap-1.5">
+        <Badge v-if="categoryLabel" variant="secondary" class="text-xs">
+          {{ categoryLabel }}
+        </Badge>
+        <Badge v-if="priceDisplay" class="text-xs">
+          {{ priceDisplay }}
+        </Badge>
+        <Badge v-if="event.isMine" variant="outline" class="text-xs gap-1">
+          <User class="w-3 h-3" />
+          Yours
+        </Badge>
+        <Badge
+          v-if="event.lnbitsStatus && event.lnbitsStatus !== 'approved'"
+          :variant="event.lnbitsStatus === 'rejected' ? 'destructive' : 'secondary'"
+          class="text-xs capitalize"
+        >
+          {{ event.lnbitsStatus === 'rejected' ? 'Rejected' : 'Pending review' }}
+        </Badge>
+        <Badge
+          v-if="isPast && !(event.lnbitsStatus && event.lnbitsStatus !== 'approved')"
+          variant="outline"
+          class="text-xs gap-1"
+        >
+          <History class="w-3 h-3" />
+          {{ t('events.filters.past', 'Past') }}
+        </Badge>
+      </div>
+
       <!-- Title + Bookmark -->
       <div class="flex items-start gap-1">
         <h3 class="font-semibold text-foreground line-clamp-2 leading-tight flex-1">