refactor: notification tab changes

package.json

@@ -26,10 +26,12 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.1",
+    "@radix-ui/react-tooltip": "^1.1.3",
     "@tanstack/react-table": "^8.20.1",
     "axios": "^1.7.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.1.8",
     "framer-motion": "^11.3.27",
     "ioredis": "^5.4.1",

src/app/(inside-sidebar)/room/[...roomId]/room-id-client.tsx

@@ -2,6 +2,12 @@
 
 import { useCallback, useEffect, useState } from 'react';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import {
   Table,
   TableBody,
@@ -21,9 +27,10 @@ import { useToast } from '@/components/ui/use-toast';
 import useSWR from 'swr';
 import LeaveRoom from './LeaveRoom';
 import { Button } from '@/components/ui/button';
-import { Menu, Copy } from 'lucide-react';
+import { Copy, ChevronDown } from 'lucide-react';
 import { copyInviteLink } from '@/components/copyInviteLink';
 import { Badge } from '@/components/ui/badge';
+import { format } from 'date-fns';
 
 interface Notification {
   id: string;
@@ -78,6 +85,7 @@ export default function RoomPageClient({
   const { toast } = useToast();
   const [activeTab, setActiveTab] = useState('leaderboard');
   const [lastReadTimeStamp, setLastReadTimeStamp] = useState('0');
+  const groupedNotifications = groupNotifications(initialNotifications);
 
   const { data: notifications = initialNotifications, error } = useSWR<
     Notification[]
@@ -192,7 +200,7 @@ export default function RoomPageClient({
                 className="w-full bg-zinc-800 text-zinc-300 hover:bg-zinc-700 hover:text-zinc-100"
               >
                 {activeTab.charAt(0).toUpperCase() + activeTab.slice(1)}
-                <Menu className="ml-2 h-4 w-4" />
+                <ChevronDown className="ml-2 h-4 w-4" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent
@@ -285,18 +293,39 @@ export default function RoomPageClient({
         </TabsContent>
 
         <TabsContent value="notifications" className="mt-4">
-          <ul className="space-y-4">
-            {notifications.map((notification) => (
-              <li key={notification.id} className="bg-zinc-800 p-4 rounded-lg">
-                <p className={colorMap[notification.color]}>
-                  {notification.message}
-                </p>
-                <p className="text-zinc-400 text-sm mt-1">
-                  {new Date(notification.createdAt).toLocaleString()}
-                </p>
-              </li>
-            ))}
-          </ul>
+          {Object.entries(groupedNotifications).map(([date, notifs]) => (
+            <div key={date} className="mb-6">
+              <h3 className="text-lg font-semibold mb-2 text-zinc-300 text-center">
+                {date === 'Today' || date === 'Yesterday' ? (
+                  date
+                ) : (
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger>{date}</TooltipTrigger>
+                      <TooltipContent>
+                        <p>MM/DD/YYYY Format</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                )}
+              </h3>
+              <ul className="space-y-4">
+                {notifs.map((notification) => (
+                  <li
+                    key={notification.id}
+                    className="bg-zinc-800 p-4 rounded-lg"
+                  >
+                    <p className={colorMap[notification.color]}>
+                      {notification.message}
+                    </p>
+                    <p className="text-zinc-400 text-sm mt-1">
+                      {format(new Date(notification.createdAt), 'HH:mm')}
+                    </p>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
         </TabsContent>
 
         <TabsContent value="comparison" className="mt-4">
@@ -314,3 +343,33 @@ export default function RoomPageClient({
     </div>
   );
 }
+
+function groupNotifications(notifications: Notification[]) {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+
+  return notifications.reduce(
+    (groups, notification) => {
+      const notificationDate = new Date(notification.createdAt);
+      notificationDate.setHours(0, 0, 0, 0);
+
+      let key;
+      if (notificationDate.getTime() === today.getTime()) {
+        key = 'Today';
+      } else if (notificationDate.getTime() === yesterday.getTime()) {
+        key = 'Yesterday';
+      } else {
+        key = notificationDate.toLocaleDateString();
+      }
+
+      if (!groups[key]) {
+        groups[key] = [];
+      }
+      groups[key].push(notification);
+      return groups;
+    },
+    {} as Record<string, Notification[]>,
+  );
+}

src/components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }