feat(02-05): wire seams — PawRing in PostCard, StoryTray in feed, StoryForm in PostTypeSheet
This commit is contained in:
1 parent
e30531f834
commit
9a901e3485
3 files changed
+20
-14
No files matched your search
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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) */}
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in new issue
Block a user