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
2 changed files with 40 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/layout/StandaloneMenu.vue
View file

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

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

@ -1,18 +1,26 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue' import { computed } from 'vue'
import { import {
Dialog, DialogRoot,
DialogPortal,
DialogOverlay,
DialogContent, DialogContent,
DialogHeader,
DialogTitle, DialogTitle,
DialogDescription, DialogDescription,
} from '@/components/ui/dialog' DialogClose,
} from 'reka-ui'
import { X } from 'lucide-vue-next'
import EventCalendarView from './EventCalendarView.vue' import EventCalendarView from './EventCalendarView.vue'
import type { Event } from '../types/event' import type { Event } from '../types/event'
// A date-picker popup: the month grid (with per-day event dots) in a // 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 // 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). // (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<{ const props = defineProps<{
open: boolean open: boolean
events: Event[] events: Event[]
@ -37,13 +45,31 @@ function onSelectDate(date: Date) {
</script> </script>
<template> <template>
<Dialog v-model:open="isOpen"> <DialogRoot v-model:open="isOpen">
<DialogContent class="max-w-sm"> <DialogPortal>
<DialogHeader> <!-- Frosted backdrop: a light tint + blur so the feed shows
<DialogTitle>{{ title }}</DialogTitle> through (softly blurred) rather than being hidden behind an
<DialogDescription>{{ description }}</DialogDescription> opaque dark overlay. -->
</DialogHeader> <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" /> <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> </DialogContent>
</Dialog> </DialogPortal>
</DialogRoot>
</template> </template>