feat: show HeroPanelPlaytime if playTime is not 0

src/renderer/src/components/modal/modal.css.ts

@@ -22,7 +22,7 @@ export const modal = recipe({
     animationDuration: "0.3s",
     backgroundColor: vars.color.background,
     borderRadius: "4px",
-    maxWidth: "600px",
+    maxWidth: "800px",
     color: vars.color.body,
     maxHeight: "100%",
     border: `solid 1px ${vars.color.border}`,
@@ -37,6 +37,12 @@ export const modal = recipe({
         opacity: 0,
       },
     },
+    large: {
+      true: {
+        width: "800px",
+        maxWidth: "800px",
+      },
+    },
   },
 });
 

src/renderer/src/components/modal/modal.tsx

@@ -12,6 +12,7 @@ export interface ModalProps {
   title: string;
   description?: string;
   onClose: () => void;
+  large?: boolean;
   children: React.ReactNode;
 }
 
@@ -20,6 +21,7 @@ export function Modal({
   title,
   description,
   onClose,
+  large,
   children,
 }: ModalProps) {
   const [isClosing, setIsClosing] = useState(false);
@@ -88,7 +90,7 @@ export function Modal({
   return createPortal(
     <Backdrop isClosing={isClosing}>
       <div
-        className={styles.modal({ closing: isClosing })}
+        className={styles.modal({ closing: isClosing, large })}
         role="dialog"
         aria-labelledby={title}
         aria-describedby={description}

src/renderer/src/pages/game-details/hero/hero-panel.tsx

@@ -35,7 +35,8 @@ export function HeroPanel() {
   const getInfo = () => {
     if (isGameDeleting(game?.id ?? -1)) return <p>{t("deleting")}</p>;
 
-    if (game?.progress === 1) return <HeroPanelPlaytime />;
+    if (game?.progress === 1 || game?.playTimeInMilliseconds)
+      return <HeroPanelPlaytime />;
 
     if (game?.status === "active") {
       if (lastPacket?.isDownloadingMetadata && isGameDownloading) {

src/renderer/src/pages/game-details/modals/game-options-modal.tsx

@@ -68,7 +68,12 @@ export function GameOptionsModal({
 
   return (
     <>
-      <Modal visible={visible} title={game.title} onClose={onClose}>
+      <Modal
+        visible={visible}
+        title={game.title}
+        onClose={onClose}
+        large={true}
+      >
         <DeleteGameModal
           visible={showDeleteModal}
           onClose={() => setShowDeleteModal(false)}