Hide projects list behind CTA

This commit is contained in:
akhisud3195 2025-04-10 11:44:22 +05:30
parent fab66841d8
commit 0d775003bf
2 changed files with 38 additions and 10 deletions

View file

@ -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>
)}

View file

@ -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">