Initial release: JMAP Webmail Client

A modern, privacy-focused webmail client built with Next.js and the JMAP protocol. Designed for Stalwart Mail Server. Features: - Full email operations (compose, reply, forward, threading) - Real-time push notifications - Dark/light theme support - Mobile responsive design - Keyboard shortcuts - Drag-and-drop organization - i18n (English/French) - Security-first (external content blocked, HTML sanitization)
2025-12-10 17:54:22 +01:00
commit cf21a84263
79 changed files with 21821 additions and 0 deletions
@@ -0,0 +1,91 @@
+"use client";
+
+import { useEffect } from "react";
+import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export type ToastType = "success" | "error" | "info" | "warning";
+
+export interface Toast {
+  id: string;
+  type: ToastType;
+  title: string;
+  message?: string;
+  duration?: number;
+  onClick?: () => void;
+}
+
+interface ToastProps {
+  toast: Toast;
+  onClose: (id: string) => void;
+}
+
+const icons = {
+  success: CheckCircle,
+  error: AlertCircle,
+  info: Info,
+  warning: AlertTriangle,
+};
+
+const styles = {
+  success: "bg-green-50 dark:bg-green-950/30 border-green-200 dark:border-green-800 text-green-800 dark:text-green-200",
+  error: "bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-800 text-red-800 dark:text-red-200",
+  info: "bg-blue-50 dark:bg-blue-950/30 border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-200",
+  warning: "bg-amber-50 dark:bg-amber-950/30 border-amber-200 dark:border-amber-800 text-amber-800 dark:text-amber-200",
+};
+
+export function ToastItem({ toast, onClose }: ToastProps) {
+  const Icon = icons[toast.type];
+
+  useEffect(() => {
+    if (toast.duration && toast.duration > 0) {
+      const timer = setTimeout(() => {
+        onClose(toast.id);
+      }, toast.duration);
+      return () => clearTimeout(timer);
+    }
+  }, [toast, onClose]);
+
+  return (
+    <div
+      className={cn(
+        "flex items-start gap-3 p-4 rounded-lg border shadow-lg bg-background animate-slide-in",
+        styles[toast.type],
+        toast.onClick && "cursor-pointer hover:opacity-90 transition-opacity"
+      )}
+      onClick={() => {
+        if (toast.onClick) {
+          toast.onClick();
+          onClose(toast.id);
+        }
+      }}
+    >
+      <Icon className="w-5 h-5 flex-shrink-0 mt-0.5" />
+      <div className="flex-1">
+        <h4 className="font-medium">{toast.title}</h4>
+        {toast.message && (
+          <p className="text-sm mt-1 opacity-90">{toast.message}</p>
+        )}
+      </div>
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          onClose(toast.id);
+        }}
+        className="text-muted-foreground hover:text-foreground transition-colors"
+      >
+        <X className="w-4 h-4" />
+      </button>
+    </div>
+  );
+}
+
+export function ToastContainer({ toasts, onClose }: { toasts: Toast[]; onClose: (id: string) => void }) {
+  return (
+    <div className="fixed bottom-4 right-4 z-50 space-y-2 max-w-sm">
+      {toasts.map((toast) => (
+        <ToastItem key={toast.id} toast={toast} onClose={onClose} />
+      ))}
+    </div>
+  );
+}