Add to settings, abstract state, not updating in tab

src/screens/Settings/ContentAndMediaSettings.tsx

@@ -9,6 +9,7 @@ import {
   useInAppBrowser,
   useSetInAppBrowser,
 } from '#/state/preferences/in-app-browser'
+import {useTrendingTopicsSidebarSetting} from '#/state/trending'
 import * as SettingsList from '#/screens/Settings/components/SettingsList'
 import * as Toggle from '#/components/forms/Toggle'
 import {Bubbles_Stroke2_Corner2_Rounded as BubblesIcon} from '#/components/icons/Bubble'
@@ -16,6 +17,7 @@ import {Hashtag_Stroke2_Corner0_Rounded as HashtagIcon} from '#/components/icons
 import {Home_Stroke2_Corner2_Rounded as HomeIcon} from '#/components/icons/Home'
 import {Macintosh_Stroke2_Corner2_Rounded as MacintoshIcon} from '#/components/icons/Macintosh'
 import {Play_Stroke2_Corner2_Rounded as PlayIcon} from '#/components/icons/Play'
+import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending2'
 import {Window_Stroke2_Corner2_Rounded as WindowIcon} from '#/components/icons/Window'
 import * as Layout from '#/components/Layout'
 
@@ -29,6 +31,7 @@ export function ContentAndMediaSettingsScreen({}: Props) {
   const setAutoplayDisabledPref = useSetAutoplayDisabled()
   const inAppBrowserPref = useInAppBrowser()
   const setUseInAppBrowser = useSetInAppBrowser()
+  const [showTrending, setShowTrending] = useTrendingTopicsSidebarSetting()
 
   return (
     <Layout.Screen>
@@ -104,6 +107,24 @@ export function ContentAndMediaSettingsScreen({}: Props) {
               <Toggle.Platform />
             </SettingsList.Item>
           </Toggle.Item>
+          {!isNative && (
+            <>
+              <SettingsList.Divider />
+              <Toggle.Item
+                name="show_trending_topics"
+                label={_(msg`Show trending topics in your sidebar`)}
+                value={showTrending}
+                onChange={value => setShowTrending(value)}>
+                <SettingsList.Item>
+                  <SettingsList.ItemIcon icon={Graph} />
+                  <SettingsList.ItemText>
+                    <Trans>Show trending topics in your sidebar</Trans>
+                  </SettingsList.ItemText>
+                  <Toggle.Platform />
+                </SettingsList.Item>
+              </Toggle.Item>
+            </>
+          )}
         </SettingsList.Container>
       </Layout.Content>
     </Layout.Screen>

src/state/trending.ts

@@ -0,0 +1,28 @@
+import React from 'react'
+
+import * as persisted from '#/state/persisted'
+
+// TODO only updates in other tabs, not current one
+export function useTrendingTopicsSidebarSetting() {
+  const [_show, setShow] = React.useState(
+    () => !persisted.get('hideSidebarTrendingTopics'),
+  )
+
+  const set = React.useCallback(
+    (show: boolean) => {
+      setShow(show)
+      persisted.write('hideSidebarTrendingTopics', !show)
+    },
+    [setShow],
+  )
+
+  // persisted.write('hideSidebarTrendingTopics', undefined)
+
+  React.useEffect(() => {
+    return persisted.onUpdate('hideSidebarTrendingTopics', value => {
+      setShow(!value)
+    })
+  }, [setShow])
+
+  return [_show, set] as const
+}

src/view/shell/desktop/RightNav.tsx

@@ -1,13 +1,12 @@
-import React from 'react'
 import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {FEEDBACK_FORM_URL, HELP_DESK_URL} from '#/lib/constants'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import * as persisted from '#/state/persisted'
 import {useKawaiiMode} from '#/state/preferences/kawaii'
 import {useSession} from '#/state/session'
+import {useTrendingTopicsSidebarSetting} from '#/state/trending'
 import {DesktopFeeds} from '#/view/shell/desktop/Feeds'
 import {DesktopSearch} from '#/view/shell/desktop/Search'
 import {atoms as a, useGutters, useTheme, web} from '#/alf'
@@ -117,22 +116,7 @@ function TrendingTopics() {
   const {_} = useLingui()
   const trendingPrompt = Prompt.usePromptControl()
 
-  const [showTrending, setShowTrending] = React.useState(
-    () => !persisted.get('hideSidebarTrendingTopics'),
-  )
-
-  const onConfirmHideTrending = React.useCallback(() => {
-    setShowTrending(false)
-    persisted.write('hideSidebarTrendingTopics', true)
-  }, [setShowTrending])
-
-  // persisted.write('hideSidebarTrendingTopics', undefined)
-
-  React.useEffect(() => {
-    return persisted.onUpdate('hideSidebarTrendingTopics', value => {
-      setShowTrending(!value)
-    })
-  }, [setShowTrending])
+  const [showTrending, setShowTrending] = useTrendingTopicsSidebarSetting()
 
   return showTrending ? (
     <>
@@ -184,7 +168,7 @@ function TrendingTopics() {
           msg`This is a device setting, and will apply to all accounts on this device. You can update this later from your settings.`,
         )}
         confirmButtonCta={_(msg`Hide`)}
-        onConfirm={onConfirmHideTrending}
+        onConfirm={() => setShowTrending(false)}
       />
       <Divider />
     </>