Fix up hide/show toggle state, WITH broadcast hacK

src/screens/Settings/ContentAndMediaSettings.tsx

@@ -9,7 +9,10 @@ import {
   useInAppBrowser,
   useSetInAppBrowser,
 } from '#/state/preferences/in-app-browser'
-import {useTrendingTopicsSidebarSetting} from '#/state/trending'
+import {
+  useTrendingSettings,
+  useTrendingSettingsApi,
+} from '#/state/preferences/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'
@@ -31,7 +34,8 @@ export function ContentAndMediaSettingsScreen({}: Props) {
   const setAutoplayDisabledPref = useSetAutoplayDisabled()
   const inAppBrowserPref = useInAppBrowser()
   const setUseInAppBrowser = useSetInAppBrowser()
-  const [showTrending, setShowTrending] = useTrendingTopicsSidebarSetting()
+  const {trendingSidebarHidden} = useTrendingSettings()
+  const {setTrendingSidebarHidden} = useTrendingSettingsApi()
 
   return (
     <Layout.Screen>
@@ -113,8 +117,8 @@ export function ContentAndMediaSettingsScreen({}: Props) {
               <Toggle.Item
                 name="show_trending_topics"
                 label={_(msg`Show trending topics in your sidebar`)}
-                value={showTrending}
+                value={!trendingSidebarHidden}
-                onChange={value => setShowTrending(value)}>
+                onChange={value => setTrendingSidebarHidden(!value)}>
                 <SettingsList.Item>
                   <SettingsList.ItemIcon icon={Graph} />
                   <SettingsList.ItemText>

src/state/persisted/index.web.ts

@@ -62,8 +62,10 @@ export async function write<K extends keyof Schema>(
     [key]: value,
   })
   writeToStorage(_state)
-  broadcast.postMessage({event: {type: UPDATE_EVENT, key}})
+  setTimeout(() => {
-  broadcast.postMessage({event: UPDATE_EVENT}) // Backcompat while upgrading
+    broadcast.postMessage({event: {type: UPDATE_EVENT, key}})
+    broadcast.postMessage({event: UPDATE_EVENT}) // Backcompat while upgrading
+  }, 0)
 }
 write satisfies PersistedApi['write']
 

src/state/persisted/schema.ts

@@ -125,7 +125,7 @@ const schema = z.object({
   subtitlesEnabled: z.boolean().optional(),
   /** @deprecated */
   mutedThreads: z.array(z.string()),
-  hideSidebarTrendingTopics: z.boolean().optional(),
+  trendingSidebarHidden: z.boolean().optional(),
 })
 export type Schema = z.infer<typeof schema>
 
@@ -171,6 +171,7 @@ export const defaults: Schema = {
   kawaii: false,
   hasCheckedForStarterPack: false,
   subtitlesEnabled: true,
+  trendingSidebarHidden: false,
 }
 
 export function tryParse(rawData: string): Schema | undefined {

src/state/preferences/index.tsx

@@ -10,6 +10,7 @@ import {Provider as KawaiiProvider} from './kawaii'
 import {Provider as LanguagesProvider} from './languages'
 import {Provider as LargeAltBadgeProvider} from './large-alt-badge'
 import {Provider as SubtitlesProvider} from './subtitles'
+import {Provider as TrendingSettingsProvider} from './trending'
 import {Provider as UsedStarterPacksProvider} from './used-starter-packs'
 
 export {
@@ -39,7 +40,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
                   <AutoplayProvider>
                     <UsedStarterPacksProvider>
                       <SubtitlesProvider>
-                        <KawaiiProvider>{children}</KawaiiProvider>
+                        <TrendingSettingsProvider>
+                          <KawaiiProvider>{children}</KawaiiProvider>
+                        </TrendingSettingsProvider>
                       </SubtitlesProvider>
                     </UsedStarterPacksProvider>
                   </AutoplayProvider>

src/state/preferences/trending.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+
+import * as persisted from '#/state/persisted'
+
+type StateContext = {
+  trendingSidebarHidden: persisted.Schema['trendingSidebarHidden']
+}
+type ApiContext = {
+  setTrendingSidebarHidden(
+    hidden: Exclude<persisted.Schema['trendingSidebarHidden'], undefined>,
+  ): void
+}
+
+const StateContext = React.createContext<StateContext>({
+  trendingSidebarHidden: persisted.defaults.trendingSidebarHidden,
+})
+const ApiContext = React.createContext<ApiContext>({
+  setTrendingSidebarHidden() {},
+})
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const [trendingSidebarHidden, _setTrendingSidebarHidden] = React.useState(
+    () => {
+      return Boolean(persisted.get('trendingSidebarHidden'))
+    },
+  )
+
+  const setTrendingSidebarHidden = React.useCallback<
+    ApiContext['setTrendingSidebarHidden']
+  >(
+    hidden => {
+      _setTrendingSidebarHidden(hidden)
+      persisted.write('trendingSidebarHidden', hidden)
+    },
+    [_setTrendingSidebarHidden],
+  )
+
+  React.useEffect(() => {
+    return persisted.onUpdate('trendingSidebarHidden', hidden => {
+      _setTrendingSidebarHidden(Boolean(hidden))
+    })
+  }, [_setTrendingSidebarHidden])
+
+  const state = React.useMemo(
+    () => ({trendingSidebarHidden}),
+    [trendingSidebarHidden],
+  )
+  const api = React.useMemo(
+    () => ({setTrendingSidebarHidden}),
+    [setTrendingSidebarHidden],
+  )
+
+  return (
+    <StateContext.Provider value={state}>
+      <ApiContext.Provider value={api}>{children}</ApiContext.Provider>
+    </StateContext.Provider>
+  )
+}
+
+export function useTrendingSettings() {
+  return React.useContext(StateContext)
+}
+
+export function useTrendingSettingsApi() {
+  return React.useContext(ApiContext)
+}

src/state/trending.ts

@@ -1,28 +0,0 @@
-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

@@ -5,8 +5,11 @@ import {useLingui} from '@lingui/react'
 import {FEEDBACK_FORM_URL, HELP_DESK_URL} from '#/lib/constants'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {useKawaiiMode} from '#/state/preferences/kawaii'
+import {
+  useTrendingSettings,
+  useTrendingSettingsApi,
+} from '#/state/preferences/trending'
 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'
@@ -116,9 +119,10 @@ function TrendingTopics() {
   const {_} = useLingui()
   const trendingPrompt = Prompt.usePromptControl()
 
-  const [showTrending, setShowTrending] = useTrendingTopicsSidebarSetting()
+  const {trendingSidebarHidden} = useTrendingSettings()
+  const {setTrendingSidebarHidden} = useTrendingSettingsApi()
 
-  return showTrending ? (
+  return trendingSidebarHidden ? null : (
     <>
       <View style={[a.gap_md]}>
         <View style={[a.flex_row, a.align_center, a.gap_xs]}>
@@ -168,9 +172,9 @@ 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={() => setShowTrending(false)}
+        onConfirm={() => setTrendingSidebarHidden(true)}
       />
       <Divider />
     </>
-  ) : null
+  )
 }