refactor(files): cleanup pass — effect, callback, state, and design fixes

- text-editor: replace sync-external useEffect with "adjust during render"
  pattern so the state machine advances immediately instead of after a paint
- text-editor: remove unnecessary useCallback from markSavedContent (no observer)
- files: narrow deleteTargetFile state to {id, name} — only those fields are used
- files: remove uploadFile (mutation object) from useCallback deps — .mutateAsync is stable
- files: remove unnecessary useCallback from handleNavigateToFiles (no observer)
- files: replace raw <button> with emcn Button for "Clear all filters" action

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/text-editor.tsx

@@ -276,25 +276,26 @@ function resolveMonacoLanguage(file: { type: string; name: string }): string {
 function useTextEditorContentState(options: SyncTextEditorContentStateOptions) {
   const [state, dispatch] = useReducer(textEditorContentReducer, INITIAL_TEXT_EDITOR_CONTENT_STATE)
 
-  useEffect(() => {
-    dispatch({
-      type: 'sync-external',
-      ...options,
-    })
-  }, [
-    options.canReconcileToFetchedContent,
-    options.fetchedContent,
-    options.streamingContent,
-    options.streamingMode,
-  ])
+  const prevOptionsRef = useRef<SyncTextEditorContentStateOptions | null>(null)
+  const prev = prevOptionsRef.current
+  if (
+    prev === null ||
+    prev.canReconcileToFetchedContent !== options.canReconcileToFetchedContent ||
+    prev.fetchedContent !== options.fetchedContent ||
+    prev.streamingContent !== options.streamingContent ||
+    prev.streamingMode !== options.streamingMode
+  ) {
+    prevOptionsRef.current = options
+    dispatch({ type: 'sync-external', ...options })
+  }
 
   const setDraftContent = useCallback((content: string) => {
     dispatch({ type: 'edit', content })
   }, [])
 
-  const markSavedContent = useCallback((content: string) => {
+  const markSavedContent = (content: string) => {
     dispatch({ type: 'save-success', content })
-  }, [])
+  }
 
   return {
     content: state.content,

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

@@ -208,7 +208,9 @@ export function Files() {
   const [showUnsavedChangesAlert, setShowUnsavedChangesAlert] = useState(false)
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
   const contextMenuFileRef = useRef<WorkspaceFileRecord | null>(null)
-  const [deleteTargetFile, setDeleteTargetFile] = useState<WorkspaceFileRecord | null>(null)
+  const [deleteTargetFile, setDeleteTargetFile] = useState<{ id: string; name: string } | null>(
+    null
+  )
 
   const listRename = useInlineRename({
     onSave: (fileId, name) => renameFile.mutate({ workspaceId, fileId, name }),
@@ -408,7 +410,7 @@ export function Files() {
         setUploadProgress({ completed: 0, total: 0 })
       }
     },
-    [workspaceId, uploadFile]
+    [workspaceId]
   )
 
   const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -508,7 +510,7 @@ export function Files() {
   const handleDeleteSelected = useCallback(() => {
     const file = selectedFileRef.current
     if (file) {
-      setDeleteTargetFile(file)
+      setDeleteTargetFile({ id: file.id, name: file.name })
       setShowDeleteConfirm(true)
     }
   }, [])
@@ -634,7 +636,7 @@ export function Files() {
   const handleContextMenuDelete = useCallback(() => {
     const file = contextMenuFileRef.current
     if (!file) return
-    setDeleteTargetFile(file)
+    setDeleteTargetFile({ id: file.id, name: file.name })
     setShowDeleteConfirm(true)
     closeContextMenu()
   }, [closeContextMenu])
@@ -841,9 +843,9 @@ export function Files() {
     [uploadButtonLabel, handleUploadClick]
   )
 
-  const handleNavigateToFiles = useCallback(() => {
+  const handleNavigateToFiles = () => {
     router.push(`/workspace/${workspaceId}/files`)
-  }, [router, workspaceId])
+  }
 
   const loadingBreadcrumbs = [{ label: 'Files', onClick: handleNavigateToFiles }, { label: '...' }]
 
@@ -981,17 +983,18 @@ export function Files() {
           </div>
         )}
         {hasActiveFilters && (
-          <button
-            type='button'
+          <Button
+            variant='ghost'
+            size='sm'
             onClick={() => {
               setTypeFilter([])
               setSizeFilter([])
               setUploadedByFilter([])
             }}
-            className='flex h-[32px] w-full items-center justify-center rounded-md text-[var(--text-secondary)] text-caption transition-colors hover-hover:bg-[var(--surface-active)]'
+            className='h-[32px] w-full text-[var(--text-secondary)] text-caption hover-hover:bg-[var(--surface-active)]'
           >
             Clear all filters
-          </button>
+          </Button>
         )}
       </div>
     )