From 9117f76e5bc321ba325639b0052209aaae1d191d Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 21 Jul 2022 19:29:52 +0200
Subject: [PATCH 1/3] refactor(gui-v2): move injection keys to context dir

# What's changed?

* avoids naming collision with `components.d.ts`
---
 packages/nc-gui-v2/{components => context}/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename packages/nc-gui-v2/{components => context}/index.ts (96%)

diff --git a/packages/nc-gui-v2/components/index.ts b/packages/nc-gui-v2/context/index.ts
similarity index 96%
rename from packages/nc-gui-v2/components/index.ts
rename to packages/nc-gui-v2/context/index.ts
index b6070aa3c4..f03f1c0429 100644
--- a/packages/nc-gui-v2/components/index.ts
+++ b/packages/nc-gui-v2/context/index.ts
@@ -1,7 +1,7 @@
 import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
 import type { InjectionKey, Ref } from 'vue'
 import type { EventHook } from '@vueuse/core'
-import type useViewData from '~/composables/useViewData'
+import type { useViewData } from '#imports'
 
 export const ColumnInj: InjectionKey<ColumnType & { meta: any }> = Symbol('column-injection')
 export const MetaInj: InjectionKey<Ref<TableType>> = Symbol('meta-injection')

From 061d89b89e09021f39ec502ed691a30f422f0f8c Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 21 Jul 2022 19:30:21 +0200
Subject: [PATCH 2/3] refactor(gui-v2): accept projectID as argument for
 `useProject`

---
 packages/nc-gui-v2/composables/useProject.ts | 33 +++++++++++++-------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useProject.ts b/packages/nc-gui-v2/composables/useProject.ts
index 1df977267a..ed3eb1464c 100644
--- a/packages/nc-gui-v2/composables/useProject.ts
+++ b/packages/nc-gui-v2/composables/useProject.ts
@@ -1,17 +1,19 @@
 import { SqlUiFactory } from 'nocodb-sdk'
 import type { ProjectType, TableType } from 'nocodb-sdk'
+import type { MaybeRef } from '@vueuse/core'
 import { useNuxtApp, useState } from '#app'
 import { USER_PROJECT_ROLES } from '~/lib/constants'
 
