[$75] Remove Agent Icons from User Avatar Selection

[grgia]

[dilshodmackbook-sketch]

Proposal

What is the root cause of that problem?

The user avatar grid in Settings → Profile → Profile picture is driven by AvatarSelector, which iterates PRESET_AVATAR_CATALOG_ORDERED:

https://github.com/Expensify/App/blob/main/src/components/AvatarSelector.tsx#L7

https://github.com/Expensify/App/blob/main/src/components/AvatarSelector.tsx#L50-L71

That ordered list is built from PRESET_AVATAR_CATALOG, which spreads DEFAULTS, SEASON_F1, and BOT_AVATARS together — the bot/Agent icons (bot-avatar--blue/green/ice/pink/tangerine/yellow) are bundled into the same catalog that powers the user picker:

https://github.com/Expensify/App/blob/main/src/libs/Avatars/PresetAvatarCatalog.ts#L93-L100

https://github.com/Expensify/App/blob/main/src/libs/Avatars/PresetAvatarCatalog.ts#L192-L208

The Agent avatar picker, on the other hand, does not consume PRESET_AVATAR_CATALOG_ORDERED — it renders botAvatars directly from DefaultBotAvatars:

https://github.com/Expensify/App/blob/main/src/pages/settings/Agents/Fields/EditAgentAvatarPage.tsx#L195-L221

So bot avatars are visually leaking into the user picker through the shared ordered catalog, even though they're only ever meant to be selectable from the agent picker.

What changes do you think we should make in order to solve the problem?

I'd exclude BOT_AVATARS entries from PRESET_AVATAR_CATALOG_ORDERED (the grid source) while keeping them in PRESET_AVATAR_CATALOG itself — the catalog is still used by UserAvatarUtils.getAvatarLocal/URL and Agent.resolveAvatarURI to render existing bot-avatar selections, so we can't remove the entries entirely without breaking already-saved agent avatars.

In src/libs/Avatars/PresetAvatarCatalog.ts, narrow the source of IDs that feed the ordered list to exclude bot avatar IDs:

 const buildOrderedAvatars = (): Array<{id: PresetAvatarID} & AvatarEntry> => {
-    const allIDS = Object.keys(PRESET_AVATAR_CATALOG) as PresetAvatarID[];
+    // BOT_AVATARS power the Agent avatar picker (EditAgentAvatarPage) directly via `botAvatars`;
+    // they must not appear in the user avatar selector grid.
+    const allIDS = Object.keys(PRESET_AVATAR_CATALOG).filter((id) => !(id in BOT_AVATARS)) as PresetAvatarID[];
     const explicit = DISPLAY_ORDER.filter((id) => id in PRESET_AVATAR_CATALOG);
     const explicitSet = new Set<PresetAvatarID>(explicit);
     const leftovers = allIDS.filter((id) => !explicitSet.has(id)).sort();
     const finalIDOrder = [...explicit, ...leftovers];
     return finalIDOrder.map((id) => ({
         id,
         ...PRESET_AVATAR_CATALOG[id],
     }));
 };

DISPLAY_ORDER already doesn't include any bot-avatar--* entry, so this single filter is enough — bot IDs were only reaching the grid through the leftovers fallback. PRESET_AVATAR_CATALOG, getAvatarLocal, getAvatarURL, resolveAvatarURI, and isPresetAvatarID are all untouched, so existing agent avatars and saved bot-avatar references keep resolving correctly.

The screenshot also implicitly verifies the "Edit profile picture" header — that's AvatarPage, which is the only consumer of AvatarSelector (grep confirms no other usage), so this change is fully scoped to the user picker.

What alternative solutions did you explore? (Optional)

1. Remove ...BOT_AVATARS from PRESET_AVATAR_CATALOG. Simplest one-line change, but it breaks UserAvatarUtils.getAvatarLocal/URL (src/libs/UserAvatarUtils.ts#L147, #L242) and Agent.resolveAvatarURI (src/libs/actions/Agent.ts#L27) for any user or agent that already has a bot avatar saved — those lookups would silently fall through to fallback rendering. Rejected.
2. Add an excludeIDs / kind prop to AvatarSelector. Pushes filtering to the call site so each consumer scopes its own list. More flexible, but EditAgentAvatarPage doesn't even use AvatarSelector, so there's only one caller — the extra API surface buys nothing today. Rejected as YAGNI; can be revisited if a third selector emerges.
3. Filter inside AvatarSelector itself. Works, but bakes Agent-feature knowledge into a generic UI component. Keeping the filter in the catalog file co-locates it with the BOT_AVATARS definition, which is the more honest place.