@flamingo-stack/openframe-frontend-core 0.0.263 → 0.0.264-snapshot.20260612115719

package/dist/{chunk-6AIXHYBZ.js → chunk-EXU5N5RM.js}

@@ -6,15 +6,17 @@ import {
   progressColorByVariant,
   toolLabels,
   useCopyToClipboard,
+  useHeaderHeight,
   useHorizontalScrollbar,
   useHumanitySignals,
   useImageEdgeColor,
   useLgUp,
   useLocalStorage,
   useMdUp,
+  useNotificationPermission,
   useOnboardingState,
   useToast
-} from "./chunk-6GBA6YJN.js";
+} from "./chunk-ZMFT5XOB.js";
 import {
   cn as cn2
 } from "./chunk-NR535XIY.js";
@@ -10406,12 +10408,14 @@ var DrawerContent = React40.forwardRef(
     style,
     panelStyle,
     panelClassName,
+    offsetHeader = false,
     children,
     ...props
   }, ref) => {
     const resolvedSide = side ?? "right";
     const isHorizontal = HORIZONTAL_SIDES.has(resolvedSide);
     const initialSize = defaultSize ?? (isHorizontal ? 560 : 480);
+    const headerHeight = useHeaderHeight();
     const [isMobile, setIsMobile] = React40.useState(false);
     React40.useEffect(() => {
       if (typeof window === "undefined") return;
@@ -10438,7 +10442,7 @@ var DrawerContent = React40.forwardRef(
         {
           ref,
           className: cn(drawerVariants({ side, flush })),
-          style,
+          style: { ...offsetHeader ? { top: headerHeight } : {}, ...style },
           ...props,
           children: [
             applyInlineSize ? /* @__PURE__ */ jsx85(
@@ -10484,7 +10488,7 @@ var DrawerHeader = ({
   }
 );
 DrawerHeader.displayName = "DrawerHeader";
-var DrawerTitle = React40.forwardRef(({ className, children, actions, ...props }, ref) => /* @__PURE__ */ jsxs66("div", { className: "flex items-start gap-4", children: [
+var DrawerTitle = React40.forwardRef(({ className, children, actions, hideClose, ...props }, ref) => /* @__PURE__ */ jsxs66("div", { className: "flex items-start gap-4", children: [
   /* @__PURE__ */ jsx85(
     DialogPrimitive2.Title,
     {
@@ -10498,7 +10502,7 @@ var DrawerTitle = React40.forwardRef(({ className, children, actions, ...props }
     }
   ),
   actions,
-  /* @__PURE__ */ jsxs66(DialogPrimitive2.Close, { className: "shrink-0 rounded-sm text-ods-text-secondary transition-colors hover:text-ods-text-primary outline-none ring-0 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0", children: [
+  !hideClose && /* @__PURE__ */ jsxs66(DialogPrimitive2.Close, { className: "shrink-0 rounded-sm text-ods-text-secondary transition-colors hover:text-ods-text-primary outline-none ring-0 focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0", children: [
     /* @__PURE__ */ jsx85(X5, { className: "size-6" }),
     /* @__PURE__ */ jsx85("span", { className: "sr-only", children: "Close" })
   ] })
@@ -12738,6 +12742,33 @@ async function extractImageEdgeColorAsync(imageUrl) {
 }
 
 // src/utils/date-utils.ts
+function formatTicketRelativeTime(iso) {
+  const now = /* @__PURE__ */ new Date();
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return "";
+  const diffMs = now.getTime() - date.getTime();
+  const diffMin = Math.floor(diffMs / 6e4);
+  if (diffMin < 1) return "Just now";
+  if (diffMin < 60) return `${diffMin} min ago`;
+  const diffHours = Math.floor(diffMin / 60);
+  if (diffHours < 24) return diffHours === 1 ? "1 hour ago" : `${diffHours} hours ago`;
+  const mm = String(date.getMonth() + 1).padStart(2, "0");
+  const dd = String(date.getDate()).padStart(2, "0");
+  const yyyy = date.getFullYear();
+  return `${mm}/${dd}/${yyyy}`;
+}
+function formatTicketFullTimestamp(iso) {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return "";
+  const mm = String(date.getMonth() + 1).padStart(2, "0");
+  const dd = String(date.getDate()).padStart(2, "0");
+  const yyyy = date.getFullYear();
+  let hours = date.getHours();
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  const ampm = hours >= 12 ? "PM" : "AM";
+  hours = hours % 12 || 12;
+  return `${mm}/${dd}/${yyyy}, ${hours}:${minutes} ${ampm}`;
+}
 function formatRelativeTime(timestamp) {
   const now = /* @__PURE__ */ new Date();
   const targetTime = typeof timestamp === "string" ? new Date(timestamp) : timestamp;
@@ -20640,6 +20671,8 @@ function NotificationsProvider({
   maxNotifications = 50,
   defaultShowPopups = true,
   onShowPopupsChange,
+  defaultShowDesktopPopups = false,
+  onShowDesktopPopupsChange,
   onHistoryClick,
   actions,
   hasMore = false,
@@ -20650,6 +20683,8 @@ function NotificationsProvider({
   const [notifications, dispatch] = React69.useReducer(reducer, initialNotifications);
   const [isOpen, setIsOpen] = React69.useState(false);
   const [showPopups, setShowPopupsState] = React69.useState(defaultShowPopups);
+  const [showDesktopPopups, setShowDesktopPopupsState] = React69.useState(defaultShowDesktopPopups);
+  const desktopPopupsConfigured = onShowDesktopPopupsChange !== void 0;
   const actionsRef = React69.useRef(actions);
   React69.useEffect(() => {
     actionsRef.current = actions;
@@ -20711,6 +20746,13 @@ function NotificationsProvider({
     },
     [onShowPopupsChange]
   );
+  const setShowDesktopPopups = React69.useCallback(
+    (value2) => {
+      setShowDesktopPopupsState(value2);
+      onShowDesktopPopupsChange?.(value2);
+    },
+    [onShowDesktopPopupsChange]
+  );
   const unreadCount = React69.useMemo(
     () => notifications.reduce((acc, n) => n.read ? acc : acc + 1, 0),
     [notifications]
@@ -20733,6 +20775,9 @@ function NotificationsProvider({
       close,
       toggle,
       setShowPopups,
+      showDesktopPopups,
+      setShowDesktopPopups,
+      desktopPopupsConfigured,
       onHistoryClick,
       hasMore,
       isLoadingMore,
@@ -20744,6 +20789,9 @@ function NotificationsProvider({
       unreadCount,
       isOpen,
       showPopups,
+      showDesktopPopups,
+      setShowDesktopPopups,
+      desktopPopupsConfigured,
       addNotification,
       upsertNotification,
       setNotifications,
@@ -20901,6 +20949,9 @@ function NotificationDrawer({
     markAllRead,
     markSettled,
     setShowPopups,
+    showDesktopPopups,
+    setShowDesktopPopups,
+    desktopPopupsConfigured,
     onHistoryClick,
     hasMore,
     isLoadingMore,
@@ -20914,6 +20965,7 @@ function NotificationDrawer({
     {
       side: "right",
       "aria-describedby": void 0,
+      offsetHeader: true,
       className: cn(
         "w-[calc(100vw-2rem)] sm:w-[26rem] sm:max-w-[calc(100vw-2rem)] gap-[var(--spacing-system-m)] p-[var(--spacing-system-zero)]",
         className
@@ -20922,6 +20974,7 @@ function NotificationDrawer({
         /* @__PURE__ */ jsx180("div", { className: "px-[var(--spacing-system-m)] pt-[var(--spacing-system-m)]", children: /* @__PURE__ */ jsx180(
           DrawerTitle,
           {
+            hideClose: true,
             className: "truncate",
             actions: /* @__PURE__ */ jsx180(
               "button",
@@ -20951,7 +21004,10 @@ function NotificationDrawer({
           }
         ),
         /* @__PURE__ */ jsxs140("div", { className: "flex flex-col gap-[var(--spacing-system-xs)] px-[var(--spacing-system-m)] pb-[var(--spacing-system-m)]", children: [
-          /* @__PURE__ */ jsx180(ShowNotificationsToggleRow, { checked: showPopups, onChange: setShowPopups }),
+          /* @__PURE__ */ jsxs140("div", { className: "overflow-hidden rounded-md border border-ods-border bg-ods-card", children: [
+            /* @__PURE__ */ jsx180(ShowNotificationsToggleRow, { checked: showPopups, onChange: setShowPopups }),
+            desktopPopupsConfigured && /* @__PURE__ */ jsx180(DesktopNotificationsToggleRow, { checked: showDesktopPopups, onChange: setShowDesktopPopups })
+          ] }),
           /* @__PURE__ */ jsx180(
             NotificationsHistoryButton,
             {
@@ -21047,7 +21103,7 @@ function EmptyState() {
   ] });
 }
 function ShowNotificationsToggleRow({ checked, onChange }) {
-  return /* @__PURE__ */ jsxs140("div", { className: "flex items-center gap-[var(--spacing-system-s)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-sf)]", children: [
+  return /* @__PURE__ */ jsxs140("div", { className: "flex items-center gap-[var(--spacing-system-s)] border-b border-ods-border p-[var(--spacing-system-sf)]", children: [
     /* @__PURE__ */ jsx180(
       Switch,
       {
@@ -21062,6 +21118,33 @@ function ShowNotificationsToggleRow({ checked, onChange }) {
     ] })
   ] });
 }
+function DesktopNotificationsToggleRow({ checked, onChange }) {
+  const { supported, permission, request } = useNotificationPermission();
+  if (!supported) return null;
+  const blocked = permission === "denied";
+  const handleChange = async (value) => {
+    if (!value || permission === "granted") {
+      onChange(value);
+      return;
+    }
+    if (await request() === "granted") onChange(true);
+  };
+  return /* @__PURE__ */ jsxs140("div", { className: "flex items-center gap-[var(--spacing-system-s)] border-b border-ods-border p-[var(--spacing-system-sf)]", children: [
+    /* @__PURE__ */ jsx180(
+      Switch,
+      {
+        checked: checked && permission === "granted",
+        disabled: blocked,
+        onCheckedChange: handleChange,
+        "aria-label": "Show desktop notifications"
+      }
+    ),
+    /* @__PURE__ */ jsxs140("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx180("p", { className: cn("text-h4", blocked ? "text-ods-text-secondary" : "text-ods-text-primary"), children: "Desktop Notifications" }),
+      /* @__PURE__ */ jsx180("p", { className: "text-h6 text-ods-text-secondary", children: blocked ? "Enable notifications in your browser settings" : "Notify when this tab is in the background" })
+    ] })
+  ] });
+}
 function NotificationsHistoryButton({ onClick }) {
   return /* @__PURE__ */ jsx180(
     Button,
@@ -21479,6 +21562,8 @@ function TicketCard({
       ] })
     ] }) : null
   ] }) : null;
+  const timestampLabel = ticket.createdAt ? formatTicketRelativeTime(ticket.createdAt) : null;
+  const tooltipLabel = ticket.createdAt ? formatTicketFullTimestamp(ticket.createdAt) : null;
   const body = /* @__PURE__ */ jsxs143(Fragment25, { children: [
     /* @__PURE__ */ jsxs143("div", { className: "flex items-start gap-[var(--spacing-system-sf)]", children: [
       /* @__PURE__ */ jsxs143("div", { className: "flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-zero)]", title: ticket.title, children: [
@@ -21490,7 +21575,11 @@ function TicketCard({
       ] }),
       rightSection
     ] }),
-    ticket.tags?.length ? /* @__PURE__ */ jsx184(TicketTagRow, { tags: ticket.tags }) : null
+    ticket.tags?.length ? /* @__PURE__ */ jsx184(TicketTagRow, { tags: ticket.tags }) : null,
+    timestampLabel && tooltipLabel && /* @__PURE__ */ jsx184(TooltipProvider, { children: /* @__PURE__ */ jsxs143(Tooltip, { children: [
+      /* @__PURE__ */ jsx184(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx184("p", { className: "pointer-events-auto text-h6 truncate text-ods-text-secondary", children: timestampLabel }) }),
+      /* @__PURE__ */ jsx184(TooltipContent, { children: tooltipLabel })
+    ] }) })
   ] });
   const cardClasses = cn(
     "relative flex flex-col gap-[var(--spacing-system-sf)] rounded-md border border-ods-border bg-ods-bg p-[var(--spacing-system-sf)] select-none text-left",
@@ -22567,57 +22656,9 @@ import { Fragment as Fragment30, jsx as jsx193, jsxs as jsxs150 } from "react/js
 function SlidingSidebar({ config }) {
   const [expandedItems, setExpandedItems] = useState58(/* @__PURE__ */ new Set());
   const [mounted, setMounted] = useState58(false);
-  const [headerHeight, setHeaderHeight] = useState58(64);
+  const headerHeight = useHeaderHeight();
   useEffect42(() => {
     setMounted(true);
-    const calculateHeaderHeight = () => {
-      let totalHeight = 0;
-      const header2 = document.querySelector("header");
-      if (header2) {
-        totalHeight += header2.offsetHeight;
-      }
-      const announcementBar2 = document.querySelector("[data-announcement-bar]");
-      if (announcementBar2 && announcementBar2 instanceof HTMLElement) {
-        totalHeight += announcementBar2.offsetHeight;
-      }
-      if (totalHeight > 0) {
-        setHeaderHeight(totalHeight);
-      } else {
-        setHeaderHeight(64);
-      }
-    };
-    setTimeout(calculateHeaderHeight, 100);
-    calculateHeaderHeight();
-    window.addEventListener("resize", calculateHeaderHeight);
-    const resizeObserver = new ResizeObserver(calculateHeaderHeight);
-    const header = document.querySelector("header");
-    if (header) {
-      resizeObserver.observe(header);
-    }
-    const announcementBar = document.querySelector("[data-announcement-bar]");
-    if (announcementBar) {
-      resizeObserver.observe(announcementBar);
-    }
-    const mutationObserver = new MutationObserver((mutations) => {
-      for (const mutation of mutations) {
-        if (mutation.type === "childList") {
-          calculateHeaderHeight();
-          const newAnnouncementBar = document.querySelector("[data-announcement-bar]");
-          if (newAnnouncementBar) {
-            resizeObserver.observe(newAnnouncementBar);
-          }
-        }
-      }
-    });
-    mutationObserver.observe(document.body, {
-      childList: true,
-      subtree: true
-    });
-    return () => {
-      window.removeEventListener("resize", calculateHeaderHeight);
-      resizeObserver.disconnect();
-      mutationObserver.disconnect();
-    };
   }, []);
   const toggleExpanded = (itemId) => {
     const newExpanded = new Set(expandedItems);
@@ -39419,6 +39460,8 @@ export {
   getBestContrastColor,
   analyzeImageColor,
   extractImageEdgeColorAsync,
+  formatTicketRelativeTime,
+  formatTicketFullTimestamp,
   formatRelativeTime,
   formatAbsoluteDate,
   formatDateTime,
@@ -39674,4 +39717,4 @@ export {
   LogsList,
   assets
 };
-//# sourceMappingURL=chunk-6AIXHYBZ.js.map
+//# sourceMappingURL=chunk-EXU5N5RM.js.map