aiolabs/webapp
8
0
Fork 0
Code Issues 65 Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: aiolabs:576a98315ec07ea6d1980ce4f251b59595d8ba72
Branches Tags
aiolabs:main
aiolabs:dev
..
compare: aiolabs:8249187d5602ec4c2a5456ddd0b519a82396b380
Branches Tags
aiolabs:dev
aiolabs:main

3 commits
576a98315e ... 8249187d56

Author SHA1 Message Date
Padreug
8249187d56 fix(layout): use the generic user icon (not login) for the logged-out menu trigger 
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>
 2026-06-17 10:43:12 +00:00
padreug
628f85a074 Merge pull request 'style(events): frosted-glass calendar popup that shows the feed through it' (#113) from feat/calendar-popup-frosted-glass into dev 
Reviewed-on: #113
 2026-06-17 10:42:59 +00:00
Padreug
a9d39b341e style(events): frosted-glass calendar popup that shows the feed through it 
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>
 2026-06-17 12:41:30 +02:00
1 changed files with 38 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/modules/events/components/EventCalendarPopup.vue
View file

@ -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>
<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>
</Dialog>
</DialogPortal>
</DialogRoot>
</template>