notification

Use the unified toast notification system for all user-facing notifications in Conduit.

Rules

• NEVER create inline notification UI, custom alert components, or window.alert() calls
• ALWAYS import from src/components/common/Toast.tsx
• The ToastContainer is mounted in App.tsx via NotificationStack (bottom-right, fixed w-sm)
• The credential picker window has its own ToastContainer in CredentialPickerApp.tsx

API Reference

import { toast } from "./components/common/Toast";
// Types: ToastType, ToastAction, ToastOptions, ToastProgress are exported

// Basic — second param is optional message string
toast.success("Password copied");
toast.error("Connection failed", "Check your credentials");
toast.warning("Session disconnected");
toast.info("Processing complete");

// With action buttons — second param is ToastOptions object
toast.error("Entry limit reached", {
  message: "Upgrade your plan to add more connections",
  actions: [
    { label: "Upgrade", variant: "primary", onClick: () => openPricing() },
    { label: "Dismiss", variant: "default", onClick: () => {} },
  ],
});

// Persistent (no auto-dismiss, user must close or call dismiss)
const id = toast.info("Uploading...", { persistent: true });

// Programmatic dismiss
toast.dismiss(id);

// Update an existing toast in-place (does NOT reset auto-dismiss timer)
toast.update(id, {
  title: "Almost done...",
  message: "Processing final batch",
  progress: { percent: 90, leftLabel: "Step 3/3", rightLabel: "900 KB / 1 MB" },
});

// Custom duration (default is 5000ms)
toast.success("Saved", { duration: 3000 });

// Dismiss on action click (default: true)
toast.info("New version available", {
  actions: [{ label: "Details", variant: "primary", onClick: showChangelog }],
  dismissOnAction: false, // keep toast visible after clicking
});

// With progress bar
const progressId = toast.info("Downloading files", {
  persistent: true,
  progress: {
    percent: 0,
    leftLabel: "File 1/3 — Downloading",
    rightLabel: "0 B / 12.5 MB",
  },
});

// Update progress
toast.update(progressId, {
  progress: {
    percent: 45,
    leftLabel: "File 1/3 — Downloading",
    rightLabel: "5.6 MB / 12.5 MB",
    speed: "2.1 MB/s",
  },
});

// Complete — dismiss progress toast, show success
toast.dismiss(progressId);
toast.success("Files downloaded", "3 files copied to clipboard");