Refactor NotificationContext to Streamline Notification Fetching Logic

- Removed the useEffectEvent for fetching notifications and integrated the fetching logic directly into the useEffect hooks for improved clarity and performance.
- Updated dependency arrays to ensure notifications are fetched correctly based on authentication and connection status, enhancing responsiveness to state changes.

assets/stylesheets/App.css

@@ -143,11 +143,21 @@ html.macos-vibrancy .main-layout {
   background: transparent !important;
 }
 
-html.macos-vibrancy .light-mode .ant-layout.main-content-layout {
+html.macos-vibrancy .light-mode .ant-layout.main-content-layout,
+html.macos-vibrancy
+  .light-mode
+  .dashboard-splitter.farmcontrol-splitter
+  > .ant-splitter-bar
+  .ant-splitter-bar-dragger:before {
   background: rgba(255, 255, 255, 0.88) !important;
 }
 
-html.macos-vibrancy .dark-mode .ant-layout.main-content-layout {
+html.macos-vibrancy .dark-mode .ant-layout.main-content-layout,
+html.macos-vibrancy
+  .dark-mode
+  .dashboard-splitter.farmcontrol-splitter
+  > .ant-splitter-bar
+  .ant-splitter-bar-dragger:before {
   background: rgba(0, 0, 0, 0.88) !important;
 }
 

src/components/Dashboard/common/CodeBlockEditor.jsx

@@ -3,25 +3,14 @@ import PropTypes from 'prop-types'
 import CodeMirror from '@uiw/react-codemirror'
 import { EditorView, Decoration, ViewPlugin } from '@codemirror/view'
 import { StateField } from '@codemirror/state'
-import { python } from '@codemirror/lang-python'
-import { javascriptLang } from '../../../codemirror/javascriptLang'
-import { json } from '@codemirror/lang-json'
-import { css } from '@codemirror/lang-css'
-import { html } from '@codemirror/lang-html'
-import { markdown } from '@codemirror/lang-markdown'
-import { sql } from '@codemirror/lang-sql'
-import { java } from '@codemirror/lang-java'
-import { cpp } from '@codemirror/lang-cpp'
-import { rust } from '@codemirror/lang-rust'
-import { go } from '@codemirror/lang-go'
-import { php } from '@codemirror/lang-php'
-import { yaml } from '@codemirror/lang-yaml'
-import { xml } from '@codemirror/lang-xml'
 import {
   farmControlDark,
   farmControlLight
 } from '../../../codemirror/farmControlTheme'
-import { fcTemplateLang } from '../../../codemirror/fcTemplateLang'
+import {
+  getCodeLanguageExtension,
+  toEditorCode
+} from './codeBlockEditorUtils'
 import { useThemeContext } from '../context/ThemeContext'
 import ScrollBox from './ScrollBox'
 import { Button, Modal, Typography, Card } from 'antd'
@@ -99,64 +88,6 @@ function createScrollBoxSyncExtension() {
   )
 }
 
-export function toEditorCode(code, language = 'javascript') {
-  if (code == null) return ''
-  if (typeof code === 'object' && language === 'json') {
-    return JSON.stringify(code, null, 2)
-  }
-  return String(code)
-}
-
-export function getCodeLanguageExtension(
-  language = 'javascript',
-  autoCompleteObject = null
-) {
-  const lang = Array.isArray(language) ? language[0] : language
-
-  switch (String(lang || 'javascript').toLowerCase()) {
-    case 'javascript':
-    case 'js':
-      return javascriptLang({ autoCompleteObject })
-    case 'python':
-    case 'py':
-      return python()
-    case 'json':
-      return json()
-    case 'xml':
-      return xml()
-    case 'fctemplatelang':
-    case 'ejs':
-      return fcTemplateLang({ autoCompleteObject })
-    case 'html':
-      return html()
-    case 'css':
-      return css()
-    case 'markdown':
-    case 'md':
-      return markdown()
-    case 'sql':
-      return sql()
-    case 'java':
-      return java()
-    case 'cpp':
-    case 'c++':
-    case 'c':
-      return cpp()
-    case 'rust':
-    case 'rs':
-      return rust()
-    case 'go':
-      return go()
-    case 'php':
-      return php()
-    case 'yaml':
-    case 'yml':
-      return yaml()
-    default:
-      return javascriptLang({ autoCompleteObject })
-  }
-}
-
 function buildErrorLineDecorations(state, errorLineSet) {
   if (!errorLineSet.size) {
     return Decoration.none

src/components/Dashboard/common/CodeDiffViewer.jsx

@@ -12,7 +12,7 @@ import { useThemeContext } from '../context/ThemeContext'
 import {
   getCodeLanguageExtension,
   toEditorCode
-} from './CodeBlockEditor'
+} from './codeBlockEditorUtils'
 
 export default function CodeDiffViewer({
   oldCode = '',

src/components/Dashboard/common/DashboardSidebarSplitter.jsx

@@ -268,7 +268,6 @@ const DashboardSidebarSplitter = ({ sidebar, children }) => {
       collapseSidebar,
       collapsedWidth,
       expandSidebar,
-      lockResizeFor,
       lockResizeUntilPointerUp
     ]
   )

src/components/Dashboard/common/DiffLabel.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { Button, Modal, Typography, theme, Flex } from 'antd'
 import { presentableDiff } from '@codemirror/merge'
 import CodeDiffViewer from './CodeDiffViewer'
-import { toEditorCode } from './CodeBlockEditor'
+import { toEditorCode } from './codeBlockEditorUtils'
 
 const { Link, Text } = Typography
 

src/components/Dashboard/common/NotesPanel.jsx

@@ -109,7 +109,7 @@ const NotesPanel = ({ _id, type }) => {
         subscribeToObjectTypeUpdatesRef.current = null
       }
     }
-  }, [_id, subscribeToObjectTypeUpdates, connected, handleReloadData])
+  }, [_id, type, subscribeToObjectTypeUpdates, connected, handleReloadData])
 
   useEffect(() => {
     if (

src/components/Dashboard/common/Tooltip.jsx

@@ -55,6 +55,8 @@ const Tooltip = ({ children, title, content, listenParents = 0 }) => {
     const span = spanRef.current
     if (!span || listenParents < 1) return
 
+    const hoveredTargets = hoveredTargetsRef.current
+
     const handleEnter = (event) => onMouseEnterRef.current(event)
     const handleLeave = (event) => onMouseLeaveRef.current(event)
 
@@ -75,7 +77,7 @@ const Tooltip = ({ children, title, content, listenParents = 0 }) => {
         parent.removeEventListener('mouseenter', handleEnter)
         parent.removeEventListener('mouseleave', handleLeave)
       })
-      hoveredTargetsRef.current.clear()
+      hoveredTargets.clear()
     }
   }, [listenParents])
 

