From 92dfccca25b09302c260a4f62f3a77a49549cd30 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 1 May 2024 19:09:38 +0100
Subject: [PATCH] Revert "Remove Moderation from sidebar"

This reverts commit 3bdd346d26a8211b7efe17786b269908e9dc7d20.
---
 src/view/screens/Settings/index.tsx | 86 ++++++++++++++---------------
 src/view/shell/Drawer.tsx           | 27 +++++++++
 src/view/shell/desktop/LeftNav.tsx  | 19 +++++++
 3 files changed, 89 insertions(+), 43 deletions(-)

diff --git a/src/view/screens/Settings/index.tsx b/src/view/screens/Settings/index.tsx
index a0e4ff60f0..68a3e215d3 100644
--- a/src/view/screens/Settings/index.tsx
+++ b/src/view/screens/Settings/index.tsx
@@ -501,49 +501,6 @@ export function SettingsScreen({}: Props) {
             <Trans>Accessibility</Trans>
           </Text>
         </TouchableOpacity>
-        <TouchableOpacity
-          testID="languageSettingsBtn"
-          style={[
-            styles.linkCard,
-            pal.view,
-            isSwitchingAccounts && styles.dimmed,
-          ]}
-          onPress={isSwitchingAccounts ? undefined : onPressLanguageSettings}
-          accessibilityRole="button"
-          accessibilityLabel={_(msg`Language settings`)}
-          accessibilityHint={_(msg`Opens configurable language settings`)}>
-          <View style={[styles.iconContainer, pal.btn]}>
-            <FontAwesomeIcon
-              icon="language"
-              style={pal.text as FontAwesomeIconStyle}
-            />
-          </View>
-          <Text type="lg" style={pal.text}>
-            <Trans>Languages</Trans>
-          </Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          testID="moderationBtn"
-          style={[
-            styles.linkCard,
-            pal.view,
-            isSwitchingAccounts && styles.dimmed,
-          ]}
-          onPress={
-            isSwitchingAccounts
-              ? undefined
-              : () => navigation.navigate('Moderation')
-          }
-          accessibilityRole="button"
-          accessibilityLabel={_(msg`Moderation settings`)}
-          accessibilityHint={_(msg`Opens moderation settings`)}>
-          <View style={[styles.iconContainer, pal.btn]}>
-            <HandIcon style={pal.text} size={18} strokeWidth={6} />
-          </View>
-          <Text type="lg" style={pal.text}>
-            <Trans>Moderation</Trans>
-          </Text>
-        </TouchableOpacity>
         <TouchableOpacity
           testID="preferencesHomeFeedButton"
           style={[
@@ -605,6 +562,49 @@ export function SettingsScreen({}: Props) {
             <Trans>My Saved Feeds</Trans>
           </Text>
         </TouchableOpacity>
+        <TouchableOpacity
+          testID="languageSettingsBtn"
+          style={[
+            styles.linkCard,
+            pal.view,
+            isSwitchingAccounts && styles.dimmed,
+          ]}
+          onPress={isSwitchingAccounts ? undefined : onPressLanguageSettings}
+          accessibilityRole="button"
+          accessibilityLabel={_(msg`Language settings`)}
+          accessibilityHint={_(msg`Opens configurable language settings`)}>
+          <View style={[styles.iconContainer, pal.btn]}>
+            <FontAwesomeIcon
+              icon="language"
+              style={pal.text as FontAwesomeIconStyle}
+            />
+          </View>
+          <Text type="lg" style={pal.text}>
+            <Trans>Languages</Trans>
+          </Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          testID="moderationBtn"
+          style={[
+            styles.linkCard,
+            pal.view,
+            isSwitchingAccounts && styles.dimmed,
+          ]}
+          onPress={
+            isSwitchingAccounts
+              ? undefined
+              : () => navigation.navigate('Moderation')
+          }
+          accessibilityRole="button"
+          accessibilityLabel={_(msg`Moderation settings`)}
+          accessibilityHint={_(msg`Opens moderation settings`)}>
+          <View style={[styles.iconContainer, pal.btn]}>
+            <HandIcon style={pal.text} size={18} strokeWidth={6} />
+          </View>
+          <Text type="lg" style={pal.text}>
+            <Trans>Moderation</Trans>
+          </Text>
+        </TouchableOpacity>
 
         <View style={styles.spacer20} />
 
diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx
index d8e604ec31..724f65883a 100644
--- a/src/view/shell/Drawer.tsx
+++ b/src/view/shell/Drawer.tsx
@@ -31,6 +31,7 @@ import {
   BellIcon,
   BellIconSolid,
   CogIcon,
+  HandIcon,
   HashtagIcon,
   HomeIcon,
   HomeIconSolid,
@@ -178,6 +179,12 @@ let DrawerContent = ({}: {}): React.ReactNode => {
     setDrawerOpen(false)
   }, [navigation, track, setDrawerOpen])
 
+  const onPressModeration = React.useCallback(() => {
+    track('Menu:ItemClicked', {url: 'Moderation'})
+    navigation.navigate('Moderation')
+    setDrawerOpen(false)
+  }, [navigation, track, setDrawerOpen])
+
   const onPressSettings = React.useCallback(() => {
     track('Menu:ItemClicked', {url: 'Settings'})
     navigation.navigate('Settings')
@@ -235,6 +242,7 @@ let DrawerContent = ({}: {}): React.ReactNode => {
               />
               <FeedsMenuItem isActive={isAtFeeds} onPress={onPressMyFeeds} />
               <ListsMenuItem onPress={onPressLists} />
+              <ModerationMenuItem onPress={onPressModeration} />
               <ProfileMenuItem
                 isActive={isAtMyProfile}
                 onPress={onPressProfile}
@@ -512,6 +520,25 @@ let ListsMenuItem = ({onPress}: {onPress: () => void}): React.ReactNode => {
 }
 ListsMenuItem = React.memo(ListsMenuItem)
 
+let ModerationMenuItem = ({
+  onPress,
+}: {
+  onPress: () => void
+}): React.ReactNode => {
+  const {_} = useLingui()
+  const pal = usePalette('default')
+  return (
+    <MenuItem
+      icon={<HandIcon strokeWidth={5} style={pal.text} size={24} />}
+      label={_(msg`Moderation`)}
+      accessibilityLabel={_(msg`Moderation`)}
+      accessibilityHint=""
+      onPress={onPress}
+    />
+  )
+}
+ModerationMenuItem = React.memo(ModerationMenuItem)
+
 let ProfileMenuItem = ({
   isActive,
   onPress,
diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx
index 91d20e089e..f94ed51b4a 100644
--- a/src/view/shell/desktop/LeftNav.tsx
+++ b/src/view/shell/desktop/LeftNav.tsx
@@ -28,6 +28,7 @@ import {
   CogIcon,
   CogIconSolid,
   ComposeIcon2,
+  HandIcon,
   HashtagIcon,
   HomeIcon,
   HomeIconSolid,
@@ -396,6 +397,24 @@ export function DesktopLeftNav() {
             }
             label={_(msg`Lists`)}
           />
+          <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 ? 23 : 26}
+              />
+            }
+            label={_(msg`Moderation`)}
+          />
           <NavItem
             href={currentAccount ? makeProfileLink(currentAccount) : '/'}
             icon={