add: more commits

Signed-off-by: Kenneth Obsequio <k80308392@gmail.com>
2026-09-27 00:12:54 +08:00 · 2026-07-03 16:21:27 +08:00
parent 17326b2c2e
commit 7e964f2432
112 changed files with 9160 additions and 3461 deletions
@@ -0,0 +1,96 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Copy, Check, ArrowRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { Separator } from "@/components/ui/separator";
+import { Spinner } from "@/components/ui/spinner";
+import { useDateFormat } from "@/hooks/useDateFormat";
+import { NotificationIcon, getTypeAccent, resolveNotificationLink } from "@/components/generic/notificationDisplay";
+
+export default function NotificationDetailDialog({ notification, onOpenChange }) {
+    const { fmtDateTime } = useDateFormat();
+    const navigate = useNavigate();
+    const [copiedCode, setCopiedCode] = useState(false);
+    const [navigating, setNavigating] = useState(false);
+
+    async function handleCopyCode(code) {
+        await navigator.clipboard.writeText(code);
+        setCopiedCode(true);
+        setTimeout(() => setCopiedCode(false), 2000);
+    }
+
+    const link = notification ? resolveNotificationLink(notification.type, notification.data) : null;
+
+    async function handleGo() {
+        if (!link) return;
+        setNavigating(true);
+        await link.go(navigate);
+        setNavigating(false);
+        onOpenChange(false);
+    }
+
+    return (
+        <Dialog open={!!notification} onOpenChange={(open) => { if (!open) { onOpenChange(false); setCopiedCode(false); } }}>
+            <DialogContent className="sm:max-w-lg">
+                <DialogHeader>
+                    <div className="flex items-center gap-3 mb-1">
+                        <div className={`flex h-9 w-9 items-center justify-center rounded-full ${getTypeAccent(notification?.type)}`}>
+                            <NotificationIcon
+                                type={notification?.type}
+                                className="h-5 w-5"
+                            />
+                        </div>
+                        <DialogTitle className="leading-snug">{notification?.title}</DialogTitle>
+                    </div>
+                    <DialogDescription className="text-sm text-foreground/80 leading-relaxed">
+                        {notification?.message}
+                    </DialogDescription>
+                </DialogHeader>
+
+                <Separator />
+
+                {notification?.data?.groupCode && (
+                    <>
+                        <div className="flex flex-col gap-1.5">
+                            <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                                Group Code
+                            </p>
+                            <div className="flex items-center gap-2">
+                                <span className="flex-1 font-mono text-sm bg-muted rounded-lg px-3 py-2 truncate">
+                                    {notification.data.groupCode}
+                                </span>
+                                <Button
+                                    size="sm"
+                                    variant="outline"
+                                    className="shrink-0 gap-1.5"
+                                    onClick={() => handleCopyCode(notification.data.groupCode)}
+                                >
+                                    {copiedCode
+                                        ? <><Check className="size-3.5" /> Copied</>
+                                        : <><Copy className="size-3.5" /> Copy</>
+                                    }
+                                </Button>
+                            </div>
+                            <p className="text-[11px] text-muted-foreground">
+                                Share this code with others so they can join your group.
+                            </p>
+                        </div>
+                        <Separator />
+                    </>
+                )}
+
+                {link && (
+                    <Button className="w-full gap-1.5" onClick={handleGo} disabled={navigating}>
+                        {navigating ? <Spinner className="size-4" /> : <>{link.label} <ArrowRight className="size-3.5" /></>}
+                    </Button>
+                )}
+
+                <div className="flex items-center justify-between text-xs text-muted-foreground">
+                    <span className="capitalize">{notification?.type?.replace("_", " ")}</span>
+                    <span>{notification ? fmtDateTime(notification.createdAt) : ""}</span>
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+}