Rebalance splitview columns (#10512)

eslint-suppressions.json

@@ -59,11 +59,6 @@
       "count": 1
     }
   },
-  "src/components/Layout/const.ts": {
-    "@typescript-eslint/no-explicit-any": {
-      "count": 2
-    }
-  },
   "src/components/Lists.tsx": {
     "@typescript-eslint/no-explicit-any": {
       "count": 1

src/components/Layout/Header/index.tsx

@@ -24,6 +24,7 @@ import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
 import {
   BUTTON_VISUAL_ALIGNMENT_OFFSET,
   CENTER_COLUMN_OFFSET,
+  CENTER_COLUMN_WIDTH,
   HEADER_SLOT_SIZE,
   SCROLLBAR_OFFSET,
 } from '#/components/Layout/const'
@@ -65,7 +66,7 @@ export function Outer({
           web: [a.py_xs, {minHeight: 52}],
         }),
         t.atoms.border_contrast_low,
-        gtMobile && [a.mx_auto, {maxWidth: 600}],
+        gtMobile && [a.mx_auto, {maxWidth: CENTER_COLUMN_WIDTH}],
         !isWithinOffsetView &&
           !isWithinSplitView && {
             transform: [

src/components/Layout/const.ts

@@ -1,7 +1,7 @@
 export const SCROLLBAR_OFFSET =
-  'calc(-1 * var(--removed-body-scroll-bar-size, 0px) / 2)' as any
+  'calc(-1 * var(--removed-body-scroll-bar-size, 0px) / 2)' as `${number}%`
 export const SCROLLBAR_OFFSET_POSITIVE =
-  'calc(var(--removed-body-scroll-bar-size, 0px) / 2)' as any
+  'calc(var(--removed-body-scroll-bar-size, 0px) / 2)' as `${number}%`
 
 /**
  * Useful for visually aligning icons within header buttons with the elements
@@ -19,3 +19,8 @@ export const HEADER_SLOT_SIZE = 33
  * How far to shift the center column when in the tablet breakpoint
  */
 export const CENTER_COLUMN_OFFSET = -105
+
+/**
+ * How wide the center column is
+ */
+export const CENTER_COLUMN_WIDTH = 600

src/components/Layout/index.tsx

@@ -22,7 +22,11 @@ import {
   web,
 } from '#/alf'
 import {useDialogContext} from '#/components/Dialog'
-import {CENTER_COLUMN_OFFSET, SCROLLBAR_OFFSET} from '#/components/Layout/const'
+import {
+  CENTER_COLUMN_OFFSET,
+  CENTER_COLUMN_WIDTH,
+  SCROLLBAR_OFFSET,
+} from '#/components/Layout/const'
 import {ScrollbarOffsetContext} from '#/components/Layout/context'
 import {IS_WEB} from '#/env'
 
@@ -152,7 +156,7 @@ export const Center = memo(function LayoutCenter({
         a.w_full,
         !isWithinSplitView && a.mx_auto,
         gtMobile && {
-          maxWidth: 600,
+          maxWidth: CENTER_COLUMN_WIDTH,
         },
         !isWithinOffsetView &&
           !isWithinSplitView && {

src/screens/Messages/components/splitView/MessagesSplitViewLayout.tsx

@@ -7,10 +7,11 @@ import {type NativeStackNavigationProp} from '@react-navigation/native-stack'
 import {type FlatNavigatorParams} from '#/lib/routes/types'
 import {ScrollProvider} from '#/lib/ScrollContext'
 import {type NativeStackNavigationOptionsWithAuth} from '#/view/shell/createNativeStackNavigatorWithAuth'
+import {LEFT_NAV_MINIMAL_WIDTH} from '#/view/shell/desktop/LeftNav'
 import {atoms as a, useLayoutBreakpoints, useTheme, web} from '#/alf'
 import {useDialogControl} from '#/components/Dialog'
 import {NewChat} from '#/components/dms/dialogs/NewChatDialog'
-import {SCROLLBAR_OFFSET} from '#/components/Layout'
+import {CENTER_COLUMN_WIDTH, SCROLLBAR_OFFSET} from '#/components/Layout'
 import {LockScroll} from '#/components/LockScroll'
 import {useAgeAssurance} from '#/ageAssurance'
 import {IS_WEB} from '#/env'
@@ -18,12 +19,6 @@ import {ChatList, Header as ChatListHeader} from '../../ChatList'
 import {SplitViewProvider} from './context'
 import {splitViewLeftScroll} from './leftColumnScroll'
 
-const CENTER_COLUMN_WIDTH = 600
-const LEFT_NAV_FULL_WIDTH = 245
-const LEFT_NAV_MINIMAL_WIDTH = 86
-const RIGHT_NAV_FULL_WIDTH = 330
-const RIGHT_NAV_MINIMAL_WIDTH = 280
-
 type MessageScreens =
   | 'Messages'
   | 'MessagesConversation'
@@ -72,25 +67,14 @@ function MessagesSplitViewLayout({children, navigation, route}: LayoutProps) {
       ? route.params.conversation
       : undefined
 
-  const rightNavWidth = centerColumnOffset
+  const halfLeftNavWidth = LEFT_NAV_MINIMAL_WIDTH / 2
-    ? RIGHT_NAV_MINIMAL_WIDTH
-    : RIGHT_NAV_FULL_WIDTH
 
-  const leftNavWidth = centerColumnOffset
+  const leftColumnWidth = 360
-    ? LEFT_NAV_MINIMAL_WIDTH
-    : LEFT_NAV_FULL_WIDTH - LEFT_NAV_MINIMAL_WIDTH
 
-  // slight reduce width for smaller breakpoint
+  const rightColumnWidth =
-  const centerColumnWidth = centerColumnOffset
+    CENTER_COLUMN_WIDTH - (centerColumnOffset ? halfLeftNavWidth + 30 : 0)
-    ? CENTER_COLUMN_WIDTH - 50
-    : CENTER_COLUMN_WIDTH
 
-  // nasty magic numbers here, sorry :(
+  const containerWidth = leftColumnWidth + rightColumnWidth
-  const offset = centerColumnOffset
-    ? LEFT_NAV_MINIMAL_WIDTH - 34
-    : LEFT_NAV_MINIMAL_WIDTH + 5
-
-  const containerWidth = leftNavWidth + centerColumnWidth + rightNavWidth
 
   return (
     <View
@@ -101,7 +85,11 @@ function MessagesSplitViewLayout({children, navigation, route}: LayoutProps) {
         {maxWidth: containerWidth},
         {
           transform: [
-            {translateX: offset},
+            {
+              translateX: centerColumnOffset
+                ? halfLeftNavWidth
+                : halfLeftNavWidth / 2,
+            },
             {translateX: web(SCROLLBAR_OFFSET) ?? 0},
           ],
         },
@@ -112,7 +100,7 @@ function MessagesSplitViewLayout({children, navigation, route}: LayoutProps) {
           style={[
             a.border_l,
             t.atoms.border_contrast_low,
-            {width: containerWidth - centerColumnWidth},
+            {width: leftColumnWidth},
           ]}>
           <ChatListHeader newChatControl={newChatControl} />
           <ScrollProvider onScroll={onLeftColumnScroll}>
@@ -129,7 +117,7 @@ function MessagesSplitViewLayout({children, navigation, route}: LayoutProps) {
           style={[
             a.border_x,
             t.atoms.border_contrast_low,
-            {width: centerColumnWidth},
+            {width: rightColumnWidth},
           ]}>
           {children}
         </View>

src/view/com/util/Views.web.tsx

@@ -28,7 +28,7 @@ import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {addStyle} from '#/lib/styles'
 import {useLayoutBreakpoints} from '#/alf'
 import {useDialogContext} from '#/components/Dialog'
-import {CENTER_COLUMN_OFFSET} from '#/components/Layout'
+import {CENTER_COLUMN_OFFSET, CENTER_COLUMN_WIDTH} from '#/components/Layout'
 
 interface AddedProps {
   desktopFixedHeight?: boolean | number
@@ -175,7 +175,7 @@ const styles = StyleSheet.create({
   },
   container: {
     width: '100%',
-    maxWidth: 600,
+    maxWidth: CENTER_COLUMN_WIDTH,
     marginLeft: 'auto',
     marginRight: 'auto',
   },
@@ -184,7 +184,7 @@ const styles = StyleSheet.create({
   },
   containerScroll: {
     width: '100%',
-    maxWidth: 600,
+    maxWidth: CENTER_COLUMN_WIDTH,
     marginLeft: 'auto',
     marginRight: 'auto',
   },

src/view/shell/desktop/LeftNav.tsx

@@ -1,9 +1,8 @@
-import {type JSX, useCallback, useMemo, useState} from 'react'
+import {useCallback, useMemo, useState} from 'react'
 import {StyleSheet, View} from 'react-native'
 import {type AppBskyActorDefs} from '@atproto/api'
-import {msg, plural} from '@lingui/core/macro'
+import {plural} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
+import {Trans, useLingui} from '@lingui/react/macro'
-import {Trans} from '@lingui/react/macro'
 import {useNavigation, useNavigationState} from '@react-navigation/native'
 
 import {useAccountSwitcher} from '#/lib/hooks/useAccountSwitcher'
@@ -40,42 +39,46 @@ import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {type DialogControlProps} from '#/components/Dialog'
 import {ArrowBoxLeft_Stroke2_Corner0_Rounded as LeaveIcon} from '#/components/icons/ArrowBoxLeft'
 import {
-  Bell_Filled_Corner0_Rounded as BellFilled,
+  Bell_Filled_Corner0_Rounded as BellFilledIcon,
-  Bell_Stroke2_Corner0_Rounded as Bell,
+  Bell_Stroke2_Corner0_Rounded as BellIcon,
 } from '#/components/icons/Bell'
-import {Bookmark, BookmarkFilled} from '#/components/icons/Bookmark'
 import {
-  BulletList_Filled_Corner0_Rounded as ListFilled,
+  Bookmark as BookmarkIcon,
-  BulletList_Stroke2_Corner0_Rounded as List,
+  BookmarkFilled as BookmarkFilledIcon,
+} from '#/components/icons/Bookmark'
+import {
+  BulletList_Filled_Corner0_Rounded as ListFilledIcon,
+  BulletList_Stroke2_Corner0_Rounded as ListIcon,
 } from '#/components/icons/BulletList'
+import {type Props as SVGIconProps} from '#/components/icons/common'
 import {DotGrid3x1_Stroke2_Corner0_Rounded as EllipsisIcon} from '#/components/icons/DotGrid'
 import {EditBig_Stroke2_Corner2_Rounded as EditBigIcon} from '#/components/icons/EditBig'
 import {
-  Hashtag_Filled_Corner0_Rounded as HashtagFilled,
+  Hashtag_Filled_Corner0_Rounded as HashtagFilledIcon,
-  Hashtag_Stroke2_Corner0_Rounded as Hashtag,
+  Hashtag_Stroke2_Corner0_Rounded as HashtagIcon,
 } from '#/components/icons/Hashtag'
 import {
-  HomeOpen_Filled_Corner0_Rounded as HomeFilled,
+  HomeOpen_Filled_Corner0_Rounded as HomeFilledIcon,
-  HomeOpen_Stoke2_Corner0_Rounded as Home,
+  HomeOpen_Stoke2_Corner0_Rounded as HomeIcon,
 } from '#/components/icons/HomeOpen'
 import {
-  MagnifyingGlass_Filled_Stroke2_Corner0_Rounded as MagnifyingGlassFilled,
+  MagnifyingGlass_Filled_Stroke2_Corner0_Rounded as MagnifyingGlassFilledIcon,
-  MagnifyingGlass_Stroke2_Corner0_Rounded as MagnifyingGlass,
+  MagnifyingGlass_Stroke2_Corner0_Rounded as MagnifyingGlassIcon,
 } from '#/components/icons/MagnifyingGlass'
 import {
-  Message_Stroke2_Corner0_Rounded as Message,
+  Message_Stroke2_Corner0_Rounded as MessageIcon,
-  Message_Stroke2_Corner0_Rounded_Filled as MessageFilled,
+  Message_Stroke2_Corner0_Rounded_Filled as MessageFilledIcon,
 } from '#/components/icons/Message'
 import {PlusLarge_Stroke2_Corner0_Rounded as PlusIcon} from '#/components/icons/Plus'
 import {
-  SettingsGear2_Filled_Corner0_Rounded as SettingsFilled,
+  SettingsGear2_Filled_Corner0_Rounded as SettingsFilledIcon,
-  SettingsGear2_Stroke2_Corner0_Rounded as Settings,
+  SettingsGear2_Stroke2_Corner0_Rounded as SettingsIcon,
 } from '#/components/icons/SettingsGear2'
 import {
-  UserCircle_Filled_Corner0_Rounded as UserCircleFilled,
+  UserCircle_Filled_Corner0_Rounded as UserCircleFilledIcon,
-  UserCircle_Stroke2_Corner0_Rounded as UserCircle,
+  UserCircle_Stroke2_Corner0_Rounded as UserCircleIcon,
 } from '#/components/icons/UserCircle'
-import {CENTER_COLUMN_OFFSET} from '#/components/Layout'
+import {CENTER_COLUMN_OFFSET, CENTER_COLUMN_WIDTH} from '#/components/Layout'
 import * as Menu from '#/components/Menu'
 import * as Prompt from '#/components/Prompt'
 import {Text} from '#/components/Typography'
@@ -84,8 +87,13 @@ import {useActorStatus} from '#/features/liveNow'
 import {router} from '#/routes'
 import {PlatformInfo} from '../../../../modules/expo-bluesky-swiss-army'
 
+const LARGE_ELEMENT_SIZE = 48
 const NAV_ICON_WIDTH = 28
 
+export const LEFT_NAV_STANDARD_WIDTH = 240
+export const LEFT_NAV_MINIMAL_WIDTH = 80
+const LEFT_NAV_PWI_WIDTH = 245
+
 function ProfileCard({minimal}: {minimal: boolean}) {
   const {currentAccount, accounts} = useSession()
   const {logoutEveryAccount} = useSessionApi()
@@ -94,11 +102,9 @@ function ProfileCard({minimal}: {minimal: boolean}) {
   })
   const profiles = data?.profiles
   const signOutPromptControl = Prompt.usePromptControl()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const t = useTheme()
 
-  const size = 48
-
   const profile = profiles?.find(p => p.did === currentAccount!.did)
   const otherAccounts = accounts
     .filter(acc => acc.did !== currentAccount!.did)
@@ -110,10 +116,10 @@ function ProfileCard({minimal}: {minimal: boolean}) {
   const {isActive: live} = useActorStatus(profile)
 
   return (
-    <View style={[a.my_md, !minimal && [a.w_full, a.align_start]]}>
+    <View style={[a.pb_md, !minimal && [a.w_full, a.align_start]]}>
       {!isLoading && profile ? (
         <Menu.Root>
-          <Menu.Trigger label={_(msg`Switch accounts`)}>
+          <Menu.Trigger label={l`Switch accounts`}>
             {({props, state, control}) => {
               const active = state.hovered || state.focused || control.isOpen
               return (
@@ -149,7 +155,7 @@ function ProfileCard({minimal}: {minimal: boolean}) {
                     ]}>
                     <UserAvatar
                       avatar={profile.avatar}
-                      size={size}
+                      size={LARGE_ELEMENT_SIZE}
                       type={profile?.associated?.labeler ? 'labeler' : 'user'}
                       live={live}
                     />
@@ -205,18 +211,18 @@ function ProfileCard({minimal}: {minimal: boolean}) {
         </Menu.Root>
       ) : (
         <LoadingPlaceholder
-          width={size}
+          width={LARGE_ELEMENT_SIZE}
-          height={size}
+          height={LARGE_ELEMENT_SIZE}
-          style={[{borderRadius: size}, !minimal && a.ml_lg]}
+          style={[a.rounded_full, !minimal && a.ml_lg]}
         />
       )}
       <Prompt.Basic
         control={signOutPromptControl}
-        title={_(msg`Sign out?`)}
+        title={l`Sign out?`}
-        description={_(msg`You will be signed out of all your accounts.`)}
+        description={l`You will be signed out of all your accounts.`}
         onConfirm={() => logoutEveryAccount('Settings')}
-        confirmButtonCta={_(msg`Sign out`)}
+        confirmButtonCta={l`Sign out`}
-        cancelButtonCta={_(msg`Cancel`)}
+        cancelButtonCta={l`Cancel`}
         confirmButtonColor="negative"
       />
     </View>
@@ -235,7 +241,7 @@ function SwitchMenuItems({
     | undefined
   signOutPromptControl: DialogControlProps
 }) {
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const {setShowLoggedOut} = useLoggedOutViewControls()
   const closeEverything = useCloseAllActiveElements()
 
@@ -264,15 +270,13 @@ function SwitchMenuItems({
         </>
       )}
       <SwitcherMenuProfileLink />
-      <Menu.Item
+      <Menu.Item label={l`Add another account`} onPress={onAddAnotherAccount}>
-        label={_(msg`Add another account`)}
-        onPress={onAddAnotherAccount}>
         <Menu.ItemIcon icon={PlusIcon} />
         <Menu.ItemText>
           <Trans>Add another account</Trans>
         </Menu.ItemText>
       </Menu.Item>
-      <Menu.Item label={_(msg`Sign out`)} onPress={signOutPromptControl.open}>
+      <Menu.Item label={l`Sign out`} onPress={signOutPromptControl.open}>
         <Menu.ItemIcon icon={LeaveIcon} />
         <Menu.ItemText>
           <Trans>Sign out</Trans>
@@ -283,7 +287,7 @@ function SwitchMenuItems({
 }
 
 function SwitcherMenuProfileLink() {
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const {currentAccount} = useSession()
   const navigation = useNavigation()
   const context = Menu.useMenuContext()
@@ -326,11 +330,11 @@ function SwitcherMenuProfileLink() {
   )
   return (
     <Menu.Item
-      label={_(msg`Go to profile`)}
+      label={l`Go to profile`}
       // @ts-expect-error The function signature differs on web -inb
       onPress={onProfilePress}
       href={profileLink}>
-      <Menu.ItemIcon icon={UserCircle} />
+      <Menu.ItemIcon icon={UserCircleIcon} />
       <Menu.ItemText>
         <Trans>Go to profile</Trans>
       </Menu.ItemText>
@@ -345,7 +349,7 @@ function SwitchMenuItem({
   account: SessionAccount
   profile: AppBskyActorDefs.ProfileViewDetailed | undefined
 }) {
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const {onPressSwitchAccount, pendingDid} = useAccountSwitcher()
   const {isActive: live} = useActorStatus(profile)
 
@@ -354,12 +358,10 @@ function SwitchMenuItem({
       disabled={!!pendingDid}
       style={[a.gap_sm, {minWidth: 150}]}
       key={account.did}
-      label={_(
+      label={l`Switch to ${sanitizeHandle(
-        msg`Switch to ${sanitizeHandle(
+        profile?.handle ?? account.handle,
-          profile?.handle ?? account.handle,
+        '@',
-          '@',
+      )}`}
-        )}`,
-      )}
       onPress={() => void onPressSwitchAccount(account, 'SwitchAccount')}>
       <View>
         <UserAvatar
@@ -381,22 +383,16 @@ interface NavItemProps {
   count?: string
   hasNew?: boolean
   href: string
-  icon: JSX.Element
+  icons: {
-  iconFilled: JSX.Element
+    inactive: React.ComponentType<SVGIconProps>
+    active: React.ComponentType<SVGIconProps>
+  }
   label: string
   minimal: boolean
 }
-function NavItem({
+function NavItem({count, hasNew, href, icons, label, minimal}: NavItemProps) {
-  count,
-  hasNew,
-  href,
-  icon,
-  iconFilled,
-  label,
-  minimal,
-}: NavItemProps) {
   const t = useTheme()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const {currentAccount} = useSession()
 
   const [pathName] = useMemo(() => router.matchPath(href), [href])
@@ -431,6 +427,8 @@ function NavItem({
     [navigation, href, isCurrent],
   )
 
+  const Icon = isCurrent || isRelated ? icons.active : icons.inactive
+
   return (
     <PressableWithHover
       style={[
@@ -459,7 +457,7 @@ function NavItem({
             height: 24,
           },
         ]}>
-        {isCurrent || isRelated ? iconFilled : icon}
+        <Icon aria-hidden={true} width={NAV_ICON_WIDTH} style={t.atoms.text} />
         {typeof count === 'string' && count ? (
           <View
             style={[
@@ -468,12 +466,10 @@ function NavItem({
               {right: -20}, // more breathing room
             ]}>
             <Text
-              accessibilityLabel={_(
+              accessibilityLabel={l`${plural(count, {
-                msg`${plural(count, {
+                one: '# unread item',
-                  one: '# unread item',
+                other: '# unread items',
-                  other: '# unread items',
+              })}`}
-                })}`,
-              )}
               accessibilityHint=""
               accessible={true}
               numberOfLines={1}
@@ -529,7 +525,7 @@ function ComposeBtn({minimal}: {minimal: boolean}) {
   const {currentAccount} = useSession()
   const {getState} = useNavigation()
   const {openComposer} = useOpenComposer()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const [isFetchingHandle, setIsFetchingHandle] = useState(false)
   const fetchHandle = useFetchHandle()
 
@@ -573,11 +569,14 @@ function ComposeBtn({minimal}: {minimal: boolean}) {
     <View style={minimal ? [a.px_sm, a.pt_lg] : [a.flex_row, a.pl_md, a.pt_lg]}>
       <Button
         disabled={isFetchingHandle}
-        label={_(msg`Compose new post`)}
+        label={l`Compose new post`}
         onPress={() => void onPressCompose()}
         size="large"
         color="primary"
-        style={[a.rounded_full, minimal && {width: 48, height: 48}]}>
+        style={[
+          a.rounded_full,
+          minimal && {width: LARGE_ELEMENT_SIZE, height: LARGE_ELEMENT_SIZE},
+        ]}>
         <ButtonIcon icon={EditBigIcon} size={minimal ? 'lg' : 'sm'} />
         {!minimal && (
           <ButtonText>
@@ -589,41 +588,9 @@ function ComposeBtn({minimal}: {minimal: boolean}) {
   )
 }
 
-function ChatNavItem({minimal}: {minimal: boolean}) {
-  const t = useTheme()
-  const {_} = useLingui()
-  const numUnreadMessages = useUnreadMessageCount()
-  const aa = useAgeAssurance()
-
-  return (
-    <NavItem
-      href="/messages"
-      minimal={minimal}
-      count={aa.flags.chatDisabled ? undefined : numUnreadMessages.numUnread}
-      hasNew={aa.flags.chatDisabled ? false : numUnreadMessages.hasNew}
-      icon={
-        <Message
-          style={t.atoms.text}
-          aria-hidden={true}
-          width={NAV_ICON_WIDTH}
-        />
-      }
-      iconFilled={
-        <MessageFilled
-          style={t.atoms.text}
-          aria-hidden={true}
-          width={NAV_ICON_WIDTH}
-        />
-      }
-      label={_(msg`Chat`)}
-    />
-  )
-}
-
 export function DesktopLeftNav({routeName}: {routeName: string}) {
   const {hasSession, currentAccount} = useSession()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
-  const t = useTheme()
   const {gtMobile} = useBreakpoints()
 
   const aa = useAgeAssurance()
@@ -634,6 +601,7 @@ export function DesktopLeftNav({routeName}: {routeName: string}) {
   const {leftNavMinimal: leftNavMinimalBreakpoint, centerColumnOffset} =
     useLayoutBreakpoints()
   const numUnreadNotifications = useUnreadNotifications()
+  const numUnreadMessages = useUnreadMessageCount()
 
   const leftNavMinimal = isMessagesRelatedScreen || leftNavMinimalBreakpoint
 
@@ -645,18 +613,25 @@ export function DesktopLeftNav({routeName}: {routeName: string}) {
     <View
       role="navigation"
       style={[
-        a.px_xl,
+        a.fixed,
+        a.top_0,
+        a.p_lg,
         styles.leftNav,
-        !hasSession && !leftNavMinimal && styles.leftNavWide,
+        !hasSession && !leftNavMinimal && {width: LEFT_NAV_PWI_WIDTH},
-        leftNavMinimal && styles.leftNavMinimal,
+        leftNavMinimal && [
+          {width: LEFT_NAV_MINIMAL_WIDTH},
+          a.h_full,
+          a.align_center,
+          web(a.overflow_x_hidden),
+        ],
         {
           transform: [
             {
               translateX:
-                -300 +
+                -(CENTER_COLUMN_WIDTH / 2) +
                 (centerColumnOffset ? CENTER_COLUMN_OFFSET : 0) +
                 (isMessagesRelatedScreen && !leftNavMinimalBreakpoint
-                  ? -153
+                  ? LEFT_NAV_MINIMAL_WIDTH - LEFT_NAV_STANDARD_WIDTH
                   : 0),
             },
             {translateX: '-100%'},
@@ -671,167 +646,96 @@ export function DesktopLeftNav({routeName}: {routeName: string}) {
           <NavSignupCard />
         </View>
       ) : null}
-
       {hasSession && (
         <>
           <NavItem
+            label={l`Home`}
             href="/"
             minimal={leftNavMinimal}
-            icon={
+            icons={{
-              <Home
+              inactive: HomeIcon,
-                aria-hidden={true}
+              active: HomeFilledIcon,
-                width={NAV_ICON_WIDTH}
+            }}
-                style={t.atoms.text}
-              />
-            }
-            iconFilled={
-              <HomeFilled
-                aria-hidden={true}
-                width={NAV_ICON_WIDTH}
-                style={t.atoms.text}
-              />
-            }
-            label={_(msg`Home`)}
           />
           <NavItem
+            label={l`Explore`}
             href="/search"
             minimal={leftNavMinimal}
-            icon={
+            icons={{
-              <MagnifyingGlass
+              inactive: MagnifyingGlassIcon,
-                style={t.atoms.text}
+              active: MagnifyingGlassFilledIcon,
-                aria-hidden={true}
+            }}
-                width={NAV_ICON_WIDTH}
-              />
-            }
-            iconFilled={
-              <MagnifyingGlassFilled
-                style={t.atoms.text}
-                aria-hidden={true}
-                width={NAV_ICON_WIDTH}
-              />
-            }
-            label={_(msg`Explore`)}
           />
           <NavItem
+            label={l`Notifications`}
             href="/notifications"
             minimal={leftNavMinimal}
             count={numUnreadNotifications}
-            icon={
+            icons={{
-              <Bell
+              inactive: BellIcon,
-                aria-hidden={true}
+              active: BellFilledIcon,
-                width={NAV_ICON_WIDTH}
+            }}
-                style={t.atoms.text}
-              />
-            }
-            iconFilled={
-              <BellFilled
-                aria-hidden={true}
-                width={NAV_ICON_WIDTH}
-                style={t.atoms.text}
-              />
-            }
-            label={_(msg`Notifications`)}
           />
-          <ChatNavItem minimal={leftNavMinimal} />
           <NavItem
+            label={l`Chat`}
+            href="/messages"
+            minimal={leftNavMinimal}
+            count={
+              aa.flags.chatDisabled ? undefined : numUnreadMessages.numUnread
+            }
+            hasNew={!aa.flags.chatDisabled && numUnreadMessages.hasNew}
+            icons={{
+              inactive: MessageIcon,
+              active: MessageFilledIcon,
+            }}
+          />
+          <NavItem
+            label={l`Feeds`}
             href="/feeds"
             minimal={leftNavMinimal}
-            icon={
+            icons={{
-              <Hashtag
+              inactive: HashtagIcon,
-                style={t.atoms.text}
+              active: HashtagFilledIcon,
-                aria-hidden={true}
+            }}
-                width={NAV_ICON_WIDTH}
-              />
-            }
-            iconFilled={
-              <HashtagFilled
-                style={t.atoms.text}
-                aria-hidden={true}
-                width={NAV_ICON_WIDTH}
-              />
-            }
-            label={_(msg`Feeds`)}
           />
           <NavItem
+            label={l`Lists`}
             href="/lists"
             minimal={leftNavMinimal}
-            icon={
+            icons={{
-              <List
+              inactive: ListIcon,
-                style={t.atoms.text}
+              active: ListFilledIcon,
-                aria-hidden={true}
+            }}
-                width={NAV_ICON_WIDTH}
-              />
-            }
-            iconFilled={
-              <ListFilled
-                style={t.atoms.text}
-                aria-hidden={true}
-                width={NAV_ICON_WIDTH}
-              />
-            }
-            label={_(msg`Lists`)}
           />
           <NavItem
+            label={l({
+              message: 'Saved',
+              context: 'link to bookmarks screen',
+            })}
             href="/saved"
             minimal={leftNavMinimal}
-            icon={
+            icons={{
-              <Bookmark
+              inactive: BookmarkIcon,
-                style={t.atoms.text}
+              active: BookmarkFilledIcon,
-                aria-hidden={true}
+            }}
-                width={NAV_ICON_WIDTH}
-              />
-            }
-            iconFilled={
-              <BookmarkFilled
-                style={t.atoms.text}
-                aria-hidden={true}
-                width={NAV_ICON_WIDTH}
-              />
-            }
-            label={_(
-              msg({
-                message: 'Saved',
-                context: 'link to bookmarks screen',
-              }),
-            )}
           />
           <NavItem
-            href={currentAccount ? makeProfileLink(currentAccount) : '/'}
+            label={l`Profile`}
+            href={makeProfileLink(currentAccount!)}
             minimal={leftNavMinimal}
-            icon={
+            icons={{
-              <UserCircle
+              inactive: UserCircleIcon,
-                aria-hidden={true}
+              active: UserCircleFilledIcon,
-                width={NAV_ICON_WIDTH}
+            }}
-                style={t.atoms.text}
-              />
-            }
-            iconFilled={
-              <UserCircleFilled
-                aria-hidden={true}
-                width={NAV_ICON_WIDTH}
-                style={t.atoms.text}
-              />
-            }
-            label={_(msg`Profile`)}
           />
           <NavItem
+            label={l`Settings`}
             href="/settings"
             minimal={leftNavMinimal}
-            icon={
+            icons={{
-              <Settings
+              inactive: SettingsIcon,
-                aria-hidden={true}
+              active: SettingsFilledIcon,
-                width={NAV_ICON_WIDTH}
+            }}
-                style={t.atoms.text}
-              />
-            }
-            iconFilled={
-              <SettingsFilled
-                aria-hidden={true}
-                width={NAV_ICON_WIDTH}
-                style={t.atoms.text}
-              />
-            }
-            label={_(msg`Settings`)}
           />
 
           <ComposeBtn minimal={leftNavMinimal} />
@@ -843,31 +747,11 @@ export function DesktopLeftNav({routeName}: {routeName: string}) {
 
 const styles = StyleSheet.create({
   leftNav: {
-    ...a.fixed,
-    top: 0,
-    paddingTop: 10,
-    paddingBottom: 10,
     left: '50%',
-    width: 240,
+    width: LEFT_NAV_STANDARD_WIDTH,
     // @ts-expect-error web only
     maxHeight: '100vh',
     overflowY: 'auto',
     scrollbarWidth: 'thin',
   },
-  leftNavWide: {
-    width: 245,
-  },
-  leftNavMinimal: {
-    height: '100%',
-    width: 86,
-    alignItems: 'center',
-    ...web({overflowX: 'hidden'}),
-  },
-  backBtn: {
-    position: 'absolute',
-    top: 12,
-    right: 12,
-    width: 30,
-    height: 30,
-  },
 })