@algenium/blocks 1.2.1 → 1.3.0-rc.1

package/dist/index.d.cts

@@ -406,8 +406,12 @@ interface NotificationsWidgetProps {
     soundCooldown?: number;
     /** "ghost" renders a borderless button matching other ghost icon buttons. */
     buttonVariant?: "default" | "ghost";
+    /** URL to navigate to when "View all" is clicked in the footer. */
+    viewAllHref?: string;
+    /** Label for the "View all" link. Default: "View all" */
+    viewAllLabel?: string;
 }
-declare function NotificationsWidget({ notifications: propNotifications, onMarkAsRead: propOnMarkAsRead, onMarkAllAsRead: propOnMarkAllAsRead, onDismiss: propOnDismiss, onClearAll: propOnClearAll, onNotificationClick: propOnNotificationClick, size, maxVisible, playSound, soundUrl, className, emptyMessage, title, dotColor, showPulse, soundType, pulseStyle, soundCooldown, buttonVariant, }: NotificationsWidgetProps): react_jsx_runtime.JSX.Element;
+declare function NotificationsWidget({ notifications: propNotifications, onMarkAsRead: propOnMarkAsRead, onMarkAllAsRead: propOnMarkAllAsRead, onDismiss: propOnDismiss, onClearAll: propOnClearAll, onNotificationClick: propOnNotificationClick, size, maxVisible, playSound, soundUrl, className, emptyMessage, title, dotColor, showPulse, soundType, pulseStyle, soundCooldown, buttonVariant, viewAllHref, viewAllLabel, }: NotificationsWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface CalendarWidgetLabels {
     title?: string;

package/dist/index.d.ts

@@ -406,8 +406,12 @@ interface NotificationsWidgetProps {
     soundCooldown?: number;
     /** "ghost" renders a borderless button matching other ghost icon buttons. */
     buttonVariant?: "default" | "ghost";
+    /** URL to navigate to when "View all" is clicked in the footer. */
+    viewAllHref?: string;
+    /** Label for the "View all" link. Default: "View all" */
+    viewAllLabel?: string;
 }
-declare function NotificationsWidget({ notifications: propNotifications, onMarkAsRead: propOnMarkAsRead, onMarkAllAsRead: propOnMarkAllAsRead, onDismiss: propOnDismiss, onClearAll: propOnClearAll, onNotificationClick: propOnNotificationClick, size, maxVisible, playSound, soundUrl, className, emptyMessage, title, dotColor, showPulse, soundType, pulseStyle, soundCooldown, buttonVariant, }: NotificationsWidgetProps): react_jsx_runtime.JSX.Element;
+declare function NotificationsWidget({ notifications: propNotifications, onMarkAsRead: propOnMarkAsRead, onMarkAllAsRead: propOnMarkAllAsRead, onDismiss: propOnDismiss, onClearAll: propOnClearAll, onNotificationClick: propOnNotificationClick, size, maxVisible, playSound, soundUrl, className, emptyMessage, title, dotColor, showPulse, soundType, pulseStyle, soundCooldown, buttonVariant, viewAllHref, viewAllLabel, }: NotificationsWidgetProps): react_jsx_runtime.JSX.Element;
 
 interface CalendarWidgetLabels {
     title?: string;

package/dist/index.js

@@ -4987,7 +4987,9 @@ function NotificationsWidget({
   soundType = "chime",
   pulseStyle = "ring",
   soundCooldown = 2e3,
-  buttonVariant = "default"
+  buttonVariant = "default",
+  viewAllHref,
+  viewAllLabel = "View all"
 }) {
   const context = useNotificationsContext();
   const notifications = propNotifications ?? context?.notifications ?? [];
@@ -5232,9 +5234,19 @@ function NotificationsWidget({
               }
             ) })
           ] }),
