@nocobase/portal-template-default 1.0.15 → 1.0.17

package/src/extensions/nocobase-mail/components/mail-label-manager.tsx

@@ -0,0 +1,271 @@
+import { useEffect, useState } from "react";
+import { Loader2, Plus, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+import { mailApi } from "./mail-api";
+import type { MailLabel } from "./types";
+import { LABEL_COLOR_OPTIONS, LABEL_SWATCH_CLASSES } from "./types";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { cn } from "@/lib/utils";
+
+type LabelValues = Pick<MailLabel, "label" | "color" | "description">;
+const EMPTY: LabelValues = { label: "", color: "default", description: "" };
+
+export interface MailLabelManagerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  labels: MailLabel[];
+  onChange: (labels: MailLabel[]) => void;
+  embedded?: boolean;
+}
+
+export function MailLabelManager({
+  open,
+  onOpenChange,
+  labels,
+  onChange,
+  embedded = false,
+}: MailLabelManagerProps) {
+  const [selectedId, setSelectedId] = useState<number | null>(null);
+  const [form, setForm] = useState<LabelValues>(EMPTY);
+  const [busy, setBusy] = useState(false);
+  const [confirmDeleteId, setConfirmDeleteId] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const first = labels[0];
+    setSelectedId(first?.id ?? null);
+    setForm(
+      first
+        ? {
+            label: first.label,
+            color: first.color,
+            description: first.description ?? "",
+          }
+        : EMPTY
+    );
+    // Initialize once per opening; keep the current edit stable after a mutation.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  const select = (label: MailLabel) => {
+    setSelectedId(label.id);
+    setForm({
+      label: label.label,
+      color: label.color,
+      description: label.description ?? "",
+    });
+  };
+
+  const save = async () => {
+    const name = form.label.trim();
+    if (!name) return;
+    setBusy(true);
+    try {
+      if (selectedId === null) {
+        const created = await mailApi.createLabel({ ...form, label: name });
+        onChange([...labels, created]);
+        setSelectedId(created.id);
+      } else {
+        const updated = await mailApi.updateLabel(selectedId, {
+          ...form,
+          label: name,
+        });
+        onChange(
+          labels.map((item) =>
+            item.id === selectedId ? { ...item, ...updated } : item
+          )
+        );
+      }
+      toast.success("Label saved");
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to save label"
+      );
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const remove = async () => {
+    if (confirmDeleteId === null) return;
+    setBusy(true);
+    try {
+      await mailApi.deleteLabel(confirmDeleteId);
+      onChange(labels.filter((item) => item.id !== confirmDeleteId));
+      if (selectedId === confirmDeleteId) {
+        setSelectedId(null);
+        setForm(EMPTY);
+      }
+      setConfirmDeleteId(null);
+      toast.success("Label deleted");
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to delete label"
+      );
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const editor = (
+    <div className="grid gap-4 sm:grid-cols-[180px_1fr]">
+      <div className="flex flex-col gap-2">
+        <div className="flex max-h-80 flex-col gap-0.5 overflow-y-auto">
+          {labels.map((label) => (
+            <div
+              key={label.id}
+              className={cn(
+                "group flex items-center rounded-md text-sm hover:bg-muted/60",
+                selectedId === label.id && "bg-muted font-medium"
+              )}
+            >
+              <button
+                type="button"
+                onClick={() => select(label)}
+                className="flex min-w-0 flex-1 items-center gap-2 px-2.5 py-2 text-left"
+              >
+                <span
+                  className={cn(
+                    "size-2.5 shrink-0 rounded-full",
+                    LABEL_SWATCH_CLASSES[label.color] ??
+                      LABEL_SWATCH_CLASSES.default
+                  )}
+                />
+                <span className="truncate">{label.label}</span>
+              </button>
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                title={`Delete ${label.label}`}
+                aria-label={`Delete ${label.label}`}
+                disabled={busy}
+                onClick={() => setConfirmDeleteId(label.id)}
+                className="mr-1 shrink-0 text-muted-foreground opacity-60 hover:text-destructive sm:opacity-0 sm:group-hover:opacity-100 sm:focus-visible:opacity-100"
+              >
+                <Trash2 />
+              </Button>
+            </div>
+          ))}
+        </div>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => {
+            setSelectedId(null);
+            setForm(EMPTY);
+          }}
+        >
+          <Plus /> New
+        </Button>
+      </div>
+      <div className="flex flex-col gap-3">
+        <div className="space-y-1.5">
+          <Label>Name</Label>
+          <Input
+            value={form.label}
+            onChange={(event) =>
+              setForm((prev) => ({ ...prev, label: event.target.value }))
+            }
+          />
+        </div>
+        <div className="space-y-1.5">
+          <Label>Description</Label>
+          <Input
+            value={form.description ?? ""}
+            onChange={(event) =>
+              setForm((prev) => ({ ...prev, description: event.target.value }))
+            }
+          />
+        </div>
+        <div className="space-y-2">
+          <Label>Color</Label>
+          <div className="flex items-center gap-2">
+            {LABEL_COLOR_OPTIONS.map((color) => (
+              <button
+                key={color}
+                type="button"
+                title={color}
+                onClick={() => setForm((prev) => ({ ...prev, color }))}
+                className={cn(
+                  "size-5 rounded-full",
+                  LABEL_SWATCH_CLASSES[color],
+                  form.color === color &&
+                    "ring-2 ring-foreground ring-offset-2 ring-offset-background"
+                )}
+              />
+            ))}
+          </div>
+        </div>
+        <div className="mt-2 flex items-center justify-end">
+          <Button
+            size="sm"
+            disabled={!form.label.trim() || busy}
+            onClick={() => void save()}
+          >
+            {busy && <Loader2 className="animate-spin" />} Save
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <>
+      {embedded ? (
+        editor
+      ) : (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+          <DialogContent className="sm:max-w-2xl">
+            <DialogHeader>
+              <DialogTitle>Manage labels</DialogTitle>
+            </DialogHeader>
+            {editor}
+          </DialogContent>
+        </Dialog>
+      )}
+      <AlertDialog
+        open={confirmDeleteId !== null}
+        onOpenChange={(nextOpen) => {
+          if (!nextOpen) setConfirmDeleteId(null);
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete this label?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This removes the label from every message that uses it.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              variant="destructive"
+              disabled={busy}
+              onClick={() => void remove()}
+            >
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

package/src/extensions/nocobase-mail/components/mail-labels-editor.tsx

@@ -0,0 +1,267 @@
+import { useEffect, useRef, useState } from "react";
+import { useGetIdentity } from "@refinedev/core";
+import { Check, Loader2, Plus, Settings2, Tag as TagIcon } from "lucide-react";
+import { toast } from "sonner";
+import type { MailLabel, MailMessage } from "./types";
+import { LABEL_COLOR_OPTIONS, LABEL_SWATCH_CLASSES } from "./types";
+import { mailApi } from "./mail-api";
+import { MailLabelBadge } from "./mail-label-badge";
+import { MailLabelManager } from "./mail-label-manager";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+export function MailLabelsEditor({
+  message,
+  onChange,
+}: {
+  message: MailMessage;
+  onChange?: (labels: MailLabel[]) => void;
+}) {
+  const { data: identity } = useGetIdentity<{ id: number | string }>();
+  const userId = identity?.id;
+  const [open, setOpen] = useState(false);
+  const [allLabels, setAllLabels] = useState<MailLabel[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<number[]>(
+    message.labels?.map((l) => l.id) ?? []
+  );
+  const [newLabel, setNewLabel] = useState("");
+  const [newColor, setNewColor] = useState<string>("default");
+  const [creating, setCreating] = useState(false);
+  const [managerOpen, setManagerOpen] = useState(false);
+  const commitQueue = useRef<Promise<unknown>>(Promise.resolve());
+  const commitSequence = useRef(0);
+
+  useEffect(() => {
+    setSelectedIds(message.labels?.map((l) => l.id) ?? []);
+  }, [message.labels]);
+
+  useEffect(() => {
+    if (!open) return;
+    let active = true;
+    setLoading(true);
+    mailApi
+      .getLabels(userId)
+      .then((labels) => active && setAllLabels(labels))
+      .catch(() => active && setAllLabels([]))
+      .finally(() => active && setLoading(false));
+    return () => {
+      active = false;
+    };
+  }, [open, userId]);
+
+  const resolveLabels = (ids: number[], from?: MailLabel[]): MailLabel[] => {
+    const source = from ?? allLabels;
+    return ids
+      .map(
+        (id) =>
+          source.find((l) => l.id === id) ??
+          message.labels?.find((l) => l.id === id)
+      )
+      .filter((l): l is MailLabel => Boolean(l));
+  };
+
+  const commit = (
+    ids: number[],
+    from?: MailLabel[],
+    rollbackIds = selectedIds
+  ) => {
+    const sequence = ++commitSequence.current;
+    const request = commitQueue.current
+      .catch(() => undefined)
+      .then(() => mailApi.setMessageLabels(message.id, ids));
+    commitQueue.current = request;
+    return request
+      .then(() => {
+        if (sequence === commitSequence.current) {
+          onChange?.(resolveLabels(ids, from));
+        }
+      })
+      .catch((error) => {
+        if (sequence === commitSequence.current) {
+          setSelectedIds(rollbackIds);
+          onChange?.(resolveLabels(rollbackIds, from));
+          toast.error(
+            error instanceof Error ? error.message : "Failed to update labels"
+          );
+        }
+      });
+  };
+
+  const toggle = (id: number) => {
+    const next = selectedIds.includes(id)
+      ? selectedIds.filter((x) => x !== id)
+      : [...selectedIds, id];
+    setSelectedIds(next);
+    void commit(next, undefined, selectedIds);
+  };
+
+  const createLabel = async () => {
+    const name = newLabel.trim();
+    if (!name) return;
+    setCreating(true);
+    try {
+      const label = await mailApi.createLabel({ label: name, color: newColor });
+      const updatedAll = [...allLabels, label];
+      setAllLabels(updatedAll);
+      const next = [...selectedIds, label.id];
+      setSelectedIds(next);
+      await commit(next, updatedAll);
+      setNewLabel("");
+      setNewColor("default");
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to create label"
+      );
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const handleLabelsManaged = (labels: MailLabel[]) => {
+    setAllLabels(labels);
+    const validIds = selectedIds.filter((id) => labels.some((label) => label.id === id));
+    if (validIds.length !== selectedIds.length) {
+      setSelectedIds(validIds);
+      void commit(validIds, labels, selectedIds);
+    } else {
+      onChange?.(resolveLabels(validIds, labels));
+    }
+  };
+
+  return (
+    <>
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        render={
+          <button
+            type="button"
+            className="inline-flex flex-wrap items-center gap-1.5 rounded-md py-0.5 transition-opacity hover:opacity-80"
+          />
+        }
+      >
+        {message.labels?.length ? (
+          message.labels.map((label) => (
+            <MailLabelBadge key={label.id} label={label} />
+          ))
+        ) : (
+          <span className="inline-flex items-center gap-1 text-xs text-muted-foreground transition-colors hover:text-foreground">
+            <TagIcon className="size-3" />
+            Add label
+          </span>
+        )}
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-64 gap-2">
+        <div className="px-1 text-xs font-semibold text-muted-foreground">
+          Labels
+        </div>
+        <div className="flex max-h-52 flex-col gap-0.5 overflow-y-auto">
+          {loading ? (
+            <div className="flex items-center justify-center py-4">
+              <Loader2 className="size-4 animate-spin text-muted-foreground" />
+            </div>
+          ) : allLabels.length ? (
+            allLabels.map((label) => {
+              const checked = selectedIds.includes(label.id);
+              return (
+                <div
+                  key={label.id}
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => toggle(label.id)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      toggle(label.id);
+                    }
+                  }}
+                  className={cn(
+                    "flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 transition-colors hover:bg-muted/60",
+                    checked && "bg-muted/40"
+                  )}
+                >
+                  <span
+                    className={cn(
+                      "flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors",
+                      checked
+                        ? "border-primary bg-primary text-primary-foreground"
+                        : "border-input"
+                    )}
+                  >
+                    {checked && <Check className="size-3" />}
+                  </span>
+                  <MailLabelBadge label={label} />
+                </div>
+              );
+            })
+          ) : (
+            <div className="py-3 text-center text-xs text-muted-foreground">
+              No labels yet
+            </div>
+          )}
+        </div>
+        <div className="border-t border-border/60 pt-2">
+          <div className="mb-1.5 flex items-center gap-1.5">
+            {LABEL_COLOR_OPTIONS.map((color) => (
+              <button
+                key={color}
+                type="button"
+                title={color}
+                onClick={() => setNewColor(color)}
+                className={cn(
+                  "size-4 rounded-full transition-all",
+                  LABEL_SWATCH_CLASSES[color],
+                  newColor === color
+                    ? "ring-2 ring-foreground ring-offset-1 ring-offset-background"
+                    : "hover:scale-110"
+                )}
+              />
+            ))}
+          </div>
+          <div className="flex items-center gap-1.5">
+            <Input
+              value={newLabel}
+              onChange={(e) => setNewLabel(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  void createLabel();
+                }
+              }}
+              placeholder="New label…"
+              className="h-8 text-sm"
+            />
+            <Button
+              size="icon-sm"
+              onClick={() => void createLabel()}
+              disabled={creating || !newLabel.trim()}
+            >
+              {creating ? <Loader2 className="animate-spin" /> : <Plus />}
+            </Button>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="mt-2 w-full justify-start"
+            onClick={() => { setOpen(false); setManagerOpen(true); }}
+          >
+            <Settings2 /> Manage labels
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+    <MailLabelManager
+      open={managerOpen}
+      onOpenChange={setManagerOpen}
+      labels={allLabels}
+      onChange={handleLabelsManaged}
+    />
+    </>
+  );
+}