improvement(tables): announce locks on open instead of a header chip

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/lock-copy.ts

@@ -1,6 +1,6 @@
 /**
- * Single source of truth for lock vocabulary shared by the lock settings modal,
- * the blocked-action toast, and the table header chip. Kept out of
+ * Single source of truth for lock vocabulary shared by the lock settings modal
+ * and the lock toasts (the on-open announcement and blocked actions). Kept out of
  * `lib/table/mutation-locks.ts` — that module is server-tainted (importing it
  * from a client component pulls `next/headers` into the browser bundle).
  */
@@ -76,8 +76,8 @@ export function describeLocks(locks: TableLocks): { name: string; detail: string
 
 /**
  * Why a locked-table notice was raised. `'status'` is the informational case
- * (a non-admin clicking the header lock chip); the rest are actions the user
- * just tried and couldn't do.
+ * (the announcement shown once when a locked table is opened); the rest are
+ * actions the user just tried and couldn't do.
  */
 export type BlockedTableAction = 'add-row' | 'add-column' | 'delete-column' | 'edit-cell' | 'status'
 

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/table.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useMemo, useReducer, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react'
 import { Chip, ChipConfirmModal, toast } from '@sim/emcn'
 import { Download, Lock, Pencil, Table as TableIcon, Trash, Upload } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
@@ -61,12 +61,7 @@ import {
 import { COLUMN_SIDEBAR_WIDTH } from './components/table-grid/constants'
 import { COLUMN_TYPE_ICONS } from './components/table-grid/headers'
 import { useTable, useTableEventStream } from './hooks'
-import {
- type BlockedTableAction,
- describeBlockedAction,
- describeLocks,
- lockedNouns,
-} from './lock-copy'
+import { type BlockedTableAction, describeBlockedAction, lockedNouns } from './lock-copy'
 import {
  DEFAULT_TABLE_DETAIL_SORT_DIRECTION,
  tableDetailParsers,
@@ -627,7 +622,10 @@ export function Table({
  if (!tableData) return
  if (blockedToastIdRef.current) toast.dismiss(blockedToastIdRef.current)
  const { title, text } = describeBlockedAction(action, tableData.locks)
- blockedToastIdRef.current = toast.warning(title, {
+ // 'status' is the on-open announcement — nothing was refused, so it reads
+ // as information rather than a warning.
+ const notify = action === 'status' ? toast.info : toast.warning
+ blockedToastIdRef.current = notify(title, {
  description: text,
  ...(canOpenLockSettings
  ? {
@@ -641,23 +639,48 @@ export function Table({
  [tableData, canOpenLockSettings]
  )
 
+ // Announce the lock state once per table on open. Unlike the re-rendering
+ // permission gates, this fires once and can't self-correct, so it waits for
+ // `canAdmin` to settle instead of treating loading as permitted.
+ const announcedLockTableIdRef = useRef<string | null>(null)
+ useEffect(() => {
+ if (!tableData || userPermissions.isLoading) return
+ if (announcedLockTableIdRef.current === tableData.id) return
+ announcedLockTableIdRef.current = tableData.id
+ if (lockedNouns(tableData.locks).length === 0) return
+ showBlockedToast('status')
+ }, [tableData, userPermissions.isLoading, showBlockedToast])
+
+ // A notice must not outlive the table it describes — its action targets
+ // whichever table is current. Keyed on `tableId` so an embedded swap that
+ // changes the prop without a route change is covered too. Leaving ends the
+ // visit, so the latch resets and coming back announces again.
+ useEffect(
+ () => () => {
+ announcedLockTableIdRef.current = null
+ if (!blockedToastIdRef.current) return
+ toast.dismiss(blockedToastIdRef.current)
+ blockedToastIdRef.current = null
+ },
+ [tableId]
+ )
+
+ // A toast's action is captured when it is created, so a viewer who loses
+ // admin access mid-toast would keep a Lock settings button that opens
+ // nothing. Dismiss on that transition only — a viewer who never had access
+ // has a legitimate action-less notice that must survive.
+ const couldOpenLockSettingsRef = useRef(canOpenLockSettings)
+ useEffect(() => {
+ const lostAccess = couldOpenLockSettingsRef.current && !canOpenLockSettings
+ couldOpenLockSettingsRef.current = canOpenLockSettings
+ if (!lostAccess || !blockedToastIdRef.current) return
+ toast.dismiss(blockedToastIdRef.current)
+ blockedToastIdRef.current = null
+ }, [canOpenLockSettings])
+
  const headerActions = useMemo(() => {
  if (!tableData) return undefined
- // Header space is for state, not for settings: the chip appears only once
- // something is actually locked, and names the mode so it reads at a glance.
- // Reaching the panel on an unlocked table is the dropdown's job.
- const anyLocked = lockedNouns(tableData.locks).length > 0
  return [
- ...(anyLocked
- ? [
- {
- label: describeLocks(tableData.locks).name,
- icon: Lock,
- onClick: () =>
- userPermissions.canAdmin ? setShowLockSettings(true) : showBlockedToast('status'),
- },
- ]
- : []),
  {
  label: 'Import CSV',
  icon: Upload,
@@ -673,14 +696,7 @@ export function Table({
  disabled: tableData.rowCount === 0,
  },
  ]
- }, [
- tableData,
- userPermissions.canEdit,
- userPermissions.canAdmin,
- handleExportCsv,
- onRequestImportCsv,
- showBlockedToast,
- ])
+ }, [tableData, userPermissions.canEdit, handleExportCsv, onRequestImportCsv])
 
  // Adding a column is a schema change. The trigger stays visible when the
  // table is schema-locked and explains itself instead of disappearing.

packages/emcn/src/components/toast/toast.tsx

@@ -396,6 +396,29 @@ export function ToastProvider({ children }: { children?: ReactNode }) {
  const [mounted, setMounted] = useState(false)
  const timersRef = useRef(new Map<string, ReturnType<typeof setTimeout>>())
 
+ /**
+ * Clear the previous route's toasts when the route changes. Toasts flagged
+ * `persistAcrossRoutes` — global, ongoing-state notifications like the
+ * connection status — survive; page-scoped ones do not.
+ *
+ * Done during render rather than in an effect. Effects run child-first, so an
+ * effect here would also sweep toasts the newly rendered route just raised: a
+ * toast added from a child's mount effect — which is what happens whenever
+ * that child's data is already cached — would be appended and filtered out in
+ * the same commit, before it ever painted. Adjusting state during render runs
+ * before children render, so only toasts predating the navigation are cleared.
+ *
+ * Stays a pure state update: orphaned timers and measured heights are already
+ * reconciled by the effects below, which key off `toasts`.
+ */
+ const [sweptPathname, setSweptPathname] = useState(pathname)
+ if (pathname !== sweptPathname) {
+ setSweptPathname(pathname)
+ setToasts((prev) =>
+ prev.some((t) => !t.persistAcrossRoutes) ? prev.filter((t) => t.persistAcrossRoutes) : prev
+ )
+ }
+
  useEffect(() => {
  setMounted(true)
  }, [])
@@ -459,27 +482,6 @@ export function ToastProvider({ children }: { children?: ReactNode }) {
  setHeights({})
  }, [])
 
- /**
- * Clear only route-scoped toasts. Toasts flagged `persistAcrossRoutes` —
- * global, ongoing-state notifications like the connection status — survive,
- * everything else (page-scoped notifications) is cleared on navigation.
- */
- const dismissRouteScopedToasts = useCallback(() => {
- setToasts((prev) => {
- const kept = prev.filter((t) => t.persistAcrossRoutes)
- if (kept.length === prev.length) return prev
- for (const t of prev) {
- if (t.persistAcrossRoutes) continue
- const timer = timersRef.current.get(t.id)
- if (timer) {
- clearTimeout(timer)
- timersRef.current.delete(t.id)
- }
- }
- return kept
- })
- }, [])
-
  const measureToast = useCallback((id: string, height: number) => {
  setHeights((prev) => (prev[id] === height ? prev : { ...prev, [id]: height }))
  }, [])
@@ -536,11 +538,6 @@ export function ToastProvider({ children }: { children?: ReactNode }) {
  }
  }, [])
 
- /** On navigation, clear route-scoped toasts so they don't trail the user; `persistAcrossRoutes` toasts survive. */
- useEffect(() => {
- dismissRouteScopedToasts()
- }, [pathname, dismissRouteScopedToasts])
-
  /** Held in a ref (seeded once from the stable `addToast`) so the module-level `toast` binds to the live provider. */
  const toastFn = useRef<ToastFn>(createToastFn(addToast))