fix(ui): handle long file paths and names in search modal (#4155)

* fix(ui): handle long file paths and names in search modal

* Handle long subfolder names

* fix memo

Author: TheodoreSpeaks

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

@@ -58,7 +58,7 @@ export const MemoizedWorkflowItem = memo(
     onSelect: () => void
     color: string
     name: string
-    folderPath?: string
+    folderPath?: string[]
     isCurrent?: boolean
   }) {
     return (
@@ -71,13 +71,21 @@ export const MemoizedWorkflowItem = memo(
             backgroundClip: 'padding-box',
           }}
         />
-        <span className='truncate font-base text-[var(--text-body)]'>
-          {name}
-          {isCurrent && ' (current)'}
+        <span className='flex min-w-0 max-w-[75%] flex-shrink-0 font-base text-[var(--text-body)]'>
+          <span className='truncate'>{name}</span>
+          {isCurrent && <span className='flex-shrink-0 whitespace-pre'> (current)</span>}
         </span>
-        {folderPath && (
-          <span className='ml-auto min-w-0 truncate pl-2 font-base text-[var(--text-subtle)] text-small'>
-            {folderPath}
+        {folderPath && folderPath.length > 0 && (
+          <span className='ml-auto flex min-w-0 pl-2 font-base text-[var(--text-subtle)] text-small'>
+            {folderPath.length > 1 && (
+              <>
+                <span className='min-w-0 truncate [flex-shrink:9999]'>
+                  {folderPath.slice(0, -1).join(' / ')}
+                </span>
+                <span className='flex-shrink-0 whitespace-pre'> / </span>
+              </>
+            )}
+            <span className='min-w-0 truncate'>{folderPath[folderPath.length - 1]}</span>
           </span>
         )}
       </Command.Item>
@@ -87,8 +95,10 @@ export const MemoizedWorkflowItem = memo(
     prev.value === next.value &&
     prev.color === next.color &&
     prev.name === next.name &&
-    prev.folderPath === next.folderPath &&
-    prev.isCurrent === next.isCurrent
+    prev.isCurrent === next.isCurrent &&
+    (prev.folderPath === next.folderPath ||
+      (prev.folderPath?.length === next.folderPath?.length &&
+        (prev.folderPath ?? []).every((segment, i) => segment === next.folderPath?.[i])))
 )
 
 export const MemoizedTaskItem = memo(
@@ -127,9 +137,9 @@ export const MemoizedWorkspaceItem = memo(
   }) {
     return (
       <Command.Item value={value} onSelect={onSelect} className={COMMAND_ITEM_CLASSNAME}>
-        <span className='truncate font-base text-[var(--text-body)]'>
-          {name}
-          {isCurrent && ' (current)'}
+        <span className='flex min-w-0 font-base text-[var(--text-body)]'>
+          <span className='truncate'>{name}</span>
+          {isCurrent && <span className='flex-shrink-0 whitespace-pre'> (current)</span>}
         </span>
       </Command.Item>
     )

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

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

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

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

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

@@ -637,16 +637,14 @@ export const Sidebar = memo(function Sidebar() {
     () =>
       regularWorkflows.map((workflow) => {
         const folderPath = workflow.folderId
-          ? getFolderPath(folderMap, workflow.folderId)
-              .map((folder) => folder.name)
-              .join(' / ')
-          : ''
+          ? getFolderPath(folderMap, workflow.folderId).map((folder) => folder.name)
+          : []
         return {
           id: workflow.id,
           name: workflow.name,
           href: `/workspace/${workspaceId}/w/${workflow.id}`,
           color: workflow.color,
-          folderPath: folderPath || undefined,
+          folderPath: folderPath.length > 0 ? folderPath : undefined,
           isCurrent: workflow.id === workflowId,
         }
       }),