feat: Add url query params for quick access

frontend/.changeset/stupid-insects-sneeze.md

@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+Add url query params for quick access

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx

@@ -16,6 +16,7 @@ import { type FC, useCallback, useEffect } from 'react'
 import styles from './ERDContent.module.css'
 import { RelationshipEdge } from './RelationshipEdge'
 import { TableNode } from './TableNode'
+import { useActiveTableNameFromUrl } from './useActiveTableNameFromUrl'
 import { useAutoLayout } from './useAutoLayout'
 import { useFitViewWhenActiveTableChange } from './useFitViewWhenActiveTableChange'
 
@@ -70,6 +71,7 @@ export const ERDContent: FC<Props> = ({
   }, [_nodes, _edges, setNodes, setEdges])
 
   useAutoLayout()
+  useActiveTableNameFromUrl()
   useFitViewWhenActiveTableChange(
     enabledFeatures?.fitViewWhenActiveTableChange ?? true,
   )

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/useActiveTableNameFromUrl.ts

@@ -0,0 +1,15 @@
+import type { QueryParam } from '@/schemas/queryParam'
+import { updateActiveTableName } from '@/stores'
+import { useEffect } from 'react'
+
+export const useActiveTableNameFromUrl = () => {
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search)
+    const activeQueryParam: QueryParam = 'active'
+    const tableFromUrl = urlParams.get(activeQueryParam)
+
+    if (!tableFromUrl) return
+
+    updateActiveTableName(tableFromUrl)
+  }, [])
+}

frontend/packages/erd-core/src/schemas/queryParam/index.ts

@@ -0,0 +1,2 @@
+export * from './schemas'
+export * from './types'

frontend/packages/erd-core/src/schemas/queryParam/schemas.ts

@@ -0,0 +1,3 @@
+import { picklist } from 'valibot'
+
+export const queryParamSchema = picklist(['active'])

frontend/packages/erd-core/src/schemas/queryParam/types.ts

@@ -0,0 +1,4 @@
+import type { InferOutput } from 'valibot'
+import type { queryParamSchema } from './schemas'
+
+export type QueryParam = InferOutput<typeof queryParamSchema>

frontend/packages/erd-core/src/stores/userEditing/store.ts

@@ -1,5 +1,6 @@
+import type { QueryParam } from '@/schemas/queryParam'
 import type { ShowMode } from '@/schemas/showMode'
-import { proxy } from 'valtio'
+import { proxy, subscribe } from 'valtio'
 
 type UserEditingStore = {
   active: {
@@ -14,3 +15,17 @@ export const userEditingStore = proxy<UserEditingStore>({
   },
   showMode: 'ALL_FIELDS',
 })
+
+subscribe(userEditingStore.active, () => {
+  const newTableName = userEditingStore.active.tableName
+  const url = new URL(window.location.href)
+  const activeQueryParam: QueryParam = 'active'
+
+  if (newTableName) {
+    url.searchParams.set(activeQueryParam, newTableName)
+  } else {
+    url.searchParams.delete(activeQueryParam)
+  }
+
+  window.history.pushState({}, '', url)
+})