Implement a simple notification system for important updates and messages

Refactors Toast component to a simpler, functional implementation using useState, useEffect, and createPortal.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: cbacfb18-842a-4116-a907-18c0105ad8ec
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/39b5c689-6e8a-4d5a-9792-69cc81a56534/424807ac-864a-4f04-9919-0e483ee2b3ff.jpg

client/src/components/ui/toast.tsx

@@ -1,127 +1,60 @@
-import * as React from "react"
+// Basic toast component
-import * as ToastPrimitives from "@radix-ui/react-toast"
+import { useEffect, useState } from "react";
-import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react";
-import { X } from "lucide-react"
 
-import { cn } from "@/lib/utils"
+export interface ToastProps {
-
+  id: number;
-const ToastProvider = ToastPrimitives.Provider
+  title?: string;
-
+  description?: string;
-const ToastViewport = React.forwardRef<
+  variant?: "default" | "destructive";
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  duration?: number;
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+  onDismiss: (id: number) => void;
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className
-    )}
-    {...props}
-  />
-))
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
-
-const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
-  {
-    variants: {
-      variant: {
-        default: "border bg-background text-foreground",
-        destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
-  return (
-    <ToastPrimitives.Root
-      ref={ref}
-      className={cn(toastVariants({ variant }), className)}
-      {...props}
-    />
-  )
-})
-Toast.displayName = ToastPrimitives.Root.displayName
-
-const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
-    ref={ref}
-    className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
-      className
-    )}
-    {...props}
-  />
-))
-ToastAction.displayName = ToastPrimitives.Action.displayName
-
-const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className
-    )}
-    toast-close=""
-    {...props}
-  >
-    <X className="h-4 w-4" />
-  </ToastPrimitives.Close>
-))
-ToastClose.displayName = ToastPrimitives.Close.displayName
-
-const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title
-    ref={ref}
-    className={cn("text-sm font-semibold", className)}
-    {...props}
-  />
-))
-ToastTitle.displayName = ToastPrimitives.Title.displayName
-
-const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description
-    ref={ref}
-    className={cn("text-sm opacity-90", className)}
-    {...props}
-  />
-))
-ToastDescription.displayName = ToastPrimitives.Description.displayName
-
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
-
-type ToastActionElement = React.ReactElement<typeof ToastAction>
-
-export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
 }
+
+export function Toast({
+  id,
+  title,
+  description,
+  variant = "default",
+  onDismiss,
+}: ToastProps) {
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsVisible(false);
+      setTimeout(() => onDismiss(id), 300); // Allow time for fade out animation
+    }, 3000);
+
+    return () => clearTimeout(timer);
+  }, [id, onDismiss]);
+
+  const baseClasses = "fixed bottom-4 right-4 rounded-md shadow-lg p-4 transition-all duration-300 max-w-sm";
+  const variantClasses = variant === "destructive" 
+    ? "bg-red-500 text-white" 
+    : "bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100";
+  const visibilityClasses = isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-2";
+
+  return (
+    <div className={`${baseClasses} ${variantClasses} ${visibilityClasses}`}>
+      <div className="flex justify-between items-start">
+        <div>
+          {title && <h3 className="font-medium">{title}</h3>}
+          {description && <p className="text-sm mt-1 opacity-80">{description}</p>}
+        </div>
+        <button
+          onClick={() => {
+            setIsVisible(false);
+            setTimeout(() => onDismiss(id), 300);
+          }}
+          className="text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400"
+        >
+          <X size={18} />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// Types for prop references in other files
+export type ToastActionElement = React.ReactElement;

client/src/components/ui/toaster.tsx

@@ -1,33 +1,27 @@
-import { useToast } from "@/hooks/use-toast"
+// Simple toast container
-import {
+import { useToast } from "@/hooks/use-toast";
-  Toast,
+import { Toast } from "./toast";
-  ToastClose,
+import { createPortal } from "react-dom";
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
-} from "@/components/ui/toast"
 
 export function Toaster() {
-  const { toasts } = useToast()
+  const { toasts, dismiss } = useToast();
 
-  return (
+  if (!toasts.length) return null;
-    <ToastProvider>
+
-      {toasts.map(function ({ id, title, description, action, ...props }) {
+  // Create a portal to render toasts at the root level
-        return (
+  return createPortal(
-          <Toast key={id} {...props}>
+    <div className="fixed bottom-0 right-0 z-50 p-4 flex flex-col gap-2">
-            <div className="grid gap-1">
+      {toasts.map((toast) => (
-              {title && <ToastTitle>{title}</ToastTitle>}
+        <Toast
-              {description && (
+          key={toast.id}
-                <ToastDescription>{description}</ToastDescription>
+          id={toast.id!}
-              )}
+          title={toast.title}
-            </div>
+          description={toast.description}
-            {action}
+          variant={toast.variant}
-            <ToastClose />
+          onDismiss={dismiss}
-          </Toast>
+        />
-        )
+      ))}
-      })}
+    </div>,
-      <ToastViewport />
+    document.body
-    </ToastProvider>
+  );
-  )
 }

client/src/hooks/use-toast.ts

@@ -9,11 +9,13 @@ interface ToastOptions {
   variant?: ToastVariant;
   duration?: number;
   id?: number;
+  className?: string;
 }
 
 export function useToast() {
   const [toasts, setToasts] = useState<ToastOptions[]>([]);
 
+  // Create a function that matches the expected signature in BlogManagement
   const toast = (options: ToastOptions) => {
     const id = Date.now();
     const newToast = {