@nocobase/portal-template-default 1.0.15 → 1.0.17

package/src/extensions/nocobase-mail/components/mail-toolbar.tsx

@@ -0,0 +1,155 @@
+import {
+  MailOpen,
+  MailX,
+  RefreshCw,
+  Search,
+  Trash2,
+  Undo2,
+  X,
+} from "lucide-react";
+import type { ReactNode } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+export function MailToolbar({
+  search,
+  onSearchChange,
+  selectedCount,
+  syncing,
+  onSync,
+  onMarkRead,
+  onMarkUnread,
+  actionMode = "normal",
+  onRestore,
+  onDeleteForever,
+  onTrash,
+  onClearSelection,
+  actions,
+  className,
+}: {
+  search: string;
+  onSearchChange: (value: string) => void;
+  selectedCount: number;
+  syncing: boolean;
+  onSync: () => void;
+  onMarkRead: () => void;
+  onMarkUnread: () => void;
+  actionMode?:
+    | "normal"
+    | "trash"
+    | "draft"
+    | "providerDraft"
+    | "scheduled"
+    | "mixed";
+  onRestore: () => void;
+  onDeleteForever: () => void;
+  onTrash: () => void;
+  onClearSelection: () => void;
+  actions?: ReactNode;
+  className?: string;
+}) {
+  const hasSelection = selectedCount > 0;
+
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      <div className="relative w-full max-w-sm">
+        <Search className="pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground" />
+        <Input
+          value={search}
+          onChange={(e) => onSearchChange(e.target.value)}
+          placeholder="Search messages…"
+          className="h-8 pl-8 text-sm"
+        />
+        {search && (
+          <button
+            type="button"
+            onClick={() => onSearchChange("")}
+            className="absolute top-1/2 right-2 -translate-y-1/2 text-muted-foreground transition-colors hover:text-foreground"
+          >
+            <X className="size-3.5" />
+          </button>
+        )}
+      </div>
+
+      {hasSelection && (
+        <div className="flex items-center gap-1">
+          <span className="mr-1 text-xs tabular-nums text-muted-foreground">
+            {selectedCount} selected
+          </span>
+          {!['draft', 'providerDraft', 'scheduled', 'mixed'].includes(actionMode) && (
+            <>
+              <Button variant="ghost" size="icon-sm" title="Mark as read" onClick={onMarkRead}>
+                <MailOpen />
+              </Button>
+              <Button variant="ghost" size="icon-sm" title="Mark as unread" onClick={onMarkUnread}>
+                <MailX />
+              </Button>
+            </>
+          )}
+          {actionMode === "trash" ? (
+            <>
+              <Button variant="ghost" size="icon-sm" title="Put back" onClick={onRestore}>
+                <Undo2 />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                title="Permanently delete"
+                className="text-destructive hover:text-destructive"
+                onClick={onDeleteForever}
+              >
+                <Trash2 />
+              </Button>
+            </>
+          ) : actionMode === "draft" ? (
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              title="Delete drafts"
+              className="text-destructive hover:text-destructive"
+              onClick={onDeleteForever}
+            >
+              <Trash2 />
+            </Button>
+          ) : actionMode === "normal" ? (
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              title="Move to trash"
+              className="text-destructive hover:text-destructive"
+              onClick={onTrash}
+            >
+              <Trash2 />
+            </Button>
+          ) : (
+            <span className="text-xs text-muted-foreground">
+              {actionMode === "scheduled"
+                ? "Open a scheduled message to cancel it"
+                : actionMode === "providerDraft"
+                  ? "Edit provider drafts in the original mailbox"
+                : "Select messages from one folder state"}
+            </span>
+          )}
+          <Button variant="ghost" size="xs" onClick={onClearSelection}>
+            Clear
+          </Button>
+        </div>
+      )}
+
+      <div className="ml-auto flex items-center gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          title="Sync mailbox"
+          onClick={onSync}
+          disabled={syncing}
+        >
+          <RefreshCw className={cn(syncing && "animate-spin")} />
+          Refresh
+        </Button>
+        {actions}
+      </div>
+    </div>
+  );
+}

package/src/extensions/nocobase-mail/components/mail-unread.tsx

