responsive issue

components/editor/footer/index.tsx

@@ -64,7 +64,7 @@ export function Footer({
         {user && <p className="text-neutral-700">|</p>}
         <Button size="sm" variant="secondary" onClick={onReset}>
           <MdAdd className="text-sm" />
-          <span>New Project</span>
+          New <span className="max-lg:hidden">Project</span>
         </Button>
         {htmlHistory && htmlHistory.length > 0 && (
           <>

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, Import } from "lucide-react";
+import { CopyIcon } from "lucide-react";
 import {
   useCopyToClipboard,
   useEvent,
@@ -24,13 +24,11 @@ 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";
+import { LoadProject } from "../my-projects/load-project";
 
 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
@@ -176,16 +174,11 @@ 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();
+        <LoadProject
+          onSuccess={(project: Project) => {
+            router.push(`/projects/${project.space_id}`);
           }}
-        >
-          <Import className="size-4 mr-1.5" />
-          Load Project
-        </Button>
+        />
         {project?._id ? (
           <SaveButton html={html} prompts={prompts} />
         ) : (

components/login-modal/index.tsx

@@ -12,7 +12,7 @@ export const LoginModal = ({
   description = "Log In through your Hugging Face account to continue using DeepSite and increase your monthly free limit.",
 }: {
   open: boolean;
-  html: string;
+  html?: string;
   onClose: React.Dispatch<React.SetStateAction<boolean>>;
   title?: string;
   description?: string;
@@ -20,7 +20,7 @@ export const LoginModal = ({
   const { openLoginWindow } = useUser();
   const [, setStorage] = useLocalStorage("html_content");
   const handleClick = async () => {
-    if (html !== defaultHTML) {
+    if (html && html !== defaultHTML) {
       setStorage(html);
     }
     openLoginWindow();

components/my-projects/index.tsx

@@ -22,7 +22,7 @@ export function MyProjects({
   return (
     <>
       <section className="max-w-[86rem] py-12 px-4 mx-auto">
-        <header className="flex items-center justify-between">
+        <header className="flex items-center justify-between max-lg:flex-col gap-4">
           <div className="text-left">
             <h1 className="text-3xl font-bold text-white">
               <span className="capitalize">{user.fullname}</span>&apos;s
@@ -33,7 +33,8 @@ export function MyProjects({
             </p>
           </div>
           <LoadProject
-            addProject={(project: Project) => {
+            fullXsBtn
+            onSuccess={(project: Project) => {
               setProjects((prev) => [...prev, project]);
             }}
           />

components/my-projects/load-project.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { useState } from "react";
 import { Import } from "lucide-react";
 
@@ -13,12 +14,19 @@ import Loading from "@/components/loading";
 import { Input } from "../ui/input";
 import { toast } from "sonner";
 import { api } from "@/lib/api";
+import { useUser } from "@/hooks/useUser";
+import { LoginModal } from "../login-modal";
 
 export const LoadProject = ({
-  addProject,
+  fullXsBtn = false,
+  onSuccess,
 }: {
-  addProject: (project: Project) => void;
+  fullXsBtn?: boolean;
+  onSuccess: (project: Project) => void;
 }) => {
+  const { user } = useUser();
+
+  const [openLoginModal, setOpenLoginModal] = useState(false);
   const [open, setOpen] = useState(false);
   const [url, setUrl] = useState<string>("");
   const [isLoading, setIsLoading] = useState(false);
@@ -55,7 +63,7 @@ export const LoadProject = ({
       toast.success("Project imported successfully!");
       setOpen(false);
       setUrl("");
-      addProject(response.data.project);
+      onSuccess(response.data.project);
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (error: any) {
       toast.error(
@@ -67,84 +75,122 @@ export const LoadProject = ({
   };
 
   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">
-              💎
+    <>
+      {!user ? (
+        <>
+          <Button
+            variant="outline"
+            className="max-lg:hidden"
+            onClick={() => setOpenLoginModal(true)}
+          >
+            <Import className="size-4 mr-1.5" />
+            Load existing Project
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            className="lg:hidden"
+            onClick={() => setOpenLoginModal(true)}
+          >
+            {fullXsBtn && <Import className="size-3.5 mr-1" />}
+            Load
+            {fullXsBtn && " existing Project"}
+          </Button>
+          <LoginModal
+            open={openLoginModal}
+            onClose={setOpenLoginModal}
+            title="Log In to load your Project"
+            description="Log In through Hugging Face to load an existing project and increase your free limit!"
+          />
+        </>
+      ) : (
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogTrigger asChild>
+            <div>
+              <Button variant="outline" className="max-lg:hidden">
+                <Import className="size-4 mr-1.5" />
+                Load existing Project
+              </Button>
+              <Button variant="outline" size="sm" className="lg:hidden">
+                {fullXsBtn && <Import className="size-3.5 mr-1" />}
+                Load
+                {fullXsBtn && " existing Project"}
+              </Button>
             </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>
+          </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>
+      )}
+    </>
   );
 };