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 1/3] 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>

From 576a98315ec07ea6d1980ce4f251b59595d8ba72 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Wed, 17 Jun 2026 12:29:04 +0200
Subject: [PATCH 2/3] fix(layout): use the generic user icon (not login) for
 the logged-out menu trigger
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The top-right menu trigger showed a LogIn (arrow-into-door) icon when
logged out; use the generic User icon instead — it reads as "your
account / profile" and matches the avatar shown when logged in. Still
opens the same profile/menu sheet (with the login CTA).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/layout/StandaloneMenu.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/layout/StandaloneMenu.vue b/src/components/layout/StandaloneMenu.vue
index b174061..0fa878e 100644
--- a/src/components/layout/StandaloneMenu.vue
+++ b/src/components/layout/StandaloneMenu.vue
@@ -2,7 +2,7 @@
 import { ref, type Component } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
-import { LogIn } from 'lucide-vue-next'
+import { User } from 'lucide-vue-next'
 import {
   Sheet,
   SheetContent,
@@ -62,7 +62,7 @@ function handleClick(item: SidebarNavItem) {
           <AvatarImage v-if="pictureUrl" :src="pictureUrl" :alt="displayName ?? ''" />
           <AvatarFallback>{{ fallbackInitial || '?' }}</AvatarFallback>
         </Avatar>
-        <LogIn v-else class="w-5 h-5" />
+        <User v-else class="w-5 h-5" />
       </button>
     </SheetTrigger>
     <SheetContent side="right" class="w-80 sm:w-96 max-w-full overflow-y-auto overflow-x-hidden">

From 8249187d5602ec4c2a5456ddd0b519a82396b380 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Wed, 17 Jun 2026 12:29:04 +0200
Subject: [PATCH 3/3] fix(layout): use the generic user icon (not login) for
 the logged-out menu trigger
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The top-right menu trigger showed a LogIn (arrow-into-door) icon when
logged out; use the generic User icon instead — it reads as "your
account / profile" and matches the avatar shown when logged in. Still
opens the same profile/menu sheet (with the login CTA).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/layout/StandaloneMenu.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/layout/StandaloneMenu.vue b/src/components/layout/StandaloneMenu.vue
index b174061..0fa878e 100644
--- a/src/components/layout/StandaloneMenu.vue
+++ b/src/components/layout/StandaloneMenu.vue
@@ -2,7 +2,7 @@
 import { ref, type Component } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
-import { LogIn } from 'lucide-vue-next'
+import { User } from 'lucide-vue-next'
 import {
   Sheet,
   SheetContent,
@@ -62,7 +62,7 @@ function handleClick(item: SidebarNavItem) {
           <AvatarImage v-if="pictureUrl" :src="pictureUrl" :alt="displayName ?? ''" />
           <AvatarFallback>{{ fallbackInitial || '?' }}</AvatarFallback>
         </Avatar>
-        <LogIn v-else class="w-5 h-5" />
+        <User v-else class="w-5 h-5" />
       </button>
     </SheetTrigger>
     <SheetContent side="right" class="w-80 sm:w-96 max-w-full overflow-y-auto overflow-x-hidden">