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