fix(ui): button as button error fixed, create mail editor fixes

apps/mail/app/(routes)/settings/connections/page.tsx

@@ -150,7 +150,7 @@ export default function ConnectionsPage() {
             </div>
           ) : null}
 
-          <div className="flex items-center justify-center">
+          <div className="flex items-center justify-start">
             <AddConnectionDialog>
               <Button 
                 variant="outline" 

apps/mail/components/connection/add.tsx

@@ -16,14 +16,12 @@ export const AddConnectionDialog = ({
 }) => {
     return <Dialog onOpenChange={onOpenChange}>
         <DialogTrigger asChild>
-            <Button size={'dropdownItem'} variant={'dropdownItem'} className={cn("gap-2 w-full justify-start", className)}>
-                {children || (
-                    <>
-                        <UserPlus size={16} strokeWidth={2} className="opacity-60" aria-hidden="true" />
-                        <p className="text-[13px] opacity-60">Add email</p>
-                    </>
-                )}
-            </Button>
+            {children || (
+                <Button size={'dropdownItem'} variant={'dropdownItem'} className={cn("gap-2 w-full justify-start", className)}>
+                    <UserPlus size={16} strokeWidth={2} className="opacity-60" aria-hidden="true" />
+                    <p className="text-[13px] opacity-60">Add email</p>
+                </Button>
+            )}
         </DialogTrigger>
         <DialogContent className="sm:max-w-md">
             <DialogHeader>
@@ -48,7 +46,7 @@ export const AddConnectionDialog = ({
                     >
                         <Button
                             variant="outline"
-                            className="h-24 w-full flex-col items-center justify-center gap-2"
+                            className="h-24 flex-col items-center justify-center gap-2 w-full"
                         >
                             <svg viewBox="0 0 24 24" className="h-12 w-12">
                                 <path fill="currentColor" d={provider.icon} />
@@ -66,7 +64,7 @@ export const AddConnectionDialog = ({
                 >
                     <Button
                         variant="outline"
-                        className="h-24 flex-col items-center justify-center gap-2 border-dashed"
+                        className="h-24 flex-col items-center justify-center gap-2 border-dashed w-full"
                     >
                         <Plus className="h-12 w-12" />
                         <span className="text-xs">More Coming Soon</span>

apps/mail/components/create/editor.tsx

@@ -1,5 +1,15 @@
 "use client";
 
+import {
+  EditorCommand,
+  EditorCommandEmpty,
+  EditorCommandItem,
+  EditorCommandList,
+  EditorContent,
+  EditorRoot,
+  useEditor,
+  type JSONContent,
+} from "novel";
 import {
   Bold,
   Italic,
@@ -13,15 +23,6 @@ import {
   Heading2,
   Heading3,
 } from "lucide-react";
-import {
-  EditorCommand,
-  EditorCommandEmpty,
-  EditorCommandItem,
-  EditorCommandList,
-  EditorContent,
-  EditorRoot,
-  type JSONContent,
-} from "novel";
 import {
   Dialog,
   DialogContent,
@@ -30,10 +31,10 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { AnyExtension, Editor as TiptapEditor, useCurrentEditor } from "@tiptap/react";
 import { TextButtons } from "@/components/create/selectors/text-buttons";
 import { suggestionItems } from "@/components/create/slash-command";
 import { defaultExtensions } from "@/components/create/extensions";
-import { AnyExtension, useCurrentEditor } from "@tiptap/react";
 import { ImageResizer, handleCommandNavigation } from "novel";
 import { uploadFn } from "@/components/create/image-upload";
 import { handleImageDrop, handleImagePaste } from "novel";
@@ -277,20 +278,22 @@ export default function Editor({
   // Add a ref to store the editor content to prevent losing it on refresh
   const contentRef = useRef<string>("");
   // Add a ref to the editor instance
-  const editorRef = useRef<any>(null);
+  const editorRef = useRef<TiptapEditor>(null);
+
+  const containerRef = useRef<HTMLDivElement>(null);
 
   const { openNode, openColor, openLink, openAI } = state;
 
   // Function to focus the editor
-  const focusEditor = () => {
-    if (editorRef.current) {
-      editorRef.current.commands.focus();
+  const focusEditor = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.target === containerRef.current) {
+      editorRef.current?.commands.focus("end");
     }
   };
 
   return (
     <div
-      className={`relative w-full max-w-[450px] sm:max-w-[600px] ${className || ''}`}
+      className={`relative w-full max-w-[450px] sm:max-w-[600px] ${className || ""}`}
       onClick={focusEditor}
       onKeyDown={(e) => {
         // Prevent form submission on Enter key
@@ -304,7 +307,8 @@ export default function Editor({
           immediatelyRender={false}
           initialContent={initialValue || defaultEditorContent}
           extensions={extensions}
-          className="min-h-96"
+          ref={containerRef}
+          className="min-h-96 cursor-text"
           editorProps={{
             handleDOMEvents: {
               keydown: (_view, event) => handleCommandNavigation(event),
@@ -315,7 +319,7 @@ export default function Editor({
               blur: () => {
                 onBlur?.();
                 return false;
-              }
+              },
             },
             handlePaste: (view, event) => handleImagePaste(view, event, uploadFn),
             handleDrop: (view, event, _slice, moved) =>
@@ -326,11 +330,12 @@ export default function Editor({
               "data-placeholder": placeholder,
             },
           }}
+          onCreate={({ editor }) => {
+            editorRef.current = editor;
+          }}
           onUpdate={({ editor }) => {
             // Store the content in the ref to prevent losing it
             contentRef.current = editor.getHTML();
-            // Store the editor instance in the ref
-            editorRef.current = editor;
             onChange(editor.getHTML());
           }}
           slotBefore={<MenuBar />}

apps/mail/components/ui/nav-main.tsx

@@ -152,7 +152,7 @@ export function NavMain({ items }: NavMainProps) {
             className="group/collapsible"
           >
             <SidebarMenuItem>
-              <div className="space-y-1">
+              <div className="space-y-1 pb-2">
                 {section.items.map((item) => (
                   <NavItem
                     key={item.url}