Clean up persisted code, add new setting

src/state/persisted/schema.ts

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

src/state/preferences/trending.tsx

@@ -3,51 +3,71 @@ import React from 'react'
 import * as persisted from '#/state/persisted'
 
 type StateContext = {
-  trendingSidebarHidden: persisted.Schema['trendingSidebarHidden']
+  trendingSidebarHidden: Exclude<
+    persisted.Schema['trendingSidebarHidden'],
+    undefined
+  >
+  trendingDiscoverHidden: Exclude<
+    persisted.Schema['trendingDiscoverHidden'],
+    undefined
+  >
 }
 type ApiContext = {
   setTrendingSidebarHidden(
     hidden: Exclude<persisted.Schema['trendingSidebarHidden'], undefined>,
   ): void
+  setTrendingDiscoverHidden(
+    hidden: Exclude<persisted.Schema['trendingDiscoverHidden'], undefined>,
+  ): void
 }
 
 const StateContext = React.createContext<StateContext>({
-  trendingSidebarHidden: persisted.defaults.trendingSidebarHidden,
+  trendingSidebarHidden: Boolean(persisted.defaults.trendingSidebarHidden),
+  trendingDiscoverHidden: Boolean(persisted.defaults.trendingDiscoverHidden),
 })
 const ApiContext = React.createContext<ApiContext>({
   setTrendingSidebarHidden() {},
+  setTrendingDiscoverHidden() {},
 })
 
-export function Provider({children}: React.PropsWithChildren<{}>) {
+function usePersistedBooleanValue<T extends keyof persisted.Schema>(key: T) {
-  const [trendingSidebarHidden, _setTrendingSidebarHidden] = React.useState(
+  const [value, _set] = React.useState(() => {
-    () => {
+    return Boolean(persisted.get(key))
-      return Boolean(persisted.get('trendingSidebarHidden'))
+  })
-    },
+  const set = React.useCallback<
-  )
+    (value: Exclude<persisted.Schema[T], undefined>) => void
-
-  const setTrendingSidebarHidden = React.useCallback<
-    ApiContext['setTrendingSidebarHidden']
   >(
     hidden => {
-      _setTrendingSidebarHidden(hidden)
+      _set(Boolean(hidden))
-      persisted.write('trendingSidebarHidden', hidden)
+      persisted.write(key, hidden)
     },
-    [_setTrendingSidebarHidden],
+    [key, _set],
   )
-
   React.useEffect(() => {
-    return persisted.onUpdate('trendingSidebarHidden', hidden => {
+    return persisted.onUpdate(key, hidden => {
-      _setTrendingSidebarHidden(Boolean(hidden))
+      _set(Boolean(hidden))
     })
-  }, [_setTrendingSidebarHidden])
+  }, [key, _set])
 
+  return [value, set] as const
+}
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const [trendingSidebarHidden, setTrendingSidebarHidden] =
+    usePersistedBooleanValue('trendingSidebarHidden')
+  const [trendingDiscoverHidden, setTrendingDiscoverHidden] =
+    usePersistedBooleanValue('trendingDiscoverHidden')
+
+  /*
+   * Context
+   */
   const state = React.useMemo(
-    () => ({trendingSidebarHidden}),
+    () => ({trendingSidebarHidden, trendingDiscoverHidden}),
-    [trendingSidebarHidden],
+    [trendingSidebarHidden, trendingDiscoverHidden],
   )
   const api = React.useMemo(
-    () => ({setTrendingSidebarHidden}),
+    () => ({setTrendingSidebarHidden, setTrendingDiscoverHidden}),
-    [setTrendingSidebarHidden],
+    [setTrendingSidebarHidden, setTrendingDiscoverHidden],
   )
 
   return (