diff --git a/src/renderer/components/filters/AccountFilter.tsx b/src/renderer/components/filters/AccountFilter.tsx new file mode 100644 index 000000000..d36728c2c --- /dev/null +++ b/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 ( +
+ Filter notifications by account.</Text>} + > + Account + + + + {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 ( + updateFilter('accounts', uuid, !isChecked)} + /> + ); + })} + +
+ ); +}; diff --git a/src/renderer/routes/Filters.tsx b/src/renderer/routes/Filters.tsx index 97f5ebd1c..62cdea983 100644 --- a/src/renderer/routes/Filters.tsx +++ b/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 (
@@ -26,6 +31,7 @@ export const FiltersRoute: FC = () => { + {hasMultipleAccounts && } diff --git a/src/renderer/routes/Notifications.tsx b/src/renderer/routes/Notifications.tsx index ac78f2b27..619999b13 100644 --- a/src/renderer/routes/Notifications.tsx +++ b/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 ( - {displayState.notifications.map((accountNotification) => { + {visibleNotifications.map((accountNotification) => { return ( General > should render itself & its chil data-padding="none" data-wrap="nowrap" > +
+ +
+
+ +

+ Account +

+ +
+
+
+
+
+ + + + 0 + +
+
+ + + + 0 + +
+
+
General > should render itself & its chil data-wrap="nowrap" >