feat: adding flame animation

src/locales/pt-BR/translation.json

@@ -6,7 +6,7 @@
   "home": {
     "featured": "Destaques",
     "trending": "Populares",
-    "hot": "🔥 Populares agora",
+    "hot": "Populares agora",
     "weekly": "📅 Mais baixados da semana",
     "surprise_me": "Surpreenda-me",
     "no_results": "Nenhum resultado encontrado",

src/renderer/src/components/sidebar/download-icon.tsx

@@ -1,4 +1,3 @@
-import { useRef } from "react";
 import Lottie from "lottie-react";
 
 import downloadingAnimation from "@renderer/assets/lottie/downloading.json";
@@ -8,11 +7,8 @@ export interface DownloadIconProps {
 }
 
 export function DownloadIcon({ isDownloading }: DownloadIconProps) {
-  const lottieRef = useRef(null);
-
   return (
     <Lottie
-      lottieRef={lottieRef}
       animationData={downloadingAnimation}
       loop={isDownloading}
       autoplay={isDownloading}

src/renderer/src/context/game-details/game-details.context.tsx

@@ -105,7 +105,7 @@ export function GameDetailsContextProvider({
           setShopDetails(appDetailsResult.value);
 
           if (
-            appDetailsResult.value!.content_descriptors.ids.includes(
+            appDetailsResult.value?.content_descriptors.ids.includes(
               SteamContentDescriptor.AdultOnlySexualContent
             )
           ) {

src/renderer/src/pages/home/home.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
@@ -8,10 +8,11 @@ import { Button, GameCard, Hero } from "@renderer/components";
 import type { Steam250Game, CatalogueEntry } from "@types";
 
 import starsAnimation from "@renderer/assets/lottie/stars.json";
+import flameAnimation from "@renderer/assets/lottie/flame.json";
 
 import * as styles from "./home.css";
-import { vars } from "@renderer/theme.css";
-import Lottie from "lottie-react";
+import { SPACING_UNIT, vars } from "@renderer/theme.css";
+import Lottie, { type LottieRefCurrentProps } from "lottie-react";
 import { buildGameDetailsPath } from "@renderer/helpers";
 import { CatalogueCategory } from "@shared";
 
@@ -19,6 +20,8 @@ export function Home() {
   const { t } = useTranslation("home");
   const navigate = useNavigate();
 
+  const flameAnimationRef = useRef<LottieRefCurrentProps>(null);
+
   const [isLoading, setIsLoading] = useState(false);
   const [randomGame, setRandomGame] = useState<Steam250Game | null>(null);
 
@@ -82,6 +85,18 @@ export function Home() {
 
   const categories = Object.values(CatalogueCategory);
 
+  const handleMouseEnterCategory = (category: CatalogueCategory) => {
+    if (category === CatalogueCategory.Hot) {
+      flameAnimationRef?.current?.play();
+    }
+  };
+
+  const handleMouseLeaveCategory = (category: CatalogueCategory) => {
+    if (category === CatalogueCategory.Hot) {
+      flameAnimationRef?.current?.stop();
+    }
+  };
+
   return (
     <SkeletonTheme baseColor={vars.color.background} highlightColor="#444">
       <section className={styles.content}>
@@ -100,7 +115,28 @@ export function Home() {
                       : "outline"
                   }
                   onClick={() => handleCategoryClick(category)}
+                  onMouseEnter={() => handleMouseEnterCategory(category)}
+                  onMouseLeave={() => handleMouseLeaveCategory(category)}
                 >
+                  {category === CatalogueCategory.Hot && (
+                    <div
+                      style={{ width: 16, height: 16, position: "relative" }}
+                    >
+                      <Lottie
+                        lottieRef={flameAnimationRef}
+                        animationData={flameAnimation}
+                        loop
+                        autoplay={false}
+                        style={{
+                          width: 30,
+                          top: -10,
+                          left: -5,
+                          position: "absolute",
+                        }}
+                      />
+                    </div>
+                  )}
+
                   {t(category)}
                 </Button>
               </li>
@@ -123,7 +159,25 @@ export function Home() {
           </Button>
         </section>
 
-        <h2>{t(currentCatalogueCategory)}</h2>
+        <h2 style={{ display: "flex", gap: SPACING_UNIT }}>
+          {currentCatalogueCategory === CatalogueCategory.Hot && (
+            <div style={{ width: 24, height: 24, position: "relative" }}>
+              <Lottie
+                animationData={flameAnimation}
+                loop
+                autoplay
+                style={{
+                  width: 40,
+                  top: -10,
+                  left: -5,
+                  position: "absolute",
+                }}
+              />
+            </div>
+          )}
+
+          {t(currentCatalogueCategory)}
+        </h2>
 
         <section className={styles.cards}>
           {isLoading

src/renderer/src/pages/profile/profile-content/profile-content.css.ts

@@ -155,6 +155,7 @@ export const listItemImage = style({
   width: "32px",
   height: "32px",
   borderRadius: "4px",
+  objectFit: "cover",
 });
 
 export const listItemDetails = style({