docs: sync README with current feature state (heatmap redesign, landing page, ResizeObserver)

README.md

@@ -3,7 +3,7 @@
 **Fabrication Dashboard** — A sleek, modern project management & scheduling application built for fabrication workflows.
 Repo: https://github.com/jasonMPM/fabdash
 
-![Version](https://img.shields.io/badge/version-1.0.0-gold)
+![Version](https://img.shields.io/badge/version-1.1.0-gold)
 ![Stack](https://img.shields.io/badge/stack-React%20%2B%20Flask%20%2B%20SQLite-informational)
 ![Theme](https://img.shields.io/badge/theme-Dark%20%2F%20Gold-yellow)
 ![Docker](https://img.shields.io/badge/deployment-Single%20Docker%20Container-blue)
@@ -32,7 +32,7 @@ Repo: https://github.com/jasonMPM/fabdash
 
 ## Overview
 
-FabDash is a self-hosted, full-stack project management dashboard built for fabrication teams. It features a large interactive calendar, multi-deliverable project tracking, drag-and-drop scheduling, a per-project Focus View timeline, workload heatmap, agenda panel, right-click context menus, keyboard shortcuts, and a collapsible branded sidebar — all wrapped in a dark/gold UI and deployed as a single Docker container with no external dependencies.
+FabDash is a self-hosted, full-stack project management dashboard built for fabrication teams. It features a large interactive calendar, multi-deliverable project tracking, drag-and-drop scheduling, a per-project Focus View timeline, a redesigned workload heatmap with per-status color-coded grids, an agenda panel, right-click context menus, keyboard shortcuts, and a collapsible branded sidebar — all wrapped in a dark/gold UI and deployed as a single Docker container with no external dependencies.
 
 ---
 
@@ -108,7 +108,8 @@ fabdash/
     ├── postcss.config.js
     ├── index.html
     └── public/
-        └── logo.png                 # ← Drop your square logo here
+        ├── logo.png                 # ← Drop your square logo here
+        └── landing.html             # Self-contained marketing landing page
     └── src/
         ├── main.jsx
         ├── App.jsx                  # Sidebar layout, keyboard shortcuts, toast container
@@ -117,10 +118,10 @@ fabdash/
         │   └── deliverables.js
         ├── components/
         │   ├── Calendar/
-        │   │   ├── MainCalendar.jsx      # Events, drag-drop, tooltip, select, heatmap toggle
+        │   │   ├── MainCalendar.jsx      # Events, drag-drop, tooltip, select, ResizeObserver reflow
         │   │   ├── EventTooltip.jsx      # Hover preview card
         │   │   ├── AgendaPanel.jsx       # Upcoming deliverables (next 60 days)
-        │   │   └── WorkloadHeatmap.jsx   # 20-week density heatmap + stat cards
+        │   │   └── WorkloadHeatmap.jsx   # Per-status 4-column mini grids + combined All Tasks grid
         │   ├── Projects/
         │   │   ├── ProjectList.jsx       # Logo header, tab toggle, empty state
         │   │   ├── ProjectCard.jsx       # Drive link, dblclick, right-click
@@ -165,17 +166,39 @@ fabdash/
 - **Single-click event** — Opens Deliverable Focus View
 - **Double-click event** — Opens Edit Deliverable modal directly
 - **Right-click event** — Context menu (Edit, Focus View, Open Drive, Delete)
+- **Smooth sidebar reflow** — `ResizeObserver` calls `updateSize()` on every frame during the sidebar CSS transition so the calendar grid never clips or overflows
 
 ### Workload Heatmap
 
-Toggle between the calendar and heatmap with the **⬡ Heatmap** button in the top-right of the main area.
+Toggle between the calendar and heatmap with the **⬡ Heatmap** button in the top-right. When the heatmap is active, the button reads **← Calendar** to return.
 
-- **20-week grid** — Mon–Sun rows, week columns, centered 10 weeks before and after today
+The heatmap has two visual sections:
-- **Color intensity** — Cells shade from dark (no deliverables) to full gold (3+ deliverables)
+
-- **Today ring** — Current day highlighted with a white ring
+#### Per-Status Mini Grids (top row)
-- **Hover tooltip** — Shows date + all deliverable titles and project names for that day (up to 5, with overflow count)
+
+A 4-column grid — one column per status — each with a stat card above its heatmap:
+
+| Status | Color | Stat card shows |
+|---|---|---|
+| Upcoming | Blue | Total upcoming deliverables |
+| In Progress | Amber | Total in-progress deliverables |
+| Completed | Green | Total completed deliverables |
+| Overdue | Red | Total overdue deliverables |
+
+- **20-week grid per status** — Mon–Sun rows, week columns, centered 10 weeks before and after today
+- **3-tier intensity** — Empty → 20% tint (1 item) → 55% tint (2 items) → full color + glow (3+ items)
+- **Today ring** — Current day highlighted with a white ring across all grids
+- **Hover tooltip** — Shows date, status label, and all matching deliverable titles/projects (up to 5, overflow count)
+- **Click cell** — Opens Focus View for the first deliverable of that status on that day
+
+#### Combined "All Tasks" Grid (bottom)
+
+A single large heatmap (40px cells) showing every deliverable across all statuses:
+
+- **Dominant-status coloring** — Each day cell is colored by its most urgent status using priority order: `overdue > in_progress > upcoming > completed`. Ties resolved by count, then priority
+- **Color legend** — Inline legend shows all 4 status colors with labels
+- **Hover tooltip** — Shows per-status breakdown counts for that day, plus all deliverable titles/project names
 - **Click cell** — Opens Focus View for the first deliverable on that day
-- **Stat cards** — Total / Upcoming / In Progress / Completed / Overdue counts across all projects
 
 ### Sidebar
 
@@ -230,10 +253,24 @@ After a drag-and-drop rescheduling, a toast appears at the bottom of the screen
 - A circular SVG countdown ring showing seconds remaining (30s default)
 - Auto-dismisses when the timer expires
 
+### Landing Page
+
+A self-contained marketing page served at `/landing.html`. Built as a standalone HTML file in `frontend/public/` — Vite copies it to `dist/` and Flask serves it without touching app routing.
+
+- **Parallax hero** — Animated dark/gold header with tagline
+- **Mock app preview** — Static UI mockup of the calendar view
+- **Workload heatmap demo** — Illustrated heatmap section showing the density grid concept
+- **Benefit cards** — Feature highlights with icons
+- **Focus View mockup** — Illustrated timeline drawer preview
+- **How-it-works steps** — 3-step numbered walkthrough
+- **Docker quick-start block** — Copy-paste install commands
+- **Footer** — GitHub repository link
+
 ### Animations & Polish
 
 - **Modal enter** — Backdrop fades in, dialog scales up from 95% with a translateY, using `requestAnimationFrame` for reliable transitions
 - **Sidebar slide** — `transition-[width] duration-300` for smooth collapse/expand
+- **Calendar reflow** — `ResizeObserver` drives `updateSize()` on every pixel change during the sidebar transition
 - **Toast slide-up** — `@keyframes slide-up` animation in `globals.css`
 - **Heatmap cells** — `hover:scale-125` on each cell for tactile feedback
 
@@ -329,10 +366,14 @@ App
 │   └── Collapsed: [logo] square tile + ▶
 │
 ├── <main> MainCalendar
-│   ├── [⬡ Heatmap] toggle button
+│   ├── [⬡ Heatmap / ← Calendar] toggle button
 │   ├── FullCalendar                       ← eventDidMount: tooltip, dblclick, right-click
 │   │   └── Events (drag, click, select)
+│   │   └── ResizeObserver → updateSize() during sidebar transition
 │   ├── WorkloadHeatmap (toggled)
+│   │   ├── 4× per-status mini grids (blue/amber/green/red)
+│   │   │   └── stat card + 20-week heatmap per status
+│   │   └── Combined "All Tasks" grid (dominant-status coloring, 40px cells)
 │   ├── EventTooltip (hover)
 │   ├── DeliverableModal
 │   └── ContextMenu
@@ -380,7 +421,7 @@ Place your square logo file at:
 frontend/public/logo.png
 ```
 
-Supported formats: `.png`, `.jpg`, `.svg`, `.webp` — rename to `logo.png`. If omitted, the sidebar header shows text only and the collapsed toggle shows "FD".
+Supported formats: `.png`, `.jpg`, `.svg`, `.webp` — rename to `logo.png`. If omitted, the sidebar header shows text only and the collapsed toggle shows "FABDASH".
 
 ---
 
@@ -501,7 +542,7 @@ A healthy startup:
 FabDash supports a custom square logo that appears in two places:
 
 1. **Sidebar header** — Next to the "FabDash" wordmark (32×32px, `object-contain`)
-2. **Collapsed sidebar toggle** — Replaces the `▶` arrow with a branded square tile (32×32px)
+2. **Collapsed sidebar toggle** — Replaces the fallback "FABDASH" text with a branded square tile (32×32px)
 
 **To add your logo:**
 
@@ -667,7 +708,7 @@ To add a new column in a future version, append its `ALTER TABLE` statement to t
 
 ## Roadmap
 
-### v1.0 — Core Release *(current)*
+### v1.0 — Core Release *(shipped)*
 
 - [x] Dark/gold Tailwind design system
 - [x] FullCalendar — Month, Week, and Day views
@@ -704,6 +745,10 @@ To add a new column in a future version, append its `ALTER TABLE` statement to t
 
 ### v1.1 — Polish & UX *(in progress)*
 
+- [x] Heatmap redesign — 4 per-status color-coded mini grids (blue/amber/green/red) with individual stat cards
+- [x] Combined "All Tasks" heatmap — large 40px cells, dominant-status coloring, per-day status breakdown tooltip
+- [x] Smooth calendar reflow during sidebar transitions (ResizeObserver → `updateSize()`)
+- [x] Public landing page at `/landing.html` — parallax hero, feature cards, Docker quick-start, GitHub link
 - [ ] Animated modal and drawer exit transitions
 - [ ] Drag-and-drop between projects (reassign deliverable)
 - [ ] Mini calendar in sidebar for quick date navigation
@@ -748,4 +793,4 @@ To add a new column in a future version, append its `ALTER TABLE` statement to t
 
 ---
 
-*Built with intention. No subscriptions. No bloat. Just your fabrication workflow.*
+*Built with intention. No subscriptions. No bloat. Just your fabrication workflow.*