-          sortedNotifications.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-8 px-4 text-center", children: [
-            /* @__PURE__ */ jsx("div", { className: "w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-3", children: /* @__PURE__ */ jsx(Bell, { className: "w-6 h-6 text-muted-foreground" }) }),
-            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: emptyMessage })
+          sortedNotifications.length === 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-8 px-4 text-center", children: [
+              /* @__PURE__ */ jsx("div", { className: "w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-3", children: /* @__PURE__ */ jsx(Bell, { className: "w-6 h-6 text-muted-foreground" }) }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: emptyMessage })
+            ] }),
+            viewAllHref && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center px-4 py-2 border-t border-border bg-muted/30", children: /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: viewAllHref,
+                className: "text-xs text-primary hover:underline font-medium",
+                children: viewAllLabel
+              }
+            ) })
           ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
               "div",
@@ -5297,7 +5309,7 @@ function NotificationsWidget({
                               children: notification.title
                             }
                           ) }),
-                          notification.message && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground line-clamp-2 mt-0.5", children: notification.message }),
+                          notification.message && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: notification.message }),
                           /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground/70 mt-1", children: formatTimeAgo(notification.timestamp) })
                         ] }),
                         /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 flex items-start gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: onDismiss && /* @__PURE__ */ jsx(
@@ -5320,25 +5332,35 @@ function NotificationsWidget({
                 }) })
               }
             ),
-            (hasMore || onClearAll) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 border-t border-border bg-muted/30", children: [
-              hasMore && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+            (hasMore || onClearAll || viewAllHref) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 border-t border-border bg-muted/30", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: hasMore && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
                 "+",
                 sortedNotifications.length - maxVisible,
                 " more"
-              ] }),
-              onClearAll && sortedNotifications.length > 0 && /* @__PURE__ */ jsxs(
-                Button,
-                {
-                  variant: "ghost",
-                  size: "sm",
-                  className: "h-7 px-2 text-xs text-muted-foreground hover:text-destructive",
-                  onClick: () => onClearAll(),
-                  children: [
-                    /* @__PURE__ */ jsx(Trash2, { className: "w-3 h-3 mr-1" }),
-                    "Clear all"
-                  ]
-                }
-              )
+              ] }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                viewAllHref && /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: viewAllHref,
+                    className: "text-xs text-primary hover:underline font-medium",
+                    children: viewAllLabel
+                  }
+                ),
+                onClearAll && sortedNotifications.length > 0 && /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    className: "h-7 px-2 text-xs text-muted-foreground hover:text-destructive",
+                    onClick: () => onClearAll(),
+                    children: [
+                      /* @__PURE__ */ jsx(Trash2, { className: "w-3 h-3 mr-1" }),
+                      "Clear all"
+                    ]
+                  }
+                )
+              ] })
             ] })
           ] })
         ]
@@ -6797,7 +6819,7 @@ function ChatSidebar({
   } = useChatSidebar();
   useEffect(() => {
     if (!isOpen || typeof window === "undefined") return;
-    const mq = window.matchMedia("(max-width: 639px)");
+    const mq = window.matchMedia("(max-width: 767px)");
     const apply = () => {
       if (mq.matches) document.body.style.overflow = "hidden";
       else document.body.style.overflow = "";
@@ -6825,7 +6847,7 @@ function ChatSidebar({
       className: cn(
         "flex min-h-0 flex-col bg-background",
         "fixed top-[var(--sidebar-top)] right-0 bottom-0 left-0 z-[100] w-full max-w-none border-0 shadow-none",
-        "sm:relative sm:inset-auto sm:z-auto sm:h-full sm:w-[360px] sm:max-w-[360px] sm:shrink-0 sm:border-l sm:shadow-none xl:w-[400px] xl:max-w-[400px]",
+        "md:relative md:inset-auto md:z-auto md:h-full md:w-[360px] md:max-w-[360px] md:shrink-0 md:border-l md:shadow-none xl:w-[400px] xl:max-w-[400px]",
         className
       ),
       children: view === "list" ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -6925,7 +6947,7 @@ function ChatSidebar({
       "div",
       {
         style: cssVars,
-        className: "fixed top-[var(--sidebar-top)] right-0 bottom-0 left-0 z-[90] bg-black/50 sm:hidden",
+        className: "fixed top-[var(--sidebar-top)] right-0 bottom-0 left-0 z-[90] bg-black/50 md:hidden",
         "aria-hidden": true,
         onClick: close
       }