codebase overhaul (#697)

1 files changed, 168 insertions, 111 deletions

diff --git a/apps/web/src/components/editor/editor-header.tsx b/apps/web/src/components/editor/editor-header.tsx
index 5363d0c7..d74d78d7 100644
--- a/apps/web/src/components/editor/editor-header.tsx
+++ b/apps/web/src/components/editor/editor-header.tsx
@@ -1,130 +1,187 @@
 "use client";
 
 import { Button } from "../ui/button";
-import { ChevronDown, ArrowLeft, SquarePen, Trash } from "lucide-react";
-import { HeaderBase } from "../header-base";
-import { useProjectStore } from "@/stores/project-store";
-import { KeyboardShortcutsHelp } from "../keyboard-shortcuts-help";
+import { ChevronDown } from "lucide-react";
 import { useState } from "react";
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
 import Link from "next/link";
-import { RenameProjectDialog } from "../rename-project-dialog";
-import { DeleteProjectDialog } from "../delete-project-dialog";
+import { RenameProjectDialog } from "./dialogs/rename-project-dialog";
+import { DeleteProjectDialog } from "./dialogs/delete-project-dialog";
 import { useRouter } from "next/navigation";
 import { FaDiscord } from "react-icons/fa6";
-import { PanelPresetSelector } from "./panel-preset-selector";
 import { ExportButton } from "./export-button";
 import { ThemeToggle } from "../theme-toggle";
+import { SOCIAL_LINKS } from "@/constants/site-constants";
+import { toast } from "sonner";
+import { useEditor } from "@/hooks/use-editor";
+import {
+	ArrowLeft02Icon,
+	Edit03Icon,
+	Delete02Icon,
+	CommandIcon,
+} from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { ShortcutsDialog } from "./dialogs/shortcuts-dialog";
 
 export function EditorHeader() {
-  const { activeProject, renameProject, deleteProject } = useProjectStore();
-  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
-  const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
-  const router = useRouter();
+	return (
+		<header className="bg-background flex h-[3.2rem] items-center justify-between px-3 pt-0.5">
+			<div className="flex items-center gap-2">
+				<ProjectDropdown />
+			</div>
+			<nav className="flex items-center gap-2">
+				<ExportButton />
+				<ThemeToggle />
+			</nav>
+		</header>
+	);
+}
+
+function ProjectDropdown() {
+	const [openDialog, setOpenDialog] = useState<
+		"delete" | "rename" | "shortcuts" | null
+	>(null);
+	const [isExiting, setIsExiting] = useState(false);
+	const router = useRouter();
+	const editor = useEditor();
+	const activeProject = editor.project.getActive();
 
-  const handleNameSave = async (newName: string) => {
-    console.log("handleNameSave", newName);
-    if (activeProject && newName.trim() && newName !== activeProject.name) {
-      try {
-        await renameProject(activeProject.id, newName.trim());
-        setIsRenameDialogOpen(false);
-      } catch (error) {
-        console.error("Failed to rename project:", error);
-      }
-    }
-  };
+	const handleExit = async () => {
+		if (isExiting) return;
+		setIsExiting(true);
 
-  const handleDelete = () => {
-    if (activeProject) {
-      deleteProject(activeProject.id);
-      setIsDeleteDialogOpen(false);
-      router.push("/projects");
-    }
-  };
+		try {
+			await editor.project.prepareExit();
+			editor.project.closeProject();
+		} catch (error) {
+			console.error("Failed to prepare project exit:", error);
+		} finally {
+			editor.project.closeProject();
+			router.push("/projects");
+		}
+	};
 
-  const leftContent = (
-    <div className="flex items-center gap-2">
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="secondary"
-            className="h-auto py-1.5 px-2.5 flex items-center justify-center"
-          >
-            <ChevronDown className="text-muted-foreground" />
-            <span className="text-[0.85rem] mr-2">{activeProject?.name}</span>
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start" className="w-40 z-100">
-          <Link href="/projects">
-            <DropdownMenuItem className="flex items-center gap-1.5">
-              <ArrowLeft className="h-4 w-4" />
-              Projects
-            </DropdownMenuItem>
-          </Link>
-          <DropdownMenuItem
-            className="flex items-center gap-1.5"
-            onClick={() => setIsRenameDialogOpen(true)}
-          >
-            <SquarePen className="h-4 w-4" />
-            Rename project
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            variant="destructive"
-            className="flex items-center gap-1.5"
-            onClick={() => setIsDeleteDialogOpen(true)}
-          >
-            <Trash className="h-4 w-4" />
-            Delete Project
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem asChild>
-            <Link
-              href="https://discord.gg/zmR9N35cjK"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center gap-1.5"
-            >
-              <FaDiscord className="h-4 w-4" />
-              Discord
-            </Link>
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <RenameProjectDialog
-        isOpen={isRenameDialogOpen}
-        onOpenChange={setIsRenameDialogOpen}
-        onConfirm={handleNameSave}
-        projectName={activeProject?.name || ""}
-      />
-      <DeleteProjectDialog
-        isOpen={isDeleteDialogOpen}
-        onOpenChange={setIsDeleteDialogOpen}
-        onConfirm={handleDelete}
-        projectName={activeProject?.name || ""}
-      />
-    </div>
-  );
+	const handleSaveProjectName = async (newName: string) => {
+		if (
+			activeProject &&
+			newName.trim() &&
+			newName !== activeProject.metadata.name
+		) {
+			try {
+				await editor.project.renameProject({
+					id: activeProject.metadata.id,
+					name: newName.trim(),
+				});
+			} catch (error) {
+				toast.error("Failed to rename project", {
+					description:
+						error instanceof Error ? error.message : "Please try again",
+				});
+			} finally {
+				setOpenDialog(null);
+			}
+		}
+	};
 
-  const rightContent = (
-    <nav className="flex items-center gap-2">
-      <PanelPresetSelector />
-      <KeyboardShortcutsHelp />
-      <ExportButton />
-      <ThemeToggle />
-    </nav>
-  );
+	const handleDeleteProject = async () => {
+		if (activeProject) {
+			try {
+				await editor.project.deleteProjects({
+					ids: [activeProject.metadata.id],
+				});
+				router.push("/projects");
+			} catch (error) {
+				toast.error("Failed to delete project", {
+					description:
+						error instanceof Error ? error.message : "Please try again",
+				});
+			} finally {
+				setOpenDialog(null);
+			}
+		}
+	};
 
-  return (
-    <HeaderBase
-      leftContent={leftContent}
-      rightContent={rightContent}
-      className="bg-background h-[3.2rem] px-3 items-center mt-0.5"
-    />
-  );
+	return (
+		<>
+			<DropdownMenu>
+				<DropdownMenuTrigger asChild>
+					<Button
+						variant="secondary"
+						className="flex h-auto items-center justify-center px-2.5 py-1.5"
+					>
+						<ChevronDown className="text-muted-foreground" />
+						<span className="mr-2 text-[0.85rem]">
+							{activeProject?.metadata.name}
+						</span>
+					</Button>
+				</DropdownMenuTrigger>
+				<DropdownMenuContent align="start" className="z-100 w-52">
+					<DropdownMenuItem
+						className="flex items-center gap-1.5"
+						onClick={handleExit}
+						disabled={isExiting}
+					>
+						<HugeiconsIcon icon={ArrowLeft02Icon} className="size-4" />
+						Exit project
+					</DropdownMenuItem>
+					<DropdownMenuItem
+						className="flex items-center gap-1.5"
+						onClick={() => setOpenDialog("rename")}
+					>
+						<HugeiconsIcon icon={Edit03Icon} className="size-4" />
+						Rename project
+					</DropdownMenuItem>
+					<DropdownMenuItem
+						variant="destructive"
+						className="flex items-center gap-1.5"
+						onClick={() => setOpenDialog("delete")}
+					>
+						<HugeiconsIcon icon={Delete02Icon} className="size-4" />
+						Delete project
+					</DropdownMenuItem>
+					<DropdownMenuSeparator />
+					<DropdownMenuItem
+						className="flex items-center gap-1.5"
+						onClick={() => setOpenDialog("shortcuts")}
+					>
+						<HugeiconsIcon icon={CommandIcon} className="size-4" />
+						Keyboard shortcuts
+					</DropdownMenuItem>
+					<DropdownMenuItem asChild>
+						<Link
+							href={SOCIAL_LINKS.discord}
+							target="_blank"
+							rel="noopener noreferrer"
+							className="flex items-center gap-1.5"
+						>
+							<FaDiscord className="size-4" />
+							Discord
+						</Link>
+					</DropdownMenuItem>
+				</DropdownMenuContent>
+			</DropdownMenu>
+			<RenameProjectDialog
+				isOpen={openDialog === "rename"}
+				onOpenChange={(isOpen) => setOpenDialog(isOpen ? "rename" : null)}
+				onConfirm={(newName) => handleSaveProjectName(newName)}
+				projectName={activeProject?.metadata.name || ""}
+			/>
+			<DeleteProjectDialog
+				isOpen={openDialog === "delete"}
+				onOpenChange={(isOpen) => setOpenDialog(isOpen ? "delete" : null)}
+				onConfirm={handleDeleteProject}
+				projectNames={[activeProject?.metadata.name || ""]}
+			/>
+			<ShortcutsDialog
+				isOpen={openDialog === "shortcuts"}
+				onOpenChange={(isOpen) => setOpenDialog(isOpen ? "shortcuts" : null)}
+			/>
+		</>
+	);
 }