Scoped context

ScopeChips.tsxChips for the working set, the pages they resolve to, and the paths the viewer's own permissions keep out. The denied list is a required prop.Copy

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

/** One thing in the working set: a page, a project, a dataset. It carries
 *  the pages it resolves to, so the list below the chips is computed rather
 *  than asserted. */
export type ScopeItem = {
  id: string;
  label: string;
  pages: string[];
};

type Props = {
  scope: ScopeItem[];
  /** Which item is where the viewer is sitting. It is the default scope and
   *  the one chip that reads as the page itself. */
  here?: string;
  /** Paths inside the scope the viewer's own permissions exclude. Required,
   *  even when empty: scope is bounded by permission, and a component that
   *  cannot say so leaves two colleagues arguing over different answers. */
  denied: string[];
  onRemove: (id: string) => void;
  onAdd: () => void;
  /** How many in-scope pages to name before collapsing to a count. */
  listed?: number;
};

export function ScopeChips({ scope, here, denied, onRemove, onAdd, listed = 3 }: Props) {
  const pages = scope.flatMap((s) => s.pages);
  const rest = pages.length - listed;

  return (
    <div>
      <div className="flex flex-wrap items-center gap-2">
        <span className="text-[11px] text-muted-foreground">seeing</span>
        {scope.map((s) => {
          const isHere = s.id === here;
          return (
            <Badge
              key={s.id}
              variant="outline"
              className={cn("gap-2 rounded-full py-1 font-normal", isHere && "border-chart-1 bg-chart-1/10 text-chart-1")}
              title={isHere ? s.pages[0] : `${s.pages.length} pages`}
            >
              {isHere ? "this page" : s.label}
              <button
                type="button"
                onClick={() => onRemove(s.id)}
                className={cn("leading-none", !isHere && "text-muted-foreground")}
                aria-label={`remove ${s.label} from scope`}
              >
                ×
              </button>
            </Badge>
          );
        })}
        {/* Widening is one click, here, rather than a trip to settings. */}
        <Button variant="outline" size="sm" className="h-7 rounded-full px-2.5 text-[11px] text-muted-foreground" onClick={onAdd} aria-label="add to scope">
          +
        </Button>
      </div>

      <div className="mt-4 grid grid-cols-2 gap-5">
        <div className="rounded-lg border border-dashed p-3">
          <p className="text-[11px] uppercase tracking-wide text-muted-foreground">In scope</p>
          <ul className="mt-2 text-[11px] text-card-foreground">
            {pages.slice(0, listed).map((p) => <li key={p} className="py-1">{p}</li>)}
            {rest > 0 && <li className="py-1 text-muted-foreground">{rest} more {rest === 1 ? "page" : "pages"}</li>}
          </ul>
        </div>
        <div className="rounded-lg border border-dashed p-3">
          <p className="text-[11px] uppercase tracking-wide text-muted-foreground">Out of scope</p>
          {denied.length ? (
            <ul className="mt-2 text-[11px] text-status-warn">
              {denied.map((d) => <li key={d} className="py-1">{d}, no permission</li>)}
            </ul>
          ) : (
            <p className="mt-2 text-[11px] text-muted-foreground">nothing you can open is excluded</p>
          )}
        </div>
      </div>
    </div>
  );
}

demo.tsxHow it is called: the open page plus a sixteen-page project, with one folder the viewer cannot read. Remove drops a chip; add appends one.Copy

import { useState } from "react";
import { ScopeChips, type ScopeItem } from "./ScopeChips";

/**
 * The viewer is on the Q3 forecast page and has added the Rivera project,
 * sixteen pages of it. The finance folder is in the project, and this viewer
 * cannot read it.
 */
const START: ScopeItem[] = [
  { id: "page:q3-forecast", label: "Q3 forecast", pages: ["Q3 forecast"] },
  {
    id: "project:rivera",
    label: "Rivera project",
    pages: ["Rivera brief", "meeting notes, Aug", ...Array.from({ length: 14 }, (_, i) => `Rivera page ${i + 1}`)],
  },
];

export default function Demo() {
  const [scope, setScope] = useState(START);
  return (
    <div className="rounded-lg border bg-card p-4">
      <ScopeChips
        scope={scope}
        here="page:q3-forecast"
        denied={["finance/"]}
        onRemove={(id) => setScope(scope.filter((s) => s.id !== id))}
        onAdd={() => setScope([...scope, { id: "page:figures", label: "figures spreadsheet", pages: ["figures spreadsheet"] }])}
      />
    </div>
  );
}