Merge pull request #1486 from hydralauncher/feat/dynamic-badges

Chubby Granny Chaser · web-flow · commit c7735362e0e2 · 2025-03-04T20:45:36.000Z
feat: adding dynamic badges
diff --git a/package.json b/package.json
@@ -71,6 +71,7 @@
     "react-loading-skeleton": "^3.4.0",
     "react-redux": "^9.1.1",
     "react-router-dom": "^6.22.3",
+    "react-tooltip": "^5.28.0",
     "sound-play": "^1.1.0",
     "sudo-prompt": "^9.2.1",
     "tar": "^7.4.3",
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -444,9 +444,6 @@
     "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",
diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json
@@ -440,9 +440,6 @@
     "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",
diff --git a/src/locales/ru/translation.json b/src/locales/ru/translation.json
@@ -440,9 +440,6 @@
     "show_achievements_on_profile": "Покажите свои достижения в профиле",
     "show_points_on_profile": "Показывать заработанные очки в своем профиле"
   },
-  "badge": {
-    "badge_description_theme_creator": "Награждается тот, кто создал пользовательскую тему"
-  },
   "achievement": {
     "achievement_unlocked": "Достижение разблокировано",
     "user_achievements": "Достижения {{displayName}}",
diff --git a/src/main/events/index.ts b/src/main/events/index.ts
@@ -87,6 +87,7 @@ import "./themes/get-custom-theme-by-id";
 import "./themes/get-active-custom-theme";
 import "./themes/close-editor-window";
 import "./themes/toggle-custom-theme";
+import "./misc/get-badges";
 import { isPortableVersion } from "@main/helpers";
 
 ipcMain.handle("ping", () => "pong");
diff --git a/src/main/events/misc/get-badges.ts b/src/main/events/misc/get-badges.ts
@@ -0,0 +1,22 @@
+import { Badge } from "@types";
+import { registerEvent } from "../register-event";
+import { HydraApi } from "@main/services";
+import { db, levelKeys } from "@main/level";
+
+const getBadges = async (_event: Electron.IpcMainInvokeEvent) => {
+  const language = await db
+    .get<string, string>(levelKeys.language, {
+      valueEncoding: "utf-8",
+    })
+    .then((language) => language || "en");
+
+  const params = new URLSearchParams({
+    locale: language,
+  });
+
+  return HydraApi.get<Badge[]>(`/badges?${params.toString()}`, null, {
+    needsAuth: false,
+  });
+};
+
+registerEvent("getBadges", getBadges);
diff --git a/src/main/main.ts b/src/main/main.ts
@@ -132,7 +132,9 @@ const migrateFromSqlite = async () => {
         );
 
         if (rest.language) {
-          await db.put(levelKeys.language, rest.language);
+          await db.put<string, string>(levelKeys.language, rest.language, {
+            valueEncoding: "utf-8",
+          });
         }
       }
     })
