Update components/editor/index.tsx

components/editor/index.tsx

@@ -27,11 +27,10 @@ import { SaveButton } from "./save-button";
 import { LoadProject } from "../my-projects/load-project";
 import { isTheSameHtml } from "@/lib/compare-html-diff";
 import { ListPages } from "./pages";
-import { AiThinking } from "./ai-thinking"; // Import the new component
 
 export const AppEditor = ({
   project,
-  initialPages,
+  pages: initialPages,
   images,
   isNew,
 }: {
@@ -58,6 +57,7 @@ export const AppEditor = ({
   const editor = useRef<HTMLDivElement>(null);
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
   const resizer = useRef<HTMLDivElement>(null);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const monacoRef = useRef<any>(null);
 
   const [currentTab, setCurrentTab] = useState("chat");
@@ -65,7 +65,6 @@ export const AppEditor = ({
   const [device, setDevice] = useState<"desktop" | "mobile">("desktop");
   const [isResizing, setIsResizing] = useState(false);
   const [isAiWorking, setIsAiWorking] = useState(false);
-  const [aiThinking, setAiThinking] = useState<string | null>(null); // State for AI thinking text
   const [isEditableModeEnabled, setIsEditableModeEnabled] = useState(false);
   const [selectedElement, setSelectedElement] = useState<HTMLElement | null>(
     null
@@ -74,14 +73,18 @@ export const AppEditor = ({
 
   const resetLayout = () => {
     if (!editor.current || !preview.current) return;
+
+    // lg breakpoint is 1024px based on useBreakpoint definition and Tailwind defaults
     if (window.innerWidth >= 1024) {
-      const resizerWidth = resizer.current?.offsetWidth ?? 8;
+      // 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 availableWidth = window.innerWidth - resizerWidth;
-      const initialEditorWidth = availableWidth / 3;
-      const initialPreviewWidth = availableWidth - initialEditorWidth;
+      const initialEditorWidth = availableWidth / 3; // Editor takes 1/3 of space
+      const initialPreviewWidth = availableWidth - initialEditorWidth; // Preview takes 2/3
       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 = "";
     }
@@ -89,9 +92,11 @@ export const AppEditor = ({
 
   const handleResize = (e: MouseEvent) => {
     if (!editor.current || !preview.current || !resizer.current) return;
+
     const resizerWidth = resizer.current.offsetWidth;
-    const minWidth = 100;
+    const minWidth = 100; // Minimum width for editor/preview
     const maxWidth = window.innerWidth - resizerWidth - minWidth;
+
     const editorWidth = e.clientX;
     const clampedEditorWidth = Math.max(
       minWidth,
@@ -99,6 +104,7 @@ export const AppEditor = ({
     );
     const calculatedPreviewWidth =
       window.innerWidth - clampedEditorWidth - resizerWidth;
+
     editor.current.style.width = `${clampedEditorWidth}px`;
     preview.current.style.width = `${calculatedPreviewWidth}px`;
   };
@@ -134,12 +140,12 @@ export const AppEditor = ({
       removeHtmlStorage();
       toast.warning("Previous HTML content restored from local storage.");
     }
+
     resetLayout();
     if (!resizer.current) return;
     resizer.current.addEventListener("mousedown", handleMouseDown);
     window.addEventListener("resize", resetLayout);
   });
-
   useUnmount(() => {
     document.removeEventListener("mousemove", handleResize);
     document.removeEventListener("mouseup", handleMouseUp);
@@ -149,6 +155,7 @@ export const AppEditor = ({
     window.removeEventListener("resize", resetLayout);
   });
 
+  // Prevent accidental navigation away when AI is working or content has changed
   useEvent("beforeunload", (e) => {
     if (isAiWorking || !isTheSameHtml(currentPageData?.html)) {
       e.preventDefault();
@@ -158,12 +165,15 @@ export const AppEditor = ({
 
   useUpdateEffect(() => {
     if (currentTab === "chat") {
+      // Reset editor width when switching to reasoning tab
       resetLayout();
+      // re-add the event listener for resizing
       if (resizer.current) {
         resizer.current.addEventListener("mousedown", handleMouseDown);
       }
     } else {
       if (preview.current) {
+        // Reset preview width when switching to preview tab
         preview.current.style.width = "100%";
       }
     }
@@ -190,6 +200,7 @@ export const AppEditor = ({
             router.push(`/projects/${project.space_id}`);
           }}
         />
+        {/* for these buttons pass the whole pages */}
         {project?._id ? (
           <SaveButton pages={pages} prompts={prompts} />
         ) : (
@@ -243,25 +254,29 @@ export const AppEditor = ({
                   toast.success("HTML copied to clipboard!");
                 }}
               />
-              {aiThinking && <AiThinking text={aiThinking} />}
               <Editor
                 defaultLanguage="html"
                 theme="vs-dark"
                 className={classNames(
                   "h-full bg-neutral-900 transition-all duration-200 absolute left-0 top-0",
-                  { "pointer-events-none": isAiWorking }
+                  {
+                    "pointer-events-none": isAiWorking,
+                  }
                 )}
                 options={{
                   colorDecorators: true,
                   fontLigatures: true,
                   theme: "vs-dark",
                   minimap: { enabled: false },
-                  scrollbar: { horizontal: "hidden" },
+                  scrollbar: {
+                    horizontal: "hidden",
+                  },
                   wordWrap: "on",
                 }}
                 value={currentPageData.html}
                 onChange={(value) => {
                   const newValue = value ?? "";
+                  // setHtml(newValue);
                   setPages((prev) =>
                     prev.map((page) =>
                       page.path === currentPageData.path
@@ -282,7 +297,6 @@ export const AppEditor = ({
                 currentPage={currentPageData}
                 htmlHistory={htmlHistory}
                 previousPrompts={prompts}
-                setAiThinking={setAiThinking} // Pass the setter function
                 onSuccess={(newPages, p: string) => {
                   const currentHistory = [...htmlHistory];
                   currentHistory.unshift({
@@ -293,9 +307,30 @@ export const AppEditor = ({
                   setHtmlHistory(currentHistory);
                   setSelectedElement(null);
                   setSelectedFiles([]);
+                  // if xs or sm
                   if (window.innerWidth <= 1024) {
                     setCurrentTab("preview");
                   }
+                  // if (updatedLines && updatedLines?.length > 0) {
+                  //   const decorations = updatedLines.map((line) => ({
+                  //     range: new monacoRef.current.Range(
+                  //       line[0],
+                  //       1,
+                  //       line[1],
+                  //       1
+                  //     ),
+                  //     options: {
+                  //       inlineClassName: "matched-line",
+                  //     },
+                  //   }));
+                  //   setTimeout(() => {
+                  //     editorRef?.current
+                  //       ?.getModel()
+                  //       ?.deltaDecorations([], decorations);
+
+                  //     editorRef.current?.revealLine(updatedLines[0][0]);
+                  //   }, 100);
+                  // }
                 }}
                 setPages={setPages}
                 pages={pages}