fix mobile

components/editor/ask-ai/fake-ask.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useLocalStorage } from "react-use";
-import { ArrowUp } from "lucide-react";
+import { ArrowUp, Dice1, Dice6 } from "lucide-react";
 import { useRouter } from "next/navigation";
 
 import { Button } from "@/components/ui/button";
@@ -8,6 +8,26 @@ import { useLoginModal } from "@/components/contexts/login-context";
 import { PromptBuilder } from "./prompt-builder";
 import { EnhancedSettings } from "@/types";
 import { Settings } from "./settings";
+import classNames from "classnames";
+
+const prompts = [
+  "Create a landing page for a SaaS product, with a hero section, a features section, a pricing section, and a call to action section.",
+  "Create a portfolio website for a designer, with a hero section, a projects section, a about section, and a contact section.",
+  "Create a blog website for a writer, with a hero section, a blog section, a about section, and a contact section.",
+  "Create a Tic Tac Toe game, with a game board, a history section, and a score section.",
+  "Create a Weather App, with a search bar, a weather section, and a forecast section.",
+  "Create a Calculator, with a calculator section, and a history section.",
+  "Create a Todo List, with a todo list section, and a history section.",
+  "Create a Calendar, with a calendar section, and a history section.",
+  "Create a Music Player, with a music player section, and a history section.",
+  "Create a Quiz App, with a quiz section, and a history section.",
+  "Create a Pomodoro Timer, with a timer section, and a history section.",
+  "Create a Notes App, with a notes section, and a history section.",
+  "Create a Task Manager, with a task list section, and a history section.",
+  "Create a Password Generator, with a password generator section, and a history section.",
+  "Create a Currency Converter, with a currency converter section, and a history section.",
+  "Create a Dictionary, with a dictionary section, and a history section.",
+];
 
 export const FakeAskAi = () => {
   const router = useRouter();
@@ -21,20 +41,27 @@ export const FakeAskAi = () => {
       theme: undefined,
     });
   const [, setPromptStorage] = useLocalStorage("prompt", "");
+  const [randomPromptLoading, setRandomPromptLoading] = useState(false);
 
   const callAi = async () => {
     setPromptStorage(prompt);
     router.push("/projects/new");
   };
 
-  // todo redirect to login + set prompt in storage, then redirect to projects/new + set the prompt in the state
+  const randomPrompt = () => {
+    setRandomPromptLoading(true);
+    setTimeout(() => {
+      setPrompt(prompts[Math.floor(Math.random() * prompts.length)]);
+      setRandomPromptLoading(false);
+    }, 400);
+  };
 
   return (
     <div className="p-3 w-full max-w-xl mx-auto">
       <div className="relative bg-neutral-800 border border-neutral-700 rounded-2xl ring-[4px] focus-within:ring-neutral-500/30 focus-within:border-neutral-600 ring-transparent z-20 w-full group">
-        <div className="w-full relative flex items-center justify-between">
+        <div className="w-full relative flex items-start justify-between pr-4 pt-4">
           <textarea
-            className="w-full bg-transparent text-sm outline-none text-white placeholder:text-neutral-400 p-4 resize-none"
+            className="w-full bg-transparent text-sm outline-none text-white placeholder:text-neutral-400 px-4 pb-4 resize-none"
             placeholder="Ask DeepSite anything..."
             value={prompt}
             onChange={(e) => setPrompt(e.target.value)}
@@ -44,6 +71,18 @@ export const FakeAskAi = () => {
               }
             }}
           />
+          <Button
+            size="iconXs"
+            variant="outline"
+            className="!rounded-md"
+            onClick={() => randomPrompt()}
+          >
+            <Dice6
+              className={classNames("size-4", {
+                "animate-spin animation-duration-500": randomPromptLoading,
+              })}
+            />
+          </Button>
         </div>
         <div className="flex items-center justify-between gap-2 px-4 pb-3 mt-2">
           <div className="flex-1 flex items-center justify-start gap-1.5 flex-wrap">

components/editor/header/index.tsx

@@ -101,7 +101,8 @@ export function Header() {
             <UserMenu className="!pl-1 !pr-3 !py-1 !h-auto" />
           ) : (
             <Button size="sm" onClick={openLoginWindow}>
-              Start Vibe Coding
+              <span className="max-lg:hidden">Start Vibe Coding</span>
+              <span className="lg:hidden">Log In</span>
               <ArrowRight className="size-4" />
             </Button>
           )}

components/editor/index.tsx

@@ -51,8 +51,8 @@ export const AppEditor = ({
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
 
   useMount(() => {
-    if (isNew) {
-      setPages(pagesStorage || []);
+    if (isNew && pagesStorage) {
+      setPages(pagesStorage);
       removePagesStorage();
     }
   });

components/editor/live-preview/index.tsx

@@ -118,7 +118,7 @@ export const LivePreview = forwardRef<LivePreviewRef, LivePreviewProps>(
         <div
           className={classNames(
             "flex flex-col animate-in fade-in duration-300",
-            isMaximized ? "w-[60dvw] h-[80dvh]" : "w-80 h-96"
+            isMaximized ? "w-[90dvw] lg:w-[60dvw] h-[80dvh]" : "w-80 h-96"
           )}
         >
           <div className="flex items-center justify-between p-3 border-b border-neutral-200">

components/editor/preview/index.tsx

@@ -212,7 +212,7 @@ export const Preview = forwardRef<LivePreviewRef, { isNew: boolean }>(
         className={classNames(
           "bg-neutral-900/30 w-full h-[calc(100dvh-57px)] flex flex-col items-center justify-center relative z-1 lg:border-l border-neutral-800",
           {
-            "max-lg:h-0": currentTab === "chat",
+            "max-lg:h-0 overflow-hidden": currentTab === "chat",
             "max-lg:h-full": currentTab === "preview",
           }
         )}