Merge aligned backend and finish file UI review fixes

Author: mzxchandra

apps/sim/app/workspace/[workspaceId]/files/components/file-copy-modal.test.tsx

@@ -86,23 +86,12 @@ it.each([
   [false, true],
   [true, false],
   [false, false],
-])(
-  'stops Project destination reads and pagination after flags become %s/%s',
-  async (projects, projectFiles) => {
-    await render(true, true)
-    await act(async () => vi.advanceTimersByTimeAsync(10))
-    expect(document.body.textContent).toContain('Load more Projects')
-    const selector = document.querySelector('[aria-label="Copy destination"]')
-    if (!selector) throw new Error('Copy destination selector is unavailable')
-    await act(async () =>
-      selector.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
-    )
-    expect(document.body.textContent).toContain('Cached Project')
-    requests.length = 0
-    await render(projects, projectFiles)
-    await act(async () => client.invalidateQueries())
-    expect(requests.filter((url) => url.startsWith('/api/projects'))).toEqual([])
-    expect(document.body.textContent).not.toContain('Load more Projects')
-    expect(document.body.textContent).not.toContain('Cached Project')
-  }
-)
+])('stops Project destination reads after flags become %s/%s', async (projects, projectFiles) => {
+  await render(true, true)
+  await act(async () => vi.advanceTimersByTimeAsync(10))
+  expect(requests.some((url) => url.startsWith('/api/projects'))).toBe(true)
+  requests.length = 0
+  await render(projects, projectFiles)
+  await act(async () => client.invalidateQueries())
+  expect(requests.filter((url) => url.startsWith('/api/projects'))).toEqual([])
+})

apps/sim/app/workspace/[workspaceId]/files/components/file-copy-modal.tsx

