📈: integrate toggle logging for sidebar and visibility button actions

frontend/.changeset/ninety-llamas-beam.md

@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+📈: integrate toggle logging for sidebar and visibility button actions

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

@@ -6,12 +6,13 @@ import {
   getSidebarStateFromCookie,
 } from '@liam-hq/ui'
 import { ReactFlowProvider } from '@xyflow/react'
-import type { FC } from 'react'
+import { type FC, useCallback, useState } from 'react'
 import { AppBar } from './AppBar'
 import { ERDContent } from './ERDContent'
 import styles from './ERDRenderer.module.css'
 import { LeftPane } from './LeftPane'
 import '@/styles/globals.css'
+import { toggleLogEvent } from '@/features/gtm/utils'
 import { useDBStructureStore, useUserEditingStore } from '@/stores'
 // biome-ignore lint/nursery/useImportRestrictions: Fixed in the next PR.
 import { Toolbar } from './ERDContent/Toolbar'
@@ -20,18 +21,32 @@ import { convertDBStructureToNodes } from './convertDBStructureToNodes'
 
 export const ERDRenderer: FC = () => {
   const defaultOpen = getSidebarStateFromCookie()
+  const [open, setOpen] = useState(defaultOpen)
+
   const { showMode } = useUserEditingStore()
   const dbStructure = useDBStructureStore()
   const { nodes, edges } = convertDBStructureToNodes({
     dbStructure,
     showMode,
   })
 
+  const handleChangeOpen = useCallback((open: boolean) => {
+    setOpen(open)
+    toggleLogEvent({
+      element: 'leftPane',
+      isShow: open,
+    })
+  }, [])
+
   return (
     <div className={styles.wrapper}>
       <ToastProvider>
         <AppBar />
-        <SidebarProvider defaultOpen={defaultOpen}>
+        <SidebarProvider
+          open={open}
+          defaultOpen={defaultOpen}
+          onOpenChange={handleChangeOpen}
+        >
           <ReactFlowProvider>
             <div className={styles.mainWrapper}>
               <LeftPane />

frontend/packages/erd-core/src/components/ERDRenderer/LeftPane/TableNameMenuButton/VisibilityButton.tsx

@@ -1,3 +1,4 @@
+import { toggleLogEvent } from '@/features/gtm/utils'
 import { Eye, EyeClosed, SidebarMenuAction } from '@liam-hq/ui'
 import { useReactFlow } from '@xyflow/react'
 import { type FC, type MouseEvent, useCallback } from 'react'
@@ -15,8 +16,13 @@ export const VisibilityButton: FC<Props> = ({ tableName, hidden }) => {
     (event: MouseEvent) => {
       event.stopPropagation()
       updateNode(tableName, (node) => ({ ...node, hidden: !node.hidden }))
+      toggleLogEvent({
+        element: 'tableNameMenuButton',
+        isShow: !!hidden,
+        tableId: tableName,
+      })
     },
-    [updateNode, tableName],
+    [updateNode, tableName, hidden],
   )
 
   return (