Fall back to default Discord avatar when profile image fails to load (#3543)

## Description:

The api only refreshes user info every week or two, so when a user
changes their profile it image, the api had the reference to the
existing image. So for now just load in a default discord icon.

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

evan

src/client/Main.ts

@@ -101,17 +101,9 @@ function updateAccountNavButton(userMeResponse: UserMeResponse | false) {
       // If the avatar fails to load (bad URL / CDN issue / offline), fall back
       // to the default sign-in UI instead of leaving a broken image.
       avatarEl.onerror = () => {
-        // Only handle if this is the latest update
         if (avatarEl._navToken !== navToken) return;
-        avatarEl.src = "";
-        // If the user is still logged in via email, show the email badge state.
-        const email =
-          userMeResponse !== false ? userMeResponse.user.email : undefined;
-        if (email) {
-          showEmailLoggedIn();
-        } else {
-          showSignIn();
-        }
+        avatarEl.onerror = null;
+        avatarEl.src = "https://cdn.discordapp.com/embed/avatars/0.png";
       };
       avatarEl.onload = () => {
         // Only handle if this is the latest update

src/client/components/baseComponents/stats/DiscordUserHeader.ts

@@ -31,15 +31,20 @@ export class DiscordUserHeader extends LitElement {
   }
 
   render() {
+    const defaultAvatar = "https://cdn.discordapp.com/embed/avatars/0.png";
+    const imgSrc = this.avatarUrl ?? defaultAvatar;
     return html`
       <div class="flex items-center gap-2">
-        ${this.avatarUrl
+        ${this._data
           ? html`
               <div class="p-[3px] rounded-full bg-gray-500">
                 <img
                   class="w-12 h-12 rounded-full block"
-                  src="${this.avatarUrl}"
+                  src="${imgSrc}"
                   alt="${translateText("discord_user_header.avatar_alt")}"
+                  @error=${(e: Event) => {
+                    (e.target as HTMLImageElement).src = defaultAvatar;
+                  }}
                 />
               </div>
             `