feat: Add "Show other options" to surface nutritionally equivalent food alternatives (#10)

* Initial plan

* feat: Add 'Show other options' feature to find similar foods by category and bestFor

Agent-Logs-Url: https://github.com/RMCampos/calories-tracker/sessions/00437e19-3c33-48b4-8d15-f29ac843a20f

Co-authored-by: RMCampos <2219519+RMCampos@users.noreply.github.com>

* fix: Address code review issues - string type, dedup logic, HTML escaping

Agent-Logs-Url: https://github.com/RMCampos/calories-tracker/sessions/00437e19-3c33-48b4-8d15-f29ac843a20f

Co-authored-by: RMCampos <2219519+RMCampos@users.noreply.github.com>

* fix: Add full HTML escaping including quotes in alternatives display

Agent-Logs-Url: https://github.com/RMCampos/calories-tracker/sessions/00437e19-3c33-48b4-8d15-f29ac843a20f

Co-authored-by: RMCampos <2219519+RMCampos@users.noreply.github.com>

* feat: improve food options by food type

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: RMCampos <2219519+RMCampos@users.noreply.github.com>
Co-authored-by: Ricardo Campos <ricardompcampos@gmail.com>
This commit is contained in:
Copilot
2026-04-28 11:07:34 -03:00
committed by GitHub
parent 44847d561f
commit 6837e4f139
4 changed files with 242 additions and 7 deletions
+54
View File
@@ -1198,3 +1198,57 @@ label {
font-size: 0.85rem;
}
}
/* Alternatives Card */
#alternatives-container {
margin-top: 20px;
animation: fadeIn 0.3s ease-in;
}
.alternatives-list-container {
background: rgba(40, 40, 40, 0.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(107, 141, 214, 0.3);
border-radius: 12px;
padding: 20px 25px;
}
.alternatives-title {
font-size: 1rem;
font-weight: 600;
color: white;
margin: 0 0 15px 0;
}
.alternative-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.alternative-item:last-child {
border-bottom: none;
}
.alternative-name {
color: #e0e0e0;
font-size: 0.9rem;
}
.alternative-quantity {
color: #6B8DD6;
font-weight: 600;
font-size: 0.9rem;
white-space: nowrap;
margin-left: 12px;
}
.no-alternatives {
color: #b0b0b0;
font-size: 0.9rem;
text-align: center;
padding: 10px 0;
font-style: italic;
}