From a9d39b341e6587f5d544b7045e3e03fd2dd9af04 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Wed, 17 Jun 2026 12:31:31 +0200
Subject: [PATCH] style(events): frosted-glass calendar popup that shows the
 feed through it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rebuild the calendar popup on the reka-ui dialog primitives instead of
the shared DialogContent, so it can use a light, blurred overlay
(bg-background/20 + backdrop-blur-md) instead of the usual opaque dark
dim. The panel itself is translucent + blurred (bg-background/70 +
backdrop-blur-xl). Result: the feed stays visible, softly blurred,
behind the frosted glass. Scoped to this popup — other dialogs keep
their solid dark overlay.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../events/components/EventCalendarPopup.vue  | 50 ++++++++++++++-----
 1 file changed, 38 insertions(+), 12 deletions(-)

diff --git a/src/modules/events/components/EventCalendarPopup.vue b/src/modules/events/components/EventCalendarPopup.vue
index 9a16173..955d805 100644
--- a/src/modules/events/components/EventCalendarPopup.vue
+++ b/src/modules/events/components/EventCalendarPopup.vue
@@ -1,18 +1,26 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import {
-  Dialog,
+  DialogRoot,
+  DialogPortal,
+  DialogOverlay,
   DialogContent,
-  DialogHeader,
   DialogTitle,
   DialogDescription,
-} from '@/components/ui/dialog'
+  DialogClose,
+} from 'reka-ui'
+import { X } from 'lucide-vue-next'
 import EventCalendarView from './EventCalendarView.vue'
 import type { Event } from '../types/event'
 
 // A date-picker popup: the month grid (with per-day event dots) in a
 // dialog. Picking a day emits selectDate and closes. Reused by the feed
 // (filter to a day) and My Tickets (visualise the user's event dates).
+//
+// Built on the reka-ui dialog primitives (rather than the shared
+// DialogContent) so it can use a light, blurred overlay instead of the
+// usual opaque dark dim — the feed stays visible, softly blurred, behind
+// the frosted-glass panel.
 const props = defineProps<{
   open: boolean
   events: Event[]
@@ -37,13 +45,31 @@ function onSelectDate(date: Date) {
 </script>
 
 <template>
-  <Dialog v-model:open="isOpen">
-    <DialogContent class="max-w-sm">
-      <DialogHeader>
-        <DialogTitle>{{ title }}</DialogTitle>
-        <DialogDescription>{{ description }}</DialogDescription>
-      </DialogHeader>
-      <EventCalendarView :events="events" picker-mode @select-date="onSelectDate" />
-    </DialogContent>
-  </Dialog>
+  <DialogRoot v-model:open="isOpen">
+    <DialogPortal>
+      <!-- Frosted backdrop: a light tint + blur so the feed shows
+           through (softly blurred) rather than being hidden behind an
+           opaque dark overlay. -->
+      <DialogOverlay class="fixed inset-0 z-50 bg-background/20 backdrop-blur-md" />
+      <DialogContent
+        class="fixed left-1/2 top-1/2 z-50 grid w-full max-w-sm -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border bg-background/70 p-6 shadow-lg backdrop-blur-xl"
+      >
+        <div class="flex flex-col gap-1.5 text-center sm:text-left">
+          <DialogTitle class="text-lg font-semibold leading-none tracking-tight">
+            {{ title }}
+          </DialogTitle>
+          <DialogDescription class="text-sm text-muted-foreground">
+            {{ description }}
+          </DialogDescription>
+        </div>
+        <EventCalendarView :events="events" picker-mode @select-date="onSelectDate" />
+        <DialogClose
+          class="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none"
+          aria-label="Close"
+        >
+          <X class="w-4 h-4" />
+        </DialogClose>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
 </template>
-- 
2.53.0