@@ -0,0 +1,111 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type PropsWithChildren,
+  type ReactNode,
+} from "react";
+import { Mail } from "lucide-react";
+import { mailApi } from "./mail-api";
+import { cn } from "@/lib/utils";
+
+interface MailUnreadContextValue {
+  count: number;
+  refresh: () => void;
+}
+
+const MailUnreadContext = createContext<MailUnreadContextValue>({
+  count: 0,
+  refresh: () => undefined,
+});
+
+export interface MailUnreadProviderProps extends PropsWithChildren {
+  pollIntervalMs?: number;
+}
+
+export function MailUnreadProvider({
+  children,
+  pollIntervalMs = 60_000,
+}: MailUnreadProviderProps) {
+  const [count, setCount] = useState(0);
+  const inFlight = useRef<Promise<void> | undefined>(undefined);
+
+  const refresh = useCallback(() => {
+    if (inFlight.current) return;
+    inFlight.current = mailApi
+      .unreadCount()
+      .then(setCount)
+      .catch(() => undefined)
+      .finally(() => {
+        inFlight.current = undefined;
+      });
+  }, []);
+
+  useEffect(() => {
+    refresh();
+    const interval = window.setInterval(refresh, pollIntervalMs);
+    const handleFocus = () => refresh();
+    const handleVisibility = () => {
+      if (document.visibilityState === "visible") refresh();
+    };
+    window.addEventListener("focus", handleFocus);
+    document.addEventListener("visibilitychange", handleVisibility);
+    return () => {
+      window.clearInterval(interval);
+      window.removeEventListener("focus", handleFocus);
+      document.removeEventListener("visibilitychange", handleVisibility);
+    };
+  }, [pollIntervalMs, refresh]);
+
+  const value = useMemo(() => ({ count, refresh }), [count, refresh]);
+  return <MailUnreadContext.Provider value={value}>{children}</MailUnreadContext.Provider>;
+}
+
+export function useMailUnread() {
+  return useContext(MailUnreadContext);
+}
+
+export interface MailUnreadIndicatorProps {
+  icon?: ReactNode;
+  label?: string;
+  showZero?: boolean;
+  max?: number;
+  className?: string;
+}
+
+export function MailUnreadIndicator({
+  icon = <Mail />,
+  label,
+  showZero = false,
+  max = 99,
+  className,
+}: MailUnreadIndicatorProps) {
+  const { count } = useMailUnread();
+  const visible = showZero || count > 0;
+  const displayCount = count > max ? `${max}+` : String(count);
+
+  return (
+    <span
+      className={cn("inline-flex items-center gap-2", className)}
+      aria-label={`${count} unread ${count === 1 ? "message" : "messages"}`}
+    >
+      <span className="relative inline-flex">
+        {icon}
+        {visible && (
+          <span className="absolute -top-2 -right-2 flex min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-[9px] font-semibold leading-4 text-destructive-foreground ring-2 ring-sidebar">
+            {displayCount}
+          </span>
+        )}
+      </span>
+      {label && <span>{label}</span>}
+    </span>
+  );
+}
+
+export function MailUnreadIcon() {
+  return <MailUnreadIndicator />;
+}

package/src/extensions/nocobase-mail/components/types.ts

