tracking in side panel & terminal

Author: Aniket-Engg

apps/remix-ide/src/app/components/side-panel.tsx

@@ -5,7 +5,7 @@ import { RemixPluginPanel } from '@remix-ui/panel'
 import packageJson from '../../../../../package.json'
 import { RemixUIPanelHeader } from '@remix-ui/panel'
 import { PluginViewWrapper } from '@remix-ui/helper'
-// const csjs = require('csjs-inject')
+import { trackMatomoEvent } from '@remix-api'
 
 const sidePanel = {
   name: 'sidePanel',
@@ -39,6 +39,7 @@ export class SidePanel extends AbstractPanel {
       if (this.isHidden) {
         const sidePanel = document.querySelector('#side-panel')
         sidePanel?.classList.add('d-none')
+        trackMatomoEvent(this, { category: 'topbar', action: 'leftSidePanel', name: 'hiddenOnLoad', isClick: false })
       }
     } else {
       // Initialize with default state if not found
@@ -69,6 +70,7 @@ export class SidePanel extends AbstractPanel {
         panelStates.leftSidePanel.pluginProfile = this.plugins[name]?.profile
         window.localStorage.setItem('panelStates', JSON.stringify(panelStates))
 
+        trackMatomoEvent(this, { category: 'topbar', action: 'leftSidePanel', name: 'shownOnVerticalIconClick', isClick: false })
         this.showContent(name)
         this.emit('leftSidePanelShown')
         this.events.emit('leftSidePanelShown')
@@ -92,6 +94,7 @@ export class SidePanel extends AbstractPanel {
         }
         window.localStorage.setItem('panelStates', JSON.stringify(panelStates))
 
+        trackMatomoEvent(this, { category: 'topbar', action: 'leftSidePanel', name: 'hiddenOnVerticalIconClick', isClick: false })
         // Emit explicit panel state events for proper synchronization
         this.emit('leftSidePanelHidden')
         this.events.emit('leftSidePanelHidden')
@@ -134,6 +137,7 @@ export class SidePanel extends AbstractPanel {
         panelStates.leftSidePanel.pluginProfile = this.plugins[name]?.profile
         window.localStorage.setItem('panelStates', JSON.stringify(panelStates))
 
+        trackMatomoEvent(this, { category: 'topbar', action: 'leftSidePanel', name: 'shownOnForceShowContent', isClick: false })
         this.showContent(name)
         this.emit('leftSidePanelShown')
         this.events.emit('leftSidePanelShown')
@@ -207,11 +211,13 @@ export class SidePanel extends AbstractPanel {
     if (this.isHidden) {
       this.isHidden = false
       sidePanel?.classList.remove('d-none')
+      trackMatomoEvent(this, { category: 'topbar', action: 'leftSidePanel', name: 'shownOnToggleIconClick', isClick: false })
       this.emit('leftSidePanelShown')
       this.events.emit('leftSidePanelShown')
     } else {
       this.isHidden = true
       sidePanel?.classList.add('d-none')
+      trackMatomoEvent(this, { category: 'topbar', action: 'leftSidePanel', name: 'hiddenOnToggleIconClick', isClick: false })
       this.emit('leftSidePanelHidden')
       this.events.emit('leftSidePanelHidden')
     }

apps/remix-ide/src/app/panels/terminal.tsx

@@ -10,6 +10,7 @@ import EventManager from '../../lib/events'
 
 import { CompilerImports } from '@remix-project/core-plugin' // eslint-disable-line
 import { RemixUiXterminals } from '@remix-ui/xterm'
+import { trackMatomoEvent } from '@remix-api'
 
 const KONSOLES = []
 
@@ -125,6 +126,7 @@ export default class Terminal extends Plugin {
       if (this.isHidden) {
         const terminalPanel = document.querySelector('.terminal-wrap')
         terminalPanel?.classList.add('d-none')
+        trackMatomoEvent(this, { category: 'topbar', action: 'terminalPanel', name: 'hiddenOnLoad', isClick: false })
       }
     } else {
       // Initialize with default state if not found
@@ -164,6 +166,7 @@ export default class Terminal extends Plugin {
     const terminalPanel = document.querySelector('.terminal-wrap')
     this.isHidden = false
     terminalPanel?.classList.remove('d-none')
+    trackMatomoEvent(this, { category: 'topbar', action: 'terminalPanel', name: 'shownOnLog', isClick: false })
     this.emit('terminalPanelShown')
 
     // Persist the state
@@ -180,10 +183,12 @@ export default class Terminal extends Plugin {
     if (this.isHidden) {
       this.isHidden = false
       terminalPanel?.classList.remove('d-none')
+      trackMatomoEvent(this, { category: 'topbar', action: 'terminalPanel', name: 'shownOnToggleIconClick', isClick: false })
       this.emit('terminalPanelShown')
     } else {
       this.isHidden = true
       terminalPanel?.classList.add('d-none')
+      trackMatomoEvent(this, { category: 'topbar', action: 'terminalPanel', name: 'hiddenOnToggleIconClick', isClick: false })
       this.emit('terminalPanelHidden')
     }
     // Persist the hidden state and plugin profile to panelStates