feat: toast on modal close

Author: cfbender

assets/react/src/components/ui/toast.tsx

@@ -0,0 +1,115 @@
+import { Check, X } from "lucide-react"
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react"
+import { createPortal } from "react-dom"
+import { cn } from "../../lib/utils"
+import { Button } from "./button"
+
+type ToastTone = "success" | "info"
+
+type ToastNotice = {
+  id: number
+  message: string
+  tone: ToastTone
+}
+
+type ToastContextValue = {
+  showToast: (message: string, options?: { tone?: ToastTone }) => void
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null)
+const TOAST_DISMISS_MS = 3_500
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<ToastNotice[]>([])
+
+  const dismissToast = useCallback((id: number) => {
+    setToasts((current) => current.filter((toast) => toast.id !== id))
+  }, [])
+
+  const showToast = useCallback(
+    (message: string, options: { tone?: ToastTone } = {}) => {
+      const id = Date.now() + Math.floor(Math.random() * 1_000)
+      const notice = { id, message, tone: options.tone ?? "success" }
+
+      setToasts((current) => [...current, notice])
+      window.setTimeout(() => dismissToast(id), TOAST_DISMISS_MS)
+    },
+    [dismissToast],
+  )
+
+  const value = useMemo(() => ({ showToast }), [showToast])
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      {typeof document !== "undefined"
+        ? createPortal(
+            <div className="toast toast-top toast-end z-[90] w-full max-w-sm p-4 sm:w-auto">
+              {toasts.map((toast) => (
+                <Toast
+                  key={toast.id}
+                  message={toast.message}
+                  tone={toast.tone}
+                  onDismiss={() => dismissToast(toast.id)}
+                />
+              ))}
+            </div>,
+            document.body,
+          )
+        : null}
+    </ToastContext.Provider>
+  )
+}
+
+export function useToast() {
+  const context = useContext(ToastContext)
+  if (!context) throw new Error("useToast must be used inside ToastProvider")
+  return context
+}
+
+export function Toast({
+  message,
+  onDismiss,
+  tone = "success",
+}: {
+  message: string
+  onDismiss?: () => void
+  tone?: ToastTone
+}) {
+  return (
+    <div
+      className={cn(
+        "alert flex items-start justify-between gap-3 border shadow-lg",
+        tone === "success"
+          ? "alert-success border-success/40 text-success-content"
+          : "alert-info border-info/40 text-info-content",
+      )}
+      role="status"
+      aria-live="polite"
+    >
+      <div className="flex items-start gap-2">
+        <Check className="mt-0.5 h-4 w-4 shrink-0" />
+        <span>{message}</span>
+      </div>
+      {onDismiss ? (
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="btn-xs -mr-2 -mt-1 text-current"
+          aria-label="Dismiss notification"
+          onClick={onDismiss}
+        >
+          <X className="h-3.5 w-3.5" />
+        </Button>
+      ) : null}
+    </div>
+  )
+}

assets/react/src/lib/utils.ts

@@ -15,6 +15,10 @@ export function compactNumber(value: number | null | undefined) {
   return new Intl.NumberFormat(undefined, { notation: "compact" }).format(value || 0)
 }
 
+export function pluralize(count: number, singular: string, plural = `${singular}s`) {
+  return `${count} ${count === 1 ? singular : plural}`
+}
+
 export function present<T>(value: T | null | undefined): value is T {
   return value != null
 }

assets/react/src/main.tsx

@@ -4,6 +4,7 @@ import { createRoot } from "react-dom/client"
 import "./pwa"
 import { initializeNativeBackButton } from "./lib/native-back"
 import { ThemeProvider } from "./lib/theme"
+import { ToastProvider } from "./components/ui/toast"
 import { routeTree } from "./routeTree.gen"
 import { initializeNativeSharedImport, type NativeOpenPayload } from "./lib/native-shared-import"
 import { nativeAppPath, parseNativeRoute, type NativeRoute } from "./lib/native-open"
