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
This commit is contained in:
2026-02-09 19:53:51 +01:00
parent 3ad4a77951
commit cbf123ddd6
3 changed files with 79 additions and 13 deletions

View File

@@ -77,7 +77,7 @@ src/
│ │ ├── _layout.tsx # Tab bar configuration (themed) │ │ ├── _layout.tsx # Tab bar configuration (themed)
│ │ ├── chat.tsx # Chat screen (AI conversation) │ │ ├── chat.tsx # Chat screen (AI conversation)
│ │ ├── calendar.tsx # Calendar overview │ │ ├── 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) │ ├── editEvent.tsx # Event edit screen (dual-mode: calendar/chat)
│ ├── event/ │ ├── event/
│ │ └── [id].tsx # Event detail screen (dynamic route) │ │ └── [id].tsx # Event detail screen (dynamic route)
@@ -612,7 +612,7 @@ NODE_ENV=development # development = pretty logs, production = JSON
- `ThemeStore`: Zustand store with theme state and setTheme() - `ThemeStore`: Zustand store with theme state and setTheme()
- `Themes.tsx`: THEMES object with defaultLight/defaultDark variants - `Themes.tsx`: THEMES object with defaultLight/defaultDark variants
- All components use `useThemeStore()` for reactive theme colors - 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 - `BaseButton`: Reusable themed button component
- Tab navigation (Chat, Calendar, Settings) implemented with themed UI - Tab navigation (Chat, Calendar, Settings) implemented with themed UI
- Calendar screen fully functional: - Calendar screen fully functional:
@@ -639,7 +639,7 @@ NODE_ENV=development # development = pretty logs, production = JSON
- `EventService`: getAll(), getById(), getByDateRange(), create(), update(), delete(mode, occurrenceDate) - fully implemented with recurring delete modes - `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 - `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 - `CaldavConfigService`: saveConfig(), getConfig(), deleteConfig(), pull(), pushAll(), sync() - CalDAV config management and sync trigger
- `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`) - `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 - `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 - `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()` - `EventCardBase`: Event card with date/time/recurring icons - uses CardBase for structure. Accepts `recurrenceRule` string (not boolean) and displays German-formatted recurrence via `formatRecurrenceRule()`

View File

@@ -1,4 +1,4 @@
import { Text, View } from "react-native"; import { ActivityIndicator, Text, View } from "react-native";
import BaseBackground from "../../components/BaseBackground"; import BaseBackground from "../../components/BaseBackground";
import BaseButton, { BaseButtonProps } from "../../components/BaseButton"; import BaseButton, { BaseButtonProps } from "../../components/BaseButton";
import { useThemeStore } from "../../stores/ThemeStore"; import { useThemeStore } from "../../stores/ThemeStore";
@@ -8,7 +8,7 @@ import { Ionicons } from "@expo/vector-icons";
import { SimpleHeader } from "../../components/Header"; import { SimpleHeader } from "../../components/Header";
import { THEMES } from "../../Themes"; import { THEMES } from "../../Themes";
import CustomTextInput from "../../components/CustomTextInput"; import CustomTextInput from "../../components/CustomTextInput";
import { useState } from "react"; import { useCallback, useRef, useState } from "react";
import { CaldavConfigService } from "../../services/CaldavConfigService"; import { CaldavConfigService } from "../../services/CaldavConfigService";
import { useCaldavConfigStore } from "../../stores"; import { useCaldavConfigStore } from "../../stores";
@@ -33,25 +33,54 @@ type CaldavTextInputProps = {
title: string; title: string;
value: string; value: string;
onValueChange: (text: string) => void; onValueChange: (text: string) => void;
secureTextEntry?: boolean;
}; };
const CaldavTextInput = ({ const CaldavTextInput = ({
title, title,
value, value,
onValueChange, onValueChange,
secureTextEntry,
}: CaldavTextInputProps) => { }: CaldavTextInputProps) => {
const { theme } = useThemeStore();
return ( return (
<View className="flex flex-row items-center py-1"> <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 <CustomTextInput
className="flex-1 mr-4 px-3 py-2" className="flex-1 mr-4 px-3 py-2"
text={value} text={value}
onValueChange={onValueChange} onValueChange={onValueChange}
secureTextEntry={secureTextEntry}
/> />
</View> </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 CaldavSettings = () => {
const { theme } = useThemeStore(); const { theme } = useThemeStore();
const { config, setConfig } = useCaldavConfigStore(); const { config, setConfig } = useCaldavConfigStore();
@@ -59,18 +88,51 @@ const CaldavSettings = () => {
const [serverUrl, setServerUrl] = useState(config?.serverUrl ?? ""); const [serverUrl, setServerUrl] = useState(config?.serverUrl ?? "");
const [username, setUsername] = useState(config?.username ?? ""); const [username, setUsername] = useState(config?.username ?? "");
const [password, setPassword] = useState(config?.password ?? ""); 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 saveConfig = async () => {
showFeedback(setSaveFeedback, saveTimer, "Speichere Konfiguration...", false, true);
try {
const saved = await CaldavConfigService.saveConfig( const saved = await CaldavConfigService.saveConfig(
serverUrl, serverUrl,
username, username,
password, password,
); );
setConfig(saved); setConfig(saved);
showFeedback(setSaveFeedback, saveTimer, "Konfiguration wurde gespeichert", false);
} catch {
showFeedback(setSaveFeedback, saveTimer, "Fehler beim Speichern der Konfiguration", true);
}
}; };
const sync = async () => { const sync = async () => {
showFeedback(setSyncFeedback, syncTimer, "Synchronisiere...", false, true);
try {
await CaldavConfigService.sync(); await CaldavConfigService.sync();
showFeedback(setSyncFeedback, syncTimer, "Synchronisierung erfolgreich", false);
} catch {
showFeedback(setSyncFeedback, syncTimer, "Fehler beim Synchronisieren", true);
}
}; };
return ( return (
@@ -99,6 +161,7 @@ const CaldavSettings = () => {
title="password" title="password"
value={password} value={password}
onValueChange={setPassword} onValueChange={setPassword}
secureTextEntry
/> />
</View> </View>
<View className="flex flex-row"> <View className="flex flex-row">
@@ -109,6 +172,8 @@ const CaldavSettings = () => {
Sync Sync
</BaseButton> </BaseButton>
</View> </View>
<FeedbackRow feedback={saveFeedback} />
<FeedbackRow feedback={syncFeedback} />
</View> </View>
</> </>
); );

View File

@@ -30,6 +30,7 @@ const CustomTextInput = (props: CustomTextInputProps) => {
secureTextEntry={props.secureTextEntry} secureTextEntry={props.secureTextEntry}
autoCapitalize={props.autoCapitalize} autoCapitalize={props.autoCapitalize}
keyboardType={props.keyboardType} keyboardType={props.keyboardType}
selection={!focused ? { start: 0 } : undefined}
style={{ style={{
backgroundColor: theme.messageBorderBg, backgroundColor: theme.messageBorderBg,
color: theme.textPrimary, color: theme.textPrimary,