diff --git a/webapp/channels/src/components/threading/global_threads/thread_item/__snapshots__/thread_item.test.tsx.snap b/webapp/channels/src/components/threading/global_threads/thread_item/__snapshots__/thread_item.test.tsx.snap index 9bae8b5b14..4ab9139b24 100644 --- a/webapp/channels/src/components/threading/global_threads/thread_item/__snapshots__/thread_item.test.tsx.snap +++ b/webapp/channels/src/components/threading/global_threads/thread_item/__snapshots__/thread_item.test.tsx.snap @@ -57,6 +57,7 @@ exports[`components/threading/global_threads/thread_item should report total num } > @@ -183,6 +184,7 @@ exports[`components/threading/global_threads/thread_item should report unread me } > @@ -307,6 +309,7 @@ exports[`components/threading/global_threads/thread_item should report unread me } > diff --git a/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.tsx b/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.tsx index 60e4983b40..74b33ab961 100644 --- a/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.tsx +++ b/webapp/channels/src/components/threading/global_threads/thread_item/thread_item.tsx @@ -258,6 +258,10 @@ function ThreadItem({ diff --git a/webapp/channels/src/components/threading/global_threads/thread_list/__snapshots__/thread_list.test.tsx.snap b/webapp/channels/src/components/threading/global_threads/thread_list/__snapshots__/thread_list.test.tsx.snap index aa8bb93fbd..65bc38fbe0 100644 --- a/webapp/channels/src/components/threading/global_threads/thread_list/__snapshots__/thread_list.test.tsx.snap +++ b/webapp/channels/src/components/threading/global_threads/thread_list/__snapshots__/thread_list.test.tsx.snap @@ -8,14 +8,25 @@ exports[`components/threading/global_threads/thread_list should match snapshot 1 >
+
- +
} id="tutorial-threads-mobile-header" right={ @@ -47,9 +64,10 @@ exports[`components/threading/global_threads/thread_list should match snapshot 1 className="right-anchor" > { - setFilter(ThreadFilter.none); - }, [setFilter]); + const handleSetFilter = useCallback((filter: ThreadFilter) => { + if (filter === ThreadFilter.unread) { + trackEvent('crt', 'filter_threads_by_unread'); + } - const handleUnread = useCallback(() => { - trackEvent('crt', 'filter_threads_by_unread'); - setFilter(ThreadFilter.unread); + setFilter(filter); }, [setFilter]); const handleLoadMoreItems = useCallback(async (startIndex) => { @@ -186,6 +186,23 @@ const ThreadList = ({ })); }, [handleAllMarkedRead]); + const {tabListProps, tabProps} = useTabs({ + activeTab: currentFilter, + setActiveTab: handleSetFilter, + tabs: [ + { + id: 'threads-list-filter-none', + name: ThreadFilter.none, + panelId: 'threads-list', + }, + { + id: 'threads-list-filter-unread', + name: ThreadFilter.unread, + panelId: 'threads-list', + }, + ], + }); + return (
+
- +
)} right={(
{children}