mirror of
https://github.com/rowboatlabs/rowboat.git
synced 2026-05-22 18:45:19 +02:00
Hide projects list behind CTA
This commit is contained in:
parent
fab66841d8
commit
0d775003bf
2 changed files with 38 additions and 10 deletions
|
|
@ -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>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
<SectionHeading
|
<SectionHeading
|
||||||
subheading={subheading}
|
subheading={subheading}
|
||||||
>
|
>
|
||||||
{heading}
|
{heading}
|
||||||
</SectionHeading>
|
</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">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue