feat: add sync and logout toolbar to calendar screen

- Add CalendarToolbar component between header and weekdays in calendar.tsx
- Sync button with CalDAV sync, spinner during sync, green checkmark on success, red X on error (3s feedback)
- Sync button disabled/greyed out when no CalDAV config present
- Logout button with redirect to login screen
- Buttons styled with border and shadow
- Update CLAUDE.md with CalendarToolbar documentation

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

@@ -1,4 +1,4 @@
-import { Pressable, Text, View } from "react-native";
+import { ActivityIndicator, Pressable, Text, View } from "react-native";
 import {
   DAYS,
   MONTHS,
@@ -16,9 +16,11 @@ import { router, useFocusEffect } from "expo-router";
 import { Ionicons } from "@expo/vector-icons";
 import { useThemeStore } from "../../stores/ThemeStore";
 import BaseBackground from "../../components/BaseBackground";
-import { EventService } from "../../services";
+import { AuthService, EventService } from "../../services";
 import { useEventsStore } from "../../stores";
 import { useDropdownPosition } from "../../hooks/useDropdownPosition";
+import { CaldavConfigService } from "../../services/CaldavConfigService";
+import { useCaldavConfigStore } from "../../stores/CaldavConfigStore";
 
 // MonthSelector types and helpers
 type MonthItem = {
@@ -239,6 +241,7 @@ const Calendar = () => {
         setMonthIndex={setMonthIndex}
         setYear={setCurrentYear}
       />
+      <CalendarToolbar loadEvents={loadEvents} />
       <WeekDaysLine />
       <CalendarGrid
         month={MONTHS[monthIndex]}
@@ -543,6 +546,131 @@ const ChangeMonthButton = (props: ChangeMonthButtonProps) => {
   );
 };
 
+type CalendarToolbarProps = {
+  loadEvents: () => Promise<void>;
+};
+
+const CalendarToolbar = ({ loadEvents }: CalendarToolbarProps) => {
+  const { theme } = useThemeStore();
+  const { config } = useCaldavConfigStore();
+  const [isSyncing, setIsSyncing] = useState(false);
+  const [syncResult, setSyncResult] = useState<"success" | "error" | null>(
+    null,
+  );
+
+  const handleSync = async () => {
+    if (!config || isSyncing) return;
+    setSyncResult(null);
+    setIsSyncing(true);
+    try {
+      await CaldavConfigService.sync();
+      await loadEvents();
+      setSyncResult("success");
+    } catch (error) {
+      console.error("CalDAV sync failed:", error);
+      setSyncResult("error");
+    } finally {
+      setIsSyncing(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!syncResult) return;
+    const timer = setTimeout(() => setSyncResult(null), 3000);
+    return () => clearTimeout(timer);
+  }, [syncResult]);
+
+  const handleLogout = async () => {
+    await AuthService.logout();
+    router.replace("/login");
+  };
+
+  const syncIcon = () => {
+    if (isSyncing) {
+      return <ActivityIndicator size="small" color={theme.primeFg} />;
+    }
+    if (syncResult === "success") {
+      return (
+        <Ionicons
+          name="checkmark-circle"
+          size={20}
+          color={theme.confirmButton}
+        />
+      );
+    }
+    if (syncResult === "error") {
+      return (
+        <Ionicons name="close-circle" size={20} color={theme.rejectButton} />
+      );
+    }
+    return (
+      <Ionicons
+        name="sync-outline"
+        size={20}
+        color={config ? theme.primeFg : theme.textMuted}
+      />
+    );
+  };
+
+  const buttonStyle = {
+    backgroundColor: theme.chatBot,
+    borderColor: theme.borderPrimary,
+    borderWidth: 1,
+    shadowColor: theme.shadowColor,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 4,
+  };
+
+  const className = "flex flex-row items-center gap-2 px-3 py-1 rounded-lg"
+
+  return (
+    <View
+      className="flex flex-row items-center justify-around py-2"
+      style={{
+        backgroundColor: theme.primeBg,
+        borderBottomWidth: 0,
+        borderBottomColor: theme.borderPrimary,
+      }}
+    >
+      <Pressable
+        onPress={handleSync}
+        disabled={!config || isSyncing}
+        className={className}
+        style={{
+          ...buttonStyle,
+          ...(config
+            ? {}
+            : {
+                backgroundColor: theme.disabledButton,
+                borderColor: theme.disabledButton,
+              }),
+        }}
+      >
+        {syncIcon()}
+        <Text
+          style={{ color: config ? theme.textPrimary : theme.textMuted }}
+          className="font-medium"
+        >
+          Sync
+        </Text>
+      </Pressable>
+
+      <Pressable
+        onPress={handleLogout}
+        className={className}
+        style={buttonStyle}
+      >
+        <Ionicons name="log-out-outline" size={20} color={theme.primeFg} />
+        <Text style={{ color: theme.textPrimary }} className="font-medium">
+          Logout
+        </Text>
+      </Pressable>
+    </View>
+  );
+};
+
 const WeekDaysLine = () => {
   const { theme } = useThemeStore();
   return (