ALF content language dialog (#9471)

Co-authored-by: Eric Bailey <git@esb.lol>

src/state/preferences/languages.tsx

@@ -11,9 +11,7 @@ type StateContext = persisted.Schema['languagePrefs']
 type ApiContext = {
   setPrimaryLanguage: (code2: string) => void
   setPostLanguage: (commaSeparatedLangCodes: string) => void
-  setContentLanguage: (code2: string) => void
-  toggleContentLanguage: (code2: string) => void
-  togglePostLanguage: (code2: string) => void
+  setContentLanguages: (code2s: string[]) => void
   savePostLanguageToHistory: () => void
   setAppLanguage: (code2: AppLanguage) => void
 }
@@ -25,16 +23,14 @@ stateContext.displayName = 'LanguagePrefsStateContext'
 const apiContext = React.createContext<ApiContext>({
   setPrimaryLanguage: (_: string) => {},
   setPostLanguage: (_: string) => {},
-  setContentLanguage: (_: string) => {},
-  toggleContentLanguage: (_: string) => {},
-  togglePostLanguage: (_: string) => {},
+  setContentLanguages: (_: string[]) => {},
   savePostLanguageToHistory: () => {},
   setAppLanguage: (_: AppLanguage) => {},
 })
 apiContext.displayName = 'LanguagePrefsApiContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const [state, setState] = React.useState(persisted.get('languagePrefs'))
+  const [state, setState] = React.useState(() => persisted.get('languagePrefs'))
 
   const setStateWrapped = React.useCallback(
     (fn: SetStateCb) => {
@@ -59,43 +55,8 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
       setPostLanguage(commaSeparatedLangCodes: string) {
         setStateWrapped(s => ({...s, postLanguage: commaSeparatedLangCodes}))
       },
-      setContentLanguage(code2: string) {
-        setStateWrapped(s => ({...s, contentLanguages: [code2]}))
-      },
-      toggleContentLanguage(code2: string) {
-        setStateWrapped(s => {
-          const exists = s.contentLanguages.includes(code2)
-          const next = exists
-            ? s.contentLanguages.filter(lang => lang !== code2)
-            : s.contentLanguages.concat(code2)
-          return {
-            ...s,
-            contentLanguages: next,
-          }
-        })
-      },
-      togglePostLanguage(code2: string) {
-        setStateWrapped(s => {
-          const exists = hasPostLanguage(state.postLanguage, code2)
-          let next = s.postLanguage
-
-          if (exists) {
-            next = toPostLanguages(s.postLanguage)
-              .filter(lang => lang !== code2)
-              .join(',')
-          } else {
-            // sort alphabetically for deterministic comparison in context menu
-            next = toPostLanguages(s.postLanguage)
-              .concat([code2])
-              .sort((a, b) => a.localeCompare(b))
-              .join(',')
-          }
-
-          return {
-            ...s,
-            postLanguage: next,
-          }
-        })
+      setContentLanguages(code2s: string[]) {
+        setStateWrapped(s => ({...s, contentLanguages: code2s}))
       },
       /**
        * Saves whatever language codes are currently selected into a history array,
@@ -120,7 +81,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
         setStateWrapped(s => ({...s, appLanguage: code2}))
       },
     }),
-    [state, setStateWrapped],
+    [setStateWrapped],
   )
 
   return (

src/state/shell/color-mode.tsx

@@ -20,8 +20,12 @@ const setContext = React.createContext<SetContext>({} as SetContext)
 setContext.displayName = 'ColorModeSetContext'
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
-  const [colorMode, setColorMode] = React.useState(persisted.get('colorMode'))
-  const [darkTheme, setDarkTheme] = React.useState(persisted.get('darkTheme'))
+  const [colorMode, setColorMode] = React.useState(() =>
+    persisted.get('colorMode'),
+  )
+  const [darkTheme, setDarkTheme] = React.useState(() =>
+    persisted.get('darkTheme'),
+  )
 
   const stateContextValue = React.useMemo(
     () => ({