🦉 Feature: configurable preset for users:

- twitter emoji
 - useSystemTheme
 - themeId

src/app/hooks/useClientConfig.ts

@@ -18,6 +18,8 @@ export type ClientConfig = {
   };
 
   hashRouter?: HashRouterConfig;
+
+  defaultSettings?: Record<string, unknown>;
 };
 
 const ClientConfigContext = createContext<ClientConfig | null>(null);

src/app/pages/App.tsx

@@ -12,6 +12,7 @@ import { FeatureCheck } from './FeatureCheck';
 import { createRouter } from './Router';
 import { ScreenSizeProvider, useScreenSize } from '../hooks/useScreenSize';
 import { useCompositionEndTracking } from '../hooks/useComposingCheck';
+import { ConfigSettingsApply } from '../../owl/components/ConfigSettingsApply';
 
 const queryClient = new QueryClient();
 
@@ -37,6 +38,7 @@ function App() {
                   <ClientConfigProvider value={clientConfig}>
                     <QueryClientProvider client={queryClient}>
                       <JotaiProvider>
+                        <ConfigSettingsApply />
                         <RouterProvider router={createRouter(clientConfig, screenSize)} />
                       </JotaiProvider>
                       <ReactQueryDevtools initialIsOpen={false} />

src/app/state/settings.ts

@@ -83,11 +83,12 @@ const defaultSettings: Settings = {
   developerTools: false,
 };
 
-export const getSettings = () => {
+export const getSettings = (configDefaults?: Partial<Settings>) => {
   const settings = localStorage.getItem(STORAGE_KEY);
-  if (settings === null) return defaultSettings;
+  if (settings === null) return { ...defaultSettings, ...configDefaults };
   return {
     ...defaultSettings,
+    ...configDefaults,
     ...(JSON.parse(settings) as Settings),
   };
 };

src/owl/components/ConfigSettingsApply.tsx

@@ -0,0 +1,18 @@
+import { useEffect, useRef } from 'react';
+import { useAtom } from 'jotai';
+import { useClientConfig } from '../../app/hooks/useClientConfig';
+import { settingsAtom, getSettings, Settings } from '../../app/state/settings';
+
+export function ConfigSettingsApply() {
+  const { defaultSettings: configDefaults } = useClientConfig();
+  const [, setSettings] = useAtom(settingsAtom);
+  const applied = useRef(false);
+
+  useEffect(() => {
+    if (applied.current || !configDefaults) return;
+    applied.current = true;
+    setSettings(getSettings(configDefaults as Partial<Settings>));
+  }, [configDefaults, setSettings]);
+
+  return null;
+}