test.md

Heart Groups and Description Management

1. Update Type Definitions

File: services/types.ts

• Heart type already has optional slug field ✓
• HeartGroup type structure is already defined ✓
• Add UpdateHeartRequest type for updating heart descriptions

2. Query User Hearts with Missing Descriptions

File: hooks/useHearts.tsx

• Create new hook useUserHearts to query hearts created by current user
• Filter for hearts where description is empty/missing

3. Enhance Donate Modal

File: components/donate-modal.tsx

• Query user's hearts with missing descriptions at the top
• Display hearts with textarea for adding descriptions (max 100 chars)
• Add save functionality that calls API to update heart description
• Pass current slug/subSlug context to donate handler

4. API Endpoints

Create Heart Group

File: app/api/heart-groups/create/route.ts (new)

• Accept: name, slug, optional description
• Validate slug uniqueness by checking heartGroups/{slug} doesn't exist
• Set createdAt and createdBy fields
• Store at path: heartGroups/{slug}

Create Heart SubGroup

File: app/api/heart-groups/[slug]/create/route.ts (new)

• Accept: name, subSlug, optional description
• Validate parent slug exists
• Validate subSlug uniqueness within parent: heartGroups/{slug}/heartGroups/{subSlug}
• Set createdAt and createdBy fields

Update Heart Description

File: app/api/hearts/update/route.ts (new)

• Accept: heartKey, description
• Verify user owns the heart (createdBy === uid)
• Update only the description field

Update Heart with Slug

File: app/api/hearts/create/route.ts (modify)

• Add optional slug parameter to heart creation
• Save slug to heart when provided

5. Create Heart Group Modal

File: components/create-group-modal.tsx (new)

• Form with fields: name, slug, description (optional)
• Client-side slug validation (alphanumeric, hyphens)
• Call API to create heart group

6. Update App Layout

File: components/app-layout.tsx

• Add button to open create heart group modal
• Manage modal state

7. Dynamic Group Pages

Parent Group Page

File: app/[slug]/page.tsx (new)

• Extract slug from route params
• Query hearts where heart.slug === slug
• Display in SVGView component similar to home page
• Pass slug context to donate modal

SubGroup Page

File: app/[slug]/[subSlug]/page.tsx (new)

• Extract slug and subSlug from route params
• Query hearts where heart.slug === subSlug (subSlug takes priority)
• Display in SVGView component
• Pass subSlug context to donate modal

8. Update Donate Flow

File: components/app-layout.tsx and pages

• Modify handleDonate to accept optional slug parameter
• Pass slug/subSlug from route context
• Update API call to include slug when creating hearts