feat: ui adjustments

src/locales/en/translation.json

@@ -168,7 +168,8 @@
     "select_folder": "Select folder",
     "backup_from": "Backup from {{date}}",
     "custom_backup_location_set": "Custom backup location set",
-    "no_directory_selected": "No directory selected"
+    "no_directory_selected": "No directory selected",
+    "available_points": "Available points:"
   },
   "activation": {
     "title": "Activate Hydra",
@@ -378,7 +379,8 @@
     "new_achievements_unlocked": "Unlocked {{achievementCount}} new achievements from {{gameCount}} games",
     "achievement_progress": "{{unlockedCount}}/{{totalCount}} achievements",
     "achievements_unlocked_for_game": "Unlocked {{achievementCount}} new achievements for {{gameTitle}}",
-    "hidden_achievement_tooltip": "This is a hidden achievement"
+    "hidden_achievement_tooltip": "This is a hidden achievement",
+    "achievement_earn_points": "Earn {{points}} with this achievement"
   },
   "tour": {
     "subscription_tour_title": "Hydra Cloud Subscription",

src/locales/pt-BR/translation.json

@@ -164,7 +164,8 @@
     "select_folder": "Selecione a pasta",
     "manage_files_description": "Gerencie quais arquivos serão feitos backup",
     "clear": "Limpar",
-    "no_directory_selected": "Nenhum diretório selecionado"
+    "no_directory_selected": "Nenhum diretório selecionado",
+    "available_points": "Pontos disponíveis:"
   },
   "activation": {
     "title": "Ativação",
@@ -376,7 +377,8 @@
     "new_achievements_unlocked": "{{achievementCount}} novas conquistas de {{gameCount}} jogos",
     "achievement_progress": "{{unlockedCount}}/{{totalCount}} conquistas",
     "achievements_unlocked_for_game": "Desbloqueadas {{achievementCount}} novas conquistas em {{gameTitle}}",
-    "hidden_achievement_tooltip": "Está é uma conquista oculta"
+    "hidden_achievement_tooltip": "Está é uma conquista oculta",
+    "achievement_earn_points": "Ganhe {{points}} com essa conquista"
   },
   "tour": {
     "subscription_tour_title": "Assinatura Hydra Cloud",

src/renderer/src/pages/achievements/achievement-list.tsx

@@ -44,7 +44,9 @@ export function AchievementList({ achievements }: AchievementListProps) {
             {achievement.points && (
               <div
                 style={{ display: "flex", alignItems: "center", gap: "4px" }}
-                title="This achievement is worth 69 H-points"
+                title={t("achievement_earn_points", {
+                  points: achievement.points,
+                })}
               >
                 <HydraIcon width={20} height={20} />
                 <p style={{ fontSize: "1.1em" }}>{achievement.points}</p>

src/renderer/src/pages/achievements/achievement-panel.css.ts

@@ -5,7 +5,7 @@ import { SPACING_UNIT, vars } from "../../theme.css";
 
 export const panel = style({
   width: "100%",
-  padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
+  padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 3}px`,
   backgroundColor: vars.color.background,
   display: "flex",
   alignItems: "center",

src/renderer/src/pages/achievements/compared-achievement-panel.tsx

@@ -19,31 +19,31 @@ export function ComparedAchievementPanel({
   const {} = useContext(gameDetailsContext);
 
   return (
-    <>
-      <div
-        className={styles.panel}
-        style={{
-          display: "grid",
-          gridTemplateColumns:
-            achievements.owner.achievementsPointsEarnedSum !== undefined
-              ? "3fr 1fr 1fr"
-              : "3fr 2fr",
-        }}
-      >
-        <div style={{ display: "flex", gap: `${SPACING_UNIT}px` }}>
-          Total de pontos: <HydraIcon width={20} height={20} /> 4200
-        </div>
-        {achievements.owner.achievementsPointsEarnedSum !== undefined && (
-          <div className={styles.content}>
-            <HydraIcon width={20} height={20} />
-            {achievements.owner.achievementsPointsEarnedSum}
-          </div>
-        )}
+    <div
+      className={styles.panel}
+      style={{
+        display: "grid",
+        gridTemplateColumns:
+          achievements.owner.achievementsPointsEarnedSum !== undefined
+            ? "3fr 1fr 1fr"
+            : "3fr 2fr",
+        gap: `${SPACING_UNIT * 2}px`,
+      }}
+    >
+      <div style={{ display: "flex", gap: `${SPACING_UNIT}px` }}>
+        {t("available_points")} <HydraIcon width={20} height={20} />{" "}
+        {achievements.achievementsPointsTotal}
+      </div>
+      {achievements.owner.achievementsPointsEarnedSum !== undefined && (
         <div className={styles.content}>
           <HydraIcon width={20} height={20} />
-          {achievements.target.achievementsPointsEarnedSum}
+          {achievements.owner.achievementsPointsEarnedSum}
         </div>
+      )}
+      <div className={styles.content}>
+        <HydraIcon width={20} height={20} />
+        {achievements.target.achievementsPointsEarnedSum}
       </div>
-    </>
+    </div>
   );
 }

src/types/index.ts

@@ -368,6 +368,7 @@ export interface GameArtifact {
 }
 
 export interface ComparedAchievements {
+  achievementsPointsTotal: number;
   owner: {
     totalAchievementCount: number;
     unlockedAchievementCount: number;