move assistant selection to the top

apps/rowboat/app/projects/layout/components/sidebar.tsx

@@ -2,7 +2,7 @@
 import { useEffect, useState } from 'react';
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { Tooltip } from "@heroui/react";
+import { Tooltip, Modal, ModalContent, ModalHeader, ModalBody, useDisclosure } from "@heroui/react";
 import { UserButton } from "@/app/lib/components/user_button";
 import { 
   SettingsIcon, 
@@ -15,10 +15,12 @@ import {
   Sun,
   HelpCircle
 } from "lucide-react";
-import { getProjectConfig } from "@/app/actions/project_actions";
+import { getProjectConfig, listProjects } from "@/app/actions/project_actions";
 import { useTheme } from "@/app/providers/theme-provider";
 import { USE_PRODUCT_TOUR } from '@/app/lib/feature_flags';
 import { useHelpModal } from "@/app/providers/help-modal-provider";
+import { Project } from "@/app/lib/types/project_types";
+import { z } from "zod";
 
 interface SidebarProps {
   projectId?: string;
@@ -34,9 +36,12 @@ const COLLAPSED_ICON_SIZE = 20; // DO NOT CHANGE THIS
 export default function Sidebar({ projectId, useAuth, collapsed = false, onToggleCollapse, useBilling }: SidebarProps) {
   const pathname = usePathname();
   const [projectName, setProjectName] = useState<string>("Select Project");
+  const [allProjects, setAllProjects] = useState<z.infer<typeof Project>[]>([]);
+  const [isLoadingProjects, setIsLoadingProjects] = useState(false);
   const isProjectsRoute = pathname === '/projects';
   const { theme, toggleTheme } = useTheme();
   const { showHelpModal } = useHelpModal();
+  const { isOpen: isAssistantsModalOpen, onOpen: onAssistantsModalOpen, onClose: onAssistantsModalClose } = useDisclosure();
 
   useEffect(() => {
     async function fetchProjectName() {
@@ -53,18 +58,36 @@ export default function Sidebar({ projectId, useAuth, collapsed = false, onToggl
     fetchProjectName();
   }, [projectId, isProjectsRoute]);
 
+  // Load projects when modal opens
+  useEffect(() => {
+    async function loadProjects() {
+      if (isAssistantsModalOpen && !isProjectsRoute) {
+        setIsLoadingProjects(true);
+        try {
+          const projects = await listProjects();
+          // Filter out current project and sort by creation date
+          const otherProjects = projects.filter(p => p._id !== projectId);
+          const sortedProjects = [...otherProjects].sort((a, b) => 
+            new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+          );
+          setAllProjects(sortedProjects);
+        } catch (error) {
+          console.error('Failed to fetch projects:', error);
+        } finally {
+          setIsLoadingProjects(false);
+        }
+      }
+    }
+
+    loadProjects();
+  }, [isAssistantsModalOpen, projectId, isProjectsRoute]);
+
   const navItems = [
     {
       href: 'workflow',
       label: 'Build',
       icon: WorkflowIcon,
       requiresProject: true
-    },
-    {
-      href: 'config',
-      label: 'Settings',
-      icon: SettingsIcon,
-      requiresProject: true
     }
   ];
 
@@ -82,10 +105,10 @@ export default function Sidebar({ projectId, useAuth, collapsed = false, onToggl
               {/* Project Selector */}
               <div className="p-3 border-b border-zinc-100 dark:border-zinc-800">
                 <Tooltip content={collapsed ? projectName : "Change project"} showArrow placement="right">
-                  <Link 
+                  <button 
-                    href="/projects"
+                    onClick={onAssistantsModalOpen}
                     className={`
-                      flex items-center rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-800/50 transition-all
+                      w-full flex items-center rounded-md hover:bg-zinc-100 dark:hover:bg-zinc-800/50 transition-all
                       ${collapsed ? 'justify-center py-4' : 'gap-3 px-4 py-2.5'}
                     `}
                   >
@@ -98,7 +121,7 @@ export default function Sidebar({ projectId, useAuth, collapsed = false, onToggl
                         {projectName}
                       </span>
                     )}
-                  </Link>
+                  </button>
                 </Tooltip>
               </div>
 
@@ -175,6 +198,28 @@ export default function Sidebar({ projectId, useAuth, collapsed = false, onToggl
 
           {/* Theme and Auth Controls */}
           <div className="p-3 border-t border-zinc-100 dark:border-zinc-800 space-y-2">
+            {/* Settings */}
+            {!isProjectsRoute && projectId && (
+              <Tooltip content={collapsed ? "Settings" : ""} showArrow placement="right">
+                <Link 
+                  href={`/projects/${projectId}/config`}
+                  className={`
+                    w-full rounded-md flex items-center
+                    text-[15px] font-medium transition-all duration-200
+                    ${collapsed ? 'justify-center py-4' : 'px-4 py-4 gap-3'}
+                    ${pathname.startsWith(`/projects/${projectId}/config`)
+                      ? 'bg-indigo-50 dark:bg-indigo-500/10 text-indigo-600 dark:text-indigo-400' 
+                      : 'hover:bg-zinc-100 dark:hover:bg-zinc-800/50 text-zinc-600 dark:text-zinc-400'
+                    }
+                  `}
+                  data-tour-target="settings"
+                >
+                  <SettingsIcon size={COLLAPSED_ICON_SIZE} />
+                  {!collapsed && <span>Settings</span>}
+                </Link>
+              </Tooltip>
+            )}
+
             {USE_PRODUCT_TOUR && !isProjectsRoute && (
               <Tooltip content={collapsed ? "Help" : ""} showArrow placement="right">
                 <button 
@@ -228,6 +273,66 @@ export default function Sidebar({ projectId, useAuth, collapsed = false, onToggl
           </div>
         </div>
       </aside>
+
+      {/* Assistants Modal */}
+      <Modal 
+        isOpen={isAssistantsModalOpen} 
+        onClose={onAssistantsModalClose}
+        size="2xl"
+        scrollBehavior="inside"
+      >
+        <ModalContent>
+          <ModalHeader className="flex flex-col gap-1">
+            Select Assistant
+          </ModalHeader>
+          <ModalBody>
+            <div className="space-y-2">
+              {/* Current project option */}
+              <Link
+                href="/projects"
+                onClick={onAssistantsModalClose}
+                className="block px-4 py-3 text-sm hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-md transition-colors border-2 border-indigo-200 dark:border-indigo-800 bg-indigo-50 dark:bg-indigo-950/30"
+              >
+                <div className="font-medium text-indigo-700 dark:text-indigo-300">Create New Assistant</div>
+                <div className="text-xs text-indigo-600 dark:text-indigo-400">
+                  Start building a new assistant from scratch
+                </div>
+              </Link>
+
+              {isLoadingProjects ? (
+                <div className="flex items-center justify-center py-8 text-sm text-zinc-500">
+                  Loading assistants...
+                </div>
+              ) : allProjects.length > 0 ? (
+                <>
+                  <div className="text-sm font-medium text-zinc-700 dark:text-zinc-300 px-1 py-2">
+                    Existing Assistants ({allProjects.length})
+                  </div>
+                  <div className="space-y-1 max-h-96 overflow-y-auto">
+                    {allProjects.map((project) => (
+                      <Link
+                        key={project._id}
+                        href={`/projects/${project._id}/workflow`}
+                        onClick={onAssistantsModalClose}
+                        className="block px-4 py-3 text-sm text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-md transition-colors"
+                      >
+                        <div className="font-medium text-zinc-900 dark:text-zinc-100">{project.name}</div>
+                        <div className="text-xs text-zinc-500 dark:text-zinc-500">
+                          Created {new Date(project.createdAt).toLocaleDateString()}
+                        </div>
+                      </Link>
+                    ))}
+                  </div>
+                </>
+              ) : (
+                <div className="text-sm text-zinc-500 dark:text-zinc-500 text-center py-8">
+                  No other assistants found
+                </div>
+              )}
+            </div>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
     </>
   );
 }