refactor(tables): rename frozen columns to pinned, fix sticky-zone UX

- rename frozenColumns → pinnedColumns across types, contract, undo
  actions, grid state/refs/props, and dropdown labels
- add Pin / PinOff emcn icons; use them in the column menu in place of
  Lock / Unlock
- pinned body cells render at z-[6], above the cell selection border
  (z-[5]), so the blue selection border can't draw on top of the
  sticky-left zone
- restrict column drag-reorder to within the pinned or unpinned zone in
  both handleColumnDragOver and handleScrollDragOver; cross-zone drop
  indicators are suppressed
- on unpin, slide the column to the first unpinned slot so the sticky
  zone stays contiguous; consolidates pin and unpin into one branch
  that always re-enforces pinned-at-front

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: TheodoreSpeaks

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/data-row.tsx

@@ -57,10 +57,10 @@ export interface DataRowProps {
    * queued indicators across page refresh during long Run-all dispatches.
    */
   activeDispatches: ActiveDispatch[] | undefined
-  /** Pixel `left` value for each frozen column key; absent keys are not frozen. */
-  frozenOffsets?: Map<string, number>
-  /** Key of the rightmost frozen column, used to render a separator shadow. */
-  lastFrozenColKey?: string | null
+  /** Pixel `left` value for each pinned column key; absent keys are not pinned. */
+  pinnedOffsets?: Map<string, number>
+  /** Key of the rightmost pinned column, used to render a separator shadow. */
+  lastPinnedColKey?: string | null
 }
 
 function cellRangeRowChanged(
@@ -118,8 +118,8 @@ function dataRowPropsAreEqual(prev: DataRowProps, next: DataRowProps): boolean {
     prev.onRunRow !== next.onRunRow ||
     prev.workflowGroups !== next.workflowGroups ||
     prev.activeDispatches !== next.activeDispatches ||
-    prev.frozenOffsets !== next.frozenOffsets ||
-    prev.lastFrozenColKey !== next.lastFrozenColKey
+    prev.pinnedOffsets !== next.pinnedOffsets ||
+    prev.lastPinnedColKey !== next.lastPinnedColKey
   ) {
     return false
   }
@@ -163,8 +163,8 @@ export const DataRow = React.memo(function DataRow({
   onRunRow,
   workflowGroups,
   activeDispatches,
-  frozenOffsets,
-  lastFrozenColKey,
+  pinnedOffsets,
+  lastPinnedColKey,
 }: DataRowProps) {
   const sel = normalizedSelection
   /**
@@ -272,9 +272,9 @@ export const DataRow = React.memo(function DataRow({
         const isLeftEdge = inRange ? colIndex === sel!.startCol : colIndex === 0
         const isRightEdge = inRange ? colIndex === sel!.endCol : colIndex === columns.length - 1
 
-        const frozenLeft = frozenOffsets?.get(column.key)
-        const isFrozenCell = frozenLeft !== undefined
-        const isFrozenSeparator = column.key === lastFrozenColKey
+        const pinnedLeft = pinnedOffsets?.get(column.key)
+        const isPinnedCell = pinnedLeft !== undefined
+        const isPinnedSeparator = column.key === lastPinnedColKey
 
         return (
           <td
@@ -285,10 +285,10 @@ export const DataRow = React.memo(function DataRow({
             className={cn(
               CELL,
               (isHighlighted || isAnchor || isEditing) && 'relative',
-              isFrozenCell && 'z-[5] bg-[var(--bg)]',
-              isFrozenSeparator && '[box-shadow:2px_0_0_0_var(--border)]'
+              isPinnedCell && 'z-[6] bg-[var(--bg)]',
+              isPinnedSeparator && '[box-shadow:2px_0_0_0_var(--border)]'
             )}
-            style={isFrozenCell ? { position: 'sticky', left: frozenLeft } : undefined}
+            style={isPinnedCell ? { position: 'sticky', left: pinnedLeft } : undefined}
             onMouseDown={(e) => {
               if (e.button !== 0 || isEditing) return
               onCellMouseDown(rowIndex, colIndex, e.shiftKey)

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/column-header-menu.tsx

@@ -41,14 +41,14 @@ interface ColumnHeaderMenuProps {
   /** Opens a popup preview of the column's underlying workflow. Surfaced in
    *  the chevron menu for workflow-output columns. */
   onViewWorkflow?: (workflowId: string) => void
-  /** Whether this column is currently frozen (pinned to the left). */
-  isFrozen?: boolean
-  /** Toggle the frozen state for this column. */
-  onFreezeToggle?: (columnName: string) => void
-  /** Left offset in pixels when frozen (drives `position: sticky`). */
+  /** Whether this column is currently pinned to the left. */
+  isPinned?: boolean
+  /** Toggle the pinned state for this column. */
+  onPinToggle?: (columnName: string) => void
+  /** Left offset in pixels when pinned (drives `position: sticky`). */
   stickyLeft?: number
-  /** Whether this is the rightmost frozen column (renders a separator shadow). */
-  isLastFrozen?: boolean
+  /** Whether this is the rightmost pinned column (renders a separator shadow). */
+  isLastPinned?: boolean
 }
 
 /**
@@ -83,10 +83,10 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
   sourceInfo,
   onOpenConfig,
   onViewWorkflow,
-  isFrozen,
-  onFreezeToggle,
+  isPinned,
+  onPinToggle,
   stickyLeft,
-  isLastFrozen,
+  isLastPinned,
 }: ColumnHeaderMenuProps) {
   const renameInputRef = useRef<HTMLInputElement>(null)
   const didDragRef = useRef(false)
@@ -242,7 +242,7 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
       className={cn(
         'group relative border-[var(--border)] border-r border-b bg-[var(--bg)] p-0 text-left align-middle',
         stickyLeft !== undefined && 'z-[11]',
-        isLastFrozen && '[box-shadow:2px_0_0_0_var(--border)]'
+        isLastPinned && '[box-shadow:2px_0_0_0_var(--border)]'
       )}
       style={stickyLeft !== undefined ? { position: 'sticky', left: stickyLeft } : undefined}
       draggable={!readOnly && !isRenaming}
@@ -332,8 +332,8 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
             onViewWorkflow={
               onViewWorkflow && ownGroup ? () => onViewWorkflow(ownGroup.workflowId) : undefined
             }
-            isFrozen={isFrozen}
-            onFreezeToggle={onFreezeToggle}
+            isPinned={isPinned}
+            onPinToggle={onPinToggle}
           />
         </div>
       )}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/workflow-group-meta-cell.tsx

@@ -17,11 +17,11 @@ import {
   ArrowRight,
   Eye,
   EyeOff,
-  Lock,
   Pencil,
+  Pin,
+  PinOff,
   PlayOutline,
   Trash,
-  Unlock,
 } from '@/components/emcn/icons'
 import type { RunLimit, RunMode } from '@/lib/api/contracts/tables'
 import { cn } from '@/lib/core/utils/cn'
@@ -69,10 +69,10 @@ interface ColumnOptionsMenuProps {
   /** When set, the menu surfaces a "View workflow" item that opens a popup
    *  preview of the configured workflow. */
   onViewWorkflow?: () => void
-  /** Whether this column is currently frozen (pinned to the left). */
-  isFrozen?: boolean
-  /** Toggle the frozen state of this column. */
-  onFreezeToggle?: (columnName: string) => void
+  /** Whether this column is currently pinned to the left. */
+  isPinned?: boolean
+  /** Toggle the pinned state of this column. */
+  onPinToggle?: (columnName: string) => void
 }
 
 /**
@@ -99,8 +99,8 @@ export function ColumnOptionsMenu({
   onRunColumnSelected,
   selectedRowCount = 0,
   onViewWorkflow,
-  isFrozen,
-  onFreezeToggle,
+  isPinned,
+  onPinToggle,
 }: ColumnOptionsMenuProps) {
   const showRunActions = Boolean(onRunColumnAll && onRunColumnIncomplete)
   const showRunSelected = Boolean(onRunColumnSelected) && selectedRowCount > 0
@@ -167,10 +167,10 @@ export function ColumnOptionsMenu({
           <Pencil />
           Edit column
         </DropdownMenuItem>
-        {onFreezeToggle && (
-          <DropdownMenuItem onSelect={() => onFreezeToggle(column.name)}>
-            {isFrozen ? <Unlock /> : <Lock />}
-            {isFrozen ? 'Unfreeze column' : 'Freeze column'}
+        {onPinToggle && (
+          <DropdownMenuItem onSelect={() => onPinToggle(column.name)}>
+            {isPinned ? <PinOff /> : <Pin />}
+            {isPinned ? 'Unpin column' : 'Pin column'}
           </DropdownMenuItem>
         )}
         <DropdownMenuSeparator />
@@ -233,14 +233,14 @@ interface WorkflowGroupMetaCellProps {
   onDragEnd?: () => void
   onDragLeave?: () => void
   readOnly?: boolean
-  /** Left offset in pixels when frozen (drives `position: sticky`). */
+  /** Left offset in pixels when pinned (drives `position: sticky`). */
   stickyLeft?: number
-  /** Whether this is the rightmost frozen column group (renders a separator shadow). */
-  isLastFrozen?: boolean
-  /** Whether this column group is currently frozen (pinned to the left). */
-  isFrozen?: boolean
-  /** Toggle the frozen state for this column group. */
-  onFreezeToggle?: (columnName: string) => void
+  /** Whether this is the rightmost pinned column group (renders a separator shadow). */
+  isLastPinned?: boolean
+  /** Whether this column group is currently pinned to the left. */
+  isPinned?: boolean
+  /** Toggle the pinned state for this column group. */
+  onPinToggle?: (columnName: string) => void
 }
 
 /**
@@ -275,9 +275,9 @@ export function WorkflowGroupMetaCell({
   onDragLeave,
   readOnly,
   stickyLeft,
-  isLastFrozen,
-  isFrozen,
-  onFreezeToggle,
+  isLastPinned,
+  isPinned,
+  onPinToggle,
 }: WorkflowGroupMetaCellProps) {
   const isEnrichment = groupType === 'enrichment'
   const enrichment = isEnrichment ? getEnrichment(enrichmentId) : undefined
@@ -400,7 +400,7 @@ export function WorkflowGroupMetaCell({
       className={cn(
         'group relative cursor-pointer border-[var(--border)] border-r border-b bg-[var(--bg)] px-2 py-[5px] text-left align-middle before:pointer-events-none before:absolute before:top-0 before:bottom-0 before:left-[-1px] before:w-px before:bg-[var(--border)] before:content-[""]',
         stickyLeft !== undefined && 'z-[11]',
-        isLastFrozen && '[box-shadow:2px_0_0_0_var(--border)]'
+        isLastPinned && '[box-shadow:2px_0_0_0_var(--border)]'
       )}
       style={stickyLeft !== undefined ? { position: 'sticky', left: stickyLeft } : undefined}
     >
@@ -488,8 +488,8 @@ export function WorkflowGroupMetaCell({
           onRunColumnSelected={onRunColumn && selectedCount > 0 ? handleRunSelected : undefined}
           selectedRowCount={selectedCount}
           onViewWorkflow={onViewWorkflow ? () => onViewWorkflow(workflowId) : undefined}
-          isFrozen={isFrozen}
-          onFreezeToggle={onFreezeToggle}
+          isPinned={isPinned}
+          onPinToggle={onPinToggle}
         />
       )}
     </th>