Full sync - all projects, memory, configs

data/tasks/learning-feed-reels-redesign.md

@@ -0,0 +1,115 @@
+# Learning Feed — Reels-Style Visual Redesign
+
+## Goal
+Transform the Learning Feed from a traditional card-based feed into an Instagram Reels / TikTok-style visual experience with full-bleed images and bold text overlays.
+
+## Reference Style (from D J's examples)
+1. **Hero/Title cards**: Full-bleed background image, large bold white text at bottom with dark gradient overlay, topic badge or author info subtle
+2. **Content cards**: Dark solid background (#0a0a0a), clean white serif-ish text, numbered listicle format, generous line spacing
+3. **Carousel/pagination**: Dots at bottom, slide counter badge top-right (e.g., "1/11")
+4. **Mobile-first**: Cards should feel like full-viewport-height items on phone (not literal 100vh, but tall — aspect ratio ~4:5 or 9:16)
+
+## Project Location
+`/home/wdjones/.openclaw/workspace/projects/learning-feed`
+
+## Stack
+- Next.js 16 (App Router), Tailwind CSS v4, Framer Motion, ShadCN UI, Lucide Icons, TypeScript
+- SQLite via better-sqlite3 (in `serverExternalPackages`)
+- Database at `data/learning-feed.db`
+
+## Current State
+- 21 posts, 1 topic (Private Pilot License), 14 posts have Unsplash image URLs
+- Post types: `quick_fact`, `quiz`, `deep_dive`
+- Feed is a vertical scroll of traditional `Card` components (gray border, small image, text below)
+- Interactions: save, got_it, more_like_this, expand, view
+
+## What to Build
+
+### 1. Redesign `PostCard` component (`components/post-card.tsx`)
+
+**For posts WITH images (`image_url` is not null):**
+- Full-width card, tall aspect ratio (min-height ~400px, or aspect-[4/5])
+- Background image covers entire card (`object-cover`, `absolute inset-0`)
+- Dark gradient overlay from bottom (~60% of card height, `bg-gradient-to-t from-black/90 via-black/50 to-transparent`)
+- Title in **large, bold, uppercase white text** at the bottom over the gradient
+- Topic badge (small pill) top-left
+- Author avatar + name bottom-left (small, subtle, over gradient)
+- Post type indicator subtle (icon or small badge)
+- Rounded corners (`rounded-2xl`), overflow hidden
+
+**For posts WITHOUT images (text-only content cards):**
+- Same card dimensions
+- Solid dark background (`bg-gray-950` or `bg-[#0a0a0a]`)
+- Content text: white, serif-style font (use `font-serif` or a Google Font like Playfair Display), larger size (~text-lg or text-xl), generous leading (`leading-relaxed` or `leading-8`)
+- Numbered items if content has multiple points
+- Clean, minimal — no borders, no badges cluttering
+
+**Both card types:**
+- Rounded corners (`rounded-2xl`)
+- No visible card border
+- Subtle shadow or none
+- Tap/click to expand (for deep_dive and quiz types)
+
+### 2. Interaction overlay (bottom of card)
+- Floating action buttons on right side (vertical stack, like Instagram Reels):
+  - ⭐ Save (star icon, fills yellow when active)
+  - ✅ Got it (check icon, turns green)
+  - 🔄 More like this
+- Semi-transparent, only visible on hover/tap or always subtle
+- Remove the old horizontal action bar at the bottom
+
+### 3. Feed layout changes (`components/feed-page.tsx`)
+- Remove the `max-w-2xl` constraint — cards should be wider on mobile (full width with small padding `px-3`)
+- On desktop, keep `max-w-lg` centered (phone-width experience even on desktop)
+- Reduce gap between cards (`space-y-4` instead of `space-y-6`)
+- Keep infinite scroll behavior
+- Keep the sticky header but make it more minimal (just "Learning Feed" text, no border, transparent bg with blur)
+
+### 4. Image handling
+- Unsplash `source.unsplash.com` URLs are being deprecated. For now they work — keep using them.
+- Add error fallback: if image fails to load, render as a text-only card instead (gradient background with topic-colored tint)
+- Posts without images should NOT look broken — they should look intentionally text-only (like slides 2/3 in the reference)
+
+### 5. Quiz post type special treatment
+- Show question on the card face
+- "Tap to reveal" hint text
+- Tap flips/expands to show the answer (use Framer Motion)
+
+### 6. Typography
+- Title text on image cards: bold, possibly uppercase, large (text-2xl or text-3xl), tight leading
+- Content text on text cards: slightly serif, comfortable reading size, generous spacing
+- Use CSS `text-shadow: 0 2px 4px rgba(0,0,0,0.8)` on text over images for readability
+
+## Files to Modify
+- `components/post-card.tsx` — Complete redesign (main work)
+- `components/feed-page.tsx` — Layout adjustments
+- `app/globals.css` — Any custom CSS needed (text-shadow utility, font imports)
+- `tailwind.config.ts` — If adding custom fonts
+
+## Files NOT to Touch
+- `lib/database.ts` — No schema changes
+- `app/api/*` — No API changes
+- `scripts/*` — No seed changes
+
+## Build & Test
+```bash
+cd /home/wdjones/.openclaw/workspace/projects/learning-feed
+npm run build
+# Must succeed with 0 errors
+# Start: PORT=3001 npm start
+```
+
+## Quality Bar
+- Cards must look like Instagram/TikTok content — not like a blog or documentation
+- Dark mode only
+- Mobile-first (test at 390px width mentally)
+- Images must have gradient overlays so text is always readable
+- Text-only cards must look intentional, not like broken image cards
+- Smooth animations (Framer Motion) on card entry and interactions
+- No layout shift when images load
+
+## DO NOT
+- Change the database schema
+- Add new dependencies unless truly necessary (prefer Tailwind + Framer Motion)
+- Add carousel/swipe between slides (that's Phase 3 — each post is still one card for now)
+- Add audio/video elements