units,lesson as standalone

2026-09-27 00:12:54 +08:00 · 2026-07-10 11:45:02 +08:00
parent 182bd93d10
commit 01a2c63b06
60 changed files with 3217 additions and 606 deletions
@@ -0,0 +1,95 @@
+import { useCallback } from "react";
+import { X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useNavigate } from "react-router-dom";
+import { useClientNotifications } from "@/contexts/ClientNotificationContext";
+import { NotificationIcon, getTypeAccent, resolveNotificationLink } from "@/components/generic/notificationDisplay";
+
+function resolveStickyStyle(data) {
+  // Supports multiple possible shapes without tightly coupling to one admin UI.
+  const style = data?.sticky_style ?? data?.stickyStyle ?? data?.stickyColors ?? data?.colors ?? null;
+  if (!style) return null;
+
+  const background = style.background ?? style.bg ?? style.backgroundColor ?? null;
+  const text       = style.text ?? style.color ?? style.foreground ?? null;
+  const border     = style.border ?? style.borderColor ?? null;
+
+  if (!background && !text && !border) return null;
+
+  return {
+    ...(background ? { backgroundColor: background } : null),
+    ...(text ? { color: text } : null),
+    ...(border ? { borderColor: border } : null),
+  };
+}
+
+export default function StickyAnnouncementBar() {
+  const navigate = useNavigate();
+  const { stickyAnnouncement, markSeen } = useClientNotifications();
+
+  const onDismiss = useCallback(async () => {
+    if (!stickyAnnouncement) return;
+    await markSeen(stickyAnnouncement.notification_id);
+  }, [stickyAnnouncement, markSeen]);
+
+  const onClickBanner = useCallback(async () => {
+    if (!stickyAnnouncement) return;
+
+    const id = stickyAnnouncement.notification_id;
+    await markSeen(id);
+
+    const link = resolveNotificationLink(stickyAnnouncement.type, stickyAnnouncement.data);
+    if (link) await link.go(navigate);
+  }, [stickyAnnouncement, markSeen, navigate]);
+
+  if (!stickyAnnouncement) return null;
+
+  const accentClass = getTypeAccent(stickyAnnouncement.type);
+  const inlineStyle = resolveStickyStyle(stickyAnnouncement.data);
+
+  return (
+    <div
+      role="status"
+      className="fixed left-0 right-0 z-60 border-b shadow-sm px-4 md:px-6"
+      style={{ top: 0 }}
+    >
+      <div
+        onClick={onClickBanner}
+        className="w-full cursor-pointer bg-card border rounded-none px-4 py-3 flex items-start justify-between gap-4"
+        style={inlineStyle ?? undefined}
+      >
+        <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="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>
+        </div>
+
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="shrink-0 text-muted-foreground hover:text-foreground"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            void onDismiss();
+          }}
+          aria-label="Dismiss sticky announcement"
+          title="Dismiss"
+        >
+          <X className="size-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+