1import { type EnvironmentId, sessionGrantsScope } from "@t3tools/contracts";
2import { AUTH_SCOPE_OPTIONS } from "@t3tools/shared/authScopeOptions";
3import { useEnvironmentSessionState } from "~/state/session";
4
5export function SessionPermissions({
6 environmentId,
7 connected,
8 routeContext = false,
9}: {
10 readonly environmentId: EnvironmentId;
11 readonly connected: boolean;
12 readonly routeContext?: boolean;
13}) {
14 const session = useEnvironmentSessionState(environmentId);
15 return connected && !session.hasError && !session.isPending && session.data?.authenticated ? (
16 <div className="space-y-3 py-3 text-xs">
17 <p className="text-muted-foreground">
18 {routeContext
19 ? "These permissions apply to your active route. Other routes may have different permissions."
20 : "These permissions apply to this client’s current connection."}
21 </p>
22 <ul className="grid gap-x-6 gap-y-2 sm:grid-cols-2">
23 {AUTH_SCOPE_OPTIONS.map(({ scope, title }) => (
24 <li key={scope} className="flex items-start justify-between gap-3">
25 <span>{title}</span>
26 <span className="shrink-0 text-muted-foreground">
27 {sessionGrantsScope(session.data!, scope) ? "Allowed" : "Not granted"}
28 </span>
29 </li>
30 ))}
31 </ul>
32 </div>
33 ) : (
34 <p className="py-3 text-xs text-muted-foreground">
35 Permissions not checked. Connect to this environment to view this session’s permissions.
36 </p>
37 );
38}