Open History to see the last commit
1import { workspaceAreaProps } from "../lib/workspaceFocus";
2import { MessageSquareDashedIcon, PlusIcon } from "lucide-react";
3
4import { openCommandPalette } from "../commandPaletteBus";
5import { isElectron } from "../env";
6import { useScratchProject } from "../hooks/useScratchProject";
7import { usePrimaryEnvironmentId } from "../state/environments";
8import { Button } from "./ui/button";
9import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "./ui/empty";
10import { SidebarInset } from "./ui/sidebar";
11import { WorkspacePageHeader } from "./WorkspacePageHeader";
12
13export function NoProjectsHero() {
14 const contentArea = workspaceAreaProps("home", 1, "Home");
15 const primaryEnvironmentId = usePrimaryEnvironmentId();
16 const { scratchEnvironmentId, startScratchThread } = useScratchProject();
17 const scratchTargetEnvironmentId = scratchEnvironmentId(primaryEnvironmentId);
18
19 return (
20 <SidebarInset
21 {...contentArea}
22 role="main"
23 className="h-dvh min-h-0 overflow-hidden overscroll-y-none"
24 >
25 <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden bg-background">
26 {/* The desktop window only moves where CSS opts in, so keep a titlebar strip. */}
27 {isElectron ? <WorkspacePageHeader electron /> : null}
28 <Empty size="hero" className="flex-1">
29 <div className="w-full max-w-lg px-8 py-12">
30 <EmptyHeader className="max-w-none">
31 <EmptyTitle>What should we work on?</EmptyTitle>
32 <EmptyDescription>
33 {scratchTargetEnvironmentId === null
34 ? "Add a project to start your first thread."
35 : "Add a project, or start without one."}
36 </EmptyDescription>
37 <div className="mt-6 flex justify-center gap-2">
38 <Button size="sm" onClick={() => openCommandPalette({ open: "add-project" })}>
39 <PlusIcon className="size-4" />
40 Add project
41 </Button>
42 {scratchTargetEnvironmentId === null ? null : (
43 <Button
44 size="sm"
45 variant="outline"
46 onClick={() => void startScratchThread(scratchTargetEnvironmentId)}
47 >
48 <MessageSquareDashedIcon className="size-4" />
49 Start without a project
50 </Button>
51 )}
52 </div>
53 </EmptyHeader>
54 </div>
55 </Empty>
56 </div>
57 </SidebarInset>
58 );
59}