Initial commit

2026-05-19 22:20:29 +02:00
commit 0fbe856dce
173 changed files with 38316 additions and 0 deletions
@@ -0,0 +1,165 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Bell, Check, CheckCheck } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { formatRelativeDate } from "@/lib/utils";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+
+interface Notification {
+  id: string;
+  type: string;
+  title: string;
+  message: string;
+  data: Record<string, string> | null;
+  isRead: boolean;
+  createdAt: string;
+}
+
+export function NotificationBell() {
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const unreadCount = notifications.filter((n) => !n.isRead).length;
+
+  const fetchNotifications = async () => {
+    setIsLoading(true);
+    try {
+      const res = await fetch("/api/notifications");
+      if (res.ok) {
+        const data = await res.json();
+        setNotifications(data.notifications ?? []);
+      }
+    } catch {
+      // silent
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const markAllRead = async () => {
+    try {
+      await fetch("/api/notifications", { method: "PATCH" });
+      setNotifications((prev) => prev.map((n) => ({ ...n, isRead: true })));
+    } catch {
+      // silent
+    }
+  };
+
+  const getNotificationHref = (n: Notification): string | null => {
+    const data = n.data as Record<string, string> | null;
+    if (data?.versionId) return `/review/${data.versionId}`;
+    return null;
+  };
+
+  const getNotificationIcon = (type: string): string => {
+    const icons: Record<string, string> = {
+      VERSION_UPLOADED: "🎬",
+      FEEDBACK_ADDED: "💬",
+      SHOT_APPROVED: "✅",
+      SHOT_REJECTED: "❌",
+      COMMENT_REPLY: "↩️",
+      REVISION_REQUESTED: "⚠️",
+    };
+    return icons[type] ?? "🔔";
+  };
+
+  return (
+    <DropdownMenu onOpenChange={(open) => open && fetchNotifications()}>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon-sm" className="relative">
+          <Bell className="h-4 w-4" />
+          {unreadCount > 0 && (
+            <span className="absolute -top-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[9px] font-bold text-primary-foreground">
+              {unreadCount > 9 ? "9+" : unreadCount}
+            </span>
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-80 p-0">
+        <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+          <DropdownMenuLabel className="p-0 text-sm font-semibold">
+            Notifications
+          </DropdownMenuLabel>
+          {unreadCount > 0 && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-auto py-0 text-xs text-muted-foreground hover:text-foreground"
+              onClick={markAllRead}
+            >
+              <CheckCheck className="h-3 w-3 mr-1" />
+              Mark all read
+            </Button>
+          )}
+        </div>
+
+        <ScrollArea className="max-h-80">
+          {isLoading ? (
+            <div className="flex items-center justify-center py-8">
+              <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+            </div>
+          ) : notifications.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
+              <Bell className="h-8 w-8 mb-2 opacity-30" />
+              <p className="text-sm">No notifications</p>
+            </div>
+          ) : (
+            <div>
+              {notifications.map((n) => {
+                const href = getNotificationHref(n);
+
+                const content = (
+                  <>
+                    <span className="text-base mt-0.5 shrink-0">
+                      {getNotificationIcon(n.type)}
+                    </span>
+                    <div className="flex-1 min-w-0">
+                      <p className={cn("text-xs leading-relaxed", !n.isRead && "font-medium")}>
+                        {n.message}
+                      </p>
+                      <p className="text-xs text-muted-foreground mt-0.5">
+                        {formatRelativeDate(new Date(n.createdAt))}
+                      </p>
+                    </div>
+                    {!n.isRead && (
+                      <div className="h-2 w-2 rounded-full bg-primary shrink-0 mt-1.5" />
+                    )}
+                  </>
+                );
+
+                const className = cn(
+                  "flex gap-3 px-4 py-3 hover:bg-secondary/50 transition-colors cursor-pointer border-b border-border/50 last:border-0",
+                  !n.isRead && "bg-primary/5"
+                );
+
+                if (href) {
+                  return (
+                    <Link key={n.id} href={href} className={className}>
+                      {content}
+                    </Link>
+                  );
+                }
+
+                return (
+                  <div key={n.id} className={className}>
+                    {content}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </ScrollArea>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}