Improved UI/UX + Lazy Loading

src/components/clipboard.tsx

@@ -41,14 +41,13 @@ const Clipboard: React.FC<ClipboardProps> = ({ text }) => {
     }, [text])
 
     return (
-        <Tooltip>
+  <Tooltip>
             <TooltipTrigger asChild>
                 <span>
                     <Button
                         size="icon"
-
                         variant="outline"
-                        className="size-8"
+                        className="w-7 h-7 text-muted-foreground bg-card/50   backdrop-blur-xs dark:backdrop-blur-md shadow-lg"
                         onClick={copyToClipboard}
                     >
                         {

src/components/code-editor.tsx

@@ -0,0 +1,130 @@
+import React, { useEffect, useState } from "react";
+import { useTheme } from "@/providers/theme-provider/theme-provider";
+import { cn } from "@/lib/utils";
+import { Spinner } from "./ui/shadcn-io/spinner";
+
+interface CodeEditorProps {
+    defaultValue?: string;
+    value?: string;
+    className?: string | undefined,
+    readOnly?: boolean,
+    onChange?: (sql: string) => void
+}
+
+const CodeEditor: React.FC<CodeEditorProps> = ({
+    defaultValue,
+    value,
+    className,
+    readOnly = false,
+    onChange
+}) => {
+
+
+    const [editor, setEditor] = useState<any>(null);
+
+    useEffect(() => {
+
+        let mounted = true;
+
+        Promise.all([
+            import("@uiw/react-codemirror"),
+            import("@codemirror/lang-sql"),
+            import("@codemirror/view"),
+        ]).then(([cm, sqlLang, view]) => {
+
+            if (!mounted) return;
+
+            const overrideDarkTheme = view.EditorView.theme({
+
+                '.cm-content': {
+                    backgroundColor: "#1c2025",
+                },
+                ".cm-gutter": {
+                    backgroundColor: "#1c2025",
+                },
+
+                ".cm-gutterElement": {
+                    color: "#4b515a"
+                },
+
+                ".ͼp": {
+                    color: "#A994FF"
+                },
+
+                ".cm-line .ͼq": {
+                    color: "#ff6363"
+                },
+                ".ͼu": {
+                    color: "#B6E672"
+                },
+                ".ͼv": {
+                    color: "#6cdcc4"
+                }
+            }, { dark: true });
+
+            const overrideLightTheme = view.EditorView.theme({
+
+                ".ͼb": {
+                    color: "#2A1D66"
+                },
+                ".cm-gutterElement": {
+                    color: "#62748e"
+                },
+                ".cm-gutter": {
+                    backgroundColor: "white",
+
+                },
+                ".cm-gutters": {
+                    borderColor: "#f2f4f6"
+                },
+                ".cm-line": {
+                    color: "#0f172b"
+                },
+
+            })
+            setEditor({
+                CodeMirror: cm.default,
+                oneDark: cm.oneDark,
+                sql: sqlLang.sql,
+                overrideDarkTheme,
+                overrideLightTheme,
+            });
+        });
+
+        return () => {
+            mounted = false;
+        };
+    }, []);
+
+
+    const { theme } = useTheme();
+
+    if (!editor) {
+        return (
+            <div
+                className={cn(
+                    "flex flex-1 w-full min-h-9 rounded-sm border border-border bg-card items-center justify-center",
+                    className
+                )}
+            >
+                <Spinner className="text-primary" />
+            </div>
+        );
+    }
+
+    const { CodeMirror, oneDark, sql, overrideDarkTheme, overrideLightTheme } = editor;
+    return (
+        <CodeMirror
+            defaultValue={defaultValue}
+            value={value}
+            className={cn("flex flex-1 w-full min-h-9 rounded-sm  h-full   bg-card border-1 border-border  !min-w-0 overflow-hidden", className)}
+            extensions={[sql()]}
+            readOnly={readOnly}
+            theme={theme != "dark" ? overrideLightTheme : [oneDark, overrideDarkTheme]}
+            onChange={onChange}
+        />
+    )
+}
+
+
+export default React.memo(CodeEditor); 

src/components/layout/app-sidebar/app-sidebar.tsx

@@ -16,11 +16,11 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
     const sidebarData = useSidebarData();
     const { openController } = useDiagramOps();
     return (
-        <Sidebar collapsible='icon' variant='floating' {...props} className='bg-card border-r' >
+        <Sidebar collapsible='icon'  {...props}  >
             <SidebarHeader>
-                <div className='flex items-center'>
+                <div className='flex items-center gap-2'>
                     <img
-                        className='w-8 h-8 p-[6px] rounded-md '
+                   className='w-8  p-[4px] rounded-md '
                         src='/stackrender.png'
                     />
                     <h3 className='data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground truncate font-semibold text-sm '>