fix: An error occurred on client

Author: HMarzban

packages/webapp/components/notificationPanel/desktop/NotificationPanel.tsx

@@ -19,7 +19,7 @@ export const NotificationPanel = () => {
     setNotificationActiveTab
   } = useStore((state) => state)
 
-  useNotificationSummary()
+  useNotificationSummary({ mobile: false })
   useNotificationTabData()
 
   const activeTabNotifList = useMemo(() => {

packages/webapp/components/notificationPanel/hooks/useNotificationSummary.ts

@@ -4,8 +4,9 @@ import { getNotificationsSummary } from '@api'
 import { useAuthStore, useStore } from '@stores'
 import { TNotificationSummary } from '@types'
 import { useDropdown } from '@components/ui/Dropdown'
+import { useModalBottomToTopOptional } from '@components/ui'
 
-export const useNotificationSummary = () => {
+export const useNotificationSummary = ({ mobile = false }: { mobile: boolean }) => {
   const { workspaceId } = useStore((state) => state.settings)
   const user = useAuthStore((state) => state.profile)
   const {
@@ -16,7 +17,9 @@ export const useNotificationSummary = () => {
     setNotificationTab,
     setNotificationPage
   } = useStore((state) => state)
-  const { isOpen } = useDropdown() || { isOpen: false }
+  const modalContext = mobile ? useModalBottomToTopOptional() : null
+  const dropdownContext = mobile ? null : useDropdown()
+  const isOpen = modalContext?.isOpen || dropdownContext?.isOpen || false
 
   const { request: summaryRequest } = useApi(getNotificationsSummary, null, false)
 

packages/webapp/components/notificationPanel/mobile/NotificationModal.tsx

@@ -12,7 +12,7 @@ import { useNotificationTabData } from '../hooks/useNotificationTabData'
 const NotificationModal = () => {
   const { loadingNotification, notifications, notificationActiveTab } = useStore((state) => state)
 
-  useNotificationSummary()
+  useNotificationSummary({ mobile: true })
   useNotificationTabData()
 
   const activeTabNotifList = useMemo(() => {

packages/webapp/components/ui/ModalBottomToTop.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useImperativeHandle, forwardRef, useState, useEffect } from 'react'
 import { twMerge } from 'tailwind-merge'
+import { useModalBottomToTopOptional } from './ModalBottomToTopContext'
 
 interface ModalBottomToTopProps {
   modalId?: string
@@ -32,21 +33,35 @@ export const ModalBottomToTop = forwardRef<unknown, ModalBottomToTopProps>(
     const [startHeight, setStartHeight] = useState<number>(0)
     const [isTouched, setIsTouched] = useState<boolean>(false)
 
+    // Use context if available, otherwise rely on checkbox state
+    const modalContext = useModalBottomToTopOptional()
+
     const handleCheckboxChange = useCallback(
       (event: React.ChangeEvent<HTMLInputElement>) => {
-        if (event.target.checked) {
+        const isChecked = event.target.checked
+
+        if (isChecked) {
           window.history.pushState({ modal: modalId }, '')
         } else {
           if (window.history.state?.modal === modalId) {
             window.history.back()
           }
         }
 
+        // Update context if available
+        if (modalContext) {
+          if (isChecked) {
+            modalContext.openModal()
+          } else {
+            modalContext.closeModal()
+          }
+        }
+
         if (onModalStateChange) {
-          onModalStateChange(event.target.checked)
+          onModalStateChange(isChecked)
         }
       },
-      [onModalStateChange, modalId]
+      [onModalStateChange, modalId, modalContext]
     )
 
     const handleTouchStart = useCallback(
@@ -91,6 +106,13 @@ export const ModalBottomToTop = forwardRef<unknown, ModalBottomToTopProps>(
       }
     }, [isDragging])
 
+    // Sync context state with checkbox
+    useEffect(() => {
+      if (modalContext && checkboxRef.current) {
+        checkboxRef.current.checked = modalContext.isOpen
+      }
+    }, [modalContext?.isOpen])
+
     useEffect(() => {
       const handlePopState = () => {
         if (checkboxRef.current?.checked) {
@@ -105,22 +127,32 @@ export const ModalBottomToTop = forwardRef<unknown, ModalBottomToTopProps>(
       return () => window.removeEventListener('popstate', handlePopState)
     }, [handleCheckboxChange])
 
-    useImperativeHandle(ref, () => ({
-      check: () => {
-        if (checkboxRef.current) {
-          checkboxRef.current.checked = true
-          handleCheckboxChange({ target: { checked: true } } as React.ChangeEvent<HTMLInputElement>)
-        }
-      },
-      uncheck: () => {
-        if (checkboxRef.current) {
-          checkboxRef.current.checked = false
-          handleCheckboxChange({
-            target: { checked: false }
-          } as React.ChangeEvent<HTMLInputElement>)
+    useImperativeHandle(
+      ref,
+      () => ({
+        check: () => {
+          if (modalContext) {
+            modalContext.openModal()
+          } else if (checkboxRef.current) {
+            checkboxRef.current.checked = true
+            handleCheckboxChange({
+              target: { checked: true }
+            } as React.ChangeEvent<HTMLInputElement>)
+          }
+        },
+        uncheck: () => {
+          if (modalContext) {
+            modalContext.closeModal()
+          } else if (checkboxRef.current) {
+            checkboxRef.current.checked = false
+            handleCheckboxChange({
+              target: { checked: false }
+            } as React.ChangeEvent<HTMLInputElement>)
+          }
         }
-      }
-    }))
+      }),
+      [modalContext, handleCheckboxChange]
+    )
 
     return (
       <div className={twMerge('bottom-to-top-modal', className)}>
@@ -153,7 +185,7 @@ export const ModalBottomToTop = forwardRef<unknown, ModalBottomToTopProps>(
                 onTouchStart={handleTouchStart}
                 onTouchMove={handleTouchMove}
                 onTouchEnd={handleTouchEnd}>
-                <div className="h-2 w-24 rounded-md bg-neutral group-hover:drop-shadow-md" />
+                <div className="bg-neutral h-2 w-24 rounded-md group-hover:drop-shadow-md" />
               </div>
               {children}
             </div>
@@ -162,7 +194,7 @@ export const ModalBottomToTop = forwardRef<unknown, ModalBottomToTopProps>(
           <div
             ref={contentRef}
             className={twMerge(
-              'modal-content sticky bottom-0 left-0 right-0 z-50 w-full max-w-md translate-y-full rounded-t-2xl bg-white shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)] transition-transform duration-300 ease-in-out peer-checked:translate-y-0',
+              'modal-content sticky right-0 bottom-0 left-0 z-50 w-full max-w-md translate-y-full rounded-t-2xl bg-white shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)] transition-transform duration-300 ease-in-out peer-checked:translate-y-0',
               contentClassName
             )}
             style={{ height: modalHeight ? `${modalHeight}px` : '300px', maxHeight: '100%' }}>
@@ -174,7 +206,7 @@ export const ModalBottomToTop = forwardRef<unknown, ModalBottomToTopProps>(
               onTouchStart={handleTouchStart}
               onTouchMove={handleTouchMove}
               onTouchEnd={handleTouchEnd}>
-              <div className="h-2 w-24 rounded-md bg-neutral group-hover:drop-shadow-md" />
+              <div className="bg-neutral h-2 w-24 rounded-md group-hover:drop-shadow-md" />
             </div>
             {children}
           </div>

packages/webapp/components/ui/ModalBottomToTopContext.tsx

@@ -0,0 +1,65 @@
+import React, { createContext, useContext, useState, useCallback, ReactNode } from 'react'
+
+interface ModalBottomToTopContextValue {
+  isOpen: boolean
+  openModal: () => void
+  closeModal: () => void
+  toggleModal: () => void
+}
+
+const ModalBottomToTopContext = createContext<ModalBottomToTopContextValue | null>(null)
+
+interface ModalBottomToTopProviderProps {
+  children: ReactNode
+  onModalStateChange?: (isOpen: boolean) => void
+}
+
+export const ModalBottomToTopProvider = ({
+  children,
+  onModalStateChange
+}: ModalBottomToTopProviderProps) => {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const openModal = useCallback(() => {
+    setIsOpen(true)
+    onModalStateChange?.(true)
+  }, [onModalStateChange])
+
+  const closeModal = useCallback(() => {
+    setIsOpen(false)
+    onModalStateChange?.(false)
+  }, [onModalStateChange])
+
+  const toggleModal = useCallback(() => {
+    setIsOpen((prev) => {
+      const newState = !prev
+      onModalStateChange?.(newState)
+      return newState
+    })
+  }, [onModalStateChange])
+
+  return (
+    <ModalBottomToTopContext.Provider
+      value={{
+        isOpen,
+        openModal,
+        closeModal,
+        toggleModal
+      }}>
+      {children}
+    </ModalBottomToTopContext.Provider>
+  )
+}
+
+export const useModalBottomToTop = () => {
+  const context = useContext(ModalBottomToTopContext)
+  if (!context) {
+    throw new Error('useModalBottomToTop must be used within a ModalBottomToTopProvider')
+  }
+  return context
+}
+
+// Optional hook that doesn't throw if no provider exists
+export const useModalBottomToTopOptional = () => {
+  return useContext(ModalBottomToTopContext)
+}

packages/webapp/components/ui/index.ts

@@ -0,0 +1,6 @@
+export { ModalBottomToTop } from './ModalBottomToTop'
+export {
+  ModalBottomToTopProvider,
+  useModalBottomToTop,
+  useModalBottomToTopOptional
+} from './ModalBottomToTopContext'