feat: Improved UI

Author: iduspara

src/app/page.tsx

@@ -85,9 +85,9 @@ export default function FormBuilderPage() {
             </sup>
           </h2>
         </div>
-        <div className="p-2 flex-1 grid-cols-3 hidden md:grid">
-          <div className="col-span-1"></div>
-          <div className="col-span-1 flex justify-center">
+        <div className="p-2 flex-1 grid-cols-2 xl:grid-cols-3 hidden md:grid">
+          <div className="hidden xl:block col-span-1"></div>
+          <div className="col-span-1 flex xl:justify-center">
             <div className=" text-center flex flex-row items-center justify-center gap-1 border rounded-md h-9 px-4">
               <div
                 className="max-w-80 overflow-y-hidden whitespace-nowrap text-sm outline-none scrollbar-hide"
@@ -137,6 +137,7 @@ export default function FormBuilderPage() {
             size="sm"
             className="w-full cursor-pointer"
             onClick={handleGenerateCode}
+            disabled={rows.length === 0}
           >
             Generate Code
           </Button>
@@ -160,7 +161,7 @@ export default function FormBuilderPage() {
             <DndContext>
               <div className="flex w-full h-screen justify-between">
                 <SidebarLeft />
-                <main className="flex-1 overflow-auto relative bg-slate-50 bg-dotted pt-14">
+                <main className="flex-1 overflow-auto relative bg-slate-50 bg-dotted pt-14 scrollbar-hide">
                   <MainCanvas />
                 </main>
                 <SidebarRight />

src/components/form-builder/form-components/form-input.tsx

@@ -7,7 +7,10 @@ import { InputGroup } from "../sidebar/groups/input-group";
 import { GridGroup } from "../sidebar/groups/grid-group";
 import { cn, escapeHtml } from "@/lib/utils";
 import { ValidationGroup } from "../sidebar/groups/validation-group";
+
+
 export function FormInput(component: FormComponentModel) {
+
   return (
     <Input
       key={component.id}

src/components/form-builder/helpers/iframe.tsx

@@ -33,6 +33,21 @@ export const IFrame = forwardRef<HTMLIFrameElement, { children: React.ReactNode,
       }
     };
 
+    useEffect(() => {
+      if (!internalRef?.contentDocument?.body) return;
+
+      const resizeObserver = new ResizeObserver(() => {
+        const height = internalRef.contentDocument?.body.scrollHeight;
+        internalRef.style.height = `${height}px`;
+      });
+
+      resizeObserver.observe(internalRef.contentDocument.body);
+
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }, [internalRef]);
+
     return (
       <iframe 
         title="iframe" 

src/components/form-builder/mainCanvas.tsx

@@ -82,7 +82,7 @@ export function MainCanvas() {
       >
         <IFrame
           ref={editorIframeRef}
-          className={cn(`${viewportEditorStyles[viewport]}`, "mx-auto scrollbar-hide")}
+          className={cn(`${viewportEditorStyles[viewport]}`, "mx-auto")}
         >
           <Card className="mt-6">
             <CardContent>

src/components/form-builder/sidebar/sidebarRight.tsx

@@ -3,26 +3,35 @@
 import { Sidebar, SidebarContent } from "@/components/ui/sidebar";
 
 import { useFormBuilderStore } from "@/stores/form-builder-store";
-import { ChevronDown } from "lucide-react";
+import { ChevronDown, ChevronUp } from "lucide-react";
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
 import { getComponentViews } from "@/config/available-components";
-import { ReactNode } from "react";
+import { ReactNode, useState } from "react";
 
 interface PropertySectionProps {
   title: string;
   children: ReactNode;
+  isOpen: boolean;
 }
 
-function PropertySection({ title, children }: PropertySectionProps) {
+function PropertySection({ title, children, isOpen }: PropertySectionProps) {
+  const [isOpenState, setIsOpenState] = useState(isOpen);
   return (
-    <Collapsible className="border-b" defaultOpen={true}>
-      <CollapsibleTrigger className="flex items-center justify-between w-full p-4 cursor-pointer">
+    <Collapsible className="border-b" defaultOpen={isOpenState}>
+      <CollapsibleTrigger
+        className="flex items-center justify-between w-full p-4 cursor-pointer"
+        onClick={() => setIsOpenState(!isOpenState)}
+      >
         <span className="font-normal text-sm">{title}</span>
-        <ChevronDown className="h-4 w-4" />
+        {isOpenState ? (
+          <ChevronUp className="h-4 w-4" />
+        ) : (
+          <ChevronDown className="h-4 w-4" />
+        )}
       </CollapsibleTrigger>
       <CollapsibleContent className="p-4 pt-0 space-y-2">
         {children}
@@ -32,14 +41,12 @@ function PropertySection({ title, children }: PropertySectionProps) {
 }
 
 const PROPERTY_SECTIONS = [
-  { key: "options", title: "Options" },
-  { key: "base", title: "Base" },
-  { key: "button", title: "Button" },
-  { key: "input", title: "Input" },
-  { key: "label", title: "Label" },
-  { key: "grid", title: "Grid layout" },
-  { key: "html", title: "HTML" },
-  { key: "validation", title: "Validation" },
+  { key: "options", title: "Options", isOpen: true },
+  { key: "input", title: "Input", isOpen: true },
+  { key: "label", title: "Label", isOpen: true },
+  { key: "grid", title: "Grid layout", isOpen: false },
+  { key: "html", title: "HTML", isOpen: false },
+  { key: "validation", title: "Validation", isOpen: false },
 ] as const;
 
 export function SidebarRight() {
@@ -69,14 +76,12 @@ export function SidebarRight() {
     } else {
       sidebarContent = (
         <div>
-          <div className="p-4 border-b">Properties</div>
-
-          {PROPERTY_SECTIONS.map(({ key, title }) => {
+          {PROPERTY_SECTIONS.map(({ key, title, isOpen }) => {
             const content = componentViews.renderDesignProperties[key];
             if (!content) return null;
 
             return (
-              <PropertySection key={key} title={title}>
+              <PropertySection key={key} title={title} isOpen={isOpen}>
                 {content}
               </PropertySection>
             );