-export default () => {
+export default (projectId?: MaybeRef<string>) => {
   const projectRoles = useState<Record<string, boolean>>(USER_PROJECT_ROLES, () => ({}))
-
   const { $api } = useNuxtApp()
 
+  const _projectId = $computed(() => unref(projectId))
+
   const project = useState<ProjectType>('project')
-  const tables = useState<TableType[]>('tables')
+  const tables = useState<TableType[]>('tables', () => [] as TableType[])
 
-  const loadProjectRoles = async () => {
+  async function loadProjectRoles() {
     projectRoles.value = {}
 
     if (project.value.id) {
@@ -19,21 +21,30 @@ export default () => {
       projectRoles.value = user.roles
     }
   }
-  const loadTables = async () => {
+  async function loadTables() {
     if (project.value.id) {
       const tablesResponse = await $api.dbTable.list(project.value.id)
       if (tablesResponse.list) tables.value = tablesResponse.list
     }
   }
 
-  const loadProject = async (projectId: string) => {
-    project.value = await $api.project.read(projectId)
+  async function loadProject(id: string) {
+    project.value = await $api.project.read(id)
     await loadProjectRoles()
   }
 
-  const isMysql = computed(() => ['mysql', 'mysql2'].includes(project.value?.bases?.[0]?.type || ''))
-  const isPg = computed(() => project.value?.bases?.[0]?.type === 'pg')
-  const sqlUi = computed(() => SqlUiFactory.create({ client: project.value?.bases?.[0]?.type || '' }))
+  watchEffect(async () => {
+    if (_projectId) {
+      await loadProject(_projectId)
+      await loadTables()
+    }
+  })
+
+  const projectBaseType = $computed(() => project.value?.bases?.[0]?.type || '')
+
+  const isMysql = computed(() => ['mysql', 'mysql2'].includes(projectBaseType))
+  const isPg = computed(() => projectBaseType === 'pg')
+  const sqlUi = computed(() => SqlUiFactory.create({ client: projectBaseType }))
 
-  return { project, tables, loadProject, loadTables, isMysql, isPg, sqlUi }
+  return { project, tables, loadProjectRoles, loadProject, loadTables, isMysql, isPg, sqlUi }
 }

From f8d95aa9664c147ad134afdfa24511b5057bfc03 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 21 Jul 2022 19:33:13 +0200
Subject: [PATCH 3/3] refactor(gui-v2): import composables from `#imports` path

---
 packages/nc-gui-v2/components/cell/Attachment.vue    |  5 ++---
 packages/nc-gui-v2/components/cell/Checkbox.vue      |  2 +-
 .../nc-gui-v2/components/cell/DateTimePicker.vue     |  3 +--
 packages/nc-gui-v2/components/cell/Duration.vue      |  2 +-
 packages/nc-gui-v2/components/cell/MultiSelect.vue   |  2 +-
 packages/nc-gui-v2/components/cell/Rating.vue        |  2 +-
 packages/nc-gui-v2/components/cell/SingleSelect.vue  |  2 +-
 packages/nc-gui-v2/components/cell/Url.vue           |  2 +-
 packages/nc-gui-v2/components/dashboard/TreeView.vue |  3 +--
 packages/nc-gui-v2/components/dlg/TableCreate.vue    |  4 +---
 packages/nc-gui-v2/components/dlg/ViewCreate.vue     |  2 +-
 .../nc-gui-v2/components/smartsheet-header/Cell.vue  |  2 +-
 .../components/smartsheet-header/CellIcon.vue        |  2 +-
 .../components/smartsheet-header/VirtualCell.vue     |  2 +-
 .../components/smartsheet-header/VirtualCellIcon.vue |  2 +-
 .../components/smartsheet-toolbar/ColumnFilter.vue   |  2 +-
 .../smartsheet-toolbar/ColumnFilterMenu.vue          |  2 +-
 .../FieldListAutoCompleteDropdown.vue                |  2 +-
 .../components/smartsheet-toolbar/FieldsMenu.vue     |  2 +-
 .../components/smartsheet-toolbar/SortListMenu.vue   |  2 +-
 packages/nc-gui-v2/components/smartsheet/Cell.vue    |  2 +-
 packages/nc-gui-v2/components/smartsheet/Gallery.vue |  2 +-
 packages/nc-gui-v2/components/smartsheet/Grid.vue    |  2 +-
 .../nc-gui-v2/components/smartsheet/Pagination.vue   |  2 +-
 packages/nc-gui-v2/components/smartsheet/Sidebar.vue |  2 +-
 .../nc-gui-v2/components/smartsheet/VirtualCell.vue  |  2 +-
 packages/nc-gui-v2/components/tabs/Smartsheet.vue    |  2 +-
 .../nc-gui-v2/components/virtual-cell/BelongsTo.vue  |  2 +-
 .../nc-gui-v2/components/virtual-cell/Formula.vue    |  5 +++--
 .../nc-gui-v2/components/virtual-cell/HasMany.vue    |  2 +-
 .../nc-gui-v2/components/virtual-cell/ManyToMany.vue |  2 +-
 .../components/virtual-cell/components/ItemChip.vue  |  2 +-
 packages/nc-gui-v2/composables/useColumn.ts          |  2 +-
 packages/nc-gui-v2/composables/useMetas.ts           |  2 +-
 packages/nc-gui-v2/composables/useTableCreate.ts     |  1 +
 packages/nc-gui-v2/composables/useViewData.ts        |  2 +-
 packages/nc-gui-v2/pages/nc/[projectId].vue          | 12 ++----------
 37 files changed, 41 insertions(+), 52 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Attachment.vue b/packages/nc-gui-v2/components/cell/Attachment.vue
index e78c0d6d55..4f225160e3 100644
--- a/packages/nc-gui-v2/components/cell/Attachment.vue
+++ b/packages/nc-gui-v2/components/cell/Attachment.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { useToast } from 'vue-toastification'
-import { inject, ref, watchEffect } from '#imports'
+import { inject, ref, useProject, watchEffect } from '#imports'
 import { useNuxtApp } from '#app'
-import { ColumnInj, MetaInj } from '~/components'
-import useProject from '~/composables/useProject'
+import { ColumnInj, MetaInj } from '~/context'
 import { NOCO } from '~/lib/constants'
 import { isImage } from '~/utils/fileUtils'
 import MaterialPlusIcon from '~icons/mdi/plus'
diff --git a/packages/nc-gui-v2/components/cell/Checkbox.vue b/packages/nc-gui-v2/components/cell/Checkbox.vue
index 2eff267965..23d2d675b4 100644
--- a/packages/nc-gui-v2/components/cell/Checkbox.vue
+++ b/packages/nc-gui-v2/components/cell/Checkbox.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, inject } from '#imports'
-import { ColumnInj, IsFormInj } from '~/components'
+import { ColumnInj, IsFormInj } from '~/context'
 
 interface Props {
   modelValue?: boolean | undefined | number
diff --git a/packages/nc-gui-v2/components/cell/DateTimePicker.vue b/packages/nc-gui-v2/components/cell/DateTimePicker.vue
index a7fed7f1b3..60232a7c25 100644
--- a/packages/nc-gui-v2/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DateTimePicker.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { computed, ref } from '#imports'
-import useProject from '~/composables/useProject'
+import { computed, ref, useProject } from '#imports'
 
 interface Props {
   modelValue?: string
diff --git a/packages/nc-gui-v2/components/cell/Duration.vue b/packages/nc-gui-v2/components/cell/Duration.vue
index 3be0e2e786..8e92ecea70 100644
--- a/packages/nc-gui-v2/components/cell/Duration.vue
+++ b/packages/nc-gui-v2/components/cell/Duration.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, inject, ref } from '#imports'
-import { ColumnInj } from '~/components'
+import { ColumnInj } from '~/context'
 import { convertDurationToSeconds, convertMS2Duration, durationOptions } from '~/utils/durationHelper'
 
 interface Props {
diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index 0ae5f9de31..e66f11c5de 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, inject } from '#imports'
-import { ColumnInj } from '~/components'
+import { ColumnInj } from '~/context'
 
 interface Props {
   modelValue: string
diff --git a/packages/nc-gui-v2/components/cell/Rating.vue b/packages/nc-gui-v2/components/cell/Rating.vue
index 7e4530b913..0893d50bff 100644
--- a/packages/nc-gui-v2/components/cell/Rating.vue
+++ b/packages/nc-gui-v2/components/cell/Rating.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, inject } from '#imports'
-import { ColumnInj, IsFormInj } from '~/components'
+import { ColumnInj, IsFormInj } from '~/context'
 import MdiStarIcon from '~icons/mdi/star'
 import MdiStarOutlineIcon from '~icons/mdi/star-outline'
 
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index 9790ffa946..112e26f4b7 100644
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/packages/nc-gui-v2/components/cell/SingleSelect.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, inject } from '#imports'
-import { ColumnInj } from '~/components'
+import { ColumnInj } from '~/context'
 
 interface Props {
   modelValue: string
diff --git a/packages/nc-gui-v2/components/cell/Url.vue b/packages/nc-gui-v2/components/cell/Url.vue
index 6015aec1c5..44690332a1 100644
--- a/packages/nc-gui-v2/components/cell/Url.vue
+++ b/packages/nc-gui-v2/components/cell/Url.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from '#imports'
-import { ColumnInj } from '~/components'
+import { ColumnInj } from '~/context'
 import { isValidURL } from '~/utils/urlUtils'
 
 interface Props {
diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index 3feb3ccf51..aa24b7e69f 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import useProject from '~/composables/useProject'
-import useTabs from '~/composables/useTabs'
+import { useProject, useTabs } from '#imports'
 import MdiSettingIcon from '~icons/mdi/cog'
 
 const { tables } = useProject()
diff --git a/packages/nc-gui-v2/components/dlg/TableCreate.vue b/packages/nc-gui-v2/components/dlg/TableCreate.vue
index c17dbb5fc3..9b87ef6f1e 100644
--- a/packages/nc-gui-v2/components/dlg/TableCreate.vue
+++ b/packages/nc-gui-v2/components/dlg/TableCreate.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { onMounted } from '@vue/runtime-core'
-import useTableCreate from '../../composables/useTableCreate'
-import useProject from '~/composables/useProject'
-import useTabs from '~/composables/useTabs'
+import { useProject, useTableCreate, useTabs } from '#imports'
 import { validateTableName } from '~/utils/validation'
 
 const { modelValue = false } = defineProps<{ modelValue?: boolean }>()
diff --git a/packages/nc-gui-v2/components/dlg/ViewCreate.vue b/packages/nc-gui-v2/components/dlg/ViewCreate.vue
index fcf18aa3af..d23dfb6c29 100644
--- a/packages/nc-gui-v2/components/dlg/ViewCreate.vue
+++ b/packages/nc-gui-v2/components/dlg/ViewCreate.vue
@@ -3,7 +3,7 @@ import { inject } from '@vue/runtime-core'
 import type { TableType } from 'nocodb-sdk'
 import { ViewTypes } from 'nocodb-sdk'
 import type { Ref } from '#imports'
-import { ActiveViewInj, MetaInj, ViewListInj } from '~/components'
+import { ActiveViewInj, MetaInj, ViewListInj } from '~/context'
 import useViewCreate from '~/composables/useViewCreate'
 
 const { modelValue, type } = defineProps<{ type: ViewTypes; modelValue: boolean }>()
diff --git a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
index f054d1f7fc..6db3a86053 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
-import { ColumnInj } from '../index'
+import { ColumnInj } from '../../context'
 
 const { column } = defineProps<{ column: ColumnType & { meta: any } }>()
 provide(ColumnInj, column)
diff --git a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
index 9f0dfc012c..4984f141f9 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
-import { ColumnInj } from '~/components'
+import { ColumnInj } from '~/context'
 import useColumn from '~/composables/useColumn'
 import KeyIcon from '~icons/mdi/key-variant'
 import JSONIcon from '~icons/mdi/code-json'
diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index 340ef58a46..6cd3dadd3d 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
-import { ColumnInj } from '../index'
+import { ColumnInj } from '../../context'
 import { provide } from '#imports'
 
 const { column } = defineProps<{ column: ColumnType & { meta: any } }>()
diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
index 6a25439393..ee581719f6 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { LinkToAnotherRecordType, RelationTypes, UITypes } from "nocodb-sdk";
-import { ColumnInj } from '~/components'
+import { ColumnInj } from '~/context'
 import GenericIcon from '~icons/mdi/square-rounded'
 import HMIcon from '~icons/mdi/table-arrow-right'
 import BTIcon from '~icons/mdi/table-arrow-left'
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index d3047452c6..8470008f4c 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -4,7 +4,7 @@ import FieldListAutoCompleteDropdown from './FieldListAutoCompleteDropdown.vue'
 import { useNuxtApp } from '#app'
 import { inject } from '#imports'
 import { comparisonOpList } from '~/utils/filterUtils'
-import { ActiveViewInj, MetaInj, ReloadViewDataHookInj } from '~/components'
+import { ActiveViewInj, MetaInj, ReloadViewDataHookInj } from '~/context'
 import useViewFilters from '~/composables/useViewFilters'
 import MdiDeleteIcon from '~icons/mdi/close-box'
 
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index fd6150d968..c27688aa71 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // todo: move to persisted state
 import { useState } from '#app'
-import { IsLockedInj } from '~/components'
+import { IsLockedInj } from '~/context'
 import MdiFilterIcon from '~icons/mdi/filter-outline'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
 
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
index 91e3d563fc..d354e28503 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldListAutoCompleteDropdown.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { MetaInj } from '~/components'
+import { MetaInj } from '~/context'
 
 interface Props {
   modelValue?: string
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
index c44528bfb9..73edd42973 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue'
-import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj } from '~/components'
+import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj } from '~/context'
 import useViewColumns from '~/composables/useViewColumns'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
 import MdiEyeIcon from '~icons/mdi/eye-off-outline'
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
index 0eaee3b286..51496f435b 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import FieldListAutoCompleteDropdown from './FieldListAutoCompleteDropdown.vue'
 import { computed, inject } from '#imports'
-import { ActiveViewInj, IsLockedInj, MetaInj, ReloadViewDataHookInj } from '~/components'
+import { ActiveViewInj, IsLockedInj, MetaInj, ReloadViewDataHookInj } from '~/context'
 import useViewSorts from '~/composables/useViewSorts'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
 import MdiSortIcon from '~icons/mdi/sort'
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index f04a15beca..c1b4bb7cbb 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -2,7 +2,7 @@
 import type { ColumnType } from 'nocodb-sdk'
 import { provide } from 'vue'
 import { computed } from '#imports'
-import { ColumnInj } from '~/components'
+import { ColumnInj } from '~/context'
 import useColumn from '~/composables/useColumn'
 
 interface Props {
diff --git a/packages/nc-gui-v2/components/smartsheet/Gallery.vue b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
index 51256d97ff..b05cc2d6d6 100644
--- a/packages/nc-gui-v2/components/smartsheet/Gallery.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Gallery.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { isVirtualCol } from 'nocodb-sdk'
 import { inject, onKeyStroke, onMounted, provide } from '#imports'
-import { ActiveViewInj, ChangePageInj, IsFormInj, IsGridInj, MetaInj, PaginationDataInj, ReadonlyInj } from '~/components'
+import { ActiveViewInj, ChangePageInj, IsFormInj, IsGridInj, MetaInj, PaginationDataInj, ReadonlyInj } from '~/context'
 import useViewData from '~/composables/useViewData'
 
 const meta = inject(MetaInj)
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 7a46de7514..7a57d550d5 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -11,7 +11,7 @@ import {
   MetaInj,
   PaginationDataInj,
   ReloadViewDataHookInj,
-} from '~/components'
+} from '~/context'
 import useViewData from '~/composables/useViewData'
 
 const meta = inject(MetaInj)
diff --git a/packages/nc-gui-v2/components/smartsheet/Pagination.vue b/packages/nc-gui-v2/components/smartsheet/Pagination.vue
index cd107b077b..84fc428d77 100644
--- a/packages/nc-gui-v2/components/smartsheet/Pagination.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Pagination.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue'
-import { ChangePageInj, PaginationDataInj } from '~/components'
+import { ChangePageInj, PaginationDataInj } from '~/context'
 import MdiKeyboardIcon from '~icons/mdi/keyboard-return'
 
 const paginatedData = inject(PaginationDataInj)
diff --git a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue
index 2400f1c4d0..6b5c3d10d8 100644
--- a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Sidebar.vue
@@ -3,7 +3,7 @@ import { ViewTypes } from 'nocodb-sdk'
 import type { TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { inject, ref } from '#imports'
-import { ActiveViewInj, MetaInj, ViewListInj } from '~/components'
+import { ActiveViewInj, MetaInj, ViewListInj } from '~/context'
 import useViews from '~/composables/useViews'
 import { viewIcons } from '~/utils/viewUtils'
 import MdiPlusIcon from '~icons/mdi/plus'
diff --git a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
index d888f077d2..231d1ff9ad 100644
--- a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import { provide } from '#imports'
-import { ColumnInj } from '~/components'
+import { ColumnInj } from '~/context'
 import useVirtualCell from '~/composables/useVirtualCell'
 
 interface Props {
diff --git a/packages/nc-gui-v2/components/tabs/Smartsheet.vue b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
index 466470de0c..cfbf6b7a07 100644
--- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
@@ -3,7 +3,7 @@ import { useEventBus } from '@vueuse/core'
 import type { ColumnType, FormType, GalleryType, GridType, KanbanType } from 'nocodb-sdk'
 import { ViewTypes } from 'nocodb-sdk'
 import { computed, onMounted, provide, watch } from '#imports'
-import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj, TabMetaInj } from '~/components'
+import { ActiveViewInj, FieldsInj, IsLockedInj, MetaInj, ReloadViewDataHookInj, TabMetaInj } from '~/context'
 import useMetas from '~/composables/useMetas'
 
 const { tabMeta } = defineProps({
diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 35d58a2165..f171e33f27 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import ItemChip from './components/ItemChip.vue'
-import { ColumnInj } from '~/components'
+import { ColumnInj } from '~/context'
 import useBelongsTo from '~/composables/useBelongsTo'
 
 const column = inject(ColumnInj)
diff --git a/packages/nc-gui-v2/components/virtual-cell/Formula.vue b/packages/nc-gui-v2/components/virtual-cell/Formula.vue
index f33da5f8ed..a32011b359 100644
--- a/packages/nc-gui-v2/components/virtual-cell/Formula.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/Formula.vue
@@ -1,8 +1,9 @@
 <script lang="ts" setup>
-import { computed } from '#imports'
-import { ColumnInj } from '~/components'
+import { computed, useProject } from '#imports'
+import { ColumnInj } from '~/context'
 import { handleTZ } from '~/utils/dateTimeUtils'
 import { replaceUrlsWithLink } from '~/utils/urlUtils'
+
 const column = inject(ColumnInj)
 const value = inject('value')
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index 5e78939087..ef08df6189 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import ItemChip from './components/ItemChip.vue'
-import { ColumnInj } from '~/components'
+import { ColumnInj } from '~/context'
 import useHasMany from '~/composables/useHasMany'
 const column = inject(ColumnInj)
 const value = inject('value')
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index 2276758811..b0285fd7bb 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import ItemChip from './components/ItemChip.vue'
-import { ColumnInj } from '~/components'
+import { ColumnInj } from '~/context'
 import useManyToMany from '~/composables/useManyToMany'
 const column = inject(ColumnInj)
 const value = inject('value')
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
index d2c75a0272..a0720220a0 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ReadonlyInj } from '~/components'
+import { ReadonlyInj } from '~/context'
 import MdiCloseThickIcon from '~icons/mdi/close-thick'
 
 interface Props {
diff --git a/packages/nc-gui-v2/composables/useColumn.ts b/packages/nc-gui-v2/composables/useColumn.ts
index 1cad4f3d50..decddd5778 100644
--- a/packages/nc-gui-v2/composables/useColumn.ts
+++ b/packages/nc-gui-v2/composables/useColumn.ts
@@ -1,6 +1,6 @@
 import type { ColumnType } from 'nocodb-sdk'
 import { SqlUiFactory, UITypes, isVirtualCol } from 'nocodb-sdk'
-import useProject from '~/composables/useProject'
+import { useProject } from '#imports'
 
 export default (column: ColumnType) => {
   const { project } = useProject()
diff --git a/packages/nc-gui-v2/composables/useMetas.ts b/packages/nc-gui-v2/composables/useMetas.ts
index 6664e481ad..77110a0f3f 100644
--- a/packages/nc-gui-v2/composables/useMetas.ts
+++ b/packages/nc-gui-v2/composables/useMetas.ts
@@ -1,6 +1,6 @@
 import type { TableType } from 'nocodb-sdk'
 import { useNuxtApp, useState } from '#app'
-import useProject from '~/composables/useProject'
+import { useProject } from '#imports'
 
 export default () => {
   const { $api } = useNuxtApp()
diff --git a/packages/nc-gui-v2/composables/useTableCreate.ts b/packages/nc-gui-v2/composables/useTableCreate.ts
index 6971797e8c..f6f39dd493 100644
--- a/packages/nc-gui-v2/composables/useTableCreate.ts
+++ b/packages/nc-gui-v2/composables/useTableCreate.ts
@@ -1,6 +1,7 @@
 import type { TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import { useNuxtApp } from '#app'
+import { useProject } from '#imports'
 
 export default (onTableCreate?: (tableMeta: TableType) => void) => {
   const table = reactive<{ title: string; table_name: string; columns: string[] }>({
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index f6584751a6..afa02b242c 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -1,7 +1,7 @@
 import type { Api, FormType, GalleryType, GridType, PaginatedType, TableType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { useNuxtApp } from '#app'
-import useProject from '~/composables/useProject'
+import { useProject } from '#imports'
 import { NOCO } from '~/lib/constants'
 
 const formatData = (list: Record<string, any>[]) =>
diff --git a/packages/nc-gui-v2/pages/nc/[projectId].vue b/packages/nc-gui-v2/pages/nc/[projectId].vue
index 098fd21982..8a64836451 100644
--- a/packages/nc-gui-v2/pages/nc/[projectId].vue
+++ b/packages/nc-gui-v2/pages/nc/[projectId].vue
@@ -1,17 +1,9 @@
 <script setup lang="ts">
-import { watch } from 'vue'
-import useProject from '~/composables/useProject'
-import useTabs from '~/composables/useTabs'
-
 const route = useRoute()
-const { loadProject, loadTables } = useProject()
+const { loadProject, loadTables } = useProject(route.params.projectId as string)
 const { clearTabs, addTab } = useTabs()
 
-onMounted(async () => {
-  await loadProject(route.params.projectId as string)
-  await loadTables()
-  addTab({ type: 'auth', title: 'Team & Auth' })
-})
+addTab({ type: 'auth', title: 'Team & Auth' })
 
 watch(
   () => route.params.projectId,