@@ -97,8 +97,8 @@ function FileCopyDestinationPicker({ source, onClose }: FileCopyModalProps) {
       title='Destination'
       hint='Copies saved content. The original files stay in their current location.'
       error={
-        workspaces.isError && (!projectDestinationsEnabled || projects.isError)
-          ? 'Could not load destinations.'
+        workspaces.isError || (projectDestinationsEnabled && projects.isError)
+          ? 'Could not load all destinations.'
           : undefined
       }
     >

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

@@ -73,7 +73,7 @@ export const DocxPreview = memo(function DocxPreview({
   const containerRef = useRef<HTMLDivElement>(null)
   const scrollContainerRef = useRef<HTMLDivElement>(null)
   const zoomPercentRef = useRef(100)
-  const preview = useDocPreviewBinary(workspaceId, file)
+  const preview = useDocPreviewBinary({ workspaceId, file })
   const fileData = preview.data
   const [renderError, setRenderError] = useState<string | null>(null)
   const [rendering, setRendering] = useState(false)

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

@@ -401,7 +401,7 @@ const IframePreview = memo(function IframePreview({
   file: ViewerFileRecord
   workspaceId: string | undefined
 }) {
-  const preview = useDocPreviewBinary(workspaceId, file)
+  const preview = useDocPreviewBinary({ workspaceId, file })
 
   const bufferSource = useMemo<PdfDocumentSource | null>(
     () => (preview.data ? { kind: 'buffer', buffer: preview.data } : null),
@@ -422,7 +422,13 @@ const IframePreview = memo(function IframePreview({
   )
 })
 
-function useBlobUrl(workspaceId: string | undefined, fileId: string, fileKey: string) {
+interface UseBlobUrlProps {
+  workspaceId: string | undefined
+  fileId: string
+  fileKey: string
+}
+
+function useBlobUrl({ workspaceId, fileId, fileKey }: UseBlobUrlProps) {
   const { data: fileData, isLoading, error } = useWorkspaceFileBinary(workspaceId, fileId, fileKey)
   const [blobUrl, setBlobUrl] = useState<string | null>(null)
   const blobUrlRef = useRef<string | null>(null)
@@ -466,7 +472,7 @@ const MediaPreview = memo(function MediaPreview({
     error: fetchError,
     blobUrl,
     replaceBlobUrl,
-  } = useBlobUrl(workspaceId, file.id, file.key)
+  } = useBlobUrl({ workspaceId, fileId: file.id, fileKey: file.key })
 
   const mediaType = resolveMediaMimeType(file.type, file.name, kind)
 

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

@@ -25,7 +25,7 @@ export const PptxPreview = memo(function PptxPreview({
   file: ViewerFileRecord
   workspaceId: string | undefined
 }) {
-  const preview = useDocPreviewBinary(workspaceId, file)
+  const preview = useDocPreviewBinary({ workspaceId, file })
   const fileData = preview.data
   const cacheKey = pptxCacheKey(file.id, preview.dataUpdatedAt, fileData?.byteLength ?? 0)
 

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

@@ -206,7 +206,11 @@ function ReadOnlyPlaceholder({ content, file, workspaceId }: ReadOnlyPlaceholder
     () => buildEditorSelectionContext(editor, { id: file.id, name: file.name }, projectOwner),
     [editor, file.id, file.name, projectOwner]
   )
-  useSelectionCopyBridge(containerRef, buildSelectionContext, projectOwner ?? workspaceId)
+  useSelectionCopyBridge({
+    containerRef,
+    buildContext: buildSelectionContext,
+    owner: projectOwner ?? workspaceId,
+  })
   return (
     <>
       {editor && <LinkHoverCard editor={editor} />}
@@ -1410,12 +1414,12 @@ export function LoadedRichMarkdownEditor({
     ]
   )
 
-  useSelectionCopyBridge(
+  useSelectionCopyBridge({
     containerRef,
-    buildSelectionContext,
-    projectOwner ?? workspaceId,
-    !showPlaceholder
-  )
+    buildContext: buildSelectionContext,
+    owner: projectOwner ?? workspaceId,
+    enabled: !showPlaceholder,
+  })
 
   /**
    * Find is off while the placeholder is up. The text on screen then belongs to the placeholder's own

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

@@ -535,12 +535,12 @@ export const TextEditor = memo(function TextEditor({
 
   // Enable once content has loaded — the container (and Monaco) only mount after
   // the `isContentLoading` early return below, so the bridge must (re-)attach then.
-  useSelectionCopyBridge(
+  useSelectionCopyBridge({
     containerRef,
-    buildSelectionContext,
-    projectOwner ?? workspaceId,
-    !isContentLoading
-  )
+    buildContext: buildSelectionContext,
+    owner: projectOwner ?? workspaceId,
+    enabled: !isContentLoading,
+  })
 
   useEffect(() => {
     if (lastEditorValueRef.current === content) return

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/use-doc-preview-binary.ts

@@ -113,6 +113,11 @@ export function stepDocPreviewBinary({
   return { resolved, hasResolvedForFile, lastGood: resolved.lastGood }
 }
 
+interface UseDocPreviewBinaryProps {
+  workspaceId: string | undefined
+  file: DocPreviewFile
+}
+
 /**
  * Resolves the compiled binary to render for a generated or uploaded document and
  * retains the last successfully fetched binary as a fallback.
@@ -126,10 +131,10 @@ export function stepDocPreviewBinary({
  * placeholder (which still holds the prior file's bytes) is ignored until a fresh
  * binary resolves for the new file, so one viewer never renders another file's content.
  */
-export function useDocPreviewBinary(
-  workspaceId: string | undefined,
-  file: DocPreviewFile
-): DocPreviewBinary {
+export function useDocPreviewBinary({
+  workspaceId,
+  file,
+}: UseDocPreviewBinaryProps): DocPreviewBinary {
   const query = useWorkspaceFileBinary(workspaceId, file.id, file.key, {
     enabled: (file.size ?? 0) > 0,
     version: Number(new Date(file.updatedAt)) || file.size,

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/use-selection-copy-bridge.ts

@@ -5,6 +5,15 @@ import { attachSelectionContextToClipboard } from '@/lib/mothership/chat/selecti
 import type { FileOperationOwner } from '@/lib/mothership/generated/file-owner'
 import type { ChatContext } from '@/stores/panel'
 
+interface UseSelectionCopyBridgeProps {
+  containerRef: RefObject<HTMLElement | null>
+  /** Returns null when there is no non-empty selection. */
+  buildContext: () => ChatContext | null
+  owner: string | FileOperationOwner | undefined
+  /** Reattaches when a loading gate mounts the container, since a ref is not reactive. */
+  enabled?: boolean
+}
+
 /**
  * Rides a selection {@link ChatContext} onto the editor's native copy so a
  * highlighted passage copied with Cmd+C pastes into Chat as a reference chip.
@@ -13,18 +22,13 @@ import type { ChatContext } from '@/stores/panel'
  * handler — Monaco and ProseMirror both `clearData()` before writing
  * `text/plain`, so the custom type must be added last to survive.
  *
- * @param buildContext - Returns null when there is no non-empty selection.
- * @param workspaceId - Workspace that owns the selected resource.
- * @param enabled - Re-runs the effect for a container that mounts late (behind a
- * loading gate); a ref isn't reactive, so the effect would otherwise bail on the
- * first render and never re-attach.
  */
-export function useSelectionCopyBridge(
-  containerRef: RefObject<HTMLElement | null>,
-  buildContext: () => ChatContext | null,
-  owner: string | FileOperationOwner | undefined,
-  enabled = true
-): void {
+export function useSelectionCopyBridge({
+  containerRef,
+  buildContext,
+  owner,
+  enabled = true,
+}: UseSelectionCopyBridgeProps): void {
   useEffect(() => {
     const dom = containerRef.current
     if (!dom || !enabled || !owner) return

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

@@ -36,7 +36,7 @@ export const XlsxPreview = memo(function XlsxPreview({
   workspaceId: string | undefined
 }) {
   const scrollRef = useHorizontalWheelScroll()
-  const preview = useDocPreviewBinary(workspaceId, file)
+  const preview = useDocPreviewBinary({ workspaceId, file })
   const fileData = preview.data
 
   const [sheetNames, setSheetNames] = useState<string[]>([])