feat(ux): Tier 3 security-adjacent UX (presentational only)

- secrets: revealed value gets a copy-to-clipboard with feedback,
  auto re-hides after 30s, re-hides on window blur, and the timer is
  cleared on unmount (no change to revealSecret or RLS)
- permissions matrix: a view-only notice when the viewer is not admin,
  and a per-checkbox aria-label so the grid is usable non-visually
- OpsAclEditor: pills are now aria-pressed toggles with a visible
  check when selected and a success toast on save

No server action, RLS, or permission logic changed.
This commit is contained in:
Moheeb Zara
2026-05-16 14:13:11 -07:00
parent a1ea92a71c
commit b7461f07fd
3 changed files with 63 additions and 5 deletions
+6 -1
View File
@@ -2,6 +2,7 @@
import { useState } from 'react'
import { toast } from 'sonner'
import { Check } from 'lucide-react'
import { setOpsAcl } from '@/lib/actions'
export interface AclRoleOption { value: string; label: string }
@@ -37,6 +38,8 @@ export function OpsAclEditor({ entityType, entityId, options, initial }: Props)
else back.add(value)
return back
})
} else {
toast.success('Access updated')
}
}
@@ -55,11 +58,13 @@ export function OpsAclEditor({ entityType, entityId, options, initial }: Props)
<button
key={o.value}
type="button"
aria-pressed={on}
onClick={() => toggle(o.value, !on)}
className={`flex items-center font-mono text-[10px] px-3 py-2 min-h-[44px] rounded border transition ${
className={`flex items-center gap-1 font-mono text-[10px] px-3 py-2 min-h-[44px] rounded border transition ${
on ? 'bg-primary/10 text-primary border-primary/30' : 'border-border text-muted-foreground hover:border-primary hover:text-primary'
}`}
>
{on && <Check className="w-3 h-3" />}
{o.label}
</button>
)