Add recipe overview page linked from dashboard stat card

Clicking "Active Recipes" on the dashboard goes to /recipes/overview,
which shows favorites and the 12 most recently added recipes as cards.
Favorites are highlighted with a red border. Stat card has a hover lift.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

2 files changed, 87 insertions, 4 deletions

diff --git a/app/templates/index.html b/app/templates/index.html
index c33e348..55b5ef0 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -28,10 +28,12 @@
     </div>
   </div>
   <div class="col-6 col-md-3">
-    <div class="stat-card">
-      <div class="stat-number">{{ stat_map.get('candidate', 0) + stat_map.get('favorited', 0) }}</div>
-      <div class="stat-label">Active Recipes</div>
-    </div>
+    <a href="/recipes/overview" class="text-decoration-none">
+      <div class="stat-card stat-card-link">
+        <div class="stat-number">{{ stat_map.get('candidate', 0) + stat_map.get('favorited', 0) }}</div>
+        <div class="stat-label">Active Recipes</div>
+      </div>
+    </a>
   </div>
   <div class="col-6 col-md-3">
     <div class="stat-card">
diff --git a/app/templates/recipe_overview.html b/app/templates/recipe_overview.html
new file mode 100644
index 0000000..252aed2
--- /dev/null
+++ b/app/templates/recipe_overview.html
@@ -0,0 +1,81 @@
+{% extends "base.html" %}
+{% block title %}Recipe Overview — Menu Planner{% endblock %}
+
+{% block content %}
+<div class="d-flex align-items-center justify-content-between mb-4">
+  <h1 class="h3 fw-bold mb-0">Recipe Overview</h1>
+  <a href="/recipes" class="btn btn-sm btn-outline-secondary"><i class="bi bi-grid me-1"></i>Full Library</a>
+</div>
+
+{% if favorites %}
+<h2 class="h5 fw-semibold mb-3"><i class="bi bi-heart-fill text-danger me-2"></i>Favorites</h2>
+<div class="row g-3 mb-5">
+  {% for r in favorites %}
+  <div class="col-sm-6 col-lg-4 col-xl-3">
+    <a href="/recipes/{{ r.id }}" class="text-decoration-none">
+      <div class="recipe-card card h-100 shadow-sm border-danger border-opacity-25">
+        <div class="card-body d-flex flex-column">
+          <div class="d-flex align-items-start justify-content-between mb-2">
+            <span class="cuisine-pill">{{ cuisine_emoji.get(r.cuisine) }} {{ r.cuisine }}</span>
+            <i class="bi bi-heart-fill text-danger"></i>
+          </div>
+          <h5 class="card-title mb-1 text-dark">{{ r.name }}</h5>
+          <p class="card-text text-muted small flex-grow-1">{{ r.description[:90] }}{% if r.description|length > 90 %}…{% endif %}</p>
+          {% if r.rating %}
+          <div class="mb-1" style="color:#f59e0b;font-size:0.8rem">
+            {% for i in range(1,6) %}<i class="bi bi-star{% if r.rating >= i %}-fill{% endif %}"></i>{% endfor %}
+          </div>
+          {% endif %}
+          <div class="nutrition-row mt-auto">
+            <span class="nutri-badge"><i class="bi bi-lightning-charge"></i> {{ r.calories_per_serving|int }} cal</span>
+            <span class="nutri-badge"><i class="bi bi-circle-half"></i> {{ r.carbs_per_serving|int }}g carbs</span>
+            <span class="nutri-badge"><i class="bi bi-clock"></i> {{ r.prep_time + r.cook_time }} min</span>
+          </div>
+        </div>
+      </div>
+    </a>
+  </div>
+  {% endfor %}
+</div>
+{% endif %}
+
+{% if recent %}
+<h2 class="h5 fw-semibold mb-3"><i class="bi bi-clock-history text-primary me-2"></i>Recently Added</h2>
+<div class="row g-3">
+  {% for r in recent %}
+  <div class="col-sm-6 col-lg-4 col-xl-3">
+    <a href="/recipes/{{ r.id }}" class="text-decoration-none">
+      <div class="recipe-card card h-100 shadow-sm">
+        <div class="card-body d-flex flex-column">
+          <div class="d-flex align-items-start justify-content-between mb-2">
+            <span class="cuisine-pill">{{ cuisine_emoji.get(r.cuisine) }} {{ r.cuisine }}</span>
+            {% if r.status == 'favorited' %}<i class="bi bi-heart-fill text-danger"></i>{% endif %}
+          </div>
+          <h5 class="card-title mb-1 text-dark">{{ r.name }}</h5>
+          <p class="card-text text-muted small flex-grow-1">{{ r.description[:90] }}{% if r.description|length > 90 %}…{% endif %}</p>
+          {% if r.added_by %}<p class="text-muted small mb-1"><i class="bi bi-person me-1"></i>{{ r.added_by }}</p>{% endif %}
+          {% if r.rating %}
+          <div class="mb-1" style="color:#f59e0b;font-size:0.8rem">
+            {% for i in range(1,6) %}<i class="bi bi-star{% if r.rating >= i %}-fill{% endif %}"></i>{% endfor %}
+          </div>
+          {% endif %}
+          <div class="nutrition-row mt-auto">
+            <span class="nutri-badge"><i class="bi bi-lightning-charge"></i> {{ r.calories_per_serving|int }} cal</span>
+            <span class="nutri-badge"><i class="bi bi-circle-half"></i> {{ r.carbs_per_serving|int }}g carbs</span>
+            <span class="nutri-badge"><i class="bi bi-clock"></i> {{ r.prep_time + r.cook_time }} min</span>
+          </div>
+        </div>
+      </div>
+    </a>
+  </div>
+  {% endfor %}
+</div>
+{% endif %}
+
+{% if not favorites and not recent %}
+<div class="text-center py-5 text-muted">
+  <i class="bi bi-book fs-1"></i>
+  <p class="mt-3">No recipes yet. <a href="/recipes/add">Add one</a> or use the <a href="/ai">AI assistant</a>.</p>
+</div>
+{% endif %}
+{% endblock %}