fix(calendar): calendar day selection and month navigation not updating

src/components/ui/tooltip/clickable-tooltip.tsx

@@ -25,6 +25,7 @@ interface ClickableTooltipProps {
 	triggerRef: RefObject<HTMLElement | null>
 	isOpen: boolean
 	setIsOpen: (isOpen: boolean) => void
+	toggleOnTriggerClick?: boolean
 }
 
 const ClickableTooltip = ({
@@ -37,6 +38,7 @@ const ClickableTooltip = ({
 	triggerRef,
 	isOpen,
 	setIsOpen,
+	toggleOnTriggerClick = true,
 }: ClickableTooltipProps) => {
 	const [calculatedPosition, setCalculatedPosition] = useState<Position>(position)
 	const [tooltipCoords, setTooltipCoords] = useState({ x: 0, y: 0 })
@@ -151,7 +153,7 @@ const ClickableTooltip = ({
 	}, [isOpen, closeOnClickOutside])
 
 	useEffect(() => {
-		if (!triggerRef?.current) return
+		if (!toggleOnTriggerClick || !triggerRef?.current) return
 
 		const handleClick = (e: Event) => {
 			e.preventDefault()
@@ -165,7 +167,7 @@ const ClickableTooltip = ({
 		return () => {
 			element.removeEventListener('click', handleClick, true)
 		}
-	}, [triggerRef, isOpen])
+	}, [triggerRef, isOpen, toggleOnTriggerClick])
 
 	const variants = {
 		top: {

src/context/date.context.tsx

@@ -1,5 +1,5 @@
 import type React from 'react'
-import { createContext, useContext, useEffect, useState } from 'react'
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import {
 	convertShamsiToHijri,
 	getCurrentDate,
@@ -44,44 +44,54 @@ export const DateProvider: React.FC<{ children: React.ReactNode }> = ({ children
 		setSelectedDate(newToday.clone())
 	}, [timezone])
 
-	const goToToday = () => {
+	const goToToday = useCallback(() => {
 		const newToday = getCurrentDate(timezone.value)
 		setCurrentDate(newToday.clone())
 		setSelectedDate(newToday.clone())
-	}
+	}, [timezone])
 
-	const isToday = (date: WidgetifyDate): boolean => {
-		return (
-			date.jDate() === today.jDate() &&
-			date.jMonth() === today.jMonth() &&
-			date.jYear() === today.jYear()
-		)
-	}
+	const isToday = useCallback(
+		(date: WidgetifyDate): boolean => {
+			return (
+				date.jDate() === today.jDate() &&
+				date.jMonth() === today.jMonth() &&
+				date.jYear() === today.jYear()
+			)
+		},
+		[today]
+	)
 
-	const getHijriDate = (date: WidgetifyDate): string => {
+	const getHijriDate = useCallback((date: WidgetifyDate): string => {
 		const hijriDate = convertShamsiToHijri(date)
 		return `${hijriDate.iYear()}/${hijriDate.iMonth() + 1}/${hijriDate.iDate()}`
-	}
+	}, [])
 
 	const todayIsHoliday = activeDate.day() === 5
 
-	return (
-		<DateContext.Provider
-			value={{
-				currentDate,
-				selectedDate,
-				todayIsHoliday,
-				today,
-				setCurrentDate,
-				setSelectedDate,
-				goToToday,
-				isToday,
-				getHijriDate,
-			}}
-		>
-			{children}
-		</DateContext.Provider>
+	const value = useMemo(
+		() => ({
+			currentDate,
+			selectedDate,
+			todayIsHoliday,
+			today,
+			setCurrentDate,
+			setSelectedDate,
+			goToToday,
+			isToday,
+			getHijriDate,
+		}),
+		[
+			currentDate,
+			selectedDate,
+			todayIsHoliday,
+			today,
+			goToToday,
+			isToday,
+			getHijriDate,
+		]
 	)
+
+	return <DateContext.Provider value={value}>{children}</DateContext.Provider>
 }
 
 export const useDate = (): DateContextType => {

src/context/widget-visibility.context.tsx

@@ -9,13 +9,14 @@ import {
 import Analytics from '@/analytics'
 import { getFromStorage, setToStorage } from '@/common/storage'
 import { showToast } from '@/common/toast'
-import CalendarLayout from '@/layouts/widgets/calendar/calendar'
 import { ComboWidget } from '@/layouts/widgets/combo-widget/combo-widget.layout'
 import { HabitsLayout } from '@/layouts/widgets/habit/habits.layout'
+import { WidgetKeys as RegistryWidgetKeys } from '@/layouts/widgets/layout-engine/types'
 import { NetworkLayout } from '@/layouts/widgets/network/network.layout'
 import { NewsLayout } from '@/layouts/widgets/news/news.layout'
 import { ToolsLayout } from '@/layouts/widgets/tools/tools.layout'
 import { WeatherLayout } from '@/layouts/widgets/weather/weather.layout'
+import { WIDGET_DEFINITIONS } from '@/layouts/widgets/widget-registry'
 import { WigiArzLayout } from '@/layouts/widgets/wigi-arz/wigi_arz.layout'
 import { YadkarWidget } from '@/layouts/widgets/yadkar/yadkar'
 import {
@@ -67,7 +68,10 @@ export const widgetItems: WidgetItem[] = [
 		emoji: '📅',
 		label: 'تقویم',
 		order: 0,
-		node: <CalendarLayout size={{ w: 2, h: 3 }} />,
+		node: WIDGET_DEFINITIONS[RegistryWidgetKeys.calendar].node('calendar', {
+			w: 2,
+			h: 3,
+		}),
 		canToggle: true,
 		popular: true,
 	},

src/layouts/widgets/calendar/components/calendar-grid.tsx

@@ -2,7 +2,7 @@ import { useAuth } from '@/context/auth.context'
 import { useGeneralSetting } from '@/context/general-setting.context'
 import { useGetEvents } from '@/services/hooks/date/get-events.hook'
 import type React from 'react'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import { type WidgetifyDate, formatDateStr } from '../utils'
 import { DayItem } from './day/day'
 import { ClickableTooltip } from '@/components/ui'
@@ -53,6 +53,7 @@ export const CalendarGrid: React.FC<CalendarGridProps> = ({
 	const nextMonthDays = totalCells - daysInMonth - emptyDays
 
 	const selectedDateStr = formatDateStr(selectedDate)
+	const triggerRef = useMemo(() => ({ current: clickedElement }), [clickedElement])
 
 	return (
 		<>
@@ -109,9 +110,11 @@ export const CalendarGrid: React.FC<CalendarGridProps> = ({
 
 			{clickedElement && (
 				<ClickableTooltip
-					triggerRef={{ current: clickedElement }}
+					triggerRef={triggerRef}
+					toggleOnTriggerClick={false}
 					content={
 						<CalendarDayDetails
+							selectedDate={selectedDate}
 							events={eventsForCalendar}
 							moods={calendarData?.moods ?? []}
 							onMoodChange={() => refetch()}

src/layouts/widgets/calendar/components/day/tool-tip-content.tsx

@@ -5,6 +5,7 @@ import {
 	getHijriEvents,
 	getShamsiEvents,
 	hijriMonthNames,
+	type WidgetifyDate,
 } from '../../utils'
 import { useDate } from '@/context/date.context'
 import type React from 'react'
@@ -23,18 +24,20 @@ import { moodOptions } from '@/common/constant/moods'
 import { Icon } from '@/src/icons'
 
 interface CalendarDayDetailsProps {
+	selectedDate: WidgetifyDate
 	events: FetchedAllEvents
 	eventIcon?: string
 	moods: MoodEntry[]
 	onMoodChange?: (mood: MoodType) => void
 }
 
 export const CalendarDayDetails: React.FC<CalendarDayDetailsProps> = ({
+	selectedDate,
 	events,
 	moods,
 	onMoodChange,
 }) => {
-	const { selectedDate, today, getHijriDate } = useDate()
+	const { today, getHijriDate } = useDate()
 	const { isAuthenticated } = useAuth()
 	const { mutateAsync: upsertMoodLog } = useUpsertMoodLog()