Fix up hide/show toggle state, WITH broadcast hacK

src/state/persisted/index.web.ts

@@ -63,8 +63,10 @@ export async function write<K extends keyof Schema>(
     [key]: value,
   })
   writeToStorage(_state)
-  broadcast.postMessage({event: {type: UPDATE_EVENT, key}})
-  broadcast.postMessage({event: UPDATE_EVENT}) // Backcompat while upgrading
+  setTimeout(() => {
+    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
-}