@linktr.ee/messaging-react 1.6.6 → 1.7.0

package/package.json

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

package/src/components/ChannelList/index.tsx

@@ -1,6 +1,8 @@
+import SelectPill from '@linktr.ee/component-library/InputSelectPill'
+import SelectPillGroup from '@linktr.ee/component-library/InputSelectPillGroup'
 import { NotePencilIcon } from '@phosphor-icons/react'
 import classNames from 'classnames'
-import React from 'react'
+import React, { useState } from 'react'
 import {
   ChannelList as StreamChannelList,
   useChatContext,
@@ -12,6 +14,11 @@ import { IconButton } from '../IconButton'
 
 import CustomChannelPreview from './CustomChannelPreview'
 
+enum ChannelFilter {
+  All,
+  Unread,
+}
+
 /**
  * Channel list component with customizable header and actions
  */
@@ -50,17 +57,27 @@ export const ChannelList: React.FC<ChannelListProps> = ({
     })
   }
 
+  const [staticFilters, setStaticFilters] = useState<{
+    type: string
+    last_message_at: { $exists: boolean }
+    has_unread: boolean | undefined
+  }>({
+    type: 'messaging',
+    last_message_at: { $exists: true },
+    has_unread: undefined,
+  })
+
   // Filter for messaging channels
   const filters = React.useMemo(() => {
     const userId = client.userID
-    const newFilters = userId
-      ? { 
-          type: 'messaging', 
-          members: { $in: [userId] }, 
-          hidden: false,
-          last_message_at: { $exists: true }
-        }
-      : { type: 'messaging', last_message_at: { $exists: true } }
+
+    const newFilters = {
+      ...staticFilters,
+      ...(userId && {
+        members: { $in: [userId] },
+        hidden: false,
+      }),
+    }
 
     if (debug) {
       console.log('📺 [ChannelList] 🔍 FILTERS MEMOIZED', {
@@ -71,7 +88,7 @@ export const ChannelList: React.FC<ChannelListProps> = ({
     }
 
     return newFilters
-  }, [client.userID, debug])
+  }, [client.userID, debug, staticFilters])
 
   return (
     <div
@@ -83,7 +100,32 @@ export const ChannelList: React.FC<ChannelListProps> = ({
       {/* Header */}
       <div className="px-4 py-4 border-b border-sand bg-chalk">
         <div className="flex items-center justify-between gap-3 min-h-10 min-w-0">
-          <h2 className="text-lg font-semibold text-charcoal">Conversations</h2>
+          <div>
+            <h2 className="text-lg font-semibold text-charcoal">
+              Conversations
+            </h2>
+            <SelectPillGroup>
+              <SelectPill
+                checked={!filters.has_unread}
+                name="All"
+                onChange={() =>
+                  setStaticFilters((state) => ({
+                    ...state,
+                    has_unread: undefined,
+                  }))
+                }
+                value={ChannelFilter.All}
+              />
+              <SelectPill
+                checked={filters.has_unread}
+                name="Unread"
+                onChange={() =>
+                  setStaticFilters((state) => ({ ...state, has_unread: true }))
+                }
+                value={ChannelFilter.Unread}
+              />
+            </SelectPillGroup>
+          </div>
           <div className="flex items-center gap-2">
             {showStartConversation && onStartConversation && (
               <IconButton