From 7585609510bfccc2e2e21d44935ea36be5667f62 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Sat, 23 Nov 2024 02:19:28 +0800
Subject: [PATCH] intialization issue

---
 .../explorer/SQLEditorNavV2/SQLEditorNav.tsx      |  6 +++---
 .../project/[ref]/explorer/schema/[schema].tsx    | 15 ++++++++-------
 apps/studio/state/tabs.ts                         |  5 ++---
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/apps/studio/components/layouts/explorer/SQLEditorNavV2/SQLEditorNav.tsx b/apps/studio/components/layouts/explorer/SQLEditorNavV2/SQLEditorNav.tsx
index b09981447c2..8d5d1a1fa6e 100644
--- a/apps/studio/components/layouts/explorer/SQLEditorNavV2/SQLEditorNav.tsx
+++ b/apps/studio/components/layouts/explorer/SQLEditorNavV2/SQLEditorNav.tsx
@@ -356,7 +356,7 @@ export const SQLEditorNav = ({ searchText: _searchText }: SQLEditorNavProps) =>
                   data={projectSnippetsTreeState}
                   aria-label="project-level-snippets"
                   nodeRenderer={({ element, ...props }) => {
-                    const tabsStore = getTabsStore(projectRef as string)
+                    const tabsStore = getTabsStore(projectRef)
                     const isOpened = Object.values(tabsStore.tabsMap).some(
                       (tab) => tab.metadata?.sqlId === element.id || tab.id === element.id
                     )
@@ -421,7 +421,7 @@ export const SQLEditorNav = ({ searchText: _searchText }: SQLEditorNavProps) =>
                   data={favoritesTreeState}
                   aria-label="favorite-snippets"
                   nodeRenderer={({ element, ...props }) => {
-                    const tabsStore = getTabsStore(projectRef as string)
+                    const tabsStore = getTabsStore(projectRef)
                     const isOpened = Object.values(tabsStore.tabsMap).some(
                       (tab) => tab.metadata?.sqlId === element.id || tab.id === element.id
                     )
@@ -532,7 +532,7 @@ export const SQLEditorNav = ({ searchText: _searchText }: SQLEditorNavProps) =>
               aria-label="private-snippets"
               expandedIds={defaultExpandedFolderIds}
               nodeRenderer={({ element, ...props }) => {
-                const tabsStore = getTabsStore(projectRef as string)
+                const tabsStore = getTabsStore(projectRef)
                 const isOpened = Object.values(tabsStore.tabsMap).some(
                   (tab) => tab.metadata?.sqlId === element.id || tab.id === element.id
                 )
diff --git a/apps/studio/pages/project/[ref]/explorer/schema/[schema].tsx b/apps/studio/pages/project/[ref]/explorer/schema/[schema].tsx
index d44495e9de1..37461fd6167 100644
--- a/apps/studio/pages/project/[ref]/explorer/schema/[schema].tsx
+++ b/apps/studio/pages/project/[ref]/explorer/schema/[schema].tsx
@@ -1,17 +1,18 @@
-import { useRouter } from 'next/router'
+import { useParams } from 'common'
 import { SchemaGraph } from 'components/interfaces/Database/Schemas/SchemaGraph'
 import { ExplorerLayout } from 'components/layouts/explorer/layout'
-import { ReactFlowProvider } from 'reactflow'
-import type { NextPageWithLayout } from 'types'
-import { getTabsStore, addTab } from 'state/tabs'
-import { useEffect } from 'react'
-import { FileJson2 } from 'lucide-react'
 import { ProjectContextFromParamsProvider } from 'components/layouts/ProjectLayout/ProjectContext'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import { ReactFlowProvider } from 'reactflow'
+import { addTab, getTabsStore } from 'state/tabs'
+import type { NextPageWithLayout } from 'types'
 
 const SchemasPage: NextPageWithLayout = () => {
   const router = useRouter()
+  const { ref } = useParams()
   const schema = router.query.schema as string
-  const store = getTabsStore('explorer')
+  const store = getTabsStore(ref)
 
   useEffect(() => {
     if (schema) {
diff --git a/apps/studio/state/tabs.ts b/apps/studio/state/tabs.ts
index 345023b89fd..50439f58e9a 100644
--- a/apps/studio/state/tabs.ts
+++ b/apps/studio/state/tabs.ts
@@ -45,11 +45,10 @@ export const tabsStore = proxy<TabsStateMap>({})
 
 // Helper to get/create state for a specific ref
 export const getTabsStore = (ref: string | undefined): TabsState => {
-  if (!ref) return defaultState
+  if (!ref) return proxy(defaultState)
   if (!tabsStore[ref]) {
-    // Load from localStorage or use default
     const stored = localStorage.getItem(getStorageKey(ref))
-    tabsStore[ref] = stored ? JSON.parse(stored) : defaultState
+    tabsStore[ref] = proxy(stored ? JSON.parse(stored) : { ...defaultState })
   }
   return tabsStore[ref]
 }