diff --git a/src/preload/index.ts b/src/preload/index.ts
@@ -266,6 +266,7 @@ contextBridge.exposeInMainWorld("electron", {
   showItemInFolder: (path: string) =>
     ipcRenderer.invoke("showItemInFolder", path),
   getFeatures: () => ipcRenderer.invoke("getFeatures"),
+  getBadges: () => ipcRenderer.invoke("getBadges"),
   platform: process.platform,
 
   /* Auto update */
diff --git a/src/renderer/src/assets/icons/badge-theme-creator.svg b/src/renderer/src/assets/icons/badge-theme-creator.svg
diff --git a/src/renderer/src/components/avatar/avatar.scss b/src/renderer/src/components/avatar/avatar.scss
@@ -10,6 +10,7 @@
   cursor: pointer;
   color: globals.$muted-color;
   position: relative;
+  overflow: hidden;
 
   &__image {
     height: 100%;
diff --git a/src/renderer/src/components/avatar/avatar.tsx b/src/renderer/src/components/avatar/avatar.tsx
@@ -1,4 +1,5 @@
 import { PersonIcon } from "@primer/octicons-react";
+import cn from "classnames";
 
 import "./avatar.scss";
 
@@ -14,11 +15,18 @@ export interface AvatarProps
   src?: string | null;
 }
 
-export function Avatar({ size, alt, src, ...props }: AvatarProps) {
+export function Avatar({ size, alt, src, className, ...props }: AvatarProps) {
   return (
     <div className="profile-avatar" style={{ width: size, height: size }}>
       {src ? (
-        <img className="profile-avatar__image" alt={alt} src={src} {...props} />
+        <img
+          className={cn("profile-avatar__image", className)}
+          alt={alt}
+          src={src}
+          width={size}
+          height={size}
+          {...props}
+        />
       ) : (
         <PersonIcon size={size * 0.7} />
       )}
diff --git a/src/renderer/src/context/user-profile/user-profile.context.tsx b/src/renderer/src/context/user-profile/user-profile.context.tsx
@@ -1,6 +1,6 @@
 import { darkenColor } from "@renderer/helpers";
 import { useAppSelector, useToast } from "@renderer/hooks";
-import type { UserProfile, UserStats } from "@types";
+import type { Badge, UserProfile, UserStats } from "@types";
 import { average } from "color.js";
 
 import { createContext, useCallback, useEffect, useState } from "react";
@@ -16,6 +16,7 @@ export interface UserProfileContext {
   getUserProfile: () => Promise<void>;
   setSelectedBackgroundImage: React.Dispatch<React.SetStateAction<string>>;
   backgroundImage: string;
+  badges: Badge[];
 }
 
 export const DEFAULT_USER_PROFILE_BACKGROUND = "#151515B3";
@@ -28,6 +29,7 @@ export const userProfileContext = createContext<UserProfileContext>({
   getUserProfile: async () => {},
   setSelectedBackgroundImage: () => {},
   backgroundImage: "",
+  badges: [],
 });
 
 const { Provider } = userProfileContext;
@@ -47,6 +49,7 @@ export function UserProfileContextProvider({
   const [userStats, setUserStats] = useState<UserStats | null>(null);
 
   const [userProfile, setUserProfile] = useState<UserProfile | null>(null);
+  const [badges, setBadges] = useState<Badge[]>([]);
   const [heroBackground, setHeroBackground] = useState(
     DEFAULT_USER_PROFILE_BACKGROUND
   );
@@ -101,12 +104,18 @@ export function UserProfileContextProvider({
     });
   }, [navigate, getUserStats, showErrorToast, userId, t]);
 
+  const getBadges = useCallback(async () => {
+    const badges = await window.electron.getBadges();
+    setBadges(badges);
+  }, []);
+
   useEffect(() => {
     setUserProfile(null);
     setHeroBackground(DEFAULT_USER_PROFILE_BACKGROUND);
 
     getUserProfile();
-  }, [getUserProfile]);
+    getBadges();
+  }, [getUserProfile, getBadges]);
 
   return (
     <Provider
@@ -118,6 +127,7 @@ export function UserProfileContextProvider({
         setSelectedBackgroundImage,
         backgroundImage: getBackgroundImageUrl(),
         userStats,
+        badges,
       }}
     >
       {children}
diff --git a/src/renderer/src/declaration.d.ts b/src/renderer/src/declaration.d.ts
@@ -30,6 +30,7 @@ import type {
   GameRunning,
   TorBoxUser,
   Theme,
+  Badge,
 } from "@types";
 import type { AxiosProgressEvent } from "axios";
 import type disk from "diskusage";
@@ -217,6 +218,7 @@ declare global {
     ) => Promise<Electron.OpenDialogReturnValue>;
     showItemInFolder: (path: string) => Promise<void>;
     getFeatures: () => Promise<string[]>;
+    getBadges: () => Promise<Badge[]>;
     platform: NodeJS.Platform;
 
     /* Auto update */
diff --git a/src/renderer/src/main.tsx b/src/renderer/src/main.tsx
@@ -11,6 +11,7 @@ import "@fontsource/noto-sans/500.css";
 import "@fontsource/noto-sans/700.css";
 
 import "react-loading-skeleton/dist/skeleton.css";
+import "react-tooltip/dist/react-tooltip.css";
 
 import { App } from "./app";
 
diff --git a/src/renderer/src/pages/achievements/achievements-content.scss b/src/renderer/src/pages/achievements/achievements-content.scss
@@ -31,7 +31,7 @@ $logo-max-width: 200px;
         display: flex;
         justify-content: center;
         width: 100%;
-        gap: globals.$spacing-unit / 2;
+        gap: calc(globals.$spacing-unit / 2);
         color: globals.$body-color;
         cursor: pointer;
 
diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
@@ -27,6 +27,11 @@
     }
   }
 
+  &__badges {
+    display: flex;
+    gap: calc(globals.$spacing-unit / 2);
+  }
+
   &__user-information {
     display: flex;
     padding: calc(globals.$spacing-unit * 7) calc(globals.$spacing-unit * 3);
@@ -82,12 +87,6 @@
     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;
diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
@@ -24,8 +24,8 @@ import type { FriendRequestAction } from "@types";
 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 { Tooltip } from "react-tooltip";
 import "./profile-hero.scss";
-import { UserBadges } from "./user-badges";
 
 type FriendAction =
   | FriendRequestAction
@@ -35,8 +35,14 @@ export function ProfileHero() {
   const [showEditProfileModal, setShowEditProfileModal] = useState(false);
   const [isPerformingAction, setIsPerformingAction] = useState(false);
 
-  const { isMe, getUserProfile, userProfile, heroBackground, backgroundImage } =
-    useContext(userProfileContext);
+  const {
+    isMe,
+    badges,
+    getUserProfile,
+    userProfile,
+    heroBackground,
+    backgroundImage,
+  } = useContext(userProfileContext);
   const {
     signOut,
     updateFriendRequestState,
@@ -261,14 +267,6 @@ export function ProfileHero() {
 
   return (
     <>
-      {/* <ConfirmationModal
-        visible
-        title={t("sign_out_modal_title")}
-        descriptionText={t("sign_out_modal_text")}
-        confirmButtonLabel={t("sign_out")}
-        cancelButtonLabel={t("cancel")}
-      /> */}
-
       <EditProfileModal
         visible={showEditProfileModal}
         onClose={() => setShowEditProfileModal(false)}
@@ -312,7 +310,29 @@ export function ProfileHero() {
                   <h2 className="profile-hero__display-name">
                     {userProfile?.displayName}
                   </h2>
-                  <UserBadges />
+
+                  <div className="profile-hero__badges">
+                    {userProfile.badges.map((badgeName) => {
+                      const badge = badges.find((b) => b.name === badgeName);
+
+                      if (!badge) return null;
+
+                      return (
+                        <img
+                          key={badge.name}
+                          src={badge.badge.url}
+                          alt={badge.name}
+                          width={24}
+                          height={24}
+                          data-tooltip-place="top"
+                          data-tooltip-content={badge.description}
+                          data-tooltip-id="badge-name"
+                        />
+                      );
+                    })}
+
+                    <Tooltip id="badge-name" />
+                  </div>
                 </div>
               ) : (
                 <Skeleton width={150} height={28} />
diff --git a/src/renderer/src/pages/profile/profile-hero/user-badges.tsx b/src/renderer/src/pages/profile/profile-hero/user-badges.tsx
diff --git a/src/types/index.ts b/src/types/index.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -132,7 +132,9 @@ const migrateFromSqlite = async () => {`
`132`	`132`	`);`
`133`	`133`
`134`	`134`	`if (rest.language) {`
`135`		`- await db.put(levelKeys.language, rest.language);`
	`135`	`+ await db.put<string, string>(levelKeys.language, rest.language, {`
	`136`	`+ valueEncoding: "utf-8",`
	`137`	`+ });`
`136`	`138`	`}`
`137`	`139`	`}`
`138`	`140`	`})`