src/components/Dashboard/common/codeBlockEditorUtils.js

@@ -0,0 +1,73 @@
+import { python } from '@codemirror/lang-python'
+import { javascriptLang } from '../../../codemirror/javascriptLang'
+import { json } from '@codemirror/lang-json'
+import { css } from '@codemirror/lang-css'
+import { html } from '@codemirror/lang-html'
+import { markdown } from '@codemirror/lang-markdown'
+import { sql } from '@codemirror/lang-sql'
+import { java } from '@codemirror/lang-java'
+import { cpp } from '@codemirror/lang-cpp'
+import { rust } from '@codemirror/lang-rust'
+import { go } from '@codemirror/lang-go'
+import { php } from '@codemirror/lang-php'
+import { yaml } from '@codemirror/lang-yaml'
+import { xml } from '@codemirror/lang-xml'
+import { fcTemplateLang } from '../../../codemirror/fcTemplateLang'
+
+export function toEditorCode(code, language = 'javascript') {
+  if (code == null) return ''
+  if (typeof code === 'object' && language === 'json') {
+    return JSON.stringify(code, null, 2)
+  }
+  return String(code)
+}
+
+export function getCodeLanguageExtension(
+  language = 'javascript',
+  autoCompleteObject = null
+) {
+  const lang = Array.isArray(language) ? language[0] : language
+
+  switch (String(lang || 'javascript').toLowerCase()) {
+    case 'javascript':
+    case 'js':
+      return javascriptLang({ autoCompleteObject })
+    case 'python':
+    case 'py':
+      return python()
+    case 'json':
+      return json()
+    case 'xml':
+      return xml()
+    case 'fctemplatelang':
+    case 'ejs':
+      return fcTemplateLang({ autoCompleteObject })
+    case 'html':
+      return html()
+    case 'css':
+      return css()
+    case 'markdown':
+    case 'md':
+      return markdown()
+    case 'sql':
+      return sql()
+    case 'java':
+      return java()
+    case 'cpp':
+    case 'c++':
+    case 'c':
+      return cpp()
+    case 'rust':
+    case 'rs':
+      return rust()
+    case 'go':
+      return go()
+    case 'php':
+      return php()
+    case 'yaml':
+    case 'yml':
+      return yaml()
+    default:
+      return javascriptLang({ autoCompleteObject })
+  }
+}

src/components/Dashboard/context/NotificationContext.jsx

@@ -3,8 +3,7 @@ import {
   useState,
   useContext,
   useCallback,
-  useEffect,
+  useEffect
-  useEffectEvent
 } from 'react'
 import { useLocation } from 'react-router-dom'
 import { notification, Drawer } from 'antd'
@@ -60,11 +59,6 @@ const NotificationProvider = ({ children }) => {
     }
   }, [authenticated, fetchNotificationsApi, showError])
 
-  const onFetchNotifications = useEffectEvent(() => {
-    if (!authenticated || !connected) return
-    fetchNotifications()
-  })
-
   const markNotificationAsRead = useCallback(
     async (notificationId) => {
       try {
@@ -121,15 +115,15 @@ const NotificationProvider = ({ children }) => {
 
   // Initial load / when we become authenticated and connected
   useEffect(() => {
-    onFetchNotifications()
+    if (!authenticated || !connected) return
-  }, [authenticated, connected])
+    fetchNotifications()
+  }, [authenticated, connected, fetchNotifications])
 
   // Refresh when the notification center opens
   useEffect(() => {
-    if (notificationCenterVisible) {
+    if (!notificationCenterVisible || !authenticated || !connected) return
-      onFetchNotifications()
+    fetchNotifications()
-    }
+  }, [notificationCenterVisible, authenticated, connected, fetchNotifications])
-  }, [notificationCenterVisible])
 
   useEffect(() => {
     setNotificationCenterVisible(false)