feat: alphabetize targeting keys/values and show display names

[bokelley]

Summary

Improves the targeting selector UX by alphabetizing both keys and values, and displaying human-readable names instead of IDs in the selected targeting badges.

Changes

1. Alphabetize Targeting Keys

Added sorting after fetching keys:

// Sort keys alphabetically by display name
availableKeys.sort((a, b) => {
    const nameA = (a.display_name || a.name).toLowerCase();
    const nameB = (b.display_name || b.name).toLowerCase();
    return nameA.localeCompare(nameB);
});

2. Alphabetize Targeting Values

Added sorting after fetching values:

// Sort values alphabetically by display name
const sortedValues = [...data.values].sort((a, b) => {
    const nameA = (a.display_name || a.name).toLowerCase();
    const nameB = (b.display_name || b.name).toLowerCase();
    return nameA.localeCompare(nameB);
});

3. Show Display Names in Selected Targeting

Before: iabctax: IAB20 (showed IDs)
After: IAB Content: Travel (shows readable names)

Implementation:

• Store display names separately in window.targetingDisplayNames
• Track both key and value display names when selecting
• Render badges using display names with fallback to internal names
• Handle existing targeting data by building display name mappings

Benefits

• Easier to find: Keys and values appear in alphabetical order
• Readable: Selected targeting shows "IAB Content: Travel" instead of "iabctax: IAB20"
• Consistent: Same sorting behavior in both product page and targeting browser
• Intuitive: Users see friendly names throughout the flow

Before/After

Dropdown Order

Before: Random order from API (Mac Support, Net for Beginners, Palmtops/PDAs, Entertainment, Visual Basic, Web Search, Travel...)
After: Alphabetical order (Entertainment, Mac Support, Net for Beginners, Palmtops/PDAs, Travel, Visual Basic, Web Search...)

Selected Display

Before: iabctax: IAB20 (ID-based)
After: IAB Content: Travel (human-readable)

Test plan

• Load product add/edit page
• Verify targeting keys dropdown is alphabetized
• Select a key and verify values dropdown is alphabetized
• Select values and verify badges show display names (not IDs)
• Load targeting browser and verify keys list is alphabetized
• Search for keys - verify filtered results are still alphabetized
• All tests pass (861 unit, 32 integration, 28 integration_v2)

🤖 Generated with Claude Code