Feat/connect email (#214)

* feat/connect-email

* fix-error

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

@@ -11,6 +11,7 @@ import {
 } from "@/components/ui/dialog";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { SettingsCard } from "@/components/settings/settings-card";
+import { emailProviders } from "@/constants/emailProviders";
 import { useConnections } from "@/hooks/use-connections";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Button } from "@/components/ui/button";
@@ -22,14 +23,6 @@ export default function ConnectionsPage() {
   const { data: connections, isLoading } = useConnections();
   const [openTooltip, setOpenTooltip] = useState<string | null>(null);
 
-  const emailProviders = [
-    {
-      name: "Google",
-      icon: "M11.99 13.9v-3.72h9.36c.14.63.25 1.22.25 2.05c0 5.71-3.83 9.77-9.6 9.77c-5.52 0-10-4.48-10-10S6.48 2 12 2c2.7 0 4.96.99 6.69 2.61l-2.84 2.76c-.72-.68-1.98-1.48-3.85-1.48c-3.31 0-6.01 2.75-6.01 6.12s2.7 6.12 6.01 6.12c3.83 0 5.24-2.65 5.5-4.22h-5.51z",
-      providerId: "google",
-    },
-  ];
-
   return (
     <div className="grid gap-6">
       <SettingsCard title="Email Connections" description="Connect your email accounts to Mail0.">

components/mail/empty-state.tsx

@@ -1,4 +1,15 @@
-import { Archive, ArchiveX, FileText, Inbox, LucideIcon, Send, Trash2 } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogClose,
+} from "@/components/ui/dialog";
+import { Archive, ArchiveX, FileText, Inbox, LucideIcon, Plus, Send, Trash2 } from "lucide-react";
+import { emailProviders } from "@/constants/emailProviders";
+import { useConnections } from "@/hooks/use-connections";
+import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
 // Types for default inbox filters
@@ -78,19 +89,57 @@ function EmptyState({ folder, className }: EmptyStateProps) {
 
   const config = FOLDER_CONFIGS[folder] ?? FOLDER_CONFIGS.inbox;
   const Icon = config.icon;
+  const connections = useConnections();
+  const noConnection = !connections.data || connections.data.length === 0;
 
   return (
-    <div
-      role="status"
-      aria-live="polite"
-      data-testid="empty-state"
-      className={cn(styles.container, className)}
-    >
-      <div className={styles.content}>
-        <Icon className={styles.icon} aria-hidden="true" data-testid="empty-state-icon" />
-        <h3 className={styles.title}>{config.title}</h3>
-        <p className={styles.description}>{config.description}</p>
-      </div>
+    <div>
+      {noConnection ? (
+        <Dialog open={noConnection}>
+          <DialogContent className="sm:max-w-md">
+            <DialogHeader>
+              <DialogTitle>Connect Email</DialogTitle>
+              <DialogDescription>Select an email provider to connect</DialogDescription>
+            </DialogHeader>
+            <div className="mt-4 grid grid-cols-2 gap-4">
+              {emailProviders.map((provider) => (
+                <a key={provider.name} href={`/api/v1/mail/auth/${provider.providerId}/init`}>
+                  <Button
+                    variant="outline"
+                    className="h-24 w-full flex-col items-center justify-center gap-2"
+                  >
+                    <svg viewBox="0 0 24 24" className="h-12 w-12">
+                      <path fill="currentColor" d={provider.icon} />
+                    </svg>
+                    <span className="text-xs">{provider.name}</span>
+                  </Button>
+                </a>
+              ))}
+              <Button
+                variant="outline"
+                className="h-24 flex-col items-center justify-center gap-2 border-dashed"
+              >
+                <Plus className="h-12 w-12" />
+                <span className="text-xs">More Coming Soon</span>
+              </Button>
+            </div>
+            <DialogClose />
+          </DialogContent>
+        </Dialog>
+      ) : (
+        <div
+          role="status"
+          aria-live="polite"
+          data-testid="empty-state"
+          className={cn(styles.container, className)}
+        >
+          <div className={styles.content}>
+            <Icon className={styles.icon} aria-hidden="true" data-testid="empty-state-icon" />
+            <h3 className={styles.title}>{config.title}</h3>
+            <p className={styles.description}>{config.description}</p>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

constants/emailProviders.ts

@@ -0,0 +1,7 @@
+export const emailProviders = [
+  {
+    name: "Google",
+    icon: "M11.99 13.9v-3.72h9.36c.14.63.25 1.22.25 2.05c0 5.71-3.83 9.77-9.6 9.77c-5.52 0-10-4.48-10-10S6.48 2 12 2c2.7 0 4.96.99 6.69 2.61l-2.84 2.76c-.72-.68-1.98-1.48-3.85-1.48c-3.31 0-6.01 2.75-6.01 6.12s2.7 6.12 6.01 6.12c3.83 0 5.24-2.65 5.5-4.22h-5.51z",
+    providerId: "google",
+  },
+];