Feature/big picture beta (#2178)

* feat(big-picture): initialize Big Picture module with HTML, Vite config, and main app structure

* feat(big-picture): add Vite configuration and build scripts for Big Picture module

* feat(big-picture): implement openBigPictureWindow functionality in main and preload processes

* feat(big-picture): add Big Picture window functionality and integrate into sidebar

* feat(i18n): add translation key for "Big Picture" in English, Portuguese, and Russian

* refactor(big-picture): change App export to default and update import in main

* refactor(window-manager): streamline URL loading for Big Picture window and enable DevTools in non-packaged environments

* feat(constants): add IS_BROWSER and IS_DESKTOP constants for environment detection

* feat(big-picture): add SCSS styling and layout structure for Big Picture component

* feat(dependencies): add @fontsource/space-grotesk and @phosphor-icons/react packages to package.json

* feat(big-picture): implement routing and add Catalogue, Downloads, and Settings pages

* feat(big-picture): add Sidebar component with routing and styling

* feat(big-picture): implement close functionality in Settings page with responsive behavior

* style(big-picture): reset margins for headings and paragraphs in app.scss

* feat(big-picture): add Library page and update routing in Sidebar and main application

* chore(package): remove build script for big-picture from package.json

* feat(big-picture): add Library page functionality with sorting and searching capabilities

* feat(big-picture): add GameCard component with styling and structure

* refactor(big-picture): reorganize Library page structure and update styles for improved layout

* refactor: centralize globals and normalize sidebar/game-card layout

* feat: implement gamepad service and navigation services for enhanced input handling

* feat(big-picture): export services for gamepad and navigation functionalities

* feat(big-picture): add gamepad and navigation stores for state management

* feat(big-picture): add navigation hooks for enhanced user navigation and gamepad support

* refactor(big-picture): reorganize component structure by creating common directory and adding GameCard component

* feat(big-picture): add context providers for focus item actions, layer, and region

* feat(big-picture): implement NavigationInputProvider for gamepad navigation handling

* refactor(big-picture): simplify callback function formatting in useNavigationActions hook

* feat(big-picture): add NavigationStateBridge provider for navigation state synchronization

* feat(big-picture): add new focus-related components and update exports for improved navigation handling

* feat(big-picture): add gamepad layout definitions and export helper functions for gamepad handling

* feat(big-picture): introduce focus item actions and gamepad types for enhanced navigation handling

* refactor(big-picture): update import paths for types and services to improve module structure

* chore(dependencies): add zustand package for state management

* fix(big-picture): address accessibility issue by adding tabIndex for focus item

* refactor(big-picture): comment out unused updateAxisState method in GamepadService for future reference

* feat(big-picture): add GridFocusGroup component and update navigation service for grid orientation support

* feat(big-picture): integrate NavigationInputProvider and refactor App component structure for improved navigation

* feat(big-picture): add NavigationDiagnostics component for enhanced gamepad input debugging and integrate into App component

* feat(big-picture): implement gamepad visualizer components for enhanced input feedback and diagnostics

* fix(big-picture): set initial state of NavigationDiagnostics to open and enhance logging structure for better diagnostics

* feat(big-picture): enhance NavigationDiagnostics to display gamepad layout and connected pads for improved input diagnostics

* refactor(big-picture): rename NavigationDiagnostics to NavigationDiagnosticsPanel and restructure component for improved clarity and functionality

* refactor(big-picture): update GamepadService to include event parameters in button press and stick move callbacks for improved event handling

* feat(big-picture): add GamepadButtonPressEvent and GamepadStickMoveEvent interfaces for enhanced event handling

* refactor(big-picture): update useGamepad hook to include event parameters in button press and stick move callbacks for improved type safety

* feat(big-picture): add lastGamepadEvent state and display in NavigationDiagnosticsPanel for enhanced gamepad input tracking

* refactor(big-picture): enhance GamepadService to manage active gamepad state and improve input event handling with new meta information

* refactor(big-picture): improve gamepad input handling by adding event validation and resetting hold sessions based on active gamepad index

* refactor(big-picture): extend useGamepad hook to include active gamepad details and event validation for improved input handling

* refactor(big-picture): add activeGamepadIndex to gamepad store for improved state management and input handling

* refactor(big-picture): introduce GamepadInputStatus and GamepadInputEventMeta for enhanced gamepad event handling

* refactor(big-picture): enhance NavigationDiagnosticsPanel to include gamepad event status and active gamepad index for improved diagnostics

* refactor(big-picture): restructure GamepadService to manage stick states in a centralized map for improved state handling and timer management

* refactor(big-picture): enhance gamepad input handling by adding echo suppression features and updating diagnostics to reflect echo events

* style(big-picture): update game card and library page styles for improved layout and responsiveness

* refactor(big-picture): enhance gamepad input mapping by introducing new axis button and trigger mappings, and updating GamepadService to handle diverse input types

* refactor(big-picture): add support for multiple gamepad platforms and enhance input mappings for improved compatibility

* refactor(big-picture): add additional Xbox platform support in gamepad layout for enhanced compatibility

* refactor(big-picture): enhance NavigationDiagnosticsPanel with detailed gamepad debugging information and runtime platform detection

* refactor(big-picture): add Linux Standard Gamepad layout and update gamepad layout retrieval logic for platform-specific handling

* refactor(big-picture): implement D-pad repeat functionality in GamepadService for improved input responsiveness

* refactor(big-picture): improve D-pad and stick repeat functionality in GamepadService with accelerated repeat intervals for enhanced responsiveness

* refactor(big-picture): implement smooth scrolling for focused elements with new scrollFocusedElementIntoView helper

* feat(big-picture): add common UI components including Button, Input, Divider, Typography, ScrollArea, RouterAnchor, and UserProfile

* feat(big-picture): add string utility function to convert names to slugs

* feat(big-picture): add user details and search hooks for improved user experience

* feat(big-picture): enhance sidebar with library and profile components for improved navigation and user experience

* feat(big-picture): add PostCSS plugin for scoping CSS styles to the big picture component

* refactor(big-picture): streamline library hook and page by consolidating update logic into the hook

* refactor(big-picture): integrate HorizontalFocusGroup for improved layout management in the app component

* refactor(big-picture): update button, input, and user profile components to use FocusItem for improved accessibility and styling consistency

* refactor(big-picture): enhance sidebar layout and accessibility by replacing divs with RouteAnchor and integrating VerticalFocusGroup

* style(big-picture): add global styles for unordered lists and list items to ensure consistent spacing and appearance

* refactor(big-picture): improve sidebar layout by adding a focus region for the library list and updating styles

* refactor(big-picture): update import paths to use 'node:path' and enhance component props with Readonly types for better immutability

* refactor(big-picture): comment out unused UserProfile and user details hooks in sidebar for future implementation

* refactor(big-picture): simplify global checks and improve conditional logic in various services and components

* style(big-picture): refine button styles by removing redundant border and adjusting cursor property

* refactor(big-picture): replace clsx with classnames for improved class name management in ScrollArea component

* feat(big-picture): add common UI components including Accordion, Button, Checkbox, Chip, Divider, HorizontalCard, ImageLightbox, Input, ListCard, Modal, RouteAnchor, ScrollArea, SourceAnchor, and Tooltip with corresponding styles

* refactor(big-picture): improve code readability by formatting function and variable declarations in Button and Modal components

* refactor(big-picture): enhance layout structure and styling for improved responsiveness in App component

* feat(big-picture): enhance Chip component with variant support for solid and ghost styles

* style(big-picture): update Accordion component styles to enhance interactivity and visual consistency

* refactor(big-picture): enhance Divider component styles for improved orientation handling

* refactor(big-picture): simplify Tooltip component by removing unnecessary state and event handlers for improved performance

* feat(big-picture): implement Catalogue page with comprehensive component showcase and styling

* fix(big-picture): address accessibility issues in Checkbox component by adding role and ARIA attributes

* refactor(big-picture): rename router-anchor to route-anchor and update icon import for consistency

* chore(deps): add @radix-ui/react-slot package to dependencies

* refactor(settings): replace native button with custom Button component for consistency and improved styling

* refactor(big-picture): add asChild prop to focus groups for flexible component rendering

* feat(big-picture): add Header component with search functionality and integrate into layout

* refactor(big-picture): integrate Header and VerticalFocusGroup into layout for improved structure

* refactor(big-picture): remove unused styles and consolidate button styles for improved maintainability

* style(big-picture): rename style file to styles.scss and add header styles for improved layout

* refactor(big-picture): clean up Sidebar component by removing unused imports and commented-out code for better readability

* refactor(big-picture): remove RouteAnchor component to streamline codebase and eliminate redundancy

* refactor(big-picture): streamline UserProfile component by removing unnecessary wrappers and ensuring consistent image handling

* refactor(big-picture): update layout structure by removing inline styles and applying class names for better maintainability

* refactor(big-picture): enhance CSS scoping by adding renderer style handling and exclusion logic

* style(big-picture): add custom scrollbar styles and enhance layout structure for better UI experience

* refactor(big-picture): update header navigation logic to use dynamic base path for improved flexibility

* refactor(big-picture): update Sidebar component to use 'asChild' prop for improved flexibility in rendering

* fix: sonar comments

* refactor(big-picture): update Input component to use 'asChild' prop and clean up Sidebar layout by removing commented code

* refactor(big-picture): reorganize NavigationDiagnostics component for improved layout and functionality

* feat(big-picture): add pages export structure for improved component organization

* feat(big-picture): add Steam types for enhanced integration with Steam API

* feat(big-picture): add AnimatedHeroImage component for enhanced visual effects

* feat(big-picture): enhance AnimatedHeroImage component with advanced blending effects and improved styling

* feat(big-picture): add LibraryHero component with styling and functionality for displaying last played games

* refactor(big-picture): add exclusion logic for CSS selectors to improve scoping functionality

* feat(big-picture): enhance Button component with custom color support and improved styling transitions

* feat(big-picture): update LibraryHero component with enhanced background layering, responsive design, and improved content layout

* feat(big-picture): add color and date helper functions for improved color manipulation and relative date formatting

* refactor(big-picture): simplify LibraryPage layout by removing unused elements and integrating LibraryHero for last played games display

* feat(big-picture): introduce VerticalGameCard component with customizable progress display and hover effects

* feat(big-picture): update Catalogue component to include VerticalGameCard with new hover effects and progress display

* feat(big-picture): export VerticalGameCard component from common index for improved accessibility

* fix(big-picture): adjust card width styling to exclude vertical-game-card for better layout consistency

* feat(big-picture): enhance LibraryPage layout with improved styling and new components for better user experience

* feat(big-picture): enhance LibraryHero component with focus navigation and additional props for improved accessibility

* feat(big-picture): add game and image helper functions for improved game achievement progress and image source resolution

* feat(big-picture): add useDominantColor hook for extracting dominant color from images

* feat(big-picture): wrap button components with FocusItem for improved accessibility and focus management

* feat(big-picture): add asChild prop to FocusItem for flexible component rendering

* feat(big-picture): implement LibraryFocusGrid component with responsive grid layout for game cards

* feat(big-picture): enhance navigation service with block type handling for focus overrides

* feat(big-picture): update game subtitle formatting to use formatPlayedTime helper for dynamic time display

* fix(big-picture): update FocusItem component usage to include asChild prop for better rendering consistency

* fix(big-picture): refine FocusItem component to conditionally apply focus styles and attributes for better accessibility

* refactor(big-picture): update VerticalGameCard component to improve image error handling and enhance styles for better focus visibility

* fix(big-picture): adjust FocusItem component to conditionally apply outline style based on asChild prop for improved rendering

* fix(big-picture): update grid layout in FocusGrid component for improved responsiveness and adjust game card dimensions

* feat(big-picture): integrate NavigationAutoScrollBridge for enhanced navigation experience

* refactor(big-picture): remove unused scrollFocusedElementIntoView import from FocusItem component

* feat(big-picture): add autoScrollMode and getScrollAnchor props to GridFocusGroup for enhanced navigation control

* feat(big-picture): add autoScrollMode and getScrollAnchor props to HorizontalFocusGroup for improved navigation functionality

* feat(big-picture): add autoScrollMode and getScrollAnchor props to VerticalFocusGroup for improved navigation functionality

* feat(big-picture): enhance VerticalGameCard with progress completion state and dynamic icon rendering

* feat(big-picture): add placeholder and completed state styles to VerticalGameCard for enhanced visual feedback

* refactor(big-picture): optimize LibraryHero component with improved layer handling and refactoring of event callbacks

* feat(big-picture): export new components from library and providers for enhanced modularity

* feat(big-picture): add library navigation constants and utility functions for focus grid management

* feat(big-picture): implement useLibraryGridNavigation hook for managing focus grid navigation in the library

* feat(big-picture): create VerticalLibraryGameCard component for displaying game details in the library

* feat(big-picture): implement NavigationAutoScrollBridge for automatic scrolling based on focus changes

* feat(big-picture): enhance date formatting and improve focus auto-scroll functionality with new options and utility functions

* feat(big-picture): add FocusAutoScrollMode and update navigation region interface for enhanced scrolling options

* feat(big-picture): integrate library filters and grid components for improved game library management

* style(library): format SCSS for success border color to improve readability

* feat(big-picture): enhance LibraryFilters component with tab navigation overrides and new tab IDs for improved focus management

* refactor(library): streamline tab ID exports in navigation component for improved clarity

* i dont know at this point

* style(home): fix SCSS padding formatting for improved consistency

* refactor(navigation): change variable declaration from `let` to `const` for animation frame ID in NavigationAutoScrollBridge

* feat(big-picture): add new components for game UI including Box, AchievementsBox, Hero, PlaytimeBar, and RequirementsToPlay

* feat(big-picture): implement GameReviews component with review loading, voting, and sorting functionality

* feat(big-picture): add normalizeRequirementsHtml function to process HTML lists for improved rendering

* feat(big-picture): add tertiary button variant and update styles for improved UI

* feat(big-picture): add HowLongToBeatBox component for displaying game duration information

* feat(big-picture): add ScreenshotCarousel and VideoPlayer components for enhanced media display in game pages

* feat(big-picture): create index file for game components and add library update event handling

* feat(big-picture): implement Game page layout and styles, including game details and sidebar components

* refactor(big-picture): remove background color on hover for game button styles

* refactor(big-picture): remove unused setIsModalOpen prop from Hero component and update Game component to reflect changes

* refactor(big-picture): migrate useHlsVideo hook to shared directory and update imports in VideoPlayer components

* refactor(big-picture): enhance Input component with focus management and update styles for better layout

* refactor(big-picture): improve header component focus management and update styles for better responsiveness

* feat(big-picture): add Game component and enhance navigation with new game details path

* refactor(big-picture): update vertical game card components to improve accessibility and keyboard navigation

* refactor(big-picture): simplify navigation logic and remove unused search parameters in header component

* refactor(big-picture): update header styles to use CSS variables for height and adjust layout positioning

* fix(i18n): remove duplicate russian resume seeding key

Co-authored-by: Hachi-R <58823742+Hachi-R@users.noreply.github.com>

* fix(navigation): correct regex for trailing slashes in pathname normalization

* fix(navigation): optimize pathname normalization by replacing regex with a loop to remove trailing slashes

* refactor(big-picture): simplify header component search logic and enhance styles for focus visibility

* refactor(big-picture): remove unused firstPopularGameId prop from HomePageHero and update navigation logic

* refactor(big-picture): enhance HomePageHero component with improved game navigation and state management

* refactor(big-picture): add library-game-state hook and enhance navigation constants for HomePageHero

* feat(big-picture): add launch option for Big Picture mode in settings and translations

* feat(window-manager): implement user preferences for Big Picture mode and manage main window state

* feat(navigation): add constants and utility functions for game navigation elements

* feat(hero): enhance action button functionality and navigation for game hero component

* feat(game): implement navigation overrides and enhance focus management for How Long to Beat component

* feat(achievements): add focus navigation overrides and enhance accessibility for achievements component

* feat(requirements): add focus navigation overrides for minimum and recommended buttons to enhance accessibility

* feat(supported-languages): add focus navigation overrides for supported languages component to improve accessibility

* feat(screenshot-carousel): implement focus navigation overrides and enhance accessibility for screenshot carousel component

* feat(game-reviews): implement focus navigation overrides for game reviews component to enhance accessibility

* feat(game-stats): implement focus navigation overrides for game stats section to enhance accessibility

* feat(game-reviews): add load more button functionality and focus management for game reviews component

* feat(home): integrate featured game into HomePageHero and enhance focus management for PopularGames component

* feat(home): refactor Home component to use VerticalFocusGroup for improved focus management and accessibility

* style: update game screenshot carousel button focus styles

- Added focus styles for the previous and next buttons in the game screenshot carousel to improve accessibility and visual feedback.
- Removed duplicate focus styles from the previous location in the stylesheet for cleaner code.

* feat(home): add normalization functions for shop assets and trending games, enhance focus management in Home component

* fix: game pag navigation

* feat(library): enhance game launch functionality and update button labels

* style: enhance tab and header focus styles, update global overflow property

---------

Co-authored-by: japa2k <teruyuki709@gmail.com>
Co-authored-by: japa2k <71810047+japa2k@users.noreply.github.com>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>

.gitignore

@@ -1,22 +1,23 @@
-.vscode/
+.vscode/
-node_modules/
+node_modules/
-__pycache__
+__pycache__
-dist
+dist
-out
+out
-.DS_Store
+.DS_Store
-*.log*
+*.log*
-.env
+*.tsbuildinfo
-.vite
+.env
-ludusavi/**
+.vite
-!ludusavi/config.yaml
+ludusavi/**
-hydra-python-rpc/
+!ludusavi/config.yaml
-/hydra-native/
+hydra-python-rpc/
-native/hydra-native/target/
+/hydra-native/
-.python-version
+native/hydra-native/target/
-
+.python-version
-# Sentry Config File
+
-.env.sentry-build-plugin
+# Sentry Config File
-
+.env.sentry-build-plugin
-*storybook.log
+
-Future-updates.md
+*storybook.log
-TO-DO.md
+Future-updates.md
+TO-DO.md

electron.vite.config.ts

@@ -1,12 +1,13 @@
-import { resolve } from "path";
+import react from "@vitejs/plugin-react";
 import {
   defineConfig,
+  externalizeDepsPlugin,
   loadEnv,
   swcPlugin,
-  externalizeDepsPlugin,
 } from "electron-vite";
-import react from "@vitejs/plugin-react";
+import { resolve } from "path";
 import svgr from "vite-plugin-svgr";
+import { scopeBigPictureCss } from "./src/big-picture/vite-scope-big-picture-css";
 
 export default defineConfig(({ mode }) => {
   loadEnv(mode);
@@ -29,11 +30,35 @@ export default defineConfig(({ mode }) => {
     preload: {
       plugins: [externalizeDepsPlugin()],
     },
+    bigPicture: {
+      root: "src/big-picture",
+      build: {
+        outDir: "out/big-picture",
+        rollupOptions: {
+          input: resolve("src/big-picture/index.html"),
+        },
+      },
+      css: {
+        postcss: {
+          plugins: [scopeBigPictureCss()],
+        },
+      },
+      resolve: {
+        alias: {
+          "@locales": resolve("src/locales"),
+          "@shared": resolve("src/shared"),
+        },
+      },
+      plugins: [react()],
+    },
     renderer: {
       build: {
         sourcemap: true,
       },
       css: {
+        postcss: {
+          plugins: [scopeBigPictureCss()],
+        },
         preprocessorOptions: {
           scss: {
             api: "modern",

package.json

@@ -30,6 +30,7 @@
     "build:win": "npm run build:native && npm run build:python-rpc && electron-vite build && electron-builder --win",
     "build:mac": "npm run build:native && npm run build:python-rpc && electron-vite build && electron-builder --mac",
     "build:linux": "npm run build:native && npm run build:python-rpc && electron-vite build && electron-builder --linux",
+    "dev:big-picture": "vite dev src/big-picture",
     "prepare": "husky",
     "protoc": "npx protoc --ts_out src/main/generated --proto_path proto proto/*.proto"
   },
@@ -37,10 +38,13 @@
     "@electron-toolkit/preload": "^3.0.2",
     "@electron-toolkit/utils": "^4.0.0",
     "@fontsource/noto-sans": "^5.2.10",
+    "@fontsource/space-grotesk": "^5.2.10",
     "@hookform/resolvers": "^5.2.2",
     "@monaco-editor/react": "^4.6.0",
+    "@phosphor-icons/react": "^2.1.10",
     "@primer/octicons-react": "^19.9.0",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-slot": "^1.2.4",
     "@reduxjs/toolkit": "^2.2.3",
     "@sentry/react": "^10.33.0",
     "@tiptap/extension-bold": "^3.6.2",
@@ -102,7 +106,8 @@
     "workwonders-sdk": "0.4.2",
     "ws": "^8.18.1",
     "yaml": "^2.8.3",
-    "yup": "^1.5.0"
+    "yup": "^1.5.0",
+    "zustand": "^5.0.12"
   },
   "devDependencies": {
     "@aws-sdk/client-s3": "^3.705.0",

src/big-picture/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Hydra Big Picture</title>
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self' 'unsafe-inline' * data: local:; media-src 'self' 'unsafe-inline' * data: local: blob:;"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

src/big-picture/src/app.tsx

@@ -0,0 +1,83 @@
+import { Fragment, useEffect } from "react";
+import { Outlet, useLocation } from "react-router-dom";
+import {
+  BIG_PICTURE_APP_LAYER_ID,
+  BIG_PICTURE_CONTENT_REGION_ID,
+  BIG_PICTURE_SHELL_REGION_ID,
+  getBigPictureSidebarItemIdFromPathname,
+  Header,
+  Sidebar,
+} from "./layout";
+import { IS_DESKTOP } from "./constants";
+import {
+  HorizontalFocusGroup,
+  NavigationLayer,
+  NavigationAutoScrollBridge,
+  NavigationInputProvider,
+  NavigationStateBridge,
+  NavigationDiagnostics,
+  VerticalFocusGroup,
+} from "./components";
+import type { FocusOverrides } from "./services";
+
+import "./styles/globals.scss";
+
+export default function App() {
+  const { pathname } = useLocation();
+  const showNavigationDiagnostics = import.meta.env.DEV;
+  const activeSidebarItemId = getBigPictureSidebarItemIdFromPathname(pathname);
+  const contentNavigationOverrides: FocusOverrides = {
+    left: {
+      type: "item",
+      itemId: activeSidebarItemId,
+    },
+  };
+
+  useEffect(() => {
+    if (!IS_DESKTOP) {
+      document.documentElement.style.colorScheme = "dark";
+    }
+  }, []);
+
+  return (
+    <Fragment>
+      <NavigationStateBridge />
+      <NavigationAutoScrollBridge />
+
+      <NavigationInputProvider>
+        <NavigationLayer
+          layerId={BIG_PICTURE_APP_LAYER_ID}
+          rootRegionId={BIG_PICTURE_SHELL_REGION_ID}
+          initialFocusRegionId={BIG_PICTURE_CONTENT_REGION_ID}
+        >
+          <HorizontalFocusGroup
+            regionId={BIG_PICTURE_SHELL_REGION_ID}
+            autoScrollMode="auto"
+            asChild
+          >
+            <div id="big-picture">
+              <Sidebar />
+
+              <VerticalFocusGroup
+                regionId={BIG_PICTURE_CONTENT_REGION_ID}
+                navigationOverrides={contentNavigationOverrides}
+                autoScrollMode="auto"
+                asChild
+              >
+                <div className="big-picture__layout">
+                  <Header />
+
+                  <article className="big-picture__content">
+                    <Outlet />
+                  </article>
+                </div>
+              </VerticalFocusGroup>
+
+              {showNavigationDiagnostics && <NavigationDiagnostics />}
+            </div>
+          </HorizontalFocusGroup>
+        </NavigationLayer>
+      </NavigationInputProvider>
+    </Fragment>
+  );
+}

src/big-picture/src/components/common/accordion/index.tsx

@@ -0,0 +1,118 @@
+import "./styles.scss";
+
+import { useState, useEffect, type ReactNode } from "react";
+import { Typography } from "../typography";
+import { CaretUpIcon } from "@phosphor-icons/react";
+import { AnimatePresence, motion } from "framer-motion";
+import cn from "classnames";
+
+export interface AccordionProps {
+  title: string;
+  hint?: string;
+  open?: boolean;
+  icon?: ReactNode;
+  children: ReactNode;
+  onOpenChange?: (isOpen: boolean) => void;
+}
+
+interface AccordionHeaderProps {
+  title: string;
+  hint?: string;
+  icon?: ReactNode;
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  onOpenChange?: (isOpen: boolean) => void;
+}
+
+interface AccordionContentProps {
+  children: ReactNode;
+}
+
+function AccordionHeader({
+  title,
+  hint,
+  icon,
+  isOpen,
+  setIsOpen,
+  onOpenChange,
+}: Readonly<AccordionHeaderProps>) {
+  return (
+    <button
+      onClick={() => {
+        setIsOpen(!isOpen);
+        onOpenChange?.(!isOpen);
+      }}
+      className={cn("accordion__header", {
+        "accordion__header--open": isOpen,
+      })}
+    >
+      <div className="accordion__header__label">
+        {icon}
+        <Typography variant="label">{title}</Typography>
+      </div>
+
+      <div className="accordion__header__indicators">
+        {hint && <Typography variant="label">{hint}</Typography>}
+
+        <motion.div
+          animate={{ rotate: isOpen ? 0 : 180, y: isOpen ? 1 : 0 }}
+          transition={{ duration: 0.2 }}
+          className="accordion__header__indicators__icon"
+        >
+          <CaretUpIcon size={18} />
+        </motion.div>
+      </div>
+    </button>
+  );
+}
+
+function AccordionContent({ children }: Readonly<AccordionContentProps>) {
+  return <div className="accordion__content">{children}</div>;
+}
+
+export function Accordion({
+  title,
+  hint,
+  icon,
+  open = false,
+  children,
+  onOpenChange,
+}: Readonly<AccordionProps>) {
+  const [isOpen, setIsOpen] = useState(open);
+  const [hasMounted, setHasMounted] = useState(false);
+
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  return (
+    <div className="accordion">
+      <AccordionHeader
+        title={title}
+        hint={hint}
+        icon={icon}
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        onOpenChange={onOpenChange}
+      />
+
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={
+              !hasMounted && open
+                ? { height: "auto", scaleY: 1 }
+                : { height: 0, scaleY: 0 }
+            }
+            exit={{ height: 0, scaleY: 0 }}
+            animate={{ height: "auto", scaleY: 1 }}
+            transition={{ duration: 0.2, ease: "easeInOut" }}
+            style={{ originY: 0 }}
+          >
+            <AccordionContent>{children}</AccordionContent>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

src/big-picture/src/components/common/accordion/styles.scss

@@ -0,0 +1,64 @@
+.accordion {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-unit);
+}
+.accordion__header {
+  display: flex;
+  flex-direction: row;
+  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  background-color: var(--surface);
+  color: var(--text);
+  cursor: pointer;
+  transition: border-radius 0.05s ease-in-out;
+  border-radius: calc(var(--spacing-unit) * 2);
+
+  &.accordion__header--open {
+    border-radius: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2)
+      var(--spacing-unit) var(--spacing-unit);
+  }
+}
+
+.accordion__header__label,
+.accordion__header__indicators {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: calc(var(--spacing-unit) * 2);
+  text-transform: capitalize;
+
+  > svg {
+    color: currentColor;
+  }
+}
+
+.accordion__header__indicators {
+  color: var(--text-secondary);
+}
+
+.accordion__header__indicators__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: currentColor;
+
+  > svg {
+    align-items: center;
+    justify-content: center;
+    color: currentColor;
+  }
+}
+
+.accordion__content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  background-color: var(--surface);
+  padding: calc(var(--spacing-unit) * 4);
+  border-radius: var(--spacing-unit) var(--spacing-unit)
+    calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 2);
+}

src/big-picture/src/components/common/animated-hero-image/index.tsx

@@ -0,0 +1,406 @@
+import "./styles.scss";
+
+import { motion, type HTMLMotionProps } from "framer-motion";
+import { useCallback, useEffect, useRef } from "react";
+
+export interface AnimatedHeroImageProps
+  extends Omit<HTMLMotionProps<"img">, "src"> {
+  imageUrl: string;
+}
+
+const FALLBACK_BACKGROUND_COLOR = "rgba(8, 8, 8, 1)";
+
+const RGBA_WITH_ALPHA =
+  /^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*[\d.]+\s*\)$/;
+
+function getBackgroundColor(element: HTMLElement) {
+  const elementStyles = globalThis.getComputedStyle(element);
+  const rootStyles = globalThis.getComputedStyle(
+    globalThis.document.documentElement
+  );
+
+  return (
+    elementStyles.getPropertyValue("--background").trim() ||
+    rootStyles.getPropertyValue("--background").trim() ||
+    elementStyles.backgroundColor ||
+    FALLBACK_BACKGROUND_COLOR
+  );
+}
+
+function withAlpha(color: string, alpha: number) {
+  const normalizedAlpha = Math.max(0, Math.min(1, alpha));
+
+  if (color.startsWith("rgb(")) {
+    return color.replace("rgb(", "rgba(").replace(")", `, ${normalizedAlpha})`);
+  }
+
+  const rgbaMatch = RGBA_WITH_ALPHA.exec(color);
+
+  if (rgbaMatch) {
+    return `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, ${normalizedAlpha})`;
+  }
+
+  return FALLBACK_BACKGROUND_COLOR;
+}
+
+function getCoverCrop(
+  imageWidth: number,
+  imageHeight: number,
+  containerWidth: number,
+  containerHeight: number
+) {
+  const imageAspectRatio = imageWidth / imageHeight;
+  const containerAspectRatio = containerWidth / containerHeight;
+
+  if (imageAspectRatio > containerAspectRatio) {
+    const cropWidth = imageHeight * containerAspectRatio;
+
+    return {
+      sourceX: (imageWidth - cropWidth) / 2,
+      sourceY: 0,
+      sourceWidth: cropWidth,
+      sourceHeight: imageHeight,
+    };
+  }
+
+  const cropHeight = imageWidth / containerAspectRatio;
+
+  return {
+    sourceX: 0,
+    sourceY: (imageHeight - cropHeight) / 2,
+    sourceWidth: imageWidth,
+    sourceHeight: cropHeight,
+  };
+}
+
+function createLayer(width: number, height: number, devicePixelRatio: number) {
+  const canvas = globalThis.document.createElement("canvas");
+  canvas.width = Math.round(width * devicePixelRatio);
+  canvas.height = Math.round(height * devicePixelRatio);
+
+  const context = canvas.getContext("2d");
+
+  if (!context) return null;
+
+  context.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
+
+  return { canvas, context };
+}
+
+export function AnimatedHeroImage({
+  imageUrl,
+  alt = "",
+  className = "",
+  onLoad,
+  onError,
+  ...props
+}: Readonly<AnimatedHeroImageProps>) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const imageRef = useRef<HTMLImageElement | null>(null);
+  const blendCanvasRef = useRef<HTMLCanvasElement | null>(null);
+  const frameRef = useRef<number | null>(null);
+
+  const clearBlendCanvas = useCallback(() => {
+    const canvas = blendCanvasRef.current;
+
+    if (!canvas) return;
+
+    const context = canvas.getContext("2d");
+
+    if (!context) return;
+
+    context.clearRect(0, 0, canvas.width, canvas.height);
+  }, []);
+
+  const renderBlend = useCallback(() => {
+    const container = containerRef.current;
+    const image = imageRef.current;
+    const canvas = blendCanvasRef.current;
+
+    if (
+      !container ||
+      !image ||
+      !canvas ||
+      !image.complete ||
+      !image.naturalWidth
+    ) {
+      clearBlendCanvas();
+      return;
+    }
+
+    const bounds = container.getBoundingClientRect();
+    const width = bounds.width;
+    const height = bounds.height;
+
+    if (width <= 0 || height <= 0) {
+      clearBlendCanvas();
+      return;
+    }
+
+    const devicePixelRatio = Math.min(globalThis.devicePixelRatio || 1, 2);
+    const expectedWidth = Math.round(width * devicePixelRatio);
+    const expectedHeight = Math.round(height * devicePixelRatio);
+
+    if (canvas.width !== expectedWidth || canvas.height !== expectedHeight) {
+      canvas.width = expectedWidth;
+      canvas.height = expectedHeight;
+    }
+
+    const context = canvas.getContext("2d");
+
+    if (!context) return;
+
+    context.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
+    context.clearRect(0, 0, width, height);
+
+    const backgroundColor = getBackgroundColor(container);
+    const { sourceX, sourceY, sourceWidth, sourceHeight } = getCoverCrop(
+      image.naturalWidth,
+      image.naturalHeight,
+      width,
+      height
+    );
+
+    const bottomLayer = createLayer(width, height, devicePixelRatio);
+    const leftLayer = createLayer(width, height, devicePixelRatio);
+    const rightLayer = createLayer(width, height, devicePixelRatio);
+    if (!bottomLayer || !leftLayer || !rightLayer) return;
+
+    const bottomSourceHeight = sourceHeight * 0.34;
+    const sideSourceWidth = sourceWidth * 0.075;
+
+    bottomLayer.context.save();
+    bottomLayer.context.filter = `blur(${Math.max(32, height * 0.08)}px) saturate(1.08)`;
+    bottomLayer.context.globalAlpha = 0.56;
+    bottomLayer.context.drawImage(
+      image,
+      sourceX,
+      sourceY + sourceHeight - bottomSourceHeight,
+      sourceWidth,
+      bottomSourceHeight,
+      -width * 0.03,
+      height * 0.28,
+      width * 1.06,
+      height * 0.9
+    );
+    bottomLayer.context.filter = `blur(${Math.max(64, height * 0.13)}px)`;
+    bottomLayer.context.globalAlpha = 0.28;
+    bottomLayer.context.drawImage(
+      image,
+      sourceX,
+      sourceY + sourceHeight - bottomSourceHeight * 0.8,
+      sourceWidth,
+      bottomSourceHeight * 0.8,
+      -width * 0.06,
+      height * 0.36,
+      width * 1.12,
+      height * 0.84
+    );
+    bottomLayer.context.restore();
+
+    bottomLayer.context.globalCompositeOperation = "destination-in";
+    const bottomMask = bottomLayer.context.createLinearGradient(
+      0,
+      0,
+      0,
+      height
+    );
+    bottomMask.addColorStop(0, "rgba(0, 0, 0, 0)");
+    bottomMask.addColorStop(0.22, "rgba(0, 0, 0, 0)");
+    bottomMask.addColorStop(0.42, "rgba(0, 0, 0, 0.03)");
+    bottomMask.addColorStop(0.62, "rgba(0, 0, 0, 0.16)");
+    bottomMask.addColorStop(0.78, "rgba(0, 0, 0, 0.42)");
+    bottomMask.addColorStop(0.92, "rgba(0, 0, 0, 0.72)");
+    bottomMask.addColorStop(1, "rgba(0, 0, 0, 1)");
+    bottomLayer.context.fillStyle = bottomMask;
+    bottomLayer.context.fillRect(0, 0, width, height);
+    bottomLayer.context.globalCompositeOperation = "destination-out";
+
+    const seamSoftener = bottomLayer.context.createLinearGradient(
+      0,
+      height * 0.2,
+      0,
+      height * 0.58
+    );
+    seamSoftener.addColorStop(0, "rgba(0, 0, 0, 1)");
+    seamSoftener.addColorStop(0.38, "rgba(0, 0, 0, 0.4)");
+    seamSoftener.addColorStop(1, "rgba(0, 0, 0, 0)");
+    bottomLayer.context.fillStyle = seamSoftener;
+    bottomLayer.context.fillRect(0, height * 0.2, width, height * 0.38);
+    bottomLayer.context.globalCompositeOperation = "source-over";
+
+    leftLayer.context.save();
+    leftLayer.context.filter = `blur(${Math.max(28, width * 0.035)}px) saturate(1.02)`;
+    leftLayer.context.globalAlpha = 0.78;
+    leftLayer.context.drawImage(
+      image,
+      sourceX,
+      sourceY,
+      sideSourceWidth,
+      sourceHeight,
+      0,
+      -height * 0.02,
+      width * 0.16,
+      height * 1.04
+    );
+    leftLayer.context.restore();
+
+    leftLayer.context.globalCompositeOperation = "destination-in";
+    const leftMask = leftLayer.context.createLinearGradient(
+      0,
+      0,
+      width * 0.2,
+      0
+    );
+    leftMask.addColorStop(0, "rgba(0, 0, 0, 1)");
+    leftMask.addColorStop(0.52, "rgba(0, 0, 0, 0.9)");
+    leftMask.addColorStop(1, "rgba(0, 0, 0, 0)");
+    leftLayer.context.fillStyle = leftMask;
+    leftLayer.context.fillRect(0, 0, width * 0.2, height);
+    leftLayer.context.globalCompositeOperation = "source-over";
+
+    rightLayer.context.save();
+    rightLayer.context.filter = `blur(${Math.max(28, width * 0.035)}px) saturate(1.02)`;
+    rightLayer.context.globalAlpha = 0.78;
+    rightLayer.context.drawImage(
+      image,
+      sourceX + sourceWidth - sideSourceWidth,
+      sourceY,
+      sideSourceWidth,
+      sourceHeight,
+      width * 0.84,
+      -height * 0.02,
+      width * 0.16,
+      height * 1.04
+    );
+    rightLayer.context.restore();
+
+    rightLayer.context.globalCompositeOperation = "destination-in";
+    const rightMask = rightLayer.context.createLinearGradient(
+      width,
+      0,
+      width * 0.8,
+      0
+    );
+    rightMask.addColorStop(0, "rgba(0, 0, 0, 1)");
+    rightMask.addColorStop(0.52, "rgba(0, 0, 0, 0.9)");
+    rightMask.addColorStop(1, "rgba(0, 0, 0, 0)");
+    rightLayer.context.fillStyle = rightMask;
+    rightLayer.context.fillRect(width * 0.8, 0, width * 0.2, height);
+    rightLayer.context.globalCompositeOperation = "source-over";
+
+    context.drawImage(bottomLayer.canvas, 0, 0, width, height);
+    context.drawImage(leftLayer.canvas, 0, 0, width, height);
+    context.drawImage(rightLayer.canvas, 0, 0, width, height);
+
+    const verticalFade = context.createLinearGradient(
+      0,
+      height * 0.32,
+      0,
+      height
+    );
+    verticalFade.addColorStop(0, withAlpha(backgroundColor, 0));
+    verticalFade.addColorStop(0.14, withAlpha(backgroundColor, 0.02));
+    verticalFade.addColorStop(0.32, withAlpha(backgroundColor, 0.08));
+    verticalFade.addColorStop(0.54, withAlpha(backgroundColor, 0.18));
+    verticalFade.addColorStop(0.72, withAlpha(backgroundColor, 0.38));
+    verticalFade.addColorStop(0.86, withAlpha(backgroundColor, 0.68));
+    verticalFade.addColorStop(0.94, withAlpha(backgroundColor, 0.9));
+    verticalFade.addColorStop(1, backgroundColor);
+    context.fillStyle = verticalFade;
+    context.fillRect(0, height * 0.32, width, height * 0.68);
+
+    const leftFade = context.createLinearGradient(0, 0, width * 0.12, 0);
+    leftFade.addColorStop(0, backgroundColor);
+    leftFade.addColorStop(0.26, withAlpha(backgroundColor, 0.58));
+    leftFade.addColorStop(1, withAlpha(backgroundColor, 0));
+    context.fillStyle = leftFade;
+    context.fillRect(0, 0, width * 0.12, height);
+
+    const rightFade = context.createLinearGradient(width, 0, width * 0.88, 0);
+    rightFade.addColorStop(0, backgroundColor);
+    rightFade.addColorStop(0.26, withAlpha(backgroundColor, 0.58));
+    rightFade.addColorStop(1, withAlpha(backgroundColor, 0));
+    context.fillStyle = rightFade;
+    context.fillRect(width * 0.88, 0, width * 0.12, height);
+  }, [clearBlendCanvas]);
+
+  const scheduleRender = useCallback(() => {
+    if (frameRef.current != null) {
+      globalThis.cancelAnimationFrame(frameRef.current);
+    }
+
+    frameRef.current = globalThis.requestAnimationFrame(() => {
+      renderBlend();
+      frameRef.current = null;
+    });
+  }, [renderBlend]);
+
+  useEffect(() => {
+    if (!imageUrl) {
+      clearBlendCanvas();
+      return;
+    }
+
+    const container = containerRef.current;
+
+    if (!container) return;
+
+    const resizeObserver = new ResizeObserver(() => {
+      scheduleRender();
+    });
+
+    resizeObserver.observe(container);
+    scheduleRender();
+
+    return () => {
+      resizeObserver.disconnect();
+
+      if (frameRef.current != null) {
+        globalThis.cancelAnimationFrame(frameRef.current);
+        frameRef.current = null;
+      }
+    };
+  }, [clearBlendCanvas, imageUrl, scheduleRender]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={`animated-hero-image ${className}`.trim()}
+    >
+      {imageUrl ? (
+        <motion.img
+          ref={imageRef}
+          src={imageUrl}
+          alt={alt}
+          className="animated-hero-image__main"
+          initial={{ scale: 1, x: 0, y: 0 }}
+          animate={{
+            scale: 1.1,
+            x: -10,
+            y: -10,
+          }}
+          transition={{
+            duration: 20,
+            ease: "easeInOut",
+            repeat: Infinity,
+            repeatType: "mirror",
+          }}
+          onLoad={(event) => {
+            scheduleRender();
+            onLoad?.(event);
+          }}
+          onError={(event) => {
+            clearBlendCanvas();
+            onError?.(event);
+          }}
+          {...props}
+        />
+      ) : null}
+
+      <div className="animated-hero-image__blend-wrap" aria-hidden="true">
+        <canvas ref={blendCanvasRef} className="animated-hero-image__blend" />
+      </div>
+    </div>
+  );
+}

src/big-picture/src/components/common/animated-hero-image/styles.scss

@@ -0,0 +1,34 @@
+.animated-hero-image {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: block;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.animated-hero-image__main {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+  object-position: center;
+  will-change: transform;
+}
+
+.animated-hero-image__blend-wrap {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.animated-hero-image__blend {
+  display: block;
+  width: 100%;
+  height: 100%;
+}

src/big-picture/src/components/common/backdrop/index.tsx

@@ -0,0 +1,22 @@
+import "./styles.scss";
+
+import { motion } from "framer-motion";
+import type { ReactNode } from "react";
+
+export interface BackdropProps {
+  children: ReactNode;
+}
+
+export function Backdrop({ children }: Readonly<BackdropProps>) {
+  return (
+    <motion.div
+      className="backdrop"
+      initial={{ backgroundColor: "rgba(0, 0, 0, 0)" }}
+      animate={{ backgroundColor: "rgba(0, 0, 0, 0.7)" }}
+      exit={{ backgroundColor: "rgba(0, 0, 0, 0)" }}
+      transition={{ duration: 0.2, ease: "easeInOut" }}
+    >
+      {children}
+    </motion.div>
+  );
+}

src/big-picture/src/components/common/backdrop/styles.scss

@@ -0,0 +1,11 @@
+.backdrop {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+  top: 0;
+  padding: calc(var(--spacing-unit) * 3);
+}

src/big-picture/src/components/common/box/index.tsx

@@ -0,0 +1,52 @@
+import { Typography } from "..";
+
+interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+  title: string;
+  value: string;
+}
+
+function Box({
+  children,
+  ...props
+}: Readonly<Omit<BoxProps, "title" | "value">>) {
+  const { style, ...rest } = props;
+
+  return (
+    <div
+      style={{
+        backgroundColor: "#0E0E0E",
+        padding: 8,
+        ...style,
+      }}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+
+function TitleBox({ title }: Readonly<Omit<BoxProps, "value">>) {
+  return (
+    <Box>
+      <Typography
+        style={{ textAlign: "center", color: "rgba(255, 255, 255, 0.5)" }}
+      >
+        {title}
+      </Typography>
+    </Box>
+  );
+}
+
+function SingleLineBox({ title, value }: Readonly<BoxProps>) {
+  return (
+    <Box style={{ display: "flex", justifyContent: "space-between" }}>
+      <Typography style={{ color: "rgba(255, 255, 255, 0.5)" }}>
+        {title}
+      </Typography>
+      <Typography style={{ fontWeight: "700" }}>{value}</Typography>
+    </Box>
+  );
+}
+
+export { Box, TitleBox, SingleLineBox };

src/big-picture/src/components/common/button/index.tsx

@@ -0,0 +1,182 @@
+import "./styles.scss";
+
+import { SpinnerIcon } from "@phosphor-icons/react";
+import cn from "classnames";
+import { Link } from "react-router-dom";
+import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from "react";
+import { getContrastTextColor } from "../../../helpers";
+import { FocusItem } from "..";
+import type { FocusOverrides } from "../../../services";
+
+const variants = {
+  primary: "button--primary",
+  secondary: "button--secondary",
+  tertiary: "button--tertiary",
+  rounded: "button--rounded",
+  danger: "button--danger",
+  link: "button--link",
+};
+
+const sizes = {
+  icon: "button--icon",
+  small: "button--small",
+  medium: "button--medium",
+  large: "button--large",
+};
+
+export interface ButtonProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+  loading?: boolean;
+  variant?: keyof typeof variants;
+  size?: keyof typeof sizes;
+  children: ReactNode;
+  icon?: ReactNode;
+  href?: string;
+  iconPosition?: "left" | "right";
+  target?: "_blank" | "_self" | "_parent" | "_top";
+  className?: string;
+  color?: string;
+  focusId?: string;
+  focusNavigationOverrides?: FocusOverrides;
+}
+
+function isExternalHref(href: string) {
+  return (
+    /^(?:[a-z][a-z\d+.-]*:)?\/\//i.test(href) || href.startsWith("mailto:")
+  );
+}
+
+export function Button({
+  loading = false,
+  disabled = false,
+  size = "medium",
+  variant = "primary",
+  iconPosition = "left",
+  href,
+  icon,
+  onClick,
+  children,
+  target,
+  className,
+  color,
+  style,
+  focusId,
+  focusNavigationOverrides,
+  "aria-label": ariaLabel,
+  ...props
+}: Readonly<ButtonProps>) {
+  const buttonClassName = cn(
+    "button",
+    variants[variant],
+    sizes[size],
+    className,
+    {
+      "button--disabled": disabled || loading,
+    }
+  );
+
+  const buttonStyle = {
+    ...style,
+    ...(color
+      ? {
+          "--button-custom-color": color,
+          "--button-custom-hover-color": `color-mix(in srgb, ${color} 80%, white)`,
+          "--button-custom-text-color": getContrastTextColor(color),
+        }
+      : {}),
+  } as CSSProperties;
+
+  if (!href) {
+    return (
+      <FocusItem
+        id={focusId}
+        navigationOverrides={focusNavigationOverrides}
+        asChild
+      >
+        <button
+          onClick={onClick}
+          disabled={disabled || loading}
+          aria-busy={loading}
+          aria-label={size === "icon" ? ariaLabel : undefined}
+          className={buttonClassName}
+          style={buttonStyle}
+          {...props}
+        >
+          {loading && (
+            <div
+              className={`button__icon-container--${iconPosition} button__icon-container`}
+            >
+              <SpinnerIcon size={20} className="button__loading-icon" />
+            </div>
+          )}
+
+          {icon && !loading && (
+            <div
+              className={`button__icon-container--${iconPosition} button__icon-container`}
+            >
+              {icon}
+            </div>
+          )}
+
+          {children && (!loading || typeof children === "string") && (
+            <p className="button__text">{children}</p>
+          )}
+        </button>
+      </FocusItem>
+    );
+  }
+
+  const linkContent = (
+    <>
+      {icon && (
+        <div
+          className={`button__icon-container--${iconPosition} button__icon-container`}
+        >
+          {icon}
+        </div>
+      )}
+
+      {children && <p className="button__text">{children}</p>}
+    </>
+  );
+
+  if (target === "_blank" || isExternalHref(href)) {
+    return (
+      <FocusItem
+        id={focusId}
+        navigationOverrides={focusNavigationOverrides}
+        asChild
+      >
+        <a
+          href={href}
+          target={target}
+          rel={target === "_blank" ? "noreferrer" : undefined}
+          aria-label={size === "icon" ? ariaLabel : undefined}
+          className={buttonClassName}
+          style={buttonStyle}
+          onClick={onClick as never}
+        >
+          {linkContent}
+        </a>
+      </FocusItem>
+    );
+  }
+
+  return (
+    <FocusItem
+      id={focusId}
+      navigationOverrides={focusNavigationOverrides}
+      asChild
+    >
+      <Link
+        to={href}
+        aria-label={size === "icon" ? ariaLabel : undefined}
+        className={buttonClassName}
+        style={buttonStyle}
+        onClick={onClick as never}
+      >
+        {linkContent}
+      </Link>
+    </FocusItem>
+  );
+}

src/big-picture/src/components/common/button/styles.scss

@@ -0,0 +1,211 @@
+.button {
+  --button-custom-color: var(--primary);
+  --button-custom-hover-color: var(--primary-hover);
+  --button-custom-text-color: var(--background);
+  appearance: none;
+  cursor: pointer;
+  height: 44px;
+  padding: 0px calc(var(--spacing-unit) * 4);
+  border-radius: var(--spacing-unit);
+  border: none;
+  font-family: var(--font-space-grotesk);
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16.59px;
+  letter-spacing: 0px;
+  text-align: center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--spacing-unit) * 8);
+  position: relative;
+  transition:
+    background-color 0.25s ease-in-out,
+    color 0.25s ease-in-out;
+  flex-shrink: 0;
+
+  &--primary {
+    color: var(--button-custom-text-color);
+    background-color: var(--button-custom-color);
+
+    &:hover {
+      background-color: var(--button-custom-hover-color);
+    }
+
+    &:focus-visible,
+    &[data-focus-visible="true"] {
+      outline: 1px solid var(--primary);
+      outline-offset: 2px;
+    }
+  }
+
+  &--secondary {
+    color: var(--text);
+    background-color: var(--secondary);
+    border: 1px solid var(--secondary-border);
+
+    &:hover {
+      background-color: var(--secondary-hover);
+    }
+
+    &:focus-visible,
+    &[data-focus-visible="true"] {
+      outline: 1px solid var(--primary);
+      outline-offset: 2px;
+    }
+  }
+
+  &--tertiary {
+    color: var(--text);
+    background-color: var(--tertiary);
+    border: 1px solid var(--tertiary-border);
+
+    &:hover {
+      background-color: var(--tertiary-hover);
+    }
+
+    &:focus-visible {
+      outline: 1px solid var(--tertiary-border);
+      outline-offset: 2px;
+    }
+  }
+
+  &--rounded {
+    color: var(--text);
+    background-color: transparent;
+    border-radius: calc(var(--spacing-unit) * 2);
+    border: 1px solid var(--secondary-border);
+
+    &:hover {
+      background-color: var(--secondary);
+    }
+
+    &:focus-visible,
+    &[data-focus-visible="true"] {
+      outline: 1px solid var(--primary);
+      outline-offset: 2px;
+    }
+  }
+
+  &--danger {
+    color: var(--error);
+    background-color: var(--error-background);
+    border: 1px solid var(--error-border);
+
+    &:hover {
+      background-color: var(--error-hover);
+    }
+
+    &:focus-visible,
+    &[data-focus-visible="true"] {
+      outline: 1px solid var(--error);
+      outline-offset: 2px;
+    }
+  }
+
+  &--link {
+    color: var(--text);
+    background-color: transparent;
+    border: none;
+    padding: 0;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    text-decoration-color: var(--text);
+    opacity: 0.8;
+    text-align: left;
+    line-height: normal;
+    text-decoration-style: solid;
+    text-decoration-skip-ink: auto;
+    text-decoration-thickness: auto;
+    text-underline-position: from-font;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &:focus-visible,
+    &[data-focus-visible="true"] {
+      text-underline-offset: 2px;
+      opacity: 1;
+      outline: none;
+    }
+  }
+
+  &--disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  &--icon {
+    padding: 0;
+    width: 44px;
+  }
+
+  &--small {
+    height: 40px;
+  }
+
+  &--large {
+    height: 48px;
+  }
+
+  &__loading-icon {
+    animation: spin 1s linear infinite;
+  }
+
+  &__text {
+    padding: calc(var(--spacing-unit) * 2) 0px;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__icon-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: calc(var(--spacing-unit) * 2) 0px;
+
+    &--left::after {
+      content: "";
+      position: absolute;
+      right: calc(var(--spacing-unit) * -4);
+      top: 0;
+      transform: none;
+      height: 100%;
+      width: 1px;
+      background-color: currentColor;
+      opacity: 0.2;
+    }
+
+    &--right::before {
+      content: "";
+      position: absolute;
+      left: calc(var(--spacing-unit) * -4);
+      top: 0;
+      transform: none;
+      height: 100%;
+      width: 1px;
+      background-color: currentColor;
+      opacity: 0.2;
+    }
+
+    &--right {
+      order: 1;
+    }
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

src/big-picture/src/components/common/checkbox/index.tsx

@@ -0,0 +1,65 @@
+import "./styles.scss";
+
+import { CheckIcon } from "@phosphor-icons/react";
+import { useId, type MouseEvent } from "react";
+import cn from "classnames";
+
+export interface CheckboxProps {
+  id?: string;
+  label?: string;
+  checked?: boolean;
+  block?: boolean;
+  disabled?: boolean;
+  onChange?: (checked: boolean) => void;
+}
+
+export const Checkbox = ({ label, ...props }: Readonly<CheckboxProps>) => {
+  const generatedId = useId();
+  const id = props.id ?? generatedId;
+
+  const isChecked = props.checked ?? false;
+
+  const handleChange = (checked: boolean) => {
+    props.onChange?.(checked);
+  };
+
+  const handleBlockClick = (e: MouseEvent<HTMLDivElement>) => {
+    if (!props.block) return;
+
+    e.preventDefault();
+    handleChange(!isChecked);
+  };
+
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    <div
+      onClick={handleBlockClick}
+      className={cn("checkbox", {
+        "checkbox--block": props.block,
+        "checkbox--block--active": props.block && isChecked,
+        "checkbox--disabled": props.disabled,
+      })}
+    >
+      <button // NOSONAR - custom styled checkbox, not native input
+        id={id}
+        disabled={props.disabled}
+        className={cn("checkbox__input", {
+          "checkbox__input--checked": isChecked,
+        })}
+        onClick={() => handleChange(!isChecked)}
+        // eslint-disable-next-line jsx-a11y/prefer-tag-over-role -- styled button
+        role="checkbox"
+        aria-checked={isChecked}
+        aria-labelledby={label ? `${id}-label` : undefined}
+      >
+        {isChecked && <CheckIcon className="checkbox__input__icon" size={14} />}
+      </button>
+
+      {label && (
+        <label className="checkbox__label" id={`${id}-label`} htmlFor={id}>
+          {label}
+        </label>
+      )}
+    </div>
+  );
+};

src/big-picture/src/components/common/checkbox/styles.scss

@@ -0,0 +1,65 @@
+.checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: calc(var(--spacing-unit) * 2);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  padding: calc(var(--spacing-unit) * 2);
+  user-select: none;
+  cursor: pointer;
+
+  &--block {
+    width: 100%;
+    border-radius: calc(var(--spacing-unit) * 2);
+    transition: background-color 0.2s ease-in-out;
+
+    &:hover {
+      background-color: var(--secondary);
+    }
+
+    &--active {
+      background-color: var(--secondary-hover);
+
+      &:hover {
+        background-color: var(--secondary-hover);
+      }
+    }
+  }
+
+  &--disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  &__native-input {
+    appearance: none;
+  }
+
+  &__input {
+    width: 16px;
+    height: 16px;
+    border-radius: 2px;
+    border: 1px solid var(--primary);
+    background-color: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s ease-in-out;
+    cursor: pointer;
+
+    &--checked {
+      background-color: var(--primary);
+    }
+
+    &__icon {
+      color: var(--background);
+    }
+  }
+
+  &__label {
+    cursor: pointer;
+  }
+}

src/big-picture/src/components/common/chip/index.tsx

@@ -0,0 +1,55 @@
+import "./styles.scss";
+
+import cn from "classnames";
+import { Typography } from "../typography";
+import { XIcon } from "@phosphor-icons/react";
+import type { ReactNode } from "react";
+
+const variants = {
+  solid: "chips--solid",
+  ghost: "chips--ghost",
+};
+
+export interface ChipProps {
+  label: string;
+  color: string;
+  icon?: ReactNode;
+  variant?: keyof typeof variants;
+  onRemove?: () => void;
+}
+
+export interface ColorDotProps {
+  color: string;
+}
+
+export function ColorDot({ color }: Readonly<ColorDotProps>) {
+  return (
+    <div className="chips__content__color" style={{ backgroundColor: color }} />
+  );
+}
+
+export function Chip({
+  label,
+  color,
+  icon,
+  variant = "solid",
+  onRemove,
+}: Readonly<ChipProps>) {
+  return (
+    <div className={cn("chips", variants[variant])}>
+      <div className="chips__content">
+        {icon && <div className="chips__content__icon">{icon}</div>}
+
+        {color && <ColorDot color={color} />}
+
+        <Typography variant="body" className="chips__content__label">
+          {label}
+        </Typography>
+      </div>
+
+      <button className="chips__close-button" onClick={onRemove}>
+        <XIcon size={14} />
+      </button>
+    </div>
+  );
+}

src/big-picture/src/components/common/chip/styles.scss

@@ -0,0 +1,58 @@
+.chips {
+  display: flex;
+  flex-direction: row;
+  padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2);
+  justify-content: center;
+  align-items: center;
+  gap: calc(var(--spacing-unit) * 1);
+  border-radius: calc(var(--spacing-unit) * 2);
+
+  &--solid {
+    background-color: var(--surface);
+  }
+
+  &--ghost {
+    background-color: transparent;
+  }
+}
+
+.chips__content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: calc(var(--spacing-unit) * 2);
+  padding: var(--spacing-unit);
+
+  &__label {
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    margin-top: calc(var(--spacing-unit) * 0.5);
+  }
+
+  &__color {
+    width: 11px;
+    height: 11px;
+    border-radius: 50%;
+  }
+}
+
+.chips__close-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: calc(var(--spacing-unit) * 0.5);
+  padding: var(--spacing-unit);
+  border-radius: var(--spacing-unit);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease-in-out,
+    color 0.2s ease-in-out;
+
+  &:hover {
+    background-color: var(--secondary);
+    color: var(--primary);
+  }
+}

src/big-picture/src/components/common/divider/index.tsx

@@ -0,0 +1,28 @@
+import "./styles.scss";
+
+import cn from "classnames";
+
+export interface DividerProps {
+  orientation?: "horizontal" | "vertical";
+  color?: string;
+}
+
+export function Divider({
+  orientation = "horizontal",
+  color,
+}: Readonly<DividerProps>) {
+  return (
+    <div
+      className={cn("divider-container", {
+        [`divider-container--${orientation}`]: true,
+      })}
+    >
+      <div
+        className={cn("divider", {
+          [`divider--${orientation}`]: true,
+        })}
+        style={{ backgroundColor: color }}
+      />
+    </div>
+  );
+}

src/big-picture/src/components/common/divider/styles.scss

@@ -0,0 +1,32 @@
+.divider {
+  background-color: rgba(255, 255, 255, 0.1);
+  display: inline-block;
+  min-width: 1px;
+  min-height: 1px;
+
+  &--horizontal {
+    width: 100%;
+    height: 1px;
+  }
+
+  &--vertical {
+    width: 1px;
+    height: 100%;
+  }
+}
+
+.divider-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &--horizontal {
+    width: 100%;
+  }
+
+  &--vertical {
+    width: 1px;
+    height: 100%;
+    flex: 0 0 1px;
+  }
+}

src/big-picture/src/components/common/focus-item/index.tsx

@@ -0,0 +1,129 @@
+import { Slot } from "@radix-ui/react-slot";
+import {
+  FocusItemActionsMetaContext,
+  useFocusLayerId,
+  useFocusRegionId,
+} from "../../context";
+import {
+  getFocusItemActionsMeta,
+  resolveFocusItemActions,
+  type FocusItemActions,
+} from "../../../types";
+import {
+  type FocusOverrides,
+  NavigationItemActionsService,
+  NavigationService,
+  type NavigationNodeState,
+} from "../../../services";
+import { useNavigationIsFocused } from "../../../stores";
+import { type ReactNode, useEffect, useId, useMemo, useRef } from "react";
+
+interface FocusItemProps {
+  id?: string;
+  actions?: FocusItemActions;
+  navigationState?: NavigationNodeState;
+  navigationOverrides?: FocusOverrides;
+  asChild?: boolean;
+  children: ReactNode;
+}
+
+export function FocusItem({
+  id,
+  actions,
+  navigationState = "active",
+  navigationOverrides,
+  asChild = false,
+  children,
+}: Readonly<FocusItemProps>) {
+  const generatedId = useId();
+  const regionId = useFocusRegionId();
+  const layerId = useFocusLayerId();
+  const navigation = NavigationService.getInstance();
+  const navigationItemActions = NavigationItemActionsService.getInstance();
+  const ref = useRef<HTMLDivElement | null>(null);
+  const initialNavigationStateRef = useRef(navigationState);
+  const initialNavigationOverridesRef = useRef(navigationOverrides);
+  const resolvedId = id ?? `focus-item-${generatedId.replaceAll(":", "")}`;
+  const isFocused = useNavigationIsFocused(resolvedId);
+
+  const resolvedActions = useMemo(
+    () => resolveFocusItemActions(actions),
+    [actions]
+  );
+
+  const actionsMeta = useMemo(
+    () => getFocusItemActionsMeta(resolvedActions),
+    [resolvedActions]
+  );
+
+  if (!regionId) {
+    throw new Error("FocusItem must be rendered inside a focus group.");
+  }
+
+  useEffect(() => {
+    return navigation.registerNavigationNode({
+      id: resolvedId,
+      regionId,
+      layerId,
+      navigationState: initialNavigationStateRef.current,
+      navigationOverrides: initialNavigationOverridesRef.current,
+      getElement: () => ref.current,
+    });
+  }, [layerId, navigation, regionId, resolvedId]);
+
+  useEffect(() => {
+    navigation.updateNavigationNode(resolvedId, {
+      navigationState,
+      navigationOverrides,
+    });
+  }, [navigation, navigationOverrides, navigationState, resolvedId]);
+
+  useEffect(() => {
+    return navigationItemActions.registerItemActions({
+      itemId: resolvedId,
+      actions: resolvedActions,
+      getElement: () => ref.current,
+    });
+  }, [navigationItemActions, resolvedActions, resolvedId]);
+
+  useEffect(() => {
+    if (!isFocused) return;
+
+    const element = ref.current;
+
+    if (!element) return;
+
+    try {
+      element.focus({ preventScroll: true });
+    } catch {
+      element.focus();
+    }
+  }, [isFocused]);
+
+  const Component = asChild ? Slot : "div";
+
+  return (
+    <FocusItemActionsMetaContext.Provider value={actionsMeta}>
+      <Component
+        id={resolvedId}
+        ref={ref}
+        data-focused={isFocused}
+        data-focus-visible={isFocused || undefined}
+        data-focus-wrapper={!asChild || undefined}
+        data-has-primary={actionsMeta.hasPrimary || undefined}
+        data-has-secondary={actionsMeta.hasSecondary || undefined}
+        data-has-press-x={actionsMeta.hasPressX || undefined}
+        data-has-press-y={actionsMeta.hasPressY || undefined}
+        data-has-hold-a={actionsMeta.hasHoldA || undefined}
+        data-has-hold-b={actionsMeta.hasHoldB || undefined}
+        data-has-hold-x={actionsMeta.hasHoldX || undefined}
+        data-navigation-state={navigationState}
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex={isFocused ? 0 : -1}
+        style={asChild ? undefined : { outline: "none" }}
+      >
+        {children}
+      </Component>
+    </FocusItemActionsMetaContext.Provider>
+  );
+}

src/big-picture/src/components/common/game-card/index.tsx

@@ -0,0 +1,23 @@
+import "./styles.scss";
+
+interface GameCardProps {
+  coverImageUrl?: string | null;
+  gameTitle: string;
+}
+
+function GameCard({ coverImageUrl, gameTitle }: Readonly<GameCardProps>) {
+  return (
+    <div className="big-picture__game-card">
+      <div className="big-picture__game-card__cover">
+        {coverImageUrl ? (
+          <img src={coverImageUrl} alt={gameTitle} draggable={false} />
+        ) : (
+          <div className="big-picture__game-card__cover--placeholder" />
+        )}
+      </div>
+      <span className="big-picture__game-card__title">{gameTitle}</span>
+    </div>
+  );
+}
+
+export { GameCard };

src/big-picture/src/components/common/game-card/styles.scss

@@ -0,0 +1,43 @@
+.big-picture__game-card {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing-unit) * 2);
+  width: 100%;
+  min-width: 0;
+  cursor: pointer;
+
+  &__cover {
+    width: 100%;
+    aspect-ratio: 3 / 4;
+    border-radius: calc(var(--spacing-unit) * 2);
+    overflow: hidden;
+    background-color: var(--surface);
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transition: transform 0.2s ease;
+    }
+
+    &--placeholder {
+      width: 100%;
+      height: 100%;
+      background-color: var(--secondary);
+    }
+  }
+
+  &:hover &__cover img {
+    transform: scale(1.04);
+  }
+
+  &__title {
+    color: var(--text);
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 1.3;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

src/big-picture/src/components/common/grid-focus-group/index.tsx

@@ -0,0 +1,95 @@
+import {
+  FocusRegionContext,
+  useFocusLayerId,
+  useFocusRegionId,
+} from "../../context";
+import {
+  type FocusAutoScrollMode,
+  type FocusOverrides,
+  NavigationService,
+} from "../../../services";
+import {
+  type CSSProperties,
+  type ReactNode,
+  useEffect,
+  useId,
+  useRef,
+} from "react";
+
+interface GridFocusGroupProps {
+  regionId?: string;
+  navigationOverrides?: FocusOverrides;
+  autoScrollMode?: FocusAutoScrollMode;
+  getScrollAnchor?: () => HTMLElement | null;
+  className?: string;
+  style?: CSSProperties;
+  children: ReactNode;
+}
+
+export function GridFocusGroup({
+  regionId,
+  navigationOverrides,
+  autoScrollMode = "row",
+  getScrollAnchor,
+  className,
+  style,
+  children,
+}: Readonly<GridFocusGroupProps>) {
+  const generatedId = useId();
+  const parentRegionId = useFocusRegionId();
+  const layerId = useFocusLayerId();
+  const navigation = NavigationService.getInstance();
+  const initialNavigationOverridesRef = useRef(navigationOverrides);
+  const initialGetScrollAnchorRef = useRef(getScrollAnchor);
+  const ref = useRef<HTMLDivElement | null>(null);
+  const resolvedRegionId =
+    regionId ?? `focus-region-${generatedId.replaceAll(":", "")}`;
+
+  useEffect(() => {
+    return navigation.registerRegion({
+      id: resolvedRegionId,
+      parentRegionId,
+      orientation: "grid",
+      layerId,
+      navigationOverrides: initialNavigationOverridesRef.current,
+      autoScrollMode,
+      isPersistent: Boolean(regionId),
+      getElement: () => ref.current,
+      getScrollAnchor: initialGetScrollAnchorRef.current,
+    });
+  }, [
+    autoScrollMode,
+    layerId,
+    navigation,
+    parentRegionId,
+    regionId,
+    resolvedRegionId,
+  ]);
+
+  useEffect(() => {
+    navigation.updateRegion(resolvedRegionId, {
+      autoScrollMode,
+      getScrollAnchor,
+      navigationOverrides,
+    });
+  }, [
+    autoScrollMode,
+    getScrollAnchor,
+    navigation,
+    navigationOverrides,
+    resolvedRegionId,
+  ]);
+
+  return (
+    <FocusRegionContext.Provider value={resolvedRegionId}>
+      <div
+        ref={ref}
+        data-focus-region-id={resolvedRegionId}
+        className={className}
+        style={style}
+      >
+        {children}
+      </div>
+    </FocusRegionContext.Provider>
+  );
+}

src/big-picture/src/components/common/horizontal-card/index.tsx

@@ -0,0 +1,40 @@
+import "./styles.scss";
+
+import type { ReactNode } from "react";
+
+interface HorizontalCardProps {
+  image: string;
+  title: string;
+  description: string;
+  action: ReactNode;
+}
+
+export function HorizontalCard({
+  image,
+  title,
+  description,
+  action,
+}: Readonly<HorizontalCardProps>) {
+  return (
+    <div className="horizontal-card">
+      <div className="horizontal-card__image">
+        <img
+          src={image}
+          width={268}
+          height={136}
+          alt={title}
+          draggable={false}
+        />
+      </div>
+      <div className="horizontal-card__content">
+        <div className="horizontal-card__content__info">
+          <h3 className="horizontal-card__content__info__title">{title}</h3>
+          <p className="horizontal-card__content__info__description">
+            {description}
+          </p>
+        </div>
+        <div className="horizontal-card__content__action">{action}</div>
+      </div>
+    </div>
+  );
+}

src/big-picture/src/components/common/horizontal-card/styles.scss

@@ -0,0 +1,73 @@
+.horizontal-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: var(--spacing-unit);
+  transition:
+    background-color 0.1s ease-in-out,
+    border 0.1s ease-in-out;
+  border: 1px solid transparent;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--secondary);
+    border: 1px solid var(--secondary-border);
+
+    .horizontal-card__content__action {
+      opacity: 1;
+    }
+  }
+
+  &__image {
+    width: 268px;
+    height: 136px;
+    border-radius: var(--spacing-unit);
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: row;
+    gap: calc(var(--spacing-unit) * 2);
+    align-items: center;
+    justify-content: space-between;
+    padding: calc(var(--spacing-unit) * 2);
+    width: 100%;
+
+    &__info {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-unit);
+
+      &__title {
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: normal;
+        color: var(--primary);
+        opacity: 0.8;
+      }
+
+      &__description {
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        color: var(--primary);
+        opacity: 0.5;
+      }
+    }
+
+    &__action {
+      opacity: 0;
+      transition: opacity 0.1s ease-in-out;
+    }
+  }
+}

src/big-picture/src/components/common/horizontal-focus-group/index.tsx

@@ -0,0 +1,109 @@
+import { Slot } from "@radix-ui/react-slot";
+import {
+  FocusRegionContext,
+  useFocusLayerId,
+  useFocusRegionId,
+} from "../../context";
+import {
+  type FocusAutoScrollMode,
+  type FocusOverrides,
+  NavigationService,
+} from "../../../services";
+import {
+  type HTMLAttributes,
+  type ReactNode,
+  useEffect,
+  useId,
+  useRef,
+} from "react";
+
+interface HorizontalFocusGroupProps extends HTMLAttributes<HTMLDivElement> {
+  regionId?: string;
+  navigationOverrides?: FocusOverrides;
+  autoScrollMode?: FocusAutoScrollMode;
+  getScrollAnchor?: () => HTMLElement | null;
+  asChild?: boolean;
+  children: ReactNode;
+}
+
+export function HorizontalFocusGroup({
+  regionId,
+  navigationOverrides,
+  autoScrollMode = "region",
+  getScrollAnchor,
+  asChild = false,
+  className,
+  style,
+  children,
+  ...props
+}: Readonly<HorizontalFocusGroupProps>) {
+  const generatedId = useId();
+  const parentRegionId = useFocusRegionId();
+  const layerId = useFocusLayerId();
+  const navigation = NavigationService.getInstance();
+  const initialNavigationOverridesRef = useRef(navigationOverrides);
+  const initialGetScrollAnchorRef = useRef(getScrollAnchor);
+  const ref = useRef<HTMLDivElement | null>(null);
+  const resolvedRegionId =
+    regionId ?? `focus-region-${generatedId.replaceAll(":", "")}`;
+
+  useEffect(() => {
+    return navigation.registerRegion({
+      id: resolvedRegionId,
+      parentRegionId,
+      orientation: "horizontal",
+      layerId,
+      navigationOverrides: initialNavigationOverridesRef.current,
+      autoScrollMode,
+      isPersistent: Boolean(regionId),
+      getElement: () => ref.current,
+      getScrollAnchor: initialGetScrollAnchorRef.current,
+    });
+  }, [
+    autoScrollMode,
+    layerId,
+    navigation,
+    parentRegionId,
+    regionId,
+    resolvedRegionId,
+  ]);
+
+  useEffect(() => {
+    navigation.updateRegion(resolvedRegionId, {
+      autoScrollMode,
+      getScrollAnchor,
+      navigationOverrides,
+    });
+  }, [
+    autoScrollMode,
+    getScrollAnchor,
+    navigation,
+    navigationOverrides,
+    resolvedRegionId,
+  ]);
+
+  const Component = asChild ? Slot : "div";
+
+  return (
+    <FocusRegionContext.Provider value={resolvedRegionId}>
+      <Component
+        ref={ref}
+        className={className}
+        data-focus-region-id={resolvedRegionId}
+        style={
+          asChild
+            ? style
+            : {
+                display: "flex",
+                alignItems: "center",
+                gap: 16,
+                ...style,
+              }
+        }
+        {...props}
+      >
+        {children}
+      </Component>
+    </FocusRegionContext.Provider>
+  );
+}

src/big-picture/src/components/common/image-lightbox/index.tsx

@@ -0,0 +1,16 @@
+import "./styles.scss";
+
+import { Backdrop } from "../backdrop";
+
+export interface ImageLightboxProps {
+  src: string;
+  alt: string;
+}
+
+export function ImageLightbox({ src, alt }: Readonly<ImageLightboxProps>) {
+  return (
+    <Backdrop>
+      <img src={src} alt={alt} className="image-lightbox" draggable={false} />
+    </Backdrop>
+  );
+}

src/big-picture/src/components/common/image-lightbox/styles.scss

@@ -0,0 +1,6 @@
+.image-lightbox {
+  object-fit: cover;
+  user-select: none;
+  width: 60%;
+  max-width: 1000px;
+}

src/big-picture/src/components/common/index.ts

@@ -0,0 +1,36 @@
+export * from "./accordion";
+export * from "./animated-hero-image";
+export * from "./backdrop";
+export * from "./button";
+export * from "./checkbox";
+export * from "./chip";
+export * from "./divider";
+export * from "./game-card";
+export * from "./horizontal-card";
+export * from "./image-lightbox";
+export * from "./input";
+export * from "./list-card";
+export * from "./modal";
+export * from "./route-anchor";
+export * from "./scroll-area";
+export * from "./source-anchor";
+export * from "./tabs";
+export * from "./tooltip";
+export * from "./typography";
+export * from "./user-profile";
+export * from "./vertical-game-card";
+export * from "./vertical-store-game-card";
+export * from "./horizontal-focus-group";
+export * from "./vertical-focus-group";
+export * from "./grid-focus-group";
+export * from "./navigation-layer";
+export * from "./focus-item";
+export * from "./diagnostics";
+export * from "./scroll-area";
+export * from "./route-anchor";
+export * from "./button";
+export * from "./input";
+export * from "./typography";
+export * from "./divider";
+export * from "./user-profile";
+export * from "./box";

src/big-picture/src/components/common/input/index.tsx

@@ -0,0 +1,98 @@
+import "./styles.scss";
+
+import cn from "classnames";
+import { Typography } from "../typography";
+import {
+  forwardRef,
+  type InputHTMLAttributes,
+  type ReactNode,
+  useRef,
+} from "react";
+import { FocusItem } from "..";
+import type { FocusOverrides, NavigationNodeState } from "../../../services";
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  hint?: string;
+  error?: boolean;
+  iconLeft?: ReactNode;
+  iconRight?: ReactNode;
+  focusId?: string;
+  focusNavigationOverrides?: FocusOverrides;
+  focusNavigationState?: NavigationNodeState;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  {
+    type = "text",
+    placeholder = "Placeholder",
+    label,
+    hint,
+    error = false,
+    disabled = false,
+    iconLeft,
+    iconRight,
+    focusId,
+    focusNavigationOverrides,
+    focusNavigationState,
+    ...props
+  },
+  ref
+) {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const resolvedFocusNavigationState =
+    focusNavigationState ?? (disabled ? "disabled" : "active");
+
+  const setInputRef = (element: HTMLInputElement | null) => {
+    inputRef.current = element;
+
+    if (typeof ref === "function") {
+      ref(element);
+    } else if (ref) {
+      ref.current = element;
+    }
+  };
+
+  return (
+    <div className="input-container">
+      {label && (
+        <Typography variant="label" className="input-label">
+          {label}
+        </Typography>
+      )}
+      <div className="input-wrapper">
+        <FocusItem
+          id={focusId}
+          actions={{ primary: () => inputRef.current?.focus() }}
+          navigationOverrides={focusNavigationOverrides}
+          navigationState={resolvedFocusNavigationState}
+        >
+          <input
+            ref={setInputRef}
+            id="input"
+            type={type}
+            placeholder={placeholder}
+            disabled={disabled}
+            data-icon-left={iconLeft ? "true" : undefined}
+            data-icon-right={iconRight ? "true" : undefined}
+            className={`input ${error ? "input--error" : ""} ${
+              disabled ? "input--disabled" : ""
+            }`}
+            {...props}
+          />
+        </FocusItem>
+        {iconLeft && (
+          <div className="input-icon input-icon--left">{iconLeft}</div>
+        )}
+        {iconRight && (
+          <div className="input-icon input-icon--right">{iconRight}</div>
+        )}
+      </div>
+      {hint && (
+        <p className={cn("input-hint", { "input-hint--error": error })}>
+          {hint}
+        </p>
+      )}
+    </div>
+  );
+});

src/big-picture/src/components/common/input/styles.scss

@@ -0,0 +1,121 @@
+.input {
+  width: 100%;
+  height: 44px;
+  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
+  border-radius: calc(var(--spacing-unit) * 2);
+  font-family: var(--font-space-grotesk);
+  font-size: 14px;
+  line-height: 16.59px;
+  border: 1px solid var(--secondary-border);
+  background-color: var(--background);
+  color: var(--text);
+  transition: border-color 0.2s ease-in-out;
+
+  &[data-icon-left="true"] {
+    padding-left: 46px;
+  }
+
+  &[data-icon-right="true"] {
+    padding-right: 46px;
+  }
+
+  &:hover {
+    border-color: var(--secondary-hover);
+  }
+
+  &:focus-visible,
+  [data-focus-visible="true"] & {
+    outline: none;
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  &::placeholder {
+    color: var(--text-secondary);
+  }
+
+  &--error {
+    border-color: var(--error);
+
+    &:hover {
+      border-color: var(--error);
+    }
+
+    &:focus-visible {
+      border-color: var(--error);
+    }
+  }
+
+  &-container {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spacing-unit) * 2);
+    width: 100%;
+  }
+
+  &-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing-unit) * 2);
+    width: 100%;
+
+    > [data-focus-wrapper] {
+      width: 100%;
+    }
+
+    &:hover {
+      .input-icon--left {
+        color: var(--text-primary);
+      }
+    }
+
+    &--icon::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      z-index: 2;
+    }
+  }
+
+  &-icon {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-secondary);
+    transition: color 0.2s ease-in-out;
+
+    &--left {
+      left: 10px;
+    }
+
+    &--right {
+      right: 10px;
+    }
+  }
+
+  &-label {
+    color: var(--text-secondary);
+    font-size: 12px;
+    line-height: normal;
+  }
+
+  &-hint {
+    color: var(--text-secondary);
+    font-size: 10px;
+    line-height: normal;
+
+    &--error {
+      color: var(--error);
+    }
+  }
+}

src/big-picture/src/components/common/list-card/index.tsx

@@ -0,0 +1,55 @@
+import "./styles.scss";
+
+import { SourceAnchor } from "../source-anchor";
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+
+export interface ListCardProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  title: string;
+  description: string;
+  image: string;
+  action?: ReactNode;
+  sources?: string[];
+  href: string;
+}
+
+export function ListCard({
+  title,
+  description,
+  image,
+  action,
+  sources,
+  href,
+  ...props
+}: Readonly<ListCardProps>) {
+  return (
+    <a href={href} {...props}>
+      <div className="list-card">
+        <div className="list-card__image">
+          <img
+            src={image}
+            alt="Game List Card"
+            width={200}
+            height={100}
+            draggable={false}
+          />
+        </div>
+        <div className="list-card__content">
+          <div className="list-card__content__info">
+            <h3 className="list-card__content__info__title">{title}</h3>
+            <p className="list-card__content__info__description">
+              {description}
+            </p>
+            {sources && (
+              <div className="list-card__content__info__sources">
+                {sources.map((source) => (
+                  <SourceAnchor title={source} href="/" key={source} />
+                ))}
+              </div>
+            )}
+          </div>
+          <div className="list-card__content__action">{action}</div>
+        </div>
+      </div>
+    </a>
+  );
+}

src/big-picture/src/components/common/list-card/styles.scss

@@ -0,0 +1,81 @@
+.list-card {
+  display: flex;
+  flex-direction: row;
+  height: 100px;
+  width: 100%;
+  border-radius: calc(var(--spacing-unit) * 2);
+  align-items: center;
+  overflow: hidden;
+  transition: background-color 0.1s ease-in-out;
+  &:hover {
+    background-color: var(--secondary);
+  }
+
+  &__image {
+    width: 200px;
+    height: 100px;
+    border-radius: var(--spacing-unit);
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-unit);
+    padding: calc(var(--spacing-unit) * 4);
+    justify-content: space-between;
+    flex: 1;
+    height: 100px;
+
+    &:hover &__action {
+      opacity: 1;
+    }
+
+    &__info {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-unit);
+
+      &__title {
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: normal;
+        color: var(--primary);
+        opacity: 0.8;
+      }
+
+      &__description {
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        color: var(--primary);
+        opacity: 0.5;
+      }
+
+      &__sources {
+        margin-top: var(--spacing-unit);
+        display: flex;
+        flex-direction: row;
+        gap: calc(var(--spacing-unit) * 2);
+      }
+    }
+
+    &__action {
+      opacity: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: opacity 0.05s ease-in-out;
+      margin-right: calc(var(--spacing-unit) * 2);
+    }
+  }
+}

src/big-picture/src/components/common/modal/index.tsx

@@ -0,0 +1,103 @@
+import "./styles.scss";
+
+import { useCallback, useEffect, useRef, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { AnimatePresence, motion } from "framer-motion";
+import cn from "classnames";
+
+import { Backdrop } from "../backdrop";
+import { IS_BROWSER } from "../../../constants";
+
+export interface ModalProps {
+  visible: boolean;
+  onClose: () => void;
+  children: ReactNode;
+  clickOutsideToClose?: boolean;
+  className?: string;
+}
+
+export function Modal({
+  visible,
+  onClose,
+  children,
+  clickOutsideToClose = true,
+  className,
+}: Readonly<ModalProps>) {
+  const modalContentRef = useRef<HTMLDivElement | null>(null);
+
+  const isTopMostModal = () => {
+    if (
+      document.querySelector(
+        ".featurebase-widget-overlay.featurebase-display-block"
+      )
+    )
+      return false;
+
+    const openModals = document.querySelectorAll("[role=dialog]");
+    return (
+      openModals.length &&
+      openModals[openModals.length - 1] === modalContentRef.current
+    );
+  };
+
+  const handleCloseClick = useCallback(() => {
+    onClose();
+  }, [onClose]);
+
+  useEffect(() => {
+    if (!visible) return;
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && isTopMostModal()) {
+        handleCloseClick();
+      }
+    };
+
+    globalThis.window.addEventListener("keydown", onKeyDown);
+    return () => globalThis.window.removeEventListener("keydown", onKeyDown);
+  }, [visible, handleCloseClick]);
+
+  useEffect(() => {
+    if (!clickOutsideToClose || !visible) return;
+
+    const onMouseDown = (e: MouseEvent) => {
+      if (!isTopMostModal()) return;
+      if (
+        modalContentRef.current &&
+        !modalContentRef.current.contains(e.target as Node)
+      ) {
+        handleCloseClick();
+      }
+    };
+
+    globalThis.window.addEventListener("mousedown", onMouseDown);
+    return () =>
+      globalThis.window.removeEventListener("mousedown", onMouseDown);
+  }, [clickOutsideToClose, visible, handleCloseClick]);
+
+  if (!IS_BROWSER) return null;
+
+  const portalTarget = document.getElementById("root") ?? document.body;
+
+  return createPortal(
+    <AnimatePresence>
+      {visible && (
+        <Backdrop>
+          <motion.aside
+            role="dialog"
+            ref={modalContentRef}
+            data-hydra-dialog
+            className={cn("modal", className)}
+            initial={{ opacity: 0, scale: 0.5 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.5 }}
+            transition={{ duration: 0.2, ease: [0.33, 1, 0.68, 1] }}
+          >
+            {children}
+          </motion.aside>
+        </Backdrop>
+      )}
+    </AnimatePresence>,
+    portalTarget
+  );
+}

src/big-picture/src/components/common/modal/styles.scss

@@ -0,0 +1,10 @@
+.modal {
+  border-radius: 8px;
+  min-width: 400px;
+  max-width: 600px;
+  max-height: 100%;
+  overflow: hidden;
+  background-color: #0e0e0e;
+  display: flex;
+  flex-direction: column;
+}

src/big-picture/src/components/common/navigation-layer/index.tsx

@@ -0,0 +1,55 @@
+import { NavigationService } from "../../../services";
+import { FocusLayerContext } from "../../context";
+import { type ReactNode, useEffect, useId } from "react";
+
+interface NavigationLayerProps {
+  layerId?: string;
+  rootRegionId?: string;
+  initialFocusId?: string;
+  initialFocusRegionId?: string;
+  children: ReactNode;
+}
+
+export function NavigationLayer({
+  layerId,
+  rootRegionId,
+  initialFocusId,
+  initialFocusRegionId,
+  children,
+}: Readonly<NavigationLayerProps>) {
+  const generatedId = useId();
+  const navigation = NavigationService.getInstance();
+  const resolvedLayerId =
+    layerId ?? `navigation-layer-${generatedId.replaceAll(":", "")}`;
+
+  useEffect(() => {
+    const unregisterLayer = navigation.registerLayer({
+      id: resolvedLayerId,
+      rootRegionId,
+      isPersistent: Boolean(layerId),
+    });
+
+    navigation.focusInitialInLayer({
+      layerId: resolvedLayerId,
+      initialFocusId,
+      initialFocusRegionId,
+    });
+
+    return () => {
+      unregisterLayer();
+    };
+  }, [
+    initialFocusId,
+    initialFocusRegionId,
+    layerId,
+    navigation,
+    resolvedLayerId,
+    rootRegionId,
+  ]);
+
+  return (
+    <FocusLayerContext.Provider value={resolvedLayerId}>
+      {children}
+    </FocusLayerContext.Provider>
+  );
+}

src/big-picture/src/components/common/route-anchor/index.tsx

@@ -0,0 +1,74 @@
+import "./styles.scss";
+
+import { HeartStraightIcon } from "@phosphor-icons/react";
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+import { Link } from "react-router-dom";
+import { FocusItem } from "..";
+import type { FocusOverrides } from "../../../services";
+
+export interface RouteAnchorProps
+  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
+  label: string;
+  icon: ReactNode | string;
+  href: string;
+  active?: boolean;
+  disabled?: boolean;
+  isFavorite?: boolean;
+  focusId?: string;
+  focusNavigationOverrides?: FocusOverrides;
+}
+
+export const RouteAnchor = ({
+  href,
+  label,
+  icon,
+  active = false,
+  disabled = false,
+  isFavorite = false,
+  focusId,
+  focusNavigationOverrides,
+  ...props
+}: Readonly<RouteAnchorProps>) => {
+  const isGameIcon = typeof icon === "string";
+
+  return (
+    <div
+      className={`state-wrapper ${disabled ? "state-wrapper--disabled" : ""} ${active ? "state-wrapper--active" : ""}`}
+    >
+      <FocusItem id={focusId} navigationOverrides={focusNavigationOverrides}>
+        <Link to={href} {...props}>
+          <div
+            className={`route-anchor ${active ? "route-anchor--active" : ""} ${!isGameIcon ? "route-anchor--extra-padding" : ""}`}
+          >
+            <div
+              className={`route-anchor__icon ${isGameIcon ? "route-anchor__icon--large-size" : "route-anchor__icon--small-size"}`}
+            >
+              {isGameIcon ? (
+                <img
+                  src={icon}
+                  alt={label}
+                  width={32}
+                  height={32}
+                  draggable={false}
+                />
+              ) : (
+                icon
+              )}
+            </div>
+            <div className="route-anchor__label">{label}</div>
+
+            {isFavorite && (
+              <div className="route-anchor__favorite">
+                <HeartStraightIcon
+                  size={18}
+                  weight="fill"
+                  className="route-anchor__favorite__icon"
+                />
+              </div>
+            )}
+          </div>
+        </Link>
+      </FocusItem>
+    </div>
+  );
+};

src/big-picture/src/components/common/route-anchor/styles.scss

@@ -0,0 +1,125 @@
+.route-anchor {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing-unit) * 3);
+  padding: calc(var(--spacing-unit) * 2);
+  border-radius: var(--spacing-unit);
+  transition: background-color 0.2s ease-in-out;
+  width: 100%;
+  color: var(--text);
+  user-select: none;
+
+  &--extra-padding {
+    padding: calc(var(--spacing-unit) * 3);
+  }
+
+  &--active {
+    color: var(--primary);
+    background-color: var(--secondary-hover);
+  }
+
+  &:not(&--active):hover {
+    background-color: var(--secondary);
+  }
+
+  [data-focus-visible="true"] & {
+    box-shadow: inset 0 0 0 1px var(--text-secondary);
+  }
+
+  [data-focus-visible="true"] &:not(&--active) {
+    background-color: var(--secondary);
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: calc(var(--spacing-unit) / 2);
+    flex-shrink: 0;
+    overflow: hidden;
+
+    &--small-size {
+      width: 24px;
+      height: 24px;
+    }
+
+    &--large-size {
+      width: 32px;
+      height: 32px;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+  }
+
+  &__label {
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    line-clamp: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__favorite {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: auto;
+  }
+}
+
+.state-wrapper {
+  width: 100%;
+
+  &--disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  &--active {
+    pointer-events: none;
+  }
+}
+
+.tooltip-content {
+  background-color: var(--secondary);
+  color: var(--text);
+  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
+  border-radius: var(--spacing-unit);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  animation-duration: 200ms;
+  animation-timing-function: ease-in-out;
+  will-change: transform, opacity;
+
+  &[data-state="delayed-open"] {
+    animation-name: fadeIn;
+  }
+
+  &__label {
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateX(-2px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}

src/big-picture/src/components/common/scroll-area/index.tsx

@@ -0,0 +1,52 @@
+import "./styles.scss";
+
+import { type ReactNode, useRef, useEffect } from "react";
+import cn from "classnames";
+
+export interface ScrollAreaProps {
+  children: ReactNode;
+  className?: string;
+  onScroll?: (info: {
+    scrollTop: number;
+    scrollHeight: number;
+    clientHeight: number;
+  }) => void;
+  showScrollbar?: boolean;
+}
+
+export function ScrollArea({
+  children,
+  className,
+  onScroll,
+  showScrollbar = false,
+}: Readonly<ScrollAreaProps>) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!onScroll) return;
+
+    const el = ref.current;
+    if (!el) return;
+
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = el;
+      onScroll({ scrollTop, scrollHeight, clientHeight });
+    };
+
+    el.addEventListener("scroll", handleScroll);
+    return () => el.removeEventListener("scroll", handleScroll);
+  }, [onScroll]);
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "scroll-area",
+        className,
+        !showScrollbar && "scroll-area--hide-scrollbar"
+      )}
+    >
+      {children}
+    </div>
+  );
+}

src/big-picture/src/components/common/scroll-area/styles.scss

@@ -0,0 +1,14 @@
+.scroll-area {
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+
+  &--hide-scrollbar {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}

src/big-picture/src/components/common/source-anchor/index.tsx

@@ -0,0 +1,31 @@
+import "./styles.scss";
+
+import type { AnchorHTMLAttributes } from "react";
+
+export interface SourceAnchorProps
+  extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  title: string;
+  href?: string;
+}
+
+export function SourceAnchor({
+  title,
+  href,
+  ...props
+}: Readonly<SourceAnchorProps>) {
+  return (
+    <>
+      {href ? (
+        <a href={href} {...props}>
+          <div className="source-anchor source-anchor--link">
+            <p className="source-anchor__title">{title}</p>
+          </div>
+        </a>
+      ) : (
+        <div className="source-anchor">
+          <p className="source-anchor__title">{title}</p>
+        </div>
+      )}
+    </>
+  );
+}

src/big-picture/src/components/common/source-anchor/styles.scss

@@ -0,0 +1,30 @@
+.source-anchor {
+  background-color: var(--surface);
+  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  border-radius: var(--spacing-unit);
+  transition: background-color 0.15s ease-in-out;
+
+  .source-anchor__title {
+    color: var(--primary-hover);
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+  }
+}
+
+.source-anchor--link {
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--secondary);
+  }
+
+  &:focus-visible {
+    outline: 1px solid var(--primary);
+    outline-offset: 2px;
+    border-radius: var(--spacing-unit);
+  }
+}

src/big-picture/src/components/common/tabs/index.tsx

@@ -0,0 +1,135 @@
+import "./styles.scss";
+
+import { motion } from "framer-motion";
+import cn from "classnames";
+import {
+  type CSSProperties,
+  type ReactNode,
+  useId,
+  useMemo,
+  useState,
+} from "react";
+import { FocusItem } from "../focus-item";
+import { HorizontalFocusGroup } from "../horizontal-focus-group";
+import type { FocusOverrides } from "../../../services";
+
+export interface TabsItem<TValue extends string = string> {
+  id?: string;
+  value: TValue;
+  label: ReactNode;
+  disabled?: boolean;
+  navigationOverrides?: FocusOverrides;
+}
+
+export interface TabsProps<TValue extends string = string> {
+  items: Array<TabsItem<TValue>>;
+  value?: TValue;
+  defaultValue?: TValue;
+  onValueChange?: (value: TValue) => void;
+  trailingAction?: ReactNode;
+  regionId?: string;
+  navigationOverrides?: FocusOverrides;
+  ariaLabel?: string;
+  className?: string;
+}
+
+export function Tabs<TValue extends string = string>({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  trailingAction,
+  regionId,
+  navigationOverrides,
+  ariaLabel = "Tabs",
+  className,
+}: Readonly<TabsProps<TValue>>) {
+  const generatedId = useId();
+  const [internalValue, setInternalValue] = useState<TValue | undefined>(
+    defaultValue ?? items[0]?.value
+  );
+  const selectedValue = value ?? internalValue;
+  const indicatorLayoutId = `tabs-indicator-${generatedId}`;
+
+  const selectedItem = useMemo(
+    () => items.find((item) => item.value === selectedValue),
+    [items, selectedValue]
+  );
+
+  const handleSelect = (nextValue: TValue) => {
+    setInternalValue(nextValue);
+    onValueChange?.(nextValue);
+  };
+
+  if (items.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={cn("tabs", className)}>
+      <div className="tabs__content">
+        <HorizontalFocusGroup
+          regionId={regionId}
+          navigationOverrides={navigationOverrides}
+          autoScrollMode="region"
+          className="tabs__list"
+          role="tablist"
+          aria-label={ariaLabel}
+          style={
+            {
+              gap: "calc(var(--spacing-unit) * 12)",
+              alignItems: "flex-start",
+            } as CSSProperties
+          }
+        >
+          {items.map((item) => {
+            const isSelected = selectedItem?.value === item.value;
+
+            return (
+              <FocusItem
+                key={item.value}
+                id={item.id}
+                asChild
+                navigationState={item.disabled ? "disabled" : "active"}
+                navigationOverrides={item.navigationOverrides}
+              >
+                <button
+                  type="button"
+                  role="tab"
+                  aria-selected={isSelected}
+                  disabled={item.disabled}
+                  className={cn("tabs__tab", {
+                    "tabs__tab--active": isSelected,
+                    "tabs__tab--disabled": item.disabled,
+                  })}
+                  onClick={() => handleSelect(item.value)}
+                >
+                  <span className="tabs__tab-label">{item.label}</span>
+
+                  {isSelected && (
+                    <motion.span
+                      className="tabs__indicator"
+                      layoutId={indicatorLayoutId}
+                      transition={{
+                        type: "spring",
+                        stiffness: 420,
+                        damping: 34,
+                        mass: 0.8,
+                      }}
+                    />
+                  )}
+                </button>
+              </FocusItem>
+            );
+          })}
+        </HorizontalFocusGroup>
+
+        {trailingAction && (
+          <div className="tabs__trailing-action">{trailingAction}</div>
+        )}
+      </div>
+
+      <div className="tabs__divider" aria-hidden="true" />
+    </div>
+  );
+}

src/big-picture/src/components/common/tabs/styles.scss

@@ -0,0 +1,98 @@
+.tabs {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+
+  &__content {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: calc(var(--spacing-unit) * 12);
+    padding: 0 calc(var(--spacing-unit) * 4);
+  }
+
+  &__list {
+    min-width: 0;
+    flex: 1;
+  }
+
+  &__tab {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0;
+    padding: 0 0 calc(var(--spacing-unit) * 3 + 3px);
+    border: 0;
+    background: transparent;
+    color: var(--primary);
+    opacity: 0.5;
+    font-family: var(--font-space-grotesk);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: normal;
+    letter-spacing: 0;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: opacity 0.2s ease-in-out;
+
+    &:hover,
+    &:focus-visible,
+    &[data-focus-visible="true"],
+    &--active {
+      opacity: 0.8;
+    }
+
+    &:focus-visible,
+    &[data-focus-visible="true"] {
+      outline: none;
+    }
+
+    &--disabled {
+      cursor: not-allowed;
+      opacity: 0.3;
+    }
+  }
+
+  &__tab-label {
+    display: inline-block;
+    transform: scale(1);
+    transform-origin: center bottom;
+    transition: transform 0.2s cubic-bezier(0.33, 1, 0.68, 1);
+  }
+
+  &__tab:focus-visible &__tab-label,
+  &__tab[data-focus-visible="true"]:not(:hover) &__tab-label {
+    transform: scale(1.03);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &__tab-label {
+      transition: none;
+    }
+  }
+
+  &__indicator {
+    position: absolute;
+    right: calc(var(--spacing-unit) * -1);
+    bottom: 0;
+    left: calc(var(--spacing-unit) * -1);
+    height: 3px;
+    background-color: var(--text);
+    box-shadow: 0 0 8px rgba(255, 255, 255, 0.15);
+  }
+
+  &__trailing-action {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  &__divider {
+    width: 100%;
+    height: 1px;
+    margin-top: -1px;
+    background-color: var(--secondary-border);
+  }
+}

src/big-picture/src/components/common/tooltip/index.tsx

@@ -0,0 +1,61 @@
+import "./styles.scss";
+
+import { useState, type CSSProperties, type ReactNode } from "react";
+
+export interface TooltipProps {
+  children: ReactNode;
+  content: string;
+  position?: "top" | "bottom" | "left" | "right";
+  showArrow?: boolean;
+  offset?: number;
+  active?: boolean;
+  className?: string;
+  id?: string;
+  style?: CSSProperties;
+}
+
+export function Tooltip({
+  children,
+  content,
+  position = "top",
+  offset = 8,
+  showArrow = true,
+  active = true,
+  className = "",
+  id,
+  style,
+}: Readonly<TooltipProps>) {
+  const [isHovering, setIsHovering] = useState(false);
+
+  if (!active) return children;
+
+  const tooltipStyle = {
+    "--tooltip-offset": `${offset}px`,
+  } as CSSProperties;
+
+  return (
+    // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events, jsx-a11y/no-static-element-interactions
+    <div
+      className="tooltip"
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => setIsHovering(false)}
+      onFocus={() => setIsHovering(true)}
+      onBlur={() => setIsHovering(false)}
+      style={style}
+    >
+      {children}
+      {isHovering && (
+        <div
+          className={`tooltip__portal tooltip__content--${position} ${className}`}
+          data-offset={offset}
+          data-show-arrow={showArrow}
+          style={tooltipStyle}
+          role="tooltip"
+          id={id}
+        >
+          {content}
+        </div>
+      )}
+    </div>
+  );
+}

src/big-picture/src/components/common/tooltip/styles.scss

@@ -0,0 +1,142 @@
+.tooltip {
+  position: relative;
+  display: inline-flex;
+  width: fit-content;
+  height: fit-content;
+}
+
+.tooltip__portal {
+  --tooltip-offset: 8px;
+
+  position: absolute;
+  background-color: var(--secondary);
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
+  border-radius: var(--spacing-unit);
+  white-space: nowrap;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  z-index: 10000;
+  pointer-events: none;
+
+  &.tooltip__content--top {
+    left: 50%;
+    bottom: calc(100% + var(--tooltip-offset));
+    transform: translateX(-50%);
+    animation: fadeInUp 0.3s ease;
+
+    &[data-show-arrow="true"]::after {
+      content: "";
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border-width: 5px;
+      border-style: solid;
+      border-color: var(--secondary) transparent transparent transparent;
+    }
+  }
+
+  &.tooltip__content--bottom {
+    left: 50%;
+    top: calc(100% + var(--tooltip-offset));
+    transform: translateX(-50%);
+    animation: fadeInDown 0.3s ease;
+
+    &[data-show-arrow="true"]::after {
+      content: "";
+      position: absolute;
+      bottom: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border-width: 5px;
+      border-style: solid;
+      border-color: transparent transparent var(--secondary) transparent;
+    }
+  }
+
+  &.tooltip__content--left {
+    right: calc(100% + var(--tooltip-offset));
+    top: 50%;
+    transform: translateY(-50%);
+    animation: fadeInLeft 0.3s ease;
+
+    &[data-show-arrow="true"]::after {
+      content: "";
+      position: absolute;
+      left: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+      border-width: 5px;
+      border-style: solid;
+      border-color: transparent transparent transparent var(--secondary);
+    }
+  }
+
+  &.tooltip__content--right {
+    left: calc(100% + var(--tooltip-offset));
+    top: 50%;
+    transform: translateY(-50%);
+    animation: fadeInRight 0.3s ease;
+
+    &[data-show-arrow="true"]::after {
+      content: "";
+      position: absolute;
+      right: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+      border-width: 5px;
+      border-style: solid;
+      border-color: transparent var(--secondary) transparent transparent;
+    }
+  }
+}
+
+@keyframes fadeInRight {
+  from {
+    opacity: 0;
+    transform: translateY(-50%) translateX(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(-50%) translateX(0);
+  }
+}
+
+@keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    transform: translateY(-50%) translateX(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(-50%) translateX(0);
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}

src/big-picture/src/components/common/typography/index.tsx

@@ -0,0 +1,64 @@
+import "./styles.scss";
+
+import cn from "classnames";
+import type { HTMLAttributes } from "react";
+
+export interface TypographyProps
+  extends HTMLAttributes<
+    HTMLHeadingElement | HTMLParagraphElement | HTMLLabelElement
+  > {
+  variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body" | "label";
+}
+
+export function Typography({
+  children,
+  variant = "body",
+  ...props
+}: Readonly<TypographyProps>) {
+  const { className, ...rest } = props;
+
+  switch (variant) {
+    case "h1":
+      return (
+        <h1 {...rest} className={cn("typography typography--h1", className)}>
+          {children}
+        </h1>
+      );
+    case "h2":
+      return (
+        <h2 {...rest} className={cn("typography typography--h2", className)}>
+          {children}
+        </h2>
+      );
+    case "h3":
+      return (
+        <h3 {...rest} className={cn("typography typography--h3", className)}>
+          {children}
+        </h3>
+      );
+    case "h4":
+      return (
+        <h4 {...rest} className={cn("typography typography--h4", className)}>
+          {children}
+        </h4>
+      );
+    case "h5":
+      return (
+        <h5 {...rest} className={cn("typography typography--h5", className)}>
+          {children}
+        </h5>
+      );
+    case "h6":
+      return (
+        <h6 {...rest} className={cn("typography typography--h6", className)}>
+          {children}
+        </h6>
+      );
+    default:
+      return (
+        <p {...rest} className={cn("typography typography--body", className)}>
+          {children}
+        </p>
+      );
+  }
+}

src/big-picture/src/components/common/typography/styles.scss

@@ -0,0 +1,40 @@
+.typography {
+  color: var(--text);
+
+  &--h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    line-height: 3.5rem;
+  }
+
+  &--h2 {
+    font-size: 2rem;
+    font-weight: 700;
+  }
+
+  &--h3 {
+    font-size: 1.5rem;
+    font-weight: 700;
+  }
+
+  &--h4 {
+    font-size: 1.25rem;
+    font-weight: 700;
+  }
+
+  &--h5 {
+    font-size: 1rem;
+    font-weight: 700;
+  }
+
+  &--h6 {
+    font-size: 0.875rem;
+    font-weight: 700;
+  }
+
+  &--body,
+  &--label {
+    font-size: 0.875rem;
+    font-weight: 400;
+  }
+}

src/big-picture/src/components/common/user-profile/index.tsx

@@ -0,0 +1,122 @@
+import "./styles.scss";
+
+import {
+  BellIcon,
+  CheckIcon,
+  CopyIcon,
+  UsersIcon,
+} from "@phosphor-icons/react";
+import { useState } from "react";
+import { Link } from "react-router-dom";
+
+export interface UserProfileProps {
+  image: string;
+  name: string;
+  friendCode: string;
+}
+
+interface UserProfileContentProps {
+  image: string;
+  name: string;
+  friendCode: string;
+}
+
+interface UserProfileActionsProps {
+  friendsCount: number;
+}
+
+function UserProfileActions({
+  friendsCount,
+}: Readonly<UserProfileActionsProps>) {
+  const [isHovering, setIsHovering] = useState(false);
+
+  return (
+    <div className="user-profile__actions">
+      <Link to="/friends" className="user-profile__actions__friends">
+        <UsersIcon size={20} className="user-profile__actions__friends__icon" />
+
+        <p className="user-profile__actions__friends__count">
+          <span className="user-profile__actions__friends__count__number">
+            {friendsCount}
+          </span>{" "}
+          <span className="user-profile__actions__friends__count__text">
+            friends online
+          </span>
+        </p>
+      </Link>
+
+      <button
+        className="user-profile__actions__notification"
+        onMouseEnter={() => setIsHovering(true)}
+        onMouseLeave={() => setIsHovering(false)}
+      >
+        <BellIcon size={20} weight={isHovering ? "fill" : "regular"} />
+      </button>
+    </div>
+  );
+}
+
+function UserProfileContent({
+  image,
+  name,
+  friendCode,
+}: Readonly<UserProfileContentProps>) {
+  const [isCopied, setIsCopied] = useState(false);
+
+  const handleCopy = () => {
+    if (isCopied) return;
+    setIsCopied(true);
+    navigator.clipboard.writeText(friendCode).catch(() => {});
+
+    globalThis.window.setTimeout(() => {
+      setIsCopied(false);
+    }, 2000);
+  };
+
+  return (
+    <div className="user-profile-content">
+      <img
+        src={image}
+        alt={name}
+        className="user-profile-content__image"
+        width={48}
+        height={48}
+        draggable={false}
+      />
+
+      <div className="user-profile-content__info">
+        <p className="user-profile-content__info__name">{name}</p>
+        <button
+          className="user-profile-content__info__friend-code"
+          onClick={handleCopy}
+        >
+          {friendCode}
+          {isCopied ? (
+            <CheckIcon
+              size={14}
+              className="user-profile-content__info__friend-code__icon"
+            />
+          ) : (
+            <CopyIcon
+              size={14}
+              className="user-profile-content__info__friend-code__icon"
+            />
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export function UserProfile({
+  image,
+  name,
+  friendCode,
+}: Readonly<UserProfileProps>) {
+  return (
+    <div className="user-profile-container">
+      <UserProfileContent image={image} name={name} friendCode={friendCode} />
+      <UserProfileActions friendsCount={8} />
+    </div>
+  );
+}

src/big-picture/src/components/common/user-profile/styles.scss

@@ -0,0 +1,123 @@
+.user-profile-container {
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  margin-top: calc(var(--spacing-unit) * 2);
+  transition: background-color 0.2s ease-in-out;
+  background-color: var(--surface);
+  border-top: 1px solid var(--secondary-hover);
+  padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3);
+  gap: calc(var(--spacing-unit) * 4);
+}
+
+.user-profile-content {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing-unit) * 3);
+  align-self: stretch;
+
+  &__image {
+    display: flex;
+    align-items: center;
+    width: 48px;
+    height: 48px;
+    border-radius: calc(var(--spacing-unit) * 1.5);
+    object-fit: cover;
+    object-position: center;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  &__info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: var(--spacing-unit);
+
+    &__name {
+      color: var(--Beta-Text-Main, #cecece);
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 700;
+      line-height: normal;
+    }
+
+    &__friend-code {
+      color: var(--Beta-Text-Secondary, #838383);
+      font-size: 13px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-unit);
+      cursor: pointer;
+
+      &:hover {
+        .user-profile-content__info__friend-code__icon {
+          opacity: 1;
+        }
+      }
+
+      &__icon {
+        opacity: 0;
+        transition: opacity 0.2s ease-in-out;
+      }
+    }
+  }
+}
+
+.user-profile__actions {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+
+  &__friends {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: calc(var(--spacing-unit) * 2);
+    opacity: 0.5;
+    transition: opacity 0.2s ease-in-out;
+    padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 1.5);
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &__count {
+      color: #fff;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+    }
+
+    &__count__number {
+      font-weight: 600;
+    }
+  }
+
+  &__notification {
+    display: flex;
+    padding: var(--spacing-unit);
+    align-items: center;
+    opacity: 0.5;
+    transition: opacity 0.2s ease-in-out;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  &__button {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-unit);
+  }
+}

src/big-picture/src/components/common/vertical-focus-group/index.tsx

@@ -0,0 +1,109 @@
+import { Slot } from "@radix-ui/react-slot";
+import {
+  FocusRegionContext,
+  useFocusLayerId,
+  useFocusRegionId,
+} from "../../context";
+import {
+  type FocusAutoScrollMode,
+  type FocusOverrides,
+  NavigationService,
+} from "../../../services";
+import {
+  type HTMLAttributes,
+  type ReactNode,
+  useEffect,
+  useId,
+  useRef,
+} from "react";
+
+interface VerticalFocusGroupProps extends HTMLAttributes<HTMLDivElement> {
+  regionId?: string;
+  navigationOverrides?: FocusOverrides;
+  autoScrollMode?: FocusAutoScrollMode;
+  getScrollAnchor?: () => HTMLElement | null;
+  asChild?: boolean;
+  children: ReactNode;
+}
+
+export function VerticalFocusGroup({
+  regionId,
+  navigationOverrides,
+  autoScrollMode = "auto",
+  getScrollAnchor,
+  asChild = false,
+  className,
+  style,
+  children,
+  ...props
+}: Readonly<VerticalFocusGroupProps>) {
+  const generatedId = useId();
+  const parentRegionId = useFocusRegionId();
+  const layerId = useFocusLayerId();
+  const navigation = NavigationService.getInstance();
+  const initialNavigationOverridesRef = useRef(navigationOverrides);
+  const initialGetScrollAnchorRef = useRef(getScrollAnchor);
+  const ref = useRef<HTMLDivElement | null>(null);
+  const resolvedRegionId =
+    regionId ?? `focus-region-${generatedId.replaceAll(":", "")}`;
+
+  useEffect(() => {
+    return navigation.registerRegion({
+      id: resolvedRegionId,
+      parentRegionId,
+      orientation: "vertical",
+      layerId,
+      navigationOverrides: initialNavigationOverridesRef.current,
+      autoScrollMode,
+      isPersistent: Boolean(regionId),
+      getElement: () => ref.current,
+      getScrollAnchor: initialGetScrollAnchorRef.current,
+    });
+  }, [
+    autoScrollMode,
+    layerId,
+    navigation,
+    parentRegionId,
+    regionId,
+    resolvedRegionId,
+  ]);
+
+  useEffect(() => {
+    navigation.updateRegion(resolvedRegionId, {
+      autoScrollMode,
+      getScrollAnchor,
+      navigationOverrides,
+    });
+  }, [
+    autoScrollMode,
+    getScrollAnchor,
+    navigation,
+    navigationOverrides,
+    resolvedRegionId,
+  ]);
+
+  const Component = asChild ? Slot : "div";
+
+  return (
+    <FocusRegionContext.Provider value={resolvedRegionId}>
+      <Component
+        ref={ref}
+        className={className}
+        data-focus-region-id={resolvedRegionId}
+        style={
+          asChild
+            ? style
+            : {
+                display: "flex",
+                flexDirection: "column",
+                gap: 16,
+                ...style,
+              }
+        }
+        {...props}
+      >
+        {children}
+      </Component>
+    </FocusRegionContext.Provider>
+  );
+}

src/big-picture/src/components/common/vertical-game-card/index.tsx

@@ -0,0 +1,115 @@
+import "./styles.scss";
+
+import { SparkleIcon, TrophyIcon } from "@phosphor-icons/react";
+import cn from "classnames";
+import type { CSSProperties, KeyboardEvent, ReactNode } from "react";
+
+export interface VerticalGameCardProps {
+  coverImageUrl?: string | null;
+  gameTitle: string;
+  subtitle: string;
+  progressLabel?: string;
+  progressValue?: number;
+  progressColor?: string;
+  action?: ReactNode;
+  forceHovered?: boolean;
+  className?: string;
+  onClick?: () => void;
+  onCoverImageError?: () => void;
+}
+
+const DEFAULT_PROGRESS_COLOR = "var(--alert)";
+
+function clampProgress(value: number) {
+  return Math.min(1, Math.max(0, value));
+}
+
+export function VerticalGameCard({
+  coverImageUrl,
+  gameTitle,
+  subtitle,
+  progressLabel,
+  progressValue,
+  progressColor = DEFAULT_PROGRESS_COLOR,
+  action,
+  forceHovered = false,
+  className,
+  onClick,
+  onCoverImageError,
+}: Readonly<VerticalGameCardProps>) {
+  const hasProgress =
+    progressLabel != null &&
+    progressValue != null &&
+    !Number.isNaN(progressValue);
+  const normalizedProgress = hasProgress ? clampProgress(progressValue) : 0;
+  const isCompleted = hasProgress && normalizedProgress === 1;
+
+  const customProperties = {
+    "--vertical-game-card-progress-color": progressColor,
+    "--vertical-game-card-progress-value": normalizedProgress,
+  } as CSSProperties;
+  const ProgressIcon = isCompleted ? SparkleIcon : TrophyIcon;
+
+  const handleCardKeyDown = (event: KeyboardEvent<HTMLElement>) => {
+    if (onClick == null) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onClick();
+    }
+  };
+
+  return (
+    <div
+      className={cn("vertical-game-card", className, {
+        "vertical-game-card--completed": isCompleted,
+        "vertical-game-card--force-hovered": forceHovered,
+      })}
+      style={customProperties}
+      onClick={onClick}
+      onKeyDown={onClick != null ? handleCardKeyDown : undefined}
+      role={onClick != null ? "button" : undefined}
+      tabIndex={onClick != null ? 0 : undefined}
+    >
+      <div className="vertical-game-card__cover">
+        {coverImageUrl ? (
+          <img
+            src={coverImageUrl}
+            alt={gameTitle}
+            draggable={false}
+            onError={onCoverImageError}
+          />
+        ) : (
+          <div
+            className="vertical-game-card__cover-placeholder"
+            aria-hidden="true"
+          />
+        )}
+      </div>
+
+      <div className="vertical-game-card__body">
+        <div className="vertical-game-card__info">
+          <div className="vertical-game-card__text">
+            <h3 className="vertical-game-card__title">{gameTitle}</h3>
+            <p className="vertical-game-card__subtitle">{subtitle}</p>
+          </div>
+
+          <div
+            className={cn("vertical-game-card__progress", {
+              "vertical-game-card__progress--placeholder": !hasProgress,
+            })}
+            aria-hidden={!hasProgress || undefined}
+          >
+            <div className="vertical-game-card__progress-label">
+              <ProgressIcon size={16} weight="fill" />
+              <span>{progressLabel ?? "0/0"}</span>
+            </div>
+
+            <div className="vertical-game-card__progress-track" />
+          </div>
+        </div>
+
+        {action && <div className="vertical-game-card__action">{action}</div>}
+      </div>
+    </div>
+  );
+}

src/big-picture/src/components/common/vertical-game-card/styles.scss

@@ -0,0 +1,269 @@
+.vertical-game-card {
+  --vertical-game-card-progress-color: var(--alert);
+  --vertical-game-card-progress-value: 0;
+  width: min(350px, 100%);
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing-unit) * 2);
+  border: 1px solid transparent;
+  border-radius: calc(var(--spacing-unit) * 2);
+  background-color: transparent;
+  outline: none;
+  outline-offset: 3px;
+  transition:
+    background-color 0.2s ease-in-out,
+    border-color 0.2s ease-in-out,
+    outline-color 0.2s ease-in-out;
+  overflow: hidden;
+
+  &__cover {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 268 / 400;
+    border-radius: var(--spacing-unit);
+    overflow: hidden;
+    background-color: var(--surface);
+
+    img,
+    &-placeholder {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+
+    img {
+      object-fit: cover;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 172%;
+      background: linear-gradient(
+        35deg,
+        rgba(0, 0, 0, 0.1) 0%,
+        rgba(0, 0, 0, 0.07) 51.5%,
+        rgba(255, 255, 255, 0.15) 64%,
+        rgba(255, 255, 255, 0.1) 100%
+      );
+      transform: translateY(-36%);
+      opacity: 0.5;
+      transition:
+        opacity 0.3s ease,
+        transform 0.3s ease;
+      pointer-events: none;
+      z-index: 1;
+    }
+  }
+
+  &__cover-placeholder {
+    background:
+      linear-gradient(
+        180deg,
+        rgba(255, 255, 255, 0.08) 0%,
+        rgba(255, 255, 255, 0.02) 100%
+      ),
+      var(--secondary);
+  }
+
+  &__body {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(var(--spacing-unit) * 2);
+    padding: 0 0 calc(var(--spacing-unit) * 2);
+    transition: padding 0.2s ease-in-out;
+  }
+
+  &__info {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spacing-unit) * 2);
+  }
+
+  &__text {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-unit);
+  }
+
+  &__title,
+  &__subtitle,
+  &__progress-label span {
+    margin: 0;
+    font-size: 14px;
+    line-height: normal;
+    letter-spacing: 0;
+  }
+
+  &__title,
+  &__subtitle,
+  &__progress-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__title {
+    color: var(--text);
+    font-weight: 700;
+  }
+
+  &__subtitle {
+    color: var(--text-secondary);
+    font-weight: 400;
+  }
+
+  &__progress {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing-unit) * 2);
+
+    &--placeholder {
+      visibility: hidden;
+    }
+  }
+
+  &__progress-label {
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-unit);
+    color: color-mix(
+      in srgb,
+      var(--vertical-game-card-progress-color) 70%,
+      white
+    );
+    font-weight: 400;
+  }
+
+  &__progress-track {
+    position: relative;
+    width: calc(var(--spacing-unit) * 25);
+    height: var(--spacing-unit);
+    border-radius: 999px;
+    background-color: color-mix(
+      in srgb,
+      var(--vertical-game-card-progress-color) 20%,
+      transparent
+    );
+    overflow: hidden;
+    flex-shrink: 0;
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0 auto 0 0;
+      width: calc(100% * var(--vertical-game-card-progress-value));
+      border-radius: inherit;
+      background-color: var(--vertical-game-card-progress-color);
+      z-index: 1;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      opacity: 0;
+      pointer-events: none;
+      z-index: 2;
+    }
+  }
+
+  &__action {
+    max-width: 0;
+    opacity: 0;
+    flex-shrink: 0;
+    overflow: hidden;
+    pointer-events: none;
+    transition:
+      max-width 0.2s ease-in-out,
+      opacity 0.2s ease-in-out;
+  }
+
+  &:hover,
+  &:focus-within,
+  &--force-hovered,
+  [data-focused="true"] > &,
+  [data-focus-visible="true"] > & {
+    background-color: var(--surface);
+    border-color: var(--secondary-border);
+
+    .vertical-game-card__cover::before {
+      opacity: 1;
+      transform: translateY(-20%);
+    }
+
+    .vertical-game-card__body {
+      padding-inline: calc(var(--spacing-unit) * 2);
+    }
+
+    .vertical-game-card__action {
+      max-width: calc(var(--spacing-unit) * 11);
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  [data-focus-visible="true"] > & {
+    outline: 2px solid var(--primary);
+  }
+
+  &--completed {
+    .vertical-game-card__progress-track {
+      &::before {
+        opacity: 0;
+        inset: 0 auto 0 -62%;
+        width: 62%;
+        background: linear-gradient(
+          100deg,
+          rgba(255, 255, 255, 0) 0%,
+          rgba(255, 255, 255, 0.03) 10%,
+          rgba(255, 255, 255, 0.08) 26%,
+          rgba(255, 255, 255, 0.16) 40%,
+          rgba(255, 255, 255, 0.25) 50%,
+          rgba(255, 255, 255, 0.16) 60%,
+          rgba(255, 255, 255, 0.08) 74%,
+          rgba(255, 255, 255, 0.03) 90%,
+          rgba(255, 255, 255, 0) 100%
+        );
+        animation: vertical-game-card-complete-shine 1.7s
+          cubic-bezier(0.4, 0, 0.2, 1) infinite;
+      }
+    }
+  }
+}
+
+@keyframes vertical-game-card-complete-shine {
+  0% {
+    opacity: 0;
+    transform: translateX(0);
+  }
+
+  14% {
+    opacity: 0.5;
+  }
+
+  82% {
+    opacity: 0.5;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateX(262%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vertical-game-card--completed .vertical-game-card__progress-track::before {
+    animation: none;
+    opacity: 0;
+  }
+}

src/big-picture/src/components/common/vertical-store-game-card/index.tsx

@@ -0,0 +1,74 @@
+import "./styles.scss";
+
+import cn from "classnames";
+import type { KeyboardEvent } from "react";
+
+export interface VerticalStoreGameCardProps {
+  coverImageUrl?: string | null;
+  gameTitle: string;
+  downloadSourceCount: number;
+  forceHovered?: boolean;
+  className?: string;
+  onClick?: () => void;
+  onCoverImageError?: () => void;
+}
+
+function getDownloadSourcesLabel(downloadSourceCount: number) {
+  const normalizedCount = Math.max(0, downloadSourceCount);
+  const suffix = normalizedCount === 1 ? "source" : "sources";
+
+  return `${normalizedCount} download ${suffix}`;
+}
+
+export function VerticalStoreGameCard({
+  coverImageUrl,
+  gameTitle,
+  downloadSourceCount,
+  forceHovered = false,
+  className,
+  onClick,
+  onCoverImageError,
+}: Readonly<VerticalStoreGameCardProps>) {
+  const handleCardKeyDown = (event: KeyboardEvent<HTMLElement>) => {
+    if (onClick == null) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onClick();
+    }
+  };
+
+  return (
+    <div
+      className={cn("vertical-store-game-card", className, {
+        "vertical-store-game-card--force-hovered": forceHovered,
+      })}
+      onClick={onClick}
+      onKeyDown={onClick != null ? handleCardKeyDown : undefined}
+      role={onClick != null ? "button" : undefined}
+      tabIndex={onClick != null ? 0 : undefined}
+    >
+      <div className="vertical-store-game-card__cover">
+        {coverImageUrl ? (
+          <img
+            src={coverImageUrl}
+            alt={gameTitle}
+            draggable={false}
+            onError={onCoverImageError}
+          />
+        ) : (
+          <div
+            className="vertical-store-game-card__cover-placeholder"
+            aria-hidden="true"
+          />
+        )}
+      </div>
+
+      <div className="vertical-store-game-card__body">
+        <h3 className="vertical-store-game-card__title">{gameTitle}</h3>
+        <p className="vertical-store-game-card__subtitle">
+          {getDownloadSourcesLabel(downloadSourceCount)}
+        </p>
+      </div>
+    </div>
+  );
+}

src/big-picture/src/components/common/vertical-store-game-card/styles.scss

@@ -0,0 +1,122 @@
+.vertical-store-game-card {
+  width: min(350px, 100%);
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing-unit) * 5);
+  border: 1px solid transparent;
+  border-radius: calc(var(--spacing-unit) * 2);
+  background-color: transparent;
+  outline: none;
+  outline-offset: 3px;
+  overflow: hidden;
+  transition:
+    background-color 0.2s ease-in-out,
+    border-color 0.2s ease-in-out,
+    outline-color 0.2s ease-in-out;
+
+  &__cover {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 268 / 400;
+    border-radius: var(--spacing-unit);
+    overflow: hidden;
+    background-color: var(--surface);
+
+    img,
+    &-placeholder {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+
+    img {
+      object-fit: cover;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 172%;
+      background: linear-gradient(
+        35deg,
+        rgba(0, 0, 0, 0.1) 0%,
+        rgba(0, 0, 0, 0.07) 51.5%,
+        rgba(255, 255, 255, 0.15) 64%,
+        rgba(255, 255, 255, 0.1) 100%
+      );
+      transform: translateY(-36%);
+      opacity: 0.5;
+      transition:
+        opacity 0.3s ease,
+        transform 0.3s ease;
+      pointer-events: none;
+      z-index: 1;
+    }
+  }
+
+  &__cover-placeholder {
+    background:
+      linear-gradient(
+        180deg,
+        rgba(255, 255, 255, 0.08) 0%,
+        rgba(255, 255, 255, 0.02) 100%
+      ),
+      var(--secondary);
+  }
+
+  &__body {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-unit);
+    padding: 0 0 calc(var(--spacing-unit) * 2);
+    transition: padding 0.2s ease-in-out;
+  }
+
+  &__title,
+  &__subtitle {
+    margin: 0;
+    line-height: normal;
+    letter-spacing: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__title {
+    color: var(--text);
+    font-size: 14px;
+    font-weight: 700;
+  }
+
+  &__subtitle {
+    color: var(--text-secondary);
+    font-size: 14px;
+    font-weight: 400;
+  }
+
+  &:hover,
+  &:focus-within,
+  &--force-hovered,
+  [data-focused="true"] > &,
+  [data-focus-visible="true"] > & {
+    background-color: var(--surface);
+    border-color: var(--secondary-border);
+
+    .vertical-store-game-card__cover::before {
+      opacity: 1;
+      transform: translateY(-20%);
+    }
+
+    .vertical-store-game-card__body {
+      padding-inline: calc(var(--spacing-unit) * 2);
+    }
+  }
+
+  [data-focus-visible="true"] > & {
+    outline: 2px solid var(--primary);
+  }
+}

src/big-picture/src/components/context/focus-item-actions.context.tsx

@@ -0,0 +1,20 @@
+import type { FocusItemActionsMeta } from "../../types";
+import { createContext, useContext } from "react";
+
+const defaultFocusItemActionsMeta: FocusItemActionsMeta = {
+  hasPrimary: false,
+  hasSecondary: false,
+  hasPressX: false,
+  hasPressY: false,
+  hasHoldA: false,
+  hasHoldB: false,
+  hasHoldX: false,
+};
+
+export const FocusItemActionsMetaContext = createContext<FocusItemActionsMeta>(
+  defaultFocusItemActionsMeta
+);
+
+export function useFocusItemActionsMeta() {
+  return useContext(FocusItemActionsMetaContext);
+}

src/big-picture/src/components/context/focus-layer.context.tsx

@@ -0,0 +1,10 @@
+import { ROOT_NAVIGATION_LAYER_ID } from "../../services";
+import { createContext, useContext } from "react";
+
+export const FocusLayerContext = createContext<string>(
+  ROOT_NAVIGATION_LAYER_ID
+);
+
+export function useFocusLayerId() {
+  return useContext(FocusLayerContext);
+}

src/big-picture/src/components/context/focus-region.context.tsx

@@ -0,0 +1,7 @@
+import { createContext, useContext } from "react";
+
+export const FocusRegionContext = createContext<string | null>(null);
+
+export function useFocusRegionId() {
+  return useContext(FocusRegionContext);
+}

src/big-picture/src/components/context/index.ts

@@ -0,0 +1,3 @@
+export * from "./focus-item-actions.context";
+export * from "./focus-layer.context";
+export * from "./focus-region.context";

src/big-picture/src/components/index.ts

@@ -0,0 +1,4 @@
+export * from "./common";
+export * from "./context";
+export * from "./providers";
+export * from "./pages";

src/big-picture/src/components/pages/game/achievements/index.tsx

@@ -0,0 +1,117 @@
+import type { UserAchievement } from "@types";
+import { Link } from "react-router-dom";
+import { Box, FocusItem, Typography } from "../../../common";
+import cn from "classnames";
+import { EyeIcon } from "@phosphor-icons/react/dist/ssr";
+import {
+  GAME_ACHIEVEMENTS_TITLE_ID,
+  GAME_ACHIEVEMENTS_VIEW_ALL_ID,
+  GAME_REQUIREMENTS_TO_PLAY_MINIMUM_BUTTON_ID,
+  GAME_SCREENSHOT_CAROUSEL_NEXT_BUTTON_ID,
+  GAME_SCREENSHOT_CAROUSEL_PREV_BUTTON_ID,
+} from "../navigation";
+import { FocusOverrides } from "src/big-picture/src/services/navigation.service";
+
+export interface AchievementsBoxProps {
+  achievements: UserAchievement[];
+}
+
+export function AchievementsBox({
+  achievements,
+}: Readonly<AchievementsBoxProps>) {
+  const achievementsNavigationOverrides: FocusOverrides = {
+    down: {
+      type: "item",
+      itemId: GAME_ACHIEVEMENTS_VIEW_ALL_ID,
+    },
+    right: {
+      type: "block",
+    },
+    left: {
+      type: "item",
+      itemId: GAME_SCREENSHOT_CAROUSEL_NEXT_BUTTON_ID,
+    },
+  };
+
+  const viewAllNavigationOverrides: FocusOverrides = {
+    up: {
+      type: "item",
+      itemId: GAME_ACHIEVEMENTS_TITLE_ID,
+    },
+    left: {
+      type: "item",
+      itemId: GAME_SCREENSHOT_CAROUSEL_PREV_BUTTON_ID,
+    },
+    right: {
+      type: "block",
+    },
+    down: {
+      type: "item",
+      itemId: GAME_REQUIREMENTS_TO_PLAY_MINIMUM_BUTTON_ID,
+    },
+  };
+
+  return (
+    <div className="game-page__box-group">
+      <FocusItem
+        id={GAME_ACHIEVEMENTS_TITLE_ID}
+        navigationOverrides={achievementsNavigationOverrides}
+        asChild
+      >
+        <div className="game-page__achievements-title">
+          <Typography>Achievements</Typography>
+
+          <span>
+            {achievements.filter((achievement) => achievement.unlocked).length}{" "}
+            / {achievements.length}
+          </span>
+        </div>
+      </FocusItem>
+
+      {achievements.slice(0, 5).map((achievement) => (
+        <Box key={achievement.name} className="game-page__achievement">
+          <img
+            src={achievement.icon}
+            width={56}
+            height={56}
+            className={cn("game-page__achievement-icon", {
+              "game-page__achievement-icon--locked": !achievement.unlocked,
+            })}
+            alt={achievement.displayName}
+            loading="lazy"
+          />
+
+          <div className="game-page__achievement-info">
+            <Typography>{achievement.displayName}</Typography>
+
+            <Typography style={{ color: "rgba(255, 255, 255, 0.5)" }}>
+              {achievement.description}
+            </Typography>
+          </div>
+        </Box>
+      ))}
+
+      <Box className="game-page__achievement-box">
+        <div className="game-page__achievement-icon-locked">
+          <EyeIcon size={24} />
+        </div>
+
+        <div className="game-page__achievement-box-content">
+          <div className="game-page__achievement-box-link">
+            <FocusItem
+              id={GAME_ACHIEVEMENTS_VIEW_ALL_ID}
+              navigationOverrides={viewAllNavigationOverrides}
+            >
+              <Link to="/big-picture/library">
+                <Typography>View All Achievements</Typography>
+              </Link>
+            </FocusItem>
+            <span>Time to platinum!</span>
+          </div>
+
+          <span>{achievements.length}</span>
+        </div>
+      </Box>
+    </div>
+  );
+}

src/big-picture/src/components/pages/game/game-reviews/index.tsx

@@ -0,0 +1,517 @@
+import {
+  ClockIcon,
+  StarIcon,
+  ThumbsDownIcon,
+  ThumbsUpIcon,
+} from "@phosphor-icons/react";
+import { sanitizeHtml } from "@shared";
+import type { GameReview, GameShop } from "@types";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { IS_DESKTOP } from "../../../../constants";
+import { useDate, useFormat } from "../../../../hooks";
+import { BIG_PICTURE_SIDEBAR_ITEM_IDS } from "../../../../layout";
+import {
+  FocusOverrides,
+  NavigationService,
+} from "../../../../services/navigation.service";
+import {
+  Box,
+  Button,
+  FocusItem,
+  HorizontalFocusGroup,
+  Typography,
+} from "../../../common";
+import {
+  GAME_REVIEWS_LOAD_MORE_ID,
+  GAME_REVIEWS_PRIMARY_FILTER_BUTTON_ID,
+  GAME_REVIEWS_REGION_ID,
+  GAME_REVIEWS_SECONDARY_FILTER_BUTTON_ID,
+  GAME_REVIEWS_THIRD_FILTER_BUTTON_ID,
+  GAME_SCREENSHOT_CAROUSEL_PREV_BUTTON_ID,
+  GAME_SUPPORTED_LANGUAGES_LAST_ROW_ID,
+  getGameReviewVoteButtonDownvoteId,
+  getGameReviewVoteButtonUpvoteId,
+  getGameReviewVotesRegionId,
+} from "../navigation";
+
+type ReviewSortOption =
+  | "newest"
+  | "oldest"
+  | "score_high"
+  | "score_low"
+  | "most_voted";
+
+interface GameReviewsProps {
+  shop: GameShop;
+  objectId: string;
+}
+
+const REVIEWS_PER_PAGE = 5;
+
+export function GameReviews({ shop, objectId }: Readonly<GameReviewsProps>) {
+  const [reviews, setReviews] = useState<GameReview[]>([]);
+  const [reviewsLoading, setReviewsLoading] = useState(false);
+  const [totalReviewCount, setTotalReviewCount] = useState(0);
+  const [sortBy, setSortBy] = useState<ReviewSortOption>("newest");
+  const [page, setPage] = useState(0);
+  const [hasMore, setHasMore] = useState(true);
+  const [votingReviews, setVotingReviews] = useState<Set<string>>(new Set());
+
+  const { formatDistance } = useDate();
+  const { formatNumber, formatPlayTime } = useFormat();
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const prevHasMoreRef = useRef(true);
+
+  const loadReviews = useCallback(
+    async (reset = false) => {
+      if (!IS_DESKTOP || !objectId || shop === "custom") return;
+
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+
+      const abortController = new AbortController();
+      abortControllerRef.current = abortController;
+
+      setReviewsLoading(true);
+      try {
+        const skip = reset ? 0 : page * REVIEWS_PER_PAGE;
+        const params = new URLSearchParams({
+          take: String(REVIEWS_PER_PAGE),
+          skip: String(skip),
+          sortBy,
+        });
+
+        const response = await globalThis.window.electron.hydraApi.get<{
+          reviews: GameReview[];
+          totalCount: number;
+        }>(`/games/${shop}/${objectId}/reviews?${params.toString()}`, {
+          needsAuth: false,
+        });
+
+        if (abortController.signal.aborted) return;
+
+        const reviewsData = response?.reviews ?? [];
+        const reviewCount = response?.totalCount ?? 0;
+
+        if (reset) {
+          setReviews(reviewsData);
+          setPage(0);
+        } else {
+          setReviews((prev) => [...prev, ...reviewsData]);
+        }
+
+        setTotalReviewCount(reviewCount);
+        setHasMore(reviewsData.length === REVIEWS_PER_PAGE);
+      } catch (error) {
+        if (!abortController.signal.aborted) {
+          console.error("Failed to load reviews:", error);
+        }
+      } finally {
+        if (!abortController.signal.aborted) {
+          setReviewsLoading(false);
+        }
+      }
+    },
+    [objectId, shop, page, sortBy]
+  );
+
+  const applyVote = (
+    review: GameReview,
+    voteType: "upvote" | "downvote"
+  ): GameReview => {
+    const updated = { ...review };
+
+    const isToggleOff =
+      (voteType === "upvote" && updated.hasUpvoted) ||
+      (voteType === "downvote" && updated.hasDownvoted);
+
+    if (isToggleOff) {
+      if (voteType === "upvote") {
+        updated.hasUpvoted = false;
+        updated.upvotes = Math.max(0, (updated.upvotes || 0) - 1);
+      } else {
+        updated.hasDownvoted = false;
+        updated.downvotes = Math.max(0, (updated.downvotes || 0) - 1);
+      }
+      return updated;
+    }
+
+    if (voteType === "upvote") {
+      updated.hasUpvoted = true;
+      updated.upvotes = (updated.upvotes || 0) + 1;
+    } else if (voteType === "downvote") {
+      updated.hasDownvoted = true;
+      updated.downvotes = (updated.downvotes || 0) + 1;
+    }
+
+    if (voteType === "upvote" && updated.hasDownvoted) {
+      updated.hasDownvoted = false;
+      updated.downvotes = Math.max(0, (updated.downvotes || 0) - 1);
+    } else if (voteType === "downvote" && updated.hasUpvoted) {
+      updated.hasUpvoted = false;
+      updated.upvotes = Math.max(0, (updated.upvotes || 0) - 1);
+    }
+
+    return updated;
+  };
+
+  const handleVote = async (
+    reviewId: string,
+    voteType: "upvote" | "downvote"
+  ) => {
+    if (!objectId || votingReviews.has(reviewId)) return;
+
+    setVotingReviews((prev) => new Set(prev).add(reviewId));
+
+    const reviewIndex = reviews.findIndex((r) => r.id === reviewId);
+    if (reviewIndex === -1) {
+      setVotingReviews((prev) => {
+        const next = new Set(prev);
+        next.delete(reviewId);
+        return next;
+      });
+      return;
+    }
+
+    const originalReview = { ...reviews[reviewIndex] };
+    const updatedReviews = [...reviews];
+    updatedReviews[reviewIndex] = applyVote(originalReview, voteType);
+    setReviews(updatedReviews);
+
+    try {
+      await globalThis.window.electron.hydraApi.put(
+        `/games/${shop}/${objectId}/reviews/${reviewId}/${voteType}`,
+        { data: {} }
+      );
+    } catch {
+      const rolledBack = [...reviews];
+      rolledBack[reviewIndex] = originalReview;
+      setReviews(rolledBack);
+    } finally {
+      setTimeout(() => {
+        setVotingReviews((prev) => {
+          const next = new Set(prev);
+          next.delete(reviewId);
+          return next;
+        });
+      }, 500);
+    }
+  };
+
+  const handleSortChange = (newSortBy: ReviewSortOption) => {
+    if (newSortBy !== sortBy) {
+      setSortBy(newSortBy);
+      setPage(0);
+      setHasMore(true);
+    }
+  };
+
+  const loadMore = () => {
+    if (!reviewsLoading && hasMore) {
+      setPage((prev) => prev + 1);
+    }
+  };
+
+  useEffect(() => {
+    loadReviews(true);
+  }, [sortBy, objectId, loadReviews]);
+
+  useEffect(() => {
+    if (page > 0) {
+      loadReviews(false);
+    }
+  }, [page, loadReviews]);
+
+  useEffect(() => {
+    if (prevHasMoreRef.current && !hasMore && reviews.length > 0) {
+      const lastReview = reviews[reviews.length - 1];
+      const targetId = getGameReviewVoteButtonUpvoteId(lastReview.id);
+      requestAnimationFrame(() => {
+        NavigationService.getInstance().setFocus(targetId);
+      });
+    }
+    prevHasMoreRef.current = hasMore;
+  }, [hasMore, reviews]);
+
+  useEffect(() => {
+    return () => {
+      abortControllerRef.current?.abort();
+    };
+  }, []);
+
+  if (reviewsLoading && reviews.length === 0) {
+    return null;
+  }
+
+  const primaryFilterNavigationOverrides: FocusOverrides = {
+    up: {
+      type: "item",
+      itemId: GAME_SCREENSHOT_CAROUSEL_PREV_BUTTON_ID,
+    },
+    left: {
+      type: "item",
+      itemId: BIG_PICTURE_SIDEBAR_ITEM_IDS.home,
+    },
+    right: {
+      type: "item",
+      itemId: GAME_REVIEWS_SECONDARY_FILTER_BUTTON_ID,
+    },
+  };
+
+  const secondaryFilterNavigationOverrides: FocusOverrides = {
+    up: {
+      type: "item",
+      itemId: GAME_SUPPORTED_LANGUAGES_LAST_ROW_ID,
+    },
+    left: {
+      type: "item",
+      itemId: GAME_REVIEWS_PRIMARY_FILTER_BUTTON_ID,
+    },
+    right: {
+      type: "item",
+      itemId: GAME_REVIEWS_THIRD_FILTER_BUTTON_ID,
+    },
+  };
+
+  const thirdFilterNavigationOverrides: FocusOverrides = {
+    up: {
+      type: "item",
+      itemId: GAME_SUPPORTED_LANGUAGES_LAST_ROW_ID,
+    },
+    left: {
+      type: "item",
+      itemId: GAME_REVIEWS_SECONDARY_FILTER_BUTTON_ID,
+    },
+    right: {
+      type: "item",
+      itemId: GAME_SUPPORTED_LANGUAGES_LAST_ROW_ID,
+    },
+  };
+
+  const upvoteButtonNavigationOverrides = (
+    reviewId: string
+  ): FocusOverrides => ({
+    left: {
+      type: "item",
+      itemId: BIG_PICTURE_SIDEBAR_ITEM_IDS.home,
+    },
+    right: {
+      type: "item",
+      itemId: getGameReviewVoteButtonDownvoteId(reviewId),
+    },
+  });
+
+  const downvoteButtonNavigationOverrides = (
+    reviewId: string
+  ): FocusOverrides => ({
+    left: {
+      type: "item",
+      itemId: getGameReviewVoteButtonUpvoteId(reviewId),
+    },
+    right: {
+      type: "block",
+    },
+  });
+
+  const loadMoreNavigationOverrides: FocusOverrides = {
+    right: {
+      type: "block",
+    },
+    down: {
+      type: "block",
+    },
+  };
+
+  return (
+    <div className="game-page__box-group">
+      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+        <Typography>Reviews</Typography>
+
+        <div
+          style={{
+            color: "rgba(255, 255, 255, 0.5)",
+            padding: "4px 8px",
+            borderRadius: "4px",
+            backgroundColor: "rgba(255, 255, 255, 0.05)",
+          }}
+        >
+          {totalReviewCount}
+        </div>
+      </div>
+
+      <HorizontalFocusGroup regionId={GAME_REVIEWS_REGION_ID} asChild>
+        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+          <Button
+            focusId={GAME_REVIEWS_PRIMARY_FILTER_BUTTON_ID}
+            focusNavigationOverrides={primaryFilterNavigationOverrides}
+            variant="link"
+            size="small"
+            onClick={() =>
+              handleSortChange(sortBy === "newest" ? "oldest" : "newest")
+            }
+          >
+            {sortBy === "oldest" ? "Oldest" : "Newest"}
+          </Button>
+
+          <Button
+            focusId={GAME_REVIEWS_SECONDARY_FILTER_BUTTON_ID}
+            focusNavigationOverrides={secondaryFilterNavigationOverrides}
+            variant="link"
+            size="small"
+            onClick={() =>
+              handleSortChange(
+                sortBy === "score_high" ? "score_low" : "score_high"
+              )
+            }
+          >
+            {sortBy === "score_low" ? "Lowest Score" : "Highest Score"}
+          </Button>
+
+          <Button
+            focusId={GAME_REVIEWS_THIRD_FILTER_BUTTON_ID}
+            focusNavigationOverrides={thirdFilterNavigationOverrides}
+            variant="link"
+            size="small"
+            onClick={() => handleSortChange("most_voted")}
+          >
+            Most Voted
+          </Button>
+        </div>
+      </HorizontalFocusGroup>
+
+      {reviews.length === 0 ? (
+        <Box>
+          <Typography
+            style={{ color: "rgba(255, 255, 255, 0.5)", textAlign: "center" }}
+          >
+            No reviews yet
+          </Typography>
+        </Box>
+      ) : (
+        reviews.map((review) => {
+          const isVoting = votingReviews.has(review.id);
+
+          const row = (
+            <Box key={review.id} className="game-page__review-item">
+              <div className="game-page__review-header">
+                <div className="game-page__review-user">
+                  {review.user.profileImageUrl ? (
+                    <img
+                      src={review.user.profileImageUrl}
+                      alt={review.user.displayName}
+                      className="game-page__review-avatar"
+                    />
+                  ) : (
+                    <div className="game-page__review-avatar game-page__review-avatar--placeholder" />
+                  )}
+
+                  <div className="game-page__review-user-info">
+                    <Typography className="game-page__review-display-name">
+                      {review.user.displayName || "Anonymous"}
+                    </Typography>
+
+                    <div className="game-page__review-meta">
+                      <div className="game-page__review-score">
+                        <StarIcon size={12} weight="fill" />
+                        <span>{review.score}/5</span>
+                      </div>
+
+                      {Boolean(
+                        review.playTimeInSeconds && review.playTimeInSeconds > 0
+                      ) && (
+                        <div className="game-page__review-playtime">
+                          <ClockIcon size={12} />
+                          <span>
+                            {formatPlayTime(review.playTimeInSeconds ?? 0)}
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+
+                <Typography className="game-page__review-date">
+                  {formatDistance(new Date(review.createdAt), new Date(), {
+                    addSuffix: true,
+                  })}
+                </Typography>
+              </div>
+
+              <div
+                className="game-page__review-content"
+                dangerouslySetInnerHTML={{
+                  __html: sanitizeHtml(review.reviewHtml),
+                }}
+              />
+
+              <HorizontalFocusGroup
+                regionId={getGameReviewVotesRegionId(review.id)}
+                asChild
+              >
+                <div className="game-page__review-votes">
+                  <FocusItem
+                    id={getGameReviewVoteButtonUpvoteId(review.id)}
+                    navigationOverrides={upvoteButtonNavigationOverrides(
+                      review.id
+                    )}
+                    asChild
+                  >
+                    <button
+                      className={`game-page__review-vote-button ${review.hasUpvoted ? "game-page__review-vote-button--active" : ""}`}
+                      onClick={() => handleVote(review.id, "upvote")}
+                      disabled={isVoting}
+                      aria-label="Upvote"
+                    >
+                      <ThumbsUpIcon
+                        size={14}
+                        weight={review.hasUpvoted ? "fill" : "regular"}
+                      />
+                      <span>{formatNumber(review.upvotes || 0)}</span>
+                    </button>
+                  </FocusItem>
+
+                  <FocusItem
+                    id={getGameReviewVoteButtonDownvoteId(review.id)}
+                    navigationOverrides={downvoteButtonNavigationOverrides(
+                      review.id
+                    )}
+                    asChild
+                  >
+                    <button
+                      className={`game-page__review-vote-button ${review.hasDownvoted ? "game-page__review-vote-button--active-down" : ""}`}
+                      onClick={() => handleVote(review.id, "downvote")}
+                      disabled={isVoting}
+                      aria-label="Downvote"
+                    >
+                      <ThumbsDownIcon
+                        size={14}
+                        weight={review.hasDownvoted ? "fill" : "regular"}
+                      />
+                      <span>{formatNumber(review.downvotes || 0)}</span>
+                    </button>
+                  </FocusItem>
+                </div>
+              </HorizontalFocusGroup>
+            </Box>
+          );
+
+          return row;
+        })
+      )}
+
+      {hasMore && reviews.length > 0 && (
+        <Button
+          focusId={GAME_REVIEWS_LOAD_MORE_ID}
+          variant="rounded"
+          onClick={loadMore}
+          disabled={reviewsLoading}
+          loading={reviewsLoading}
+          focusNavigationOverrides={loadMoreNavigationOverrides}
+        >
+          Load More
+        </Button>
+      )}
+    </div>
+  );
+}

src/big-picture/src/components/pages/game/hero/index.tsx

@@ -0,0 +1,207 @@
+import {
+  HeartIcon,
+  PlayIcon,
+  PlusCircleIcon,
+  XCircleIcon,
+} from "@phosphor-icons/react";
+import type { LibraryGame, ShopDetailsWithAssets } from "@types";
+import { motion } from "framer-motion";
+import { DownloadIcon } from "lucide-react";
+import { useMemo } from "react";
+import {
+  FocusOverrides,
+  FocusOverrideTarget,
+} from "src/big-picture/src/services/navigation.service";
+import { useDominantColor } from "../../../../hooks";
+import { BIG_PICTURE_SIDEBAR_ITEM_IDS } from "../../../../layout";
+import {
+  Button,
+  Divider,
+  HorizontalFocusGroup,
+  Tooltip,
+  Typography,
+} from "../../../common";
+import {
+  GAME_HERO_ACTIONS_REGION_ID,
+  GAME_HERO_PRIMARY_ACTION_ID,
+  GAME_HERO_TOGGLE_FAVORITE_ID,
+  GAME_STATS_REGION_ID,
+  GAME_STATS_TITLE_ID,
+} from "../navigation";
+
+export interface HeroProps {
+  shopDetails: ShopDetailsWithAssets;
+  game: LibraryGame | null;
+  isGameRunning: boolean;
+  isFavorite: boolean;
+  toggleFavorite: () => void;
+  onPlay: () => void;
+  onClose: () => void;
+}
+
+export function Hero({
+  shopDetails,
+  game,
+  isGameRunning,
+  isFavorite,
+  toggleFavorite,
+  onPlay,
+  onClose,
+}: Readonly<HeroProps>) {
+  const dominantColor = useDominantColor(game?.libraryHeroImageUrl ?? null);
+  const heroDownNavigationTarget: FocusOverrideTarget = {
+    type: "region",
+    regionId: GAME_STATS_REGION_ID,
+    entryDirection: "down",
+  };
+
+  const toggleFavoriteNavigationOverrides: FocusOverrides = {
+    left: {
+      type: "item",
+      itemId: GAME_HERO_PRIMARY_ACTION_ID,
+    },
+    right: {
+      type: "item",
+      itemId: GAME_STATS_TITLE_ID,
+    },
+    down: heroDownNavigationTarget,
+  };
+
+  const renderActionButton = useMemo(() => {
+    const downloadNavigationOverrides: FocusOverrides = {
+      left: {
+        type: "item",
+        itemId: BIG_PICTURE_SIDEBAR_ITEM_IDS.home,
+      },
+      right: {
+        type: "item",
+        itemId: GAME_HERO_TOGGLE_FAVORITE_ID,
+      },
+      down: heroDownNavigationTarget,
+    };
+
+    if (isGameRunning) {
+      return (
+        <Button
+          focusId={GAME_HERO_PRIMARY_ACTION_ID}
+          variant="primary"
+          icon={<XCircleIcon size={24} />}
+          onClick={onClose}
+        >
+          Close Game
+        </Button>
+      );
+    }
+
+    if (game?.executablePath) {
+      return (
+        <Button
+          focusId={GAME_HERO_PRIMARY_ACTION_ID}
+          focusNavigationOverrides={downloadNavigationOverrides}
+          variant="primary"
+          color={dominantColor ?? undefined}
+          iconPosition="right"
+          icon={<PlayIcon size={24} weight="fill" />}
+          onClick={onPlay}
+        >
+          Launch Game
+        </Button>
+      );
+    }
+
+    if (game) {
+      return (
+        <Button
+          focusId={GAME_HERO_PRIMARY_ACTION_ID}
+          focusNavigationOverrides={downloadNavigationOverrides}
+          icon={<DownloadIcon size={24} />}
+          onClick={() => console.log("Download")}
+        >
+          Download
+        </Button>
+      );
+    }
+
+    return (
+      <Button
+        focusId={GAME_HERO_PRIMARY_ACTION_ID}
+        variant="secondary"
+        icon={<PlusCircleIcon size={24} />}
+      >
+        Add to Library
+      </Button>
+    );
+  }, [isGameRunning, game, onClose, onPlay, heroDownNavigationTarget]);
+
+  return (
+    <section style={{ position: "relative", height: 620, overflow: "hidden" }}>
+      <motion.div
+        initial={{ scale: 1, x: 0, y: 0 }}
+        animate={{
+          scale: 1.1,
+          x: -10,
+          y: -10,
+        }}
+        transition={{
+          duration: 20,
+          ease: "easeInOut",
+          repeat: Infinity,
+          repeatType: "mirror",
+        }}
+        className="game-page__hero"
+        style={{
+          backgroundImage: `url(${shopDetails.assets?.libraryHeroImageUrl})`,
+        }}
+      />
+
+      <div className="game-page__hero-overlay">
+        <img
+          src={shopDetails.assets?.logoImageUrl || ""}
+          style={{ width: 337 }}
+          alt={shopDetails.assets?.title || ""}
+        />
+
+        <Typography
+          style={{ maxWidth: 512, color: "rgba(255, 255, 255, 0.8)" }}
+          dangerouslySetInnerHTML={{
+            __html: shopDetails.short_description || "",
+          }}
+        />
+
+        <HorizontalFocusGroup
+          regionId={GAME_HERO_ACTIONS_REGION_ID}
+          className="game-page__hero-actions"
+        >
+          {renderActionButton}
+
+          <Divider orientation="vertical" />
+
+          <Tooltip
+            content={isFavorite ? "Remove from Favorites" : "Add to Favorites"}
+          >
+            <Button
+              variant="secondary"
+              onClick={() => toggleFavorite()}
+              focusId={GAME_HERO_TOGGLE_FAVORITE_ID}
+              focusNavigationOverrides={toggleFavoriteNavigationOverrides}
+            >
+              <motion.span
+                key={isFavorite ? "filled" : "empty"}
+                initial={{ scale: 0.8, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                exit={{ scale: 0.8, opacity: 0 }}
+                transition={{ duration: 0.2 }}
+              >
+                {isFavorite ? (
+                  <HeartIcon size={24} weight="fill" />
+                ) : (
+                  <HeartIcon size={24} />
+                )}
+              </motion.span>
+            </Button>
+          </Tooltip>
+        </HorizontalFocusGroup>
+      </div>
+    </section>
+  );
+}

src/big-picture/src/components/pages/game/how-long-to-beat/index.tsx

@@ -0,0 +1,76 @@
+import { ClockIcon } from "@phosphor-icons/react";
+import { Typography, Box, TitleBox, FocusItem } from "../../../common";
+import type { HowLongToBeatCategory } from "@types";
+import {
+  GAME_HOW_LONG_TO_BEAT_TITLE_ID,
+  GAME_SCREENSHOT_CAROUSEL_NEXT_BUTTON_ID,
+  GAME_STATS_TITLE_ID,
+} from "../navigation";
+import { FocusOverrides } from "src/big-picture/src/services/navigation.service";
+
+export interface HowLongToBeatBoxProps {
+  howLongToBeat: HowLongToBeatCategory[];
+}
+
+export function HowLongToBeatBox({
+  howLongToBeat,
+}: Readonly<HowLongToBeatBoxProps>) {
+  const howLongToBeatNavigationOverrides: FocusOverrides = {
+    up: {
+      type: "item",
+      itemId: GAME_STATS_TITLE_ID,
+    },
+    right: {
+      type: "block",
+    },
+    left: {
+      type: "item",
+      itemId: GAME_SCREENSHOT_CAROUSEL_NEXT_BUTTON_ID,
+    },
+  };
+
+  return (
+    <div className="game-page__box-group">
+      <FocusItem
+        id={GAME_HOW_LONG_TO_BEAT_TITLE_ID}
+        navigationOverrides={howLongToBeatNavigationOverrides}
+      >
+        <TitleBox title="How Long to Beat" />
+      </FocusItem>
+
+      <ul
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          gap: 8,
+          listStyle: "none",
+        }}
+      >
+        {howLongToBeat?.map((item) => (
+          <li
+            key={item.title}
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              flex: 1,
+              gap: 4,
+            }}
+          >
+            <Box className="game-page__how-long-to-beat-duration">
+              <ClockIcon size={20} />
+              <Typography variant="h3" style={{ textAlign: "center" }}>
+                {item.duration.split(" ")[0]}
+              </Typography>
+            </Box>
+
+            <Box className="game-page__how-long-to-beat-title">
+              <Typography style={{ textAlign: "center" }}>
+                {item.title}
+              </Typography>
+            </Box>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

src/big-picture/src/components/pages/game/index.ts

@@ -0,0 +1,8 @@
+export * from "./hero";
+export * from "./playtime-bar";
+export * from "./screenshot-carousel";
+export * from "./how-long-to-beat";
+export * from "./achievements";
+export * from "./requirements-to-play";
+export * from "./supported-languages";
+export * from "./game-reviews";

src/big-picture/src/components/pages/game/navigation.ts

@@ -0,0 +1,51 @@
+export const GAME_HERO_ACTIONS_REGION_ID = "game-hero-actions";
+export const GAME_HERO_PRIMARY_ACTION_ID = "game-hero-primary-action";
+export const GAME_HERO_TOGGLE_FAVORITE_ID = "game-hero-toggle-favorite";
+export const GAME_SCREENSHOT_CAROUSEL_DOTS_REGION_ID =
+  "game-screenshot-carousel-dots";
+export const GAME_SCREENSHOT_CAROUSEL_PREV_BUTTON_ID =
+  "game-screenshot-carousel-prev-button";
+export const GAME_SCREENSHOT_CAROUSEL_NEXT_BUTTON_ID =
+  "game-screenshot-carousel-next-button";
+export const GAME_STATS_REGION_ID = "game-stats";
+export const GAME_STATS_TITLE_ID = "game-stats-title";
+export const GAME_HOW_LONG_TO_BEAT_TITLE_ID = "game-how-long-to-beat-title";
+export const GAME_ACHIEVEMENTS_TITLE_ID = "game-achievements-title";
+export const GAME_ACHIEVEMENTS_VIEW_ALL_ID = "game-achievements-view-all";
+export const GAME_REQUIREMENTS_TO_PLAY_BUTTONS_REGION_ID =
+  "game-requirements-to-play-buttons";
+export const GAME_REQUIREMENTS_TO_PLAY_MINIMUM_BUTTON_ID =
+  "game-requirements-to-play-minimum-button";
+export const GAME_REQUIREMENTS_TO_PLAY_RECOMMENDED_BUTTON_ID =
+  "game-requirements-to-play-recommended-button";
+export const GAME_SUPPORTED_LANGUAGES_TITLE_ID =
+  "game-supported-languages-title";
+export const GAME_SUPPORTED_LANGUAGES_LAST_ROW_ID =
+  "game-supported-languages-last-row";
+export const GAME_REVIEWS_REGION_ID = "game-reviews";
+export const GAME_REVIEWS_SORT_OPTIONS_REGION_ID = "game-reviews-sort-options";
+export const GAME_REVIEWS_PRIMARY_FILTER_BUTTON_ID =
+  "game-reviews-primary-filter-button";
+export const GAME_REVIEWS_SECONDARY_FILTER_BUTTON_ID =
+  "game-reviews-secondary-filter-button";
+export const GAME_REVIEWS_THIRD_FILTER_BUTTON_ID =
+  "game-reviews-third-filter-button";
+export const GAME_REVIEWS_LOAD_MORE_ID = "game-reviews-load-more";
+
+export function getGameReviewVotesRegionId(reviewId: string) {
+  return `game-review-votes-${reviewId}`;
+}
+
+export function getGameReviewFirstVoteButtonId(reviewId?: string | null) {
+  if (!reviewId) return null;
+
+  return getGameReviewVoteButtonUpvoteId(reviewId);
+}
+
+export function getGameReviewVoteButtonUpvoteId(reviewId: string) {
+  return `game-review-vote-button-upvote-${reviewId}`;
+}
+
+export function getGameReviewVoteButtonDownvoteId(reviewId: string) {
+  return `game-review-vote-button-downvote-${reviewId}`;
+}

src/big-picture/src/components/pages/game/playtime-bar/index.tsx

@@ -0,0 +1,37 @@
+import { Typography } from "../../../common";
+
+import type { LibraryGame } from "@types";
+import { useDate, useFormat } from "../../../../hooks";
+
+export interface PlaytimeBarProps {
+  game: LibraryGame | null;
+}
+
+export function PlaytimeBar({ game }: Readonly<PlaytimeBarProps>) {
+  const { formatDistance } = useDate();
+  const { formatPlayTime } = useFormat();
+
+  const playTimeInSeconds = (game?.playTimeInMilliseconds ?? 0) / 1000;
+
+  return (
+    <div className="game-page__playtime-bar">
+      <div>
+        <Typography>
+          Played for <strong>{formatPlayTime(playTimeInSeconds)}</strong>
+        </Typography>
+        <Typography style={{ color: "rgba(255, 255, 255, 0.5)" }}>
+          {game?.lastTimePlayed ? (
+            <>
+              Last played{" "}
+              {formatDistance(game.lastTimePlayed, new Date(), {
+                addSuffix: true,
+              })}
+            </>
+          ) : (
+            <>You haven&apos;t played {game?.title} yet</>
+          )}
+        </Typography>
+      </div>
+    </div>
+  );
+}

src/big-picture/src/components/pages/game/requirements-to-play/index.tsx

@@ -0,0 +1,103 @@
+import { ShopDetails } from "@types";
+import { useMemo, useState } from "react";
+import { FocusOverrides } from "src/big-picture/src/services/navigation.service";
+import { normalizeRequirementsHtml } from "../../../../helpers";
+import { Box, Button, HorizontalFocusGroup, Typography } from "../../../common";
+import {
+  GAME_ACHIEVEMENTS_VIEW_ALL_ID,
+  GAME_REQUIREMENTS_TO_PLAY_BUTTONS_REGION_ID,
+  GAME_REQUIREMENTS_TO_PLAY_MINIMUM_BUTTON_ID,
+  GAME_REQUIREMENTS_TO_PLAY_RECOMMENDED_BUTTON_ID,
+  GAME_SCREENSHOT_CAROUSEL_NEXT_BUTTON_ID,
+} from "../navigation";
+
+export interface RequirementsToPlayProps {
+  shopDetails: ShopDetails;
+}
+
+export function RequirementsToPlay({
+  shopDetails,
+}: Readonly<RequirementsToPlayProps>) {
+  const [activeRequirement, setActiveRequirement] = useState<
+    "minimum" | "recommended"
+  >("minimum");
+
+  const normalizedHtml = useMemo(() => {
+    const raw =
+      activeRequirement === "minimum"
+        ? shopDetails.pc_requirements.minimum
+        : shopDetails.pc_requirements.recommended;
+
+    return normalizeRequirementsHtml(raw);
+  }, [activeRequirement, shopDetails.pc_requirements]);
+
+  const minimumButtonNavigationOverrides: FocusOverrides = {
+    up: {
+      type: "item",
+      itemId: GAME_ACHIEVEMENTS_VIEW_ALL_ID,
+    },
+    left: {
+      type: "item",
+      itemId: GAME_SCREENSHOT_CAROUSEL_NEXT_BUTTON_ID,
+    },
+    right: {
+      type: "item",
+      itemId: GAME_REQUIREMENTS_TO_PLAY_RECOMMENDED_BUTTON_ID,
+    },
+  };
+
+  const recommendedButtonNavigationOverrides: FocusOverrides = {
+    up: {
+      type: "item",
+      itemId: GAME_ACHIEVEMENTS_VIEW_ALL_ID,
+    },
+    left: {
+      type: "item",
+      itemId: GAME_REQUIREMENTS_TO_PLAY_MINIMUM_BUTTON_ID,
+    },
+    right: {
+      type: "block",
+    },
+  };
+
+  return (
+    <div className="game-page__box-group">
+      <div className="game-page__requirements-to-play-header">
+        <div className="game-page__requirements-to-play-title">
+          <Typography>System Requirements</Typography>
+        </div>
+
+        <HorizontalFocusGroup
+          regionId={GAME_REQUIREMENTS_TO_PLAY_BUTTONS_REGION_ID}
+        >
+          <div className="game-page__requirements-to-play-buttons">
+            <Button
+              focusId={GAME_REQUIREMENTS_TO_PLAY_MINIMUM_BUTTON_ID}
+              focusNavigationOverrides={minimumButtonNavigationOverrides}
+              onClick={() => setActiveRequirement("minimum")}
+              variant={activeRequirement === "minimum" ? "primary" : "rounded"}
+            >
+              Minimum
+            </Button>
+
+            <Button
+              focusId={GAME_REQUIREMENTS_TO_PLAY_RECOMMENDED_BUTTON_ID}
+              focusNavigationOverrides={recommendedButtonNavigationOverrides}
+              onClick={() => setActiveRequirement("recommended")}
+              variant={
+                activeRequirement === "recommended" ? "primary" : "rounded"
+              }
+            >
+              Recommended
+            </Button>
+          </div>
+        </HorizontalFocusGroup>
+      </div>
+
+      <Box
+        dangerouslySetInnerHTML={{ __html: normalizedHtml }}
+        className="game-page__requirements-to-play-content"
+      />
+    </div>
+  );
+}

src/big-picture/src/components/pages/game/screenshot-carousel/index.tsx

@@ -0,0 +1,321 @@
+import { CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
+import type { SteamMovie, SteamScreenshot } from "@types";
+import useEmblaCarousel from "embla-carousel-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { FocusOverrides } from "src/big-picture/src/services/navigation.service";
+import { BIG_PICTURE_SIDEBAR_ITEM_IDS } from "../../../../layout";
+import { useNavigationIsFocused } from "../../../../stores";
+import { FocusItem, HorizontalFocusGroup } from "../../../common";
+import {
+  GAME_HERO_ACTIONS_REGION_ID,
+  GAME_REVIEWS_REGION_ID,
+  GAME_SCREENSHOT_CAROUSEL_DOTS_REGION_ID,
+  GAME_SCREENSHOT_CAROUSEL_NEXT_BUTTON_ID,
+  GAME_SCREENSHOT_CAROUSEL_PREV_BUTTON_ID,
+  GAME_STATS_TITLE_ID,
+} from "../navigation";
+import { VideoPlayer } from "./video-player";
+interface ScreenshotCarouselProps {
+  screenshots: SteamScreenshot[];
+  videos: SteamMovie[];
+}
+
+type MediaItem = {
+  id: string;
+  type: "video" | "image";
+  src?: string;
+  poster?: string;
+  videoSrc?: string;
+  videoType?: string;
+};
+
+export function ScreenshotCarousel({
+  screenshots,
+  videos,
+}: Readonly<ScreenshotCarouselProps>) {
+  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false });
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const carouselContainerRef = useRef<HTMLDivElement | null>(null);
+
+  const videoRefs = useRef<Array<HTMLVideoElement | null>>([]);
+
+  const isPrevFocused = useNavigationIsFocused(
+    GAME_SCREENSHOT_CAROUSEL_PREV_BUTTON_ID
+  );
+  const isNextFocused = useNavigationIsFocused(
+    GAME_SCREENSHOT_CAROUSEL_NEXT_BUTTON_ID
+  );
+
+  useEffect(() => {
+    if ((isPrevFocused || isNextFocused) && carouselContainerRef.current) {
+      carouselContainerRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    }
+  }, [isPrevFocused, isNextFocused]);
+
+  const scrollPrev = () => emblaApi?.scrollPrev();
+  const scrollNext = () => emblaApi?.scrollNext();
+
+  const onSelect = useCallback(() => {
+    if (!emblaApi) return;
+    const index = emblaApi.selectedScrollSnap();
+    setSelectedIndex(index);
+
+    videoRefs.current.forEach((video, idx) => {
+      if (!video) return;
+      if (idx === index) {
+        video.play().catch(() => {});
+      } else {
+        video.pause();
+      }
+    });
+  }, [emblaApi]);
+
+  useEffect(() => {
+    if (!emblaApi) return;
+    emblaApi.on("select", onSelect);
+    onSelect();
+  }, [emblaApi, onSelect]);
+
+  const mediaItems: MediaItem[] = useMemo(() => {
+    const items: MediaItem[] = [];
+
+    videos.forEach((video) => {
+      let videoSrc: string | undefined;
+      let videoType: string | undefined;
+
+      if (video.hls_h264) {
+        videoSrc = video.hls_h264;
+        videoType = "application/x-mpegURL";
+      } else if (video.dash_h264) {
+        videoSrc = video.dash_h264;
+        videoType = "application/dash+xml";
+      } else if (video.dash_av1) {
+        videoSrc = video.dash_av1;
+        videoType = "application/dash+xml";
+      } else if (video.mp4?.max) {
+        videoSrc = video.mp4.max;
+        videoType = "video/mp4";
+      } else if (video.webm?.max) {
+        videoSrc = video.webm.max;
+        videoType = "video/webm";
+      }
+
+      if (videoSrc) {
+        items.push({
+          id: `video-${video.id}`,
+          type: "video",
+          poster: video.thumbnail,
+          videoSrc: videoSrc.startsWith("http://")
+            ? videoSrc.replace("http://", "https://")
+            : videoSrc,
+          videoType,
+        });
+      }
+    });
+
+    screenshots.forEach((image) => {
+      items.push({
+        id: `screenshot-${image.id}`,
+        type: "image",
+        src: image.path_full,
+      });
+    });
+
+    return items;
+  }, [videos, screenshots]);
+
+  const isVisible = (index: number) => Math.abs(index - selectedIndex) <= 1;
+
+  const renderSlideContent = (item: MediaItem, idx: number) => {
+    if (!isVisible(idx)) {
+      return (
+        <div
+          style={{
+            width: "100%",
+            aspectRatio: "16 / 9",
+            backgroundColor: "#111",
+            borderRadius: 8,
+          }}
+        />
+      );
+    }
+
+    if (item.type === "video") {
+      return (
+        <VideoPlayer
+          videoSrc={item.videoSrc}
+          videoType={item.videoType}
+          poster={item.poster}
+          muted
+          loop
+          controls
+          style={{
+            width: "100%",
+            borderRadius: 8,
+            objectFit: "cover",
+            aspectRatio: "16 / 9",
+          }}
+          videoRef={(el) => {
+            videoRefs.current[idx] = el;
+          }}
+        />
+      );
+    }
+
+    return (
+      <img
+        src={item.src}
+        alt={`Screenshot ${idx + 1}`}
+        loading="lazy"
+        style={{
+          width: "100%",
+          borderRadius: 8,
+          objectFit: "cover",
+          aspectRatio: "16 / 9",
+        }}
+      />
+    );
+  };
+
+  const prevButtonNavigationOverrides: FocusOverrides = {
+    left: {
+      type: "item",
+      itemId: BIG_PICTURE_SIDEBAR_ITEM_IDS.home,
+    },
+    up: {
+      type: "region",
+      regionId: GAME_HERO_ACTIONS_REGION_ID,
+    },
+    down: {
+      type: "region",
+      regionId: GAME_REVIEWS_REGION_ID,
+    },
+    right: {
+      type: "item",
+      itemId: GAME_SCREENSHOT_CAROUSEL_NEXT_BUTTON_ID,
+    },
+  };
+
+  const nextButtonNavigationOverrides: FocusOverrides = {
+    left: {
+      type: "item",
+      itemId: GAME_SCREENSHOT_CAROUSEL_PREV_BUTTON_ID,
+    },
+    right: {
+      type: "item",
+      itemId: GAME_STATS_TITLE_ID,
+    },
+    up: {
+      type: "region",
+      regionId: GAME_HERO_ACTIONS_REGION_ID,
+    },
+    down: {
+      type: "region",
+      regionId: GAME_REVIEWS_REGION_ID,
+    },
+  };
+
+  return (
+    <div
+      ref={carouselContainerRef}
+      style={{ overflow: "hidden", width: "100%", marginBottom: 32 }}
+    >
+      <div className="embla" ref={emblaRef} style={{ overflow: "hidden" }}>
+        <div
+          className="embla__container"
+          style={{
+            display: "flex",
+            gap: 16,
+          }}
+        >
+          {mediaItems.map((item, idx) => (
+            <div
+              key={item.id}
+              className="embla__slide"
+              style={{ flex: "0 0 80%", maxWidth: "80%" }}
+            >
+              {renderSlideContent(item, idx)}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <HorizontalFocusGroup
+        regionId={GAME_SCREENSHOT_CAROUSEL_DOTS_REGION_ID}
+        asChild
+      >
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            gap: 16,
+            marginTop: 8,
+          }}
+        >
+          <FocusItem
+            id={GAME_SCREENSHOT_CAROUSEL_PREV_BUTTON_ID}
+            navigationOverrides={prevButtonNavigationOverrides}
+            asChild
+          >
+            <button
+              onClick={scrollPrev}
+              style={{
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                padding: 4,
+              }}
+              aria-label="Previous slide"
+            >
+              <CaretLeftIcon size={24} color="#fff" />
+            </button>
+          </FocusItem>
+
+          <div style={{ display: "flex", gap: 8 }}>
+            {mediaItems.map((item, i) => (
+              <button
+                key={`dot-${item.id}`}
+                onClick={() => emblaApi?.scrollTo(i)}
+                aria-label={`Go to slide ${i + 1}`}
+                style={{
+                  display: "inline-block",
+                  width: i === selectedIndex ? 24 : 10,
+                  height: 10,
+                  borderRadius: 9999,
+                  backgroundColor: i === selectedIndex ? "#fff" : "#555",
+                  transition: "all 0.3s ease",
+                  cursor: "pointer",
+                  border: "none",
+                  padding: 0,
+                }}
+              />
+            ))}
+          </div>
+
+          <FocusItem
+            id={GAME_SCREENSHOT_CAROUSEL_NEXT_BUTTON_ID}
+            navigationOverrides={nextButtonNavigationOverrides}
+            asChild
+          >
+            <button
+              onClick={scrollNext}
+              style={{
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                padding: 4,
+              }}
+              aria-label="Next slide"
+            >
+              <CaretRightIcon size={24} color="#fff" />
+            </button>
+          </FocusItem>
+        </div>
+      </HorizontalFocusGroup>
+    </div>
+  );
+}

src/big-picture/src/components/pages/game/screenshot-carousel/video-player.tsx

@@ -0,0 +1,76 @@
+import { useHlsVideo } from "@shared";
+import { useRef } from "react";
+
+interface VideoPlayerProps {
+  videoSrc?: string;
+  videoType?: string;
+  poster?: string;
+  autoplay?: boolean;
+  muted?: boolean;
+  loop?: boolean;
+  controls?: boolean;
+  style?: React.CSSProperties;
+  videoRef?: (el: HTMLVideoElement | null) => void;
+}
+
+export function VideoPlayer({
+  videoSrc,
+  videoType,
+  poster,
+  autoplay = false,
+  muted = true,
+  loop = false,
+  controls = true,
+  style,
+  videoRef,
+}: Readonly<VideoPlayerProps>) {
+  const internalRef = useRef<HTMLVideoElement>(null);
+  const isHls = videoType === "application/x-mpegURL";
+
+  useHlsVideo(internalRef, {
+    videoSrc,
+    videoType,
+    autoplay,
+    muted,
+    loop,
+  });
+
+  const setRef = (el: HTMLVideoElement | null) => {
+    (internalRef as React.MutableRefObject<HTMLVideoElement | null>).current =
+      el;
+    videoRef?.(el);
+  };
+
+  if (isHls) {
+    return (
+      <video
+        ref={setRef}
+        controls={controls}
+        poster={poster}
+        loop={loop}
+        muted={muted}
+        autoPlay={autoplay}
+        playsInline
+        style={style}
+      >
+        <track kind="captions" />
+      </video>
+    );
+  }
+
+  return (
+    <video
+      ref={setRef}
+      controls={controls}
+      poster={poster}
+      loop={loop}
+      muted={muted}
+      autoPlay={autoplay}
+      playsInline
+      style={style}
+    >
+      {videoSrc && <source src={videoSrc} type={videoType} />}
+      <track kind="captions" />
+    </video>
+  );
+}

src/big-picture/src/components/pages/game/supported-languages/index.tsx

@@ -0,0 +1,144 @@
+import { CheckIcon, XIcon } from "@phosphor-icons/react";
+import { ShopDetails } from "@types";
+import { useMemo } from "react";
+import { FocusOverrides } from "src/big-picture/src/services/navigation.service";
+import { Box, FocusItem, Typography } from "../../../common";
+import {
+  GAME_REQUIREMENTS_TO_PLAY_MINIMUM_BUTTON_ID,
+  GAME_REVIEWS_PRIMARY_FILTER_BUTTON_ID,
+  GAME_REVIEWS_THIRD_FILTER_BUTTON_ID,
+  GAME_SUPPORTED_LANGUAGES_LAST_ROW_ID,
+  GAME_SUPPORTED_LANGUAGES_TITLE_ID,
+} from "../navigation";
+
+export interface SupportedLanguagesProps {
+  shopDetails: ShopDetails;
+}
+
+export function SupportedLanguages({
+  shopDetails,
+}: Readonly<SupportedLanguagesProps>) {
+  const languages = useMemo(() => {
+    const supportedLanguages = shopDetails.supported_languages;
+    if (!supportedLanguages) return [];
+
+    const languagesString = supportedLanguages.split("<br>")[0];
+    const languageArray = languagesString?.split(",") || [];
+
+    return languageArray.map((lang) => ({
+      language: lang.replace("<strong>*</strong>", "").trim(),
+      hasAudio: lang.includes("*"),
+    }));
+  }, [shopDetails.supported_languages]);
+
+  if (languages.length === 0) {
+    return null;
+  }
+
+  const supportedLanguagesNavigationOverrides: FocusOverrides = {
+    up: {
+      type: "item",
+      itemId: GAME_REQUIREMENTS_TO_PLAY_MINIMUM_BUTTON_ID,
+    },
+    down: {
+      type: "item",
+      itemId: GAME_SUPPORTED_LANGUAGES_LAST_ROW_ID,
+    },
+    left: {
+      type: "item",
+      itemId: GAME_REVIEWS_PRIMARY_FILTER_BUTTON_ID,
+    },
+    right: {
+      type: "block",
+    },
+  };
+
+  const lastRowNavigationOverrides: FocusOverrides = {
+    up: {
+      type: "item",
+      itemId: GAME_SUPPORTED_LANGUAGES_TITLE_ID,
+    },
+    left: {
+      type: "item",
+      itemId: GAME_REVIEWS_THIRD_FILTER_BUTTON_ID,
+    },
+    right: {
+      type: "block",
+    },
+    down: {
+      type: "item",
+      itemId: GAME_REVIEWS_PRIMARY_FILTER_BUTTON_ID,
+    },
+  };
+
+  const renderRow = (
+    lang: { language: string; hasAudio: boolean },
+    index: number
+  ) => {
+    const row = (
+      <div key={lang.language} className="game-page__languages-row">
+        <Typography className="game-page__languages-cell game-page__languages-cell--language">
+          {lang.language}
+        </Typography>
+        <div className="game-page__languages-cell game-page__languages-cell--center">
+          <CheckIcon size={14} weight="bold" />
+        </div>
+        <div className="game-page__languages-cell game-page__languages-cell--center">
+          {lang.hasAudio ? (
+            <CheckIcon size={14} weight="bold" />
+          ) : (
+            <XIcon
+              size={14}
+              weight="bold"
+              className="game-page__languages-cross"
+            />
+          )}
+        </div>
+      </div>
+    );
+
+    if (index === languages.length - 1) {
+      return (
+        <FocusItem
+          key={lang.language}
+          id={GAME_SUPPORTED_LANGUAGES_LAST_ROW_ID}
+          navigationOverrides={lastRowNavigationOverrides}
+          asChild
+        >
+          {row}
+        </FocusItem>
+      );
+    }
+
+    return row;
+  };
+
+  return (
+    <div className="game-page__box-group">
+      <FocusItem
+        id={GAME_SUPPORTED_LANGUAGES_TITLE_ID}
+        navigationOverrides={supportedLanguagesNavigationOverrides}
+        asChild
+      >
+        <div className="game-page__languages-title">
+          <Typography>Languages</Typography>
+
+          <div className="game-page__languages-labels">
+            <Typography className="game-page__languages-label">
+              Caption
+            </Typography>
+            <Typography className="game-page__languages-label">
+              Audio
+            </Typography>
+          </div>
+        </div>
+      </FocusItem>
+
+      <Box className="game-page__languages">
+        <div className="game-page__languages-content">
+          {languages.map((lang, index) => renderRow(lang, index))}
+        </div>
+      </Box>
+    </div>
+  );
+}

src/big-picture/src/components/pages/index.ts

@@ -0,0 +1 @@
+export * from "./library";

src/big-picture/src/components/pages/library/filters/filters.scss

@@ -0,0 +1,29 @@
+.library-filters {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing-unit) * 4);
+  padding: 0 calc(var(--spacing-unit) * 16);
+
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(var(--spacing-unit) * 4);
+  }
+
+  &__search {
+    flex: 1;
+    max-width: 600px;
+  }
+
+  &__view-actions {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing-unit) * 2);
+  }
+
+  &__tabs {
+    flex-shrink: 0;
+    padding: calc(var(--spacing-unit) * 6) 0 calc(var(--spacing-unit) * 4) 0;
+  }
+}

src/big-picture/src/components/pages/library/filters/filters.tsx

@@ -0,0 +1,226 @@
+import "./filters.scss";
+import { Button, HorizontalFocusGroup, Input, Tabs } from "../../../common";
+import {
+  ListDashesIcon,
+  MagnifyingGlassIcon,
+  SquaresFourIcon,
+} from "@phosphor-icons/react";
+import type { FocusOverrides } from "../../../../services";
+import { BIG_PICTURE_SIDEBAR_ITEM_IDS } from "../../../../layout";
+import {
+  LIBRARY_FILTERS_ALL_TAB_ID,
+  LIBRARY_FILTERS_COMPLETED_TAB_ID,
+  LIBRARY_FILTERS_FAVORITES_TAB_ID,
+  LIBRARY_FILTERS_GRID_VIEW_BUTTON_ID,
+  LIBRARY_FILTERS_LIST_VIEW_BUTTON_ID,
+  LIBRARY_FILTERS_SEARCH_INPUT_ID,
+  LIBRARY_FILTERS_TABS_REGION_ID,
+  LIBRARY_FILTERS_TOOLBAR_REGION_ID,
+  LIBRARY_HERO_ACTIONS_REGION_ID,
+} from "../navigation";
+import type { LibraryFilterCounts, LibraryFilterTab } from "../library-data";
+import type { TabsItem } from "../../../common";
+
+export interface LibraryFiltersProps {
+  selectedTab: LibraryFilterTab;
+  onSelectedTabChange: (tab: LibraryFilterTab) => void;
+  search: string;
+  onSearchChange: (search: string) => void;
+  counts: LibraryFilterCounts;
+  firstGridItemId?: string | null;
+}
+
+export function LibraryFilters({
+  selectedTab,
+  onSelectedTabChange,
+  search,
+  onSearchChange,
+  counts,
+  firstGridItemId = null,
+}: Readonly<LibraryFiltersProps>) {
+  const tabDownOverride = firstGridItemId
+    ? ({
+        type: "item",
+        itemId: firstGridItemId,
+      } as const)
+    : ({
+        type: "block",
+      } as const);
+  const tabUpOverride = {
+    type: "region",
+    regionId: LIBRARY_FILTERS_TOOLBAR_REGION_ID,
+    entryDirection: "up",
+  } as const;
+  const sidebarLibraryOverride = {
+    type: "item",
+    itemId: BIG_PICTURE_SIDEBAR_ITEM_IDS.library,
+  } as const;
+  const tabs = [
+    {
+      id: LIBRARY_FILTERS_ALL_TAB_ID,
+      value: "all",
+      label: `All (${counts.all})`,
+      navigationOverrides: {
+        left: sidebarLibraryOverride,
+        right: {
+          type: "item",
+          itemId: LIBRARY_FILTERS_FAVORITES_TAB_ID,
+        },
+        up: tabUpOverride,
+        down: tabDownOverride,
+      },
+    },
+    {
+      id: LIBRARY_FILTERS_FAVORITES_TAB_ID,
+      value: "favorites",
+      label: `Favorites (${counts.favorites})`,
+      navigationOverrides: {
+        left: {
+          type: "item",
+          itemId: LIBRARY_FILTERS_ALL_TAB_ID,
+        },
+        right: {
+          type: "item",
+          itemId: LIBRARY_FILTERS_COMPLETED_TAB_ID,
+        },
+        up: tabUpOverride,
+        down: tabDownOverride,
+      },
+    },
+    {
+      id: LIBRARY_FILTERS_COMPLETED_TAB_ID,
+      value: "completed",
+      label: `Completed (${counts.completed})`,
+      navigationOverrides: {
+        left: {
+          type: "item",
+          itemId: LIBRARY_FILTERS_FAVORITES_TAB_ID,
+        },
+        right: { type: "block" },
+        up: tabUpOverride,
+        down: tabDownOverride,
+      },
+    },
+  ] satisfies Array<TabsItem<LibraryFilterTab>>;
+  const toolbarNavigationOverrides: FocusOverrides = {
+    up: {
+      type: "region",
+      regionId: LIBRARY_HERO_ACTIONS_REGION_ID,
+      entryDirection: "up",
+    },
+    down: {
+      type: "item",
+      itemId: LIBRARY_FILTERS_ALL_TAB_ID,
+    },
+  };
+  const toolbarUpOverride = {
+    type: "region",
+    regionId: LIBRARY_HERO_ACTIONS_REGION_ID,
+    entryDirection: "up",
+  } as const;
+  const toolbarDownOverride = {
+    type: "item",
+    itemId: LIBRARY_FILTERS_ALL_TAB_ID,
+  } as const;
+  const searchNavigationOverrides: FocusOverrides = {
+    left: sidebarLibraryOverride,
+    right: {
+      type: "item",
+      itemId: LIBRARY_FILTERS_LIST_VIEW_BUTTON_ID,
+    },
+    up: toolbarUpOverride,
+    down: toolbarDownOverride,
+  };
+  const listViewNavigationOverrides: FocusOverrides = {
+    left: {
+      type: "item",
+      itemId: LIBRARY_FILTERS_SEARCH_INPUT_ID,
+    },
+    right: {
+      type: "item",
+      itemId: LIBRARY_FILTERS_GRID_VIEW_BUTTON_ID,
+    },
+    up: toolbarUpOverride,
+    down: toolbarDownOverride,
+  };
+  const gridViewNavigationOverrides: FocusOverrides = {
+    left: {
+      type: "item",
+      itemId: LIBRARY_FILTERS_LIST_VIEW_BUTTON_ID,
+    },
+    right: {
+      type: "block",
+    },
+    up: toolbarUpOverride,
+    down: toolbarDownOverride,
+  };
+  const tabsNavigationOverrides: FocusOverrides = {
+    up: tabUpOverride,
+    down: tabDownOverride,
+  };
+
+  return (
+    <div className="library-filters">
+      <div className="library-filters__header">
+        <h2 className="library-filters__title">Your Library</h2>
+      </div>
+
+      <HorizontalFocusGroup
+        className="library-filters__toolbar"
+        regionId={LIBRARY_FILTERS_TOOLBAR_REGION_ID}
+        navigationOverrides={toolbarNavigationOverrides}
+      >
+        <div className="library-filters__search">
+          <Input
+            focusId={LIBRARY_FILTERS_SEARCH_INPUT_ID}
+            focusNavigationOverrides={searchNavigationOverrides}
+            type="text"
+            placeholder="Search library"
+            iconLeft={<MagnifyingGlassIcon size={24} />}
+            value={search}
+            onChange={(e) => onSearchChange(e.target.value)}
+          />
+        </div>
+
+        <div className="library-filters__view-actions">
+          <Button
+            focusId={LIBRARY_FILTERS_LIST_VIEW_BUTTON_ID}
+            focusNavigationOverrides={listViewNavigationOverrides}
+            className="library-filters__view-button library-filters__view-button--list"
+            variant="secondary"
+            size="icon"
+          >
+            <ListDashesIcon
+              className="library-filters__view-icon library-filters__view-icon--list"
+              size={24}
+            />
+          </Button>
+
+          <Button
+            focusId={LIBRARY_FILTERS_GRID_VIEW_BUTTON_ID}
+            focusNavigationOverrides={gridViewNavigationOverrides}
+            className="library-filters__view-button library-filters__view-button--grid"
+            variant="secondary"
+            size="icon"
+          >
+            <SquaresFourIcon
+              className="library-filters__view-icon library-filters__view-icon--grid"
+              size={24}
+            />
+          </Button>
+        </div>
+      </HorizontalFocusGroup>
+
+      <div className="library-filters__tabs">
+        <Tabs
+          items={tabs}
+          value={selectedTab}
+          onValueChange={onSelectedTabChange}
+          regionId={LIBRARY_FILTERS_TABS_REGION_ID}
+          navigationOverrides={tabsNavigationOverrides}
+          ariaLabel="Library filters"
+        />
+      </div>
+    </div>
+  );
+}

src/big-picture/src/components/pages/library/game-card.tsx

@@ -0,0 +1,84 @@
+import type { LibraryGame } from "@types";
+import { DotsThreeVerticalIcon } from "@phosphor-icons/react";
+import { FocusItem, VerticalGameCard } from "../../common";
+import {
+  formatPlayedTime,
+  getBigPictureGameDetailsPath,
+  getGameAchievementProgress,
+  getGameImageSources,
+} from "../../../helpers";
+import type { FocusOverrides } from "../../../services";
+import { useDominantColor } from "../../../hooks";
+import { useEffect, useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { getLibraryFocusGridItemId } from "./navigation";
+
+export interface VerticalLibraryGameCardProps {
+  game: LibraryGame;
+  navigationOverrides?: FocusOverrides;
+}
+
+export function VerticalLibraryGameCard({
+  game,
+  navigationOverrides,
+}: Readonly<VerticalLibraryGameCardProps>) {
+  const navigate = useNavigate();
+  const imageSources = useMemo(() => getGameImageSources(game), [game]);
+  const [imageSourceIndex, setImageSourceIndex] = useState(0);
+  const [imageExhausted, setImageExhausted] = useState(false);
+
+  useEffect(() => {
+    setImageSourceIndex(0);
+    setImageExhausted(false);
+  }, [game.id, imageSources]);
+
+  const activeImageSource = imageExhausted
+    ? null
+    : (imageSources[imageSourceIndex] ?? null);
+
+  const dominantColor = useDominantColor(activeImageSource);
+  const achievementProgress = getGameAchievementProgress(game);
+  const gameDetailsPath = getBigPictureGameDetailsPath(game);
+
+  const handleCoverImageError = () => {
+    if (imageSourceIndex < imageSources.length - 1) {
+      setImageSourceIndex((currentIndex) => currentIndex + 1);
+      return;
+    }
+
+    setImageExhausted(true);
+  };
+
+  return (
+    <FocusItem
+      id={getLibraryFocusGridItemId(game.id)}
+      actions={{
+        primary: () => navigate(gameDetailsPath),
+        secondary: "off",
+      }}
+      navigationOverrides={navigationOverrides}
+    >
+      <VerticalGameCard
+        className="library-focus-grid__card"
+        coverImageUrl={activeImageSource}
+        gameTitle={game.title}
+        subtitle={formatPlayedTime(game.playTimeInMilliseconds, {
+          zeroFallback: "Never played",
+        })}
+        progressLabel={achievementProgress.label}
+        progressValue={achievementProgress.value}
+        progressColor={dominantColor ?? undefined}
+        onClick={() => navigate(gameDetailsPath)}
+        action={
+          <div
+            className="vertical-library-game-card__action-button button button--secondary button--icon"
+            aria-hidden="true"
+          >
+            <DotsThreeVerticalIcon size={24} />
+          </div>
+        }
+        onCoverImageError={handleCoverImageError}
+      />
+    </FocusItem>
+  );
+}

src/big-picture/src/components/pages/library/grid-navigation.ts

@@ -0,0 +1,211 @@
+import type { LibraryGame } from "@types";
+import type { FocusOverrides } from "../../../services";
+import { useEffect, useMemo, useState } from "react";
+import {
+  getLibraryFocusGridItemId,
+  LIBRARY_FILTERS_TABS_REGION_ID,
+  LIBRARY_FOCUS_GRID_REGION_ID,
+} from "./navigation";
+
+interface GridItemPosition {
+  id: string;
+  top: number;
+  left: number;
+  centerX: number;
+}
+
+const ROW_TOLERANCE_PX = 24;
+
+function groupItemsIntoRows(items: GridItemPosition[]) {
+  const sortedItems = [...items].sort((a, b) => {
+    if (Math.abs(a.top - b.top) > ROW_TOLERANCE_PX) {
+      return a.top - b.top;
+    }
+
+    return a.left - b.left;
+  });
+
+  return sortedItems.reduce<GridItemPosition[][]>((rows, item) => {
+    const lastRow = rows.at(-1);
+
+    if (!lastRow || Math.abs(lastRow[0].top - item.top) > ROW_TOLERANCE_PX) {
+      rows.push([item]);
+      return rows;
+    }
+
+    lastRow.push(item);
+    lastRow.sort((leftItem, rightItem) => leftItem.left - rightItem.left);
+    return rows;
+  }, []);
+}
+
+function getClosestItemByCenterX(
+  items: GridItemPosition[] | undefined,
+  centerX: number
+) {
+  if (!items?.length) return null;
+
+  return [...items].sort((leftItem, rightItem) => {
+    return (
+      Math.abs(leftItem.centerX - centerX) -
+      Math.abs(rightItem.centerX - centerX)
+    );
+  })[0];
+}
+
+function buildFocusOverridesForGridItem(
+  item: GridItemPosition,
+  row: GridItemPosition[],
+  itemIndex: number,
+  rowIndex: number,
+  rows: GridItemPosition[][]
+): FocusOverrides {
+  const leftItem = row[itemIndex - 1];
+  const rightItem = row[itemIndex + 1];
+  const upItem = getClosestItemByCenterX(rows[rowIndex - 1], item.centerX);
+  const downItem = getClosestItemByCenterX(rows[rowIndex + 1], item.centerX);
+
+  return {
+    ...(leftItem
+      ? {
+          left: {
+            type: "item",
+            itemId: leftItem.id,
+          },
+        }
+      : {}),
+    ...(rightItem
+      ? {
+          right: {
+            type: "item",
+            itemId: rightItem.id,
+          },
+        }
+      : {
+          right: {
+            type: "block",
+          },
+        }),
+    ...(upItem
+      ? {
+          up: {
+            type: "item",
+            itemId: upItem.id,
+          },
+        }
+      : {
+          up: {
+            type: "region",
+            regionId: LIBRARY_FILTERS_TABS_REGION_ID,
+            entryDirection: "down",
+          },
+        }),
+    ...(downItem
+      ? {
+          down: {
+            type: "item",
+            itemId: downItem.id,
+          },
+        }
+      : {
+          down: {
+            type: "block",
+          },
+        }),
+  };
+}
+
+function buildOverridesMapFromRows(rows: GridItemPosition[][]) {
+  const nextOverridesByItemId: Record<string, FocusOverrides> = {};
+
+  for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+    const row = rows[rowIndex];
+
+    for (let itemIndex = 0; itemIndex < row.length; itemIndex++) {
+      const item = row[itemIndex];
+      nextOverridesByItemId[item.id] = buildFocusOverridesForGridItem(
+        item,
+        row,
+        itemIndex,
+        rowIndex,
+        rows
+      );
+    }
+  }
+
+  return nextOverridesByItemId;
+}
+
+export function useLibraryGridNavigation(games: LibraryGame[]) {
+  const [overridesByItemId, setOverridesByItemId] = useState<
+    Record<string, FocusOverrides>
+  >({});
+
+  const itemIds = useMemo(() => {
+    return games.map((game) => getLibraryFocusGridItemId(game.id));
+  }, [games]);
+
+  useEffect(() => {
+    if (itemIds.length === 0) {
+      setOverridesByItemId({});
+      return;
+    }
+
+    let animationFrameId = 0;
+    let resizeObserver: ResizeObserver | null = null;
+
+    const computeOverrides = () => {
+      const items = itemIds
+        .map((id) => {
+          const element = globalThis.document.getElementById(id);
+          const rect = element?.getBoundingClientRect();
+
+          if (!element || !rect) return null;
+
+          return {
+            id,
+            top: rect.top,
+            left: rect.left,
+            centerX: rect.left + rect.width / 2,
+          };
+        })
+        .filter((item): item is GridItemPosition => item !== null);
+
+      const rows = groupItemsIntoRows(items);
+      setOverridesByItemId(buildOverridesMapFromRows(rows));
+    };
+
+    const scheduleCompute = () => {
+      globalThis.cancelAnimationFrame(animationFrameId);
+      animationFrameId = globalThis.requestAnimationFrame(computeOverrides);
+    };
+
+    scheduleCompute();
+    globalThis.addEventListener("resize", scheduleCompute);
+
+    const gridElement = globalThis.document.querySelector(
+      `[data-focus-region-id="${LIBRARY_FOCUS_GRID_REGION_ID}"]`
+    );
+
+    if (gridElement instanceof HTMLElement) {
+      resizeObserver = new ResizeObserver(scheduleCompute);
+      resizeObserver.observe(gridElement);
+
+      itemIds.forEach((id) => {
+        const itemElement = globalThis.document.getElementById(id);
+
+        if (!itemElement) return;
+
+        resizeObserver?.observe(itemElement);
+      });
+    }
+
+    return () => {
+      globalThis.cancelAnimationFrame(animationFrameId);
+      globalThis.removeEventListener("resize", scheduleCompute);
+      resizeObserver?.disconnect();
+    };
+  }, [itemIds]);
+
+  return overridesByItemId;
+}

src/big-picture/src/components/pages/library/grid/focus-grid.scss

@@ -0,0 +1,37 @@
+.library-focus-grid {
+  width: 100%;
+  padding: 0 calc(var(--spacing-unit) * 16);
+}
+
+.library-focus-grid__grid {
+  display: grid;
+  grid-template-columns: repeat(
+    var(--library-focus-grid-column-count, 1),
+    var(--library-focus-grid-card-width, 350px)
+  );
+  column-gap: var(
+    --library-focus-grid-column-gap,
+    calc(var(--spacing-unit) * 8)
+  );
+  row-gap: calc(var(--spacing-unit) * 16);
+  justify-content: start;
+}
+
+.vertical-library-game-card__action-button {
+  pointer-events: none;
+}
+
+@media (max-width: 720px) {
+  .library-focus-grid {
+    padding: 0 calc(var(--spacing-unit) * 6);
+  }
+
+  .library-focus-grid__grid {
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(var(--library-focus-grid-card-width, 350px), 1fr)
+    );
+    column-gap: calc(var(--spacing-unit) * 4);
+    justify-content: initial;
+  }
+}

src/big-picture/src/components/pages/library/grid/focus-grid.tsx

@@ -0,0 +1,42 @@
+import type { LibraryGame } from "@types";
+import { GridFocusGroup } from "../../../common";
+import {
+  getLibraryFocusGridItemId,
+  LIBRARY_FOCUS_GRID_REGION_ID,
+} from "../navigation";
+import { useLibraryGridNavigation } from "../grid-navigation";
+import { useLibraryGridLayout } from "./use-library-grid-layout";
+import { VerticalLibraryGameCard } from "../game-card";
+
+import "./focus-grid.scss";
+
+export interface LibraryFocusGridProps {
+  games: LibraryGame[];
+}
+
+export function LibraryFocusGrid({ games }: Readonly<LibraryFocusGridProps>) {
+  const navigationOverridesByItemId = useLibraryGridNavigation(games);
+  const style = useLibraryGridLayout(games.length);
+
+  if (games.length === 0) return null;
+
+  return (
+    <section className="library-focus-grid">
+      <GridFocusGroup
+        className="library-focus-grid__grid"
+        regionId={LIBRARY_FOCUS_GRID_REGION_ID}
+        style={style}
+      >
+        {games.map((game) => (
+          <VerticalLibraryGameCard
+            key={game.id}
+            game={game}
+            navigationOverrides={
+              navigationOverridesByItemId[getLibraryFocusGridItemId(game.id)]
+            }
+          />
+        ))}
+      </GridFocusGroup>
+    </section>
+  );
+}

src/big-picture/src/components/pages/library/grid/use-library-grid-layout.ts

@@ -0,0 +1,82 @@
+import { type CSSProperties, useEffect, useMemo, useState } from "react";
+import { LIBRARY_FOCUS_GRID_REGION_ID } from "../navigation";
+
+const GRID_CARD_WIDTH = 350;
+const GRID_MIN_COLUMN_GAP = 32;
+const GRID_MOBILE_BREAKPOINT = 720;
+
+interface LibraryGridLayout {
+  columnCount: number;
+  columnGap: number;
+}
+
+function getLayoutForWidth(width: number): LibraryGridLayout {
+  if (width <= 0) {
+    return {
+      columnCount: 1,
+      columnGap: GRID_MIN_COLUMN_GAP,
+    };
+  }
+
+  const columnCount = Math.max(
+    1,
+    Math.floor(
+      (width + GRID_MIN_COLUMN_GAP) / (GRID_CARD_WIDTH + GRID_MIN_COLUMN_GAP)
+    )
+  );
+
+  return {
+    columnCount,
+    columnGap:
+      columnCount > 1
+        ? Math.max(
+            GRID_MIN_COLUMN_GAP,
+            (width - columnCount * GRID_CARD_WIDTH) / (columnCount - 1)
+          )
+        : GRID_MIN_COLUMN_GAP,
+  };
+}
+
+export function useLibraryGridLayout(itemCount: number) {
+  const [layout, setLayout] = useState(() => getLayoutForWidth(0));
+
+  useEffect(() => {
+    if (itemCount === 0) return;
+
+    const gridElement = globalThis.document.querySelector(
+      `[data-focus-region-id="${LIBRARY_FOCUS_GRID_REGION_ID}"]`
+    );
+
+    if (!(gridElement instanceof HTMLElement)) return;
+
+    const updateLayout = () => {
+      if (globalThis.innerWidth <= GRID_MOBILE_BREAKPOINT) {
+        setLayout(getLayoutForWidth(0));
+        return;
+      }
+
+      setLayout(getLayoutForWidth(gridElement.getBoundingClientRect().width));
+    };
+
+    updateLayout();
+
+    const resizeObserver = new ResizeObserver(updateLayout);
+    resizeObserver.observe(gridElement);
+    globalThis.addEventListener("resize", updateLayout);
+
+    return () => {
+      resizeObserver.disconnect();
+      globalThis.removeEventListener("resize", updateLayout);
+    };
+  }, [itemCount]);
+
+  return useMemo(
+    () =>
+      ({
+        "--library-focus-grid-card-width": `${GRID_CARD_WIDTH}px`,
+        "--library-focus-grid-column-count": `${layout.columnCount}`,
+        "--library-focus-grid-column-gap": `${layout.columnGap}px`,
+      }) as CSSProperties,
+    [layout]
+  );
+}

src/big-picture/src/components/pages/library/hero/hero.scss

@@ -0,0 +1,246 @@
+.hero {
+  position: relative;
+  width: 100%;
+  height: 600px;
+  overflow: hidden;
+  border: none;
+  background: var(--background);
+  box-shadow: 0px 0px 0px 0px transparent;
+}
+
+.hero__bg-layer {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  transition: opacity 0.3s cubic-bezier(0.33, 1, 0.68, 1);
+  pointer-events: none;
+}
+
+.hero__bg-layer--base {
+  opacity: 1;
+}
+
+.hero__bg-layer--incoming {
+  z-index: 1;
+  opacity: 0;
+}
+
+.hero__bg-layer--visible {
+  opacity: 1;
+}
+
+.hero__bg {
+  width: 100%;
+  height: 100%;
+}
+
+.hero__overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  pointer-events: none;
+  background:
+    linear-gradient(
+      90deg,
+      var(--background) 0%,
+      transparent 25% 75%,
+      var(--background) 99.53%
+    ),
+    linear-gradient(transparent 0%, var(--background) 97%);
+}
+
+.hero__content {
+  position: absolute;
+  inset: auto 0 0;
+  z-index: 3;
+  display: flex;
+  align-items: flex-end;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: calc(var(--spacing-unit) * 12);
+  padding: 0 calc(var(--spacing-unit) * 16) calc(var(--spacing-unit) * 16);
+}
+
+.hero__content__left {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing-unit) * 6);
+  max-width: 337px;
+  min-width: 0;
+}
+
+.hero__logo {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 337px;
+  height: 210px;
+}
+
+.hero__logo__image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: left center;
+}
+
+.hero__logo__fallback {
+  max-width: 100%;
+  font-size: 48px;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--primary);
+}
+
+.hero__copy {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  color: var(--primary);
+  gap: calc(var(--spacing-unit) * 1);
+}
+
+.hero__eyebrow {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--text);
+}
+
+.hero__description {
+  margin-top: var(--spacing-unit);
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1;
+  color: var(--text-secondary);
+}
+
+.hero__actions {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing-unit) * 4);
+}
+
+.hero__action__divider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 1px;
+  width: 1px;
+  height: 28px;
+  pointer-events: none;
+}
+
+.hero__action__divider .divider-container--vertical {
+  width: 1px;
+  height: 28px;
+  flex-basis: 1px;
+}
+
+.hero__action__divider .divider--vertical {
+  width: 1px;
+  height: 28px;
+  min-height: 28px;
+  background-color: var(--text-secondary);
+  opacity: 0.7;
+}
+
+.hero__stats {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--spacing-unit);
+  width: min(100%, 336px);
+  flex-shrink: 0;
+}
+
+.hero__stat {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  gap: var(--spacing-unit);
+}
+
+.hero__stat__value {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-unit);
+  height: 91px;
+  background: var(--surface);
+  color: var(--text);
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.hero__stat__label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 37px;
+  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
+  background: var(--surface);
+  color: var(--text-secondary);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1;
+}
+
+.hero__stat--achievements .hero__stat__value {
+  border-radius: calc(var(--spacing-unit) * 2) 0 0 0;
+}
+
+.hero__stat--achievements .hero__stat__label {
+  border-radius: 0 0 0 calc(var(--spacing-unit) * 2);
+}
+
+.hero__stat--playtime .hero__stat__value {
+  border-radius: 0 calc(var(--spacing-unit) * 2) 0 0;
+}
+
+.hero__stat--playtime .hero__stat__label {
+  border-radius: 0 0 calc(var(--spacing-unit) * 2) 0;
+}
+
+@media (max-width: 1100px) {
+  .hero {
+    height: 820px;
+  }
+
+  .hero__content {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: calc(var(--spacing-unit) * 8);
+  }
+
+  .hero__stats {
+    width: 100%;
+    max-width: 336px;
+  }
+}
+
+@media (max-width: 720px) {
+  .hero {
+    height: 900px;
+  }
+
+  .hero__content {
+    padding: 0 calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 6);
+  }
+
+  .hero__content__left {
+    max-width: 100%;
+    width: 100%;
+  }
+
+  .hero__logo {
+    width: min(100%, 337px);
+    height: auto;
+    aspect-ratio: 337 / 210;
+  }
+
+  .hero__actions {
+    flex-wrap: wrap;
+  }
+}

src/big-picture/src/components/pages/library/hero/hero.tsx

@@ -0,0 +1,278 @@
+import type { LibraryGame } from "@types";
+import {
+  ClockIcon,
+  DownloadSimpleIcon,
+  GearIcon,
+  HeartIcon,
+  PlayIcon,
+  TrophyIcon,
+} from "@phosphor-icons/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import cn from "classnames";
+import {
+  Button,
+  AnimatedHeroImage,
+  Divider,
+  HorizontalFocusGroup,
+} from "../../../common";
+import { formatRelativeDate } from "../../../../helpers";
+import { useDominantColor } from "../../../../hooks";
+import { type FocusOverrides } from "../../../../services";
+import { BIG_PICTURE_SIDEBAR_ITEM_IDS } from "../../../../layout";
+import {
+  LIBRARY_FILTERS_SEARCH_INPUT_ID,
+  LIBRARY_HERO_ACTIONS_REGION_ID,
+  LIBRARY_HERO_FAVORITE_BUTTON_ID,
+  LIBRARY_HERO_LAUNCH_BUTTON_ID,
+  LIBRARY_HERO_OPTIONS_BUTTON_ID,
+} from "../navigation";
+import { getHeroPlaytimeLabel } from "../library-data";
+import { useLibraryLaunchGame } from "../use-library-launch-game";
+import { useHeroBackgroundLayers } from "./use-hero-background-layers";
+
+import "./hero.scss";
+
+interface LibraryHeroProps {
+  lastPlayedGames: LibraryGame[];
+  onOpenGameSettings?: (game: LibraryGame) => void;
+  onToggleFavorite?: (game: LibraryGame) => Promise<void> | void;
+  favoriteLoadingGameId?: string | null;
+}
+
+const FEATURED_GAME_INTERVAL = 60000;
+
+function getLastPlayedLabel(lastTimePlayed: Date | string | null | undefined) {
+  const relativeDate = formatRelativeDate(lastTimePlayed, {
+    fallback: "recently",
+  });
+
+  return `Last played ${relativeDate}`;
+}
+
+export function LibraryHero({
+  lastPlayedGames,
+  onOpenGameSettings,
+  onToggleFavorite,
+  favoriteLoadingGameId = null,
+}: Readonly<LibraryHeroProps>) {
+  const [featuredGameIndex, setFeaturedGameIndex] = useState(0);
+  const heroRef = useRef<HTMLElement | null>(null);
+  const featuredGame = lastPlayedGames[featuredGameIndex] ?? null;
+  const launchGame = useLibraryLaunchGame(
+    useCallback(() => {
+      console.log("library-hero download");
+    }, [])
+  );
+  const getHeroScrollAnchor = useCallback(() => heroRef.current, []);
+  const dominantColor = useDominantColor(
+    featuredGame?.libraryHeroImageUrl ?? null
+  );
+  const { backgroundLayers, getLayerEventHandlers } = useHeroBackgroundLayers(
+    featuredGame?.libraryHeroImageUrl
+  );
+
+  useEffect(() => {
+    if (lastPlayedGames.length <= 1) {
+      setFeaturedGameIndex(0);
+      return;
+    }
+
+    const intervalId = globalThis.setInterval(() => {
+      setFeaturedGameIndex((currentIndex) => {
+        return (currentIndex + 1) % lastPlayedGames.length;
+      });
+    }, FEATURED_GAME_INTERVAL);
+
+    return () => {
+      globalThis.clearInterval(intervalId);
+    };
+  }, [lastPlayedGames]);
+
+  const achievementCount =
+    featuredGame?.unlockedAchievementCount ??
+    featuredGame?.achievementCount ??
+    0;
+  const playtime = getHeroPlaytimeLabel(featuredGame?.playTimeInMilliseconds);
+  const lastPlayedLabel = getLastPlayedLabel(featuredGame?.lastTimePlayed);
+  const isFavoriteLoading =
+    Boolean(featuredGame) && favoriteLoadingGameId === featuredGame?.id;
+  const hasExecutable = Boolean(featuredGame?.executablePath);
+
+  const handlePlayOrDownloadClick = () => {
+    if (!featuredGame) return;
+    void launchGame(featuredGame);
+  };
+
+  const heroActionsNavigationOverrides: FocusOverrides = {
+    down: {
+      type: "item",
+      itemId: LIBRARY_FILTERS_SEARCH_INPUT_ID,
+    },
+  };
+  const sidebarLibraryOverride = {
+    type: "item",
+    itemId: BIG_PICTURE_SIDEBAR_ITEM_IDS.library,
+  } as const;
+  const launchNavigationOverrides: FocusOverrides = {
+    left: sidebarLibraryOverride,
+    right: { type: "item", itemId: LIBRARY_HERO_OPTIONS_BUTTON_ID },
+    down: { type: "item", itemId: LIBRARY_FILTERS_SEARCH_INPUT_ID },
+  };
+  const optionsNavigationOverrides: FocusOverrides = {
+    left: { type: "item", itemId: LIBRARY_HERO_LAUNCH_BUTTON_ID },
+    right: { type: "item", itemId: LIBRARY_HERO_FAVORITE_BUTTON_ID },
+    down: { type: "item", itemId: LIBRARY_FILTERS_SEARCH_INPUT_ID },
+  };
+  const favoriteNavigationOverrides: FocusOverrides = {
+    left: { type: "item", itemId: LIBRARY_HERO_OPTIONS_BUTTON_ID },
+    right: { type: "block" },
+    down: { type: "item", itemId: LIBRARY_FILTERS_SEARCH_INPUT_ID },
+  };
+
+  return (
+    <section ref={heroRef} className="hero">
+      {backgroundLayers.map((layer) => {
+        const layerHandlers = getLayerEventHandlers(layer);
+
+        return (
+          <div
+            key={layer.key}
+            className={cn(
+              `hero__bg-layer hero__bg-layer--${layer.role}`,
+              layer.isVisible && "hero__bg-layer--visible"
+            )}
+            onTransitionEnd={layerHandlers.onTransitionEnd}
+          >
+            <AnimatedHeroImage
+              className="hero__bg"
+              imageUrl={layer.imageUrl}
+              onLoad={layerHandlers.onLoad}
+              onError={layerHandlers.onError}
+            />
+          </div>
+        );
+      })}
+
+      <div className="hero__overlay" />
+
+      <div className="hero__content">
+        <div className="hero__content__left">
+          <div className="hero__logo">
+            {featuredGame?.logoImageUrl ? (
+              <img
+                src={featuredGame.logoImageUrl}
+                alt={featuredGame.title}
+                className="hero__logo__image"
+              />
+            ) : (
+              <span className="hero__logo__fallback">
+                {featuredGame?.title ?? ""}
+              </span>
+            )}
+          </div>
+
+          <div className="hero__copy">
+            <p className="hero__eyebrow">Continue playing:</p>
+            <p className="hero__description">{lastPlayedLabel}</p>
+          </div>
+
+          <div className="hero__actions">
+            <HorizontalFocusGroup
+              regionId={LIBRARY_HERO_ACTIONS_REGION_ID}
+              navigationOverrides={heroActionsNavigationOverrides}
+              getScrollAnchor={getHeroScrollAnchor}
+            >
+              {hasExecutable ? (
+                <Button
+                  variant="primary"
+                  icon={<PlayIcon size={24} weight="fill" />}
+                  color={dominantColor ?? undefined}
+                  focusId={LIBRARY_HERO_LAUNCH_BUTTON_ID}
+                  focusNavigationOverrides={launchNavigationOverrides}
+                  disabled={!featuredGame}
+                  onClick={handlePlayOrDownloadClick}
+                >
+                  Launch Game
+                </Button>
+              ) : (
+                <Button
+                  variant="primary"
+                  icon={<DownloadSimpleIcon size={24} />}
+                  color={dominantColor ?? undefined}
+                  focusId={LIBRARY_HERO_LAUNCH_BUTTON_ID}
+                  focusNavigationOverrides={launchNavigationOverrides}
+                  disabled={!featuredGame}
+                  onClick={handlePlayOrDownloadClick}
+                >
+                  Launch Game
+                </Button>
+              )}
+
+              <div className="hero__action__divider">
+                <Divider orientation="vertical" color="var(--text-secondary)" />
+              </div>
+
+              <Button
+                variant="secondary"
+                icon={<GearIcon size={24} />}
+                focusId={LIBRARY_HERO_OPTIONS_BUTTON_ID}
+                focusNavigationOverrides={optionsNavigationOverrides}
+                onClick={() => {
+                  if (featuredGame) {
+                    onOpenGameSettings?.(featuredGame);
+                  }
+                }}
+              >
+                Options
+              </Button>
+
+              <Button
+                variant="secondary"
+                size="icon"
+                focusId={LIBRARY_HERO_FAVORITE_BUTTON_ID}
+                focusNavigationOverrides={favoriteNavigationOverrides}
+                aria-label={
+                  featuredGame?.favorite
+                    ? "Remove from favorites"
+                    : "Add to favorites"
+                }
+                disabled={!featuredGame}
+                loading={isFavoriteLoading}
+                onClick={() => {
+                  if (featuredGame) {
+                    void onToggleFavorite?.(featuredGame);
+                  }
+                }}
+              >
+                {featuredGame?.favorite ? (
+                  <HeartIcon size={24} weight="fill" />
+                ) : (
+                  <HeartIcon size={24} />
+                )}
+              </Button>
+            </HorizontalFocusGroup>
+          </div>
+        </div>
+
+        <div className="hero__stats">
+          <div className="hero__stat hero__stat--achievements">
+            <div className="hero__stat__value">
+              <TrophyIcon size={28} />
+              <span>{achievementCount}</span>
+            </div>
+
+            <div className="hero__stat__label">Achievements</div>
+          </div>
+
+          <div className="hero__stat hero__stat--playtime">
+            <div className="hero__stat__value">
+              <ClockIcon size={28} />
+              <span>{playtime}</span>
+            </div>
+            <div className="hero__stat__label">Hours Played</div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/big-picture/src/components/pages/library/hero/use-hero-background-layers.ts

@@ -0,0 +1,118 @@
+import { useCallback, useEffect, useState } from "react";
+
+export interface HeroBackgroundLayer {
+  key: number;
+  imageUrl: string;
+  role: "base" | "incoming";
+  isVisible: boolean;
+}
+
+function getNextLayerKey() {
+  return Date.now();
+}
+
+export function useHeroBackgroundLayers(imageUrl: string | null | undefined) {
+  const [backgroundLayers, setBackgroundLayers] = useState<
+    HeroBackgroundLayer[]
+  >([]);
+
+  useEffect(() => {
+    const nextImageUrl = imageUrl ?? "";
+
+    if (!nextImageUrl) {
+      setBackgroundLayers([]);
+      return;
+    }
+
+    setBackgroundLayers((currentLayers) => {
+      const baseLayer =
+        currentLayers.find((layer) => layer.role === "base") ?? null;
+      const incomingLayer =
+        currentLayers.find((layer) => layer.role === "incoming") ?? null;
+
+      if (
+        baseLayer?.imageUrl === nextImageUrl ||
+        incomingLayer?.imageUrl === nextImageUrl
+      ) {
+        return currentLayers;
+      }
+
+      const nextLayer = {
+        key: getNextLayerKey(),
+        imageUrl: nextImageUrl,
+        role: "base" as const,
+        isVisible: true,
+      };
+
+      if (!baseLayer) return [nextLayer];
+
+      return [
+        baseLayer,
+        {
+          ...nextLayer,
+          key: nextLayer.key + 1,
+          role: "incoming" as const,
+          isVisible: false,
+        },
+      ];
+    });
+  }, [imageUrl]);
+
+  const showIncomingLayer = useCallback((layerKey: number) => {
+    setBackgroundLayers((currentLayers) => {
+      return currentLayers.map((layer) => {
+        if (layer.key !== layerKey || layer.role !== "incoming") return layer;
+
+        return {
+          ...layer,
+          isVisible: true,
+        };
+      });
+    });
+  }, []);
+
+  const removeIncomingLayer = useCallback((layerKey: number) => {
+    setBackgroundLayers((currentLayers) => {
+      return currentLayers.filter((layer) => layer.key !== layerKey);
+    });
+  }, []);
+
+  const promoteIncomingLayer = useCallback((layerKey: number) => {
+    setBackgroundLayers((currentLayers) => {
+      const incomingLayer = currentLayers.find(
+        (layer) => layer.key === layerKey && layer.role === "incoming"
+      );
+
+      if (!incomingLayer?.isVisible) return currentLayers;
+
+      return currentLayers
+        .filter((layer) => layer.key === layerKey)
+        .map((layer) => ({
+          ...layer,
+          role: "base" as const,
+          isVisible: true,
+        }));
+    });
+  }, []);
+
+  const getLayerEventHandlers = useCallback(
+    (layer: HeroBackgroundLayer) => {
+      const runForIncomingLayer = (run: (layerKey: number) => void) => () => {
+        if (layer.role !== "incoming") return;
+        run(layer.key);
+      };
+
+      return {
+        onLoad: runForIncomingLayer(showIncomingLayer),
+        onError: runForIncomingLayer(removeIncomingLayer),
+        onTransitionEnd: runForIncomingLayer(promoteIncomingLayer),
+      };
+    },
+    [promoteIncomingLayer, removeIncomingLayer, showIncomingLayer]
+  );
+
+  return {
+    backgroundLayers,
+    getLayerEventHandlers,
+  };
+}

src/big-picture/src/components/pages/library/index.ts

@@ -0,0 +1,9 @@
+export * from "./hero/hero";
+export * from "./grid/focus-grid";
+export * from "./game-card";
+export * from "./settings-modal";
+export * from "./filters/filters";
+export * from "./library-data";
+export * from "./use-library-favorite";
+export * from "./use-library-launch-game";
+export * from "./use-library-page-data";

src/big-picture/src/components/pages/library/library-data.ts

@@ -0,0 +1,99 @@
+import type { LibraryGame } from "@types";
+
+export type LibraryFilterTab = "all" | "favorites" | "completed";
+
+export interface LibraryFilterCounts {
+  all: number;
+  favorites: number;
+  completed: number;
+}
+
+export const LAST_PLAYED_GAMES_COUNT = 3;
+
+export function sortByLastPlayed(a: LibraryGame, b: LibraryGame) {
+  const aLastPlayed = a.lastTimePlayed
+    ? new Date(a.lastTimePlayed as Date).getTime()
+    : null;
+  const bLastPlayed = b.lastTimePlayed
+    ? new Date(b.lastTimePlayed as Date).getTime()
+    : null;
+
+  if (aLastPlayed !== null && bLastPlayed !== null) {
+    const lastPlayedDifference = bLastPlayed - aLastPlayed;
+    if (lastPlayedDifference !== 0) return lastPlayedDifference;
+  }
+
+  if (aLastPlayed !== null) return -1;
+  if (bLastPlayed !== null) return 1;
+
+  return a.title.localeCompare(b.title, undefined, { sensitivity: "base" });
+}
+
+export function isCompletedGame(game: LibraryGame) {
+  const achievementCount = game.achievementCount ?? 0;
+
+  return (
+    achievementCount > 0 &&
+    (game.unlockedAchievementCount ?? 0) >= achievementCount
+  );
+}
+
+export function matchesSearchQuery(game: LibraryGame, searchQuery: string) {
+  const normalizedQuery = searchQuery.trim().toLowerCase();
+  if (!normalizedQuery) return true;
+
+  const titleLower = game.title.toLowerCase();
+  let queryIndex = 0;
+
+  for (
+    let titleIndex = 0;
+    titleIndex < titleLower.length && queryIndex < normalizedQuery.length;
+    titleIndex++
+  ) {
+    if (titleLower[titleIndex] === normalizedQuery[queryIndex]) queryIndex++;
+  }
+
+  return queryIndex === normalizedQuery.length;
+}
+
+export function filterLibraryByTab(
+  library: LibraryGame[],
+  selectedTab: LibraryFilterTab
+) {
+  if (selectedTab === "favorites") {
+    return library.filter((game) => game.favorite);
+  }
+
+  if (selectedTab === "completed") {
+    return library.filter(isCompletedGame);
+  }
+
+  return library;
+}
+
+export function getLibraryFilterCounts(
+  library: LibraryGame[]
+): LibraryFilterCounts {
+  return {
+    all: library.length,
+    favorites: library.filter((game) => game.favorite).length,
+    completed: library.filter(isCompletedGame).length,
+  };
+}
+
+export function getLastPlayedGames(library: LibraryGame[]) {
+  return library
+    .filter((game) => game.lastTimePlayed != null)
+    .slice(0, LAST_PLAYED_GAMES_COUNT);
+}
+
+export function getHeroPlaytimeLabel(playTimeInMilliseconds?: number | null) {
+  if (!playTimeInMilliseconds) return "0h";
+
+  const totalHours = Math.max(
+    1,
+    Math.round(playTimeInMilliseconds / 3_600_000)
+  );
+
+  return `${totalHours}h`;
+}

src/big-picture/src/components/pages/library/navigation.ts

@@ -0,0 +1,25 @@
+export const LIBRARY_HERO_ACTIONS_REGION_ID = "library-hero-actions";
+export const LIBRARY_HERO_LAUNCH_BUTTON_ID = "library-hero-launch-button";
+export const LIBRARY_HERO_OPTIONS_BUTTON_ID = "library-hero-options-button";
+export const LIBRARY_HERO_FAVORITE_BUTTON_ID = "library-hero-favorite-button";
+export const LIBRARY_FILTERS_TOOLBAR_REGION_ID = "library-filters-toolbar";
+export const LIBRARY_FILTERS_TABS_REGION_ID = "library-filters-tabs";
+export const LIBRARY_FILTERS_SEARCH_INPUT_ID = "library-filters-search-input";
+export const LIBRARY_FILTERS_LIST_VIEW_BUTTON_ID =
+  "library-filters-list-view-button";
+export const LIBRARY_FILTERS_GRID_VIEW_BUTTON_ID =
+  "library-filters-grid-view-button";
+export const LIBRARY_FILTERS_ALL_TAB_ID = "library-filters-tab-all";
+export const LIBRARY_FILTERS_FAVORITES_TAB_ID = "library-filters-tab-favorites";
+export const LIBRARY_FILTERS_COMPLETED_TAB_ID = "library-filters-tab-completed";
+export const LIBRARY_FOCUS_GRID_REGION_ID = "library-focus-grid";
+
+export function getLibraryFocusGridItemId(gameId: string) {
+  return `library-focus-grid-item-${gameId}`;
+}
+
+export function getFirstLibraryFocusGridItemId(gameId?: string | null) {
+  if (!gameId) return null;
+
+  return getLibraryFocusGridItemId(gameId);
+}

src/big-picture/src/components/pages/library/settings-modal/helpers.ts

@@ -0,0 +1,113 @@
+import type { LibraryGame } from "@types";
+import { GameSettingsCloudSyncState } from "./use-game-settings-cloud-sync";
+import type {
+  GameSettingsAssetType,
+  GameSettingsCategoryId,
+} from "./use-game-settings-controller";
+
+export const GAME_SETTINGS_ASSET_TYPES = [
+  "icon",
+  "logo",
+  "hero",
+] satisfies GameSettingsAssetType[];
+
+export function categoryLabel(categoryId: GameSettingsCategoryId) {
+  switch (categoryId) {
+    case "general":
+      return "General";
+    case "assets":
+      return "Assets";
+    case "hydra_cloud":
+      return "Hydra Cloud";
+    case "compatibility":
+      return "Compatibility";
+    case "downloads":
+      return "Downloads";
+    case "danger_zone":
+      return "Danger Zone";
+  }
+}
+
+export function assetLabel(assetType: GameSettingsAssetType) {
+  if (assetType === "icon") return "Icon";
+  if (assetType === "logo") return "Logo";
+
+  return "Hero";
+}
+
+export function formatDateTime(value: string | Date) {
+  return new Date(value).toLocaleString(undefined, {
+    dateStyle: "medium",
+    timeStyle: "short",
+  });
+}
+
+export function formatBackupStateLabel(
+  state: GameSettingsCloudSyncState,
+  loadingPreview: boolean,
+  uploadingBackup: boolean,
+  restoringBackup: boolean,
+  progress: number
+) {
+  if (uploadingBackup) return "Uploading backup...";
+  if (restoringBackup) return `Restoring backup ${Math.round(progress * 100)}%`;
+  if (loadingPreview) return "Loading save preview...";
+  if (state === GameSettingsCloudSyncState.New) return "New save files found";
+  if (state === GameSettingsCloudSyncState.Different)
+    return "Save files changed";
+  if (state === GameSettingsCloudSyncState.Same) return "Save files are synced";
+
+  return "No backup preview";
+}
+
+export function getGameAssetUrl(
+  game: LibraryGame,
+  assetType: GameSettingsAssetType
+) {
+  if (assetType === "icon") return game.customIconUrl ?? game.iconUrl ?? null;
+  if (assetType === "logo")
+    return game.customLogoImageUrl ?? game.logoImageUrl ?? null;
+
+  return game.customHeroImageUrl ?? game.libraryHeroImageUrl ?? null;
+}
+
+export function getGameSidebarCoverUrl(game: LibraryGame) {
+  return (
+    game.customHeroImageUrl ??
+    game.libraryHeroImageUrl ??
+    game.libraryImageUrl ??
+    game.coverImageUrl ??
+    game.customIconUrl ??
+    game.iconUrl ??
+    null
+  );
+}
+
+export function getGameOriginalAssetPath(
+  game: LibraryGame,
+  assetType: GameSettingsAssetType
+) {
+  if (game.shop === "custom") {
+    if (assetType === "icon") return game.originalIconPath ?? game.iconUrl;
+    if (assetType === "logo") return game.originalLogoPath ?? game.logoImageUrl;
+
+    return game.originalHeroPath ?? game.libraryHeroImageUrl;
+  }
+
+  if (assetType === "icon")
+    return game.customOriginalIconPath ?? game.customIconUrl ?? game.iconUrl;
+
+  if (assetType === "logo") {
+    return (
+      game.customOriginalLogoPath ??
+      game.customLogoImageUrl ??
+      game.logoImageUrl
+    );
+  }
+
+  return (
+    game.customOriginalHeroPath ??
+    game.customHeroImageUrl ??
+    game.libraryHeroImageUrl
+  );
+}

src/big-picture/src/components/pages/library/settings-modal/index.tsx

@@ -0,0 +1,230 @@
+import "./styles.scss";
+
+import type { GameArtifact, LibraryGame } from "@types";
+import cn from "classnames";
+import { useMemo, useState } from "react";
+import {
+  HorizontalFocusGroup,
+  Modal,
+  NavigationLayer,
+  VerticalFocusGroup,
+} from "../../../common";
+import { GameSettingsSidebar } from "./sidebar";
+import { GameSettingsPanelContent } from "./sections";
+import {
+  ChangePlaytimeModal,
+  ConfirmationModal,
+  CreateSteamShortcutModal,
+  ManageFilesModal,
+  RenameArtifactModal,
+} from "./submodals";
+import type { GameSettingsConfirmation } from "./types";
+import { useGameSettingsCloudSync } from "./use-game-settings-cloud-sync";
+import {
+  type GameSettingsCategoryId,
+  useGameSettingsController,
+} from "./use-game-settings-controller";
+
+export interface GameSettingsModalProps {
+  visible: boolean;
+  game: LibraryGame | null;
+  onClose: () => void;
+  onGameUpdated?: (game: LibraryGame | null) => void;
+}
+
+const ROOT_REGION_ID = "library-game-settings-modal-root";
+const CATEGORIES_REGION_ID = "library-game-settings-modal-categories";
+const PANEL_REGION_ID = "library-game-settings-modal-panel";
+
+function getSettingsCategories() {
+  const categories: GameSettingsCategoryId[] = [
+    "general",
+    "assets",
+    "hydra_cloud",
+    "downloads",
+    "danger_zone",
+  ];
+
+  if (globalThis.window.electron?.platform === "linux") {
+    categories.splice(3, 0, "compatibility");
+  }
+
+  return categories;
+}
+
+export function GameSettingsModal({
+  visible,
+  game: initialGame,
+  onClose,
+  onGameUpdated,
+}: Readonly<GameSettingsModalProps>) {
+  const controller = useGameSettingsController({
+    visible,
+    initialGame,
+    onClose,
+    onGameUpdated,
+  });
+  const cloudSync = useGameSettingsCloudSync({
+    visible,
+    game: controller.game,
+    hasActiveSubscription: controller.hasActiveSubscription,
+    onFeedback: controller.notify,
+  });
+  const [showSteamShortcutModal, setShowSteamShortcutModal] = useState(false);
+  const [confirmation, setConfirmation] =
+    useState<GameSettingsConfirmation | null>(null);
+  const [showChangePlaytimeModal, setShowChangePlaytimeModal] = useState(false);
+  const [artifactToRename, setArtifactToRename] = useState<GameArtifact | null>(
+    null
+  );
+  const [artifactToDelete, setArtifactToDelete] = useState<GameArtifact | null>(
+    null
+  );
+  const [showManageFilesModal, setShowManageFilesModal] = useState(false);
+  const categories = useMemo(getSettingsCategories, []);
+  const game = controller.game;
+
+  if (!game) return null;
+
+  return (
+    <>
+      <Modal
+        visible={visible}
+        onClose={onClose}
+        className="game-settings-modal"
+      >
+        <NavigationLayer
+          rootRegionId={ROOT_REGION_ID}
+          initialFocusRegionId={CATEGORIES_REGION_ID}
+        >
+          <HorizontalFocusGroup
+            regionId={ROOT_REGION_ID}
+            className="game-settings-modal__shell"
+            style={{ gap: 0, alignItems: "stretch" }}
+          >
+            <GameSettingsSidebar
+              game={game}
+              categories={categories}
+              selectedCategory={controller.selectedCategory}
+              regionId={CATEGORIES_REGION_ID}
+              onCategoryChange={controller.setSelectedCategory}
+            />
+
+            <main className="game-settings-modal__panel">
+              {controller.feedback && (
+                <div
+                  className={cn(
+                    "game-settings-modal__feedback",
+                    `game-settings-modal__feedback--${controller.feedback.type}`
+                  )}
+                >
+                  {controller.feedback.message}
+                </div>
+              )}
+
+              <VerticalFocusGroup
+                regionId={PANEL_REGION_ID}
+                autoScrollMode="region"
+              >
+                <GameSettingsPanelContent
+                  controller={controller}
+                  cloudSync={cloudSync}
+                  onOpenSteamShortcutModal={() =>
+                    setShowSteamShortcutModal(true)
+                  }
+                  onOpenChangePlaytimeModal={() =>
+                    setShowChangePlaytimeModal(true)
+                  }
+                  onOpenManageFilesModal={() => setShowManageFilesModal(true)}
+                  onRenameArtifact={setArtifactToRename}
+                  onDeleteArtifact={(artifact) => {
+                    setArtifactToDelete(artifact);
+                    setConfirmation("delete-artifact");
+                  }}
+                  onRequestConfirmation={setConfirmation}
+                />
+              </VerticalFocusGroup>
+            </main>
+          </HorizontalFocusGroup>
+        </NavigationLayer>
+      </Modal>
+
+      <CreateSteamShortcutModal
+        visible={showSteamShortcutModal}
+        creating={controller.busyAction === "create-steam-shortcut"}
+        onClose={() => setShowSteamShortcutModal(false)}
+        onConfirm={controller.handleCreateSteamShortcut}
+      />
+
+      <ChangePlaytimeModal
+        visible={showChangePlaytimeModal}
+        game={game}
+        onClose={() => setShowChangePlaytimeModal(false)}
+        onConfirm={controller.handleChangePlaytime}
+      />
+
+      <RenameArtifactModal
+        visible={Boolean(artifactToRename)}
+        artifact={artifactToRename}
+        onClose={() => setArtifactToRename(null)}
+        onConfirm={cloudSync.renameGameArtifact}
+      />
+
+      <ManageFilesModal
+        visible={showManageFilesModal}
+        backupPreview={cloudSync.backupPreview}
+        onClose={() => setShowManageFilesModal(false)}
+        onSetBackupPath={cloudSync.setBackupPath}
+      />
+
+      <ConfirmationModal
+        visible={confirmation === "remove-library"}
+        title="Remove from library?"
+        description={`Remove ${game.title} from your library. Downloaded files will not be deleted.`}
+        confirmLabel="Remove"
+        danger
+        onClose={() => setConfirmation(null)}
+        onConfirm={controller.handleRemoveFromLibrary}
+      />
+
+      <ConfirmationModal
+        visible={confirmation === "reset-achievements"}
+        title="Reset achievements?"
+        description="This removes local achievement progress for this game."
+        confirmLabel="Reset"
+        danger
+        onClose={() => setConfirmation(null)}
+        onConfirm={controller.handleResetAchievements}
+      />
+
+      <ConfirmationModal
+        visible={confirmation === "remove-files"}
+        title="Remove downloaded files?"
+        description="This deletes the downloaded game files from disk."
+        confirmLabel="Remove files"
+        danger
+        onClose={() => setConfirmation(null)}
+        onConfirm={controller.handleRemoveGameFiles}
+      />
+
+      <ConfirmationModal
+        visible={confirmation === "delete-artifact"}
+        title="Delete backup?"
+        description={`Delete ${
+          artifactToDelete?.label ?? "this backup"
+        }. Frozen backups cannot be deleted.`}
+        confirmLabel="Delete"
+        danger
+        onClose={() => {
+          setConfirmation(null);
+          setArtifactToDelete(null);
+        }}
+        onConfirm={async () => {
+          if (artifactToDelete) {
+            await cloudSync.deleteGameArtifact(artifactToDelete.id);
+          }
+        }}
+      />
+    </>
+  );
+}

src/big-picture/src/components/pages/library/settings-modal/sections.tsx

@@ -0,0 +1,707 @@
+import {
+  ArrowsClockwiseIcon,
+  CloudArrowDownIcon,
+  CloudArrowUpIcon,
+  CloudIcon,
+  FileIcon,
+  FloppyDiskIcon,
+  FolderOpenIcon,
+  HardDriveIcon,
+  ImageIcon,
+  PencilSimpleIcon,
+  PushPinIcon,
+  PushPinSlashIcon,
+  SparkleIcon,
+  TrashIcon,
+} from "@phosphor-icons/react";
+import type { ReactNode } from "react";
+import type { GameArtifact, LibraryGame } from "@types";
+import { formatBytes } from "@shared";
+import { Button, HorizontalFocusGroup } from "../../../common";
+import { resolveImageSource } from "../../../../helpers";
+import type { GameSettingsCloudSync } from "./use-game-settings-cloud-sync";
+import type { GameSettingsController } from "./use-game-settings-controller";
+import type { GameSettingsConfirmation } from "./types";
+import { FocusableInput, SettingsSection, ToggleAction } from "./shared";
+import {
+  assetLabel,
+  formatBackupStateLabel,
+  formatDateTime,
+  GAME_SETTINGS_ASSET_TYPES,
+  getGameAssetUrl,
+  getGameOriginalAssetPath,
+} from "./helpers";
+
+type GameSettingsPanelContentProps = Readonly<{
+  controller: GameSettingsController;
+  cloudSync: GameSettingsCloudSync;
+  onOpenSteamShortcutModal: () => void;
+  onOpenChangePlaytimeModal: () => void;
+  onOpenManageFilesModal: () => void;
+  onRenameArtifact: (artifact: GameArtifact) => void;
+  onDeleteArtifact: (artifact: GameArtifact) => void;
+  onRequestConfirmation: (confirmation: GameSettingsConfirmation) => void;
+}>;
+
+function GeneralSection({
+  game,
+  controller,
+  onOpenSteamShortcutModal,
+}: Readonly<{
+  game: LibraryGame;
+  controller: GameSettingsController;
+  onOpenSteamShortcutModal: () => void;
+}>) {
+  const canOpenSaveFolder =
+    game.shop !== "custom" && globalThis.window.electron.platform === "win32";
+
+  let saveFolderButtonLabel = "No save folder found";
+  if (controller.loadingSaveFolder) {
+    saveFolderButtonLabel = "Searching save folder";
+  } else if (controller.saveFolderPath) {
+    saveFolderButtonLabel = "Open save folder";
+  }
+
+  return (
+    <>
+      <SettingsSection title="Title">
+        <div className="game-settings-modal__field-row">
+          <FocusableInput
+            label="Game title"
+            value={controller.gameTitle}
+            disabled={controller.updatingTitle}
+            onChange={controller.setGameTitle}
+          />
+          <Button
+            icon={<FloppyDiskIcon size={18} />}
+            disabled={controller.updatingTitle}
+            onClick={controller.handleSaveTitle}
+          >
+            Save
+          </Button>
+        </div>
+      </SettingsSection>
+
+      <SettingsSection
+        title="Executable"
+        description="Choose the executable used to launch this game."
+      >
+        <div className="game-settings-modal__path-card">
+          <span>{game.executablePath || "No executable selected"}</span>
+        </div>
+        <HorizontalFocusGroup className="game-settings-modal__actions">
+          <Button
+            variant="secondary"
+            icon={<FileIcon size={18} />}
+            onClick={controller.handleSelectExecutable}
+          >
+            Select executable
+          </Button>
+          <Button
+            variant="secondary"
+            disabled={!game.executablePath}
+            onClick={controller.handleOpenExecutableFolder}
+          >
+            Open folder
+          </Button>
+          <Button
+            variant="secondary"
+            disabled={!game.executablePath}
+            onClick={controller.handleClearExecutable}
+          >
+            Clear
+          </Button>
+          {canOpenSaveFolder && (
+            <Button
+              variant="secondary"
+              disabled={
+                controller.loadingSaveFolder || !controller.saveFolderPath
+              }
+              onClick={controller.handleOpenSaveFolder}
+            >
+              {saveFolderButtonLabel}
+            </Button>
+          )}
+        </HorizontalFocusGroup>
+      </SettingsSection>
+
+      {game.executablePath && (
+        <SettingsSection
+          title="Shortcuts"
+          description="Create shortcuts for faster access."
+        >
+          <HorizontalFocusGroup className="game-settings-modal__actions">
+            <Button
+              variant="secondary"
+              onClick={() => controller.handleCreateShortcut("desktop")}
+            >
+              Desktop shortcut
+            </Button>
+            {globalThis.window.electron.platform === "win32" && (
+              <Button
+                variant="secondary"
+                onClick={() => controller.handleCreateShortcut("start_menu")}
+              >
+                Start menu shortcut
+              </Button>
+            )}
+            {game.shop !== "custom" &&
+              (controller.steamShortcutExists ? (
+                <Button
+                  variant="danger"
+                  onClick={controller.handleDeleteSteamShortcut}
+                >
+                  Delete Steam shortcut
+                </Button>
+              ) : (
+                <Button variant="secondary" onClick={onOpenSteamShortcutModal}>
+                  Create Steam shortcut
+                </Button>
+              ))}
+          </HorizontalFocusGroup>
+        </SettingsSection>
+      )}
+
+      <SettingsSection
+        title="Launch options"
+        description="Add arguments to the game launch command."
+      >
+        <FocusableInput
+          label="Arguments"
+          value={controller.launchOptions}
+          placeholder="%command% --fullscreen"
+          onChange={controller.setLaunchOptions}
+        />
+        <HorizontalFocusGroup className="game-settings-modal__actions">
+          <Button onClick={controller.handleSaveLaunchOptions}>
+            Save launch options
+          </Button>
+          <Button
+            variant="secondary"
+            disabled={!game.launchOptions}
+            onClick={controller.handleClearLaunchOptions}
+          >
+            Clear
+          </Button>
+        </HorizontalFocusGroup>
+      </SettingsSection>
+    </>
+  );
+}
+
+function AssetsSection({
+  game,
+  controller,
+}: Readonly<{
+  game: LibraryGame;
+  controller: GameSettingsController;
+}>) {
+  return (
+    <SettingsSection
+      title="Assets"
+      description="Customize the library art used by Hydra."
+    >
+      <div className="game-settings-modal__assets">
+        {GAME_SETTINGS_ASSET_TYPES.map((assetType) => {
+          const assetUrl = getGameAssetUrl(game, assetType);
+          const originalPath = getGameOriginalAssetPath(game, assetType);
+
+          return (
+            <div key={assetType} className="game-settings-modal__asset-card">
+              <div className="game-settings-modal__asset-preview">
+                {assetUrl ? (
+                  <img
+                    src={resolveImageSource(assetUrl)}
+                    alt={assetLabel(assetType)}
+                  />
+                ) : (
+                  <ImageIcon size={42} />
+                )}
+              </div>
+              <div className="game-settings-modal__asset-info">
+                <h4>{assetLabel(assetType)}</h4>
+                <p>{originalPath || "No custom asset selected"}</p>
+                <HorizontalFocusGroup className="game-settings-modal__actions">
+                  <Button
+                    variant="secondary"
+                    onClick={() => controller.handleChooseAsset(assetType)}
+                  >
+                    Select image
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    disabled={!originalPath}
+                    onClick={() => controller.handleResetAsset(assetType)}
+                  >
+                    Reset
+                  </Button>
+                  <Button
+                    variant="danger"
+                    disabled={!assetUrl}
+                    onClick={() =>
+                      controller.handleUpdateAsset(assetType, null)
+                    }
+                  >
+                    Remove
+                  </Button>
+                </HorizontalFocusGroup>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </SettingsSection>
+  );
+}
+
+function HydraCloudSection({
+  game,
+  controller,
+  cloudSync,
+  onOpenManageFilesModal,
+  onRenameArtifact,
+  onDeleteArtifact,
+}: Readonly<{
+  game: LibraryGame;
+  controller: GameSettingsController;
+  cloudSync: GameSettingsCloudSync;
+  onOpenManageFilesModal: () => void;
+  onRenameArtifact: (artifact: GameArtifact) => void;
+  onDeleteArtifact: (artifact: GameArtifact) => void;
+}>) {
+  const cloudActionsDisabled =
+    cloudSync.uploadingBackup ||
+    cloudSync.restoringBackup ||
+    cloudSync.freezingArtifact ||
+    cloudSync.deletingArtifact;
+  const backupsLimit = controller.userDetails?.quirks?.backupsPerGameLimit ?? 0;
+  const hasReachedBackupsLimit =
+    backupsLimit > 0 && cloudSync.artifacts.length >= backupsLimit;
+
+  let hydraCloudBody: ReactNode;
+  if (game.shop === "custom") {
+    hydraCloudBody = (
+      <p className="game-settings-modal__empty-note">
+        Settings are not available for custom games.
+      </p>
+    );
+  } else if (controller.hasActiveSubscription) {
+    hydraCloudBody = (
+      <>
+        <ToggleAction
+          label="Automatic cloud sync"
+          checked={game.automaticCloudSync === true}
+          disabled={!game.executablePath}
+          onToggle={controller.handleToggleAutomaticCloudSync}
+        />
+        <div className="game-settings-modal__cloud-header">
+          <div>
+            <p>
+              {formatBackupStateLabel(
+                cloudSync.backupState,
+                cloudSync.loadingPreview,
+                cloudSync.uploadingBackup,
+                cloudSync.restoringBackup,
+                cloudSync.backupDownloadProgress?.progress ?? 0
+              )}
+            </p>
+            <Button
+              variant="link"
+              disabled={cloudActionsDisabled}
+              onClick={onOpenManageFilesModal}
+            >
+              Manage files
+            </Button>
+          </div>
+          <Button
+            icon={
+              cloudSync.uploadingBackup ? (
+                <ArrowsClockwiseIcon size={18} />
+              ) : (
+                <CloudArrowUpIcon size={18} />
+              )
+            }
+            disabled={
+              cloudActionsDisabled ||
+              !cloudSync.backupPreview?.overall.totalGames ||
+              hasReachedBackupsLimit
+            }
+            onClick={cloudSync.uploadSaveGame}
+          >
+            Create backup
+          </Button>
+        </div>
+        <div className="game-settings-modal__backups-title">
+          <h4>Backups</h4>
+          <span>{cloudSync.artifacts.length}</span>
+        </div>
+        <div className="game-settings-modal__backups">
+          {cloudSync.artifacts.length === 0 ? (
+            <p className="game-settings-modal__empty-note">
+              No backups created.
+            </p>
+          ) : (
+            cloudSync.artifacts
+              .toSorted((a, b) => Number(b.isFrozen) - Number(a.isFrozen))
+              .map((artifact) => (
+                <BackupCard
+                  key={artifact.id}
+                  artifact={artifact}
+                  cloudActionsDisabled={cloudActionsDisabled}
+                  cloudSync={cloudSync}
+                  onRenameArtifact={onRenameArtifact}
+                  onDeleteArtifact={onDeleteArtifact}
+                />
+              ))
+          )}
+        </div>
+      </>
+    );
+  } else {
+    hydraCloudBody = (
+      <div className="game-settings-modal__upgrade-card">
+        <CloudIcon size={28} />
+        <p>Hydra Cloud is available with an active subscription.</p>
+        <Button onClick={() => globalThis.electron.openCheckout()}>
+          Learn more
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <SettingsSection
+      title="Hydra Cloud"
+      description="Manage cloud saves and backups for this game."
+    >
+      {hydraCloudBody}
+    </SettingsSection>
+  );
+}
+
+function BackupCard({
+  artifact,
+  cloudActionsDisabled,
+  cloudSync,
+  onRenameArtifact,
+  onDeleteArtifact,
+}: Readonly<{
+  artifact: GameArtifact;
+  cloudActionsDisabled: boolean;
+  cloudSync: GameSettingsCloudSync;
+  onRenameArtifact: (artifact: GameArtifact) => void;
+  onDeleteArtifact: (artifact: GameArtifact) => void;
+}>) {
+  const artifactName =
+    artifact.label ?? `Backup from ${formatDateTime(artifact.createdAt)}`;
+
+  return (
+    <div className="game-settings-modal__backup-card">
+      <div>
+        <Button
+          variant="link"
+          icon={<PencilSimpleIcon size={16} />}
+          onClick={() => onRenameArtifact(artifact)}
+        >
+          {artifactName}
+        </Button>
+        <p>
+          {formatBytes(artifact.artifactLengthInBytes)} - {artifact.hostname} -{" "}
+          {formatDateTime(artifact.createdAt)}
+        </p>
+        <p>{artifact.downloadOptionTitle ?? "No download option info"}</p>
+      </div>
+      <HorizontalFocusGroup className="game-settings-modal__actions">
+        <Button
+          variant="secondary"
+          icon={<CloudArrowDownIcon size={18} />}
+          disabled={cloudActionsDisabled}
+          onClick={() => cloudSync.downloadGameArtifact(artifact.id)}
+        >
+          Install
+        </Button>
+        <Button
+          variant="secondary"
+          icon={
+            artifact.isFrozen ? (
+              <PushPinSlashIcon size={18} />
+            ) : (
+              <PushPinIcon size={18} />
+            )
+          }
+          disabled={cloudActionsDisabled}
+          onClick={() =>
+            cloudSync.toggleArtifactFreeze(artifact.id, !artifact.isFrozen)
+          }
+        >
+          {artifact.isFrozen ? "Unfreeze" : "Freeze"}
+        </Button>
+        <Button
+          variant="danger"
+          icon={<TrashIcon size={18} />}
+          disabled={cloudActionsDisabled || artifact.isFrozen}
+          onClick={() => onDeleteArtifact(artifact)}
+        >
+          Delete
+        </Button>
+      </HorizontalFocusGroup>
+    </div>
+  );
+}
+
+function CompatibilitySection({
+  game,
+  controller,
+}: Readonly<{
+  game: LibraryGame;
+  controller: GameSettingsController;
+}>) {
+  return (
+    <>
+      <SettingsSection
+        title="Wine prefix"
+        description="Select the Wine prefix used by this game."
+      >
+        <div className="game-settings-modal__path-card">
+          <span>
+            {controller.displayedWinePrefixPath || "No directory selected"}
+          </span>
+        </div>
+        <HorizontalFocusGroup className="game-settings-modal__actions">
+          <Button
+            variant="secondary"
+            onClick={controller.handleChangeWinePrefixPath}
+          >
+            Select directory
+          </Button>
+          <Button
+            variant="secondary"
+            disabled={!game.winePrefixPath}
+            onClick={controller.handleClearWinePrefixPath}
+          >
+            Clear
+          </Button>
+          <Button
+            variant="secondary"
+            disabled={!controller.winetricksAvailable}
+            onClick={controller.handleOpenWinetricks}
+          >
+            Open Winetricks
+          </Button>
+        </HorizontalFocusGroup>
+      </SettingsSection>
+
+      <SettingsSection title="Additional options">
+        <HorizontalFocusGroup className="game-settings-modal__actions">
+          <ToggleAction
+            label="Run with GameMode"
+            checked={
+              controller.autoRunGamemode || controller.globalAutoRunGamemode
+            }
+            disabled={
+              !controller.gamemodeAvailable || controller.globalAutoRunGamemode
+            }
+            onToggle={controller.handleToggleGamemode}
+          />
+          <ToggleAction
+            label="Run with MangoHud"
+            checked={
+              controller.autoRunMangohud || controller.globalAutoRunMangohud
+            }
+            disabled={
+              !controller.mangohudAvailable || controller.globalAutoRunMangohud
+            }
+            onToggle={controller.handleToggleMangohud}
+          />
+        </HorizontalFocusGroup>
+      </SettingsSection>
+
+      <SettingsSection
+        title="Proton version"
+        description="Choose a Proton version for this game."
+      >
+        <div className="game-settings-modal__proton-list">
+          <Button
+            variant={
+              controller.selectedProtonPath === "" ? "primary" : "secondary"
+            }
+            onClick={() => controller.handleChangeProtonVersion("")}
+          >
+            Auto
+          </Button>
+          {controller.protonVersions.map((version) => (
+            <Button
+              key={version.path}
+              variant={
+                controller.selectedProtonPath === version.path
+                  ? "primary"
+                  : "secondary"
+              }
+              onClick={() => controller.handleChangeProtonVersion(version.path)}
+            >
+              {version.name}
+            </Button>
+          ))}
+        </div>
+      </SettingsSection>
+    </>
+  );
+}
+
+function DownloadsSection({
+  game,
+  controller,
+}: Readonly<{
+  game: LibraryGame;
+  controller: GameSettingsController;
+}>) {
+  return (
+    <SettingsSection
+      title="Downloads"
+      description="Manage download options and local download files."
+    >
+      {game.shop === "custom" ? (
+        <p className="game-settings-modal__empty-note">
+          Settings are not available for custom games.
+        </p>
+      ) : (
+        <HorizontalFocusGroup className="game-settings-modal__actions">
+          <Button variant="secondary" disabled>
+            Open download options
+          </Button>
+          <Button
+            variant="secondary"
+            icon={<FolderOpenIcon size={18} />}
+            disabled={!game.download?.downloadPath}
+            onClick={controller.handleOpenDownloadFolder}
+          >
+            Open download location
+          </Button>
+        </HorizontalFocusGroup>
+      )}
+    </SettingsSection>
+  );
+}
+
+function DangerZoneSection({
+  game,
+  controller,
+  onOpenChangePlaytimeModal,
+  onRequestConfirmation,
+}: Readonly<{
+  game: LibraryGame;
+  controller: GameSettingsController;
+  onOpenChangePlaytimeModal: () => void;
+  onRequestConfirmation: (confirmation: GameSettingsConfirmation) => void;
+}>) {
+  return (
+    <SettingsSection
+      title="Danger Zone"
+      description="These actions can permanently change this game."
+      danger
+    >
+      <div className="game-settings-modal__danger-actions">
+        <Button
+          variant="danger"
+          icon={<TrashIcon size={18} />}
+          onClick={() => onRequestConfirmation("remove-library")}
+        >
+          Remove from library
+        </Button>
+        {game.shop !== "custom" && (
+          <Button
+            variant="danger"
+            icon={<SparkleIcon size={18} />}
+            disabled={
+              controller.isDeletingAchievements ||
+              !controller.hasAchievements ||
+              !controller.userDetails
+            }
+            onClick={() => onRequestConfirmation("reset-achievements")}
+          >
+            Reset achievements
+          </Button>
+        )}
+        <Button
+          variant="danger"
+          icon={<HardDriveIcon size={18} />}
+          onClick={onOpenChangePlaytimeModal}
+        >
+          Update playtime
+        </Button>
+        {game.shop !== "custom" && (
+          <Button
+            variant="danger"
+            icon={<TrashIcon size={18} />}
+            disabled={
+              controller.isGameDownloading ||
+              controller.isDeletingGameFiles ||
+              !game.download?.downloadPath
+            }
+            onClick={() => onRequestConfirmation("remove-files")}
+          >
+            Remove files
+          </Button>
+        )}
+      </div>
+    </SettingsSection>
+  );
+}
+
+export function GameSettingsPanelContent({
+  controller,
+  cloudSync,
+  onOpenSteamShortcutModal,
+  onOpenChangePlaytimeModal,
+  onOpenManageFilesModal,
+  onRenameArtifact,
+  onDeleteArtifact,
+  onRequestConfirmation,
+}: GameSettingsPanelContentProps) {
+  const game = controller.game;
+  if (!game) return null;
+
+  if (controller.selectedCategory === "general") {
+    return (
+      <GeneralSection
+        game={game}
+        controller={controller}
+        onOpenSteamShortcutModal={onOpenSteamShortcutModal}
+      />
+    );
+  }
+
+  if (controller.selectedCategory === "assets") {
+    return <AssetsSection game={game} controller={controller} />;
+  }
+
+  if (controller.selectedCategory === "hydra_cloud") {
+    return (
+      <HydraCloudSection
+        game={game}
+        controller={controller}
+        cloudSync={cloudSync}
+        onOpenManageFilesModal={onOpenManageFilesModal}
+        onRenameArtifact={onRenameArtifact}
+        onDeleteArtifact={onDeleteArtifact}
+      />
+    );
+  }
+
+  if (controller.selectedCategory === "compatibility") {
+    return <CompatibilitySection game={game} controller={controller} />;
+  }
+
+  if (controller.selectedCategory === "downloads") {
+    return <DownloadsSection game={game} controller={controller} />;
+  }
+
+  return (
+    <DangerZoneSection
+      game={game}
+      controller={controller}
+      onOpenChangePlaytimeModal={onOpenChangePlaytimeModal}
+      onRequestConfirmation={onRequestConfirmation}
+    />
+  );
+}

src/big-picture/src/components/pages/library/settings-modal/shared.tsx

@@ -0,0 +1,78 @@
+import cn from "classnames";
+import { type ReactNode } from "react";
+import { Button, Input } from "../../../common";
+
+export function SettingsSection({
+  title,
+  description,
+  children,
+  danger = false,
+}: Readonly<{
+  title: string;
+  description?: string;
+  children: ReactNode;
+  danger?: boolean;
+}>) {
+  return (
+    <section
+      className={cn("game-settings-modal__section", {
+        "game-settings-modal__section--danger": danger,
+      })}
+    >
+      <div className="game-settings-modal__section-header">
+        <h3>{title}</h3>
+        {description && <p>{description}</p>}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+export function FocusableInput({
+  value,
+  onChange,
+  label,
+  placeholder,
+  disabled,
+  type = "text",
+}: Readonly<{
+  value: string;
+  onChange: (value: string) => void;
+  label: string;
+  placeholder?: string;
+  disabled?: boolean;
+  type?: string;
+}>) {
+  return (
+    <Input
+      label={label}
+      type={type}
+      value={value}
+      placeholder={placeholder}
+      disabled={disabled}
+      onChange={(event) => onChange(event.target.value)}
+    />
+  );
+}
+
+export function ToggleAction({
+  label,
+  checked,
+  disabled,
+  onToggle,
+}: Readonly<{
+  label: string;
+  checked: boolean;
+  disabled?: boolean;
+  onToggle: () => void;
+}>) {
+  return (
+    <Button
+      variant={checked ? "primary" : "secondary"}
+      disabled={disabled}
+      onClick={onToggle}
+    >
+      {checked ? "On" : "Off"} - {label}
+    </Button>
+  );
+}

src/big-picture/src/components/pages/library/settings-modal/sidebar.tsx

@@ -0,0 +1,82 @@
+import type { LibraryGame } from "@types";
+import cn from "classnames";
+import { FocusItem, VerticalFocusGroup } from "../../../common";
+import { resolveImageSource } from "../../../../helpers";
+import type { GameSettingsCategoryId } from "./use-game-settings-controller";
+import { categoryLabel, getGameSidebarCoverUrl } from "./helpers";
+
+function SidebarItem({
+  categoryId,
+  active,
+  onClick,
+}: Readonly<{
+  categoryId: GameSettingsCategoryId;
+  active: boolean;
+  onClick: () => void;
+}>) {
+  return (
+    <FocusItem asChild>
+      <button
+        type="button"
+        className={cn("game-settings-modal__sidebar-item", {
+          "game-settings-modal__sidebar-item--active": active,
+        })}
+        onClick={onClick}
+      >
+        <span className="game-settings-modal__sidebar-item-label">
+          {categoryLabel(categoryId)}
+        </span>
+      </button>
+    </FocusItem>
+  );
+}
+
+export function GameSettingsSidebar({
+  game,
+  categories,
+  selectedCategory,
+  regionId,
+  onCategoryChange,
+}: Readonly<{
+  game: LibraryGame;
+  categories: GameSettingsCategoryId[];
+  selectedCategory: GameSettingsCategoryId;
+  regionId: string;
+  onCategoryChange: (categoryId: GameSettingsCategoryId) => void;
+}>) {
+  const sidebarCoverUrl = getGameSidebarCoverUrl(game);
+
+  return (
+    <aside className="game-settings-modal__sidebar">
+      <div className="game-settings-modal__sidebar-cover">
+        {sidebarCoverUrl ? (
+          <img
+            src={resolveImageSource(sidebarCoverUrl)}
+            alt=""
+            aria-hidden="true"
+          />
+        ) : null}
+        <h2>{game.title}</h2>
+      </div>
+      <div
+        className="game-settings-modal__sidebar-divider"
+        aria-hidden="true"
+      />
+
+      <VerticalFocusGroup
+        regionId={regionId}
+        className="game-settings-modal__sidebar-list"
+        style={{ gap: 0 }}
+      >
+        {categories.map((categoryId) => (
+          <SidebarItem
+            key={categoryId}
+            categoryId={categoryId}
+            active={selectedCategory === categoryId}
+            onClick={() => onCategoryChange(categoryId)}
+          />
+        ))}
+      </VerticalFocusGroup>
+    </aside>
+  );
+}

src/big-picture/src/components/pages/library/settings-modal/styles.scss

@@ -0,0 +1,466 @@
+.modal.game-settings-modal {
+  width: min(1200px, calc(100vw - calc(var(--spacing-unit) * 12)));
+  max-width: none;
+  height: min(820px, calc(100vh - calc(var(--spacing-unit) * 10)));
+  max-height: none;
+  border: 1px solid var(--secondary-border);
+  border-radius: calc(var(--spacing-unit) * 2);
+  background-color: var(--surface);
+  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.55);
+  flex-direction: row;
+}
+
+.modal.game-settings-modal__submodal {
+  width: min(520px, calc(100vw - calc(var(--spacing-unit) * 12)));
+  max-width: none;
+  border: 1px solid var(--secondary-border);
+  border-radius: calc(var(--spacing-unit) * 2);
+  background-color: var(--surface);
+  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.55);
+}
+
+.modal.game-settings-modal__submodal--wide {
+  width: min(760px, calc(100vw - calc(var(--spacing-unit) * 12)));
+}
+
+.game-settings-modal {
+  &__shell {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    flex: 1;
+    padding: 0;
+  }
+
+  &__sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    width: 320px;
+    min-width: 320px;
+    height: 100%;
+    padding: 0;
+    border-right: 1px solid var(--secondary-border);
+    background-color: var(--background);
+  }
+
+  &__sidebar-cover {
+    position: relative;
+    width: 100%;
+    height: 88px;
+    min-height: 88px;
+    overflow: hidden;
+    background:
+      linear-gradient(
+        180deg,
+        rgba(0, 0, 0, 0.08) 0%,
+        rgba(0, 0, 0, 0.28) 56%,
+        var(--background) 100%
+      ),
+      var(--secondary);
+
+    h2 {
+      position: absolute;
+      right: 28px;
+      bottom: 24px;
+      left: 28px;
+      max-width: calc(100% - 56px);
+      margin: 0;
+      overflow: hidden;
+      color: var(--text);
+      font-family: var(--font-space-grotesk);
+      font-size: 20px;
+      font-weight: 700;
+      line-height: 24px;
+      letter-spacing: -0.02em;
+      text-overflow: ellipsis;
+      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
+      white-space: nowrap;
+      z-index: 1;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      filter: saturate(1.08);
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(
+        180deg,
+        transparent 45%,
+        color-mix(in srgb, var(--background) 72%, transparent) 78%,
+        var(--background) 100%
+      );
+      pointer-events: none;
+    }
+  }
+
+  &__sidebar-divider {
+    width: calc(100% - 48px);
+    height: 1px;
+    margin: 0 24px 24px;
+    flex-shrink: 0;
+    background-color: var(--secondary-border);
+  }
+
+  &__sidebar-list {
+    width: 100%;
+  }
+
+  &__feedback {
+    margin: 0 0 calc(var(--spacing-unit) * 4);
+    padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3);
+    border: 1px solid var(--secondary-border);
+    border-radius: var(--spacing-unit);
+    background-color: var(--background);
+    color: var(--text);
+    font-family: var(--font-space-grotesk);
+    font-size: 13px;
+
+    &--success {
+      border-color: color-mix(
+        in srgb,
+        var(--success) 32%,
+        var(--secondary-border)
+      );
+      color: var(--success);
+    }
+
+    &--error {
+      border-color: var(--error-border);
+      color: var(--error);
+      background-color: var(--error-background);
+    }
+  }
+
+  &__sidebar-item {
+    appearance: none;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    min-height: 0;
+    padding: 16px 24px;
+    border: 0;
+    border-radius: 0;
+    background-color: transparent;
+    color: var(--text);
+    font-family: var(--font-space-grotesk);
+    font-size: 16px;
+    font-weight: 400;
+    line-height: normal;
+    letter-spacing: -0.02em;
+    text-align: left;
+    cursor: pointer;
+    outline: none;
+    transition:
+      background-color 0.18s ease,
+      color 0.18s ease,
+      opacity 0.18s ease;
+
+    &:hover,
+    &[data-focus-visible="true"] {
+      background-color: rgba(255, 255, 255, 0.08);
+      color: var(--text);
+    }
+
+    &--active {
+      background-color: rgba(255, 255, 255, 0.15);
+      color: var(--text);
+    }
+  }
+
+  &__sidebar-item-label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__panel {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    flex: 1;
+    height: 100%;
+    overflow: auto;
+    padding: calc(var(--spacing-unit) * 5);
+    background-color: var(--surface);
+  }
+
+  &__section {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spacing-unit) * 2.5);
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+
+    & + & {
+      padding-top: calc(var(--spacing-unit) * 4);
+      border-top: 1px solid var(--secondary-border);
+    }
+
+    &--danger {
+      color: var(--error);
+    }
+  }
+
+  &__section-header {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spacing-unit) * 1);
+
+    h3 {
+      margin: 0;
+      color: var(--text);
+      font-family: var(--font-space-grotesk);
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 1.2;
+    }
+
+    p {
+      margin: 0;
+      color: var(--text-secondary);
+      font-family: var(--font-space-grotesk);
+      font-size: 13px;
+      font-weight: 400;
+      line-height: 1.4;
+    }
+  }
+
+  &__section--danger &__section-header h3 {
+    color: var(--error);
+  }
+
+  &__field-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: end;
+    gap: calc(var(--spacing-unit) * 2.5);
+  }
+
+  &__form-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: calc(var(--spacing-unit) * 2.5);
+  }
+
+  &__actions {
+    flex-wrap: wrap;
+    gap: calc(var(--spacing-unit) * 2) !important;
+    margin-top: 0;
+  }
+
+  &__path-card {
+    min-height: 44px;
+    padding: calc(var(--spacing-unit) * 2.5);
+    border: 1px solid var(--secondary-border);
+    border-radius: var(--spacing-unit);
+    background-color: var(--background);
+    color: var(--text-secondary);
+    font-family: var(--font-space-grotesk);
+    font-size: 13px;
+    line-height: 18px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__assets,
+  &__backups,
+  &__danger-actions,
+  &__proton-list,
+  &__file-list {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spacing-unit) * 2.5);
+  }
+
+  &__asset-card,
+  &__backup-card {
+    display: grid;
+    grid-template-columns: 148px minmax(0, 1fr);
+    gap: calc(var(--spacing-unit) * 3);
+    padding: calc(var(--spacing-unit) * 2.5);
+    border: 1px solid var(--secondary-border);
+    border-radius: var(--spacing-unit);
+    background-color: var(--background);
+  }
+
+  &__asset-preview {
+    display: grid;
+    place-items: center;
+    min-height: 92px;
+    overflow: hidden;
+    border-radius: var(--spacing-unit);
+    background-color: var(--secondary);
+    color: var(--text-secondary);
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  &__asset-info,
+  &__backup-card > div:first-child {
+    min-width: 0;
+
+    h4 {
+      margin: 0 0 calc(var(--spacing-unit) * 1.5);
+      color: var(--text);
+      font-family: var(--font-space-grotesk);
+      font-size: 14px;
+      font-weight: 700;
+    }
+
+    p {
+      margin: 0;
+      color: var(--text-secondary);
+      font-family: var(--font-space-grotesk);
+      font-size: 12px;
+      line-height: 1.4;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  &__upgrade-card,
+  &__cloud-header,
+  &__backups-title,
+  &__file-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(var(--spacing-unit) * 2.5);
+  }
+
+  &__upgrade-card,
+  &__cloud-header {
+    padding: calc(var(--spacing-unit) * 2.5);
+    border: 1px solid var(--secondary-border);
+    border-radius: var(--spacing-unit);
+    background-color: var(--background);
+
+    p {
+      margin: 0;
+      color: var(--text-secondary);
+      font-family: var(--font-space-grotesk);
+      font-size: 13px;
+      line-height: 1.4;
+    }
+  }
+
+  &__backups-title {
+    h4 {
+      margin: 0;
+      color: var(--text);
+      font-family: var(--font-space-grotesk);
+      font-size: 14px;
+      font-weight: 700;
+    }
+
+    span {
+      min-width: 24px;
+      padding: 2px calc(var(--spacing-unit) * 2);
+      border-radius: var(--spacing-unit);
+      background-color: var(--secondary);
+      color: var(--text-secondary);
+      font-size: 12px;
+      text-align: center;
+    }
+  }
+
+  &__backup-card {
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+  }
+
+  &__empty-note {
+    margin: 0;
+    color: var(--text-secondary);
+    font-family: var(--font-space-grotesk);
+    font-size: 13px;
+  }
+
+  &__submodal-content {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spacing-unit) * 4);
+    padding: calc(var(--spacing-unit) * 5);
+
+    h2 {
+      margin: 0;
+      color: var(--text);
+      font-family: var(--font-space-grotesk);
+      font-size: 20px;
+      font-weight: 700;
+    }
+
+    p {
+      margin: 0;
+      color: var(--text-secondary);
+      font-family: var(--font-space-grotesk);
+      font-size: 13px;
+      line-height: 1.4;
+    }
+  }
+
+  &__file-list {
+    max-height: 320px;
+    overflow: auto;
+    padding: 0;
+    list-style: none;
+  }
+
+  &__file-item {
+    padding: calc(var(--spacing-unit) * 3);
+    border-radius: var(--spacing-unit);
+    background-color: var(--background);
+
+    span {
+      color: var(--text-secondary);
+      font-family: var(--font-space-grotesk);
+      font-size: 12px;
+    }
+  }
+}
+
+@media (max-width: 900px) {
+  .modal.game-settings-modal {
+    width: calc(100vw - calc(var(--spacing-unit) * 6));
+    height: calc(100vh - calc(var(--spacing-unit) * 6));
+  }
+
+  .game-settings-modal {
+    &__shell {
+      flex-direction: column;
+    }
+
+    &__sidebar {
+      width: 100%;
+      min-width: 0;
+      height: auto;
+      border-right: 0;
+      border-bottom: 1px solid var(--secondary-border);
+    }
+
+    &__asset-card,
+    &__backup-card,
+    &__field-row {
+      grid-template-columns: 1fr;
+    }
+  }
+}

src/big-picture/src/components/pages/library/settings-modal/submodals.tsx

@@ -0,0 +1,308 @@
+import type {
+  CreateSteamShortcutOptions,
+  GameArtifact,
+  LibraryGame,
+} from "@types";
+import { formatBytes } from "@shared";
+import { useMemo, useState } from "react";
+import {
+  Button,
+  HorizontalFocusGroup,
+  Modal,
+  NavigationLayer,
+  VerticalFocusGroup,
+} from "../../../common";
+import type { useGameSettingsCloudSync } from "./use-game-settings-cloud-sync";
+import { FocusableInput, ToggleAction } from "./shared";
+
+export function ConfirmationModal({
+  visible,
+  title,
+  description,
+  confirmLabel,
+  danger = false,
+  onClose,
+  onConfirm,
+}: Readonly<{
+  visible: boolean;
+  title: string;
+  description: string;
+  confirmLabel: string;
+  danger?: boolean;
+  onClose: () => void;
+  onConfirm: () => Promise<void> | void;
+}>) {
+  return (
+    <Modal
+      visible={visible}
+      onClose={onClose}
+      className="game-settings-modal__submodal"
+    >
+      <NavigationLayer>
+        <VerticalFocusGroup>
+          <div className="game-settings-modal__submodal-content">
+            <h2>{title}</h2>
+            <p>{description}</p>
+            <HorizontalFocusGroup className="game-settings-modal__actions">
+              <Button variant="secondary" onClick={onClose}>
+                Cancel
+              </Button>
+              <Button
+                variant={danger ? "danger" : "primary"}
+                onClick={async () => {
+                  await onConfirm();
+                  onClose();
+                }}
+              >
+                {confirmLabel}
+              </Button>
+            </HorizontalFocusGroup>
+          </div>
+        </VerticalFocusGroup>
+      </NavigationLayer>
+    </Modal>
+  );
+}
+
+export function CreateSteamShortcutModal({
+  visible,
+  creating,
+  onClose,
+  onConfirm,
+}: Readonly<{
+  visible: boolean;
+  creating: boolean;
+  onClose: () => void;
+  onConfirm: (options: CreateSteamShortcutOptions) => Promise<void>;
+}>) {
+  const [openVr, setOpenVr] = useState(false);
+
+  return (
+    <Modal
+      visible={visible}
+      onClose={onClose}
+      className="game-settings-modal__submodal"
+    >
+      <NavigationLayer>
+        <VerticalFocusGroup>
+          <div className="game-settings-modal__submodal-content">
+            <h2>Create Steam shortcut</h2>
+            <ToggleAction
+              label="Launch with OpenVR"
+              checked={openVr}
+              disabled={creating}
+              onToggle={() => setOpenVr((value) => !value)}
+            />
+            <HorizontalFocusGroup className="game-settings-modal__actions">
+              <Button variant="secondary" onClick={onClose}>
+                Cancel
+              </Button>
+              <Button
+                disabled={creating}
+                onClick={async () => {
+                  await onConfirm({ openVr });
+                  onClose();
+                }}
+              >
+                Create
+              </Button>
+            </HorizontalFocusGroup>
+          </div>
+        </VerticalFocusGroup>
+      </NavigationLayer>
+    </Modal>
+  );
+}
+
+export function ChangePlaytimeModal({
+  visible,
+  game,
+  onClose,
+  onConfirm,
+}: Readonly<{
+  visible: boolean;
+  game: LibraryGame | null;
+  onClose: () => void;
+  onConfirm: (playtimeInSeconds: number) => Promise<void>;
+}>) {
+  const totalMinutes = Math.floor((game?.playTimeInMilliseconds ?? 0) / 60_000);
+  const [hours, setHours] = useState(
+    totalMinutes ? String(Math.floor(totalMinutes / 60)) : ""
+  );
+  const [minutes, setMinutes] = useState(
+    totalMinutes ? String(totalMinutes % 60) : ""
+  );
+
+  return (
+    <Modal
+      visible={visible}
+      onClose={onClose}
+      className="game-settings-modal__submodal"
+    >
+      <NavigationLayer>
+        <VerticalFocusGroup>
+          <div className="game-settings-modal__submodal-content">
+            <h2>Update playtime</h2>
+            <p>Set the manual playtime for {game?.title ?? "this game"}.</p>
+            <div className="game-settings-modal__form-grid">
+              <FocusableInput
+                label="Hours"
+                type="number"
+                value={hours}
+                onChange={setHours}
+                placeholder="0"
+              />
+              <FocusableInput
+                label="Minutes"
+                type="number"
+                value={minutes}
+                onChange={setMinutes}
+                placeholder="0"
+              />
+            </div>
+            <HorizontalFocusGroup className="game-settings-modal__actions">
+              <Button variant="secondary" onClick={onClose}>
+                Cancel
+              </Button>
+              <Button
+                onClick={async () => {
+                  const totalSeconds =
+                    (Number(hours) || 0) * 3600 + (Number(minutes) || 0) * 60;
+                  await onConfirm(totalSeconds);
+                  onClose();
+                }}
+              >
+                Update
+              </Button>
+            </HorizontalFocusGroup>
+          </div>
+        </VerticalFocusGroup>
+      </NavigationLayer>
+    </Modal>
+  );
+}
+
+export function RenameArtifactModal({
+  visible,
+  artifact,
+  onClose,
+  onConfirm,
+}: Readonly<{
+  visible: boolean;
+  artifact: GameArtifact | null;
+  onClose: () => void;
+  onConfirm: (artifactId: string, label: string) => Promise<void>;
+}>) {
+  const [label, setLabel] = useState(artifact?.label ?? "");
+
+  return (
+    <Modal
+      visible={visible}
+      onClose={onClose}
+      className="game-settings-modal__submodal"
+    >
+      <NavigationLayer>
+        <VerticalFocusGroup>
+          <div className="game-settings-modal__submodal-content">
+            <h2>Rename backup</h2>
+            <FocusableInput
+              label="Backup name"
+              value={label}
+              onChange={setLabel}
+              placeholder="Backup name"
+            />
+            <HorizontalFocusGroup className="game-settings-modal__actions">
+              <Button variant="secondary" onClick={onClose}>
+                Cancel
+              </Button>
+              <Button
+                disabled={!artifact || !label.trim()}
+                onClick={async () => {
+                  if (!artifact) return;
+                  await onConfirm(artifact.id, label.trim());
+                  onClose();
+                }}
+              >
+                Save
+              </Button>
+            </HorizontalFocusGroup>
+          </div>
+        </VerticalFocusGroup>
+      </NavigationLayer>
+    </Modal>
+  );
+}
+
+export function ManageFilesModal({
+  visible,
+  backupPreview,
+  onClose,
+  onSetBackupPath,
+}: Readonly<{
+  visible: boolean;
+  backupPreview: ReturnType<typeof useGameSettingsCloudSync>["backupPreview"];
+  onClose: () => void;
+  onSetBackupPath: (path: string | null) => Promise<void>;
+}>) {
+  const files = useMemo(() => {
+    if (!backupPreview) return [];
+
+    const [gameBackup] = Object.values(backupPreview.games);
+    if (!gameBackup) return [];
+
+    return Object.entries(gameBackup.files).map(([path, file]) => ({
+      path,
+      bytes: file.bytes,
+    }));
+  }, [backupPreview]);
+
+  return (
+    <Modal
+      visible={visible}
+      onClose={onClose}
+      className="game-settings-modal__submodal game-settings-modal__submodal--wide"
+    >
+      <NavigationLayer>
+        <VerticalFocusGroup>
+          <div className="game-settings-modal__submodal-content">
+            <h2>Manage files</h2>
+            <p>Choose automatic mapping or a custom folder for this game.</p>
+            <HorizontalFocusGroup className="game-settings-modal__actions">
+              <Button variant="secondary" onClick={() => onSetBackupPath(null)}>
+                Automatic mapping
+              </Button>
+              <Button
+                variant="secondary"
+                onClick={async () => {
+                  const { filePaths } =
+                    await globalThis.window.electron.showOpenDialog({
+                      properties: ["openDirectory"],
+                    });
+
+                  if (filePaths[0]) await onSetBackupPath(filePaths[0]);
+                }}
+              >
+                Select folder
+              </Button>
+            </HorizontalFocusGroup>
+            <ul className="game-settings-modal__file-list">
+              {files.map((file) => (
+                <li key={file.path} className="game-settings-modal__file-item">
+                  <Button
+                    variant="link"
+                    onClick={() =>
+                      globalThis.window.electron.showItemInFolder(file.path)
+                    }
+                  >
+                    {file.path.split(/[\\/]/).at(-1) ?? file.path}
+                  </Button>
+                  <span>{formatBytes(file.bytes)}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </VerticalFocusGroup>
+      </NavigationLayer>
+    </Modal>
+  );
+}

src/big-picture/src/components/pages/library/settings-modal/types.ts

@@ -0,0 +1,5 @@
+export type GameSettingsConfirmation =
+  | "remove-library"
+  | "reset-achievements"
+  | "remove-files"
+  | "delete-artifact";

src/big-picture/src/components/pages/library/settings-modal/use-game-settings-cloud-sync.ts

@@ -0,0 +1,283 @@
+import type { GameArtifact, LibraryGame, LudusaviBackup } from "@types";
+import type { AxiosProgressEvent } from "axios";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+interface UseGameSettingsCloudSyncProps {
+  visible: boolean;
+  game: LibraryGame | null;
+  hasActiveSubscription: boolean;
+  onFeedback: (type: "success" | "error" | "info", message: string) => void;
+}
+
+export enum GameSettingsCloudSyncState {
+  New,
+  Different,
+  Same,
+  Unknown,
+}
+
+export function useGameSettingsCloudSync({
+  visible,
+  game,
+  hasActiveSubscription,
+  onFeedback,
+}: UseGameSettingsCloudSyncProps) {
+  const [artifacts, setArtifacts] = useState<GameArtifact[]>([]);
+  const [backupPreview, setBackupPreview] = useState<LudusaviBackup | null>(
+    null
+  );
+  const [loadingPreview, setLoadingPreview] = useState(false);
+  const [uploadingBackup, setUploadingBackup] = useState(false);
+  const [restoringBackup, setRestoringBackup] = useState(false);
+  const [freezingArtifact, setFreezingArtifact] = useState(false);
+  const [deletingArtifact, setDeletingArtifact] = useState(false);
+  const [backupDownloadProgress, setBackupDownloadProgress] =
+    useState<AxiosProgressEvent | null>(null);
+
+  const getGameArtifacts = useCallback(async () => {
+    if (!game || game.shop === "custom" || !hasActiveSubscription) {
+      setArtifacts([]);
+      return;
+    }
+
+    const params = new URLSearchParams({
+      objectId: game.objectId,
+      shop: game.shop,
+    });
+
+    const { electron } = globalThis as typeof globalThis & Window;
+
+    const results = await electron.hydraApi
+      .get<GameArtifact[]>(`/profile/games/artifacts?${params.toString()}`, {
+        needsSubscription: true,
+      })
+      .catch(() => []);
+
+    setArtifacts(results);
+  }, [game, hasActiveSubscription]);
+
+  const getGameBackupPreview = useCallback(async () => {
+    if (!game || game.shop === "custom" || !hasActiveSubscription) {
+      setBackupPreview(null);
+      return;
+    }
+
+    setLoadingPreview(true);
+    try {
+      const preview = await globalThis.window.electron.getGameBackupPreview(
+        game.objectId,
+        game.shop
+      );
+      setBackupPreview(preview);
+    } catch {
+      setBackupPreview(null);
+      onFeedback("error", "Could not load backup preview");
+    } finally {
+      setLoadingPreview(false);
+    }
+  }, [game, hasActiveSubscription, onFeedback]);
+
+  const refreshCloudSync = useCallback(async () => {
+    await Promise.all([getGameBackupPreview(), getGameArtifacts()]);
+  }, [getGameArtifacts, getGameBackupPreview]);
+
+  useEffect(() => {
+    if (!visible || !game || game.shop === "custom" || !hasActiveSubscription) {
+      setArtifacts([]);
+      setBackupPreview(null);
+      return;
+    }
+
+    void refreshCloudSync();
+  }, [game, hasActiveSubscription, refreshCloudSync, visible]);
+
+  useEffect(() => {
+    if (!visible || !game) return;
+
+    const removeUploadCompleteListener =
+      globalThis.window.electron.onUploadComplete(
+        game.objectId,
+        game.shop,
+        () => {
+          setUploadingBackup(false);
+          onFeedback("success", "Backup uploaded");
+          void refreshCloudSync();
+        }
+      );
+
+    const removeDownloadCompleteListener =
+      globalThis.window.electron.onBackupDownloadComplete(
+        game.objectId,
+        game.shop,
+        () => {
+          setRestoringBackup(false);
+          setBackupDownloadProgress(null);
+          onFeedback("success", "Backup restored");
+          void refreshCloudSync();
+        }
+      );
+
+    const removeDownloadProgressListener =
+      globalThis.window.electron.onBackupDownloadProgress(
+        game.objectId,
+        game.shop,
+        setBackupDownloadProgress
+      );
+
+    return () => {
+      removeUploadCompleteListener();
+      removeDownloadCompleteListener();
+      removeDownloadProgressListener();
+    };
+  }, [game, onFeedback, refreshCloudSync, visible]);
+
+  useEffect(() => {
+    setArtifacts([]);
+    setBackupPreview(null);
+    setUploadingBackup(false);
+    setRestoringBackup(false);
+    setBackupDownloadProgress(null);
+  }, [game?.id]);
+
+  const uploadSaveGame = useCallback(async () => {
+    if (!game) return;
+
+    setUploadingBackup(true);
+    try {
+      await globalThis.window.electron.uploadSaveGame(
+        game.objectId,
+        game.shop,
+        null
+      );
+    } catch {
+      setUploadingBackup(false);
+      onFeedback("error", "Backup failed");
+    }
+  }, [game, onFeedback]);
+
+  const downloadGameArtifact = useCallback(
+    async (gameArtifactId: string) => {
+      if (!game) return;
+
+      setRestoringBackup(true);
+      setBackupDownloadProgress(null);
+      try {
+        await globalThis.window.electron.downloadGameArtifact(
+          game.objectId,
+          game.shop,
+          gameArtifactId
+        );
+      } catch {
+        setRestoringBackup(false);
+        onFeedback("error", "Could not restore backup");
+      }
+    },
+    [game, onFeedback]
+  );
+
+  const deleteGameArtifact = useCallback(
+    async (gameArtifactId: string) => {
+      setDeletingArtifact(true);
+      try {
+        await globalThis.window.electron.hydraApi.delete(
+          `/profile/games/artifacts/${gameArtifactId}`
+        );
+        await refreshCloudSync();
+        onFeedback("success", "Backup deleted");
+      } catch {
+        onFeedback("error", "Could not delete backup");
+      } finally {
+        setDeletingArtifact(false);
+      }
+    },
+    [onFeedback, refreshCloudSync]
+  );
+
+  const renameGameArtifact = useCallback(
+    async (gameArtifactId: string, label: string) => {
+      await globalThis.window.electron.hydraApi.put(
+        `/profile/games/artifacts/${gameArtifactId}`,
+        {
+          data: {
+            label,
+          },
+        }
+      );
+      await getGameArtifacts();
+      onFeedback("success", "Backup renamed");
+    },
+    [getGameArtifacts, onFeedback]
+  );
+
+  const toggleArtifactFreeze = useCallback(
+    async (gameArtifactId: string, freeze: boolean) => {
+      setFreezingArtifact(true);
+      try {
+        const endpoint = freeze ? "freeze" : "unfreeze";
+        await globalThis.window.electron.hydraApi.put(
+          `/profile/games/artifacts/${gameArtifactId}/${endpoint}`
+        );
+        await getGameArtifacts();
+        onFeedback("success", freeze ? "Backup frozen" : "Backup unfrozen");
+      } catch {
+        onFeedback("error", "Could not update backup");
+      } finally {
+        setFreezingArtifact(false);
+      }
+    },
+    [getGameArtifacts, onFeedback]
+  );
+
+  const setBackupPath = useCallback(
+    async (backupPath: string | null) => {
+      if (!game) return;
+
+      await globalThis.window.electron.selectGameBackupPath(
+        game.shop,
+        game.objectId,
+        backupPath
+      );
+      await getGameBackupPreview();
+      onFeedback(
+        "success",
+        backupPath ? "Custom backup location set" : "Automatic mapping enabled"
+      );
+    },
+    [game, getGameBackupPreview, onFeedback]
+  );
+
+  const backupState = useMemo(() => {
+    if (!backupPreview) return GameSettingsCloudSyncState.Unknown;
+    if (backupPreview.overall.changedGames.new)
+      return GameSettingsCloudSyncState.New;
+    if (backupPreview.overall.changedGames.different)
+      return GameSettingsCloudSyncState.Different;
+    if (backupPreview.overall.changedGames.same)
+      return GameSettingsCloudSyncState.Same;
+
+    return GameSettingsCloudSyncState.Unknown;
+  }, [backupPreview]);
+
+  return {
+    artifacts,
+    backupPreview,
+    backupState,
+    loadingPreview,
+    uploadingBackup,
+    restoringBackup,
+    freezingArtifact,
+    deletingArtifact,
+    backupDownloadProgress,
+    getGameArtifacts,
+    getGameBackupPreview,
+    refreshCloudSync,
+    uploadSaveGame,
+    downloadGameArtifact,
+    deleteGameArtifact,
+    renameGameArtifact,
+    toggleArtifactFreeze,
+    setBackupPath,
+  };
+}
+
+export type GameSettingsCloudSync = ReturnType<typeof useGameSettingsCloudSync>;

src/big-picture/src/components/pages/library/settings-modal/use-game-settings-controller.ts

@@ -0,0 +1,861 @@
+import type {
+  CreateSteamShortcutOptions,
+  LibraryGame,
+  ProtonVersion,
+  ShortcutLocation,
+  UserAchievement,
+  UserDetails,
+  UserPreferences,
+} from "@types";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+type FeedbackType = "success" | "error" | "info";
+
+export interface GameSettingsFeedback {
+  type: FeedbackType;
+  message: string;
+}
+
+export type GameSettingsCategoryId =
+  | "general"
+  | "assets"
+  | "hydra_cloud"
+  | "compatibility"
+  | "downloads"
+  | "danger_zone";
+
+export type GameSettingsAssetType = "icon" | "logo" | "hero";
+
+interface UseGameSettingsControllerProps {
+  visible: boolean;
+  initialGame: LibraryGame | null;
+  onClose: () => void;
+  onGameUpdated?: (game: LibraryGame | null) => void;
+}
+
+function getLocalPath(value?: string | null) {
+  return value?.startsWith("local:") ? value.slice("local:".length) : value;
+}
+
+function getAssetField(assetType: GameSettingsAssetType) {
+  if (assetType === "icon") {
+    return {
+      customUrl: "customIconUrl",
+      customOriginalPath: "customOriginalIconPath",
+      url: "iconUrl",
+      originalPath: "originalIconPath",
+    } as const;
+  }
+
+  if (assetType === "logo") {
+    return {
+      customUrl: "customLogoImageUrl",
+      customOriginalPath: "customOriginalLogoPath",
+      url: "logoImageUrl",
+      originalPath: "originalLogoPath",
+    } as const;
+  }
+
+  return {
+    customUrl: "customHeroImageUrl",
+    customOriginalPath: "customOriginalHeroPath",
+    url: "libraryHeroImageUrl",
+    originalPath: "originalHeroPath",
+  } as const;
+}
+
+function isSubscriptionActive(userDetails: UserDetails | null) {
+  const expiresAt = new Date(userDetails?.subscription?.expiresAt ?? 0);
+
+  return expiresAt > new Date();
+}
+
+async function updateGameTitle(game: LibraryGame, title: string) {
+  if (game.shop === "custom") {
+    await globalThis.window.electron.updateCustomGame({
+      shop: game.shop,
+      objectId: game.objectId,
+      title,
+      iconUrl: game.iconUrl || undefined,
+      logoImageUrl: game.logoImageUrl || undefined,
+      libraryHeroImageUrl: game.libraryHeroImageUrl || undefined,
+      originalIconPath: getLocalPath(game.iconUrl) || undefined,
+      originalLogoPath: getLocalPath(game.logoImageUrl) || undefined,
+      originalHeroPath: getLocalPath(game.libraryHeroImageUrl) || undefined,
+    });
+    return;
+  }
+
+  await globalThis.window.electron.updateGameCustomAssets({
+    shop: game.shop,
+    objectId: game.objectId,
+    title,
+  });
+}
+
+async function updateGameAsset(
+  game: LibraryGame,
+  assetType: GameSettingsAssetType,
+  copiedAssetUrl: string | null,
+  sourcePath: string | null
+) {
+  const fields = getAssetField(assetType);
+
+  if (game.shop === "custom") {
+    await globalThis.window.electron.updateCustomGame({
+      shop: game.shop,
+      objectId: game.objectId,
+      title: game.title,
+      iconUrl:
+        fields.url === "iconUrl"
+          ? copiedAssetUrl || undefined
+          : game.iconUrl || undefined,
+      logoImageUrl:
+        fields.url === "logoImageUrl"
+          ? copiedAssetUrl || undefined
+          : game.logoImageUrl || undefined,
+      libraryHeroImageUrl:
+        fields.url === "libraryHeroImageUrl"
+          ? copiedAssetUrl || undefined
+          : game.libraryHeroImageUrl || undefined,
+      [fields.originalPath]: sourcePath || undefined,
+    });
+    return;
+  }
+
+  await globalThis.window.electron.updateGameCustomAssets({
+    shop: game.shop,
+    objectId: game.objectId,
+    title: game.title,
+    [fields.customUrl]: copiedAssetUrl,
+    [fields.customOriginalPath]: sourcePath,
+  });
+}
+
+export function useGameSettingsController({
+  visible,
+  initialGame,
+  onClose,
+  onGameUpdated,
+}: UseGameSettingsControllerProps) {
+  const [game, setGame] = useState<LibraryGame | null>(initialGame);
+  const [selectedCategory, setSelectedCategory] =
+    useState<GameSettingsCategoryId>("general");
+  const [feedback, setFeedback] = useState<GameSettingsFeedback | null>(null);
+  const [gameTitle, setGameTitle] = useState(initialGame?.title ?? "");
+  const [launchOptions, setLaunchOptions] = useState(
+    initialGame?.launchOptions ?? ""
+  );
+  const [updatingTitle, setUpdatingTitle] = useState(false);
+  const [busyAction, setBusyAction] = useState<string | null>(null);
+  const [saveFolderPath, setSaveFolderPath] = useState<string | null>(null);
+  const [loadingSaveFolder, setLoadingSaveFolder] = useState(false);
+  const [steamShortcutExists, setSteamShortcutExists] = useState(false);
+  const [userPreferences, setUserPreferences] =
+    useState<UserPreferences | null>(null);
+  const [userDetails, setUserDetails] = useState<UserDetails | null>(null);
+  const [achievements, setAchievements] = useState<UserAchievement[]>([]);
+  const [protonVersions, setProtonVersions] = useState<ProtonVersion[]>([]);
+  const [selectedProtonPath, setSelectedProtonPath] = useState(
+    initialGame?.protonPath ?? ""
+  );
+  const [defaultWinePrefixPath, setDefaultWinePrefixPath] = useState<
+    string | null
+  >(null);
+  const [gamemodeAvailable, setGamemodeAvailable] = useState(false);
+  const [mangohudAvailable, setMangohudAvailable] = useState(false);
+  const [winetricksAvailable, setWinetricksAvailable] = useState(false);
+  const [autoRunGamemode, setAutoRunGamemode] = useState(false);
+  const [autoRunMangohud, setAutoRunMangohud] = useState(false);
+  const [isDeletingGameFiles, setIsDeletingGameFiles] = useState(false);
+  const [isDeletingAchievements, setIsDeletingAchievements] = useState(false);
+
+  const notify = useCallback((type: FeedbackType, message: string) => {
+    setFeedback({ type, message });
+  }, []);
+
+  const refreshGame = useCallback(async () => {
+    if (!initialGame) return null;
+
+    const updatedGame = await globalThis.window.electron.getGameByObjectId(
+      initialGame.shop,
+      initialGame.objectId
+    );
+
+    setGame(updatedGame);
+    onGameUpdated?.(updatedGame);
+
+    return updatedGame;
+  }, [initialGame, onGameUpdated]);
+
+  useEffect(() => {
+    if (!visible) return;
+
+    setGame(initialGame);
+    setSelectedCategory("general");
+    setFeedback(null);
+    setGameTitle(initialGame?.title ?? "");
+    setLaunchOptions(initialGame?.launchOptions ?? "");
+    setSelectedProtonPath(initialGame?.protonPath ?? "");
+    setAutoRunGamemode(initialGame?.autoRunGamemode === true);
+    setAutoRunMangohud(initialGame?.autoRunMangohud === true);
+  }, [initialGame, visible]);
+
+  useEffect(() => {
+    if (!visible || !game) return;
+
+    globalThis.window.electron
+      .getUserPreferences()
+      .then(setUserPreferences)
+      .catch(noop);
+    globalThis.window.electron
+      .getMe()
+      .then(setUserDetails)
+      .catch(() => setUserDetails(null));
+    if (game.shop === "custom") return;
+
+    globalThis.window.electron
+      .getUnlockedAchievements(game.objectId, game.shop)
+      .then(setAchievements)
+      .catch(() => setAchievements([]));
+    globalThis.window.electron
+      .checkSteamShortcut(game.shop, game.objectId)
+      .then(setSteamShortcutExists)
+      .catch(() => setSteamShortcutExists(false));
+  }, [game, visible]);
+
+  useEffect(() => {
+    if (
+      !visible ||
+      !game ||
+      game.shop === "custom" ||
+      globalThis.window.electron.platform !== "win32"
+    ) {
+      setSaveFolderPath(null);
+      return;
+    }
+
+    setLoadingSaveFolder(true);
+    globalThis.window.electron
+      .getGameSaveFolder(game.shop, game.objectId)
+      .then(setSaveFolderPath)
+      .catch(() => setSaveFolderPath(null))
+      .finally(() => setLoadingSaveFolder(false));
+  }, [game, visible]);
+
+  useEffect(() => {
+    if (!visible || globalThis.window.electron.platform !== "linux") {
+      setProtonVersions([]);
+      setDefaultWinePrefixPath(null);
+      setGamemodeAvailable(false);
+      setMangohudAvailable(false);
+      setWinetricksAvailable(false);
+      return;
+    }
+
+    globalThis.window.electron
+      .getInstalledProtonVersions()
+      .then(setProtonVersions)
+      .catch(() => setProtonVersions([]));
+    globalThis.window.electron
+      .getDefaultWinePrefixSelectionPath()
+      .then(setDefaultWinePrefixPath)
+      .catch(() => setDefaultWinePrefixPath(null));
+    globalThis.window.electron
+      .isGamemodeAvailable()
+      .then(setGamemodeAvailable)
+      .catch(() => setGamemodeAvailable(false));
+    globalThis.window.electron
+      .isMangohudAvailable()
+      .then(setMangohudAvailable)
+      .catch(() => setMangohudAvailable(false));
+    globalThis.window.electron
+      .isWinetricksAvailable()
+      .then(setWinetricksAvailable)
+      .catch(() => setWinetricksAvailable(false));
+  }, [visible]);
+
+  const runAction = useCallback(
+    async (actionId: string, action: () => Promise<void>, success?: string) => {
+      setBusyAction(actionId);
+      setFeedback(null);
+
+      try {
+        await action();
+        if (success) notify("success", success);
+      } catch (error) {
+        notify(
+          "error",
+          error instanceof Error ? error.message : "Something went wrong"
+        );
+      } finally {
+        setBusyAction(null);
+      }
+    },
+    [notify]
+  );
+
+  const handleSaveTitle = useCallback(async () => {
+    if (!game) return;
+
+    const trimmedTitle = gameTitle.trim();
+    if (!trimmedTitle) {
+      notify("error", "Title is required");
+      setGameTitle(game.title);
+      return;
+    }
+
+    if (trimmedTitle === game.title) return;
+
+    setUpdatingTitle(true);
+    try {
+      await updateGameTitle(game, trimmedTitle);
+      await refreshGame();
+      notify("success", "Game title updated");
+    } catch (error) {
+      setGameTitle(game.title);
+      notify(
+        "error",
+        error instanceof Error ? error.message : "Could not update title"
+      );
+    } finally {
+      setUpdatingTitle(false);
+    }
+  }, [game, gameTitle, notify, refreshGame]);
+
+  const handleSelectExecutable = useCallback(async () => {
+    if (!game) return;
+
+    await runAction(
+      "select-executable",
+      async () => {
+        const defaultPath =
+          userPreferences?.downloadsPath ??
+          (await globalThis.window.electron.getDefaultDownloadsPath());
+        const { filePaths } = await globalThis.window.electron.showOpenDialog({
+          properties: ["openFile"],
+          defaultPath,
+          filters: [
+            {
+              name: "Game executable",
+              extensions: ["exe", "lnk"],
+            },
+          ],
+        });
+
+        const executablePath = filePaths[0];
+        if (!executablePath) return;
+
+        const gameUsingPath =
+          await globalThis.window.electron.verifyExecutablePathInUse(
+            executablePath
+          );
+        if (gameUsingPath) {
+          throw new Error(`Executable already used by ${gameUsingPath.title}`);
+        }
+
+        await globalThis.window.electron.updateExecutablePath(
+          game.shop,
+          game.objectId,
+          executablePath
+        );
+        await refreshGame();
+      },
+      "Executable path updated"
+    );
+  }, [game, refreshGame, runAction, userPreferences?.downloadsPath]);
+
+  const handleClearExecutable = useCallback(async () => {
+    if (!game) return;
+
+    await runAction(
+      "clear-executable",
+      async () => {
+        await globalThis.window.electron.updateExecutablePath(
+          game.shop,
+          game.objectId,
+          null
+        );
+        await refreshGame();
+      },
+      "Executable path cleared"
+    );
+  }, [game, refreshGame, runAction]);
+
+  const handleSaveLaunchOptions = useCallback(async () => {
+    if (!game) return;
+
+    await runAction(
+      "save-launch-options",
+      async () => {
+        const trimmedValue = launchOptions.trim();
+        await globalThis.window.electron.updateLaunchOptions(
+          game.shop,
+          game.objectId,
+          trimmedValue || null
+        );
+        await refreshGame();
+      },
+      "Launch options updated"
+    );
+  }, [game, launchOptions, refreshGame, runAction]);
+
+  const handleClearLaunchOptions = useCallback(async () => {
+    setLaunchOptions("");
+    if (!game) return;
+
+    await runAction(
+      "clear-launch-options",
+      async () => {
+        await globalThis.window.electron.updateLaunchOptions(
+          game.shop,
+          game.objectId,
+          null
+        );
+        await refreshGame();
+      },
+      "Launch options cleared"
+    );
+  }, [game, refreshGame, runAction]);
+
+  const handleOpenExecutableFolder = useCallback(async () => {
+    if (!game) return;
+
+    await runAction("open-executable", async () => {
+      await globalThis.window.electron.openGameExecutablePath(
+        game.shop,
+        game.objectId
+      );
+    });
+  }, [game, runAction]);
+
+  const handleOpenSaveFolder = useCallback(async () => {
+    if (!game || !saveFolderPath) return;
+
+    await runAction("open-save-folder", async () => {
+      await globalThis.window.electron.openGameSaveFolder(
+        game.shop,
+        game.objectId,
+        saveFolderPath
+      );
+    });
+  }, [game, runAction, saveFolderPath]);
+
+  const handleCreateShortcut = useCallback(
+    async (location: ShortcutLocation) => {
+      if (!game) return;
+
+      await runAction(
+        `create-shortcut-${location}`,
+        async () => {
+          const success = await globalThis.window.electron.createGameShortcut(
+            game.shop,
+            game.objectId,
+            location
+          );
+          if (!success) throw new Error("Could not create shortcut");
+        },
+        "Shortcut created"
+      );
+    },
+    [game, runAction]
+  );
+
+  const handleCreateSteamShortcut = useCallback(
+    async (options: CreateSteamShortcutOptions) => {
+      if (!game) return;
+
+      await runAction(
+        "create-steam-shortcut",
+        async () => {
+          await globalThis.window.electron.createSteamShortcut(
+            game.shop,
+            game.objectId,
+            options
+          );
+          const exists = await globalThis.window.electron.checkSteamShortcut(
+            game.shop,
+            game.objectId
+          );
+          setSteamShortcutExists(exists);
+          await refreshGame();
+        },
+        "Steam shortcut created"
+      );
+    },
+    [game, refreshGame, runAction]
+  );
+
+  const handleDeleteSteamShortcut = useCallback(async () => {
+    if (!game) return;
+
+    await runAction(
+      "delete-steam-shortcut",
+      async () => {
+        await globalThis.window.electron.deleteSteamShortcut(
+          game.shop,
+          game.objectId
+        );
+        setSteamShortcutExists(false);
+        await refreshGame();
+      },
+      "Steam shortcut deleted"
+    );
+  }, [game, refreshGame, runAction]);
+
+  const handleUpdateAsset = useCallback(
+    async (assetType: GameSettingsAssetType, sourcePath: string | null) => {
+      if (!game) return;
+
+      await runAction(
+        `update-asset-${assetType}`,
+        async () => {
+          const copiedAssetUrl = sourcePath
+            ? await globalThis.window.electron.copyCustomGameAsset(
+                sourcePath,
+                assetType
+              )
+            : null;
+
+          await updateGameAsset(game, assetType, copiedAssetUrl, sourcePath);
+          await refreshGame();
+        },
+        sourcePath ? "Asset updated" : "Asset removed"
+      );
+    },
+    [game, refreshGame, runAction]
+  );
+
+  const handleChooseAsset = useCallback(
+    async (assetType: GameSettingsAssetType) => {
+      const { filePaths } = await globalThis.window.electron.showOpenDialog({
+        properties: ["openFile"],
+        filters: [
+          {
+            name: "Images",
+            extensions: ["jpg", "jpeg", "png", "webp", "ico"],
+          },
+        ],
+      });
+
+      if (filePaths[0]) {
+        await handleUpdateAsset(assetType, filePaths[0]);
+      }
+    },
+    [handleUpdateAsset]
+  );
+
+  const handleResetAsset = useCallback(
+    async (assetType: GameSettingsAssetType) => {
+      if (game?.shop !== "custom") {
+        await handleUpdateAsset(assetType, null);
+        return;
+      }
+
+      const fields = getAssetField(assetType);
+      const originalPath = getLocalPath(game?.[fields.url]);
+
+      await handleUpdateAsset(assetType, originalPath ?? null);
+    },
+    [game, handleUpdateAsset]
+  );
+
+  const handleChangeWinePrefixPath = useCallback(async () => {
+    if (!game) return;
+
+    await runAction(
+      "wine-prefix",
+      async () => {
+        const { filePaths } = await globalThis.window.electron.showOpenDialog({
+          properties: ["openDirectory"],
+          defaultPath: game.winePrefixPath ?? defaultWinePrefixPath ?? "",
+        });
+        if (!filePaths[0]) return;
+
+        await globalThis.window.electron.selectGameWinePrefix(
+          game.shop,
+          game.objectId,
+          filePaths[0]
+        );
+        await refreshGame();
+      },
+      "Wine prefix updated"
+    );
+  }, [defaultWinePrefixPath, game, refreshGame, runAction]);
+
+  const handleClearWinePrefixPath = useCallback(async () => {
+    if (!game) return;
+
+    await runAction(
+      "clear-wine-prefix",
+      async () => {
+        await globalThis.window.electron.selectGameWinePrefix(
+          game.shop,
+          game.objectId,
+          null
+        );
+        await refreshGame();
+      },
+      "Wine prefix cleared"
+    );
+  }, [game, refreshGame, runAction]);
+
+  const handleChangeProtonVersion = useCallback(
+    async (protonPath: string) => {
+      if (!game) return;
+
+      setSelectedProtonPath(protonPath);
+      await runAction(
+        "proton-version",
+        async () => {
+          await globalThis.window.electron.selectGameProtonPath(
+            game.shop,
+            game.objectId,
+            protonPath || null
+          );
+          await refreshGame();
+        },
+        "Proton version updated"
+      );
+    },
+    [game, refreshGame, runAction]
+  );
+
+  const handleToggleGamemode = useCallback(async () => {
+    if (!game) return;
+    const nextValue = !autoRunGamemode;
+    setAutoRunGamemode(nextValue);
+
+    await runAction("gamemode", async () => {
+      await globalThis.window.electron.toggleGameGamemode(
+        game.shop,
+        game.objectId,
+        nextValue
+      );
+      await refreshGame();
+    });
+  }, [autoRunGamemode, game, refreshGame, runAction]);
+
+  const handleToggleMangohud = useCallback(async () => {
+    if (!game) return;
+    const nextValue = !autoRunMangohud;
+    setAutoRunMangohud(nextValue);
+
+    await runAction("mangohud", async () => {
+      await globalThis.window.electron.toggleGameMangohud(
+        game.shop,
+        game.objectId,
+        nextValue
+      );
+      await refreshGame();
+    });
+  }, [autoRunMangohud, game, refreshGame, runAction]);
+
+  const handleOpenWinetricks = useCallback(async () => {
+    if (!game) return;
+
+    await runAction(
+      "winetricks",
+      async () => {
+        const success = await globalThis.window.electron.openGameWinetricks(
+          game.shop,
+          game.objectId
+        );
+        if (!success) throw new Error("Could not open Winetricks");
+      },
+      "Winetricks opened"
+    );
+  }, [game, runAction]);
+
+  const handleToggleAutomaticCloudSync = useCallback(async () => {
+    if (!game) return;
+    const nextValue = !game.automaticCloudSync;
+
+    await runAction("automatic-cloud-sync", async () => {
+      await globalThis.window.electron.toggleAutomaticCloudSync(
+        game.shop,
+        game.objectId,
+        nextValue
+      );
+      await refreshGame();
+    });
+  }, [game, refreshGame, runAction]);
+
+  const handleOpenDownloadFolder = useCallback(async () => {
+    if (!game) return;
+
+    await runAction("download-folder", async () => {
+      await globalThis.window.electron.openGameInstallerPath(
+        game.shop,
+        game.objectId
+      );
+    });
+  }, [game, runAction]);
+
+  const handleRemoveGameFiles = useCallback(async () => {
+    if (!game) return;
+
+    setIsDeletingGameFiles(true);
+    await runAction(
+      "remove-files",
+      async () => {
+        await globalThis.window.electron.deleteGameFolder(
+          game.shop,
+          game.objectId
+        );
+        await refreshGame();
+      },
+      "Game files removed"
+    );
+    setIsDeletingGameFiles(false);
+  }, [game, refreshGame, runAction]);
+
+  const handleRemoveFromLibrary = useCallback(async () => {
+    if (!game) return;
+
+    await runAction(
+      "remove-library",
+      async () => {
+        if (game.download?.status === "active") {
+          await globalThis.window.electron.cancelGameDownload(
+            game.shop,
+            game.objectId
+          );
+        }
+        await globalThis.window.electron.removeGameFromLibrary(
+          game.shop,
+          game.objectId
+        );
+        onGameUpdated?.(null);
+        onClose();
+      },
+      "Game removed from library"
+    );
+  }, [game, onClose, onGameUpdated, runAction]);
+
+  const handleResetAchievements = useCallback(async () => {
+    if (!game) return;
+
+    setIsDeletingAchievements(true);
+    await runAction(
+      "reset-achievements",
+      async () => {
+        await globalThis.window.electron.resetGameAchievements(
+          game.shop,
+          game.objectId
+        );
+        await refreshGame();
+        setAchievements([]);
+      },
+      "Achievements reset"
+    );
+    setIsDeletingAchievements(false);
+  }, [game, refreshGame, runAction]);
+
+  const handleChangePlaytime = useCallback(
+    async (playtimeInSeconds: number) => {
+      if (!game) return;
+
+      await runAction(
+        "change-playtime",
+        async () => {
+          await globalThis.window.electron.changeGamePlayTime(
+            game.shop,
+            game.objectId,
+            playtimeInSeconds
+          );
+          await refreshGame();
+        },
+        "Playtime updated"
+      );
+    },
+    [game, refreshGame, runAction]
+  );
+
+  const displayedWinePrefixPath = useMemo(() => {
+    if (!game) return null;
+
+    return (
+      game.winePrefixPath ??
+      (defaultWinePrefixPath
+        ? `${defaultWinePrefixPath}/${game.objectId}`
+        : null)
+    );
+  }, [defaultWinePrefixPath, game]);
+
+  const hasAchievements =
+    achievements.some((achievement) => achievement.unlocked) ||
+    (game?.unlockedAchievementCount ?? 0) > 0;
+  const hasActiveSubscription = isSubscriptionActive(userDetails);
+  const globalAutoRunGamemode = userPreferences?.autoRunGamemode === true;
+  const globalAutoRunMangohud = userPreferences?.autoRunMangohud === true;
+  const isGameDownloading = game?.download?.status === "active";
+
+  return {
+    game,
+    selectedCategory,
+    setSelectedCategory,
+    feedback,
+    setFeedback,
+    gameTitle,
+    setGameTitle,
+    launchOptions,
+    setLaunchOptions,
+    updatingTitle,
+    busyAction,
+    saveFolderPath,
+    loadingSaveFolder,
+    steamShortcutExists,
+    userDetails,
+    hasActiveSubscription,
+    hasAchievements,
+    protonVersions,
+    selectedProtonPath,
+    displayedWinePrefixPath,
+    gamemodeAvailable,
+    mangohudAvailable,
+    winetricksAvailable,
+    autoRunGamemode,
+    autoRunMangohud,
+    globalAutoRunGamemode,
+    globalAutoRunMangohud,
+    isGameDownloading,
+    isDeletingGameFiles,
+    isDeletingAchievements,
+    notify,
+    refreshGame,
+    handleSaveTitle,
+    handleSelectExecutable,
+    handleClearExecutable,
+    handleSaveLaunchOptions,
+    handleClearLaunchOptions,
+    handleOpenExecutableFolder,
+    handleOpenSaveFolder,
+    handleCreateShortcut,
+    handleCreateSteamShortcut,
+    handleDeleteSteamShortcut,
+    handleChooseAsset,
+    handleUpdateAsset,
+    handleResetAsset,
+    handleChangeWinePrefixPath,
+    handleClearWinePrefixPath,
+    handleChangeProtonVersion,
+    handleToggleGamemode,
+    handleToggleMangohud,
+    handleOpenWinetricks,
+    handleToggleAutomaticCloudSync,
+    handleOpenDownloadFolder,
+    handleRemoveGameFiles,
+    handleRemoveFromLibrary,
+    handleResetAchievements,
+    handleChangePlaytime,
+  };
+}
+
+export type GameSettingsController = ReturnType<
+  typeof useGameSettingsController
+>;
+
+function noop() {
+  return undefined;
+}

src/big-picture/src/components/pages/library/use-library-favorite.ts

@@ -0,0 +1,34 @@
+import type { LibraryGame } from "@types";
+import { useCallback, useState } from "react";
+import { IS_DESKTOP } from "../../../constants";
+
+export function useLibraryFavorite(updateLibrary: () => Promise<void>) {
+  const [favoriteLoadingGameId, setFavoriteLoadingGameId] = useState<
+    string | null
+  >(null);
+
+  const toggleFavorite = useCallback(
+    async (game: LibraryGame) => {
+      if (!IS_DESKTOP) return;
+
+      setFavoriteLoadingGameId(game.id);
+
+      try {
+        const toggle = game.favorite
+          ? globalThis.window.electron.removeGameFromFavorites
+          : globalThis.window.electron.addGameToFavorites;
+
+        await toggle(game.shop, game.objectId);
+        await updateLibrary();
+      } finally {
+        setFavoriteLoadingGameId(null);
+      }
+    },
+    [updateLibrary]
+  );
+
+  return {
+    favoriteLoadingGameId,
+    toggleFavorite,
+  };
+}

src/big-picture/src/components/pages/library/use-library-launch-game.ts

@@ -0,0 +1,26 @@
+import type { LibraryGame } from "@types";
+import { useCallback } from "react";
+import { IS_DESKTOP } from "../../../constants";
+
+export function useLibraryLaunchGame(
+  onMissingExecutable: (game: LibraryGame) => void
+) {
+  return useCallback(
+    async (game: LibraryGame) => {
+      if (!IS_DESKTOP) return;
+
+      if (!game.executablePath) {
+        onMissingExecutable(game);
+        return;
+      }
+
+      await globalThis.window.electron.openGame(
+        game.shop,
+        game.objectId,
+        game.executablePath,
+        game.launchOptions
+      );
+    },
+    [onMissingExecutable]
+  );
+}

src/big-picture/src/components/pages/library/use-library-page-data.ts

@@ -0,0 +1,48 @@
+import type { LibraryGame } from "@types";
+import { useDeferredValue, useMemo } from "react";
+import { getFirstLibraryFocusGridItemId } from "./navigation";
+import {
+  filterLibraryByTab,
+  getLastPlayedGames,
+  getLibraryFilterCounts,
+  matchesSearchQuery,
+  sortByLastPlayed,
+  type LibraryFilterTab,
+} from "./library-data";
+
+export function useLibraryPageData(
+  library: LibraryGame[],
+  selectedTab: LibraryFilterTab,
+  search: string
+) {
+  const deferredSearch = useDeferredValue(search);
+
+  const sortedLibrary = useMemo(() => {
+    return [...library].sort(sortByLastPlayed);
+  }, [library]);
+
+  const filteredLibrary = useMemo(() => {
+    return filterLibraryByTab(sortedLibrary, selectedTab).filter((game) =>
+      matchesSearchQuery(game, deferredSearch)
+    );
+  }, [deferredSearch, selectedTab, sortedLibrary]);
+
+  const filterCounts = useMemo(() => {
+    return getLibraryFilterCounts(library);
+  }, [library]);
+
+  const lastPlayedGames = useMemo(() => {
+    return getLastPlayedGames(sortedLibrary);
+  }, [sortedLibrary]);
+
+  const firstGridItemId = useMemo(() => {
+    return getFirstLibraryFocusGridItemId(filteredLibrary[0]?.id);
+  }, [filteredLibrary]);
+
+  return {
+    filteredLibrary,
+    filterCounts,
+    firstGridItemId,
+    lastPlayedGames,
+  };
+}