From 56a87133748750a5f69a06e94f2a23e70f52101a Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Tue, 20 Jan 2026 14:11:05 +0900
Subject: [PATCH] improve calendar style

---
 src/App.vue                                   |   5 +-
 .../UserDialog/SendInviteRequestDialog.vue    |   2 +-
 .../ui/sidebar/SidebarMenuButton.vue          |   2 +-
 src/stores/notification.js                    |   2 +-
 .../components/GroupCalendarEventCard.vue     | 190 +++++++++---------
 .../Tools/components/GroupCalendarMonth.vue   |  11 +-
 6 files changed, 102 insertions(+), 110 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 361c8a29..db683da4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,7 +10,7 @@
             ondragover="event.preventDefault()"
             ondrop="event.preventDefault()">
             <RouterView></RouterView>
-            <Toaster position="top" :theme="sonnerTheme" :data-theme="themeMode"></Toaster>
+            <Toaster position="top-center"></Toaster>
 
             <AlertDialogModal></AlertDialogModal>
             <PromptDialogModal></PromptDialogModal>
@@ -23,7 +23,6 @@
 
 <script setup>
     import { computed, onBeforeMount, onMounted } from 'vue';
-    import { storeToRefs } from 'pinia';
 
     import { Toaster } from './components/ui/sonner';
     import { TooltipProvider } from './components/ui/tooltip';
@@ -45,8 +44,6 @@
     initNoty();
 
     const store = createGlobalStores();
