UHD_Media_Tool/apps/web/app/components/console/inbox-bell.tsx

import { useQueryClient } from "@tanstack/react-query";
import type { Decision, DecisionKind } from "@umt/contracts";
import { ArrowRight, Bell, CheckCheck } from "lucide-react";
import { useMemo, useRef, useState } from "react";
import { Link, useNavigate } from "react-router";
import { decisionKeys, useDecisionSummary, useDecisions } from "~/api/decisions.ts";
import { SEVERITY } from "~/components/library/labels.ts";
import { Button } from "~/components/ui/button.tsx";
import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover.tsx";
import { decisionKindLabel, formatRelative } from "~/lib/labels.ts";
import { useSse } from "~/lib/sse.ts";
import { cn } from "~/lib/utils.ts";

// 顶栏收件箱(IA-3):待处理不进侧栏,铃铛 + 未决角标;下拉按问题类型列最近事项,点开进待处理页。

const RECENT = 8;
const DOT = { info: "bg-muted-foreground/60", warning: "bg-warning", critical: "bg-destructive" } as const;

/** 未决数与最近事项;SSE decision.* 到达时刷新 */
export function useLiveDecisions() {
  const qc = useQueryClient();
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
  useSse(["decision.created", "decision.updated"], () => {
    if (timer.current) return;
    timer.current = setTimeout(() => {
      timer.current = null;
      void qc.invalidateQueries({ queryKey: decisionKeys.all });
    }, 800);
  });
  return useDecisionSummary();
}

export const inboxPath = (kind?: string) => (kind ? `/console/inbox?kind=${kind}` : "/console/inbox");

export function InboxBell() {
  const summary = useLiveDecisions();
  const [open, setOpen] = useState(false);
  const list = useDecisions({}, open);
  const navigate = useNavigate();
  const total = summary.data?.total ?? 0;

  const groups = useMemo(() => {
    const items = (list.data?.pages[0]?.items ?? []).slice(0, RECENT);
    const m = new Map<DecisionKind, Decision[]>();
    for (const d of items) m.set(d.kind, [...(m.get(d.kind) ?? []), d]);
    const counts = new Map<DecisionKind, number>();
    for (const g of summary.data?.groups ?? []) counts.set(g.kind, (counts.get(g.kind) ?? 0) + g.count);
    return [...m.entries()].map(([kind, ds]) => ({ kind, items: ds, count: counts.get(kind) ?? ds.length }));
  }, [list.data, summary.data]);

  const go = (to: string) => {
    setOpen(false);
    navigate(to);
  };

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="ghost"
          size="icon"
          className="relative h-8 w-8"
          aria-label={total ? `待处理 ${total} 项` : "待处理"}
          title={total ? `待处理 ${total} 项` : "待处理"}
        >
          <Bell className="h-4 w-4" />
          {total ? (
            <span className="absolute -top-0.5 -right-0.5 min-w-4 rounded-full bg-warning px-1 text-center text-micro leading-4 font-semibold text-background tabular-nums">
              {total > 99 ? "99+" : total}
            </span>
          ) : null}
        </Button>
      </PopoverTrigger>
      <PopoverContent align="end" className="w-[min(22rem,calc(100vw-2rem))] p-0">
        <div className="flex items-center justify-between border-b border-border/60 px-4 py-3">
          <p className="text-sm font-semibold text-foreground">
            待处理
            {total ? <span className="ml-1.5 text-warning tabular-nums">{total}</span> : null}
          </p>
          <button
            type="button"
            onClick={() => go(inboxPath())}
            className="inline-flex cursor-pointer items-center gap-1 text-meta text-muted-foreground hover:text-foreground"
          >
            查看全部
            <ArrowRight className="h-3.5 w-3.5" />
          </button>
        </div>
        {list.isPending ? (
          <p className="px-4 py-6 text-center text-caption text-muted-foreground">加载中…</p>
        ) : list.isError ? (
          <p className="px-4 py-6 text-center text-caption text-destructive">加载失败,稍后再试</p>
        ) : groups.length === 0 ? (
          <div className="flex flex-col items-center gap-2 px-4 py-8 text-caption text-muted-foreground">
            <CheckCheck className="h-5 w-5" />
            没有需要处理的事项
          </div>
        ) : (
          <div className="max-h-[60vh] overflow-y-auto py-1">
            {groups.map((g) => (
              <section key={g.kind} className="py-1">
                <button
                  type="button"
                  onClick={() => go(inboxPath(g.kind))}
                  className="flex w-full cursor-pointer items-center justify-between px-4 py-1 text-meta font-medium text-muted-foreground hover:text-foreground"
                >
                  <span>{decisionKindLabel(g.kind)}</span>
                  <span className="tabular-nums">{g.count}</span>
                </button>
                <ul>
                  {g.items.map((d) => (
                    <li key={d.id}>
                      <Link
                        to={inboxPath(d.kind)}
                        onClick={() => setOpen(false)}
                        className="flex items-start gap-2.5 px-4 py-2 hover:bg-foreground/[0.04]"
                      >
                        <span aria-hidden className={cn("mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full", DOT[d.severity])} />
                        <span className="min-w-0 flex-1">
                          <span className="line-clamp-2 text-caption text-foreground">{d.title}</span>
                          <span className="text-meta text-muted-foreground">
                            {SEVERITY[d.severity].label} · {formatRelative(d.createdAt)}
                          </span>
                        </span>
                      </Link>
                    </li>
                  ))}
                </ul>
              </section>
            ))}
          </div>
        )}
      </PopoverContent>
    </Popover>
  );
}