add release monitor and ui toast

packages/ui/src/lib/notifications.tsx

@@ -2,11 +2,23 @@ import toast from "solid-toast"
 
 export type ToastVariant = "info" | "success" | "warning" | "error"
 
+export type ToastHandle = {
+  id: string
+  dismiss: () => void
+}
+
+type ToastPosition = "top-left" | "top-right" | "top-center" | "bottom-left" | "bottom-right" | "bottom-center"
+
 export type ToastPayload = {
   title?: string
   message: string
   variant: ToastVariant
   duration?: number
+  position?: ToastPosition
+  action?: {
+    label: string
+    href: string
+  }
 }
 
 const variantAccent: Record<
@@ -44,11 +56,11 @@ const variantAccent: Record<
   },
 }
 
-export function showToastNotification(payload: ToastPayload) {
+export function showToastNotification(payload: ToastPayload): ToastHandle {
   const accent = variantAccent[payload.variant]
   const duration = payload.duration ?? 10000
 
-  toast.custom(
+  const id = toast.custom(
     () => (
       <div class={`pointer-events-auto w-[320px] max-w-[360px] rounded-lg border px-4 py-3 shadow-xl ${accent.container}`}>
         <div class="flex items-start gap-3">
@@ -56,16 +68,32 @@ export function showToastNotification(payload: ToastPayload) {
           <div class="flex-1 text-sm leading-snug">
             {payload.title && <p class={`font-semibold ${accent.headline}`}>{payload.title}</p>}
             <p class={`${accent.body} ${payload.title ? "mt-1" : ""}`}>{payload.message}</p>
+            {payload.action && (
+              <a
+                class="mt-3 inline-flex items-center text-xs font-semibold uppercase tracking-wide text-sky-300 hover:text-sky-200"
+                href={payload.action.href}
+                target="_blank"
+                rel="noreferrer noopener"
+              >
+                {payload.action.label}
+              </a>
+            )}
           </div>
         </div>
       </div>
     ),
     {
       duration,
+      position: payload.position ?? "top-right",
       ariaProps: {
         role: "status",
         "aria-live": "polite",
       },
     },
   )
+
+  return {
+    id,
+    dismiss: () => toast.dismiss(id),
+  }
 }