Load existing project

app/api/me/projects/[namespace]/[repoId]/route.ts

@@ -41,11 +41,11 @@ export async function GET(
       additionalFields: ["author"],
     });
 
-    if (!space || space.sdk !== "static" || space.private) {
+    if (!space || space.sdk !== "static") {
       return NextResponse.json(
         {
           ok: false,
-          error: "Space is not a static space or is private",
+          error: "Space is not a static space",
         },
         { status: 404 }
       );
@@ -160,3 +160,76 @@ export async function PUT(
   );
   return NextResponse.json({ ok: true }, { status: 200 });
 }
+
+export async function POST(
+  req: NextRequest,
+  { params }: { params: Promise<{ namespace: string; repoId: string }> }
+) {
+  const user = await isAuthenticated();
+
+  if (user instanceof NextResponse || !user) {
+    return NextResponse.json({ message: "Unauthorized" }, { status: 401 });
+  }
+
+  await dbConnect();
+  const param = await params;
+  const { namespace, repoId } = param;
+
+  const space = await spaceInfo({
+    name: namespace + "/" + repoId,
+    accessToken: user.token as string,
+    additionalFields: ["author"],
+  });
+
+  if (!space || space.sdk !== "static") {
+    return NextResponse.json(
+      {
+        ok: false,
+        error: "Space is not a static space",
+      },
+      { status: 404 }
+    );
+  }
+  if (space.author !== user.name) {
+    return NextResponse.json(
+      {
+        ok: false,
+        error: "Space does not belong to the authenticated user",
+      },
+      { status: 403 }
+    );
+  }
+
+  const project = await Project.findOne({
+    user_id: user.id,
+    space_id: `${namespace}/${repoId}`,
+  }).lean();
+  if (project) {
+    return NextResponse.json(
+      {
+        ok: false,
+        error: "Project already exists",
+      },
+      { status: 400 }
+    );
+  }
+
+  const newProject = new Project({
+    user_id: user.id,
+    space_id: `${namespace}/${repoId}`,
+    prompts: [],
+  });
+
+  await newProject.save();
+  return NextResponse.json(
+    {
+      ok: true,
+      project: {
+        id: newProject._id,
+        space_id: newProject.space_id,
+        prompts: newProject.prompts,
+      },
+    },
+    { status: 201 }
+  );
+}

components/editor/index.tsx

@@ -3,7 +3,7 @@ import { useRef, useState } from "react";
 import { toast } from "sonner";
 import { editor } from "monaco-editor";
 import Editor from "@monaco-editor/react";
-import { CopyIcon } from "lucide-react";
+import { CopyIcon, Import } from "lucide-react";
 import {
   useCopyToClipboard,
   useEvent,
@@ -24,10 +24,13 @@ import { AskAI } from "@/components/editor/ask-ai";
 import { DeployButton } from "./deploy-button";
 import { Project } from "@/types";
 import { SaveButton } from "./save-button";
+import { Button } from "@/components/ui/button";
+import { useUser } from "@/hooks/useUser";
 
 export const AppEditor = ({ project }: { project?: Project | null }) => {
   const [htmlStorage, , removeHtmlStorage] = useLocalStorage("html_content");
   const [, copyToClipboard] = useCopyToClipboard();
+  const { user, openLoginWindow } = useUser();
   const { html, setHtml, htmlHistory, setHtmlHistory, prompts, setPrompts } =
     useEditor(project?.html ?? (htmlStorage as string) ?? defaultHTML);
   // get query params from URL
@@ -173,6 +176,16 @@ export const AppEditor = ({ project }: { project?: Project | null }) => {
   return (
     <section className="h-[100dvh] bg-neutral-950 flex flex-col">
       <Header tab={currentTab} onNewTab={setCurrentTab}>
+        <Button
+          variant="outline"
+          onClick={() => {
+            if (user?.id) router.push("/projects");
+            else openLoginWindow();
+          }}
+        >
+          <Import className="size-4 mr-1.5" />
+          Load Project
+        </Button>
         {project?._id ? (
           <SaveButton html={html} prompts={prompts} />
         ) : (

components/my-projects/index.tsx

@@ -1,28 +1,43 @@
 "use client";
+import { Plus } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+
 import { useUser } from "@/hooks/useUser";
 import { Project } from "@/types";
 import { redirect } from "next/navigation";
 import { ProjectCard } from "./project-card";
-import { Plus } from "lucide-react";
-import Link from "next/link";
+import { LoadProject } from "./load-project";
 
-export function MyProjects({ projects }: { projects: Project[] }) {
+export function MyProjects({
+  projects: initialProjects,
+}: {
+  projects: Project[];
+}) {
   const { user } = useUser();
   if (!user) {
     redirect("/");
   }
+  const [projects, setProjects] = useState<Project[]>(initialProjects || []);
   return (
     <>
       <section className="max-w-[86rem] py-12 px-4 mx-auto">
-        <div className="text-left">
-          <h1 className="text-3xl font-bold text-white">
-            <span className="capitalize">{user.fullname}</span>&apos;s DeepSite
-            Projects
-          </h1>
-          <p className="text-muted-foreground text-base mt-1 max-w-xl">
-            Create, manage, and explore your DeepSite projects.
-          </p>
-        </div>
+        <header className="flex items-center justify-between">
+          <div className="text-left">
+            <h1 className="text-3xl font-bold text-white">
+              <span className="capitalize">{user.fullname}</span>&apos;s
+              DeepSite Projects
+            </h1>
+            <p className="text-muted-foreground text-base mt-1 max-w-xl">
+              Create, manage, and explore your DeepSite projects.
+            </p>
+          </div>
+          <LoadProject
+            addProject={(project: Project) => {
+              setProjects((prev) => [...prev, project]);
+            }}
+          />
+        </header>
         <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
           <Link
             href="/projects/new"

components/my-projects/load-project.tsx

@@ -0,0 +1,150 @@
+import { useState } from "react";
+import { Import } from "lucide-react";
+
+import { Project } from "@/types";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import Loading from "@/components/loading";
+import { Input } from "../ui/input";
+import { toast } from "sonner";
+import { api } from "@/lib/api";
+
+export const LoadProject = ({
+  addProject,
+}: {
+  addProject: (project: Project) => void;
+}) => {
+  const [open, setOpen] = useState(false);
+  const [url, setUrl] = useState<string>("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const checkIfUrlIsValid = (url: string) => {
+    // should match a hugging face spaces URL like: https://huggingface.co/spaces/username/project or https://hf.co/spaces/username/project
+    const urlPattern = new RegExp(
+      /^(https?:\/\/)?(huggingface\.co|hf\.co)\/spaces\/([\w-]+)\/([\w-]+)$/,
+      "i"
+    );
+    return urlPattern.test(url);
+  };
+
+  const handleClick = async () => {
+    if (isLoading) return; // Prevent multiple clicks while loading
+    if (!url) {
+      toast.error("Please enter a URL.");
+      return;
+    }
+    if (!checkIfUrlIsValid(url)) {
+      toast.error("Please enter a valid Hugging Face Spaces URL.");
+      return;
+    }
+
+    const [username, namespace] = url
+      .replace("https://huggingface.co/spaces/", "")
+      .replace("https://hf.co/spaces/", "")
+      .split("/");
+
+    setIsLoading(true);
+    try {
+      const response = await api.post(`/me/projects/${username}/${namespace}`);
+      console.log("response", response);
+      toast.success("Project imported successfully!");
+      setOpen(false);
+      setUrl("");
+      addProject(response.data.project);
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (error: any) {
+      toast.error(
+        error?.response?.data?.error ?? "Failed to import the project."
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline">
+          <Import className="size-4 mr-1.5" />
+          Load existing Project
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md !p-0 !rounded-3xl !bg-white !border-neutral-100 overflow-hidden text-center">
+        <DialogTitle className="hidden" />
+        <header className="bg-neutral-50 p-6 border-b border-neutral-200/60">
+          <div className="flex items-center justify-center -space-x-4 mb-3">
+            <div className="size-11 rounded-full bg-pink-200 shadow-2xs flex items-center justify-center text-2xl opacity-50">
+              🎨
+            </div>
+            <div className="size-13 rounded-full bg-amber-200 shadow-2xl flex items-center justify-center text-3xl z-2">
+              🥳
+            </div>
+            <div className="size-11 rounded-full bg-sky-200 shadow-2xs flex items-center justify-center text-2xl opacity-50">
+              💎
+            </div>
+          </div>
+          <p className="text-2xl font-semibold text-neutral-950">
+            Import a Project
+          </p>
+          <p className="text-base text-neutral-500 mt-1.5">
+            Enter the URL of your Hugging Face Space to import an existing
+            project.
+          </p>
+        </header>
+        <main className="space-y-4 px-9 pb-9 pt-2">
+          <div>
+            <p className="text-sm text-neutral-700 mb-2">
+              Enter your Hugging Face Space
+            </p>
+            <Input
+              type="text"
+              placeholder="https://huggingface.com/spaces/username/project"
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+              onBlur={(e) => {
+                const inputUrl = e.target.value.trim();
+                if (!inputUrl) {
+                  setUrl("");
+                  return;
+                }
+                if (!checkIfUrlIsValid(inputUrl)) {
+                  toast.error("Please enter a valid URL.");
+                  return;
+                }
+                setUrl(inputUrl);
+              }}
+              className="!bg-white !border-neutral-300 !text-neutral-800 !placeholder:text-neutral-400 selection:!bg-blue-100"
+            />
+          </div>
+          <div>
+            <p className="text-sm text-neutral-700 mb-2">
+              Then, let&apos;s import it!
+            </p>
+            <Button
+              variant="black"
+              onClick={handleClick}
+              className="relative w-full"
+            >
+              {isLoading ? (
+                <>
+                  <Loading
+                    overlay={false}
+                    className="ml-2 size-4 animate-spin"
+                  />
+                  Fetching your Space...
+                </>
+              ) : (
+                <>Import your Space</>
+              )}
+            </Button>
+          </div>
+        </main>
+      </DialogContent>
+    </Dialog>
+  );
+};