mobile version improvement

src/components/App.tsx

@@ -26,6 +26,9 @@ function App() {
   const [html, setHtml] = useState((htmlStorage as string) ?? defaultHTML);
   const [isAiWorking, setisAiWorking] = useState(false);
   const [auth, setAuth] = useState<Auth | undefined>(undefined);
+  const [currentView, setCurrentView] = useState<"editor" | "preview">(
+    "editor"
+  );
 
   const fetchMe = async () => {
     const res = await fetch("/api/@me");
@@ -157,7 +160,15 @@ function App() {
         <DeployButton html={html} error={error} auth={auth} />
       </Header>
       <main className="max-lg:flex-col flex w-full">
-        <div ref={editor} className="w-full h-[30dvh] lg:h-full relative">
+        <div
+          ref={editor}
+          className={classNames(
+            "w-full h-[calc(100dvh-49px)] lg:h-[calc(100dvh-54px)] relative overflow-hidden transition-all duration-200",
+            {
+              "max-lg:h-0": currentView === "preview",
+            }
+          )}
+        >
           <Tabs />
           <div
             onClick={(e) => {
@@ -172,9 +183,9 @@ function App() {
               language="html"
               theme="vs-dark"
               className={classNames(
-                "h-[calc(30dvh-41px)] lg:h-[calc(100dvh-96px)]",
+                "h-[calc(100dvh-90px)] lg:h-[calc(100dvh-96px)]",
                 {
-                  "pointer-events-none": !isAiWorking,
+                  "pointer-events-none": isAiWorking,
                 }
               )}
               value={html}
@@ -196,6 +207,7 @@ function App() {
             setHtml={setHtml}
             isAiWorking={isAiWorking}
             setisAiWorking={setisAiWorking}
+            setView={setCurrentView}
             onScrollToBottom={() => {
               editorRef.current?.revealLine(
                 editorRef.current?.getModel()?.getLineCount() ?? 0
@@ -205,13 +217,14 @@ function App() {
         </div>
         <div
           ref={resizer}
-          className="bg-gray-700 hover:bg-blue-500 w-2 cursor-col-resize h-[calc(100dvh-54px)] max-lg:hidden"
+          className="bg-gray-700 hover:bg-blue-500 w-2 cursor-col-resize h-[calc(100dvh-53px)] max-lg:hidden"
         />
         <Preview
           html={html}
           isResizing={isResizing}
           isAiWorking={isAiWorking}
           ref={preview}
+          setView={setCurrentView}
         />
       </main>
     </div>

src/components/ask-ai/ask-ai.tsx

@@ -3,12 +3,13 @@ import { RiSparkling2Fill } from "react-icons/ri";
 import { GrSend } from "react-icons/gr";
 import classNames from "classnames";
 import { toast } from "react-toastify";
+import { useLocalStorage } from "react-use";
+import { MdPreview } from "react-icons/md";
 
 import Login from "../login/login";
 import { defaultHTML } from "./../../../utils/consts";
 import SuccessSound from "./../../assets/success.mp3";
 import Settings from "../settings/settings";
-import { useLocalStorage } from "react-use";
 
 function AskAI({
   html,
@@ -16,11 +17,13 @@ function AskAI({
   onScrollToBottom,
   isAiWorking,
   setisAiWorking,
+  setView,
 }: {
   html: string;
   setHtml: (html: string) => void;
   onScrollToBottom: () => void;
   isAiWorking: boolean;
+  setView: React.Dispatch<React.SetStateAction<"editor" | "preview">>;
   setisAiWorking: React.Dispatch<React.SetStateAction<boolean>>;
 }) {
   const [open, setOpen] = useState(false);
@@ -80,6 +83,7 @@ function AskAI({
             setisAiWorking(false);
             setHasAsked(true);
             audio.play();
+            setView("preview");
 
             // Now we have the complete HTML including </html>, so set it to be sure
             const finalDoc = contentResponse.match(
@@ -135,6 +139,15 @@ function AskAI({
         isAiWorking ? "animate-pulse" : ""
       }`}
     >
+      {defaultHTML !== html && (
+        <button
+          className="bg-white lg:hidden -translate-y-[calc(100%+8px)] absolute left-0 top-0 shadow-md text-gray-950 text-xs font-medium py-2 px-3 lg:px-4 rounded-lg flex items-center gap-2 border border-gray-100 hover:brightness-150 transition-all duration-100 cursor-pointer"
+          onClick={() => setView("preview")}
+        >
+          <MdPreview />
+          Back to Preview
+        </button>
+      )}
       <div className="w-full relative flex items-center justify-between">
         <RiSparkling2Fill className="text-lg lg:text-xl text-gray-500 group-focus-within:text-pink-500" />
         <input

src/components/deploy-button/deploy-button.tsx

@@ -76,8 +76,8 @@ function DeployButton({
   return (
     <div className="relative flex items-center justify-end">
       {auth && (
-        <p className="mr-3 text-sm text-gray-300">
-          Connected as{" "}
+        <p className="mr-3 text-xs lg:text-sm text-gray-300">
+          <span className="max-lg:hidden">Connected as </span>
           <a
             href={`https://huggingface.co/${auth.preferred_username}`}
             target="_blank"

src/components/header/header.tsx

@@ -11,7 +11,7 @@ function Header({
   children?: ReactNode;
 }) {
   return (
-    <header className="border-b border-gray-900 px-3 lg:px-6 py-2 flex justify-between items-center">
+    <header className="border-b border-gray-900 bg-gray-950 px-3 lg:px-6 py-2 flex justify-between items-center sticky top-0 max-lg:z-20">
       <div className="flex items-center justify-start gap-3">
         <h1 className="text-white text-lg lg:text-xl font-bold flex items-center justify-start">
           <img

src/components/preview/preview.tsx

@@ -2,16 +2,19 @@ import classNames from "classnames";
 import { useRef } from "react";
 import { TbReload } from "react-icons/tb";
 import { toast } from "react-toastify";
+import { FaLaptopCode } from "react-icons/fa6";
 
 function Preview({
   html,
   isResizing,
   isAiWorking,
+  setView,
   ref,
 }: {
   html: string;
   isResizing: boolean;
   isAiWorking: boolean;
+  setView: React.Dispatch<React.SetStateAction<"editor" | "preview">>;
   ref: React.RefObject<HTMLDivElement | null>;
 }) {
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
@@ -30,7 +33,7 @@ function Preview({
   return (
     <div
       ref={ref}
-      className="w-full border-l border-gray-900 bg-white h-[calc(70dvh-53px)] lg:h-[calc(100dvh-54px)] relative"
+      className="w-full border-l border-gray-900 bg-white h-[calc(100dvh-49px)] lg:h-[calc(100dvh-53px)] relative"
       onClick={(e) => {
         if (isAiWorking) {
           e.preventDefault();
@@ -47,13 +50,22 @@ function Preview({
         })}
         srcDoc={html}
       />
-      <button
-        className="bg-gray-950 shadow-md text-white text-xs lg:text-sm font-medium absolute bottom-3 lg:bottom-5 right-3 lg:right-5 py-2 px-3 lg:px-4 rounded-lg flex items-center gap-2 border border-gray-900 hover:brightness-150 transition-all duration-100 cursor-pointer"
-        onClick={handleRefreshIframe}
-      >
-        <TbReload />
-        Refresh Preview
-      </button>
+      <div className="flex items-center justify-start gap-3 absolute bottom-3 lg:bottom-5 max-lg:left-3 lg:right-5">
+        <button
+          className="lg:hidden bg-gray-950 shadow-md text-white text-xs lg:text-sm font-medium py-2 px-3 lg:px-4 rounded-lg flex items-center gap-2 border border-gray-900 hover:brightness-150 transition-all duration-100 cursor-pointer"
+          onClick={() => setView("editor")}
+        >
+          <FaLaptopCode />
+          Back to Editor
+        </button>
+        <button
+          className="bg-white lg:bg-gray-950 shadow-md text-gray-950 lg:text-white text-xs lg:text-sm font-medium py-2 px-3 lg:px-4 rounded-lg flex items-center gap-2 border border-gray-100 lg:border-gray-900 hover:brightness-150 transition-all duration-100 cursor-pointer"
+          onClick={handleRefreshIframe}
+        >
+          <TbReload />
+          Refresh Preview
+        </button>
+      </div>
     </div>
   );
 }

utils/consts.ts

@@ -29,9 +29,7 @@ export const defaultHTML = `<!DOCTYPE html>
       }
       @media screen and (max-width: 640px) {
         .arrow {
-          top: 12px;
-          left: 56px;
-          transform: rotate(180deg);
+          display: none;
         }
       }
     </style>