implement chat messaging with event proposals

- Add functional chat with server communication and test responses
- Add ProposedEventCard component for confirm/reject actions
- Move Constants (Day, Month) from client to shared package
- Add dateHelpers utility for weekday calculations
- Extend Themes.tsx with button and text colors
- Update CLAUDE.md with current implementation status
- Add *.tsbuildinfo to .gitignore
This commit is contained in:
2026-01-04 00:01:26 +01:00
parent e553103470
commit c33508a227
17 changed files with 456 additions and 295 deletions

View File

@@ -0,0 +1,86 @@
import { View, Text, Pressable } from "react-native";
import { ProposedEventChange } from "@caldav/shared";
import currentTheme from "../Themes";
type ProposedEventCardProps = {
proposedChange: ProposedEventChange;
respondedAction?: "confirm" | "reject";
onConfirm: () => void;
onReject: () => void;
};
function formatDateTime(date?: Date): string {
if (!date) return "";
const d = new Date(date);
return d.toLocaleDateString("de-DE", {
weekday: "long",
day: "2-digit",
month: "2-digit",
hour: "2-digit",
minute: "2-digit",
});
}
export const ProposedEventCard = ({
proposedChange,
respondedAction,
onConfirm,
onReject,
}: ProposedEventCardProps) => {
const event = proposedChange.event;
const isDisabled = !!respondedAction;
return (
<View
className="border-t p-2 mt-2"
style={{ borderTopColor: currentTheme.placeholderBg }}
>
{/* Event Details */}
<Text className="font-bold text-base">{event?.title}</Text>
<Text style={{ color: currentTheme.textSecondary }}>
{formatDateTime(event?.startTime)}
</Text>
{event?.isRecurring && (
<Text style={{ color: currentTheme.textMuted }} className="text-sm">
Wiederkehrend
</Text>
)}
{/* Buttons */}
<View className="flex-row mt-3 gap-2">
<Pressable
onPress={onConfirm}
disabled={isDisabled}
className="flex-1 py-2 rounded-lg items-center"
style={{
backgroundColor: isDisabled
? currentTheme.disabledButton
: currentTheme.confirmButton,
borderWidth: respondedAction === "confirm" ? 2 : 0,
borderColor: currentTheme.confirmButton,
}}
>
<Text style={{ color: currentTheme.buttonText }} className="font-medium">
Annehmen
</Text>
</Pressable>
<Pressable
onPress={onReject}
disabled={isDisabled}
className="flex-1 py-2 rounded-lg items-center"
style={{
backgroundColor: isDisabled
? currentTheme.disabledButton
: currentTheme.rejectButton,
borderWidth: respondedAction === "reject" ? 2 : 0,
borderColor: currentTheme.rejectButton,
}}
>
<Text style={{ color: currentTheme.buttonText }} className="font-medium">
Ablehnen
</Text>
</Pressable>
</View>
</View>
);
};