feat: add visual feedback for CalDAV save & sync actions

- Show spinner + loading text while request is in progress
- Display success (green) or error (red) message, auto-clears after 3s
- Save and Sync have independent feedback rows (both visible at once)
- Fix CaldavTextInput theming and add secureTextEntry for password
- Reset CustomTextInput cursor to start when unfocused

CLAUDE.md

@@ -77,7 +77,7 @@ src/
 │   │   ├── _layout.tsx         # Tab bar configuration (themed)
 │   │   ├── chat.tsx            # Chat screen (AI conversation)
 │   │   ├── calendar.tsx        # Calendar overview
-│   │   └── settings.tsx        # Settings screen (theme switcher, logout)
+│   │   └── settings.tsx        # Settings screen (theme switcher, logout, CalDAV config with feedback)
 │   ├── editEvent.tsx           # Event edit screen (dual-mode: calendar/chat)
 │   ├── event/
 │   │   └── [id].tsx            # Event detail screen (dynamic route)
@@ -98,7 +98,7 @@ src/
 │   ├── EventConfirmDialog.tsx  # AI-proposed event confirmation modal (skeleton)
 │   ├── ProposedEventCard.tsx   # Chat event proposal (uses EventCardBase + confirm/reject/edit buttons)
 │   ├── DeleteEventModal.tsx    # Delete confirmation modal (uses ModalBase)
-│   ├── CustomTextInput.tsx     # Themed text input with focus border (used in CaldavSettings)
+│   ├── CustomTextInput.tsx     # Themed text input with focus border (used in login, register, CaldavSettings, editEvent)
 │   ├── DateTimePicker.tsx      # Date and time picker components
 │   └── ScrollableDropdown.tsx  # Scrollable dropdown component
 ├── Themes.tsx                  # Theme definitions: THEMES object with defaultLight/defaultDark, Theme type
@@ -602,8 +602,8 @@ NODE_ENV=development        # development = pretty logs, production = JSON
   - `AuthService`: login(), register(), logout() - calls backend API
   - `ApiClient`: Automatically injects X-User-Id header for authenticated requests, handles empty responses (204)
   - `AuthGuard`: Reusable component that wraps protected routes - loads user, preloads app data (events + CalDAV config) into stores before dismissing spinner, triggers CalDAV sync, shows loading, redirects if unauthenticated. Exports `preloadAppData()` (also called by `login.tsx`)
-  - Login screen: Supports email OR userName login, preloads app data + triggers CalDAV sync after successful login
+  - Login screen: Supports email OR userName login, uses CustomTextInput with focus border, preloads app data + triggers CalDAV sync after successful login
-  - Register screen: Email validation, checks for existing email/userName
+  - Register screen: Email validation, checks for existing email/userName, uses CustomTextInput with focus border
   - `AuthButton`: Reusable button component with themed shadow
   - `Header`: Themed header component (logout moved to Settings)
   - `(tabs)/_layout.tsx`: Wraps tabs with AuthGuard for protected access
@@ -612,7 +612,7 @@ NODE_ENV=development        # development = pretty logs, production = JSON
   - `ThemeStore`: Zustand store with theme state and setTheme()
   - `Themes.tsx`: THEMES object with defaultLight/defaultDark variants
   - All components use `useThemeStore()` for reactive theme colors
-  - Settings screen with theme switcher (light/dark) and CalDAV configuration (url, username, password with save/sync buttons, loads existing config on mount)
+  - Settings screen with theme switcher (light/dark) and CalDAV configuration (url, username, password with save/sync buttons, loads existing config on mount). Save/Sync buttons show independent feedback via `FeedbackRow` component: spinner + loading text during request, then success (green) or error (red) message that auto-clears after 3s. Both feedbacks can be visible simultaneously.
   - `BaseButton`: Reusable themed button component
 - Tab navigation (Chat, Calendar, Settings) implemented with themed UI
 - Calendar screen fully functional:
@@ -634,12 +634,12 @@ NODE_ENV=development        # development = pretty logs, production = JSON
   - Tracks conversationId for message continuity across sessions
   - ChatStore with addMessages() for bulk loading, chatMessageToMessageData() helper
   - KeyboardAvoidingView for proper keyboard handling (iOS padding, Android height)
-  - Auto-scroll to end on new messages and keyboard show
+  - Auto-scroll to end on new messages and keyboard show; initial load uses `onContentSizeChange` with `animated: false` to start at bottom without visible scrolling
   - keyboardDismissMode="interactive" and keyboardShouldPersistTaps="handled"
 - `EventService`: getAll(), getById(), getByDateRange(), create(), update(), delete(mode, occurrenceDate) - fully implemented with recurring delete modes
 - `ChatService`: sendMessage(), confirmEvent(deleteMode, occurrenceDate), rejectEvent(), getConversations(), getConversation(), updateProposalEvent() - fully implemented with cursor pagination, recurring delete support, and proposal editing
 - `CaldavConfigService`: saveConfig(), getConfig(), deleteConfig(), pull(), pushAll(), sync() - CalDAV config management and sync trigger