@@ -86,7 +87,9 @@ void initializeNativeBackButton({
 createRoot(document.getElementById("manavault-root")!).render(
   <QueryClientProvider client={queryClient}>
     <ThemeProvider>
-      <RouterProvider router={router} />
+      <ToastProvider>
+        <RouterProvider router={router} />
+      </ToastProvider>
     </ThemeProvider>
   </QueryClientProvider>,
 )

assets/react/src/pages/cards/add-card-to-deck-dialog.tsx

@@ -11,8 +11,9 @@ import {
   DialogTitle,
 } from "../../components/ui/dialog"
 import { Input } from "../../components/ui/input"
+import { useToast } from "../../components/ui/toast"
 import { request } from "../../lib/graphql"
-import { present, titleize } from "../../lib/utils"
+import { pluralize, present, titleize } from "../../lib/utils"
 import { AddCardToDeckDocument, CardDeckOptionsDocument } from "./data"
 
 export type CardDeckTarget = {
@@ -39,6 +40,7 @@ export function AddCatalogCardToDeckDialog({
 }) {
   const queryClient = useQueryClient()
   const navigate = useNavigate()
+  const { showToast } = useToast()
   const [deckId, setDeckId] = useState("")
   const [quantity, setQuantity] = useState(1)
   const [zone, setZone] = useState<CardDeckZone>("mainboard")
@@ -82,7 +84,8 @@ export function AddCatalogCardToDeckDialog({
           queryKey: ["deck-buylist", addedDeckId],
         })
       }
-      close()
+      showToast(`${pluralize(quantity, "card")} added to deck`)
+      onOpenChange(false)
       if (addedDeckId) navigate({ to: "/decks/$id", params: { id: addedDeckId } })
     },
     onError: (error) =>

assets/react/src/pages/collection/add-item-dialog.tsx

@@ -12,8 +12,9 @@ import {
   DialogTitle,
 } from "../../components/ui/dialog"
 import { Input } from "../../components/ui/input"
+import { useToast } from "../../components/ui/toast"
 import { request } from "../../lib/graphql"
-import { present, titleize } from "../../lib/utils"
+import { pluralize, present, titleize } from "../../lib/utils"
 import { COLLECTION_CONDITIONS, COLLECTION_FINISHES, MODAL_SEARCH_DEBOUNCE_MS } from "./constants"
 import {
   CollectionItemFormOptionsDocument,
@@ -46,6 +47,7 @@ export function AddCollectionItemDialog({
   open: boolean
 }) {
   const queryClient = useQueryClient()
+  const { showToast } = useToast()
   const [search, setSearch] = useState("")
   const [selectedPrinting, setSelectedPrinting] =
     useState<AddCollectionItemPrintingSelection | null>(null)
@@ -119,6 +121,7 @@ export function AddCollectionItemDialog({
       queryClient.invalidateQueries({ queryKey: ["collection"] })
       queryClient.invalidateQueries({ queryKey: ["collection-items"] })
       queryClient.invalidateQueries({ queryKey: ["home"] })
+      showToast(`${pluralize(quantity, "card")} added to collection`)
       close(true)
     },
     onError: (error) =>

assets/react/src/pages/collection/add-location-dialog.tsx

@@ -12,6 +12,7 @@ import {
   DialogTitle,
 } from "../../components/ui/dialog"
 import { Input } from "../../components/ui/input"
+import { useToast } from "../../components/ui/toast"
 import { request } from "../../lib/graphql"
 import { present, titleize } from "../../lib/utils"
 import { LOCATION_KINDS, MODAL_SEARCH_DEBOUNCE_MS } from "./constants"
@@ -27,6 +28,7 @@ export function AddLocationDialog({
   open: boolean
 }) {
   const queryClient = useQueryClient()
+  const { showToast } = useToast()
   const [name, setName] = useState("")
   const [kind, setKind] = useState<(typeof LOCATION_KINDS)[number]>("box")
   const [description, setDescription] = useState("")
@@ -74,6 +76,7 @@ export function AddLocationDialog({
         queryKey: ["collection-item-form-options"],
       })
       queryClient.invalidateQueries({ queryKey: ["home"] })
+      showToast(`Created location ${name.trim()}`)
       reset()
       onOpenChange(false)
     },

assets/react/src/pages/collection/add-to-deck-dialog.tsx

@@ -9,8 +9,9 @@ import {
   DialogHeader,
   DialogTitle,
 } from "../../components/ui/dialog"
+import { useToast } from "../../components/ui/toast"
 import { request } from "../../lib/graphql"
-import { present, titleize } from "../../lib/utils"
+import { pluralize, present, titleize } from "../../lib/utils"
 import {
   BulkAddCollectionItemsToDeckDocument,
   CollectionItemDeckOptionsDocument,
@@ -31,6 +32,7 @@ export function AddCollectionItemToDeckDialog({
   onOpenChange: (open: boolean) => void
 }) {
   const queryClient = useQueryClient()
+  const { showToast } = useToast()
   const [deckId, setDeckId] = useState("")
   const [zone, setZone] = useState("mainboard")
   const [error, setError] = useState<string | null>(null)
@@ -59,8 +61,9 @@ export function AddCollectionItemToDeckDialog({
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["decks"] })
+      showToast(`${pluralize(targetCount, "card")} added to deck`)
       onDone()
-      close()
+      onOpenChange(false)
     },
     onError: (error) =>
       setError(error instanceof Error ? error.message : "Could not add cards to deck"),

assets/react/src/pages/collection/bulk-edit-item-dialog.tsx

@@ -10,8 +10,10 @@ import {
   DialogTitle,
 } from "../../components/ui/dialog"
 import { Input } from "../../components/ui/input"
+import { useToast } from "../../components/ui/toast"
 import type { CollectionItemUpdateInput } from "../../gql/graphql"
 import { request } from "../../lib/graphql"
+import { pluralize } from "../../lib/utils"
 import { COLLECTION_FINISHES } from "./constants"
 import { BulkUpdateCollectionItemsDocument } from "./documents"
 import { buildBulkCollectionItemUpdateInput } from "./bulk-edit-input"
@@ -33,6 +35,7 @@ export function BulkEditCollectionItemsDialog({
   onDone: () => void
   onOpenChange: (open: boolean) => void
 }) {
+  const { showToast } = useToast()
   const targetItems = useMemo(() => collectionTargetItems(item), [item])
   const targetCount = targetItems.length
   const commonFinish = useMemo(() => commonCollectionFinish(targetItems), [targetItems])
@@ -53,8 +56,9 @@ export function BulkEditCollectionItemsDialog({
       })
     },
     onSuccess: () => {
+      showToast(`${pluralize(targetCount, "card")} edited`)
       onDone()
-      close()
+      onOpenChange(false)
     },
     onError: (error) =>
       setError(error instanceof Error ? error.message : "Could not update collection items"),

assets/react/src/pages/collection/collection-page.tsx

@@ -8,6 +8,7 @@ import { EmptyState } from "../../components/card-image"
 import { CardNameSearchField } from "../../components/card-name-search-field"
 import { Button } from "../../components/ui/button"
 import { ConfirmDialog } from "../../components/ui/confirm-dialog"
+import { useToast } from "../../components/ui/toast"
 import {
   buildCollectionFilterQuery,
   combineCollectionQueries,
@@ -22,7 +23,7 @@ import {
   type SharedImportPayload,
 } from "../../lib/native-shared-import"
 import { useLocalStorageState } from "../../lib/use-local-storage"
-import { present } from "../../lib/utils"
+import { pluralize, present } from "../../lib/utils"
 import { AutoSortSetupDialog, hasEnabledAutoSortRules } from "./auto-sort-setup-dialog"
 import { AutoSortSummaryDialog } from "./auto-sort-summary-dialog"
 import { CollectionLocationsSection } from "./collection-locations-section"
@@ -129,6 +130,7 @@ export function CollectionPage({ importFile = false }: { importFile?: boolean })
     },
   )
   const queryClient = useQueryClient()
+  const { showToast } = useToast()
   const navigate = useNavigate()
   const deleteLocation = useMutation({
     mutationFn: (locationId: string) => request(DeleteLocationDocument, { id: locationId }),
@@ -184,8 +186,11 @@ export function CollectionPage({ importFile = false }: { importFile?: boolean })
         invalidateCollectionViews(queryClient)
         queryClient.invalidateQueries({ queryKey: ["location"] })
         selection.clearSelection()
+        showToast(`${pluralize(result?.movedCount ?? 0, "card")} auto-sorted`)
+        setAutoSortResult(null)
+      } else {
+        setAutoSortResult(result ?? null)
       }
-      setAutoSortResult(result ?? null)
       setAutoSortError(null)
     },
     onError: (error) => {
@@ -324,7 +329,10 @@ export function CollectionPage({ importFile = false }: { importFile?: boolean })
 
   function deleteSelectedLocation() {
     if (!deletingLocation) return
-    deleteLocation.mutate(deletingLocation.id)
+    const locationName = deletingLocation.name
+    deleteLocation.mutate(deletingLocation.id, {
+      onSuccess: () => showToast(`Deleted location ${locationName}`),
+    })
     if (editingLocation?.id === deletingLocation.id) setEditingLocation(null)
     if (exportingLocation?.location.id === deletingLocation.id) setExportingLocation(null)
   }

assets/react/src/pages/collection/delete-item-dialog.tsx

@@ -9,7 +9,9 @@ import {
   DialogHeader,
   DialogTitle,
 } from "../../components/ui/dialog"
+import { useToast } from "../../components/ui/toast"
 import { request } from "../../lib/graphql"
+import { pluralize } from "../../lib/utils"
 import { DeleteCollectionItemDocument } from "./documents"
 import {
   collectionTargetItems,
@@ -26,6 +28,7 @@ export function DeleteCollectionItemDialog({
   onDone: () => void
   onOpenChange: (open: boolean) => void
 }) {
+  const { showToast } = useToast()
   const [error, setError] = useState<string | null>(null)
   const targetItems = collectionTargetItems(item)
   const targetCount = targetItems.length
@@ -40,8 +43,9 @@ export function DeleteCollectionItemDialog({
       )
     },
     onSuccess: () => {
+      showToast(`${pluralize(targetCount, "card")} deleted`)
       onDone()
-      close()
+      onOpenChange(false)
     },
     onError: (error) =>
       setError(error instanceof Error ? error.message : "Could not delete collection items"),