feat(frontend): stabilize feed mock, align PostCard types and polish UX

frontend/app/components/PostCard/PostCard.tsx

@@ -2,6 +2,7 @@
 
 import { useRef } from 'react';
 import { formatPetAge, isBirthdayToday } from '@/app/lib/petAge';
+import { timeAgo } from "@/lib/time";
 
 export type PostCardData = {
   id: number;
@@ -12,6 +13,7 @@ export type PostCardData = {
   text: string;
   likesCount: number;
   commentsCount: number;
+  petbirthDate?: string;
   
 };
 
@@ -83,7 +85,7 @@ export default function PostCard({
     · {post.petType}
     {post.petBirthDate && ` · ${formatPetAge(post.petBirthDate)}`}
     · {post.authorName}
-    · {post.createdAt}
+    · {timeAgo(post.createdAt)}
   </span>
 
   {isBirthday && (

frontend/app/feed/page.tsx

@@ -40,7 +40,7 @@ const allPosts: FeedPost[] = [
     breed: 'Bengal',
     ageMonths: 26,
     authorName: 'Anna',
-    createdAt: 'vor 10 Minuten',
+    createdAt: new Date().toISOString(),
     text: 'Luna liebt den neuen Kratzbaum.',
     likesCount: 8,
     commentsCount: 2,
@@ -53,7 +53,7 @@ const allPosts: FeedPost[] = [
     breed: 'Labrador',
     ageMonths: 30,
     authorName: 'Tim',
-    createdAt: 'vor 1 Stunde',
+    createdAt: new Date().toISOString(),
     text: 'Rocky war schwimmen 🐕‍🦺',
     likesCount: 15,
     commentsCount: 4,
@@ -66,7 +66,7 @@ const allPosts: FeedPost[] = [
     breed: 'Bengal',
     ageMonths: 22,
     authorName: 'Sophie',
-    createdAt: 'heute',
+    createdAt: new Date().toISOString(),
     text: 'Milo entdeckt den Balkon.',
     likesCount: 11,
     commentsCount: 3,
@@ -79,7 +79,7 @@ const allPosts: FeedPost[] = [
     breed: 'Maine Coon',
     ageMonths: 40,
     authorName: 'Laura',
-    createdAt: 'gestern',
+    createdAt: new Date().toISOString(),
     text: 'Nala beobachtet alles ganz ruhig.',
     likesCount: 6,
     commentsCount: 1,

frontend/app/globals.css

@@ -748,3 +748,39 @@ select:disabled {
     0 0 0 2px rgba(46, 125, 50, 0.18),
     var(--shadow-sm);
 }
+/* ===========================
+   UX Polish – PostCard hierarchy & actions
+   (safe additions, no refactor)
+   =========================== */
+
+.postcard-title {
+  font-size: 1.05rem;
+  font-weight: 600;
+  color: var(--color-text-main, #111);
+}
+
+.postcard-meta {
+  font-size: 0.75rem;
+  color: var(--color-text-muted, #6b7280);
+  white-space: nowrap;
+}
+
+.postcard-text {
+  margin-top: var(--space-sm, 10px);
+  font-size: 0.95rem;
+  line-height: 1.55;
+  color: var(--color-text-secondary, #1f2937);
+  max-width: 65ch;
+}
+
+/* Click affordance: main area opens preview, actions do not */
+.postcard-main {
+  cursor: pointer;
+}
+
+.postcard-actions {
+  cursor: default;
+  margin-top: var(--space-sm, 10px);
+  padding-top: var(--space-sm, 10px);
+  border-top: 1px solid var(--color-border, rgba(0,0,0,0.08));
+}