feat: ✨ Add notifications, improve note design

2026-03-13 03:29:16 +01:00 · 2024-12-02 11:17:25 +01:00 · 2024-12-02 11:17:25 +01:00 · d32f4d6899
commit d32f4d6899
parent c586db3669
7 changed files with 129 additions and 16 deletions
--- a/components/notifications/notification.vue
+++ b/components/notifications/notification.vue
@ -0,0 +1,87 @@
+<template>
+    <TooltipProvider>
+        <Card>
+            <Tooltip>
+                <TooltipTrigger :as-child="true">
+                    <CardHeader v-if="notification.account" class="flex-row items-center gap-2 p-4">
+                        <component :is="icon" class="size-5" />
+                        <Avatar class="size-6 rounded-md border border-card">
+                            <AvatarImage :src="notification.account.avatar" alt="" />
+                            <AvatarFallback class="rounded-lg"> AA </AvatarFallback>
+                        </Avatar>
+                        <span class="font-semibold">{{ notification.type === 'mention' ? text.toLowerCase() : notification.account.display_name }}</span>
+                    </CardHeader>
+                </TooltipTrigger>
+                <TooltipContent>
+                    <p>{{ text }}</p>
+                </TooltipContent>
+            </Tooltip>
+            <CardContent class="p-0">
+                <Note v-if="notification.status" :note="notification.status" :small-layout="true" :hide-actions="true" />
+            </CardContent>
+        </Card>
+    </TooltipProvider>
+</template>
+
+<script lang="ts" setup>
+import type { Notification } from "@versia/client/types";
+import {
+    AtSign,
+    Heart,
+    Repeat,
+    User,
+    UserCheck,
+    UserPlus,
+} from "lucide-vue-next";
+import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
+import { Card, CardContent, CardHeader } from "~/components/ui/card";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+} from "~/components/ui/tooltip";
+import Note from "../notes/note.vue";
+
+const { notification } = defineProps<{
+    notification: Notification;
+}>();
+
+const icon = computed(() => {
+    switch (notification.type) {
+        case "mention":
+            return AtSign;
+        case "reblog":
+            return Repeat;
+        case "follow":
+            return UserPlus;
+        case "favourite":
+            return Heart;
+        case "follow_request":
+            return User;
+        case "follow_accept":
+            return UserCheck;
+        default:
+            return null;
+    }
+});
+
+const text = computed(() => {
+    switch (notification.type) {
+        case "mention":
+            return "Mentioned you";
+        case "reblog":
+            return "Reblogged your note";
+        case "follow":
+            return "Followed you";
+        case "favourite":
+            return "Liked your note";
+        case "follow_request":
+            return "Requested to follow you";
+        case "follow_accept":
+            return "Accepted your follow request";
+        default:
+            return "";
+    }
+});
+</script>