Create pbs-membership-loe1-phase3.md via n8n

PBS/Tech/Projects/pbs-membership-loe1-phase3.md/pbs-membership-loe1-phase3.md

@@ -0,0 +1,128 @@
+---
+project: pbs-membership-loe1-phase3
+type: project-plan
+status: planned
+tags: [pbs-hub, flask, membership, loe1, the-garden, ui-design]
+created: 2026-04-08
+updated: 2026-04-08
+path: PBS/Tech/Projects/pbs-membership-loe1-phase3.md
+---
+
+# 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