From d32f4d68993f2be58e02390f17d1a19af1aa68fb Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Mon, 2 Dec 2024 11:17:25 +0100
Subject: [PATCH] feat: :sparkles: Add notifications, improve note design

---
 components/notes/content.vue              |  2 +-
 components/notes/header.vue               | 27 +++++--
 components/notes/note.vue                 |  4 +-
 components/notifications/notification.vue | 87 +++++++++++++++++++++++
 components/sidebars/sidebar.vue           | 15 ++--
 components/timelines/timeline-item.vue    |  8 +--
 components/timelines/timeline.vue         |  2 +-
 7 files changed, 129 insertions(+), 16 deletions(-)
 create mode 100644 components/notifications/notification.vue

diff --git a/components/notes/content.vue b/components/notes/content.vue
index 153781f..40bdb9e 100644
--- a/components/notes/content.vue
+++ b/components/notes/content.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="['prose block relative dark:prose-invert duration-200 !max-w-full break-words prose-a:no-underline prose-a:hover:underline', $style.content]" v-html="content">
+    <div :class="['prose prose-sm block relative dark:prose-invert duration-200 !max-w-full break-words prose-a:no-underline prose-a:hover:underline', $style.content]" v-html="content">
     </div>
 
     <Attachments v-if="attachments.length > 0" :attachments="attachments" />
diff --git a/components/notes/header.vue b/components/notes/header.vue
index 2359c9c..844bc98 100644
--- a/components/notes/header.vue
+++ b/components/notes/header.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="rounded flex flex-row items-center gap-3">
-        <NuxtLink :href="url" :class="cn('relative size-14', smallLayout && 'size-6')">
-            <Avatar :class="cn('size-14 rounded-md border border-card', smallLayout && 'size-6')">
+        <NuxtLink :href="url" :class="cn('relative size-14', smallLayout && 'size-8')">
+            <Avatar :class="cn('size-14 rounded-md border border-card', smallLayout && 'size-8')">
                 <AvatarImage :src="avatar" alt="" />
                 <AvatarFallback class="rounded-lg"> AA </AvatarFallback>
             </Avatar>
@@ -10,7 +10,7 @@
                 <AvatarFallback class="rounded-lg"> AA </AvatarFallback>
             </Avatar>
         </NuxtLink>
-        <div :class="cn('flex flex-col gap-0.5 justify-center flex-1 text-left leading-tight', smallLayout && 'flex-row justify-start items-center gap-2')">
+        <div :class="cn('flex flex-col gap-0.5 justify-center flex-1 text-left leading-tight', smallLayout && 'text-sm')">
             <span class="truncate font-semibold">{{
                 displayName
                 }}</span>
@@ -37,6 +37,10 @@
 <script lang="ts" setup>
 import { cn } from "@/lib/utils";
 import type { StatusVisibility } from "@versia/client/types";
+import type {
+    UseTimeAgoMessages,
+    UseTimeAgoUnitNamesDefault,
+} from "@vueuse/core";
 import { AtSign, Globe, Lock, LockOpen } from "lucide-vue-next";
 import CopyableText from "./copyable-text.vue";
 
@@ -52,7 +56,22 @@ const { acct, createdAt } = defineProps<{
 }>();
 
 const [username, instance] = acct.split("@");
