add hover card

src/views/Sidebar/components/NotificationItem.vue

@@ -1,4 +1,6 @@
 <template>
+    <HoverCard :open-delay="400" :close-delay="100">
+        <HoverCardTrigger as-child>
             <Item size="sm" variant="muted" class="mb-1.5">
                 <ItemMedia variant="image" class="cursor-pointer" @click.stop="openSender">
                     <Avatar class="size-full">
@@ -18,7 +20,9 @@
                             v-if="!isNotificationExpired(notification) && !isSeen"
                             class="ml-auto size-2 shrink-0 rounded-full bg-blue-500" />
                     </ItemTitle>
-            <ItemDescription v-if="notification.type === 'invite' && notification.details?.worldId" class="text-xs">
+                    <ItemDescription
+                        v-if="notification.type === 'invite' && notification.details?.worldId"
+                        class="text-xs">
                         <Location
                             :location="notification.details.worldId"
                             :hint="notification.details.worldName || ''"
@@ -37,11 +41,9 @@
                             :grouphint="notification.groupName || ''"
                             link />
                     </ItemDescription>
-            <TooltipWrapper v-if="displayMessage" side="top" :content="displayMessage" :delay-duration="600">
+                    <ItemDescription v-if="displayMessage" class="text-xs select-none truncate">
-                <ItemDescription class="text-xs select-none">
                         {{ displayMessage }}
                     </ItemDescription>
-            </TooltipWrapper>
                 </ItemContent>
 
                 <div class="flex h-full shrink-0 flex-col items-end justify-between gap-1">
@@ -77,7 +79,10 @@
                             </TooltipWrapper>
 
                             <template v-if="notification.type === 'requestInvite'">
-                        <TooltipWrapper v-if="canInvite" side="top" :content="t('view.notification.actions.invite')">
+                                <TooltipWrapper
+                                    v-if="canInvite"
+                                    side="top"
+                                    :content="t('view.notification.actions.invite')">
                                     <button
                                         type="button"
                                         class="inline-flex size-5 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-muted"
@@ -85,7 +90,9 @@
                                         <Check class="size-3" />
                                     </button>
                                 </TooltipWrapper>
-                        <TooltipWrapper side="top" :content="t('view.notification.actions.decline_with_message')">
+                                <TooltipWrapper
+                                    side="top"
+                                    :content="t('view.notification.actions.decline_with_message')">
                                     <button
                                         type="button"
                                         class="inline-flex size-5 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-muted"
@@ -110,7 +117,10 @@
                                 </TooltipWrapper>
                             </template>
 
-                    <TooltipWrapper v-if="showDecline" side="top" :content="t('view.notification.actions.decline')">
+                            <TooltipWrapper
+                                v-if="showDecline"
+                                side="top"
+                                :content="t('view.notification.actions.decline')">
                                 <button
                                     type="button"
                                     class="inline-flex size-5 items-center justify-center rounded text-muted-foreground hover:text-destructive hover:bg-muted"
@@ -120,7 +130,10 @@
                             </TooltipWrapper>
                         </template>
 
-                <TooltipWrapper v-if="showDeleteLog" side="top" :content="t('view.notification.actions.delete_log')">
+                        <TooltipWrapper
+                            v-if="showDeleteLog"
+                            side="top"
+                            :content="t('view.notification.actions.delete_log')">
                             <button
                                 type="button"
                                 class="inline-flex size-5 items-center justify-center rounded text-muted-foreground hover:text-destructive hover:bg-muted"
@@ -131,6 +144,81 @@
                     </div>
                 </div>
             </Item>
