From cb919a17e1a2fcf4917c6b370cfb58bfea07ea79 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 29 Aug 2022 17:50:43 +0300
Subject: [PATCH 1/9] fix: use theme primary for project color

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/composables/useProject.ts  |  1 +
 packages/nc-gui-v2/pages/index/index/[id].vue | 44 -------------------
 .../nc-gui-v2/pages/index/index/index.vue     |  5 +--
 3 files changed, 3 insertions(+), 47 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useProject.ts b/packages/nc-gui-v2/composables/useProject.ts
index f9128e9186..6af3e9de92 100644
--- a/packages/nc-gui-v2/composables/useProject.ts
+++ b/packages/nc-gui-v2/composables/useProject.ts
@@ -103,6 +103,7 @@ export function useProject(projectId?: MaybeRef<string>) {
 
   async function saveTheme(theme: Partial<ThemeConfig>) {
     await updateProject({
+      color: theme.primaryColor,
       meta: JSON.stringify({
         ...projectMeta.value,
         theme,
diff --git a/packages/nc-gui-v2/pages/index/index/[id].vue b/packages/nc-gui-v2/pages/index/index/[id].vue
index 9e0857d8f0..3e4c977c3b 100644
--- a/packages/nc-gui-v2/pages/index/index/[id].vue
+++ b/packages/nc-gui-v2/pages/index/index/[id].vue
@@ -2,7 +2,6 @@
 import type { Form } from 'ant-design-vue'
 import { message } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
-import tinycolor from 'tinycolor2'
 import {
   extractSdkResponseErrorMsg,
   navigateTo,
@@ -38,11 +37,9 @@ const form = ref<typeof Form>()
 
 const formState = reactive<Partial<ProjectType>>({
   title: '',
-  color: '#FFFFFF00',
 })
 
 const renameProject = async () => {
-  formState.color = formState.color === '#FFFFFF00' ? '' : formState.color
   try {
     await updateProject(formState)
 
@@ -55,7 +52,6 @@ const renameProject = async () => {
 // select and focus title field on load
 onMounted(async () => {
   formState.title = project.value.title as string
-  formState.color = project.value.color && tinycolor(project.value.color).isValid() ? project.value.color : '#FFFFFF00'
   await nextTick(() => {
     // todo: replace setTimeout and follow better approach
     setTimeout(() => {
@@ -98,27 +94,6 @@ onMounted(async () => {
         <a-input v-model:value="formState.title" name="title" class="nc-metadb-project-name" />
       </a-form-item>
 
-      <div class="flex items-center">
-        <span>Project color: </span>
-        <a-menu class="!border-0 !m-0 !p-0">
-          <a-sub-menu key="project-color">
-            <template #title>
-              <button type="button" class="color-selector" :style="{ 'background-color': formState.color }">
-                <MdiNull v-if="formState.color === '#FFFFFF00'" />
-              </button>
-            </template>
-            <template #expandIcon></template>
-            <GeneralColorPicker v-model="formState.color" name="color" class="nc-metadb-project-color" />
-          </a-sub-menu>
-        </a-menu>
-        <MdiClose
-          v-show="formState.color !== '#FFFFFF00'"
-          class="cursor-pointer"
-          :style="{ color: 'red' }"
-          @click="formState.color = '#FFFFFF00'"
-        />
-      </div>
-
       <div class="text-center">
         <button type="submit" class="submit">
           <span class="flex items-center gap-2">
@@ -156,23 +131,4 @@ onMounted(async () => {
     }
   }
 }
-
-:deep(.ant-menu-submenu-title) {
-  @apply !p-0 !mx-2;
-}
-
-.color-selector {
-  position: relative;
-  height: 32px;
-  width: 32px;
-  border-radius: 5px;
-  -webkit-text-stroke-width: 1px;
-  -webkit-text-stroke-color: white;
-  @apply flex text-gray-500 border-4 items-center justify-center;
-}
-
-.color-selector:hover {
-  filter: brightness(90%);
-  -webkit-filter: brightness(90%);
-}
 </style>
diff --git a/packages/nc-gui-v2/pages/index/index/index.vue b/packages/nc-gui-v2/pages/index/index/index.vue
index d16f729e4d..e505ac87c9 100644
--- a/packages/nc-gui-v2/pages/index/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index/index.vue
@@ -160,10 +160,9 @@ await loadProjects()
         <a-table-column key="title" :title="$t('general.title')" data-index="title">
           <template #default="{ text, record }">
             <div
-              class="capitalize color-transition group-hover:text-primary !w-[400px] h-full overflow-hidden overflow-ellipsis whitespace-nowrap pl-2"
-              :class="{ 'border-l-4': record.color }"
+              class="capitalize color-transition group-hover:text-primary !w-[400px] h-full overflow-hidden overflow-ellipsis whitespace-nowrap pl-2 border-l-4"
               :style="{
-                'border-color': record.color,
+                'border-color': record.color || themeV2Colors['royal-blue'].DEFAULT,
               }"
             >
               {{ text }}

From 71ecbe1819ff8e7ed352abaed6e0fecd0059ddd0 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 29 Aug 2022 17:57:19 +0300
Subject: [PATCH 2/9] fix: use injection for useProject

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../composables/useInjectionState/index.ts    | 22 ++++-
 packages/nc-gui-v2/composables/useProject.ts  | 98 +++++++++++--------
 .../index/index/{[id].vue => [projectId].vue} |  4 +-
 3 files changed, 77 insertions(+), 47 deletions(-)
 rename packages/nc-gui-v2/pages/index/index/{[id].vue => [projectId].vue} (97%)

diff --git a/packages/nc-gui-v2/composables/useInjectionState/index.ts b/packages/nc-gui-v2/composables/useInjectionState/index.ts
index d96955c07f..09933498d6 100644
--- a/packages/nc-gui-v2/composables/useInjectionState/index.ts
+++ b/packages/nc-gui-v2/composables/useInjectionState/index.ts
@@ -1,20 +1,36 @@
-import type { InjectionKey } from 'vue'
+import type { EffectScope, InjectionKey } from 'vue'
+import { getCurrentScope } from 'vue'
+
+type ExtendedScope<T> = { [key: symbol]: T } & EffectScope
 
 export function useInjectionState<Arguments extends any[], Return>(
   composable: (...args: Arguments) => Return,
   keyName = 'InjectionState',
 ): readonly [useInjectionState: (...args: Arguments) => Return, useInjectedState: () => Return | undefined] {
-  const key: string | InjectionKey<Return> = Symbol(keyName)
+  const keySymbol = Symbol(keyName)
+  const key: string | InjectionKey<Return> = keySymbol
 
   const useProvidingState = (...args: Arguments) => {
     const providedState = composable(...args)
 
+    const currentScope = getCurrentScope() as ExtendedScope<Return>
+    currentScope[keySymbol] = providedState
+
     provide(key, providedState)
 
     return providedState
   }
 
-  const useInjectedState = () => inject(key, undefined)
+  const useInjectedState = () => {
+    let injection = inject(key, undefined)
+
+    if (typeof injection === 'undefined') {
+      const currentScope = getCurrentScope() as ExtendedScope<Return>
+      injection = currentScope[keySymbol]
+    }
+
+    return injection
+  }
 
   return [useProvidingState, useInjectedState]
 }
diff --git a/packages/nc-gui-v2/composables/useProject.ts b/packages/nc-gui-v2/composables/useProject.ts
index 6af3e9de92..82ae2f709f 100644
--- a/packages/nc-gui-v2/composables/useProject.ts
+++ b/packages/nc-gui-v2/composables/useProject.ts
@@ -1,34 +1,25 @@
+import type { MaybeRef } from '@vueuse/core'
 import { SqlUiFactory } from 'nocodb-sdk'
 import type { OracleUi, ProjectType, TableType } from 'nocodb-sdk'
-import type { MaybeRef } from '@vueuse/core'
-import { useNuxtApp, useRoute, useState } from '#app'
+import { useNuxtApp, useRoute } from '#app'
 import type { ProjectMetaInfo } from '~/lib'
-import { USER_PROJECT_ROLES } from '~/lib'
 import type { ThemeConfig } from '@/composables/useTheme'
+import { useInjectionState } from '#imports'
 
-export function useProject(projectId?: MaybeRef<string>) {
-  const projectRoles = useState<Record<string, boolean>>(USER_PROJECT_ROLES, () => ({}))
+const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
   const { $api } = useNuxtApp()
-  let _projectId = $ref('')
-
-  const project = useState<ProjectType>('project')
-  const tables = useState<TableType[]>('tables', () => [] as TableType[])
   const route = useRoute()
   const { includeM2M } = useGlobal()
   const { setTheme } = useTheme()
-  const projectMetaInfo = useState<ProjectMetaInfo | undefined>('projectMetaInfo')
+
+  const projectId = computed(() => (_projectId ? unref(_projectId) : (route.params.projectId as string)))
+  const project = ref<ProjectType>({})
+  const tables = ref<TableType[]>([])
+  const projectRoles = ref<Record<string, boolean>>({})
+  const projectMetaInfo = ref<ProjectMetaInfo | undefined>()
+
   // todo: refactor path param name and variable name
   const projectType = $computed(() => route.params.projectType as string)
-  const isLoaded = ref(false)
-
-  const projectBaseType = $computed(() => project.value?.bases?.[0]?.type || '')
-  const isMysql = computed(() => ['mysql', 'mysql2'].includes(projectBaseType))
-  const isMssql = computed(() => projectBaseType === 'mssql')
-  const isPg = computed(() => projectBaseType === 'pg')
-  const sqlUi = computed(
-    () => SqlUiFactory.create({ client: projectBaseType }) as Exclude<ReturnType<typeof SqlUiFactory['create']>, typeof OracleUi>,
-  )
-  const isSharedBase = computed(() => projectType === 'base')
 
   const projectMeta = computed(() => {
     try {
@@ -38,6 +29,17 @@ export function useProject(projectId?: MaybeRef<string>) {
     }
   })
 
+  const projectBaseType = $computed(() => project.value?.bases?.[0]?.type || '')
+
+  const sqlUi = computed(
+    () => SqlUiFactory.create({ client: projectBaseType }) as Exclude<ReturnType<typeof SqlUiFactory['create']>, typeof OracleUi>,
+  )
+
+  const isMysql = computed(() => ['mysql', 'mysql2'].includes(projectBaseType))
+  const isMssql = computed(() => projectBaseType === 'mssql')
+  const isPg = computed(() => projectBaseType === 'pg')
+  const isSharedBase = computed(() => projectType === 'base')
+
   async function loadProjectMetaInfo(force?: boolean) {
     if (!projectMetaInfo.value || force) {
       const data = await $api.project.metaGet(project.value.id!, {}, {})
@@ -74,31 +76,21 @@ export function useProject(projectId?: MaybeRef<string>) {
   }
 
   async function loadProject() {
-    if (unref(projectId)) {
-      _projectId = unref(projectId)!
-    } else if (projectType === 'base') {
+    if (projectType === 'base') {
       const baseData = await $api.public.sharedBaseGet(route.params.projectId as string)
-      _projectId = baseData.project_id!
+      project.value = await $api.project.read(baseData.project_id!)
     } else {
-      _projectId = route.params.projectId as string
+      project.value = await $api.project.read(projectId.value)
     }
-    isLoaded.value = true
-    project.value = await $api.project.read(_projectId!)
     await loadProjectRoles()
     await loadTables()
-    setTheme(projectMeta.value?.theme)
   }
 
   async function updateProject(data: Partial<ProjectType>) {
-    if (unref(projectId)) {
-      _projectId = unref(projectId)!
-    } else if (projectType === 'base') {
+    if (projectType === 'base') {
       return
-    } else {
-      _projectId = route.params.projectId as string
     }
-
-    await $api.project.update(_projectId, data)
+    await $api.project.update(projectId.value, data)
   }
 
   async function saveTheme(theme: Partial<ThemeConfig>) {
@@ -112,14 +104,24 @@ export function useProject(projectId?: MaybeRef<string>) {
     setTheme(theme)
   }
 
+  watch(project, () => {
+    setTheme(projectMeta.value?.theme || {})
+  })
+
+  watch(
+    () => route.params,
+    (v) => {
+      if (!v?.projectId) {
+        setTheme({})
+      }
+    },
+  )
+
   onScopeDispose(() => {
-    if (isLoaded.value === true) {
-      project.value = {}
-      tables.value = []
-      projectMetaInfo.value = undefined
-      projectRoles.value = {}
-      setTheme({})
-    }
+    project.value = {}
+    tables.value = []
+    projectMetaInfo.value = undefined
+    projectRoles.value = {}
   })
 
   return {
@@ -139,4 +141,16 @@ export function useProject(projectId?: MaybeRef<string>) {
     projectMeta,
     saveTheme,
   }
+}, 'useProject')
+
+export const provideProject = setup
+
+export function useProject(projectId?: MaybeRef<string>) {
+  const state = use()
+
+  if (!state) {
+    return setup(projectId)
+  }
+
+  return state
 }
diff --git a/packages/nc-gui-v2/pages/index/index/[id].vue b/packages/nc-gui-v2/pages/index/index/[projectId].vue
similarity index 97%
rename from packages/nc-gui-v2/pages/index/index/[id].vue
rename to packages/nc-gui-v2/pages/index/index/[projectId].vue
index 3e4c977c3b..72ab27d685 100644
--- a/packages/nc-gui-v2/pages/index/index/[id].vue
+++ b/packages/nc-gui-v2/pages/index/index/[projectId].vue
@@ -21,7 +21,7 @@ useSidebar({ hasSidebar: false })
 
 const route = useRoute()
 
-const { project, loadProject, updateProject } = useProject(route.params.id as string)
+const { project, loadProject, updateProject } = useProject(route.params.projectId as string)
 
 await loadProject()
 
@@ -43,7 +43,7 @@ const renameProject = async () => {
   try {
     await updateProject(formState)
 
-    navigateTo(`/nc/${route.params.id}`)
+    navigateTo(`/nc/${route.params.projectId}`)
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }

From dbcb4a9611cc54b6c6958bb33509d985e0ae92c4 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 29 Aug 2022 18:13:25 +0300
Subject: [PATCH 3/9] fix: setTheme make theme parameter optional

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/composables/useProject.ts     | 2 +-
 packages/nc-gui-v2/composables/useTheme/index.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useProject.ts b/packages/nc-gui-v2/composables/useProject.ts
index 82ae2f709f..fbfc443ef2 100644
--- a/packages/nc-gui-v2/composables/useProject.ts
+++ b/packages/nc-gui-v2/composables/useProject.ts
@@ -112,7 +112,7 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
     () => route.params,
     (v) => {
       if (!v?.projectId) {
-        setTheme({})
+        setTheme()
       }
     },
   )
diff --git a/packages/nc-gui-v2/composables/useTheme/index.ts b/packages/nc-gui-v2/composables/useTheme/index.ts
index 3ce5492322..8370380855 100644
--- a/packages/nc-gui-v2/composables/useTheme/index.ts
+++ b/packages/nc-gui-v2/composables/useTheme/index.ts
@@ -22,7 +22,7 @@ const [setup, use] = useInjectionState((config?: Partial<ThemeConfig>) => {
   setTheme(config ?? currentTheme.value)
 
   /** set theme (persists in localstorage) */
-  function setTheme(theme: Partial<ThemeConfig>) {
+  function setTheme(theme?: Partial<ThemeConfig>) {
     const themePrimary = theme?.primaryColor ? tinycolor(theme.primaryColor) : tinycolor(themeV2Colors['royal-blue'].DEFAULT)
     const themeAccent = theme?.accentColor ? tinycolor(theme.accentColor) : tinycolor(themeV2Colors.pink['500'])
 

From 4246fefab65249b560c5c9e5019977f1a28cff63 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 29 Aug 2022 18:46:50 +0300
Subject: [PATCH 4/9] fix: use function scope instead of vue's effect scope

by @bcakmakoglu

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../composables/useInjectionState/index.ts    | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useInjectionState/index.ts b/packages/nc-gui-v2/composables/useInjectionState/index.ts
index 09933498d6..6fdb541cb3 100644
--- a/packages/nc-gui-v2/composables/useInjectionState/index.ts
+++ b/packages/nc-gui-v2/composables/useInjectionState/index.ts
@@ -1,23 +1,21 @@
-import type { EffectScope, InjectionKey } from 'vue'
-import { getCurrentScope } from 'vue'
-
-type ExtendedScope<T> = { [key: symbol]: T } & EffectScope
+import type { InjectionKey } from 'vue'
+import { inject, provide, tryOnScopeDispose } from '#imports'
 
 export function useInjectionState<Arguments extends any[], Return>(
   composable: (...args: Arguments) => Return,
   keyName = 'InjectionState',
 ): readonly [useInjectionState: (...args: Arguments) => Return, useInjectedState: () => Return | undefined] {
-  const keySymbol = Symbol(keyName)
-  const key: string | InjectionKey<Return> = keySymbol
+  const key: string | InjectionKey<Return> = Symbol(keyName)
+
+  let providableState: Return | undefined
 
   const useProvidingState = (...args: Arguments) => {
     const providedState = composable(...args)
 
-    const currentScope = getCurrentScope() as ExtendedScope<Return>
-    currentScope[keySymbol] = providedState
-
     provide(key, providedState)
 
+    providableState = providedState
+
     return providedState
   }
 
@@ -25,12 +23,15 @@ export function useInjectionState<Arguments extends any[], Return>(
     let injection = inject(key, undefined)
 
     if (typeof injection === 'undefined') {
-      const currentScope = getCurrentScope() as ExtendedScope<Return>
-      injection = currentScope[keySymbol]
+      injection = providableState
     }
 
     return injection
   }
 
+  tryOnScopeDispose(() => {
+    providableState = undefined
+  })
+
   return [useProvidingState, useInjectedState]
 }

From 2f0740291a10019ea1beb605da551df9b6a13f6a Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 29 Aug 2022 18:47:49 +0300
Subject: [PATCH 5/9] fix: set theme on project load

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/composables/useProject.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useProject.ts b/packages/nc-gui-v2/composables/useProject.ts
index fbfc443ef2..98657f9772 100644
--- a/packages/nc-gui-v2/composables/useProject.ts
+++ b/packages/nc-gui-v2/composables/useProject.ts
@@ -84,6 +84,7 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
     }
     await loadProjectRoles()
     await loadTables()
+    setTheme(projectMeta.value?.theme)
   }
 
   async function updateProject(data: Partial<ProjectType>) {
@@ -104,10 +105,6 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
     setTheme(theme)
   }
 
-  watch(project, () => {
-    setTheme(projectMeta.value?.theme || {})
-  })
-
   watch(
     () => route.params,
     (v) => {
@@ -117,6 +114,7 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
     },
   )
 
+  // TODO useProject should only called inside a project for now this doesn't work
   onScopeDispose(() => {
     project.value = {}
     tables.value = []

From 7b33b06fa7532589735217d550bbfaef0429821b Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 29 Aug 2022 22:38:50 +0300
Subject: [PATCH 6/9] feat: pick project theme from badge

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/composables/useProject.ts  |  10 +-
 .../pages/[projectType]/[projectId]/index.vue |   6 +-
 .../nc-gui-v2/pages/index/index/index.vue     | 103 ++++++++++++++++--
 3 files changed, 105 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useProject.ts b/packages/nc-gui-v2/composables/useProject.ts
index 98657f9772..05206a32e7 100644
--- a/packages/nc-gui-v2/composables/useProject.ts
+++ b/packages/nc-gui-v2/composables/useProject.ts
@@ -91,16 +91,20 @@ const [setup, use] = useInjectionState((_projectId?: MaybeRef<string>) => {
     if (projectType === 'base') {
       return
     }
-    await $api.project.update(projectId.value, data)
+    if (data.meta && typeof data.meta === 'string') {
+      await $api.project.update(projectId.value, data)
+    } else {
+      await $api.project.update(projectId.value, { ...data, meta: JSON.stringify(data.meta) })
+    }
   }
 
   async function saveTheme(theme: Partial<ThemeConfig>) {
     await updateProject({
       color: theme.primaryColor,
-      meta: JSON.stringify({
+      meta: {
         ...projectMeta.value,
         theme,
-      }),
+      },
     })
     setTheme(theme)
   }
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index bec342b083..249763af32 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -89,19 +89,19 @@ const themeAccentColor = ref<any>(theme.value.accentColor)
 
 // Chrome provides object so if custom picker used we only edit primary otherwise use analogous as accent
 watch(themePrimaryColor, (nextColor) => {
-  const hexColor = nextColor.hex ? nextColor.hex : nextColor
+  const hexColor = nextColor.hex8 ? nextColor.hex8 : nextColor
   const tcolor = tinycolor(hexColor)
   if (tcolor) {
     const analogous = tcolor.complement()
     saveTheme({
       primaryColor: hexColor,
-      accentColor: nextColor.hex ? theme.value.accentColor : analogous.toHexString(),
+      accentColor: nextColor.hex8 ? theme.value.accentColor : analogous.toHexString(),
     })
   }
 })
 
 watch(themeAccentColor, (nextColor) => {
-  const hexColor = nextColor.hex ? nextColor.hex : nextColor
+  const hexColor = nextColor.hex8 ? nextColor.hex8 : nextColor
   saveTheme({
     primaryColor: theme.value.primaryColor,
     accentColor: hexColor,
diff --git a/packages/nc-gui-v2/pages/index/index/index.vue b/packages/nc-gui-v2/pages/index/index/index.vue
index e505ac87c9..fd28edb2ce 100644
--- a/packages/nc-gui-v2/pages/index/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index/index.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { Modal, message } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
+import { Chrome } from '@ckpack/vue-color'
+import tinycolor from 'tinycolor2'
 import {
   computed,
   definePageMeta,
@@ -17,7 +19,7 @@ definePageMeta({
   title: 'title.myProject',
 })
 
-const { $e } = useNuxtApp()
+const { $api, $e } = useNuxtApp()
 
 const { api, isLoading } = useApi()
 
@@ -64,6 +66,51 @@ const deleteProject = (project: ProjectType) => {
 }
 
 await loadProjects()
+
+const themePrimaryColors = $ref(
+  (() => {
+    const colors: Record<string, any> = {}
+    for (const project of projects?.value || []) {
+      if (project?.id) {
+        try {
+          const projectMeta = typeof project.meta === 'string' ? JSON.parse(project.meta) : project.meta
+          colors[project.id] = tinycolor(projectMeta?.theme?.primaryColor).isValid()
+            ? projectMeta?.theme?.primaryColor
+            : themeV2Colors['royal-blue'].DEFAULT
+        } catch (e) {
+          colors[project.id] = themeV2Colors['royal-blue'].DEFAULT
+        }
+      }
+    }
+    return colors
+  })(),
+)
+
+const oldPrimaryColors = ref({ ...themePrimaryColors })
+
+watch(themePrimaryColors, async (nextColors) => {
+  for (const [projectId, nextColor] of Object.entries(nextColors)) {
+    if (oldPrimaryColors.value[projectId] === nextColor) continue
+    const hexColor = nextColor.hex8 ? nextColor.hex8 : nextColor
+    const tcolor = tinycolor(hexColor)
+    if (tcolor) {
+      const analogous = tcolor.complement()
+      const project: ProjectType = await $api.project.read(projectId)
+      const meta = project?.meta && typeof project.meta === 'string' ? JSON.parse(project.meta) : project.meta || {}
+      await $api.project.update(projectId, {
+        color: hexColor,
+        meta: JSON.stringify({
+          ...meta,
+          theme: {
+            primaryColor: hexColor,
+            analogousColor: analogous.toHexString(),
+          },
+        }),
+      })
+    }
+  }
+  oldPrimaryColors.value = { ...themePrimaryColors }
+})
 </script>
 
 <template>
@@ -159,13 +206,49 @@ await loadProjects()
         <!-- Title -->
         <a-table-column key="title" :title="$t('general.title')" data-index="title">
           <template #default="{ text, record }">
-            <div
-              class="capitalize color-transition group-hover:text-primary !w-[400px] h-full overflow-hidden overflow-ellipsis whitespace-nowrap pl-2 border-l-4"
-              :style="{
-                'border-color': record.color || themeV2Colors['royal-blue'].DEFAULT,
-              }"
-            >
-              {{ text }}
+            <div class="flex items-center">
+              <div @click.stop>
+                <a-menu class="!border-0 !m-0 !p-0" trigger-sub-menu-action="click">
+                  <template v-if="isUIAllowed('projectTheme')">
+                    <a-sub-menu key="theme">
+                      <template #title>
+                        <div
+                          class="color-selector"
+                          :style="{
+                            'background-color': themePrimaryColors[record.id],
+                            'width': '8px',
+                            'height': '100%',
+                          }"
+                        />
+                      </template>
+
+                      <template #expandIcon></template>
+
+                      <GeneralColorPicker
+                        v-model="themePrimaryColors[record.id]"
+                        :colors="enumColor.dark"
+                        :row-size="5"
+                        :advanced="false"
+                      />
+                      <a-sub-menu key="pick-primary">
+                        <template #title>
+                          <div class="nc-project-menu-item group">
+                            <ClarityColorPickerSolid class="group-hover:text-accent" />
+                            Custom Color
+                          </div>
+                        </template>
+                        <template #expandIcon></template>
+                        <Chrome v-model="themePrimaryColors[record.id]" />
+                      </a-sub-menu>
+                    </a-sub-menu>
+                  </template>
+                </a-menu>
+              </div>
+              <div
+                class="capitalize color-transition group-hover:text-primary !w-[400px] h-full overflow-hidden overflow-ellipsis whitespace-nowrap pl-2"
+              >
+                {{ text }}
+              </div>
             </div>
           </template>
         </a-table-column>
@@ -219,4 +302,8 @@ await loadProjects()
 :deep(.ant-table) {
   @apply min-h-[428px];
 }
+
+:deep(.ant-menu-submenu-title) {
+  @apply !p-0 !mr-1 !my-0 !h-5;
+}
 </style>

From ad5f7c78f33a5c64766f8d58e392542c644a8866 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 29 Aug 2022 22:59:05 +0300
Subject: [PATCH 7/9] fix: custom color picker

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/pages/index/index/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/pages/index/index/index.vue b/packages/nc-gui-v2/pages/index/index/index.vue
index fd28edb2ce..f4d6fe0bf0 100644
--- a/packages/nc-gui-v2/pages/index/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index/index.vue
@@ -215,7 +215,7 @@ watch(themePrimaryColors, async (nextColors) => {
                         <div
                           class="color-selector"
                           :style="{
-                            'background-color': themePrimaryColors[record.id],
+                            'background-color': themePrimaryColors[record.id].hex8 || themePrimaryColors[record.id],
                             'width': '8px',
                             'height': '100%',
                           }"

From 8df711992775b6242e8c2473c502c8eb5b55b36d Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 29 Aug 2022 23:12:31 +0300
Subject: [PATCH 8/9] fix: custom color picker css

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/pages/index/index/index.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/pages/index/index/index.vue b/packages/nc-gui-v2/pages/index/index/index.vue
index f4d6fe0bf0..90093bc225 100644
--- a/packages/nc-gui-v2/pages/index/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index/index.vue
@@ -210,7 +210,7 @@ watch(themePrimaryColors, async (nextColors) => {
               <div @click.stop>
                 <a-menu class="!border-0 !m-0 !p-0" trigger-sub-menu-action="click">
                   <template v-if="isUIAllowed('projectTheme')">
-                    <a-sub-menu key="theme">
+                    <a-sub-menu key="theme" popup-class-name="custom-color">
                       <template #title>
                         <div
                           class="color-selector"
@@ -232,7 +232,7 @@ watch(themePrimaryColors, async (nextColors) => {
                       />
                       <a-sub-menu key="pick-primary">
                         <template #title>
-                          <div class="nc-project-menu-item group">
+                          <div class="nc-project-menu-item group !py-0">
                             <ClarityColorPickerSolid class="group-hover:text-accent" />
                             Custom Color
                           </div>
@@ -307,3 +307,9 @@ watch(themePrimaryColors, async (nextColors) => {
   @apply !p-0 !mr-1 !my-0 !h-5;
 }
 </style>
+
+<style>
+.custom-color .ant-menu-submenu-title {
+  height: auto !important;
+}
+</style>

From 50e70d82249a08f86c1dab4b96c404e9302abc96 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Mon, 29 Aug 2022 23:19:16 +0300
Subject: [PATCH 9/9] fix: use correct naming for variable

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui-v2/pages/[projectType]/[projectId]/index.vue     | 6 +++---
 packages/nc-gui-v2/pages/index/index/index.vue              | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index 249763af32..9a9b08cd9f 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -87,15 +87,15 @@ const themePrimaryColor = ref<any>(theme.value.primaryColor)
 
 const themeAccentColor = ref<any>(theme.value.accentColor)
 
-// Chrome provides object so if custom picker used we only edit primary otherwise use analogous as accent
+// Chrome provides object so if custom picker used we only edit primary otherwise use complement as accent
 watch(themePrimaryColor, (nextColor) => {
   const hexColor = nextColor.hex8 ? nextColor.hex8 : nextColor
   const tcolor = tinycolor(hexColor)
   if (tcolor) {
-    const analogous = tcolor.complement()
+    const complement = tcolor.complement()
     saveTheme({
       primaryColor: hexColor,
-      accentColor: nextColor.hex8 ? theme.value.accentColor : analogous.toHexString(),
+      accentColor: nextColor.hex8 ? theme.value.accentColor : complement.toHex8String(),
     })
   }
 })
diff --git a/packages/nc-gui-v2/pages/index/index/index.vue b/packages/nc-gui-v2/pages/index/index/index.vue
index 90093bc225..ee722305ff 100644
--- a/packages/nc-gui-v2/pages/index/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index/index.vue
@@ -94,7 +94,7 @@ watch(themePrimaryColors, async (nextColors) => {
     const hexColor = nextColor.hex8 ? nextColor.hex8 : nextColor
     const tcolor = tinycolor(hexColor)
     if (tcolor) {
-      const analogous = tcolor.complement()
+      const complement = tcolor.complement()
       const project: ProjectType = await $api.project.read(projectId)
       const meta = project?.meta && typeof project.meta === 'string' ? JSON.parse(project.meta) : project.meta || {}
       await $api.project.update(projectId, {
@@ -103,7 +103,7 @@ watch(themePrimaryColors, async (nextColors) => {
           ...meta,
           theme: {
             primaryColor: hexColor,
-            analogousColor: analogous.toHexString(),
+            accentColor: complement.toHex8String(),
           },
         }),
       })