feat(watchlist): add source filter chips to Issues tab

src/pages/WatchlistPage.tsx

@@ -4213,6 +4213,12 @@ const IssuesList: React.FC<{ minerIds: string[] }> = ({ minerIds }) => {
 
   const isLoading = issueQueries.some((q) => q.isLoading);
 
+  const {
+    active: issueActiveSources,
+    toggle: toggleIssueSource,
+    isAllOn: issueSourcesAllOn,
+  } = usePrSourceFilter();
+
   const [searchQuery, setSearchQuery] = useState('');
   const [statusFilter, setStatusFilter] = useState<IssueStatusFilter>('all');
   const [viewMode, setViewMode] = useWatchlistViewMode();
@@ -4229,7 +4235,14 @@ const IssuesList: React.FC<{ minerIds: string[] }> = ({ minerIds }) => {
 
   useEffect(() => {
     setPage(0);
-  }, [statusFilter, searchQuery, sortField, sortOrder, viewMode]);
+  }, [
+    statusFilter,
+    searchQuery,
+    sortField,
+    sortOrder,
+    viewMode,
+    issueActiveSources,
+  ]);
 
   const handleSort = (field: IssueSortKey) => {
     if (sortField === field) {
@@ -4241,11 +4254,28 @@ const IssuesList: React.FC<{ minerIds: string[] }> = ({ minerIds }) => {
     setPage(0);
   };
 
-  const counts = useMemo(() => getIssueCounts(items), [items]);
+  const issueSourceCounts = useMemo(() => {
+    const tally = { starred: 0, miner: 0, repo: 0 };
+    for (const issue of items) {
+      const sources = sourcesByKey.get(issueKey(issue));
+      if (!sources) continue;
+      for (const s of sources) tally[s] += 1;
+    }
+    return tally;
+  }, [items, sourcesByKey]);
+
+  const scopedItems = useMemo(() => {
+    if (issueSourcesAllOn) return items;
+    return items.filter((issue) =>
+      sourcesByKey.get(issueKey(issue))?.some((s) => issueActiveSources.has(s)),
+    );
+  }, [items, sourcesByKey, issueActiveSources, issueSourcesAllOn]);
+
+  const counts = useMemo(() => getIssueCounts(scopedItems), [scopedItems]);
 
   const filtered = useMemo(
-    () => filterIssues(items, { statusFilter, searchQuery }),
-    [items, statusFilter, searchQuery],
+    () => filterIssues(scopedItems, { statusFilter, searchQuery }),
+    [scopedItems, statusFilter, searchQuery],
   );
 
   const sorted = useMemo(() => {
@@ -4332,6 +4362,35 @@ const IssuesList: React.FC<{ minerIds: string[] }> = ({ minerIds }) => {
                     onClick={() => setStatusFilter(s)}
                   />
                 ))}
+                <Box
+                  sx={{
+                    width: '1px',
+                    height: 20,
+                    backgroundColor: 'border.light',
+                    mx: 0.5,
+                  }}
+                />
+                <FilterButton
+                  label="Starred"
+                  count={issueSourceCounts.starred}
+                  color={SOURCE_META.starred.color}
+                  isActive={issueActiveSources.has('starred')}
+                  onClick={() => toggleIssueSource('starred')}
+                />
+                <FilterButton
+                  label="Miner"
+                  count={issueSourceCounts.miner}
+                  color={SOURCE_META.miner.color}
+                  isActive={issueActiveSources.has('miner')}
+                  onClick={() => toggleIssueSource('miner')}
+                />
+                <FilterButton
+                  label="Repo"
+                  count={issueSourceCounts.repo}
+                  color={SOURCE_META.repo.color}
+                  isActive={issueActiveSources.has('repo')}
+                  onClick={() => toggleIssueSource('repo')}
+                />
               </Box>
             }
             searchValue={draftValue}
@@ -4351,7 +4410,7 @@ const IssuesList: React.FC<{ minerIds: string[] }> = ({ minerIds }) => {
                 }}
               />
             }
-            hasActiveFilter={statusFilter !== 'all'}
+            hasActiveFilter={statusFilter !== 'all' || !issueSourcesAllOn}
           />
         )}
       </DebouncedSearchInput>