Merge pull request #1787 from escapade-mckv/triggers-display

differentiate triggers in tasks list

frontend/src/components/sidebar/nav-agents.tsx

@@ -12,11 +12,19 @@ import {
   ExternalLink,
   X,
   Check,
-  History
+  History,
+  ChevronRight,
+  Zap,
+  Folder
 } from "lucide-react"
 import { ThreadIcon } from "./thread-icon"
 import { toast } from "sonner"
 import { usePathname, useRouter } from "next/navigation"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible';
 
 import {
   DropdownMenu,
@@ -133,8 +141,6 @@ const ThreadItem: React.FC<{
               {isSelected && <Check className="h-3 w-3 text-primary-foreground" />}
             </div>
           </div>
-
-          {/* Dropdown Menu - inline with content */}
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <button
@@ -142,7 +148,6 @@ const ThreadItem: React.FC<{
                 onClick={(e) => {
                   e.preventDefault();
                   e.stopPropagation();
-                  // Ensure pointer events are enabled when dropdown opens
                   document.body.style.pointerEvents = 'auto';
                 }}
               >
@@ -232,7 +237,12 @@ export function NavAgents() {
     !isProjectsLoading && !isThreadsLoading ?
       processThreadsWithProjects(threads, projects) : [];
 
-  const groupedThreads: GroupedThreads = groupThreadsByDate(combinedThreads);
+  // Separate trigger threads from regular threads
+  const regularThreads = combinedThreads.filter(thread => !thread.projectName?.startsWith('Trigger: '));
+  const triggerThreads = combinedThreads.filter(thread => thread.projectName?.startsWith('Trigger: '));
+  
+  const groupedThreads: GroupedThreads = groupThreadsByDate(regularThreads);
+  const groupedTriggerThreads: GroupedThreads = groupThreadsByDate(triggerThreads);
 
   const handleDeletionProgress = (completed: number, total: number) => {
     const percentage = (completed / total) * 100;
@@ -537,7 +547,6 @@ export function NavAgents() {
         {(state !== 'collapsed' || isMobile) && (
           <>
             {isLoading ? (
-              // Show skeleton loaders while loading
               Array.from({ length: 3 }).map((_, index) => (
                 <SidebarMenuItem key={`skeleton-${index}`}>
                   <SidebarMenuButton>
@@ -546,40 +555,85 @@ export function NavAgents() {
                   </SidebarMenuButton>
                 </SidebarMenuItem>
               ))
-            ) : combinedThreads.length > 0 ? (
+              ) : (regularThreads.length > 0 || triggerThreads.length > 0) ? (
-              // Show threads grouped by date
+                <>
-              <>
+                {triggerThreads.length > 0 && (
-                {Object.entries(groupedThreads).map(([dateGroup, threadsInGroup]) => (
+                  <Collapsible defaultOpen={false} className="group/collapsible w-full mb-3">
-                  <div key={dateGroup}>
+                    <SidebarMenuItem>
-                    <DateGroupHeader dateGroup={dateGroup} count={threadsInGroup.length} />
+                      <CollapsibleTrigger asChild>
-                    {threadsInGroup.map((thread) => {
+                        <SidebarMenuButton className="w-full">
-                      const isActive = pathname?.includes(thread.threadId) || false;
+                          <ChevronRight className="transition-transform h-4 w-4 group-data-[state=open]/collapsible:rotate-90" />
-                      const isThreadLoading = loadingThreadId === thread.threadId;
+                          <Folder className="h-4 w-4" />
-                      const isSelected = selectedThreads.has(thread.threadId);
+                          <span className="flex-1 text-left">Trigger Runs ({triggerThreads.length})</span>
+                        </SidebarMenuButton>
+                      </CollapsibleTrigger>
+                    </SidebarMenuItem>
+                    <CollapsibleContent>
+                      <div className="pl-6">
+                        {Object.entries(groupedTriggerThreads).map(([dateGroup, threadsInGroup]) => (
+                          <div key={`trigger-${dateGroup}`}>
+                            <DateGroupHeader dateGroup={dateGroup} count={threadsInGroup.length} />
+                            {threadsInGroup.map((thread) => {
+                              const isActive = pathname?.includes(thread.threadId) || false;
+                              const isThreadLoading = loadingThreadId === thread.threadId;
+                              const isSelected = selectedThreads.has(thread.threadId);
 
-                      return (
+                              return (
-                        <ThreadItem
+                                <ThreadItem
-                          key={`thread-${thread.threadId}`}
+                                  key={`trigger-thread-${thread.threadId}`}
-                          thread={thread}
+                                  thread={thread}
-                          isActive={isActive}
+                                  isActive={isActive}
-                          isThreadLoading={isThreadLoading}
+                                  isThreadLoading={isThreadLoading}
-                          isSelected={isSelected}
+                                  isSelected={isSelected}
-                          selectedThreads={selectedThreads}
+                                  selectedThreads={selectedThreads}
-                          loadingThreadId={loadingThreadId}
+                                  loadingThreadId={loadingThreadId}
-                          pathname={pathname}
+                                  pathname={pathname}
-                          isMobile={isMobile}
+                                  isMobile={isMobile}
-                          handleThreadClick={handleThreadClick}
+                                  handleThreadClick={handleThreadClick}
-                          toggleThreadSelection={toggleThreadSelection}
+                                  toggleThreadSelection={toggleThreadSelection}
-                          handleDeleteThread={handleDeleteThread}
+                                  handleDeleteThread={handleDeleteThread}
-                          setSelectedItem={setSelectedItem}
+                                  setSelectedItem={setSelectedItem}
-                          setShowShareModal={setShowShareModal}
+                                  setShowShareModal={setShowShareModal}
-                        />
+                                />
-                      );
+                              );
-                    })}
+                            })}
-                  </div>
+                          </div>
-                ))}
+                        ))}
-              </>
+                      </div>
-            ) : (
+                    </CollapsibleContent>
+                  </Collapsible>
+                )}
+                  {Object.entries(groupedThreads).map(([dateGroup, threadsInGroup]) => (
+                    <div key={dateGroup}>
+                      <DateGroupHeader dateGroup={dateGroup} count={threadsInGroup.length} />
+                      {threadsInGroup.map((thread) => {
+                        const isActive = pathname?.includes(thread.threadId) || false;
+                        const isThreadLoading = loadingThreadId === thread.threadId;
+                        const isSelected = selectedThreads.has(thread.threadId);
+
+                        return (
+                          <ThreadItem
+                            key={`thread-${thread.threadId}`}
+                            thread={thread}
+                            isActive={isActive}
+                            isThreadLoading={isThreadLoading}
+                            isSelected={isSelected}
+                            selectedThreads={selectedThreads}
+                            loadingThreadId={loadingThreadId}
+                            pathname={pathname}
+                            isMobile={isMobile}
+                            handleThreadClick={handleThreadClick}
+                            toggleThreadSelection={toggleThreadSelection}
+                            handleDeleteThread={handleDeleteThread}
+                            setSelectedItem={setSelectedItem}
+                            setShowShareModal={setShowShareModal}
+                          />
+                        );
+                      })}
+                    </div>
+                  ))}
+                </>
+              ) : (
               <SidebarMenuItem>
                 <SidebarMenuButton className="text-sidebar-foreground/70">
                   <span>No tasks yet</span>