From 97ef606bbfac77cb977577b15126f454266b3caf Mon Sep 17 00:00:00 2001
From: rope <fredrik@nordhammer.it>
Date: Wed, 28 Oct 2026 11:45:32 +0000
Subject: [PATCH] Food variety tiles link to their recipes

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 static/app.js     | 2 +-
 static/styles.css | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/static/app.js b/static/app.js
index 68687a1..f0127b5 100644
--- a/static/app.js
+++ b/static/app.js
@@ -2368,7 +2368,7 @@ function reqRow(r) {
 // Every kind of food: lit when the stockpile holds a day of it, faded red when it doesn't.
 function foodKinds(r) {
   return `<div class="food-kinds">${Object.entries(r.foods).map(([id, meals]) =>
-    `<span class="${meals >= r.day ? "" : "missing"}" title="${esc(`${item(id).name} · ${fmt(meals)} / ${fmt(r.day)} meals`)}">${item(id).icon}</span>`).join("")}</div>`;
+    `<span class="${meals >= r.day ? "" : "missing"}"${goto(id)} title="${esc(`${item(id).name} · ${fmt(meals)} / ${fmt(r.day)} meals${gotoTip(id)}`)}">${item(id).icon}</span>`).join("")}</div>`;
 }
 
 function raidPrep(ev) {
diff --git a/static/styles.css b/static/styles.css
index af31aa9..5629659 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -891,4 +891,5 @@ button.swatch { width: 36px; height: 36px; }
   border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); }
 .food-kinds > span.missing { background: none; border-style: dashed; border-color: rgba(226, 100, 92, .35); }
 .food-kinds .missing .gi { color: var(--bad) !important; opacity: .3; }
+.food-kinds > span[data-goto]:hover { border-color: var(--muted); }
 .mood-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }