From affa7a2b2e3dd4708b0f9b0905af7178a2bf3205 Mon Sep 17 00:00:00 2001
From: Moyasee <terranoiz@icloud.com>
Date: Tue, 16 Dec 2025 15:42:34 +0200
Subject: [PATCH] feat: add fullscreen media modal to profile hero for avatar
 display

---
 proto                                         |  2 +-
 .../fullscreen-media-modal.scss               | 61 +++++++++++++
 .../fullscreen-media-modal.tsx                | 88 +++++++++++++++++++
 src/renderer/src/components/index.ts          |  1 +
 .../profile/profile-hero/profile-hero.tsx     | 21 ++++-
 5 files changed, 169 insertions(+), 4 deletions(-)
 create mode 100644 src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.scss
 create mode 100644 src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.tsx

diff --git a/proto b/proto
index 7a23620f..6f11c99c 160000
--- a/proto
+++ b/proto
@@ -1 +1 @@
-Subproject commit 7a23620f930f6fbb84c0abcaab5149a34ab4b4eb
+Subproject commit 6f11c99c572420a282ba5149b6866e39b8a4569c
diff --git a/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.scss b/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.scss
new file mode 100644
index 00000000..454653b8
--- /dev/null
+++ b/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.scss
@@ -0,0 +1,61 @@
+@use "../../scss/globals.scss";
+
+.fullscreen-media-modal {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: rgba(0, 0, 0, 0.5);
+
+  &__close-button {
+    position: absolute;
+    top: calc(globals.$spacing-unit * 4);
+    right: calc(globals.$spacing-unit * 3);
+    cursor: pointer;
+    color: globals.$body-color;
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    border: 1px solid globals.$border-color;
+    padding: globals.$spacing-unit;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all ease 0.2s;
+    z-index: 10;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.8);
+      transform: scale(1.1);
+    }
+  }
+
+  &__image-container {
+    max-width: 90%;
+    max-height: 90%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__image {
+    max-width: 100%;
+    max-height: 60vh;
+    object-fit: contain;
+    border-radius: 8px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+    animation: image-appear 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+  }
+}
+
+@keyframes image-appear {
+  0% {
+    opacity: 0;
+    transform: scale(0.85);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
diff --git a/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.tsx b/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.tsx
new file mode 100644
index 00000000..12052834
--- /dev/null
+++ b/src/renderer/src/components/fullscreen-media-modal/fullscreen-media-modal.tsx
@@ -0,0 +1,88 @@
+import { useCallback, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { XIcon } from "@primer/octicons-react";
+import { useTranslation } from "react-i18next";
+
+import { Backdrop } from "../backdrop/backdrop";
+import "./fullscreen-media-modal.scss";
+
+export interface FullscreenMediaModalProps {
+  visible: boolean;
+  onClose: () => void;
+  src: string | null | undefined;
+  alt?: string;
+}
+
+export function FullscreenMediaModal({
+  visible,
+  onClose,
+  src,
+  alt,
+}: FullscreenMediaModalProps) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  const { t } = useTranslation("modal");
+
+  useEffect(() => {
+    if (visible) {
+      const onKeyDown = (e: KeyboardEvent) => {
+        if (e.key === "Escape") {
+          onClose();
+        }
+      };
+
+      window.addEventListener("keydown", onKeyDown);
+
+      return () => {
+        window.removeEventListener("keydown", onKeyDown);
+      };
+    }
+
+    return () => {};
+  }, [onClose, visible]);
+
+  useEffect(() => {
+    const onMouseDown = (e: MouseEvent) => {
+      if (containerRef.current) {
+        const clickedOnImage = containerRef.current.contains(e.target as Node);
+
+        if (!clickedOnImage) {
+          onClose();
+        }
+      }
+    };
+
+    if (visible) {
+      window.addEventListener("mousedown", onMouseDown);
+    }
+
+    return () => {
+      window.removeEventListener("mousedown", onMouseDown);
+    };
+  }, [onClose, visible]);
+
+  if (!visible || !src) return null;
+
+  return createPortal(
+    <Backdrop>
+      <div className="fullscreen-media-modal" role="dialog" aria-label={alt}>
+        <button
+          type="button"
+          onClick={onClose}
+          className="fullscreen-media-modal__close-button"
+          aria-label={t("close")}
+        >
+          <XIcon size={24} />
+        </button>
+
+        <div
+          ref={containerRef}
+          className="fullscreen-media-modal__image-container"
+        >
+          <img src={src} alt={alt} className="fullscreen-media-modal__image" />
+        </div>
+      </div>
+    </Backdrop>,
+    document.body
+  );
+}
diff --git a/src/renderer/src/components/index.ts b/src/renderer/src/components/index.ts
index e8876fcb..8bb028bd 100644
--- a/src/renderer/src/components/index.ts
+++ b/src/renderer/src/components/index.ts
@@ -20,3 +20,4 @@ export * from "./game-context-menu/game-context-menu";
 export * from "./game-context-menu/use-game-actions";
 export * from "./star-rating/star-rating";
 export * from "./search-dropdown/search-dropdown";
+export * from "./fullscreen-media-modal/fullscreen-media-modal";
diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
index fc354d01..f9109067 100644
--- a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
+++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
@@ -9,7 +9,12 @@ import {
   XCircleFillIcon,
 } from "@primer/octicons-react";
 import { buildGameDetailsPath } from "@renderer/helpers";
-import { Avatar, Button, Link } from "@renderer/components";
+import {
+  Avatar,
+  Button,
+  FullscreenMediaModal,
+  Link,
+} from "@renderer/components";
 import { useTranslation } from "react-i18next";
 import {
   useAppSelector,
@@ -33,6 +38,7 @@ type FriendAction =
 
 export function ProfileHero() {
   const [showEditProfileModal, setShowEditProfileModal] = useState(false);
+  const [showFullscreenAvatar, setShowFullscreenAvatar] = useState(false);
   const [isPerformingAction, setIsPerformingAction] = useState(false);
 
   const {
@@ -246,10 +252,12 @@ export function ProfileHero() {
   ]);
 
   const handleAvatarClick = useCallback(() => {
-    if (isMe) {
+    if (userProfile?.profileImageUrl) {
+      setShowFullscreenAvatar(true);
+    } else if (isMe) {
       setShowEditProfileModal(true);
     }
-  }, [isMe]);
+  }, [isMe, userProfile?.profileImageUrl]);
 
   const currentGame = useMemo(() => {
     if (isMe) {
@@ -272,6 +280,13 @@ export function ProfileHero() {
         onClose={() => setShowEditProfileModal(false)}
       />
 
+      <FullscreenMediaModal
+        visible={showFullscreenAvatar}
+        onClose={() => setShowFullscreenAvatar(false)}
+        src={userProfile?.profileImageUrl}
+        alt={userProfile?.displayName}
+      />
+
       <section
         className="profile-hero__content-box"
         style={{ background: !backgroundImage ? heroBackground : undefined }}