mirror of
https://github.com/rgrgogu/new_starr.git
synced 2026-09-27 00:12:54 +08:00
@@ -1,22 +1,22 @@
|
||||
import { useCallback, useState } from "react";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { X } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
AlertDialog, AlertDialogAction, AlertDialogCancel,
|
||||
AlertDialogContent, AlertDialogDescription,
|
||||
AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useClientNotifications } from "@/contexts/ClientNotificationContext";
|
||||
import { NotificationIcon, getTypeAccent, resolveNotificationLink, resolveStickyStyle } from "@/components/generic/notificationDisplay";
|
||||
import { resolveNotificationLink } from "@/components/generic/notificationDisplay";
|
||||
import { getTierColor, getContrastText } from "@/utils/tierColors";
|
||||
import AnnouncementCarouselDialog from "@/components/generic/AnnouncementCarouselDialog";
|
||||
|
||||
// Explicit link_url (from the admin "On Open" section) always wins. Falls back
|
||||
// to the type-based resolver for broadcasts sent before that field existed.
|
||||
const ROTATE_INTERVAL_MS = 6000;
|
||||
|
||||
// Explicit link_url (from the admin "On Open" section) always wins, using the
|
||||
// admin-authored button label when set. Falls back to the type-based resolver
|
||||
// for broadcasts sent before that field existed.
|
||||
function resolveClickAction(stickyAnnouncement) {
|
||||
const explicitUrl = stickyAnnouncement.data?.linkUrl || null;
|
||||
if (explicitUrl) {
|
||||
return {
|
||||
label: "Open Link",
|
||||
label: stickyAnnouncement.data?.linkLabel || "Open Link",
|
||||
go: (navigate) => (explicitUrl.startsWith("/")
|
||||
? navigate(explicitUrl)
|
||||
: window.open(explicitUrl, "_blank", "noopener,noreferrer")),
|
||||
@@ -27,99 +27,140 @@ function resolveClickAction(stickyAnnouncement) {
|
||||
|
||||
export default function StickyAnnouncementBar() {
|
||||
const navigate = useNavigate();
|
||||
const { stickyAnnouncement, markSeen } = useClientNotifications();
|
||||
const { stickyAnnouncements, bannerImage, markSeen } = useClientNotifications();
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
const [detailsOpen, setDetailsOpen] = useState(false);
|
||||
|
||||
const count = stickyAnnouncements.length;
|
||||
// Derived rather than clamped via effect — safe the instant the array
|
||||
// shrinks (e.g. after a dismiss), no render with a stale out-of-range index.
|
||||
const safeIndex = count ? Math.min(activeIndex, count - 1) : 0;
|
||||
|
||||
// Auto-rotate through active announcements while more than one is live.
|
||||
useEffect(() => {
|
||||
if (count <= 1) return;
|
||||
const id = setInterval(() => {
|
||||
setActiveIndex((i) => (i + 1) % count);
|
||||
}, ROTATE_INTERVAL_MS);
|
||||
return () => clearInterval(id);
|
||||
}, [count]);
|
||||
|
||||
const current = stickyAnnouncements[safeIndex];
|
||||
|
||||
const onDismiss = useCallback(async () => {
|
||||
if (!stickyAnnouncement) return;
|
||||
await markSeen(stickyAnnouncement.notification_id);
|
||||
}, [stickyAnnouncement, markSeen]);
|
||||
if (!current) return;
|
||||
await markSeen(current.notification_id);
|
||||
}, [current, markSeen]);
|
||||
|
||||
// Opening the dialog must NOT mark it seen — markSeen clears
|
||||
// stickyAnnouncement, which would unmount this component (dialog included)
|
||||
// before it ever shows. Only the X button dismisses/marks seen.
|
||||
// Opening the dialog must NOT mark it seen — markSeen removes the row from
|
||||
// stickyAnnouncements, which would unmount this component (dialog included)
|
||||
// before it ever shows.
|
||||
const onClickBanner = useCallback(() => {
|
||||
if (!stickyAnnouncement) return;
|
||||
if (!current) return;
|
||||
setDetailsOpen(true);
|
||||
}, [stickyAnnouncement]);
|
||||
}, [current]);
|
||||
|
||||
if (!stickyAnnouncement) return null;
|
||||
// Closing the details dialog (X, Escape, overlay click — any reason)
|
||||
// dismisses whichever announcement was being viewed at the time. This is
|
||||
// the only dismiss path when multiple are active (no per-item X on the bar
|
||||
// itself — see the count > 1 branch below).
|
||||
const onDialogOpenChange = useCallback((open) => {
|
||||
setDetailsOpen(open);
|
||||
if (!open) void onDismiss();
|
||||
}, [onDismiss]);
|
||||
|
||||
const accentClass = getTypeAccent(stickyAnnouncement.type);
|
||||
const inlineStyle = resolveStickyStyle(stickyAnnouncement.data);
|
||||
const clickAction = resolveClickAction(stickyAnnouncement);
|
||||
if (!current) return null;
|
||||
|
||||
const swatch = getTierColor(current.color || "indigo").swatch;
|
||||
const textColor = getContrastText(swatch, current.color || "indigo");
|
||||
const clickAction = resolveClickAction(current);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
role="status"
|
||||
className="w-full border-b shadow-sm px-4 md:px-6"
|
||||
>
|
||||
<div role="status" className="w-full shadow-sm px-4 md:px-6" style={{ backgroundColor: swatch }}>
|
||||
<div
|
||||
onClick={onClickBanner}
|
||||
className="w-full cursor-pointer bg-card rounded-none py-3 flex items-center justify-between gap-4"
|
||||
style={inlineStyle ?? undefined}
|
||||
className="relative w-full cursor-pointer rounded-none py-3 flex items-center justify-center gap-4 px-10"
|
||||
>
|
||||
<div className="flex items-start gap-3 min-w-0">
|
||||
<div className={`flex h-9 w-9 items-center justify-center rounded ${accentClass}`}>
|
||||
<NotificationIcon type={stickyAnnouncement.type} className="h-5 w-5" />
|
||||
</div>
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<p className="text-sm font-semibold leading-snug truncate" style={{ color: textColor }}>
|
||||
{current.title || "Announcement"}
|
||||
</p>
|
||||
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-semibold leading-snug truncate">
|
||||
{stickyAnnouncement.title || "Announcement"}
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground leading-snug line-clamp-2">
|
||||
{stickyAnnouncement.message || ""}
|
||||
</p>
|
||||
</div>
|
||||
{clickAction && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="shrink-0 text-foreground"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
clickAction.go(navigate);
|
||||
}}
|
||||
>
|
||||
{clickAction.label}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
void onDismiss();
|
||||
}}
|
||||
aria-label="Dismiss sticky announcement"
|
||||
title="Dismiss"
|
||||
>
|
||||
<X className="size-4" />
|
||||
</Button>
|
||||
{count > 1 && (
|
||||
<div className="absolute right-2 flex items-center gap-1.5">
|
||||
{stickyAnnouncements.map((a, i) => (
|
||||
<button
|
||||
key={a.notification_id}
|
||||
type="button"
|
||||
aria-label={`Show announcement ${i + 1}`}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setActiveIndex(i);
|
||||
}}
|
||||
className="size-1.5 rounded-full transition-opacity"
|
||||
style={{ backgroundColor: textColor, opacity: i === safeIndex ? 1 : 0.35 }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Dismiss-X only makes sense for a single active announcement —
|
||||
with multiple, the dialog's own close button (shadcn Dialog)
|
||||
is the way to close/step away, no per-item dismiss from the bar. */}
|
||||
{count <= 1 && (
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
void onDismiss();
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key !== "Enter" && e.key !== " ") return;
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
void onDismiss();
|
||||
}}
|
||||
aria-label="Dismiss sticky announcement"
|
||||
title="Dismiss"
|
||||
className="absolute right-2 inline-flex items-center justify-center size-8 rounded-lg cursor-pointer hover:opacity-70 transition-opacity"
|
||||
style={{ color: textColor }}
|
||||
>
|
||||
<X className="size-4" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Full-content view — plain text info, or with an Open Link action
|
||||
when the announcement was created with a link (see AddNotificationBroadcast's
|
||||
"On Open" section). */}
|
||||
<AlertDialog open={detailsOpen} onOpenChange={setDetailsOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle className="flex items-center gap-2">
|
||||
<div className={`flex h-8 w-8 items-center justify-center rounded shrink-0 ${accentClass}`}>
|
||||
<NotificationIcon type={stickyAnnouncement.type} className="h-4 w-4" />
|
||||
</div>
|
||||
{stickyAnnouncement.title || "Announcement"}
|
||||
</AlertDialogTitle>
|
||||
<AlertDialogDescription asChild>
|
||||
<p className="whitespace-pre-wrap text-left pt-1 text-foreground">
|
||||
{stickyAnnouncement.message || ""}
|
||||
</p>
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Close</AlertDialogCancel>
|
||||
{clickAction && (
|
||||
<AlertDialogAction onClick={() => clickAction.go(navigate)}>
|
||||
{clickAction.label}
|
||||
</AlertDialogAction>
|
||||
)}
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
<AnnouncementCarouselDialog
|
||||
open={detailsOpen}
|
||||
onOpenChange={onDialogOpenChange}
|
||||
announcements={stickyAnnouncements}
|
||||
activeIndex={safeIndex}
|
||||
onIndexChange={setActiveIndex}
|
||||
resolveClickAction={resolveClickAction}
|
||||
navigate={navigate}
|
||||
bannerImage={bannerImage}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user