+        </HoverCardTrigger>
+        <HoverCardContent side="left" :side-offset="8" class="w-80 p-3">
+            <!-- Group notifications -->
+            <template v-if="isGroupType">
+                <div class="flex items-center gap-2 mb-2">
+                    <Avatar class="size-8 shrink-0 rounded">
+                        <AvatarImage v-if="hoverImageUrl" :src="hoverImageUrl" />
+                        <AvatarFallback class="text-muted-foreground rounded">
+                            <Users class="size-4" />
+                        </AvatarFallback>
+                    </Avatar>
+                    <div class="min-w-0">
+                        <p class="text-sm font-medium truncate">{{ groupDisplayName }}</p>
+                        <p class="text-xs text-muted-foreground">{{ typeLabel }}</p>
+                    </div>
+                </div>
+                <p v-if="hoverTitle" class="text-sm font-medium mb-1">{{ hoverTitle }}</p>
+                <p
+                    v-if="notification.message"
+                    class="text-xs text-muted-foreground whitespace-pre-line warp-break-words leading-relaxed">
+                    {{ notification.message }}
+                </p>
+            </template>
+
+            <!-- Friend  -->
+            <template v-else-if="isFriendType">
+                <div class="flex items-center gap-2 mb-2">
+                    <Avatar class="size-8 shrink-0">
+                        <AvatarImage v-if="avatarUrl" :src="avatarUrl" />
+                        <AvatarFallback class="text-muted-foreground">
+                            <component :is="typeIcon" class="size-4" />
+                        </AvatarFallback>
+                    </Avatar>
+                    <div class="min-w-0">
+                        <p class="text-sm font-medium truncate">{{ senderName }}</p>
+                        <p class="text-xs text-muted-foreground">{{ typeLabel }}</p>
+                    </div>
+                </div>
+                <p v-if="notification.details?.worldName" class="text-xs mb-1">
+                    <span class="text-muted-foreground">World: </span>{{ notification.details.worldName }}
+                </p>
+                <p v-if="friendMessage" class="text-xs text-muted-foreground warp-break-words leading-relaxed">
+                    {{ friendMessage }}
+                </p>
+            </template>
+
+            <!-- Other notifications -->
+            <template v-else>
+                <div class="flex items-center gap-2 mb-2">
+                    <Avatar class="size-8 shrink-0">
+                        <AvatarImage v-if="avatarUrl" :src="avatarUrl" />
+                        <AvatarFallback class="text-muted-foreground">
+                            <component :is="typeIcon" class="size-4" />
+                        </AvatarFallback>
+                    </Avatar>
+                    <div class="min-w-0">
+                        <p class="text-sm font-medium truncate">{{ senderName || notification.type }}</p>
+                        <p class="text-xs text-muted-foreground">{{ typeLabel }}</p>
+                    </div>
+                </div>
+                <p v-if="notification.title" class="text-sm font-medium mb-1">{{ notification.title }}</p>
+                <p
+                    v-if="displayMessage"
+                    class="text-xs text-muted-foreground whitespace-pre-line wrap-break-words leading-relaxed">
+                    {{ displayMessage }}
+                </p>
+            </template>
+
+            <!-- Time (always shown) -->
+            <Separator v-if="absoluteTime" class="my-2" />
+            <div v-if="absoluteTime" class="flex items-center gap-2 text-[10px] text-muted-foreground">
+                <CalendarDays />{{ absoluteTime }}
+            </div>
+        </HoverCardContent>
+    </HoverCard>
 </template>
 
 <script setup>
@@ -138,6 +226,7 @@
         Ban,
         Bell,
         BellOff,
+        CalendarDays,
         Check,
         Link,
         Mail,
@@ -152,8 +241,10 @@
     } from 'lucide-vue-next';
     import { Item, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@/components/ui/item';
     import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+    import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
     import { computed, onMounted } from 'vue';
     import { Badge } from '@/components/ui/badge';
+    import { Separator } from '@/components/ui/separator';
     import { TooltipWrapper } from '@/components/ui/tooltip';
     import { notificationRequest } from '@/api';
     import { storeToRefs } from 'pinia';
@@ -278,6 +369,44 @@
         return true;
     });
 
+    const isGroupType = computed(() => {
+        const type = props.notification.type;
+        return type?.startsWith('group.') || type === 'groupChange';
+    });
+
+    const isFriendType = computed(() => {
+        const type = props.notification.type;
+        return [
+            'invite',
+            'requestInvite',
+            'inviteResponse',
+            'requestInviteResponse',
+            'friendRequest',
+            'ignoredFriendRequest',
+            'boop'
+        ].includes(type);
+    });
+
+    const groupDisplayName = computed(() => {
+        const n = props.notification;
+        return n.data?.groupName || n.groupName || n.details?.groupName || n.senderUsername || '';
+    });
+
+    const hoverTitle = computed(() => {
+        const n = props.notification;
+        return n.data?.announcementTitle || n.title || '';
+    });
+
+    const hoverImageUrl = computed(() => {
+        const n = props.notification;
+        return n.imageUrl || n.details?.imageUrl || null;
+    });
+
+    const friendMessage = computed(() => {
+        const n = props.notification;
+        return n.message || n.details?.inviteMessage || n.details?.requestMessage || n.details?.responseMessage || '';
+    });
+
     const isSeen = computed(() => {
         const n = props.notification;
         if (typeof n.seen === 'boolean') {