@linktr.ee/messaging-react 1.14.1 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.14.1",
+  "version": "1.15.0",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",

package/src/components/ChannelView.tsx

@@ -5,10 +5,11 @@ import {
   ProhibitInsetIcon,
   SignOutIcon,
   SpinnerGapIcon,
+  StarIcon,
 } from '@phosphor-icons/react'
 import classNames from 'classnames'
 import React, { useState, useCallback, useRef, useEffect } from 'react'
-import { Channel as ChannelType, ChannelMemberResponse } from 'stream-chat'
+import { Channel as ChannelType, ChannelMemberResponse, Event } from 'stream-chat'
 import {
   Channel,
   Window,
@@ -65,20 +66,49 @@ const CustomChannelHeader: React.FC<{
     participant?.user?.name || participant?.user?.id || 'Unknown member'
   const participantImage = participant?.user?.image
 
+  const [isStarred, setIsStarred] = useState(!!channel.state.membership?.pinned_at)
+
+  useEffect(() => {
+    const handleMemberUpdate = (event: Event) => {
+      setIsStarred(event?.member ? !!event.member.pinned_at : !!channel.state.membership?.pinned_at)
+    }
+
+    channel.on('member.updated', handleMemberUpdate)
+
+    return () => {
+      channel.off('member.updated', handleMemberUpdate)
+    }
+  }, [channel])
+
+  const handleStarClick = async () => {
+    try {
+      if (isStarred) {
+        await channel.unpin()
+      } else {
+        await channel.pin()
+      }
+    } catch (error) {
+      console.error('[CustomChannelHeader] Failed to update pinned status:', error)
+    }
+  }
+
   return (
     <div className="@container">
       <div className="flex justify-between items-center @lg:hidden">
-        <button
-          className={classNames(
-            'size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center',
-            !showBackButton && 'invisible'
-          )}
-          onClick={onBack || (() => {})}
-          type="button"
-          aria-label="Back to conversations"
-        >
-          <ArrowLeftIcon className="size-5 text-black/90" />
-        </button>
+        <div className="flex items-center gap-2">
+          <button
+            className={classNames(
+              'size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center',
+              !showBackButton && 'invisible'
+            )}
+            onClick={onBack || (() => {})}
+            type="button"
+            aria-label="Back to conversations"
+          >
+            <ArrowLeftIcon className="size-5 text-black/90" />
+          </button>
+          <div className="size-10" />
+        </div>
         <div className="flex flex-col gap-1 items-center">
           <Avatar
             id={participant?.user?.id || channel.id || 'unknown'}
@@ -90,16 +120,27 @@ const CustomChannelHeader: React.FC<{
             {participantName}
           </h1>
         </div>
-        <button
-          className={classNames(
-            'size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center'
-          )}
-          onClick={onShowInfo}
-          type="button"
-          aria-label="Show info"
-        >
-          <DotsThreeIcon className="size-5 text-black/90" />
-        </button>
+        <div className="flex items-center gap-2">
+          <button
+            className="size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center"
+            onClick={handleStarClick}
+            type="button"
+            aria-label={isStarred ? 'Unstar conversation' : 'Star conversation'}
+          >
+            <StarIcon
+              className="size-5 text-black/90"
+              weight={isStarred ? 'fill' : 'regular'}
+            />
+          </button>
+          <button
+            className="size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center"
+            onClick={onShowInfo}
+            type="button"
+            aria-label="Show info"
+          >
+            <DotsThreeIcon className="size-5 text-black/90" />
+          </button>
+        </div>
       </div>
       <div className="hidden @lg:flex items-center justify-between gap-3 min-h-12">
         <div className="flex items-center gap-4 min-w-0">
@@ -126,16 +167,29 @@ const CustomChannelHeader: React.FC<{
             </h1>
           </div>
         </div>
-        {canShowInfo && onShowInfo && (
+        <div className="flex items-center gap-2">
           <button
-            className={classNames(
-              'size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center'
-            )}
-            onClick={onShowInfo}
+            className="size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center"
+            onClick={handleStarClick}
+            type="button"
+            aria-label={isStarred ? 'Unstar conversation' : 'Star conversation'}
           >
-            <DotsThreeIcon className="size-5 text-black/90" />
+            <StarIcon
+              className="size-5 text-black/90"
+              weight={isStarred ? 'fill' : 'regular'}
+            />
           </button>
-        )}
+          {canShowInfo && onShowInfo && (
+            <button
+              className="size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center"
+              onClick={onShowInfo}
+              type="button"
+              aria-label="Show info"
+            >
+              <DotsThreeIcon className="size-5 text-black/90" />
+            </button>
+          )}
+        </div>
       </div>
     </div>
   )