Theme Preferences (#418)

#418

* Theme ID in preferences changes

* Changeset added

.changeset/selfish-adults-relate.md

@@ -0,0 +1,5 @@
+---
+'mexit-webapp': patch
+---
+
+Theme Preferences Changes

apps/webapp/src/App.tsx

@@ -21,15 +21,16 @@ const FORCE_LOGOUT_VERSION = '0.21.0'
 
 const AutoThemeSwitch = () => {
   const theme = useUserPreferenceStore((state) => state.theme)
+  const hasHydrated = useUserPreferenceStore((s) => s._hasHydrated)
   const { preferences, changeTheme } = useThemeContext()
 
   useEffect(() => {
-    if (theme) {
+    if (theme && hasHydrated) {
       if (theme !== preferences) {
         changeTheme(theme.themeId, theme.mode)
       }
     }
-  }, [theme])
+  }, [theme, hasHydrated])
 
   return null
 }

apps/webapp/src/Components/Init.tsx

@@ -14,7 +14,7 @@ const Init = () => {
   const { initCognito } = useAuth()
   useEffect(() => {
     API.init()
-    console.log('API_BASE_URLS', { config })
+    // console.log('API_BASE_URLS', { config })
     const initUserAndApp = () => {
       initCognito(
         {

apps/webapp/src/Hooks/useInitLoader.ts

@@ -46,6 +46,7 @@ export const useInitLoader = () => {
   const contentStoreHydrated = useContentStore((store) => store._hasHydrated)
   const initHighlightBlockMap = useHighlightStore((store) => store.initHighlightBlockMap)
   const userPrefHydrated = useUserPreferenceStore((s) => s._hasHydrated)
+  const linksStoreHydrated = useLinkStore((s) => s._hasHydrated)
 
   const { getAllSnippetsByWorkspace } = useApi()
   const { getAllNamespaces } = useNamespaceApi()
@@ -108,9 +109,9 @@ export const useInitLoader = () => {
           archive: useDataStore.getState().archive,
           sharedNodes: useDataStore.getState().sharedNodes,
           snippets: useSnippetStore.getState().snippets,
-          links: useLinkStore.getState().links,
+          links: useLinkStore.getState().links ?? [],
           contents: useContentStore.getState().contents,
-          highlights: useHighlightStore.getState().highlights,
+          highlights: useHighlightStore.getState().highlights ?? [],
           prompts: usePromptStore.getState().getAllPrompts()
         }
 
@@ -126,7 +127,8 @@ export const useInitLoader = () => {
       snippetHydrated &&
       dataStoreHydrated &&
       contentStoreHydrated &&
-      highlightStoreHydrated
+      highlightStoreHydrated &&
+      linksStoreHydrated
     ) {
       startWorkers()
         .then(async () => {
@@ -145,5 +147,13 @@ export const useInitLoader = () => {
           console.error('InitSearchIndexError', { error })
         })
     }
-  }, [initalizeApp, snippetHydrated, dataStoreHydrated, contentStoreHydrated])
+  }, [
+    initalizeApp,
+    linksStoreHydrated,
+    highlightStoreHydrated,
+    snippetHydrated,
+    userPrefHydrated,
+    dataStoreHydrated,
+    contentStoreHydrated
+  ])
 }

apps/webapp/src/Hooks/useSyncUserPreferences.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
 
-import { mergeUserPreferences, useAuthStore , userPreferenceStore as useUserPreferenceStore } from '@mexit/core'
+import { mergeUserPreferences, useAuthStore, userPreferenceStore as useUserPreferenceStore } from '@mexit/core'
 
 import { useUserService } from './API/useUserAPI'
 

libs/core/src/Stores/preference.store.ts

@@ -27,7 +27,7 @@ export interface UserPreferenceStore extends UserPreferences {
 
 export const preferenceStoreConfig = (set, get): UserPreferenceStore => ({
   version: 'unset',
-  theme: { themeId: 'xeM', mode: 'dark' },
+  theme: { themeId: 'xem', mode: 'dark' },
   lastOpenedNotes: {},
   lastUsedSnippets: {},
   space: {},
@@ -50,7 +50,6 @@ export const preferenceStoreConfig = (set, get): UserPreferenceStore => ({
       version: 'unset',
       activeNamespace: undefined,
       space: {},
-      theme: { themeId: 'xeM', mode: 'dark' },
       lastOpenedNotes: {},
       lastUsedSnippets: {},
       smartCaptureExcludedFields: {}
@@ -138,6 +137,7 @@ export const mergeUserPreferences = (local: UserPreferences, remote: UserPrefere
   })
 
   const mergedSpacePreferences = merge(local.space, remote.space ?? {})
+  const theme = remote.theme ?? local.theme
 
   // mog('mergedLastOpenedNotes', { localLastOpenedNotes, mergedLastOpenedNotes, local, remote })
   return {
@@ -148,7 +148,10 @@ export const mergeUserPreferences = (local: UserPreferences, remote: UserPrefere
     lastOpenedNotes: getLimitedEntries({ ...local.lastOpenedNotes, ...mergedLastOpenedNotes }),
     lastUsedSnippets: { ...local.lastUsedSnippets, ...mergedLastUsedSnippets },
     space: mergedSpacePreferences,
-    theme: remote.theme ?? local.theme,
+    theme: {
+      ...theme,
+      themeId: theme.themeId.toLowerCase()
+    },
     smartCaptureExcludedFields: local.smartCaptureExcludedFields
   }
 }

libs/core/src/Utils/helpers.ts

@@ -14,7 +14,7 @@ export function wrapErr<T>(f: (result: T) => void) {
 
 export const defaultContent: NodeContent = {
   type: 'init',
-  content: [{ type: ELEMENT_PARAGRAPH, children: [{ text: 'hello world' }] }],
+  content: [{ type: ELEMENT_PARAGRAPH, children: [{ text: '' }] }],
   version: -1
 }