cleanup: effect, emcn tokens, mutation error handling

- Replace selection-pruning useEffect with inline state adjustment during render
- Fix drag overlay using invalid --accent HSL token → --brand-secondary; z-50 → z-[var(--z-dropdown)]
- Move static inline styles on context menu trigger div to className
- Add missing onError toast to useUpdateWorkspaceFileFolder, useRestoreWorkspaceFileFolder, useRestoreWorkspaceFile

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/files/components/file-row-context-menu/file-row-context-menu.tsx

@@ -52,14 +52,8 @@ export const FileRowContextMenu = memo(function FileRowContextMenu({
     <DropdownMenu open={isOpen} onOpenChange={(open) => !open && onClose()} modal={false}>
       <DropdownMenuTrigger asChild>
         <div
-          style={{
-            position: 'fixed',
-            left: `${position.x}px`,
-            top: `${position.y}px`,
-            width: '1px',
-            height: '1px',
-            pointerEvents: 'none',
-          }}
+          className='pointer-events-none fixed h-px w-px'
+          style={{ left: `${position.x}px`, top: `${position.y}px` }}
           tabIndex={-1}
           aria-hidden
         />

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx

@@ -631,7 +631,7 @@ const STATIC_MARKDOWN_COMPONENTS = {
     </div>
   ),
   thead: ({ children }: { children?: React.ReactNode }) => (
-    <thead className='bg-[var(--surface-2)]'>{children}</thead>
+    <thead className='bg-[var(--surface-3)]'>{children}</thead>
   ),
   tbody: ({ children }: { children?: React.ReactNode }) => <tbody>{children}</tbody>,
   tr: ({ children }: { children?: React.ReactNode }) => (

apps/sim/app/workspace/[workspaceId]/files/files.tsx

@@ -486,14 +486,16 @@ export function Files() {
 
   const visibleRowIds = useMemo(() => rows.map((row) => row.id), [rows])
 
-  useEffect(() => {
+  const prevVisibleRowIdsRef = useRef(visibleRowIds)
+  if (prevVisibleRowIdsRef.current !== visibleRowIds) {
+    prevVisibleRowIdsRef.current = visibleRowIds
     lastSelectedIndexRef.current = -1
     const visible = new Set(visibleRowIds)
     setSelectedRowIds((prev) => {
       const next = new Set(Array.from(prev).filter((id) => visible.has(id)))
       return next.size === prev.size ? prev : next
     })
-  }, [visibleRowIds])
+  }
 
   const isAllSelected =
     visibleRowIds.length > 0 && visibleRowIds.every((id) => selectedRowIds.has(id))
@@ -1870,10 +1872,12 @@ export function Files() {
               isLoading={bulkArchiveItems.isPending || moveItems.isPending}
             />
             {isDraggingOver ? (
-              <div className='pointer-events-none absolute inset-0 z-50 flex flex-col items-center justify-center gap-2 border border-[var(--accent)] border-dashed bg-[var(--surface-4)] transition-colors'>
-                <Upload className='size-5 text-[var(--accent)]' />
+              <div className='pointer-events-none absolute inset-0 z-[var(--z-dropdown)] flex flex-col items-center justify-center gap-2 border border-[var(--brand-secondary)] border-dashed bg-[var(--surface-4)] transition-colors'>
+                <Upload className='size-5 text-[var(--brand-secondary)]' />
                 <div className='flex flex-col gap-0.5 text-center'>
-                  <p className='font-medium text-[14px] text-[var(--accent)]'>Drop to upload</p>
+                  <p className='font-medium text-[14px] text-[var(--brand-secondary)]'>
+                    Drop to upload
+                  </p>
                   <p className='text-[11px] text-[var(--text-tertiary)]'>
                     Release files here to add them to this workspace
                   </p>

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx

@@ -1118,28 +1118,19 @@ export const Sidebar = memo(function Sidebar() {
     [workspaces, handleLeaveWorkspace]
   )
 
-  const tasksCollapsedIcon = useMemo(
-    () => <Blimp className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />,
-    []
-  )
+  const tasksCollapsedIcon = <Blimp className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
 
-  const workflowsCollapsedIcon = useMemo(
-    () => (
-      <div
-        className='size-[16px] flex-shrink-0 rounded-sm border-[2.5px]'
-        style={WORKFLOW_ICON_STYLE}
-      />
-    ),
-    []
+  const workflowsCollapsedIcon = (
+    <div
+      className='size-[16px] flex-shrink-0 rounded-sm border-[2.5px]'
+      style={WORKFLOW_ICON_STYLE}
+    />
   )
 
-  const workflowsPrimaryAction = useMemo(
-    () => ({
-      label: 'New workflow',
-      onSelect: handleCreateWorkflow,
-    }),
-    [handleCreateWorkflow]
-  )
+  const workflowsPrimaryAction = {
+    label: 'New workflow',
+    onSelect: handleCreateWorkflow,
+  }
 
   const handleExpandSidebar = (e: React.MouseEvent) => {
     e.preventDefault()
@@ -1160,13 +1151,10 @@ export const Sidebar = memo(function Sidebar() {
     }
   }, [workspaceId, navigateToPage])
 
-  const tasksPrimaryAction = useMemo(
-    () => ({
-      label: 'New task',
-      onSelect: handleNewTask,
-    }),
-    [handleNewTask]
-  )
+  const tasksPrimaryAction = {
+    label: 'New task',
+    onSelect: handleNewTask,
+  }
 
   const handleSeeMoreTasks = () => setVisibleTaskCount((prev) => prev + 5)
 

apps/sim/hooks/queries/workspace-file-folders.ts

@@ -109,13 +109,14 @@ export function useUpdateWorkspaceFileFolder() {
       }
       return { previous }
     },
-    onError: (_err, variables, context) => {
+    onError: (err, variables, context) => {
       if (context?.previous) {
         queryClient.setQueryData(
           workspaceFileFolderKeys.list(variables.workspaceId, 'active'),
           context.previous
         )
       }
+      toast.error(toError(err).message)
     },
     onSettled: (_data, _error, variables) => {
       invalidateWorkspaceFileBrowsers(queryClient, variables.workspaceId)
@@ -192,6 +193,9 @@ export function useRestoreWorkspaceFileFolder() {
     onSuccess: () => {
       toast.success('Folder restored')
     },
+    onError: (err) => {
+      toast.error(toError(err).message)
+    },
     onSettled: (_data, _error, variables) => {
       invalidateWorkspaceFileBrowsers(queryClient, variables.workspaceId)
     },

apps/sim/hooks/queries/workspace-files.ts

@@ -513,6 +513,9 @@ export function useRestoreWorkspaceFile() {
     onSuccess: () => {
       toast.success('File restored')
     },
+    onError: (err) => {
+      toast.error(toError(err).message)
+    },
     onSettled: (_data, _error, variables) => {
       queryClient.invalidateQueries({
         queryKey: workspaceFilesKeys.workspaceLists(variables.workspaceId),