tested all to_test

Author: stringhandler

meta/tasks/backlog/hero-icons-in-dropdowns.md

@@ -0,0 +1,33 @@
+# Hero Icons in Dropdowns
+
+## Overview
+
+Show hero portrait icons next to hero names in all hero filter/select dropdowns across the app. Use the small hero icons from the Valve/Steam CDN (the same minimap-style icons already used elsewhere in the app via `HeroIcon`).
+
+## Problem
+
+Hero dropdowns currently show plain text names only, making it harder to quickly identify heroes visually.
+
+## Approach
+
+Native `<select>` / `<option>` elements don't support images. Options:
+
+1. **Replace `<select>` with a custom dropdown component** — renders a styled list with `<img>` tags next to each name. Most work but best UX.
+2. **Use a lightweight existing component** — e.g. a simple popover list that mimics a select.
+
+The custom component is the right approach since `HeroIcon` already handles the CDN image URL logic.
+
+## Scope
+
+Apply to all hero dropdowns:
+- Goals list page (`/goals`) — hero filter
+- Goal details page (`/goals/[goalId]`) — hero filter + edit form hero select
+- Analysis page (`/analysis`) — hero filter
+- Goal creation flow (if any inline forms)
+
+## Acceptance Criteria
+- [ ] Hero icon shown to the left of hero name in all dropdowns
+- [ ] Favorites section still appears at the top
+- [ ] Selected hero shows its icon in the collapsed state
+- [ ] Keyboard navigation still works (or is acceptable without it)
+- [ ] Consistent sizing with the rest of the UI

…/tasks/to_test/challenge-history-page.md meta/tasks/done/challenge-history-page.mdmeta/tasks/to_test/challenge-history-page.md renamed to meta/tasks/done/challenge-history-page.md meta/tasks/to_test/challenge-history-page.md renamed to meta/tasks/done/challenge-history-page.md

@@ -201,14 +201,15 @@
   function formatGoalDescription(g) {
     if (!g) return "";
     const heroName = g.hero_id !== null ? getHeroName(g.hero_id) : "Any Hero";
+    const modeStr = g.game_mode ? ` (${g.game_mode})` : "";
     if (g.metric === "ItemTiming") {
       const itemName = g.item_id !== null ? getItemName(g.item_id) : "Unknown Item";
       const timeStr = formatSeconds(g.target_value);
-      return `${heroName}: ${itemName} by ${timeStr}`;
+      return `${heroName}: ${itemName} by ${timeStr}${modeStr}`;
     }
     const unit = getMetricUnit(g.metric);
     const valueStr = unit ? `${g.target_value} ${unit}` : `Level ${g.target_value}`;
-    return `${heroName}: ${valueStr} by ${g.target_time_minutes} min`;
+    return `${heroName}: ${valueStr} by ${g.target_time_minutes} min${modeStr}`;
   }
 
   function formatStatValue(value, metric) {
@@ -318,13 +319,13 @@
                   {#if favoriteHeroList.length > 0}
                     <optgroup label="⭐ Favorites">
                       {#each favoriteHeroList as hero}
-                        <option value={hero.id}>{hero.name}</option>
+                        <option value={String(hero.id)}>{hero.name}</option>
                       {/each}
                     </optgroup>
                   {/if}
                   <optgroup label="All Heroes">
                     {#each otherHeroList as hero}
-                      <option value={hero.id}>{hero.name}</option>
+                      <option value={String(hero.id)}>{hero.name}</option>
                     {/each}
                   </optgroup>
                 </select>