Merge pull request #1463 from hydralauncher/feat/user-badges

Feat/user badges

src/locales/en/translation.json

@@ -444,6 +444,9 @@
     "show_achievements_on_profile": "Show your achievements on your profile",
     "show_points_on_profile": "Show your earned points on your profile"
   },
+  "badge": {
+    "badge_description_theme_creator": "Awarded to those who created a custom theme"
+  },
   "achievement": {
     "achievement_unlocked": "Achievement unlocked",
     "user_achievements": "{{displayName}}'s Achievements",

src/locales/pt-BR/translation.json

@@ -440,6 +440,9 @@
     "show_achievements_on_profile": "Exiba suas conquistas no perfil",
     "show_points_on_profile": "Exiba seus pontos ganhos no perfil"
   },
+  "badge": {
+    "badge_description_theme_creator": "Concedido àqueles que criaram um tema customizado"
+  },
   "achievement": {
     "achievement_unlocked": "Conquista desbloqueada",
     "your_achievements": "Suas Conquistas",

src/renderer/src/context/user-profile/user-profile.context.tsx

@@ -41,7 +41,7 @@ export interface UserProfileContextProviderProps {
 export function UserProfileContextProvider({
   children,
   userId,
-}: UserProfileContextProviderProps) {
+}: Readonly<UserProfileContextProviderProps>) {
   const { userDetails } = useAppSelector((state) => state.userDetails);
 
   const [userStats, setUserStats] = useState<UserStats | null>(null);

src/renderer/src/pages/profile/profile-hero/profile-hero.scss

@@ -65,6 +65,12 @@
     overflow: hidden;
   }
 
+  &__display-name-container {
+    display: flex;
+    gap: globals.$spacing-unit;
+    align-items: center;
+  }
+
   &__display-name {
     font-weight: bold;
     overflow: hidden;
@@ -76,6 +82,12 @@
     text-shadow: 0 0 5px rgb(0 0 0 / 40%);
   }
 
+  &__display-name-badges-container {
+    display: flex;
+    gap: globals.$spacing-unit;
+    align-items: center;
+  }
+
   &__current-game {
     &-wrapper {
       display: flex;

src/renderer/src/pages/profile/profile-hero/profile-hero.tsx

@@ -25,6 +25,7 @@ import { EditProfileModal } from "../edit-profile-modal/edit-profile-modal";
 import Skeleton from "react-loading-skeleton";
 import { UploadBackgroundImageButton } from "../upload-background-image-button/upload-background-image-button";
 import "./profile-hero.scss";
+import { UserBadges } from "./user-badges";
 
 type FriendAction =
   | FriendRequestAction
@@ -307,9 +308,12 @@ export function ProfileHero() {
 
             <div className="profile-hero__information">
               {userProfile ? (
-                <h2 className="profile-hero__display-name">
-                  {userProfile?.displayName}
-                </h2>
+                <div className="profile-hero__display-name-container">
+                  <h2 className="profile-hero__display-name">
+                    {userProfile?.displayName}
+                  </h2>
+                  <UserBadges />
+                </div>
               ) : (
                 <Skeleton width={150} height={28} />
               )}

src/renderer/src/pages/profile/profile-hero/user-badges.tsx

@@ -0,0 +1,40 @@
+import BadgeThemeCreator from "@renderer/assets/icons/badge-theme-creator.svg?react";
+import "./profile-hero.scss";
+import { useContext } from "react";
+import { userProfileContext } from "@renderer/context";
+import { UserBadge } from "@types";
+import { useTranslation } from "react-i18next";
+
+export function UserBadges() {
+  const { t } = useTranslation("badge");
+  const { userProfile } = useContext(userProfileContext);
+
+  if (!userProfile?.badges?.length) return null;
+
+  const getBadgeIcon = (badge: UserBadge) => {
+    if (badge === "THEME_CREATOR") {
+      return <BadgeThemeCreator width={24} height={24} />;
+    }
+
+    return null;
+  };
+
+  return (
+    <div className="profile-hero__display-name-badges-container">
+      {userProfile.badges.map((badge) => {
+        const badgeIcon = getBadgeIcon(badge);
+
+        if (!badgeIcon) return null;
+        return (
+          <div
+            className={`badge__${badge.toLowerCase()}`}
+            key={badge}
+            title={t(`badge_description_${badge.toLowerCase()}`)}
+          >
+            {badgeIcon}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

src/types/index.ts

@@ -130,6 +130,8 @@ export interface UserProfileCurrentGame extends Omit<GameRunning, "objectId"> {
 
 export type ProfileVisibility = "PUBLIC" | "PRIVATE" | "FRIENDS";
 
+export type UserBadge = "THEME_CREATOR";
+
 export interface UserDetails {
   id: string;
   username: string;
@@ -164,6 +166,7 @@ export interface UserProfile {
   quirks: {
     backupsPerGameLimit: number;
   };
+  badges: UserBadge[];
 }
 
 export interface UpdateProfileRequest {