feat(ui): show folder path in search modal (#4138)

* feat(ui): show folder path in search modal

* Switch truncate folder over workspace name

---------

Co-authored-by: Theodore Li <theo@sim.ai>

Author: TheodoreSpeaks

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-items.tsx

@@ -51,12 +51,14 @@ export const MemoizedWorkflowItem = memo(
     onSelect,
     color,
     name,
+    folderPath,
     isCurrent,
   }: {
     value: string
     onSelect: () => void
     color: string
     name: string
+    folderPath?: string
     isCurrent?: boolean
   }) {
     return (
@@ -73,13 +75,19 @@ export const MemoizedWorkflowItem = memo(
           {name}
           {isCurrent && ' (current)'}
         </span>
+        {folderPath && (
+          <span className='ml-auto min-w-0 truncate pl-2 font-base text-[var(--text-subtle)] text-small'>
+            {folderPath}
+          </span>
+        )}
       </Command.Item>
     )
   },
   (prev, next) =>
     prev.value === next.value &&
     prev.color === next.color &&
     prev.name === next.name &&
+    prev.folderPath === next.folderPath &&
     prev.isCurrent === next.isCurrent
 )
 

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/search-groups.tsx

@@ -163,10 +163,11 @@ export const WorkflowsGroup = memo(function WorkflowsGroup({
       {items.map((workflow) => (
         <MemoizedWorkflowItem
           key={workflow.id}
-          value={`${workflow.name} workflow-${workflow.id}`}
+          value={`${workflow.name} ${workflow.folderPath ?? ''} workflow-${workflow.id}`}
           onSelect={() => onSelect(workflow)}
           color={workflow.color}
           name={workflow.name}
+          folderPath={workflow.folderPath}
           isCurrent={workflow.isCurrent}
         />
       ))}

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils.ts

@@ -11,6 +11,7 @@ export interface WorkflowItem {
   name: string
   href: string
   color: string
+  folderPath?: string
   isCurrent?: boolean
 }
 

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

@@ -40,7 +40,7 @@ import { useSession } from '@/lib/auth/auth-client'
 import { SIM_RESOURCES_DRAG_TYPE } from '@/lib/copilot/resource-types'
 import { cn } from '@/lib/core/utils/cn'
 import { isMacPlatform } from '@/lib/core/utils/platform'
-import { buildFolderTree } from '@/lib/folders/tree'
+import { buildFolderTree, getFolderPath } from '@/lib/folders/tree'
 import { captureEvent } from '@/lib/posthog/client'
 import {
   START_NAV_TOUR_EVENT,
@@ -635,14 +635,22 @@ export const Sidebar = memo(function Sidebar() {
 
   const searchModalWorkflows = useMemo(
     () =>
-      regularWorkflows.map((workflow) => ({
-        id: workflow.id,
-        name: workflow.name,
-        href: `/workspace/${workspaceId}/w/${workflow.id}`,
-        color: workflow.color,
-        isCurrent: workflow.id === workflowId,
-      })),
-    [regularWorkflows, workspaceId, workflowId]
+      regularWorkflows.map((workflow) => {
+        const folderPath = workflow.folderId
+          ? getFolderPath(folderMap, workflow.folderId)
+              .map((folder) => folder.name)
+              .join(' / ')
+          : ''
+        return {
+          id: workflow.id,
+          name: workflow.name,
+          href: `/workspace/${workspaceId}/w/${workflow.id}`,
+          color: workflow.color,
+          folderPath: folderPath || undefined,
+          isCurrent: workflow.id === workflowId,
+        }
+      }),
+    [regularWorkflows, folderMap, workspaceId, workflowId]
   )
 
   const searchModalWorkspaces = useMemo(