feat: create achievements page

src/renderer/src/declaration.d.ts

@@ -68,7 +68,8 @@ declare global {
     getTrendingGames: () => Promise<TrendingGame[]>;
     getGameAchievements: (
       objectId: string,
-      shop: GameShop
+      shop: GameShop,
+      userId?: string
     ) => Promise<GameAchievement[]>;
     onAchievementUnlocked: (
       cb: (

src/renderer/src/main.tsx

@@ -28,10 +28,11 @@ import {
 import { store } from "./store";
 
 import resources from "@locales";
-import { Achievement } from "./pages/achievement/achievement";
+import { AchievementNotification } from "./pages/achievement/notification/achievement-notification";
 
 import "./workers";
 import { RepacksContextProvider } from "./context";
+import { Achievement } from "./pages/achievement/achievements";
 
 Sentry.init({});
 
@@ -69,8 +70,12 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
               <Route path="/search" Component={SearchResults} />
               <Route path="/settings" Component={Settings} />
               <Route path="/profile/:userId" Component={Profile} />
+              <Route path="/achievements" Component={Achievement} />
             </Route>
-            <Route path="/achievement-notification" Component={Achievement} />
+            <Route
+              path="/achievement-notification"
+              Component={AchievementNotification}
+            />
           </Routes>
         </HashRouter>
       </RepacksContextProvider>

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

@@ -0,0 +1,11 @@
+import { useSearchParams } from "react-router-dom";
+
+export function Achievement() {
+  const [searchParams] = useSearchParams();
+
+  return (
+    <div>
+      <h1>Achievement</h1>
+    </div>
+  );
+}

src/renderer/src/pages/achievement/notification/achievement-notification.css.ts

@@ -1,5 +1,5 @@
 import { recipe } from "@vanilla-extract/recipes";
-import { vars } from "../../theme.css";
+import { vars } from "../../../theme.css";
 import { keyframes, style } from "@vanilla-extract/css";
 
 const animationIn = keyframes({

src/renderer/src/pages/achievement/notification/achievement-notification.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import achievementSound from "@renderer/assets/audio/achievement.wav";
 import { useTranslation } from "react-i18next";
-import * as styles from "./achievement.css";
+import * as styles from "./achievement-notification.css";
 
 interface AchievementInfo {
   displayName: string;
@@ -10,7 +10,7 @@ interface AchievementInfo {
 
 const NOTIFICATION_TIMEOUT = 4000;
 
-export function Achievement() {
+export function AchievementNotification() {
   const { t } = useTranslation("achievement");
 
   const [isClosing, setIsClosing] = useState(false);

src/renderer/src/pages/game-details/sidebar/sidebar.tsx

@@ -1,7 +1,7 @@
 import { useContext, useState } from "react";
 import type { HowLongToBeatCategory, SteamAppDetails } from "@types";
 import { useTranslation } from "react-i18next";
-import { Button } from "@renderer/components";
+import { Button, Link } from "@renderer/components";
 
 import * as styles from "./sidebar.css";
 import { gameDetailsContext } from "@renderer/context";
@@ -18,7 +18,7 @@ export function Sidebar() {
   const [activeRequirement, setActiveRequirement] =
     useState<keyof SteamAppDetails["pc_requirements"]>("minimum");
 
-  const { gameTitle, shopDetails, stats, achievements } =
+  const { gameTitle, shopDetails, stats, achievements, shop, objectID } =
     useContext(gameDetailsContext);
 
   const { t } = useTranslation("game_details");
@@ -26,6 +26,11 @@ export function Sidebar() {
 
   const { numberFormatter } = useFormat();
 
+  const buildGameAchievementPath = () => {
+    const urlParams = new URLSearchParams({ objectId: objectID!, shop });
+    return `/achievements?${urlParams.toString()}`;
+  };
+
   // useEffect(() => {
   //   if (objectID) {
   //     setHowLongToBeat({ isLoading: true, data: null });
@@ -61,6 +66,10 @@ export function Sidebar() {
                 {achievements.length})
               </span>
             </h3>
+            <span>
+              <Link to={buildGameAchievementPath()}>Ver todas</Link>
+              <a></a>
+            </span>
           </div>
           <div
             style={{
@@ -70,7 +79,7 @@ export function Sidebar() {
               padding: `${SPACING_UNIT * 2}px`,
             }}
           >
-            {achievements.map((achievement, index) => (
+            {achievements.slice(0, 6).map((achievement, index) => (
               <div
                 key={index}
                 style={{