fix tab switching state issues

- Add useFocusEffect to calendar for automatic event reload on tab focus
- Create ChatStore (Zustand) for persistent chat messages across tab switches
- Replace local useState with store in chat screen

apps/client/src/app/(tabs)/calendar.tsx

@@ -10,7 +10,14 @@ import {
 import { DAYS, MONTHS, Month, ExpandedEvent } from "@caldav/shared";
 import Header from "../../components/Header";
 import { EventCard } from "../../components/EventCard";
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useFocusEffect } from "expo-router";
 import currentTheme from "../../Themes";
 import BaseBackground from "../../components/BaseBackground";
 import { FlashList } from "@shopify/flash-list";
@@ -26,37 +33,39 @@ const Calendar = () => {
 
   const { events, setEvents, deleteEvent } = useEventsStore();
 
-  // Load events when month/year changes
+  // Load events when tab gains focus or month/year changes
   // Include days from prev/next month that are visible in the grid
-  useEffect(() => {
-    const loadEvents = async () => {
-      try {
-        // Calculate first visible day (up to 6 days before month start)
-        const firstOfMonth = new Date(currentYear, monthIndex, 1);
-        const dayOfWeek = firstOfMonth.getDay();
-        const daysFromPrevMonth = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
-        const startDate = new Date(
-          currentYear,
-          monthIndex,
-          1 - daysFromPrevMonth,
-        );
+  useFocusEffect(
+    useCallback(() => {
+      const loadEvents = async () => {
+        try {
+          // Calculate first visible day (up to 6 days before month start)
+          const firstOfMonth = new Date(currentYear, monthIndex, 1);
+          const dayOfWeek = firstOfMonth.getDay();
+          const daysFromPrevMonth = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+          const startDate = new Date(
+            currentYear,
+            monthIndex,
+            1 - daysFromPrevMonth,
+          );
 
-        // Calculate last visible day (6 weeks * 7 days = 42 days total)
-        const endDate = new Date(startDate);
-        endDate.setDate(startDate.getDate() + 41);
-        endDate.setHours(23, 59, 59);
+          // Calculate last visible day (6 weeks * 7 days = 42 days total)
+          const endDate = new Date(startDate);
+          endDate.setDate(startDate.getDate() + 41);
+          endDate.setHours(23, 59, 59);
 
-        const loadedEvents = await EventService.getByDateRange(
-          startDate,
-          endDate,
-        );
-        setEvents(loadedEvents);
-      } catch (error) {
-        console.error("Failed to load events:", error);
-      }
-    };
-    loadEvents();
-  }, [monthIndex, currentYear, setEvents]);
+          const loadedEvents = await EventService.getByDateRange(
+            startDate,
+            endDate,
+          );
+          setEvents(loadedEvents);
+        } catch (error) {
+          console.error("Failed to load events:", error);
+        }
+      };
+      loadEvents();
+    }, [monthIndex, currentYear, setEvents]),
+  );
 
   // Group events by date (YYYY-MM-DD format)
   const eventsByDate = useMemo(() => {