fix(sidebar): prefetch folders and workspace permissions on cold load

Author: waleedlatif1

apps/sim/app/api/workspaces/[id]/permissions/route.ts

@@ -13,11 +13,9 @@ import { withRouteHandler } from '@/lib/core/utils/with-route-handler'
 import { syncWorkspaceEnvCredentials } from '@/lib/credentials/environment'
 import { captureServerEvent } from '@/lib/posthog/server'
 import {
-  checkWorkspaceAccess,
-  getUserEntityPermissions,
   getUsersWithPermissions,
+  getWorkspacePermissionsForViewer,
   hasWorkspaceAdminAccess,
-  type PermissionType,
 } from '@/lib/workspaces/permissions/utils'
 
 const logger = createLogger('WorkspacesPermissionsAPI')
@@ -41,37 +39,13 @@ export const GET = withRouteHandler(
         return NextResponse.json({ error: 'Authentication required' }, { status: 401 })
       }
 
-      const isAdmin = await hasWorkspaceAdminAccess(session.user.id, workspaceId)
-      const access = await checkWorkspaceAccess(workspaceId, session.user.id)
+      const result = await getWorkspacePermissionsForViewer(workspaceId, session.user.id)
 
-      if (!access.exists) {
+      if (!result) {
         return NextResponse.json({ error: 'Workspace not found or access denied' }, { status: 404 })
       }
 
-      if (!isAdmin && !access.hasAccess) {
-        return NextResponse.json({ error: 'Workspace not found or access denied' }, { status: 404 })
-      }
-
-      const explicitPermission = await getUserEntityPermissions(
-        session.user.id,
-        'workspace',
-        workspaceId
-      )
-      const viewerPermissionType: PermissionType = isAdmin
-        ? 'admin'
-        : (explicitPermission ?? 'read')
-
-      const result = await getUsersWithPermissions(workspaceId)
-
-      return NextResponse.json({
-        users: result,
-        total: result.length,
-        viewer: {
-          userId: session.user.id,
-          isAdmin,
-          permissionType: viewerPermissionType,
-        },
-      })
+      return NextResponse.json(result)
     } catch (error) {
       logger.error('Error fetching workspace permissions:', error)
       return NextResponse.json({ error: 'Failed to fetch workspace permissions' }, { status: 500 })

apps/sim/app/workspace/[workspaceId]/prefetch.ts

@@ -1,14 +1,21 @@
 import type { QueryClient } from '@tanstack/react-query'
 import { listMothershipChats } from '@/lib/copilot/chat/list-mothership-chats'
+import { listFoldersForWorkspace } from '@/lib/folders/queries'
 import { listWorkflowsForUser } from '@/lib/workflows/queries'
-import { checkWorkspaceAccess } from '@/lib/workspaces/permissions/utils'
+import {
+  checkWorkspaceAccess,
+  getWorkspacePermissionsForViewer,
+} from '@/lib/workspaces/permissions/utils'
+import { FOLDER_LIST_STALE_TIME, mapFolder } from '@/hooks/queries/folders'
 import {
   MOTHERSHIP_CHAT_LIST_STALE_TIME,
   mapChat,
   mothershipChatKeys,
 } from '@/hooks/queries/mothership-chats'
+import { folderKeys } from '@/hooks/queries/utils/folder-keys'
 import { workflowKeys } from '@/hooks/queries/utils/workflow-keys'
 import { mapWorkflow, WORKFLOW_LIST_STALE_TIME } from '@/hooks/queries/utils/workflow-list-query'
+import { WORKSPACE_PERMISSIONS_STALE_TIME, workspaceKeys } from '@/hooks/queries/workspace'
 
 /** Resolves whether the user may access the workspace, swallowing errors to a `false`. */
 async function userCanAccessWorkspace(workspaceId: string, userId: string): Promise<boolean> {
@@ -21,11 +28,12 @@ async function userCanAccessWorkspace(workspaceId: string, userId: string): Prom
 }
 
 /**
- * Prefetches the sidebar's workflow + chat lists for a workspace and stores them
- * under the same query keys + mappers the client hooks use, so the persistent
- * sidebar paints populated on the first server render instead of flashing skeletons
- * on a cold load (e.g. after the browser discards an idle tab). Calls the data layer
- * directly — the same functions the API routes use — with no internal HTTP hop.
+ * Prefetches the sidebar's workflow, chat, folder, and workspace-permissions lists for
+ * a workspace and stores them under the same query keys + mappers the client hooks use,
+ * so the persistent sidebar paints populated on the first server render instead of
+ * flashing skeletons on a cold load (e.g. after the browser discards an idle tab). Calls
+ * the data layer directly — the same functions the API routes use — with no internal
+ * HTTP hop.
  *
  * Skips silently when the user can't access the workspace, leaving the client to
  * fetch and surface the real error instead of caching an empty list.
@@ -53,5 +61,22 @@ export async function prefetchWorkspaceSidebar(
       },
       staleTime: MOTHERSHIP_CHAT_LIST_STALE_TIME,
     }),
+    queryClient.prefetchQuery({
+      queryKey: folderKeys.list(workspaceId, 'active'),
+      queryFn: async () => {
+        const rows = await listFoldersForWorkspace(workspaceId, 'active')
+        return rows.map(mapFolder)
+      },
+      staleTime: FOLDER_LIST_STALE_TIME,
+    }),
+    queryClient.prefetchQuery({
+      queryKey: workspaceKeys.permissions(workspaceId),
+      queryFn: async () => {
+        const result = await getWorkspacePermissionsForViewer(workspaceId, userId)
+        if (!result) throw new Error('Workspace not found or access denied')
+        return result
+      },
+      staleTime: WORKSPACE_PERMISSIONS_STALE_TIME,
+    }),
   ])
 }

apps/sim/hooks/queries/workspace.ts

@@ -42,6 +42,8 @@ export const workspaceKeys = {
 
 export type { Workspace, WorkspaceCreationPolicy, WorkspaceMember, WorkspacePermissions }
 
+export const WORKSPACE_PERMISSIONS_STALE_TIME = 30 * 1000
+
 async function fetchWorkspaces(
   scope: WorkspaceQueryScope = 'active',
   signal?: AbortSignal
@@ -250,7 +252,7 @@ export function useWorkspacePermissionsQuery(workspaceId: string | null | undefi
     queryKey: workspaceKeys.permissions(workspaceId ?? ''),
     queryFn: ({ signal }) => fetchWorkspacePermissions(workspaceId as string, signal),
     enabled: Boolean(workspaceId),
-    staleTime: 30 * 1000,
+    staleTime: WORKSPACE_PERMISSIONS_STALE_TIME,
     placeholderData: keepPreviousData,
   })
 }

apps/sim/lib/folders/queries.ts

@@ -0,0 +1,32 @@
+import { db } from '@sim/db'
+import { workflowFolder } from '@sim/db/schema'
+import { and, asc, eq, isNotNull, isNull } from 'drizzle-orm'
+import type { FolderApi } from '@/lib/api/contracts/folders'
+import type { FolderQueryScope } from '@/hooks/queries/utils/folder-keys'
+
+/** Normalizes timestamp columns to ISO strings to honor the `FolderApi` wire contract. */
+function toFolderApi(row: typeof workflowFolder.$inferSelect): FolderApi {
+  return {
+    ...row,
+    createdAt: row.createdAt.toISOString(),
+    updatedAt: row.updatedAt.toISOString(),
+    archivedAt: row.archivedAt ? row.archivedAt.toISOString() : null,
+  }
+}
+
+/** Mirrors the query in `app/api/folders/route.ts` GET handler for server-side (non-HTTP) callers. */
+export async function listFoldersForWorkspace(
+  workspaceId: string,
+  scope: FolderQueryScope
+): Promise<FolderApi[]> {
+  const archivedFilter =
+    scope === 'archived' ? isNotNull(workflowFolder.archivedAt) : isNull(workflowFolder.archivedAt)
+
+  const rows = await db
+    .select()
+    .from(workflowFolder)
+    .where(and(eq(workflowFolder.workspaceId, workspaceId), archivedFilter))
+    .orderBy(asc(workflowFolder.sortOrder), asc(workflowFolder.createdAt))
+
+  return rows.map(toFolderApi)
+}

apps/sim/lib/workspaces/permissions/utils.ts

@@ -376,6 +376,48 @@ export async function getWorkspaceMemberProfiles(
   return rows
 }
 
+export interface WorkspacePermissionsForViewer {
+  users: WorkspaceMemberWithRole[]
+  total: number
+  viewer: {
+    userId: string
+    isAdmin: boolean
+    permissionType: PermissionType
+  }
+}
+
+/**
+ * Builds the workspace permissions payload for a viewer: the full member list plus
+ * the viewer's own resolved permission. Returns `null` when the workspace doesn't
+ * exist or the viewer lacks access, mirroring the 404 branch in the permissions
+ * route. Shared by `GET /api/workspaces/[id]/permissions` and the sidebar prefetch
+ * so the two never drift.
+ *
+ * @param workspaceId - The workspace ID to build permissions for
+ * @param userId - The viewer's user ID
+ */
+export async function getWorkspacePermissionsForViewer(
+  workspaceId: string,
+  userId: string
+): Promise<WorkspacePermissionsForViewer | null> {
+  const isAdmin = await hasWorkspaceAdminAccess(userId, workspaceId)
+  const access = await checkWorkspaceAccess(workspaceId, userId)
+
+  if (!access.exists || (!isAdmin && !access.hasAccess)) {
+    return null
+  }
+
+  const explicitPermission = await getUserEntityPermissions(userId, 'workspace', workspaceId)
+  const viewerPermissionType: PermissionType = isAdmin ? 'admin' : (explicitPermission ?? 'read')
+  const users = await getUsersWithPermissions(workspaceId)
+
+  return {
+    users,
+    total: users.length,
+    viewer: { userId, isAdmin, permissionType: viewerPermissionType },
+  }
+}
+
 /**
  * Check if a user has admin access to a specific workspace
  *