+
PawFeed
- Health Card
+ · Health Card
+ {card.expiresAt && (
+
+ Gültig bis {formatDate(card.expiresAt)}
+
+ )}
+
@@ -80,21 +118,32 @@ export default async function HealthCardPage({ params }: PageProps) {
{/* Vaccines */}
{pet.vaccines.length > 0 && (
-
Vaccines
++ + Impfungen +
{pet.vaccines.map((vac) => {
const overdue = vac.nextDueDate && isOverdue(vac.nextDueDate);
return (
-
+
{vac.name}
-Given {formatDate(vac.dateGiven)}
++ Gegeben: {formatDate(vac.dateGiven)} + {vac.notes ? ` · ${vac.notes}` : ""} +
{vac.nextDueDate && (
-
+
{overdue &&
)}
@@ -108,25 +157,43 @@ export default async function HealthCardPage({ params }: PageProps) {
{/* Weight history */}
{pet.weightLogs.length > 0 && (
-
+
+
+ {pet.weightLogs.length >= 2 && (
+
)}
{/* Vet visits */}
{pet.vetVisits.length > 0 && (
Weight History
-
- {pet.weightLogs.map((log) => (
-
+
-
- ))}
- {formatDate(log.date)}
-
- {log.notes &&
- {log.notes}
} -{formatWeight(log.weightGrams)}
-+ + Gewichtsverlauf +
+| Datum | +Gewicht | +Notiz | +
|---|---|---|
| {formatDate(log.date)} | ++ {formatWeight(log.weightGrams)} + | +{log.notes ?? ""} | +
- (null);
+
+ const { data, isLoading } = useQuery(
+ trpc.comments.listByPost.queryOptions({ postId, limit: 50 })
+ );
+ const comments = data?.comments ?? [];
+
+ const createMutation = useMutation(
+ trpc.comments.create.mutationOptions({
+ onSuccess: () => {
+ setBody("");
+ void queryClient.invalidateQueries({
+ queryKey: [["trpc", "comments", "listByPost"]],
+ });
+ void queryClient.invalidateQueries({
+ queryKey: [["trpc", "feed", "getFeed"]],
+ });
+ },
+ onError: () => toast.error("Couldn't post comment. Please try again."),
+ })
+ );
+
+ const deleteMutation = useMutation(
+ trpc.comments.delete.mutationOptions({
+ onSuccess: () => {
+ void queryClient.invalidateQueries({
+ queryKey: [["trpc", "comments", "listByPost"]],
+ });
+ void queryClient.invalidateQueries({
+ queryKey: [["trpc", "feed", "getFeed"]],
+ });
+ },
+ onError: () => toast.error("Couldn't delete comment. Please try again."),
+ })
+ );
+
+ const handleSubmit = useCallback(() => {
+ const trimmed = body.trim();
+ if (!trimmed || createMutation.isPending) return;
+ createMutation.mutate({ postId, petId, body: trimmed });
+ }, [body, postId, petId, createMutation]);
+
+ const handleKeyDown = useCallback(
+ (e: React.KeyboardEvent) => {
+ if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+ e.preventDefault();
+ handleSubmit();
+ }
+ },
+ [handleSubmit]
+ );
+
+ // Auto-focus textarea when sheet opens
+ useEffect(() => {
+ if (open) {
+ setTimeout(() => textareaRef.current?.focus(), 100);
+ }
+ }, [open]);
+
+ return (
+
+
+
+ Comments
+
+
+
+ {isLoading ? (
+
+
+
Vet Visits
++ + Tierarztbesuche +
{pet.vetVisits.map((visit, i) => (
);
diff --git a/src/components/feed/CommentSheet.tsx b/src/components/feed/CommentSheet.tsx
new file mode 100644
index 0000000..260a69b
--- /dev/null
+++ b/src/components/feed/CommentSheet.tsx
@@ -0,0 +1,197 @@
+"use client";
+
+import { useState, useRef, useCallback, useEffect } from "react";
+import { Trash2, Loader2 } from "lucide-react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { useTRPC } from "@/trpc/client";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import {
+ Sheet,
+ SheetContent,
+ SheetHeader,
+ SheetTitle,
+} from "@/components/ui/sheet";
+import { getAvatarUrl } from "@/lib/avatar-url";
+
+function formatRelativeTime(date: Date | string): string {
+ const diffMs = Date.now() - new Date(date).getTime();
+ const diffMins = Math.floor(diffMs / 60000);
+ const diffHours = Math.floor(diffMins / 60);
+ const diffDays = Math.floor(diffHours / 24);
+ if (diffMins < 1) return "just now";
+ if (diffMins < 60) return `${diffMins}m`;
+ if (diffHours < 24) return `${diffHours}h`;
+ if (diffDays < 7) return `${diffDays}d`;
+ return new Date(date).toLocaleDateString();
+}
+
+interface CommentSheetProps {
+ postId: string;
+ petId: string; // active pet (commenter)
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+}
+
+export function CommentSheet({ postId, petId, open, onOpenChange }: CommentSheetProps) {
+ const trpc = useTRPC();
+ const queryClient = useQueryClient();
+ const [body, setBody] = useState("");
+ const textareaRef = useRef
@@ -134,7 +201,9 @@ export default async function HealthCardPage({ params }: PageProps) {
{visit.vetName && (
)}
- {pet.vaccines.length === 0 && pet.weightLogs.length === 0 && pet.vetVisits.length === 0 && (
-
{visit.reason}
-{formatDate(visit.date)}
++ {formatDate(visit.date)} +
{visit.vetName}
@@ -149,16 +218,19 @@ export default async function HealthCardPage({ params }: PageProps) {
-
- )}
+ {pet.vaccines.length === 0 &&
+ pet.weightLogs.length === 0 &&
+ pet.vetVisits.length === 0 && (
+ No health records have been added yet.
-
+
+ )}
{/* Footer */}
- Noch keine Gesundheitsdaten vorhanden.
+- Generated via PawFeed · {new Date().toLocaleDateString("de-DE")} -
+
+ Erstellt via PawFeed · {new Date().toLocaleDateString("de-DE")}
+ {card.expiresAt && Gültig bis {formatDate(card.expiresAt)}}
+
+
+ ) : comments.length === 0 ? (
+ + No comments yet — be the first! +
+ ) : ( +
+ {comments.map((comment) => {
+ const isOwn = comment.pet.id === petId;
+ const avatarUrl = getAvatarUrl(comment.pet.avatarKey);
+ return (
+
+ )}
+
+
+ {avatarUrl && (
+ 
+ )}
+
+ {comment.pet.name[0]?.toUpperCase() ?? "?"}
+
+
+
+ );
+ })}
+
+
+ {isOwn && (
+
+ )}
+
+
+ {comment.pet.name}
+
+
+ {formatRelativeTime(comment.createdAt)}
+
+
+ {comment.body}
+
+