mono/packages/ui/docs/posts.md

Plan: Support Multiple Images/Videos per Post

Overview

Currently, the application treats every image or video as an independent entity (a picture or linked video). We want to introduce a higher-level concept of a Post which can contain one or more media items (images or videos).

This allows:

• Grouping related photos (e.g., a photo dump, or variations).
• A unified description and comment section for the group.
• Preserving individual interactions (likes/comments) on specific images within the post if desired (as per requirements).

Database Schema Changes

We will introduce a new posts table and link existing pictures to it.

1. New Table: posts

This table will hold the content for the "container".

| Column | Type | Notes | |Ref|---|---| | id | uuid | Primary Key, default gen_random_uuid() | | user_id | uuid | FK to auth.users (or profiles) | | title | text | Main title of the post | | description | text | Description/Caption for the whole post | | created_at | timestamptz | default now() | | updated_at | timestamptz | | | metadata | jsonb | Flexible field for extra data |

2. Update Table: pictures

We link media items to the post.

• Add column post_id: uuid, FK to posts(id).
• Add column position: integer, default 0. To order images within a post.

Note

: Videos are stored in the pictures table with type='mux-video', so this change covers both images and videos. The separate videos table in Supabase appears unused by the current frontend.

3. Update Table: comments and likes

Currently, comments and likes reference picture_id.

• Requirement: "we might have also comments, and descriptions for the parent 'post'".
• Approach:
  • Add post_id to comments and likes tables (nullable).
  • Or create post_comments / post_likes tables if cleaner.
  • Decision: We will start with a simple structure where posts have their own description (already in table). For comments, we might need a unified comment system later or link comments to posts. For now, let's focus on posts containing pictures.

Migration Strategy (SQL)

According to user feedback, no backfill is required. Old pictures will simply not be displayed in the new "Post" feed which will rely on the posts table.

1. Create posts table.
2. Alter pictures table: Add post_id column.

UI/UX Updates

Feed (PhotoGrid.tsx)

• Query posts instead of pictures.
• Fetch the first linked picture for the thumbnail.

Post Detail (Post.tsx)

• Route /post/:id will now accept a Post ID.
• Fetch Post metadata.
• Fetch associated Media Items (select * from pictures where post_id = :id order by position).

Creation Wizard

• Allow granular updates: "Select Multiple Files".
• Create Post -> Upload all files -> Create Picture records linked to Post.

Step-by-Step Implementation

1. Supabase Migration: Create tables, run backfill script.
2. Codebase - Types: Update types.ts (re-run codegen).
3. Codebase - API: Update any fetch functions to use posts.
4. UI - Feed: Switch PhotoGrid to use posts.
5. UI - Detail: Rewrite Post.tsx to handle Post + Media[].
6. UI - Create: Update upload logic.