wiki-vault/Sources/Dev/pbs-membership-loe1-phase3.md

created	path	project	status	tags	type	updated
2026-04-08	Sources/Dev	pbs-membership-loe1-phase3	planned	pbs-hub flask membership loe1 the-garden ui-design	project-plan	2026-04-08

PBS Membership LOE 1 Phase 3 - The Garden

Overview

Phase 3 of LOE 1 (Recipe Saving) expanded in scope during planning. Originally scoped as just "the saved recipes page in pbs-hub," it became clear that the saved recipes page cannot exist without first building the member experience container it lives in. Phase 3 now covers building the Garden - the branded member area in pbs-hub - with saved recipes as the first feature planted inside it.

This session was dedicated to locking in the member experience skeleton: URL structure, branding, navigation, visual direction, and page layout. No code was written. Phases 1 (Backend API) and 2 (Save button) are still in progress and will ship before Phase 3 work begins.

Decisions Locked

Decision	Choice	Rationale
Member area location	plantbasedsoutherner.com/the-garden/
Path-based via Traefik routing to pbs-hub. Easy to flip to subdomain later
if needed.
Page title / H1	"Welcome to the Sunflower Garden"	Jenny recommended
"garden" over "patch" - warmer, more inviting, implies tending.
Internal naming	"the garden" for member area, "Sunnies" for community
Clean separation - the community and the place no longer share a name.
Login redirect	Ultimate Member sends authenticated users to
/the-garden/	Single entry point to the member experience.
Logout flow	pbs-hub calls WP logout, lands on WordPress home	WP
remains the auth source of truth.
Visual direction	Option #3 (garden-themed cards, structurally normal
grid)	Ships now. Option #1 (full illustrated scene) banked as
someday-goal when illustrator budget exists.
Card style	Seed packets	Built-in visual language (title +
illustration + description). "Coming soon" LOEs become unopened seed
packets - perfect metaphor.
Empty state copy	"Your garden is still a seed. Start saving recipes and
watch it grow."	Friendly, on-brand, points new Sunnies at the first
action.

Page Structure (Top to Bottom)

1. Header strip - matches WordPress Astra header for seamless visual transition. "My Garden" is active nav item.
2. Welcome hero - soft green gradient or botanical pattern background. Large warm heading "Welcome to the Sunflower Garden, [Name]." Sunnie illustration in corner. Short tagline ("Here's what's growing today" or similar).
3. Card grid - seed packet cards for each LOE. Responsive: 3 across desktop, 2 tablet, 1 mobile.
4. "Recently added to your garden" strip - horizontal row of 3-4 most recent saves. Empty state for new Sunnies shows the copy above with Sunnie pointing at the saved recipes card.
5. Footer - matches WordPress Astra footer.

Card States

• Active LOE (Saved Recipes at launch): full color seed packet, blooming sunflower illustration, count badge ("12 saved"), clickable.
• Coming soon LOE: muted/sepia seed packet, seed or sprout illustration, "Coming soon" label, not clickable but visible.

Phase 3 Sub-Phases (Shippable Milestones)

• 3a - The Garden Skeleton: Traefik routing for /the-garden/, pbs-hub Flask app serving the page, WP cookie auth middleware, Astra-matching header/footer templates, empty card grid, hero with Sunnie, logout flow. Goal: logged-in Sunnie lands on the garden and sees the shell.
• 3b - Saved Recipes Seed Packet: First active LOE card wired up. Queries user_interactions + pbs_recipes, shows count, card is clickable.
• 3c - Saved Recipes Detail Page: Click-through destination. List/grid of saved recipes with thumbnails, titles, save dates, unsave action, click-through to WP recipe.
• 3d - "Recently Added" Strip + Empty State: The content area on the garden home, plus the friendly empty state for new Sunnies.
• 3e - Coming Soon Seed Packets: Muted cards for Meal Plans, Diversity Tracker, User Profiles. Cheap to add, high brand value - shows Sunnies what's coming.

Open Questions (To Resolve Before Phase 3a Starts)

1. Seed packet illustrations. Phase 3a minimum requires: one active "saved recipes" seed packet, one generic "coming soon" seed packet, one corner Sunnie for the hero. Source TBD - Jenny draws, AI-generated, stock, or hire out. Needs decision before 3a ships or it becomes a blocker.
2. Astra header/footer matching strategy. Options: (a) rebuild Astra header in Jinja templates by hand (simpler but drifts when WP updates), (b) WordPress serves header/footer HTML via endpoint pbs-hub fetches (more robust, adds dependency), (c) iframe (rejected). Needs decision before 3a template work starts.

Relationship to Other Phases

• Phase 1 (Backend API): planning complete, implementation pending. Phase 3 depends on the user_interactions table and query patterns established here.
• Phase 2 (Save Button): planning complete, implementation pending. Custom JS via WPCode Lite. Phase 3 reads the data Phase 2 writes.
• LOEs 2-4: their "coming soon" seed packets ship in Phase 3e. Actual implementation is future work.

Someday / Stretch

• Visual direction Option #1: full illustrated garden scene with clickable hotspots. Requires illustrator budget. Revisit when PBS has revenue to support it or Jenny has bandwidth to draw it.
• Language expansion: "your garden," "what's growing," "tend your garden" for settings, "new in the garden this week" for content callouts. Microcopy opportunity across the whole member experience.

Next Session

Resume on Phases 1 and 2 implementation. Phase 3 planning is parked until those ship.

...sent from Jenny & Travis