5 files changed, 72 insertions, 8 deletions
diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx
index bdd64807e..2ecdbaab2 100644
--- a/src/view/shell/Drawer.tsx
+++ b/src/view/shell/Drawer.tsx
@@ -28,6 +28,7 @@ import {
   MagnifyingGlassIcon2Solid,
   MoonIcon,
   UserIconSolid,
+  HandIcon,
 } from 'lib/icons'
 import {UserAvatar} from 'view/com/util/UserAvatar'
 import {Text} from 'view/com/util/text/Text'
@@ -94,6 +95,12 @@ export const DrawerContent = observer(() => {
     onPressTab('MyProfile')
   }, [onPressTab])
 
+  const onPressModeration = React.useCallback(() => {
+    track('Menu:ItemClicked', {url: 'Moderation'})
+    navigation.navigate('Moderation')
+    store.shell.closeDrawer()
+  }, [navigation, track, store.shell])
+
   const onPressSettings = React.useCallback(() => {
     track('Menu:ItemClicked', {url: 'Settings'})
     navigation.navigate('Settings')
@@ -215,13 +222,30 @@ export const DrawerContent = observer(() => {
             }
             label="Notifications"
             accessibilityLabel="Notifications"
-            accessibilityHint={`${store.me.notifications.unreadCountLabel} unread`}
+            accessibilityHint={
+              notifications.unreadCountLabel === ''
+                ? ''
+                : `${notifications.unreadCountLabel} unread`
+            }
             count={notifications.unreadCountLabel}
             bold={isAtNotifications}
             onPress={onPressNotifications}
           />
           <MenuItem
             icon={
+              <HandIcon
+                strokeWidth={5}
+                style={pal.text as FontAwesomeIconStyle}
+                size={24}
+              />
+            }
+            label="Moderation"
+            accessibilityLabel="Moderation"
+            accessibilityHint=""
+            onPress={onPressModeration}
+          />
+          <MenuItem
+            icon={
               isAtMyProfile ? (
                 <UserIconSolid
                   style={pal.text as StyleProp<ViewStyle>}
@@ -404,6 +428,7 @@ const styles = StyleSheet.create({
     flex: 1,
     paddingTop: 20,
     paddingBottom: 50,
+    maxWidth: 300,
   },
   viewDarkMode: {
     backgroundColor: '#1B1919',
diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx
index c11a0128c..ef9499f9f 100644
--- a/src/view/shell/bottom-bar/BottomBar.tsx
+++ b/src/view/shell/bottom-bar/BottomBar.tsx
@@ -38,6 +38,7 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
     useNavigationTabState()
 
   const {footerMinimalShellTransform} = useMinimalShellMode()
+  const {notifications} = store.me
 
   const onPressTab = React.useCallback(
     (tab: string) => {
@@ -138,11 +139,15 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
           )
         }
         onPress={onPressNotifications}
-        notificationCount={store.me.notifications.unreadCountLabel}
+        notificationCount={notifications.unreadCountLabel}
         accessible={true}
         accessibilityRole="tab"
         accessibilityLabel="Notifications"
-        accessibilityHint={`${store.me.notifications.unreadCountLabel} unread`}
+        accessibilityHint={
+          notifications.unreadCountLabel === ''
+            ? ''
+            : `${notifications.unreadCountLabel} unread`
+        }
       />
       <Btn
         testID="bottomBarProfileBtn"
diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx
index ca6330304..ba48dd2ae 100644
--- a/src/view/shell/desktop/LeftNav.tsx
+++ b/src/view/shell/desktop/LeftNav.tsx
@@ -29,6 +29,7 @@ import {
   CogIcon,
   CogIconSolid,
   ComposeIcon2,
+  HandIcon,
 } from 'lib/icons'
 import {getCurrentRoute, isTab, isStateAtTabRoot} from 'lib/routes/helpers'
 import {NavigationProp} from 'lib/routes/types'
@@ -203,6 +204,24 @@ export const DesktopLeftNav = observer(function DesktopLeftNav() {
         }
         label="Notifications"
       />
+      <NavItem
+        href="/moderation"
+        icon={
+          <HandIcon
+            strokeWidth={5.5}
+            style={pal.text as FontAwesomeIconStyle}
+            size={24}
+          />
+        }
+        iconFilled={
+          <FontAwesomeIcon
+            icon="hand"
+            style={pal.text as FontAwesomeIconStyle}
+            size={20}
+          />
+        }
+        label="Moderation"
+      />
       {store.session.hasSession && (
         <NavItem
           href={`/profile/${store.me.handle}`}
@@ -279,7 +298,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    width: 138,
+    width: 140,
     borderRadius: 24,
     paddingVertical: 10,
     paddingHorizontal: 16,
diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx
index d6663ce3d..4fae64fef 100644
--- a/src/view/shell/desktop/RightNav.tsx
+++ b/src/view/shell/desktop/RightNav.tsx
@@ -11,13 +11,14 @@ import {s} from 'lib/styles'
 import {useStores} from 'state/index'
 import {pluralize} from 'lib/strings/helpers'
 import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
-import {MoonIcon} from 'lib/icons'
+import {MoonIcon, SunIcon} from 'lib/icons'
 import {formatCount} from 'view/com/util/numeric/format'
 
 export const DesktopRightNav = observer(function DesktopRightNav() {
   const store = useStores()
   const pal = usePalette('default')
   const mode = useColorSchemeStyle('Light', 'Dark')
+  const otherMode = mode === 'Dark' ? 'Light' : 'Dark'
 
   const onDarkmodePress = React.useCallback(() => {
     store.shell.setDarkMode(!store.shell.darkMode)
@@ -71,10 +72,14 @@ export const DesktopRightNav = observer(function DesktopRightNav() {
               : 'Sets display to dark mode'
           }>
           <View style={[pal.viewLight, styles.darkModeToggleIcon]}>
-            <MoonIcon size={18} style={pal.textLight} />
+            {mode === 'Dark' ? (
+              <SunIcon size={18} style={pal.textLight} />
+            ) : (
+              <MoonIcon size={18} style={pal.textLight} />
+            )}
           </View>
           <Text type="sm" style={pal.textLight}>
-            {mode} mode
+            {otherMode} mode
           </Text>
         </TouchableOpacity>
       </View>
diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx
index 349376436..68ce370ed 100644
--- a/src/view/shell/index.web.tsx
+++ b/src/view/shell/index.web.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useEffect} from 'react'
 import {observer} from 'mobx-react-lite'
 import {View, StyleSheet, TouchableOpacity} from 'react-native'
 import {useStores} from 'state/index'
@@ -14,11 +14,21 @@ import {RoutesContainer, FlatNavigator} from '../../Navigation'
 import {DrawerContent} from './Drawer'
 import {useWebMediaQueries} from '../../lib/hooks/useWebMediaQueries'
 import {BottomBarWeb} from './bottom-bar/BottomBarWeb'
+import {useNavigation} from '@react-navigation/native'
+import {NavigationProp} from 'lib/routes/types'
 
 const ShellInner = observer(() => {
   const store = useStores()
   const {isDesktop} = useWebMediaQueries()
 
+  const navigator = useNavigation<NavigationProp>()
+
+  useEffect(() => {
+    navigator.addListener('state', () => {
+      store.shell.closeAnyActiveElement()
+    })
+  }, [navigator, store.shell])
+
   return (
     <>
       <View style={s.hContentRegion}>