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 { EmptyState, ErrorState, LoadingState } from "~/components/console/empty-state.tsx";
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):待处理不进侧栏,铃铛 + 未决角标;下拉按问题类型列最近事项,点开进待处理页。
// 角标只算需要你处理的事项(警告及以上):"仅信息"类(巡检报告、旧版本待处置等)不计入,在待处理页可展开查看。
// 身份类事项已按来源 + 标题合并,一条事项可能代表多条资源(标题里写明 N 条)。

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(undefined, "warning");
}

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({ minSeverity: "warning" }, 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="outline"
          size="icon-sm"
          className="relative"
          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-primary px-1 text-center text-micro leading-4 font-semibold text-primary-foreground tabular-nums">
              {total > 99 ? "99+" : total}
            </span>
          ) : null}
        </Button>
      </PopoverTrigger>
      <PopoverContent
        align="end"
        sideOffset={8}
        collisionPadding={16}
        aria-label="待处理事项"
        className="pg-float-solid flex max-h-[var(--radix-popover-content-available-height)] w-[min(22rem,calc(100vw-2rem))] flex-col overflow-hidden p-2"
      >
        <div className="flex shrink-0 items-center justify-between gap-3 border-b border-border px-2 pt-1 pb-2">
          <p className="text-sm font-semibold text-foreground">
            待处理
            {total ? <span className="ml-1.5 font-normal text-muted-foreground tabular-nums">{total}</span> : null}
          </p>
          <Button variant="ghost" size="xs" onClick={() => go(inboxPath())}>
            查看全部
            <ArrowRight />
          </Button>
        </div>
        {list.isPending ? (
          <LoadingState className="px-4 py-6" />
        ) : list.isError ? (
          <ErrorState plain error="稍后再试" className="py-8" />
        ) : groups.length === 0 ? (
          <EmptyState plain icon={CheckCheck} title="没有需要处理的事项" className="py-8" />
        ) : (
          <div className="min-h-0 overflow-y-auto overscroll-contain pt-1">
            {groups.map((g) => (
              <section key={g.kind} className="pt-1">
                <button
                  type="button"
                  onClick={() => go(inboxPath(g.kind))}
                  className="flex w-full cursor-pointer items-center justify-between gap-2 rounded-lg px-2 py-1.5 text-label font-semibold tracking-[0.18em] text-muted-foreground uppercase outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50"
                >
                  <span>{decisionKindLabel(g.kind)}</span>
                  <span className="tracking-normal tabular-nums">{g.count}</span>
                </button>
                <ul>
                  {g.items.map((d) => (
                    <li key={d.id}>
                      <Link
                        to={inboxPath(d.kind)}
                        onClick={() => setOpen(false)}
                        className="block rounded-lg px-2 py-2 outline-none transition-colors hover:bg-foreground/[0.06] focus-visible:bg-foreground/[0.06] focus-visible:ring-2 focus-visible:ring-ring/50"
                      >
                        <span className="line-clamp-2 text-body break-words text-foreground">{d.title}</span>
                        <span className="mt-0.5 flex items-center gap-1.5 text-meta text-muted-foreground">
                          <span aria-hidden className={cn("h-1.5 w-1.5 shrink-0 rounded-full", DOT[d.severity])} />
                          {SEVERITY[d.severity].label} · {formatRelative(d.createdAt)}
                        </span>
                      </Link>
                    </li>
                  ))}
                </ul>
              </section>
            ))}
          </div>
        )}
      </PopoverContent>
    </Popover>
  );
}