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

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

Drop the lock entry from the table header actions. A locked table now announces
itself once on open via an info toast carrying the Lock settings action for
admins; the breadcrumb dropdown remains the permanent entry point.

* fix(tables): wait for permissions before announcing table locks

The lock announcement fires once per table, so a canAdmin that is still false
because permissions have not resolved permanently drops the toast's Lock
settings action. Arm the one-shot on the permissions decision rather than on
table resolution.

* fix(tables): keep the lock announcement from being swept on navigation

The toast provider clears route-scoped toasts in a pathname effect that runs
after child effects, so an announcement fired on a warm-cache navigation was
added and removed in the same commit. Opt these toasts out of the sweep and
dismiss them on unmount so they still don't trail the user.

* fix(tables): drop the lock notice when its action stops being valid

A toast's action is captured at creation, so a viewer whose admin access is
revoked while the announcement is on screen kept a Lock settings button that
opened nothing. Dismiss the notice when the action is no longer available.

* fix(tables): only drop the lock notice when access is actually lost

The dismiss effect treated "has no access" the same as "just lost access", so
on a warm-cache mount — where the announcement and the dismiss both run in the
mount commit — a non-admin's notice was torn down the moment it was created.
Dismiss on the true-to-false transition only.

* fix(tables): clear the lock notice when switching tables

Switching tables reuses this component rather than remounting it, and the
notice is exempt from the provider's route sweep, so a locked table's
announcement stayed on screen over the next table — where its action would
have opened that table's lock settings instead. Key the cleanup on tableId.

* fix(emcn): sweep route-scoped toasts during render, not after child effects

The provider cleared route-scoped toasts from a pathname effect. Effects run
child-first, so it also swept toasts the newly rendered route had just raised:
any toast added from a child's mount effect — which is what happens whenever
that child's data is already cached — was appended and filtered out in the same
commit, before it painted.

Move the sweep into render, where it runs before children render, so only
toasts predating the navigation are cleared. Timers and heights were already
reconciled by effects keyed off `toasts`, so this stays a pure state update.

Drops the persistAcrossRoutes workaround the table lock notice needed to dodge
the bug; its tableId-keyed cleanup stays, covering embedded swaps that change
the prop without a route change.

* fix(tables): reset the announce latch when leaving a table

The tableId cleanup dismissed the notice on departure but left the latch
holding that table's id, so returning before another table announced — a quick
there-and-back, or a second table that never loaded — found the latch matching
and stayed silent. Leaving ends the visit, so clear the latch with it.

Author: TheodoreSpeaks

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))