feat(02-05): wire seams — PawRing in PostCard, StoryTray in feed, StoryForm in PostTypeSheet

This commit is contained in:
admin committed 2026-06-13 10:11:09 +02:00
1 parent e30531f834
commit 9a901e3485
3 files changed
+20 -14

No files matched your search

+6 -3
View File
@@ -1,5 +1,6 @@
import type { Metadata } from "next";
import { FeedList } from "@/components/feed/FeedList";
import { StoryTray } from "@/components/stories/StoryTray";
/**
* /feed — Home feed page (RSC shell).
@@ -18,9 +19,11 @@ export const metadata: Metadata = {
export default function FeedPage() {
return (
<div className="max-w-[640px] mx-auto px-6 py-8">
{/* TODO(02-05): StoryTray above feed */}
<FeedList />
<div className="max-w-[640px] mx-auto py-8">
<StoryTray />
<div className="px-6">
<FeedList />
</div>
</div>
);
}
+4 -4
View File
@@ -36,6 +36,7 @@ import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { getAvatarUrl } from "@/lib/avatar-url";
import { getMediaUrl } from "@/lib/media-url";
import { PawRing } from "@/components/stories/PawRing";
import { BlockDialog } from "@/components/safety/BlockDialog";
import { ReportSheet } from "@/components/safety/ReportSheet";
@@ -183,9 +184,8 @@ export function PostCard({ post, onDeleted }: PostCardProps) {
<article className="bg-card border border-border rounded-lg overflow-hidden">
{/* Header row — 16px horizontal padding, 12px vertical */}
<div className="flex items-center gap-3 px-4 py-3">
{/* Avatar with story ring seam */}
{/* TODO(02-05): StoryRing wrapper — wrap with ring-1 ring-orange-500 ring-offset-1 when hasActiveStory */}
<div className="rounded-full shrink-0">
{/* PawRing: shows paw-print outline when pet has an active story (STORY-02) */}
<PawRing petId={pet.id} size={32}>
<Avatar className="w-8 h-8">
{avatarUrl && (
<AvatarImage src={avatarUrl} alt={pet.name} />
@@ -194,7 +194,7 @@ export function PostCard({ post, onDeleted }: PostCardProps) {
{pet.name[0]?.toUpperCase() ?? "?"}
</AvatarFallback>
</Avatar>
</div>
</PawRing>
<div className="flex-1 min-w-0">
{/* Pet name — text-base font-semibold (UI-SPEC section heading) */}
+10 -7
View File
@@ -16,6 +16,7 @@ import {
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { PhotoPostForm } from "@/components/post-creation/PhotoPostForm";
import { StoryForm } from "@/components/stories/StoryForm";
/**
* PostTypeSheet — bottom Sheet with 3 post type choices (D-01).
@@ -50,6 +51,11 @@ export function PostTypeSheet({ open, onOpenChange }: PostTypeSheetProps) {
// TODO(02-06): MilestoneForm — open milestone dialog
const [milestoneDialogOpen, setMilestoneDialogOpen] = useState(false);
function handleStoryClose() {
setStoryDialogOpen(false);
setSelectedType(null);
}
function handleSelectType(type: PostType) {
setSelectedType(type);
onOpenChange(false); // close the Sheet
@@ -121,16 +127,13 @@ export function PostTypeSheet({ open, onOpenChange }: PostTypeSheetProps) {
</DialogContent>
</Dialog>
{/* Story Dialog seam — TODO(02-05): replace null with StoryForm */}
{/* Story Dialog (D-02) */}
<Dialog open={storyDialogOpen} onOpenChange={setStoryDialogOpen}>
<DialogContent className="sm:max-w-[512px]">
<DialogHeader>
<DialogContent className="sm:max-w-[512px] max-h-[90dvh] overflow-y-auto p-0">
<DialogHeader className="px-4 pt-4 pb-2">
<DialogTitle className="text-xl font-semibold">New Story</DialogTitle>
</DialogHeader>
<div className="p-4 text-center text-sm text-muted-foreground">
{/* TODO(02-05): StoryForm — swap this div with <StoryForm onClose={() => setStoryDialogOpen(false)} /> */}
Story creation coming soon.
</div>
<StoryForm onClose={handleStoryClose} />
</DialogContent>
</Dialog>