-- `CustomTextInput`: Themed text input component with focus border highlight, supports controlled value via `text` prop
+- `CustomTextInput`: Themed text input with focus border highlight. Props: `text`, `onValueChange`, `placeholder`, `placeholderTextColor`, `secureTextEntry`, `autoCapitalize`, `keyboardType`, `className`, `multiline`. No default padding — callers must set padding via `className` (e.g., `px-3 py-2` or `p-4`). When not focused, cursor is reset to start (`selection={{ start: 0 }}`) to avoid text appearing scrolled to the end.
 - `CardBase`: Reusable card component with header (title/subtitle), content area, and optional footer button - configurable padding, border, text size via props, ScrollView uses `nestedScrollEnabled` for Android
 - `ModalBase`: Reusable modal wrapper with backdrop (absolute-positioned behind card), uses CardBase internally - provides click-outside-to-close, Android back button support, and proper scrolling on Android
 - `EventCardBase`: Event card with date/time/recurring icons - uses CardBase for structure. Accepts `recurrenceRule` string (not boolean) and displays German-formatted recurrence via `formatRecurrenceRule()`

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

@@ -64,11 +64,11 @@ const Chat = () => {
     string | undefined
   >();
   const [hasLoadedMessages, setHasLoadedMessages] = useState(false);
+  const needsInitialScroll = useRef(false);
 
   useEffect(() => {
-    const keyboardDidShow = Keyboard.addListener(
+    const keyboardDidShow = Keyboard.addListener("keyboardDidShow", () =>
-      "keyboardDidShow",
+      scrollToEnd(),
-      scrollToEnd,
     );
     return () => keyboardDidShow.remove();
   }, []);
@@ -90,7 +90,7 @@ const Chat = () => {
               await ChatService.getConversation(conversationId);
             const clientMessages = serverMessages.map(chatMessageToMessageData);
             addMessages(clientMessages);
-            scrollToEnd();
+            needsInitialScroll.current = true;
           }
         } catch (error) {
           console.error("Failed to load messages:", error);
@@ -102,9 +102,9 @@ const Chat = () => {
     }, [isAuthLoading, isAuthenticated, hasLoadedMessages]),
   );
 
