Refactor NotesPanel component to improve state management and loading behavior

- Removed unnecessary initialized state and replaced it with refs for notes ID and type to optimize re-rendering.
- Updated useEffect dependencies to ensure proper data fetching based on changes in notes ID and type.
- Enhanced loading state handling during note fetching for better user experience.

assets/stylesheets/App.css

@@ -344,7 +344,8 @@ body {
   overflow: hidden;
 }
 
-.ant-modal-mask {
+.ant-modal-mask,
+.ant-drawer-mask {
   backdrop-filter: blur(3px);
 }
 
@@ -967,7 +968,8 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
 }
 
 .electron-body .ant-modal-wrap,
-.electron-body .ant-modal-mask {
+.electron-body .ant-modal-mask,
+.electron-body .ant-drawer {
   top: 41px;
 }
 

src/components/Dashboard/common/NotesPanel.jsx

@@ -25,12 +25,14 @@ const { Text } = Typography
 const NotesPanel = ({ _id, type }) => {
   const [newNoteOpen, setNewNoteOpen] = useState(false)
   const [loading, setLoading] = useState(true)
-  const [initialized, setInitialized] = useState(false)
   const [error, setError] = useState(null)
   const [notes, setNotes] = useState(null)
   const [expandedNotes, setExpandedNotes] = useState({})
   const subscribeToObjectTypeUpdatesRef = useRef(null)
 
+  const notesIdRef = useRef(null)
+  const notesTypeRef = useRef(null)
+
   const { token } = useContext(AuthContext)
   const { fetchNotes, connected, subscribeToObjectTypeUpdates } =
     useContext(ApiServerContext)
@@ -50,6 +52,7 @@ const NotesPanel = ({ _id, type }) => {
 
   const generateNotes = useCallback(
     async (id) => {
+      setLoading(true)
       const notesData = await fetchData(id)
       setLoading(false)
 
@@ -108,11 +111,16 @@ const NotesPanel = ({ _id, type }) => {
   }, [_id, subscribeToObjectTypeUpdates, connected, handleReloadData])
 
   useEffect(() => {
-    if (connected == true && token != null && !initialized) {
+    if (
+      connected == true &&
+      token != null &&
+      (_id != notesIdRef.current || type != notesTypeRef.current)
+    ) {
       handleReloadData()
-      setInitialized(true)
+      notesIdRef.current = _id
+      notesTypeRef.current = type
     }
-  }, [token, handleReloadData, initialized, connected])
+  }, [token, handleReloadData, connected, _id, type])
 
   const actionItems = {
     items: [

src/components/Dashboard/context/NotificationContext.jsx

@@ -13,7 +13,6 @@ import { ApiServerContext } from './ApiServerContext'
 import NotificationCenter from '../common/NotificationCenter'
 import Notification from '../common/Notification'
 import { useMediaQuery } from 'react-responsive'
-import { ElectronContext } from './ElectronContext'
 
 const NotificationContext = createContext()
 
@@ -36,8 +35,6 @@ const NotificationProvider = ({ children }) => {
   const [notifications, setNotifications] = useState([])
   const [notificationsLoading, setNotificationsLoading] = useState(false)
 
-  const { isElectron } = useContext(ElectronContext)
-
   const isMobile = useMediaQuery({ maxWidth: 768 })
 
   const fetchNotifications = useCallback(async () => {
@@ -183,7 +180,6 @@ const NotificationProvider = ({ children }) => {
         title='Notifications'
         placement='right'
         width={isMobile ? '100%' : 460}
-        style={{ marginTop: isElectron ? '40px' : '0px' }}
         onClose={() => setNotificationCenterVisible(false)}
         open={notificationCenterVisible}
       >