@@ -0,0 +1,297 @@
+export enum MailBoxType {
+  IN = "in",
+  OUT = "out",
+  DRAFT = "draft",
+  TRASH = "trash",
+  SPAM = "spam",
+  ARCHIVE = "archive",
+  MASS = "mass",
+  SCHEDULED = "scheduled",
+}
+
+export interface MailUser {
+  name?: string;
+  address: string;
+}
+
+export interface MailAttachment {
+  filename: string;
+  mimeType: string;
+  attachmentId: string;
+  contentId?: string;
+  size?: number;
+  originalname?: string;
+  path?: string;
+  encoding?: string;
+  mimetype?: string;
+}
+
+export interface MailUploadedAttachment {
+  originalname: string;
+  filename: string;
+  path: string;
+  size: number | string;
+  encoding: string;
+  mimetype: string;
+  /** Microsoft sender compatibility; Google continues to use `mimetype`. */
+  mimeType?: string;
+}
+
+export interface MailLabel {
+  id: number;
+  label: string;
+  color: string;
+  description?: string;
+}
+
+export const LABEL_COLOR_OPTIONS = [
+  "default",
+  "red",
+  "orange",
+  "yellow",
+  "green",
+  "blue",
+  "purple",
+] as const;
+
+export const LABEL_BADGE_CLASSES: Record<string, string> = {
+  default: "bg-muted text-muted-foreground",
+  blue: "bg-blue-500/15 text-blue-600 dark:text-blue-400",
+  green: "bg-green-500/15 text-green-600 dark:text-green-400",
+  red: "bg-red-500/15 text-red-600 dark:text-red-400",
+  orange: "bg-orange-500/15 text-orange-600 dark:text-orange-400",
+  yellow: "bg-yellow-500/15 text-yellow-600 dark:text-yellow-400",
+  gold: "bg-amber-500/15 text-amber-600 dark:text-amber-400",
+  cyan: "bg-cyan-500/15 text-cyan-600 dark:text-cyan-400",
+  purple: "bg-purple-500/15 text-purple-600 dark:text-purple-400",
+  magenta: "bg-pink-500/15 text-pink-600 dark:text-pink-400",
+};
+
+export const LABEL_SWATCH_CLASSES: Record<string, string> = {
+  default: "bg-muted-foreground/40",
+  blue: "bg-blue-500",
+  green: "bg-green-500",
+  red: "bg-red-500",
+  orange: "bg-orange-500",
+  yellow: "bg-yellow-500",
+  gold: "bg-amber-500",
+  cyan: "bg-cyan-500",
+  purple: "bg-purple-500",
+  magenta: "bg-pink-500",
+};
+
+export interface MailNote {
+  id: number;
+  note: string;
+  mailMessageId: number;
+}
+
+export interface MailMessage {
+  id: number;
+  email: string;
+  mailId: string;
+  rawId: string;
+  boxType: MailBoxType | "";
+  originalBoxType?: MailBoxType | "";
+  isRead: boolean;
+  isDraft: boolean;
+  from: string;
+  identityEmail?: string;
+  fromUser?: MailUser;
+  to: string;
+  toUsers?: MailUser[];
+  cc: string;
+  ccUsers?: MailUser[];
+  bcc: string;
+  bccUsers?: MailUser[];
+  subject: string;
+  replyTo?: string;
+  conversationId?: string;
+  relatedMessageIds?: string[];
+  relatedMessagesIsRead?: boolean;
+  relatedMessageLatestDate?: string;
+  date: string;
+  bodyText: string;
+  bodyHtml: string;
+  attachments: MailAttachment[];
+  labels?: MailLabel[];
+  isTodo?: boolean;
+  note?: MailNote[];
+  children?: MailMessage[];
+  childrenMessages?: MailMessage[];
+  scheduleSendAt?: string;
+  userId?: number;
+  user?: {
+    id: number;
+    nickname?: string;
+    email?: string;
+  };
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export function isLocalMailDraft(
+  message: Pick<MailMessage, "isDraft" | "mailId" | "rawId">
+) {
+  return Boolean(message.isDraft && !message.mailId && !message.rawId);
+}
+
+export interface MailAccount {
+  id: number;
+  type: string;
+  email: string;
+  userId: number;
+  settingId: number;
+  config?: Record<string, unknown> & {
+    signatures?: MailAccountSignature[];
+  };
+  identities?: MailIdentity[];
+}
+
+export interface MailIdentity {
+  id: number;
+  email: string;
+  accountId: number;
+  userId: number;
+  isPrimary?: boolean;
+  name?: string;
+  verificationStatus?: string;
+}
+
+export interface MailUserRecord {
+  id: number;
+  nickname?: string;
+  email?: string;
+  username?: string;
+}
+
+export interface MailRecipientOption {
+  email: string;
+  name?: string;
+  description?: string;
+}
+
+export interface MailAccountSignature {
+  id: string;
+  name: string;
+  content: string;
+  default?: boolean;
+}
+
+export interface MailSignature {
+  id: string;
+  name: string;
+  content: string;
+  isDefault?: boolean;
+}
+
+export interface MailTemplate {
+  id: number | string;
+  name: string;
+  content: string;
+  /** Kept for callers migrating from the old local template format. */
+  subject?: string;
+}
+
+export interface MailSendPayload {
+  id?: number;
+  from: string;
+  accountEmail?: string;
+  identityEmail?: string;
+  to: string[];
+  cc?: string[];
+  subject: string;
+  body: string;
+  attachments?: MailUploadedAttachment[];
+  replyTo?: string;
+  isDraft?: boolean;
+  scheduleSendAt?: string;
+}
+
+export enum MailMassMessageStatus {
+  PENDING = "pending",
+  SENDING = "sending",
+  SENT = "sent",
+  FAILED = "failed",
+  CANCELED = "canceled",
+  SOME_SENT = "some_sent",
+}
+
+export interface MailMassMessage {
+  id: number;
+  parentId?: number | null;
+  interval: number;
+  message: MailSendPayload;
+  from: string;
+  to: string;
+  sendAt?: string | null;
+  status: MailMassMessageStatus;
+  result?: unknown;
+  children?: MailMassMessage[];
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export interface MailMassListResponse {
+  rows: MailMassMessage[];
+  count: number;
+}
+
+export interface MailMassSendSettings {
+  /** Delay between two recipients, in milliseconds. */
+  interval?: number;
+}
+
+export type MailScope = "all" | "personal";
+
+export interface MailListParams {
+  page?: number;
+  pageSize?: number;
+  boxType?: MailBoxType;
+  isRead?: boolean;
+  search?: string;
+  labelId?: number;
+  sort?: string;
+  scope?: MailScope;
+  userId?: number;
+  filter?: Record<string, unknown>;
+}
+
+export interface MailListResponse {
+  rows: MailMessage[];
+  count: number;
+}
+
+export type MailColumnId =
+  | "from"
+  | "to"
+  | "subject"
+  | "date"
+  | "boxType"
+  | "isRead"
+  | "email"
+  | "user"
+  | "labels"
+  | "attachments";
+
+export const MAIL_COLUMN_LABELS: Record<MailColumnId, string> = {
+  from: "From",
+  to: "To",
+  subject: "Subject",
+  date: "Date",
+  boxType: "Folder",
+  isRead: "Status",
+  email: "Mailbox",
+  user: "Owner",
+  labels: "Labels",
+  attachments: "Attachments",
+};
+
+export const DEFAULT_MAIL_COLUMNS: MailColumnId[] = [
+  "from",
+  "subject",
+  "boxType",
+  "date",
+  "isRead",
+  "labels",
+];