fix: use computed for project meta

Signed-off-by: mertmit <mertmit99@gmail.com>

packages/nc-gui-v2/composables/useProject.ts

@@ -90,7 +90,7 @@ export function useProject(projectId?: MaybeRef<string>) {
     await $api.project.update(_projectId, data)
   }
 
-  function getProjectMeta() {
+  const projectMeta = computed(() => {
     try {
       return typeof project.value.meta === 'string' ? JSON.parse(project.value.meta) : project.value.meta
     } catch (e) {
@@ -104,7 +104,7 @@ export function useProject(projectId?: MaybeRef<string>) {
       tables.value = []
       projectMetaInfo.value = undefined
       projectRoles.value = {}
-  }
+    }
   })
 
   return {
@@ -121,6 +121,6 @@ export function useProject(projectId?: MaybeRef<string>) {
     isSharedBase,
     loadProjectMetaInfo,
     projectMetaInfo,
-    getProjectMeta,
+    projectMeta,
   }
 }

packages/nc-gui-v2/composables/useTheme/index.ts

@@ -12,38 +12,22 @@ const [setup, use] = useInjectionState((config?: Partial<ThemeConfig>) => {
   const primaryColor = useCssVar('--color-primary', typeof document !== 'undefined' ? document.documentElement : null)
   const accentColor = useCssVar('--color-accent', typeof document !== 'undefined' ? document.documentElement : null)
 
-  const { project, getProjectMeta, updateProject } = useProject()
+  const { project, projectMeta, updateProject } = useProject()
-
-  const route = useRoute()
 
   // set theme based on active project
   watch(project, () => {
     setTheme({
       primaryColor: themeV2Colors['royal-blue'].DEFAULT,
       accentColor: themeV2Colors.pink['500'],
-      ...getProjectMeta()?.theme,
+      ...projectMeta.value?.theme,
     })
   })
 
-  // set default theme for routes out of project
-  watch(
-    () => route,
-    (v) => {
-      if (!v.params?.projectId) {
-        setTheme({
-          primaryColor: themeV2Colors['royal-blue'].DEFAULT,
-          accentColor: themeV2Colors.pink['500'],
-        })
-      }
-    },
-    { deep: true },
-  )
-
   /** current theme config */
   const currentTheme = ref({
     primaryColor: themeV2Colors['royal-blue'].DEFAULT,
     accentColor: themeV2Colors.pink['500'],
-    ...getProjectMeta()?.theme,
+    ...projectMeta.value?.theme,
   })
 
   /** set initial config */
@@ -66,18 +50,15 @@ const [setup, use] = useInjectionState((config?: Partial<ThemeConfig>) => {
     }
 
     ConfigProvider.config({
-      theme: { ...currentTheme.value },
+      theme: currentTheme.value,
     })
   }
 
   async function saveTheme(theme: Partial<ThemeConfig>) {
-    const meta = getProjectMeta()
     await updateProject({
       meta: JSON.stringify({
-        ...meta,
+        ...projectMeta.value,
-        theme: {
+        theme,
-          ...theme,
-        },
       }),
     })
     setTheme(theme)