@samirify/messenger 0.1.5 → 0.1.6

package/dist/web/index.js

@@ -1,10 +1,10 @@
-import { useMessengerUi, useUnreadTotal } from '../chunk-OTJZXVON.js';
-export { MessengerUiProvider, useMessengerUi, useOptionalMessengerUi } from '../chunk-OTJZXVON.js';
+import { useMessengerUi, useUnreadTotal } from '../chunk-OUM2PDMW.js';
+export { MessengerUiProvider, useMessengerUi, useOptionalMessengerUi } from '../chunk-OUM2PDMW.js';
 import { useMessengerConfig, useThreads, useOpenThread, MessengerI18n, useThread, useSendMessage } from '../chunk-O5XNJHGZ.js';
 export { MessengerProvider, useMessengerConfig, useOptionalMessengerConfig } from '../chunk-O5XNJHGZ.js';
 import { AnimatePresence, motion } from 'framer-motion';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 function initials(name) {
   const parts = name.trim().split(/\s+/).filter(Boolean);
@@ -14,7 +14,8 @@ function initials(name) {
 }
 function ThreadRow({
   thread,
-  onSelect
+  onSelect,
+  active
 }) {
   const { user, t, isRtl, theme } = useMessengerConfig();
   const unread = Number(thread.unread_count ?? 0);
@@ -34,17 +35,19 @@ function ThreadRow({
         textAlign: isRtl ? "right" : "left",
         padding: "12px 14px",
         margin: "0 8px",
-        border: "none",
+        border: active ? `1px solid color-mix(in srgb, ${theme.accentColor} 28%, transparent)` : "1px solid transparent",
         borderRadius: 16,
-        background: unread > 0 ? `color-mix(in srgb, ${theme.accentColor} 8%, transparent)` : "transparent",
+        background: active ? `color-mix(in srgb, ${theme.accentColor} 14%, ${theme.colors.surface})` : unread > 0 ? `color-mix(in srgb, ${theme.accentColor} 8%, transparent)` : "transparent",
         cursor: "pointer",
         color: theme.colors.text,
-        transition: "background 160ms ease"
+        transition: "background 160ms ease, border-color 160ms ease"
       },
       onMouseEnter: (e) => {
+        if (active) return;
         e.currentTarget.style.background = `color-mix(in srgb, ${theme.accentColor} 12%, ${theme.colors.surfaceSecondary})`;
       },
       onMouseLeave: (e) => {
+        if (active) return;
         e.currentTarget.style.background = unread > 0 ? `color-mix(in srgb, ${theme.accentColor} 8%, transparent)` : "transparent";
       },
       children: [
@@ -147,7 +150,8 @@ function ThreadRow({
   );
 }
 function ThreadList({
-  onSelectThread
+  onSelectThread,
+  activeThreadId
 }) {
   const { user, t, theme } = useMessengerConfig();
   const threadsQuery = useThreads();
@@ -278,7 +282,15 @@ function ThreadList({
               gap: 2,
               paddingBottom: 8
             },
-            children: threads.map((th) => /* @__PURE__ */ jsx(ThreadRow, { thread: th, onSelect: onSelectThread }, th.id))
+            children: threads.map((th) => /* @__PURE__ */ jsx(
+              ThreadRow,
+              {
+                thread: th,
+                onSelect: onSelectThread,
+                active: activeThreadId === th.id
+              },
+              th.id
+            ))
           }
         )
       ]
@@ -756,6 +768,15 @@ function ChatPanel({
   variant = "dock"
 }) {
   const { enabled, t, isRtl, theme, onFeatureOff } = useMessengerConfig();
+  const [wide, setWide] = useState(false);
+  useEffect(() => {
+    if (variant !== "page" || typeof window === "undefined") return;
+    const mq = window.matchMedia("(min-width: 768px)");
+    const apply = () => setWide(mq.matches);
+    apply();
+    mq.addEventListener("change", apply);
+    return () => mq.removeEventListener("change", apply);
+  }, [variant]);
   if (!enabled) {
     if (onFeatureOff) return /* @__PURE__ */ jsx(Fragment, { children: onFeatureOff() });
     return /* @__PURE__ */ jsx(
@@ -771,14 +792,17 @@ function ChatPanel({
       }
     );
   }
+  const inThread = threadId != null;
+  const pageSplit = variant === "page" && wide;
   const shell = variant === "page" ? {
     display: "flex",
-    flexDirection: "column",
+    flexDirection: pageSplit ? isRtl ? "row-reverse" : "row" : "column",
     height: "100%",
     width: "100%",
     overflow: "hidden",
     background: theme.colors.surface,
-    borderTop: `1px solid color-mix(in srgb, ${theme.colors.border} 80%, transparent)`
+    border: `1px solid color-mix(in srgb, ${theme.colors.border} 85%, transparent)`,
+    borderRadius: 0
   } : {
     display: "flex",
     flexDirection: "column",
@@ -789,105 +813,184 @@ function ChatPanel({
             ${theme.colors.surface}
           `
   };
-  const inThread = threadId != null;
-  return /* @__PURE__ */ jsxs("div", { style: shell, children: [
-    !inThread ? /* @__PURE__ */ jsxs(
-      "header",
-      {
-        style: {
-          display: "flex",
-          flexDirection: isRtl ? "row-reverse" : "row",
-          alignItems: "center",
-          gap: 12,
-          padding: "16px 16px 14px",
-          borderBottom: `1px solid color-mix(in srgb, ${theme.colors.border} 80%, transparent)`,
-          background: `linear-gradient(180deg, color-mix(in srgb, ${theme.colors.surface} 92%, transparent), color-mix(in srgb, ${theme.colors.surface} 70%, transparent))`,
-          backdropFilter: "blur(12px)"
-        },
-        children: [
-          /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0, textAlign: isRtl ? "right" : "left" }, children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  fontFamily: theme.fonts.displayBold,
-                  fontWeight: 700,
-                  fontSize: 20,
-                  letterSpacing: "-0.02em",
-                  color: theme.colors.text,
-                  lineHeight: 1.15
-                },
-                children: t(MessengerI18n.messages.key, MessengerI18n.messages.fallback)
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  marginTop: 3,
-                  fontFamily: theme.fonts.body,
-                  fontSize: 12.5,
-                  color: theme.colors.textMuted
-                },
-                children: t(MessengerI18n.messagesHint.key, MessengerI18n.messagesHint.fallback)
-              }
-            )
-          ] }),
-          onClose ? /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: onClose,
-              "aria-label": "Close",
-              style: {
-                border: `1px solid color-mix(in srgb, ${theme.colors.border} 90%, transparent)`,
-                background: `color-mix(in srgb, ${theme.colors.surfaceSecondary} 80%, transparent)`,
-                color: theme.colors.textSecondary,
-                width: 36,
-                height: 36,
-                borderRadius: 12,
-                cursor: "pointer",
-                display: "grid",
-                placeItems: "center",
-                flexShrink: 0
-              },
-              children: /* @__PURE__ */ jsx(CloseIcon, { size: 16 })
-            }
-          ) : null
-        ]
-      }
-    ) : null,
-    /* @__PURE__ */ jsx("div", { style: { flex: 1, minHeight: 0, position: "relative" }, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: inThread ? /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        initial: { opacity: 0, x: isRtl ? -16 : 16 },
-        animate: { opacity: 1, x: 0 },
-        exit: { opacity: 0, x: isRtl ? 12 : -12 },
-        transition: { duration: 0.22, ease: [0.22, 1, 0.36, 1] },
-        style: { height: "100%" },
-        children: /* @__PURE__ */ jsx(
-          Conversation,
+  const listPane = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        width: pageSplit ? 320 : "100%",
+        flexShrink: 0,
+        borderInlineEnd: pageSplit ? `1px solid color-mix(in srgb, ${theme.colors.border} 80%, transparent)` : void 0,
+        background: pageSplit ? `linear-gradient(180deg, color-mix(in srgb, ${theme.colors.surfaceSecondary} 55%, ${theme.colors.surface}), ${theme.colors.surface})` : void 0
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "header",
+          {
+            style: {
+              display: "flex",
+              flexDirection: isRtl ? "row-reverse" : "row",
+              alignItems: "center",
+              gap: 12,
+              padding: "16px 16px 14px",
+              borderBottom: `1px solid color-mix(in srgb, ${theme.colors.border} 80%, transparent)`
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0, textAlign: isRtl ? "right" : "left" }, children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      fontFamily: theme.fonts.displayBold,
+                      fontWeight: 700,
+                      fontSize: pageSplit ? 18 : 20,
+                      letterSpacing: "-0.02em",
+                      color: theme.colors.text,
+                      lineHeight: 1.15
+                    },
+                    children: t(MessengerI18n.messages.key, MessengerI18n.messages.fallback)
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      marginTop: 3,
+                      fontFamily: theme.fonts.body,
+                      fontSize: 12.5,
+                      color: theme.colors.textMuted
+                    },
+                    children: t(MessengerI18n.messagesHint.key, MessengerI18n.messagesHint.fallback)
+                  }
+                )
+              ] }),
+              onClose && !pageSplit ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onClose,
+                  "aria-label": "Close",
+                  style: {
+                    border: `1px solid color-mix(in srgb, ${theme.colors.border} 90%, transparent)`,
+                    background: `color-mix(in srgb, ${theme.colors.surfaceSecondary} 80%, transparent)`,
+                    color: theme.colors.textSecondary,
+                    width: 36,
+                    height: 36,
+                    borderRadius: 12,
+                    cursor: "pointer",
+                    display: "grid",
+                    placeItems: "center",
+                    flexShrink: 0
+                  },
+                  children: /* @__PURE__ */ jsx(CloseIcon, { size: 16 })
+                }
+              ) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ jsx(
+          ThreadList,
           {
-            threadId,
-            onBack: onBackToList,
-            onClose
+            onSelectThread,
+            activeThreadId: threadId
           }
-        )
-      },
-      `thread-${threadId}`
-    ) : /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        initial: { opacity: 0, x: isRtl ? 16 : -16 },
-        animate: { opacity: 1, x: 0 },
-        exit: { opacity: 0, x: isRtl ? -12 : 12 },
-        transition: { duration: 0.22, ease: [0.22, 1, 0.36, 1] },
-        style: { height: "100%" },
-        children: /* @__PURE__ */ jsx(ThreadList, { onSelectThread })
+        ) })
+      ]
+    }
+  );
+  const emptyPane = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        flex: 1,
+        minWidth: 0,
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 10,
+        padding: 32,
+        background: `
+          radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, ${theme.accentColor} 10%, transparent), transparent 60%),
+          ${theme.colors.surface}
+        `
       },
-      "list"
-    ) }) })
-  ] });
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            style: {
+              width: 64,
+              height: 64,
+              borderRadius: 20,
+              display: "grid",
+              placeItems: "center",
+              background: `color-mix(in srgb, ${theme.accentColor} 12%, ${theme.colors.surfaceSecondary})`,
+              color: theme.accentColor,
+              fontSize: 26,
+              marginBottom: 4
+            },
+            children: "\u2726"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontFamily: theme.fonts.displaySemiBold,
+              fontWeight: 600,
+              fontSize: 16,
+              color: theme.colors.text
+            },
+            children: t(MessengerI18n.messages.key, MessengerI18n.messages.fallback)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontFamily: theme.fonts.body,
+              fontSize: 13.5,
+              color: theme.colors.textMuted,
+              maxWidth: 280,
+              textAlign: "center",
+              lineHeight: 1.45
+            },
+            children: t(MessengerI18n.messagesHint.key, MessengerI18n.messagesHint.fallback)
+          }
+        )
+      ]
+    }
+  );
+  if (variant === "page" && pageSplit) {
+    return /* @__PURE__ */ jsxs("div", { style: shell, children: [
+      listPane,
+      /* @__PURE__ */ jsx("div", { style: { flex: 1, minWidth: 0, minHeight: 0, height: "100%" }, children: inThread ? /* @__PURE__ */ jsx(Conversation, { threadId }) : emptyPane })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { style: shell, children: !inThread ? listPane : /* @__PURE__ */ jsx("div", { style: { flex: 1, minHeight: 0, position: "relative", height: "100%" }, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: { opacity: 0, x: isRtl ? -16 : 16 },
+      animate: { opacity: 1, x: 0 },
+      exit: { opacity: 0, x: isRtl ? 12 : -12 },
+      transition: { duration: 0.22, ease: [0.22, 1, 0.36, 1] },
+      style: { height: "100%" },
+      children: /* @__PURE__ */ jsx(
+        Conversation,
+        {
+          threadId,
+          onBack: onBackToList,
+          onClose
+        }
+      )
+    },
+    `thread-${threadId}`
+  ) }) }) });
 }
 function ChatDock() {
   const { enabled, isRtl, theme, t } = useMessengerConfig();