All files / src/features/sorting TriageUndoNotice.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
3x
 
 
 
 
 
 
 
 
 
 
35x
 
35x
 
16x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
"use client";
 
import { useTriageUndo } from "./TriageUndoProvider";
 
// The persistent inline undo notice. Rendered OUTSIDE the triage page's
// `{!item ? <EmptyState/> : …}` ternary (right after the header) so it survives
// item === null — i.e. when the curator sets aside the LAST untriaged item and
// the queue empties, the "Bring back" affordance is still here. role="status"
// announces the set-aside; the decorative "·" is hidden from screen readers so
// they don't read "middle dot".
export function TriageUndoNotice() {
  const { undo, error, bringBack } = useTriageUndo();
 
  if (!undo && !error) return null;
 
  return (
    <div className="flex flex-col items-start gap-2">
      {undo && (
        <p role="status" className="text-sm text-ink-soft">
          Set aside —{" "}
          {undo.name ? <span className="text-ink">{undo.name}</span> : "this one"}{" "}
          <span aria-hidden="true">·</span>{" "}
          <button
            type="button"
            onClick={bringBack}
            className="font-medium text-primary underline underline-offset-2 hover:text-primary-hover focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary rounded-xs"
          >
            Bring back
          </button>
        </p>
      )}
      {error && (
        <span role="status" className="text-sm text-ink-soft">
          {error}
        </span>
      )}
    </div>
  );
}