-    const { isDarkMode, themeMode } = storeToRefs(store.appearanceSettings);
-    const sonnerTheme = computed(() => (isDarkMode.value ? 'dark' : 'light'));
 
     if (typeof window !== 'undefined') {
         window.$pinia = store;
diff --git a/src/components/dialogs/UserDialog/SendInviteRequestDialog.vue b/src/components/dialogs/UserDialog/SendInviteRequestDialog.vue
index 34b0e9ce..e2168589 100644
--- a/src/components/dialogs/UserDialog/SendInviteRequestDialog.vue
+++ b/src/components/dialogs/UserDialog/SendInviteRequestDialog.vue
@@ -39,7 +39,7 @@
             :invite-dialog="inviteDialog"
             @closeInviteDialog="closeInviteDialog" />
         <EditAndSendInviteDialog
-            :edit-and-send-invite-dialog="editAndSendInviteDialog"
+            v-model:edit-and-send-invite-dialog="editAndSendInviteDialog"
             :sendInviteDialog="sendInviteDialog"
             @update:sendInviteDialog="emit('update:sendInviteDialog', $event)"
             :invite-dialog="inviteDialog"
diff --git a/src/components/ui/sidebar/SidebarMenuButton.vue b/src/components/ui/sidebar/SidebarMenuButton.vue
index e048dd3d..939003c1 100644
--- a/src/components/ui/sidebar/SidebarMenuButton.vue
+++ b/src/components/ui/sidebar/SidebarMenuButton.vue
@@ -51,7 +51,7 @@
         <slot />
     </SidebarMenuButtonChild>
 
-    <Tooltip v-else>
+    <Tooltip v-else ignore-non-keyboard-focus>
         <TooltipTrigger as-child>
             <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
                 <slot />
diff --git a/src/stores/notification.js b/src/stores/notification.js
index 623438ee..3207b644 100644
--- a/src/stores/notification.js
+++ b/src/stores/notification.js
@@ -411,7 +411,7 @@ export const useNotificationStore = defineStore('Notification', () => {
         }
         if (ref.type === 'boop') {
             ref.message = ref.title;
-            if (ref.details?.emojiId.startsWith('default_')) {
+            if (ref.details?.emojiId?.startsWith('default_')) {
                 ref.details.imageUrl = ref.details.emojiId;
                 ref.message += ` ${ref.details.emojiId.replace('default_', '')}`;
             } else {
diff --git a/src/views/Tools/components/GroupCalendarEventCard.vue b/src/views/Tools/components/GroupCalendarEventCard.vue
index 4d7c4351..cd32267d 100644
--- a/src/views/Tools/components/GroupCalendarEventCard.vue
+++ b/src/views/Tools/components/GroupCalendarEventCard.vue
@@ -1,107 +1,107 @@
 <template>
-    <Card class="event-card p-0 gap-0" :class="cardClass">
-        <img :src="bannerUrl" @click="showFullscreenImageDialog(bannerUrl)" class="banner" />
-        <div class="event-content">
-            <div class="event-title">
-                <div v-if="showGroupName" class="event-group-name" @click="onGroupClick">
-                    {{ groupName }}
-                </div>
-                <Popover :open="eventPopoverOpen">
-                    <PopoverTrigger as-child>
-                        <div
-                            class="event-title-content"
-                            @click="onGroupClick"
-                            @mouseenter="openEventPopover"
-                            @mouseleave="scheduleCloseEventPopover">
+    <Popover :open="eventPopoverOpen">
+        <PopoverTrigger as-child>
+            <Card
+                class="event-card p-0 gap-0"
+                :class="cardClass"
+                @mouseenter="openEventPopover"
+                @mouseleave="scheduleCloseEventPopover">
+                <img :src="bannerUrl" @click="showFullscreenImageDialog(bannerUrl)" class="banner" />
+                <div class="event-content">
+                    <div class="event-title">
+                        <div v-if="showGroupName" class="event-group-name" @click="onGroupClick">
+                            {{ groupName }}
+                        </div>
+                        <div class="event-title-content" @click="onGroupClick">
                             {{ event.title }}
                         </div>
-                    </PopoverTrigger>
-                    <PopoverContent
-                        side="right"
-                        align="start"
-                        class="w-125 p-3"
-                        @mouseenter="openEventPopover"
-                        @mouseleave="scheduleCloseEventPopover">
-                        <div class="flex items-baseline justify-between gap-3 text-xs">
-                            <div class="text-[13px] font-semibold">{{ event.title }}</div>
-                            <div class="whitespace-nowrap">
-                                {{ formatTimeRange(event.startsAt, event.endsAt) }}
-                            </div>
+                    </div>
+                    <div class="event-info">
+                        <div :class="timeClass">
+                            {{ formattedTime }}
                         </div>
-                        <div class="mt-2 grid grid-cols-2 gap-x-3 gap-y-2 text-xs">
-                            <div class="flex min-w-0 flex-col gap-1">
-                                <Button variant="outline" size="sm" @click="openCalendarEvent(event)">
-                                    <Calendar />
-                                    {{ t('dialog.group_calendar.event_card.export_to_calendar') }}
-                                </Button>
-                            </div>
-                            <div class="flex min-w-0 flex-col gap-1">
-                                <Button variant="outline" size="sm" @click="downloadEventIcs(event)">
-                                    <Download />
-                                    {{ t('dialog.group_calendar.event_card.download_ics') }}
-                                </Button>
-                            </div>
-                            <div class="flex min-w-0 flex-col gap-1">
-                                <div>
-                                    {{ t('dialog.group_calendar.event_card.category') }}
-                                </div>
-                                <div class="font-medium">{{ capitalizeFirst(event.category) }}</div>
-                            </div>
-                            <div class="flex min-w-0 flex-col gap-1">
-                                <div>
-                                    {{ t('dialog.group_calendar.event_card.interested_user') }}
-                                </div>
-                                <div class="font-medium">{{ event.interestedUserCount }}</div>
-                            </div>
-                            <div class="flex min-w-0 flex-col gap-1">
-                                <div>
-                                    {{ t('dialog.group_calendar.event_card.close_time') }}
-                                </div>
-                                <div class="font-medium">
-                                    {{ event.closeInstanceAfterEndMinutes + ' min' }}
-                                </div>
-                            </div>
-                            <div class="flex min-w-0 flex-col gap-1">
-                                <div>
-                                    {{ t('dialog.group_calendar.event_card.created') }}
-                                </div>
-                                <div class="font-medium">
-                                    {{ formatDateFilter(event.createdAt, 'long') }}
-                                </div>
-                            </div>
-                            <div class="col-span-2 flex min-w-0 flex-col gap-1">
-                                <div>
-                                    {{ t('dialog.group_calendar.event_card.description') }}
-                                </div>
-                                <div class="whitespace-pre-wrap break-words font-normal leading-snug">
-                                    {{ event.description }}
-                                </div>
-                            </div>
+                        <div>
+                            {{ capitalizeFirst(event.accessType) }}
                         </div>
-                    </PopoverContent>
-                </Popover>
-            </div>
-            <div class="event-info">
-                <div :class="timeClass">
-                    {{ formattedTime }}
+                    </div>
                 </div>
-                <div>
-                    {{ capitalizeFirst(event.accessType) }}
+                <div class="badges">
+                    <div @click="copyEventLink(event)" class="share-badge">
+                        <Share2 />
+                    </div>
+                    <div v-if="isFollowing" @click="toggleEventFollow(event)" class="following-badge is-following">
+                        <Star />
+                    </div>
+                    <div v-else @click="toggleEventFollow(event)" class="following-badge">
+                        <Star />
+                    </div>
+                </div>
+            </Card>
+        </PopoverTrigger>
+        <PopoverContent
+            side="right"
+            align="start"
+            class="w-125 p-3"
+            @mouseenter="openEventPopover"
+            @mouseleave="scheduleCloseEventPopover">
+            <div class="flex items-baseline justify-between gap-3 text-xs">
+                <div class="text-[13px] font-semibold">{{ event.title }}</div>
+                <div class="whitespace-nowrap">
+                    {{ formatTimeRange(event.startsAt, event.endsAt) }}
                 </div>
             </div>
-        </div>
-        <div class="badges">
-            <div @click="copyEventLink(event)" class="share-badge">
-                <Share2 />
+            <div class="mt-2 grid grid-cols-2 gap-x-3 gap-y-2 text-xs">
+                <div class="flex min-w-0 flex-col gap-1">
+                    <Button variant="outline" size="sm" @click="openCalendarEvent(event)">
+                        <Calendar />
+                        {{ t('dialog.group_calendar.event_card.export_to_calendar') }}
+                    </Button>
+                </div>
+                <div class="flex min-w-0 flex-col gap-1">
+                    <Button variant="outline" size="sm" @click="downloadEventIcs(event)">
+                        <Download />
+                        {{ t('dialog.group_calendar.event_card.download_ics') }}
+                    </Button>
+                </div>
+                <div class="flex min-w-0 flex-col gap-1">
+                    <div>
+                        {{ t('dialog.group_calendar.event_card.category') }}
+                    </div>
+                    <div class="font-medium">{{ capitalizeFirst(event.category) }}</div>
+                </div>
+                <div class="flex min-w-0 flex-col gap-1">
+                    <div>
+                        {{ t('dialog.group_calendar.event_card.interested_user') }}
+                    </div>
+                    <div class="font-medium">{{ event.interestedUserCount }}</div>
+                </div>
+                <div class="flex min-w-0 flex-col gap-1">
+                    <div>
+                        {{ t('dialog.group_calendar.event_card.close_time') }}
+                    </div>
+                    <div class="font-medium">
+                        {{ event.closeInstanceAfterEndMinutes + ' min' }}
+                    </div>
+                </div>
+                <div class="flex min-w-0 flex-col gap-1">
+                    <div>
+                        {{ t('dialog.group_calendar.event_card.created') }}
+                    </div>
+                    <div class="font-medium">
+                        {{ formatDateFilter(event.createdAt, 'long') }}
+                    </div>
+                </div>
+                <div class="col-span-2 flex min-w-0 flex-col gap-1">
+                    <div>
+                        {{ t('dialog.group_calendar.event_card.description') }}
+                    </div>
+                    <div class="whitespace-pre-wrap break-words font-normal leading-snug">
+                        {{ event.description }}
+                    </div>
+                </div>
             </div>
-            <div v-if="isFollowing" @click="toggleEventFollow(event)" class="following-badge is-following">
-                <Star />
-            </div>
-            <div v-else @click="toggleEventFollow(event)" class="following-badge">
-                <Star />
-            </div>
-        </div>
-    </Card>
+        </PopoverContent>
+    </Popover>
 </template>
 
 <script setup>
diff --git a/src/views/Tools/components/GroupCalendarMonth.vue b/src/views/Tools/components/GroupCalendarMonth.vue
index 382d4bbd..9fb395b3 100644
--- a/src/views/Tools/components/GroupCalendarMonth.vue
+++ b/src/views/Tools/components/GroupCalendarMonth.vue
@@ -139,14 +139,10 @@
                                             {{ dayLabel(weekDate) }}
                                             <div
                                                 v-if="eventCountFor(weekDate) > 0"
-                                                class="calendar-event-badge text-zinc-900"
+                                                class="calendar-event-badge bg-foreground text-accent"
                                                 :class="hasFollowingFor(weekDate) ? 'has-following' : 'no-following'">
                                                 {{ eventCountFor(weekDate) }}
                                             </div>
-                                            <!-- <div
-                                                v-if="eventCountFor(weekDate) > 0"
-                                                class="calendar-event-dot"
-                                                aria-hidden="true" /> -->
                                         </div>
                                     </div>
                                 </CalendarCellTrigger>
@@ -192,16 +188,15 @@
         top: -4px;
         right: -4px;
         min-width: 14px;
-        height: 14px;
+        height: 16px;
         border-radius: 9px;
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 10px;
+        font-size: 12px;
         z-index: 10;
         padding: 0 5px;
         line-height: 14px;
-        background-color: var(--color-accent);
     }
 
     .calendar-event-dot {