zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Conditionally load unreads (#4072)

zio/stable
Eric Bailey 2024-05-16 20:13:55 -05:00 committed by GitHub
parent 0444e69c35
commit 829f6a9e64
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 37 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/view/shell/desktop/LeftNav.tsx
View File

@ -66,6 +66,8 @@ import {
} from '#/components/icons/UserCircle' } from '#/components/icons/UserCircle'
import {router} from '../../../routes' import {router} from '../../../routes'
const NAV_ICON_WIDTH = 28
function ProfileCard() { function ProfileCard() {
const {currentAccount} = useSession() const {currentAccount} = useSession()
const {isLoading, data: profile} = useProfileQuery({did: currentAccount!.did}) const {isLoading, data: profile} = useProfileQuery({did: currentAccount!.did})
@ -280,15 +282,29 @@ function ComposeBtn() {
) )
} }
function ChatNavItem() {
const pal = usePalette('default')
const {_} = useLingui()
const numUnreadMessages = useUnreadMessageCount()
return (
<NavItem
href="/messages"
count={numUnreadMessages.numUnread}
icon={<Message style={pal.text} width={NAV_ICON_WIDTH} />}
iconFilled={<MessageFilled style={pal.text} width={NAV_ICON_WIDTH} />}
label={_(msg`Chat`)}
/>
)
}
export function DesktopLeftNav() { export function DesktopLeftNav() {
const {hasSession, currentAccount} = useSession() const {hasSession, currentAccount} = useSession()
const pal = usePalette('default') const pal = usePalette('default')
const {_} = useLingui() const {_} = useLingui()
const {isDesktop, isTablet} = useWebMediaQueries() const {isDesktop, isTablet} = useWebMediaQueries()
const numUnreadNotifications = useUnreadNotifications() const numUnreadNotifications = useUnreadNotifications()
const numUnreadMessages = useUnreadMessageCount()
const gate = useGate() const gate = useGate()
const iconWidth = 28
if (!hasSession && !isDesktop) { if (!hasSession && !isDesktop) {
return null return null
@ -316,66 +332,62 @@ export function DesktopLeftNav() {
<NavItem <NavItem
href="/" href="/"
icon={<Home width={iconWidth} style={pal.text} />} icon={<Home width={NAV_ICON_WIDTH} style={pal.text} />}
iconFilled={<HomeFilled width={iconWidth} style={pal.text} />} iconFilled={<HomeFilled width={NAV_ICON_WIDTH} style={pal.text} />}
label={_(msg`Home`)} label={_(msg`Home`)}
/> />
<NavItem <NavItem
href="/search" href="/search"
icon={<MagnifyingGlass style={pal.text} width={iconWidth} />} icon={<MagnifyingGlass style={pal.text} width={NAV_ICON_WIDTH} />}
iconFilled={ iconFilled={
<MagnifyingGlassFilled style={pal.text} width={iconWidth} /> <MagnifyingGlassFilled style={pal.text} width={NAV_ICON_WIDTH} />
} }
label={_(msg`Search`)} label={_(msg`Search`)}
/> />
<NavItem <NavItem
href="/notifications" href="/notifications"
count={numUnreadNotifications} count={numUnreadNotifications}
icon={<Bell width={iconWidth} style={pal.text} />} icon={<Bell width={NAV_ICON_WIDTH} style={pal.text} />}
iconFilled={<BellFilled width={iconWidth} style={pal.text} />} iconFilled={<BellFilled width={NAV_ICON_WIDTH} style={pal.text} />}
label={_(msg`Notifications`)} label={_(msg`Notifications`)}
/> />
{gate('dms') && ( {gate('dms') && <ChatNavItem />}
<NavItem
href="/messages"
count={numUnreadMessages.numUnread}
icon={<Message style={pal.text} width={iconWidth} />}
iconFilled={<MessageFilled style={pal.text} width={iconWidth} />}
label={_(msg`Chat`)}
/>
)}
<NavItem <NavItem
href="/feeds" href="/feeds"
icon={ icon={
<Hashtag <Hashtag
style={pal.text as FontAwesomeIconStyle} style={pal.text as FontAwesomeIconStyle}
width={iconWidth} width={NAV_ICON_WIDTH}
/> />
} }
iconFilled={ iconFilled={
<HashtagFilled <HashtagFilled
style={pal.text as FontAwesomeIconStyle} style={pal.text as FontAwesomeIconStyle}
width={iconWidth} width={NAV_ICON_WIDTH}
/> />
} }
label={_(msg`Feeds`)} label={_(msg`Feeds`)}
/> />
<NavItem <NavItem
href="/lists" href="/lists"
icon={<List style={pal.text} width={iconWidth} />} icon={<List style={pal.text} width={NAV_ICON_WIDTH} />}
iconFilled={<ListFilled style={pal.text} width={iconWidth} />} iconFilled={<ListFilled style={pal.text} width={NAV_ICON_WIDTH} />}
label={_(msg`Lists`)} label={_(msg`Lists`)}
/> />
<NavItem <NavItem
href={currentAccount ? makeProfileLink(currentAccount) : '/'} href={currentAccount ? makeProfileLink(currentAccount) : '/'}
icon={<UserCircle width={iconWidth} style={pal.text} />} icon={<UserCircle width={NAV_ICON_WIDTH} style={pal.text} />}
iconFilled={<UserCircleFilled width={iconWidth} style={pal.text} />} iconFilled={
<UserCircleFilled width={NAV_ICON_WIDTH} style={pal.text} />
}
label={_(msg`Profile`)} label={_(msg`Profile`)}
/> />
<NavItem <NavItem
href="/settings" href="/settings"
icon={<Settings width={iconWidth} style={pal.text} />} icon={<Settings width={NAV_ICON_WIDTH} style={pal.text} />}
iconFilled={<SettingsFilled width={iconWidth} style={pal.text} />} iconFilled={
<SettingsFilled width={NAV_ICON_WIDTH} style={pal.text} />
}
label={_(msg`Settings`)} label={_(msg`Settings`)}
/> />