From 0d775003bf1b9456351eaf11fe1a39d206aaea3c Mon Sep 17 00:00:00 2001
From: akhisud3195 <akhileshs.s4@gmail.com>
Date: Thu, 10 Apr 2025 11:44:22 +0530
Subject: [PATCH] Hide projects list behind CTA

---
 apps/rowboat/app/projects/select/app.tsx      | 21 ++++++++++++---
 .../select/components/search-projects.tsx     | 27 ++++++++++++++-----
 2 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/apps/rowboat/app/projects/select/app.tsx b/apps/rowboat/app/projects/select/app.tsx
index 226431e3..6bf91aae 100644
--- a/apps/rowboat/app/projects/select/app.tsx
+++ b/apps/rowboat/app/projects/select/app.tsx
@@ -15,6 +15,8 @@ import { CustomPromptCard } from "./components/custom-prompt-card";
 import { Submit } from "./components/submit-button";
 import { PageHeading } from "@/components/ui/page-heading";
 import { USE_MULTIPLE_PROJECTS } from "@/app/lib/feature_flags";
+import { FolderOpenIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { Button } from "@/components/ui/button";
 
 const sectionHeaderStyles = clsx(
     "text-sm font-medium",
@@ -39,6 +41,7 @@ const textareaStyles = clsx(
 export default function App() {
     const [projects, setProjects] = useState<z.infer<typeof Project>[]>([]);
     const [isLoading, setIsLoading] = useState(true);
+    const [isProjectPaneOpen, setIsProjectPaneOpen] = useState(false);
     
     const [selectedCard, setSelectedCard] = useState<'custom' | any>('custom');
     const [customPrompt, setCustomPrompt] = useState("");
@@ -198,7 +201,7 @@ export default function App() {
                         : "mt-8 -mx-12"
                 )}>
                     {/* Left side: Project Selection */}
-                    {USE_MULTIPLE_PROJECTS && (
+                    {USE_MULTIPLE_PROJECTS && isProjectPaneOpen && (
                         <div className="overflow-auto">
                             <SearchProjects
                                 projects={projects}
@@ -206,6 +209,7 @@ export default function App() {
                                 heading="Select an existing project"
                                 subheading="Choose from your projects"
                                 className="h-full"
+                                onClose={() => setIsProjectPaneOpen(false)}
                             />
                         </div>
                     )}
@@ -213,7 +217,8 @@ export default function App() {
                     {/* Right side: Project Creation */}
                     <div className={clsx(
                         "overflow-auto",
-                        !USE_MULTIPLE_PROJECTS && "max-w-none px-12 py-12"
+                        !USE_MULTIPLE_PROJECTS && "max-w-none px-12 py-12",
+                        USE_MULTIPLE_PROJECTS && !isProjectPaneOpen && "col-span-full"
                     )}>
                         <section className={clsx(
                             "card h-full",
@@ -221,10 +226,20 @@ export default function App() {
                             USE_MULTIPLE_PROJECTS && "px-8"
                         )}>
                             {USE_MULTIPLE_PROJECTS && (
-                                <div className="pt-12">
+                                <div className="pt-12 flex justify-between items-center">
                                     <SectionHeading subheading="Set up a new AI assistant">
                                         Create a new project
                                     </SectionHeading>
+                                    {!isProjectPaneOpen && (
+                                        <Button
+                                            onClick={() => setIsProjectPaneOpen(true)}
+                                            variant="primary"
+                                            size="md"
+                                            startContent={<FolderOpenIcon className="w-4 h-4" />}
+                                        >
+                                            View Projects
+                                        </Button>
+                                    )}
                                 </div>
                             )}
                             
diff --git a/apps/rowboat/app/projects/select/components/search-projects.tsx b/apps/rowboat/app/projects/select/components/search-projects.tsx
index 1b6cbe0b..d00ede72 100644
--- a/apps/rowboat/app/projects/select/components/search-projects.tsx
+++ b/apps/rowboat/app/projects/select/components/search-projects.tsx
@@ -1,9 +1,10 @@
-import { Project } from "@/types/project_types";
+import { Project } from "@/app/lib/types/project_types";
 import { z } from "zod";
 import { ProjectList } from "./project-list";
 import { SectionHeading } from "@/components/ui/section-heading";
 import { HorizontalDivider } from "@/components/ui/horizontal-divider";
 import clsx from 'clsx';
+import { XMarkIcon } from "@heroicons/react/24/outline";
 
 interface SearchProjectsProps {
     projects: z.infer<typeof Project>[];
@@ -11,6 +12,7 @@ interface SearchProjectsProps {
     heading: string;
     subheading: string;
     className?: string;
+    onClose?: () => void;
 }
 
 export function SearchProjects({ 
@@ -18,16 +20,27 @@ export function SearchProjects({
     isLoading,
     heading,
     subheading,
-    className
+    className,
+    onClose
 }: SearchProjectsProps) {
     return (
         <div className={clsx("card", className)}>
             <div className="px-4 pt-4 pb-6 flex-none">
-                <SectionHeading
-                    subheading={subheading}
-                >
-                    {heading}
-                </SectionHeading>
+                <div className="flex justify-between items-center">
+                    <SectionHeading
+                        subheading={subheading}
+                    >
+                        {heading}
+                    </SectionHeading>
+                    {onClose && (
+                        <button
+                            onClick={onClose}
+                            className="text-gray-500 hover:text-gray-700"
+                        >
+                            <XMarkIcon className="w-5 h-5" />
+                        </button>
+                    )}
+                </div>
             </div>
             <HorizontalDivider />
             <div className="flex-1 overflow-hidden">