Badges Overhaul

[zaCKoZAck0]

Badges Overhaul

In the current setting Badges looks like a non-important part of the platform. Users don't know about how many badges they have earned (until they open their Profile), also needs other improvements overall.

Suggestions:

1. Asynchronous Loading of badges
   Currently, we load badges like this. This may lead to longer wait times if we add more badges.

const badges = await getBadges(user.id);

  return (
    <Dashboard user={user} isOwnProfile={isOwnProfile} badges={badges}>
      {children}
    </Dashboard>
  );

2. Add Badges Skeleton

3. Show badges on Successful Submission (AOT 2023 Related)
   This will directly show the user that they have earned a Badge without any schema changes / adding notification feature.(Only AOT / other events)

<Badges user={user} category={['aot-2023']} />

4. New Badges
   Ideas are appreciated, I only thought about adding a new 'Contributors' Badge
   
   Figma File: TypeHero Badges

5. Badges Lore
   Clicking on badges opens a dialog, that has additional details, and an option to share their achievement on Twitter
   

6. New Badge Schema (needs improvement)

export interface BadgeInfo {
  // Badge category
  category: 'aot-2023' | 'contributor';
  // Unique Identifier for a badge
  slug: string;
  // Badge name to be visible in UI
  name: string;
  // Badge level (Priority over other badges having the same category, used while grouping)
  level?: number;
  //  (Tier of badge, visible on UI)
  // eslint-disable-next-line @typescript-eslint/sort-type-constituents
  tier?: 'bronze' | 'silver' | 'gold' | 'platinum';
  // Eligibility to earn the badge, Visible on UI.
  eligibility: string;

7. Grouping Badges (AOT 2023 Related)
   Group similar badges on UI, e.g. All AOT 2023 Badges together.
   

[bautistaaa]

ohhh i like it. the github badge.

i think contributors/admin/mod should also have "flair" next to their user name so they stand out in the comments as well

[zaCKoZAck0]

If we add contributor to the roles. It'll be easy after that.