Conditionally load unreads (#4072)
parent
0444e69c35
commit
829f6a9e64
|
@ -66,6 +66,8 @@ import {
|
|||
} from '#/components/icons/UserCircle'
|
||||
import {router} from '../../../routes'
|
||||
|
||||
const NAV_ICON_WIDTH = 28
|
||||
|
||||
function ProfileCard() {
|
||||
const {currentAccount} = useSession()
|
||||
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() {
|
||||
const {hasSession, currentAccount} = useSession()
|
||||
const pal = usePalette('default')
|
||||
const {_} = useLingui()
|
||||
const {isDesktop, isTablet} = useWebMediaQueries()
|
||||
const numUnreadNotifications = useUnreadNotifications()
|
||||
const numUnreadMessages = useUnreadMessageCount()
|
||||
const gate = useGate()
|
||||
const iconWidth = 28
|
||||
|
||||
if (!hasSession && !isDesktop) {
|
||||
return null
|
||||
|
@ -316,66 +332,62 @@ export function DesktopLeftNav() {
|
|||
|
||||
<NavItem
|
||||
href="/"
|
||||
icon={<Home width={iconWidth} style={pal.text} />}
|
||||
iconFilled={<HomeFilled width={iconWidth} style={pal.text} />}
|
||||
icon={<Home width={NAV_ICON_WIDTH} style={pal.text} />}
|
||||
iconFilled={<HomeFilled width={NAV_ICON_WIDTH} style={pal.text} />}
|
||||
label={_(msg`Home`)}
|
||||
/>
|
||||
<NavItem
|
||||
href="/search"
|
||||
icon={<MagnifyingGlass style={pal.text} width={iconWidth} />}
|
||||
icon={<MagnifyingGlass style={pal.text} width={NAV_ICON_WIDTH} />}
|
||||
iconFilled={
|
||||
<MagnifyingGlassFilled style={pal.text} width={iconWidth} />
|
||||
<MagnifyingGlassFilled style={pal.text} width={NAV_ICON_WIDTH} />
|
||||
}
|
||||
label={_(msg`Search`)}
|
||||
/>
|
||||
<NavItem
|
||||
href="/notifications"
|
||||
count={numUnreadNotifications}
|
||||
icon={<Bell width={iconWidth} style={pal.text} />}
|
||||
iconFilled={<BellFilled width={iconWidth} style={pal.text} />}
|
||||
icon={<Bell width={NAV_ICON_WIDTH} style={pal.text} />}
|
||||
iconFilled={<BellFilled width={NAV_ICON_WIDTH} style={pal.text} />}
|
||||
label={_(msg`Notifications`)}
|
||||
/>
|
||||
{gate('dms') && (
|
||||
<NavItem
|
||||
href="/messages"
|
||||
count={numUnreadMessages.numUnread}
|
||||
icon={<Message style={pal.text} width={iconWidth} />}
|
||||
iconFilled={<MessageFilled style={pal.text} width={iconWidth} />}
|
||||
label={_(msg`Chat`)}
|
||||
/>
|
||||
)}
|
||||
{gate('dms') && <ChatNavItem />}
|
||||
<NavItem
|
||||
href="/feeds"
|
||||
icon={
|
||||
<Hashtag
|
||||
style={pal.text as FontAwesomeIconStyle}
|
||||
width={iconWidth}
|
||||
width={NAV_ICON_WIDTH}
|
||||
/>
|
||||
}
|
||||
iconFilled={
|
||||
<HashtagFilled
|
||||
style={pal.text as FontAwesomeIconStyle}
|
||||
width={iconWidth}
|
||||
width={NAV_ICON_WIDTH}
|
||||
/>
|
||||
}
|
||||
label={_(msg`Feeds`)}
|
||||
/>
|
||||
<NavItem
|
||||
href="/lists"
|
||||
icon={<List style={pal.text} width={iconWidth} />}
|
||||
iconFilled={<ListFilled style={pal.text} width={iconWidth} />}
|
||||
icon={<List style={pal.text} width={NAV_ICON_WIDTH} />}
|
||||
iconFilled={<ListFilled style={pal.text} width={NAV_ICON_WIDTH} />}
|
||||
label={_(msg`Lists`)}
|
||||
/>
|
||||
<NavItem
|
||||
href={currentAccount ? makeProfileLink(currentAccount) : '/'}
|
||||
icon={<UserCircle width={iconWidth} style={pal.text} />}
|
||||
iconFilled={<UserCircleFilled width={iconWidth} style={pal.text} />}
|
||||
icon={<UserCircle width={NAV_ICON_WIDTH} style={pal.text} />}
|
||||
iconFilled={
|
||||
<UserCircleFilled width={NAV_ICON_WIDTH} style={pal.text} />
|
||||
}
|
||||
label={_(msg`Profile`)}
|
||||
/>
|
||||
<NavItem
|
||||
href="/settings"
|
||||
icon={<Settings width={iconWidth} style={pal.text} />}
|
||||
iconFilled={<SettingsFilled width={iconWidth} style={pal.text} />}
|
||||
icon={<Settings width={NAV_ICON_WIDTH} style={pal.text} />}
|
||||
iconFilled={
|
||||
<SettingsFilled width={NAV_ICON_WIDTH} style={pal.text} />
|
||||
}
|
||||
label={_(msg`Settings`)}
|
||||
/>
|
||||
|
||||
|
|
Loading…
Reference in New Issue