From e1db21fc28763186e7f4d72fbe5e5f11f71ffd47 Mon Sep 17 00:00:00 2001 From: thoreyjona Date: Fri, 31 May 2024 13:44:49 +0000 Subject: [PATCH 1/8] feat: update UI for inbox --- apps/native/app/src/screens/inbox/inbox.tsx | 8 +- apps/native/app/src/ui/lib/list/list-item.tsx | 187 ++++++------------ .../ui/lib/skeleton/list-item-skeleton.tsx | 34 ++-- 3 files changed, 76 insertions(+), 153 deletions(-) diff --git a/apps/native/app/src/screens/inbox/inbox.tsx b/apps/native/app/src/screens/inbox/inbox.tsx index e558dd70f602..11d99d1b1863 100644 --- a/apps/native/app/src/screens/inbox/inbox.tsx +++ b/apps/native/app/src/screens/inbox/inbox.tsx @@ -113,13 +113,7 @@ const PressableListItem = React.memo( toggleAction(!item.bookmarked ? 'bookmark' : 'unbookmark', item.id) setStarred(!item.bookmarked) }} - icon={ - - } + icon={getOrganizationLogoUrl(item.senderName, 75)} /> ) diff --git a/apps/native/app/src/ui/lib/list/list-item.tsx b/apps/native/app/src/ui/lib/list/list-item.tsx index 63bf95a213a0..d23adca0ae0a 100644 --- a/apps/native/app/src/ui/lib/list/list-item.tsx +++ b/apps/native/app/src/ui/lib/list/list-item.tsx @@ -1,135 +1,66 @@ -import React from 'react' +import { Typography } from '@ui' +import React, { isValidElement } from 'react' import { FormattedDate } from 'react-intl' -import { Pressable, StyleSheet } from 'react-native' +import { Image, ImageSourcePropType, Pressable } from 'react-native' import styled from 'styled-components/native' + import StarFilled from '../../../assets/icons/star-filled.png' import Star from '../../../assets/icons/star.png' import { dynamicColor } from '../../utils' -import { font } from '../../utils/font' -import { theme } from '../../utils/theme' -const Host = styled.SafeAreaView<{ background?: boolean }>` - margin-right: 16px; +const Host = styled.SafeAreaView<{ unread?: boolean }>` flex-direction: row; - background-color: ${dynamicColor((props) => - props.background ? 'background' : 'transparent', + background-color: ${dynamicColor((props) => ({ + dark: props.unread ? props.theme.shades.dark.shade300 : 'transparent', + light: props.unread ? props.theme.color.blue100 : 'transparent', + }))}; + border-bottom-width: ${({ theme }) => theme.border.width.standard}px; + border-bottom-color: ${dynamicColor( + ({ theme }) => ({ + light: theme.color.blue200, + dark: theme.shades.dark.shade400, + }), + true, )}; ` - -const Icon = styled.View` - padding: 22px; +const Icon = styled.View<{ unread?: boolean }>` + margin-vertical: ${({ theme }) => theme.spacing[3]}px; + margin-horizontal: ${({ theme }) => theme.spacing[2]}px; + background-color: ${({ theme, unread }) => + unread ? theme.color.white : theme.color.blue100}; + height: 42px; + width: 42px; align-items: center; justify-content: center; + border-radius: ${({ theme }) => theme.border.radius.circle}; + flex-direction: column; ` const Content = styled.View` flex: 1; flex-direction: column; align-items: flex-start; - padding-bottom: ${({ theme }) => theme.spacing[1]}px; - padding-top: ${({ theme }) => theme.spacing[2]}px; + margin-bottom: ${({ theme }) => theme.spacing[3]}px; + margin-top: ${({ theme }) => theme.spacing[3]}px; + margin-right: ${({ theme }) => theme.spacing[2]}px; ` const Row = styled.View` flex-direction: row; justify-content: space-between; - padding-bottom: ${({ theme }) => theme.spacing[1]}px; - gap: 4px; + padding-bottom: ${({ theme }) => theme.spacing.smallGutter}px; + gap: ${({ theme }) => theme.spacing.smallGutter}px; ` const Title = styled.View` flex-direction: row; align-items: center; flex: 1; - padding-right: ${({ theme }) => theme.spacing[1]}px; -` - -const TitleText = styled.Text` - flex: 1; - ${font({ - fontWeight: '600', - fontSize: 13, - lineHeight: 17, - color: ({ theme }) => ({ - light: theme.color.dark400, - dark: theme.shades.dark.foreground, - }), - })} -` - -const Date = styled.View` - flex-direction: row; - align-items: center; -` - -const DateText = styled.Text<{ unread?: boolean }>` - ${font({ - fontWeight: (props) => (props.unread ? '600' : '300'), - fontSize: 13, - lineHeight: 17, - color: ({ theme }) => ({ - light: theme.color.dark400, - dark: theme.shades.dark.foreground, - }), - })} -` - -const Dot = styled.View` - width: ${({ theme }) => theme.spacing[1]}px; - height: ${({ theme }) => theme.spacing[1]}px; - border-radius: ${({ theme }) => theme.spacing[1]}px; - background-color: ${dynamicColor(({ theme }) => theme.color.blueberry400)}; - margin-left: ${({ theme }) => theme.spacing[1]}px; -` - -const Message = styled.Text` - padding-bottom: ${({ theme }) => theme.spacing[1]}px; - flex: 1; - - ${font({ - fontWeight: '300', - lineHeight: 24, - color: ({ theme }) => ({ - light: theme.color.dark400, - dark: theme.shades.dark.foreground, - }), - })} -` - -const Actions = styled.View` - flex-direction: row; - padding-bottom: ${({ theme }) => theme.spacing[1]}px; -` - -const Button = styled.TouchableHighlight` - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: 10px 16px; - background-color: ${dynamicColor(({ theme }) => theme.color.blue400)}; - border-radius: ${({ theme }) => theme.spacing[1]}px; - margin-right: ${({ theme }) => theme.spacing[2]}px; -` - -const ButtonText = styled.Text` - ${font({ - fontWeight: '600', - fontSize: 12, - lineHeight: 16, - color: ({ theme }) => theme.color.white, - })} + margin-bottom: ${({ theme }) => theme.spacing.smallGutter}px; ` const Cell = styled.View`` -const Divider = styled.View` - background-color: ${dynamicColor(({ theme }) => ({ - dark: theme.shades.dark.shade100, - light: theme.color.blue200, - }))}; -` - const StarImage = styled.Image<{ active?: boolean }>` tint-color: ${dynamicColor(({ active, theme }) => ({ dark: active ? theme.color.blue400 : theme.color.dark300, @@ -152,7 +83,7 @@ interface ListItemProps { subtitle: string unread?: boolean actions?: ListItemAction[] - icon?: React.ReactNode + icon?: ImageSourcePropType | React.ReactNode onStarPress?(): void starred?: boolean } @@ -162,31 +93,47 @@ export function ListItem({ subtitle, date, icon, - actions, onStarPress, starred = false, unread = false, }: ListItemProps) { return ( - - {icon ? {icon} : null} + + {icon && isValidElement(icon) ? ( + icon + ) : icon ? ( + + + + ) : null} - <TitleText numberOfLines={1} ellipsizeMode="tail"> + <Typography + variant="body3" + numberOfLines={1} + ellipsizeMode="tail" + style={{ fontWeight: '300' }} + > {title} - </TitleText> + </Typography> - - - - - {unread && } - + + + - {subtitle} + + {subtitle} + - {actions?.length ? ( - - {actions.map((action) => ( - - ))} - - ) : null} - ) } diff --git a/apps/native/app/src/ui/lib/skeleton/list-item-skeleton.tsx b/apps/native/app/src/ui/lib/skeleton/list-item-skeleton.tsx index 800ac82febd7..8d522f6dbfbf 100644 --- a/apps/native/app/src/ui/lib/skeleton/list-item-skeleton.tsx +++ b/apps/native/app/src/ui/lib/skeleton/list-item-skeleton.tsx @@ -1,24 +1,31 @@ import React from 'react' -import { StyleSheet } from 'react-native' import styled from 'styled-components/native' import { dynamicColor } from '../../utils' import { Skeleton } from './skeleton' const Host = styled.SafeAreaView` position: relative; - margin-right: 16px; flex-direction: row; + border-bottom-width: ${({ theme }) => theme.border.width.standard}px; + border-bottom-color: ${dynamicColor( + ({ theme }) => ({ + light: theme.color.blue200, + dark: theme.shades.dark.shade400, + }), + true, + )}; ` const Icon = styled.View` - padding: 22px; align-items: center; justify-content: center; ` const Circle = styled.View` - height: 25px; - width: 25px; + margin-vertical: ${({ theme }) => theme.spacing[3]}px; + margin-horizontal: ${({ theme }) => theme.spacing[2]}px; + height: 42px; + width: 42px; border-radius: 50px; background-color: ${dynamicColor(({ theme }) => ({ dark: theme.shades.dark.shade100, @@ -30,8 +37,9 @@ const Content = styled.View` flex: 1; flex-direction: column; align-items: flex-start; - padding-bottom: ${({ theme }) => theme.spacing[1]}px; - padding-top: ${({ theme }) => theme.spacing[2]}px; + padding-bottom: ${({ theme }) => theme.spacing[3]}px; + padding-top: ${({ theme }) => theme.spacing[3]}px; + margin-right: ${({ theme }) => theme.spacing[2]}px; ` const Row = styled.View` @@ -54,17 +62,6 @@ const Message = styled.View` padding-bottom: ${({ theme }) => theme.spacing[1]}px; ` -const Divider = styled.View` - position: absolute; - left: 0px; - right: -16px; - bottom: 0px; - background-color: ${dynamicColor(({ theme }) => ({ - dark: theme.shades.dark.shade100, - light: theme.color.blue200, - }))}; -` - export function ListItemSkeleton() { return ( @@ -84,7 +81,6 @@ export function ListItemSkeleton() { - ) } From d32d3e1ccdb71f0047a5b1a9e87a4b717cc6e8be Mon Sep 17 00:00:00 2001 From: thoreyjona Date: Fri, 31 May 2024 14:21:23 +0000 Subject: [PATCH 2/8] feat: update header in document-detail --- apps/native/app/src/ui/lib/detail/header.tsx | 73 ++++++++++---------- 1 file changed, 36 insertions(+), 37 deletions(-) diff --git a/apps/native/app/src/ui/lib/detail/header.tsx b/apps/native/app/src/ui/lib/detail/header.tsx index 90907f3e9320..c2062d815e90 100644 --- a/apps/native/app/src/ui/lib/detail/header.tsx +++ b/apps/native/app/src/ui/lib/detail/header.tsx @@ -2,11 +2,11 @@ import React from 'react' import { ImageSourcePropType } from 'react-native' import styled from 'styled-components/native' import { dynamicColor } from '../../utils/dynamic-color' -import { font } from '../../utils/font' import { Skeleton } from '../skeleton/skeleton' +import { Typography } from '../typography/typography' const Host = styled.View<{ hasBorder?: boolean }>` - padding-bottom: 16px; + padding-bottom: ${({ theme }) => theme.spacing[2]}px; border-bottom-width: ${({ hasBorder }) => (hasBorder ? '1px' : 0)}; border-bottom-color: ${dynamicColor( (props) => ({ @@ -16,52 +16,41 @@ const Host = styled.View<{ hasBorder?: boolean }>` true, )}; margin-bottom: ${({ hasBorder }) => (hasBorder ? '16px' : 0)}; - margin-top: 16px; + margin-top: ${({ theme }) => theme.spacing[2]}px; ` const Logo = styled.Image` width: 16px; height: 16px; - margin-right: 8px; +` + +const LogoBackground = styled.View` + background-color: ${dynamicColor( + (props) => ({ + dark: props.theme.color.white, + light: props.theme.color.blue100, + }), + true, + )}; + height: 24px; + width: 24px; + justify-content: center; + align-items: center; + border-radius: ${({ theme }) => theme.border.radius.circle}; + margin-right: ${({ theme }) => theme.spacing[1]}px; ` const Row = styled.View` flex-direction: row; justify-content: space-between; - padding-bottom: 8px; + padding-bottom: ${({ theme }) => theme.spacing[1]}px; ` const Wrapper = styled.View` flex-direction: row; align-items: center; flex: 1; - padding-right: 8px; -` - -const Title = styled.Text` - flex: 1; - ${font({ - fontWeight: '600', - fontSize: 13, - lineHeight: 17, - })} -` - -const Date = styled.Text<{ unread?: boolean }>` - ${font({ - fontWeight: (props) => (props.unread ? '600' : '300'), - fontSize: 13, - lineHeight: 17, - })} -` - -const Message = styled.Text` - padding-bottom: 8px; - ${font({ - fontWeight: '300', - fontSize: 16, - lineHeight: 24, - })} + padding-right: ${({ theme }) => theme.spacing[1]}px; ` interface HeaderProps { @@ -89,21 +78,31 @@ export function Header({ ) : ( <> - {logo && } + {logo && ( + + + + )} {title && ( - + <Typography + variant="body3" + numberOfLines={1} + ellipsizeMode="tail" + > {title} - + )} - {date} + {date} )} {message && isLoading ? ( ) : message && !isLoading ? ( - {message} + + {message} + ) : null} ) From 85e44317cd9841020505146f03a14a0a7704a841 Mon Sep 17 00:00:00 2001 From: thoreyjona Date: Fri, 31 May 2024 15:54:33 +0000 Subject: [PATCH 3/8] feat: set same underlay color for both notifications and inbox for both light and dark mode --- apps/native/app/src/screens/inbox/inbox.tsx | 2 ++ apps/native/app/src/screens/notifications/notifications.tsx | 3 --- apps/native/app/src/stores/organizations-store.ts | 2 +- apps/native/app/src/ui/lib/card/notification-card.tsx | 5 +---- 4 files changed, 4 insertions(+), 8 deletions(-) diff --git a/apps/native/app/src/screens/inbox/inbox.tsx b/apps/native/app/src/screens/inbox/inbox.tsx index 11d99d1b1863..c1792e572c71 100644 --- a/apps/native/app/src/screens/inbox/inbox.tsx +++ b/apps/native/app/src/screens/inbox/inbox.tsx @@ -94,8 +94,10 @@ const PressableListItem = React.memo( const { getOrganizationLogoUrl } = useOrganizationsStore() const [starred, setStarred] = useState(!!item.bookmarked) useEffect(() => setStarred(!!item.bookmarked), [item.bookmarked]) + const theme = useTheme() return ( navigateTo(`/inbox/${item.id}`, { title: item.senderName, diff --git a/apps/native/app/src/screens/notifications/notifications.tsx b/apps/native/app/src/screens/notifications/notifications.tsx index 208655e1a3cf..6a021800c188 100644 --- a/apps/native/app/src/screens/notifications/notifications.tsx +++ b/apps/native/app/src/screens/notifications/notifications.tsx @@ -229,9 +229,6 @@ export const NotificationsScreen: NavigationFunctionComponent = ({ uri: `${item.sender.logoUrl}?w=64&h=64&fit=pad&fm=png`, } } - underlayColor={ - theme.isDark ? theme.shade.shade400 : theme.color.blue100 - } unread={!item.metadata.read} onPress={() => onNotificationPress(item)} testID={testIDs.NOTIFICATION_CARD_BUTTON} diff --git a/apps/native/app/src/stores/organizations-store.ts b/apps/native/app/src/stores/organizations-store.ts index f3d2c82bf941..b14695c860c3 100644 --- a/apps/native/app/src/stores/organizations-store.ts +++ b/apps/native/app/src/stores/organizations-store.ts @@ -65,7 +65,7 @@ export const organizationsStore = create( const url = c ?? 'https://images.ctfassets.net/8k0h54kbe6bj/6XhCz5Ss17OVLxpXNVDxAO/d3d6716bdb9ecdc5041e6baf68b92ba6/coat_of_arms.svg' - const uri = `${url}?w=${size}&h=${size}&fit=pad&bg=white&fm=png` + const uri = `${url}?w=${size}&h=${size}&fit=pad&fm=png` return { uri } }, actions: { diff --git a/apps/native/app/src/ui/lib/card/notification-card.tsx b/apps/native/app/src/ui/lib/card/notification-card.tsx index a5cce740ed4a..fe203d2dbf20 100644 --- a/apps/native/app/src/ui/lib/card/notification-card.tsx +++ b/apps/native/app/src/ui/lib/card/notification-card.tsx @@ -80,13 +80,10 @@ export function NotificationCard({ testID, }: CardProps) { const theme = useTheme() - return ( onPress(id)} - underlayColor={ - underlayColor ?? theme.isDark ? theme.shade.shade400 : '#EBEBFA' - } + underlayColor={underlayColor ?? theme.shade.shade400} unread={unread} testID={testID} > From 00dbc5b2eacb2d36313bebcadb44635e16dc2c45 Mon Sep 17 00:00:00 2001 From: thoreyjona Date: Fri, 31 May 2024 16:33:33 +0000 Subject: [PATCH 4/8] feat: add const for default page size for inbox --- apps/native/app/src/screens/inbox/inbox.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/native/app/src/screens/inbox/inbox.tsx b/apps/native/app/src/screens/inbox/inbox.tsx index c1792e572c71..121b8d7abb92 100644 --- a/apps/native/app/src/screens/inbox/inbox.tsx +++ b/apps/native/app/src/screens/inbox/inbox.tsx @@ -51,6 +51,8 @@ type ListItem = | { id: string; type: 'skeleton' | 'empty' } | (Document & { type: undefined }) +const DEFAULT_PAGE_SIZE = 50 + const { useNavigationOptions, getNavigationOptions } = createNavigationOptionHooks( (theme, intl, initialized) => ({ @@ -140,7 +142,7 @@ const useUnreadCount = () => { variables: { input: { page: 1, - pageSize: 50, + pageSize: DEFAULT_PAGE_SIZE, opened: false, }, }, @@ -174,7 +176,7 @@ function useInboxQuery(incomingFilters?: Filters) { const [refetching, setRefetching] = useState(true) const [loading, setLoading] = useState(false) const [refetcher, setRefetcher] = useState(0) - const pageSize = 50 + const pageSize = DEFAULT_PAGE_SIZE const [getListDocument] = useListDocumentsLazyQuery({ query: ListDocumentsDocument, @@ -281,14 +283,12 @@ export const InboxScreen: NavigationFunctionComponent<{ const intl = useIntl() const scrollY = useRef(new Animated.Value(0)).current const flatListRef = useRef(null) - const keyboardRef = useRef(false) const [query, setQuery] = useState('') const queryString = useThrottleState(query) const theme = useTheme() const unreadCount = useUnreadCount() const [visible, setVisible] = useState(false) const [refetching, setRefetching] = useState(false) - const dynamicColor = useDynamicColor() const res = useInboxQuery({ opened, From 4556f5f24aa6404631a6131bf6f2e0709b4122ae Mon Sep 17 00:00:00 2001 From: thoreyjona Date: Fri, 31 May 2024 16:46:16 +0000 Subject: [PATCH 5/8] fix: icon for orgs in inbox on dev --- apps/native/app/src/stores/organizations-store.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/apps/native/app/src/stores/organizations-store.ts b/apps/native/app/src/stores/organizations-store.ts index b14695c860c3..2d3580092443 100644 --- a/apps/native/app/src/stores/organizations-store.ts +++ b/apps/native/app/src/stores/organizations-store.ts @@ -59,7 +59,11 @@ export const organizationsStore = create( orgs.find((o) => o.logo?.title === 'Skjaldarmerki') c = match?.logo?.url if (c) { - logoCache.set(forName, c) + if (!c.startsWith('https://')) { + logoCache.set(forName, `https:${c}`) + } else { + logoCache.set(forName, c) + } } } const url = From ec427660bb31c252298dc3077f9fba946fe6761b Mon Sep 17 00:00:00 2001 From: thoreyjona Date: Tue, 4 Jun 2024 09:20:38 +0000 Subject: [PATCH 6/8] feat: make icon bigger --- apps/native/app/src/ui/lib/list/list-item.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/native/app/src/ui/lib/list/list-item.tsx b/apps/native/app/src/ui/lib/list/list-item.tsx index d23adca0ae0a..9efc8168365b 100644 --- a/apps/native/app/src/ui/lib/list/list-item.tsx +++ b/apps/native/app/src/ui/lib/list/list-item.tsx @@ -106,7 +106,7 @@ export function ListItem({ ) : null} From b333fc772ed4279018eea4b0b6fe4ed7758ed646 Mon Sep 17 00:00:00 2001 From: thoreyjona Date: Tue, 4 Jun 2024 09:23:18 +0000 Subject: [PATCH 7/8] feat: use unreadCount from server --- .../app/src/graphql/queries/inbox.graphql | 1 + apps/native/app/src/screens/inbox/inbox.tsx | 19 +------------------ 2 files changed, 2 insertions(+), 18 deletions(-) diff --git a/apps/native/app/src/graphql/queries/inbox.graphql b/apps/native/app/src/graphql/queries/inbox.graphql index f6ff407ded03..716248a9a003 100644 --- a/apps/native/app/src/graphql/queries/inbox.graphql +++ b/apps/native/app/src/graphql/queries/inbox.graphql @@ -12,6 +12,7 @@ query ListDocuments($input: GetDocumentListInput!) { ...ListDocument } totalCount + unreadCount } } diff --git a/apps/native/app/src/screens/inbox/inbox.tsx b/apps/native/app/src/screens/inbox/inbox.tsx index 121b8d7abb92..ae6ed6203ee9 100644 --- a/apps/native/app/src/screens/inbox/inbox.tsx +++ b/apps/native/app/src/screens/inbox/inbox.tsx @@ -136,23 +136,6 @@ function useThrottleState(state: string, delay = 500) { return throttledState } -const useUnreadCount = () => { - const res = useListDocumentsQuery({ - fetchPolicy: 'cache-first', - variables: { - input: { - page: 1, - pageSize: DEFAULT_PAGE_SIZE, - opened: false, - }, - }, - }) - const unopened = res?.data?.listDocumentsV2?.data?.filter( - (item) => item.opened === false, - ) - return unopened?.length ?? 0 -} - type Filters = { opened?: boolean archived?: boolean @@ -286,7 +269,6 @@ export const InboxScreen: NavigationFunctionComponent<{ const [query, setQuery] = useState('') const queryString = useThrottleState(query) const theme = useTheme() - const unreadCount = useUnreadCount() const [visible, setVisible] = useState(false) const [refetching, setRefetching] = useState(false) @@ -296,6 +278,7 @@ export const InboxScreen: NavigationFunctionComponent<{ bookmarked, subjectContains: queryString, }) + const unreadCount = res?.data?.unreadCount ?? 0 useConnectivityIndicator({ componentId, From 5190caccd3d77728953f3165ae9ac7ceae1e1767 Mon Sep 17 00:00:00 2001 From: thoreyjona Date: Tue, 4 Jun 2024 14:49:29 +0000 Subject: [PATCH 8/8] fix: undoing changes on unreadCount variable since it changes with the filter --- .../app/src/graphql/queries/inbox.graphql | 1 - apps/native/app/src/screens/inbox/inbox.tsx | 19 ++++++++++++++++++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/apps/native/app/src/graphql/queries/inbox.graphql b/apps/native/app/src/graphql/queries/inbox.graphql index 716248a9a003..f6ff407ded03 100644 --- a/apps/native/app/src/graphql/queries/inbox.graphql +++ b/apps/native/app/src/graphql/queries/inbox.graphql @@ -12,7 +12,6 @@ query ListDocuments($input: GetDocumentListInput!) { ...ListDocument } totalCount - unreadCount } } diff --git a/apps/native/app/src/screens/inbox/inbox.tsx b/apps/native/app/src/screens/inbox/inbox.tsx index ae6ed6203ee9..5450f864966d 100644 --- a/apps/native/app/src/screens/inbox/inbox.tsx +++ b/apps/native/app/src/screens/inbox/inbox.tsx @@ -136,6 +136,23 @@ function useThrottleState(state: string, delay = 500) { return throttledState } +const useUnreadCount = () => { + const res = useListDocumentsQuery({ + fetchPolicy: 'cache-first', + variables: { + input: { + page: 1, + pageSize: 50, + opened: false, + }, + }, + }) + const unopened = res?.data?.listDocumentsV2?.data?.filter( + (item) => item.opened === false, + ) + return unopened?.length ?? 0 +} + type Filters = { opened?: boolean archived?: boolean @@ -269,6 +286,7 @@ export const InboxScreen: NavigationFunctionComponent<{ const [query, setQuery] = useState('') const queryString = useThrottleState(query) const theme = useTheme() + const unreadCount = useUnreadCount() const [visible, setVisible] = useState(false) const [refetching, setRefetching] = useState(false) @@ -278,7 +296,6 @@ export const InboxScreen: NavigationFunctionComponent<{ bookmarked, subjectContains: queryString, }) - const unreadCount = res?.data?.unreadCount ?? 0 useConnectivityIndicator({ componentId,