Update src/components/App.tsx

src/components/App.tsx

@@ -9,7 +9,6 @@ import DeployButton from "./deploy-button/deploy-button";
 import { defaultHTML } from "../utils/consts";
 import Tabs from "./tabs/tabs";
 import AskAI from "./ask-ai/ask-ai";
-import { Auth } from "../utils/types";
 import Preview from "./preview/preview";
 import RedirectModal from "./redirect-modal/redirect-modal";
 
@@ -19,58 +18,34 @@ function App() {
   const preview = useRef<HTMLDivElement>(null);
   const editor = useRef<HTMLDivElement>(null);
   const resizer = useRef<HTMLDivElement>(null);
-  // Removed editorRef
 
   const [isResizing, setIsResizing] = useState(false);
   const [error, setError] = useState(false);
   const [html, setHtml] = useState((htmlStorage as string) ?? defaultHTML);
   const [isAiWorking, setisAiWorking] = useState(false);
-  const [auth, setAuth] = useState<Auth | undefined>(undefined);
   const [showRedirectModal, setShowRedirectModal] = useState(true);
 
-  const fetchMe = async () => {
-    const res = await fetch("/api/@me");
-    if (res.ok) {
-      const data = await res.json();
-      setAuth(data);
-    } else {
-      setAuth(undefined);
-    }
-  };
-
-  /**
-   * Resets the layout based on screen size
-   * - For desktop: Sets editor to 1/3 width and preview to 2/3
-   * - For mobile: Removes inline styles to let CSS handle it
-   */
   const resetLayout = () => {
     if (!editor.current || !preview.current) return;
 
-    // lg breakpoint is 1024px based on useBreakpoint definition and Tailwind defaults
     if (window.innerWidth >= 1024) {
-      // Set initial 1/3 - 2/3 sizes for large screens, accounting for resizer width
-      const resizerWidth = resizer.current?.offsetWidth ?? 8; // w-2 = 0.5rem = 8px
+      const resizerWidth = resizer.current?.offsetWidth ?? 8;
       const availableWidth = window.innerWidth - resizerWidth;
-      const initialEditorWidth = availableWidth / 3; // Editor takes 1/3 of space
-      const initialPreviewWidth = availableWidth - initialEditorWidth; // Preview takes 2/3
+      const initialEditorWidth = availableWidth / 3;
+      const initialPreviewWidth = availableWidth - initialEditorWidth;
       editor.current.style.width = `${initialEditorWidth}px`;
       preview.current.style.width = `${initialPreviewWidth}px`;
     } else {
-      // Remove inline styles for smaller screens, let CSS flex-col handle it
       editor.current.style.width = "";
       preview.current.style.width = "";
     }
   };
 
-  /**
-   * Handles resizing when the user drags the resizer
-   * Ensures minimum widths are maintained for both panels
-   */
   const handleResize = (e: MouseEvent) => {
     if (!editor.current || !preview.current || !resizer.current) return;
 
     const resizerWidth = resizer.current.offsetWidth;
-    const minWidth = 100; // Minimum width for editor/preview
+    const minWidth = 100;
     const maxWidth = window.innerWidth - resizerWidth - minWidth;
 
     const editorWidth = e.clientX;
@@ -97,7 +72,6 @@ function App() {
     document.removeEventListener("mouseup", handleMouseUp);
   };
 
-  // Prevent accidental navigation away when AI is working or content has changed
   useEvent("beforeunload", (e) => {
     if (isAiWorking || html !== defaultHTML) {
       e.preventDefault();
@@ -105,27 +79,19 @@ function App() {
     }
   });
 
-  // Initialize component on mount
   useMount(() => {
-    // Fetch user data
-    fetchMe();
-
-    // Restore content from storage if available
     if (htmlStorage) {
       removeHtmlStorage();
       toast.warn("Previous HTML content restored from local storage.");
     }
 
-    // Set initial layout based on window size
     resetLayout();
 
-    // Attach event listeners
     if (!resizer.current) return;
     resizer.current.addEventListener("mousedown", handleMouseDown);
     window.addEventListener("resize", resetLayout);
   });
 
-  // Clean up event listeners on unmount
   useUnmount(() => {
     document.removeEventListener("mousemove", handleResize);
     document.removeEventListener("mouseup", handleMouseUp);
@@ -152,11 +118,10 @@ function App() {
             setHtml(defaultHTML);
             setError(false);
             removeHtmlStorage();
-            // Removed editorRef scroll logic
           }
         }}
       >
-        <DeployButton html={html} error={error} auth={auth} />
+        <DeployButton html={html} error={error} />
       </Header>
       <main className="max-lg:flex-col flex w-full">
         <div
@@ -191,18 +156,13 @@ function App() {
               setHtml(newValue);
               setError(false);
             }}
-            // Removed onMount for editorRef
           />
           <AskAI
             html={html}
-            setHtml={setHtml} // Used for both full and diff updates now
-            // Removed editorRef prop
+            setHtml={setHtml}
             isAiWorking={isAiWorking}
             setisAiWorking={setisAiWorking}
-            onScrollToBottom={() => {
-              // Consider if scrolling is still needed here, maybe based on html length change?
-              // For now, removing the direct editor scroll.
-            }}
+            onScrollToBottom={() => {}}
           />
         </div>
         <div