-const timeAgo = useTimeAgo(createdAt);
+const digitRegex = /\d/;
+const timeAgo = useTimeAgo(createdAt, {
+    messages: {
+        justNow: "now",
+        past: (n) => (n.match(digitRegex) ? `${n}` : n),
+        future: (n) => (n.match(digitRegex) ? `in ${n}` : n),
+        month: (n) => `${n}mo`,
+        year: (n) => `${n}y`,
+        day: (n) => `${n}d`,
+        week: (n) => `${n}w`,
+        hour: (n) => `${n}h`,
+        minute: (n) => `${n}m`,
+        second: (n) => `${n}s`,
+        invalid: "",
+    } as UseTimeAgoMessages<UseTimeAgoUnitNamesDefault>,
+});
 const fullTime = new Intl.DateTimeFormat("en-US", {
     dateStyle: "medium",
     timeStyle: "short",
diff --git a/components/notes/note.vue b/components/notes/note.vue
index 6b0ddaf..ce58e2a 100644
--- a/components/notes/note.vue
+++ b/components/notes/note.vue
@@ -1,5 +1,5 @@
 <template>
-    <Card as="article" class="rounded-none border-0 duration-200 shadow-none max-w-full">
+    <Card as="article" class="rounded-none border-0 duration-200 shadow- max-w-full">
         <CardHeader class="pb-4" as="header">
             <ReblogHeader v-if="note.reblog" :avatar="note.account.avatar" :display-name="note.account.display_name"
                 :url="reblogAccountUrl" />
@@ -11,7 +11,7 @@
         <CardContent>
             <Content :content="noteToUse.content" :quote="note.quote ?? undefined" :attachments="noteToUse.media_attachments"/>
         </CardContent>
-        <CardFooter v-if="!hideActions">
+        <CardFooter v-if="!hideActions" class="p-4 pt-0">
             <Actions :reply-count="noteToUse.replies_count" :like-count="noteToUse.favourites_count" :url="url"
                 :api-note-string="JSON.stringify(note, null, 4)" :reblog-count="noteToUse.reblogs_count" :remote-url="noteToUse.url" :is-remote="isRemote" :author-id="noteToUse.account.id" @edit="useEvent('composer:edit', note)" @reply="useEvent('composer:reply', note)" @quote="useEvent('composer:quote', note)" @delete="useEvent('note:delete', note)" :note-id="noteToUse.id" :liked="noteToUse.favourited ?? false" :reblogged="noteToUse.reblogged ?? false" />
         </CardFooter>
diff --git a/components/notifications/notification.vue b/components/notifications/notification.vue
new file mode 100644
index 0000000..f6fc49d
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/components/sidebars/sidebar.vue b/components/sidebars/sidebar.vue
index 78e293f..a8d21ee 100644
--- a/components/sidebars/sidebar.vue
+++ b/components/sidebars/sidebar.vue
@@ -54,6 +54,7 @@ import {
     SidebarRail,
     SidebarTrigger,
 } from "~/components/ui/sidebar";
+import NotificationsTimeline from "../timelines/notifications.vue";
 import { Button } from "../ui/button";
 import ThemeSwitcher from "./theme-switcher.vue";
 
@@ -140,7 +141,7 @@ const instance = useInstance();
                 </SidebarMenu>
             </SidebarHeader>
             <SidebarContent>
-                <SidebarGroup class="group-data-[collapsible=icon]:hidden">
+                <SidebarGroup>
                     <SidebarGroupLabel>Navigation</SidebarGroupLabel>
                     <SidebarMenu>
                         <SidebarMenuItem v-for="item in data.other" :key="item.name">
@@ -184,7 +185,7 @@ const instance = useInstance();
                 </SidebarGroup>
             </SidebarContent>
             <SidebarFooter>
-                <SidebarMenu>
+                <SidebarMenu class="gap-3">
                     <SidebarMenuItem>
                         <ThemeSwitcher />
                     </SidebarMenuItem>
@@ -240,9 +241,9 @@ const instance = useInstance();
                         </DropdownMenu>
                     </SidebarMenuItem>
                     <SidebarMenuItem>
-                        <Button variant="default" size="lg" class="w-full" @click="useEvent('composer:open')">
+                        <Button variant="default" size="lg" class="w-full group-data-[collapsible=icon]:px-4" @click="useEvent('composer:open')">
                             <Pen />
-                            Compose
+                            <span class="group-data-[collapsible=icon]:hidden">Compose</span>
                         </Button>
                     </SidebarMenuItem>
                 </SidebarMenu>
@@ -274,5 +275,11 @@ const instance = useInstance();
                 <slot />
             </div>
         </SidebarInset>
+        <Sidebar variant="inset" collapsible="none" side="right" class="[--sidebar-width:24rem]">
+            <SidebarContent class="p-2 overflow-y-auto">
+                <NotificationsTimeline />
+            </SidebarContent>
+            <SidebarRail />
+        </Sidebar>
     </SidebarProvider>
 </template>
diff --git a/components/timelines/timeline-item.vue b/components/timelines/timeline-item.vue
index 68b3ae1..388c9a8 100644
--- a/components/timelines/timeline-item.vue
+++ b/components/timelines/timeline-item.vue
@@ -1,13 +1,13 @@
 <template>
-    <component :is="itemComponent" :note="item" @update="$emit('update', $event)"
+    <component :is="itemComponent" :note="type === 'status' ? item : undefined" :notification="type === 'notification' ? item : undefined" @update="$emit('update', $event)"
         @delete="$emit('delete', item?.id)" />
 </template>
 
 <script lang="ts" setup>
 import type { Notification, Status } from "@versia/client/types";
 import { computed } from "vue";
-import NewNoteItem from "../notes/note.vue";
-import NotificationItem from "../social-elements/notifications/notif.vue";
+import Note from "../notes/note.vue";
+import NotificationItem from "../notifications/notification.vue";
 
 const props = defineProps<{
     item?: Status | Notification;
@@ -16,7 +16,7 @@ const props = defineProps<{
 
 const itemComponent = computed(() => {
     if (props.type === "status") {
-        return NewNoteItem;
+        return Note;
     }
     if (props.type === "notification") {
         return NotificationItem;
diff --git a/components/timelines/timeline.vue b/components/timelines/timeline.vue
index eddda57..f8e8550 100644
--- a/components/timelines/timeline.vue
+++ b/components/timelines/timeline.vue
@@ -1,6 +1,6 @@
 <!-- Timeline.vue -->
 <template>
-    <div class="timeline rounded overflow-hidden">
+    <div class="timeline rounded">
         <TransitionGroup name="timeline-item" tag="div" class="timeline-items *:rounded space-y-4 *:border *:border-border/50">
             <TimelineItem :type="type" v-for="item in items" :key="item.id" :item="item" @update="updateItem"
                 @delete="removeItem" />