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(() => {

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

@@ -5,6 +5,7 @@ import Header from "../../components/Header";
 import BaseBackground from "../../components/BaseBackground";
 import { FlashList } from "@shopify/flash-list";
 import { ChatService } from "../../services";
+import { useChatStore, MessageData } from "../../stores";
 import { ProposedEventChange } from "@caldav/shared";
 import { ProposedEventCard } from "../../components/ProposedEventCard";
 
@@ -24,17 +25,12 @@ type ChatMessageProps = {
   onReject?: () => void;
 };
 
-type MessageData = ChatMessageProps & {
-  id: string;
-  conversationId?: string;
-};
-
 type ChatInputProps = {
   onSend: (text: string) => void;
 };
 
 const Chat = () => {
-  const [messages, setMessages] = useState<MessageData[]>([]);
+  const { messages, addMessage, updateMessage } = useChatStore();
 
   const handleEventResponse = async (
     action: "confirm" | "reject",
@@ -43,11 +39,7 @@ const Chat = () => {
     proposedChange?: ProposedEventChange,
   ) => {
     // Mark message as responded (optimistic update)
-    setMessages((prev) =>
-      prev.map((msg) =>
-        msg.id === messageId ? { ...msg, respondedAction: action } : msg,
-      ),
-    );
+    updateMessage(messageId, { respondedAction: action });
 
     try {
       const response =
@@ -68,15 +60,11 @@ const Chat = () => {
         content: response.message.content,
         conversationId: response.conversationId,
       };
-      setMessages((prev) => [...prev, botMessage]);
+      addMessage(botMessage);
     } catch (error) {
       console.error(`Failed to ${action} event:`, error);
       // Revert on error
-      setMessages((prev) =>
-        prev.map((msg) =>
-          msg.id === messageId ? { ...msg, respondedAction: undefined } : msg,
-        ),
-      );
+      updateMessage(messageId, { respondedAction: undefined });
     }
   };
 
@@ -87,7 +75,7 @@ const Chat = () => {
       side: "right",
       content: text,
     };
-    setMessages((prev) => [...prev, userMessage]);
+    addMessage(userMessage);
 
     try {
       // Fetch server response
@@ -101,7 +89,7 @@ const Chat = () => {
         proposedChange: response.message.proposedChange,
         conversationId: response.conversationId,
       };
-      setMessages((prev) => [...prev, botMessage]);
+      addMessage(botMessage);
     } catch (error) {
       console.error("Failed to send message:", error);
     }