feat(filters): account filtering

src/renderer/components/filters/AccountFilter.tsx

@@ -0,0 +1,55 @@
+import type { FC } from 'react';
+
+import { PersonIcon } from '@primer/octicons-react';
+import { Stack, Text } from '@primer/react';
+
+import { useAppContext } from '../../hooks/useAppContext';
+import { useFiltersStore } from '../../stores';
+
+import { Checkbox } from '../fields/Checkbox';
+import { Title } from '../primitives/Title';
+
+import type { AccountUUID } from '../../types';
+
+import { getAccountUUID } from '../../utils/auth/utils';
+
+export const AccountFilter: FC = () => {
+  const { auth, notifications } = useAppContext();
+  const filteredAccounts = useFiltersStore((s) => s.accounts);
+  const updateFilter = useFiltersStore((s) => s.updateFilter);
+
+  const accounts = auth?.accounts ?? [];
+
+  return (
+    <fieldset id="filter-accounts">
+      <Title
+        icon={PersonIcon}
+        tooltip={<Text>Filter notifications by account.</Text>}
+      >
+        Account
+      </Title>
+
+      <Stack direction="vertical" gap="condensed">
+        {accounts.map((account) => {
+          const uuid = getAccountUUID(account);
+          const isChecked = filteredAccounts.includes(uuid);
+          const label = account.user?.login ?? account.hostname;
+          const accountNotificationCount =
+            notifications?.find((n) => getAccountUUID(n.account) === uuid)
+              ?.notifications.length ?? 0;
+
+          return (
+            <Checkbox
+              checked={isChecked}
+              counter={accountNotificationCount}
+              key={uuid}
+              label={label}
+              name={`account-${uuid}`}
+              onChange={() => updateFilter('accounts', uuid, !isChecked)}
+            />
+          );
+        })}
+      </Stack>
+    </fieldset>
+  );
+};

src/renderer/routes/Filters.tsx

@@ -3,8 +3,10 @@ import type { FC } from 'react';
 import { FilterIcon, FilterRemoveIcon } from '@primer/octicons-react';
 import { Button, Stack, Tooltip } from '@primer/react';
 
+import { useAppContext } from '../hooks/useAppContext';
 import { useFiltersStore } from '../stores';
 
+import { AccountFilter } from '../components/filters/AccountFilter';
 import { ReasonFilter } from '../components/filters/ReasonFilter';
 import { SearchFilter } from '../components/filters/SearchFilter';
 import { StateFilter } from '../components/filters/StateFilter';
@@ -16,8 +18,11 @@ import { Footer } from '../components/primitives/Footer';
 import { Header } from '../components/primitives/Header';
 
 export const FiltersRoute: FC = () => {
+  const { auth } = useAppContext();
   const clearFilters = useFiltersStore((s) => s.reset);
 
+  const hasMultipleAccounts = (auth?.accounts.length ?? 0) > 1;
+
   return (
     <Page testId="filters">
       <Header fetchOnBack icon={FilterIcon}>
@@ -26,6 +31,7 @@ export const FiltersRoute: FC = () => {
 
       <Contents paddingBottom>
         <Stack direction="vertical" gap="spacious">
+          {hasMultipleAccounts && <AccountFilter />}
           <SearchFilter />
           <UserTypeFilter />
           <SubjectTypeFilter />

src/renderer/routes/Notifications.tsx

@@ -1,6 +1,7 @@
 import { type FC, useMemo, useRef } from 'react';
 
 import { useAppContext } from '../hooks/useAppContext';
+import { useFiltersStore } from '../stores';
 
 import { AllRead } from '../components/AllRead';
 import { Contents } from '../components/layout/Contents';
@@ -13,6 +14,7 @@ import { getAccountUUID } from '../utils/auth/utils';
 export const NotificationsRoute: FC = () => {
   const { notifications, status, globalError, settings, hasNotifications } =
     useAppContext();
+  const filteredAccounts = useFiltersStore((s) => s.accounts);
 
   // Store previous successful state
   const prevStateRef = useRef({
@@ -48,9 +50,19 @@ export const NotificationsRoute: FC = () => {
     [displayState.notifications],
   );
 
+  const visibleNotifications = useMemo(
+    () =>
+      filteredAccounts.length === 0
+        ? displayState.notifications
+        : displayState.notifications.filter((n) =>
+            filteredAccounts.includes(getAccountUUID(n.account)),
+          ),
+    [displayState.notifications, filteredAccounts],
+  );
+
   const hasNoAccountErrors = useMemo(
-    () => displayState.notifications.every((account) => account.error === null),
-    [displayState.notifications],
+    () => visibleNotifications.every((account) => account.error === null),
+    [visibleNotifications],
   );
 
   if (displayState.status === 'error') {
@@ -64,7 +76,7 @@ export const NotificationsRoute: FC = () => {
   return (
     <Page testId="notifications">
       <Contents paddingHorizontal={false}>
-        {displayState.notifications.map((accountNotification) => {
+        {visibleNotifications.map((accountNotification) => {
           return (
             <AccountNotifications
               account={accountNotification.account}

src/renderer/stores/defaults.ts

@@ -6,6 +6,7 @@ import type { FiltersState } from './types';
 export const DEFAULT_FILTERS_STATE: FiltersState = {
   includeSearchTokens: [],
   excludeSearchTokens: [],
+  accounts: [],
   userTypes: [],
   subjectTypes: [],
   states: [],

src/renderer/stores/types.ts

@@ -1,4 +1,5 @@
 import type {
+  AccountUUID,
   FilterStateType,
   Reason,
   SearchToken,
@@ -24,6 +25,12 @@ export interface FiltersState {
    */
   excludeSearchTokens: SearchToken[];
 
+  /**
+   * The account UUIDs to filter notifications by.
+   * When empty, all accounts are shown.
+   */
+  accounts: AccountUUID[];
+
   /**
    * The user types to filter notifications by.
    */

src/renderer/stores/useFiltersStore.ts

@@ -23,6 +23,7 @@ const useFiltersStore = create<FiltersStore>()(
         return (
           state.includeSearchTokens.length > 0 ||
           state.excludeSearchTokens.length > 0 ||
+          state.accounts.length > 0 ||
           state.userTypes.length > 0 ||
           state.subjectTypes.length > 0 ||
           state.states.length > 0 ||