-  const scrollToEnd = () => {
+  const scrollToEnd = (animated = true) => {
     setTimeout(() => {
-      listRef.current?.scrollToEnd({ animated: true });
+      listRef.current?.scrollToEnd({ animated });
     }, 100);
   };
 
@@ -277,6 +277,12 @@ const Chat = () => {
           keyExtractor={(item) => item.id}
           keyboardDismissMode="interactive"
           keyboardShouldPersistTaps="handled"
+          onContentSizeChange={() => {
+            if (needsInitialScroll.current) {
+              needsInitialScroll.current = false;
+              listRef.current?.scrollToEnd({ animated: false });
+            }
+          }}
           ListFooterComponent={
             isWaitingForResponse ? <TypingIndicator /> : null
           }

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

@@ -1,4 +1,4 @@
-import { Text, View } from "react-native";
+import { ActivityIndicator, Text, View } from "react-native";
 import BaseBackground from "../../components/BaseBackground";
 import BaseButton, { BaseButtonProps } from "../../components/BaseButton";
 import { useThemeStore } from "../../stores/ThemeStore";
@@ -8,7 +8,7 @@ import { Ionicons } from "@expo/vector-icons";
 import { SimpleHeader } from "../../components/Header";
 import { THEMES } from "../../Themes";
 import CustomTextInput from "../../components/CustomTextInput";
-import { useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { CaldavConfigService } from "../../services/CaldavConfigService";
 import { useCaldavConfigStore } from "../../stores";
 
@@ -33,25 +33,54 @@ type CaldavTextInputProps = {
   title: string;
   value: string;
   onValueChange: (text: string) => void;
+  secureTextEntry?: boolean;
 };
 
 const CaldavTextInput = ({
   title,
   value,
   onValueChange,
+  secureTextEntry,
 }: CaldavTextInputProps) => {
+  const { theme } = useThemeStore();
   return (
     <View className="flex flex-row items-center py-1">
-      <Text className="ml-4 w-24">{title}:</Text>
+      <Text className="ml-4 w-24" style={{ color: theme.textPrimary }}>{title}:</Text>
       <CustomTextInput
-        className="flex-1 mr-4"
+        className="flex-1 mr-4 px-3 py-2"
         text={value}
         onValueChange={onValueChange}
+        secureTextEntry={secureTextEntry}
       />
     </View>
   );
 };
 
+type Feedback = { text: string; isError: boolean; loading: boolean };
+
+const FeedbackRow = ({ feedback }: { feedback: Feedback | null }) => {
+  const { theme } = useThemeStore();
+  if (!feedback) return null;
+  return (
+    <View className="flex flex-row items-center justify-center mt-2 mx-4 gap-2">
+      {feedback.loading && (
+        <ActivityIndicator size="small" color={theme.textMuted} />
+      )}
+      <Text
+        style={{
+          color: feedback.loading
+            ? theme.textMuted
+            : feedback.isError
+              ? theme.rejectButton
+              : theme.confirmButton,
+        }}
+      >
+        {feedback.text}
+      </Text>
+    </View>
+  );
+};
+
 const CaldavSettings = () => {
   const { theme } = useThemeStore();
   const { config, setConfig } = useCaldavConfigStore();
@@ -59,18 +88,51 @@ const CaldavSettings = () => {
   const [serverUrl, setServerUrl] = useState(config?.serverUrl ?? "");
   const [username, setUsername] = useState(config?.username ?? "");
   const [password, setPassword] = useState(config?.password ?? "");
+  const [saveFeedback, setSaveFeedback] = useState<Feedback | null>(null);
+  const [syncFeedback, setSyncFeedback] = useState<Feedback | null>(null);
+  const saveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const syncTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const showFeedback = useCallback(
+    (
+      setter: typeof setSaveFeedback,
+      timer: typeof saveTimer,
+      text: string,
+      isError: boolean,
+      loading = false,
+    ) => {
+      if (timer.current) clearTimeout(timer.current);
+      setter({ text, isError, loading });
+      if (!loading) {
+        timer.current = setTimeout(() => setter(null), 3000);
+      }
+    },
+    [],
+  );
 
   const saveConfig = async () => {
-    const saved = await CaldavConfigService.saveConfig(
+    showFeedback(setSaveFeedback, saveTimer, "Speichere Konfiguration...", false, true);
-      serverUrl,
+    try {
-      username,
+      const saved = await CaldavConfigService.saveConfig(
-      password,
+        serverUrl,
-    );
+        username,
-    setConfig(saved);
+        password,
+      );
+      setConfig(saved);
+      showFeedback(setSaveFeedback, saveTimer, "Konfiguration wurde gespeichert", false);
+    } catch {
+      showFeedback(setSaveFeedback, saveTimer, "Fehler beim Speichern der Konfiguration", true);
+    }
   };
 
   const sync = async () => {
-    await CaldavConfigService.sync();
+    showFeedback(setSyncFeedback, syncTimer, "Synchronisiere...", false, true);
+    try {
+      await CaldavConfigService.sync();
+      showFeedback(setSyncFeedback, syncTimer, "Synchronisierung erfolgreich", false);
+    } catch {
+      showFeedback(setSyncFeedback, syncTimer, "Fehler beim Synchronisieren", true);
+    }
   };
 
   return (
@@ -99,6 +161,7 @@ const CaldavSettings = () => {
             title="password"
             value={password}
             onValueChange={setPassword}
+            secureTextEntry
           />
         </View>
         <View className="flex flex-row">
@@ -109,6 +172,8 @@ const CaldavSettings = () => {
             Sync
           </BaseButton>
         </View>
+        <FeedbackRow feedback={saveFeedback} />
+        <FeedbackRow feedback={syncFeedback} />
       </View>
     </>
   );

apps/client/src/app/editEvent.tsx

@@ -43,7 +43,7 @@ const EditEventTextField = (props: EditEventTextFieldProps) => {
         {props.titel}
       </Text>
       <CustomTextInput
-        className="flex-1"
+        className="flex-1 px-3 py-2"
         text={props.text}
         multiline={props.multiline}
         onValueChange={props.onValueChange}

apps/client/src/app/login.tsx

@@ -1,8 +1,9 @@
 import { useState } from "react";
-import { View, Text, TextInput, Pressable } from "react-native";
+import { View, Text, Pressable } from "react-native";
 import { Link, router } from "expo-router";
 import BaseBackground from "../components/BaseBackground";
 import AuthButton from "../components/AuthButton";
+import CustomTextInput from "../components/CustomTextInput";
 import { AuthService } from "../services";
 import { CaldavConfigService } from "../services/CaldavConfigService";
 import { preloadAppData } from "../components/AuthGuard";
@@ -59,34 +60,22 @@ const LoginScreen = () => {
           </Text>
         )}
 
-        <TextInput
+        <CustomTextInput
           placeholder="E-Mail oder Benutzername"
           placeholderTextColor={theme.textMuted}
-          value={identifier}
+          text={identifier}
-          onChangeText={setIdentifier}
+          onValueChange={setIdentifier}
           autoCapitalize="none"
           className="w-full rounded-lg p-4 mb-4"
-          style={{
-            backgroundColor: theme.secondaryBg,
-            color: theme.textPrimary,
-            borderWidth: 1,
-            borderColor: theme.borderPrimary,
-          }}
         />
 
-        <TextInput
+        <CustomTextInput
           placeholder="Passwort"
           placeholderTextColor={theme.textMuted}
-          value={password}
+          text={password}
-          onChangeText={setPassword}
+          onValueChange={setPassword}
           secureTextEntry
           className="w-full rounded-lg p-4 mb-6"
-          style={{
-            backgroundColor: theme.secondaryBg,
-            color: theme.textPrimary,
-            borderWidth: 1,
-            borderColor: theme.borderPrimary,
-          }}
         />
 
         <AuthButton

apps/client/src/app/register.tsx

@@ -1,8 +1,9 @@
 import { useState } from "react";
-import { View, Text, TextInput, Pressable } from "react-native";
+import { View, Text, Pressable } from "react-native";
 import { Link, router } from "expo-router";
 import BaseBackground from "../components/BaseBackground";
 import AuthButton from "../components/AuthButton";
+import CustomTextInput from "../components/CustomTextInput";
 import { AuthService } from "../services";
 import { useThemeStore } from "../stores/ThemeStore";
 
@@ -59,50 +60,32 @@ const RegisterScreen = () => {
           </Text>
         )}
 
-        <TextInput
+        <CustomTextInput
           placeholder="E-Mail"
           placeholderTextColor={theme.textMuted}
-          value={email}
+          text={email}
-          onChangeText={setEmail}
+          onValueChange={setEmail}
           autoCapitalize="none"
           keyboardType="email-address"
           className="w-full rounded-lg p-4 mb-4"
-          style={{
-            backgroundColor: theme.secondaryBg,
-            color: theme.textPrimary,
-            borderWidth: 1,
-            borderColor: theme.borderPrimary,
-          }}
         />
 
-        <TextInput
+        <CustomTextInput
           placeholder="Benutzername"
           placeholderTextColor={theme.textMuted}
-          value={userName}
+          text={userName}
-          onChangeText={setUserName}
+          onValueChange={setUserName}
           autoCapitalize="none"
           className="w-full rounded-lg p-4 mb-4"
-          style={{
-            backgroundColor: theme.secondaryBg,
-            color: theme.textPrimary,
-            borderWidth: 1,
-            borderColor: theme.borderPrimary,
-          }}
         />
 
-        <TextInput
+        <CustomTextInput
           placeholder="Passwort"
           placeholderTextColor={theme.textMuted}
-          value={password}
+          text={password}
-          onChangeText={setPassword}
+          onValueChange={setPassword}
           secureTextEntry
           className="w-full rounded-lg p-4 mb-6"
-          style={{
-            backgroundColor: theme.secondaryBg,
-            color: theme.textPrimary,
-            borderWidth: 1,
-            borderColor: theme.borderPrimary,
-          }}
         />
 
         <AuthButton

apps/client/src/components/CustomTextInput.tsx

@@ -1,4 +1,4 @@
-import { TextInput } from "react-native";
+import { TextInput, TextInputProps } from "react-native";
 import { useThemeStore } from "../stores/ThemeStore";
 import { useState } from "react";
 
@@ -8,6 +8,11 @@ export type CustomTextInputProps = {
   className?: string;
   multiline?: boolean;
   onValueChange?: (text: string) => void;
+  placeholder?: string;
+  placeholderTextColor?: string;
+  secureTextEntry?: boolean;
+  autoCapitalize?: TextInputProps["autoCapitalize"];
+  keyboardType?: TextInputProps["keyboardType"];
 };
 
 const CustomTextInput = (props: CustomTextInputProps) => {
@@ -16,10 +21,16 @@ const CustomTextInput = (props: CustomTextInputProps) => {
 
   return (
     <TextInput
-      className={`border border-solid rounded-2xl px-3 py-2 h-11/12 ${props.className}`}
+      className={`border border-solid rounded-2xl ${props.className}`}
       onChangeText={props.onValueChange}
       value={props.text}
       multiline={props.multiline}
+      placeholder={props.placeholder}
+      placeholderTextColor={props.placeholderTextColor}
+      secureTextEntry={props.secureTextEntry}
+      autoCapitalize={props.autoCapitalize}
+      keyboardType={props.keyboardType}
+      selection={!focused ? { start: 0 } : undefined}
       style={{
         backgroundColor: theme.messageBorderBg,
         color: theme.textPrimary,