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

[PWI] Shell (#1967)

Browse source 
* Sidebars

* Bottom bar

* Drawer

* Translate

* Spacing fix

* Fix responsive regression

* Fix nit
This commit is contained in:
Eric Bailey 2023-11-21 16:58:13 -06:00 • committed by GitHub
parent 4c4ba553bd
commit 47d2d3cbf2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 416 additions and 289 deletions
Download patch file Download diff file Expand all files Collapse all files

193
src/view/shell/desktop/LeftNav.tsx
View file

@ -47,6 +47,7 @@ import {useFetchHandle} from '#/state/queries/handle'
import {emitSoftReset} from '#/state/events'
import {useQueryClient} from '@tanstack/react-query'
import {RQKEY as NOTIFS_RQKEY} from '#/state/queries/notifications/feed'
import {NavSignupCard} from '#/view/shell/NavSignupCard'
function ProfileCard() {
const {currentAccount} = useSession()
@ -268,7 +269,7 @@ function ComposeBtn() {
}
export function DesktopLeftNav() {
const {currentAccount} = useSession()
const {hasSession, currentAccount} = useSession()
const pal = usePalette('default')
const {_} = useLingui()
const {isDesktop, isTablet} = useWebMediaQueries()
@ -282,8 +283,16 @@ export function DesktopLeftNav() {
pal.view,
pal.border,
]}>
<ProfileCard />
{hasSession ? (
<ProfileCard />
) : isDesktop ? (
<View style={{paddingHorizontal: 12}}>
<NavSignupCard />
</View>
) : null}
<BackBtn />
<NavItem
href="/"
icon={<HomeIcon size={isDesktop ? 24 : 28} style={pal.text} />}
@ -332,98 +341,104 @@ export function DesktopLeftNav() {
}
label={_(msg`Feeds`)}
/>
<NavItem
href="/notifications"
count={numUnread}
icon={
<BellIcon
strokeWidth={2}
size={isDesktop ? 24 : 26}
style={pal.text}
{hasSession && (
<>
<NavItem
href="/notifications"
count={numUnread}
icon={
<BellIcon
strokeWidth={2}
size={isDesktop ? 24 : 26}
style={pal.text}
/>
}
iconFilled={
<BellIconSolid
strokeWidth={1.5}
size={isDesktop ? 24 : 26}
style={pal.text}
/>
}
label={_(msg`Notifications`)}
/>
}
iconFilled={
<BellIconSolid
strokeWidth={1.5}
size={isDesktop ? 24 : 26}
style={pal.text}
<NavItem
href="/lists"
icon={
<ListIcon
style={pal.text}
size={isDesktop ? 26 : 30}
strokeWidth={2}
/>
}
iconFilled={
<ListIcon
style={pal.text}
size={isDesktop ? 26 : 30}
strokeWidth={3}
/>
}
label={_(msg`Lists`)}
/>
}
label={_(msg`Notifications`)}
/>
<NavItem
href="/lists"
icon={
<ListIcon
style={pal.text}
size={isDesktop ? 26 : 30}
strokeWidth={2}
<NavItem
href="/moderation"
icon={
<HandIcon
style={pal.text}
size={isDesktop ? 24 : 27}
strokeWidth={5.5}
/>
}
iconFilled={
<FontAwesomeIcon
icon="hand"
style={pal.text as FontAwesomeIconStyle}
size={isDesktop ? 20 : 26}
/>
}
label={_(msg`Moderation`)}
/>
}
iconFilled={
<ListIcon
style={pal.text}
size={isDesktop ? 26 : 30}
strokeWidth={3}
<NavItem
href={currentAccount ? makeProfileLink(currentAccount) : '/'}
icon={
<UserIcon
strokeWidth={1.75}
size={isDesktop ? 28 : 30}
style={pal.text}
/>
}
iconFilled={
<UserIconSolid
strokeWidth={1.75}
size={isDesktop ? 28 : 30}
style={pal.text}
/>
}
label="Profile"
/>
}
label={_(msg`Lists`)}
/>
<NavItem
href="/moderation"
icon={
<HandIcon
style={pal.text}
size={isDesktop ? 24 : 27}
strokeWidth={5.5}
<NavItem
href="/settings"
icon={
<CogIcon
strokeWidth={1.75}
size={isDesktop ? 28 : 32}
style={pal.text}
/>
}
iconFilled={
<CogIconSolid
strokeWidth={1.5}
size={isDesktop ? 28 : 32}
style={pal.text}
/>
}
label={_(msg`Settings`)}
/>
}
iconFilled={
<FontAwesomeIcon
icon="hand"
style={pal.text as FontAwesomeIconStyle}
size={isDesktop ? 20 : 26}
/>
}
label={_(msg`Moderation`)}
/>
<NavItem
href={currentAccount ? makeProfileLink(currentAccount) : '/'}
icon={
<UserIcon
strokeWidth={1.75}
size={isDesktop ? 28 : 30}
style={pal.text}
/>
}
iconFilled={
<UserIconSolid
strokeWidth={1.75}
size={isDesktop ? 28 : 30}
style={pal.text}
/>
}
label="Profile"
/>
<NavItem
href="/settings"
icon={
<CogIcon
strokeWidth={1.75}
size={isDesktop ? 28 : 32}
style={pal.text}
/>
}
iconFilled={
<CogIconSolid
strokeWidth={1.5}
size={isDesktop ? 28 : 32}
style={pal.text}
/>
}
label={_(msg`Settings`)}
/>
<ComposeBtn />
<ComposeBtn />
</>
)}
</View>
)
}

49
src/view/shell/desktop/RightNav.tsx
View file

@ -30,9 +30,21 @@ export function DesktopRightNav() {
return (
<View style={[styles.rightNav, pal.view]}>
{hasSession && <DesktopSearch />}
{hasSession && <DesktopFeeds />}
<View style={styles.message}>
<DesktopSearch />
{hasSession && (
<View style={{paddingTop: 18, marginBottom: 18}}>
<DesktopFeeds />
</View>
)}
<View
style={[
styles.message,
{
paddingTop: hasSession ? 0 : 18,
},
]}>
{isSandbox ? (
<View style={[palError.view, styles.messageLine, s.p10]}>
<Text type="md" style={[palError.text, s.bold]}>
@ -41,18 +53,22 @@ export function DesktopRightNav() {
</View>
) : undefined}
<View style={[s.flexRow]}>
<TextLink
type="md"
style={pal.link}
href={FEEDBACK_FORM_URL({
email: currentAccount!.email,
handle: currentAccount!.handle,
})}
text={_(msg`Feedback`)}
/>
<Text type="md" style={pal.textLight}>
&nbsp;&middot;&nbsp;
</Text>
{hasSession && (
<>
<TextLink
type="md"
style={pal.link}
href={FEEDBACK_FORM_URL({
email: currentAccount!.email,
handle: currentAccount!.handle,
})}
text={_(msg`Feedback`)}
/>
<Text type="md" style={pal.textLight}>
&nbsp;&middot;&nbsp;
</Text>
</>
)}
<TextLink
type="md"
style={pal.link}
@ -79,7 +95,8 @@ export function DesktopRightNav() {
/>
</View>
</View>
<InviteCodes />
{hasSession && <InviteCodes />}
</View>
)
}

1
src/view/shell/desktop/Search.tsx
View file

@ -222,7 +222,6 @@ const styles = StyleSheet.create({
container: {
position: 'relative',
width: 300,
paddingBottom: 18,
},
search: {
paddingHorizontal: 16,