Pre-work on adding view mod info popup

src/app/GlobalProvider.tsx

@@ -53,6 +53,8 @@ type GlobalCtxType = {
   getSpecialVersionsList(game?: number | undefined): GameVersion[]
   selectedGame: number | null
   setViewingInfoFromDownloads: Dispatch<SetStateAction<boolean>>
+  showModInfo: number
+  setShowModInfo: Dispatch<SetStateAction<number>>
 }
 
 const GlobalCtx = createContext<GlobalCtxType | null>(null)

src/app/layout.tsx

@@ -78,6 +78,7 @@ export default function RootLayout ({
   const [selectedGame, setSelectedGame] = useState<number | null>(null)
 
   const [category, setCategory] = useState<number>(-1)
+  const [showModInfo, setShowModInfo] = useState<number>(-1)
 
   const pathname = usePathname()
   const revisionCheck = useRef(false)
@@ -174,11 +175,13 @@ export default function RootLayout ({
     } else if (viewingInfoFromDownloads) {
       setViewingInfoFromDownloads(false)
       setPopupMode(0)
+    } else if (popupMode == 3 && showModInfo != -1) {
+      setShowModInfo(-1)
     } else {
       setFadeOut(true)
       setTimeout(() => setShowPopup(false), 200)
     }
-  }, [popupMode, selectedGame, pathname, viewingInfoFromDownloads])
+  }, [popupMode, selectedGame, pathname, viewingInfoFromDownloads, showModInfo])
 
   useEffect(() => {
     const unlisteners: (() => void)[] = []
@@ -660,7 +663,9 @@ export default function RootLayout ({
                 closePopup,
                 getSpecialVersionsList,
                 selectedGame,
-                setViewingInfoFromDownloads
+                setViewingInfoFromDownloads,
+                showModInfo,
+                setShowModInfo
               }}
             >
               <div
@@ -682,6 +687,7 @@ export default function RootLayout ({
                     className={`popup-overlay ${fadeOut ? 'fade-out' : ''}`}
                     onClick={(e: React.MouseEvent<HTMLDivElement>) => {
                       if (e.target === e.currentTarget) {
+                        if (showModInfo != -1) setShowModInfo(-1)
                         if (viewingInfoFromDownloads) {
                           setPopupMode(0)
                           setViewingInfoFromDownloads(false)
@@ -704,7 +710,7 @@ export default function RootLayout ({
                               selectedGame &&
                               pathname === '/') ||
                             viewingInfoFromDownloads ||
-                            popupMode == 4
+                            (popupMode == 3 && showModInfo != -1)
                               ? faChevronLeft
                               : faXmark
                           }

src/componets/popups/ModDownloads.tsx

@@ -17,7 +17,9 @@ export default function ModDownloadsPopup () {
     getGameInfo,
     getVersionInfo,
     managingVersion,
-    downloadedVersionsConfig
+    downloadedVersionsConfig,
+    showModInfo,
+    setShowModInfo
   } = useGlobal()
 
   const [mods, setMods] = useState<Mod[] | 0 | 1>(0)
@@ -60,14 +62,14 @@ export default function ModDownloadsPopup () {
             setMods(1)
           }
         }}
-        hidden={typeof mods == 'number'}
+        hidden={typeof mods == 'number' || showModInfo != -1}
       >
         <FontAwesomeIcon icon={faRefresh} />
       </button>
       <p className='text-xl text-center'>
         {versionInfo?.displayName} Mod Manager
       </p>
-      {typeof mods != 'number' ? (
+      {typeof mods != 'number' && showModInfo == -1 ? (
         <div className='flex flex-row justify-center items-center -mb-2 mt-0.5 gap-1.5'>
           <button
             className={`button ${tab == 0 ? 'btntheme3' : 'btntheme2'}`}
@@ -92,78 +94,52 @@ export default function ModDownloadsPopup () {
           </p>
         ) : (
           <div className='flex flex-col items-center justify-center gap-2 p-2'>
-            {tab == 0
-              ? mods
-                  .filter(
-                    v =>
-                      !downloadedVersionsConfig ||
-                      Object.keys(downloadedVersionsConfig.mods).includes(
+            {mods
+              .filter(
+                v =>
+                  !downloadedVersionsConfig ||
+                  (tab == 0
+                    ? Object.keys(downloadedVersionsConfig.mods).includes(
                         String(v.id)
                       )
-                  )
-                  .map(v => {
-                    return (
-                      <div
-                        key={v.id}
-                        className='bg-(--col3) border border-(--col5) rounded-lg w-full h-16 flex flex-row'
-                      >
-                        <div className='flex flex-col justify-center h-full px-3 w-fit'>
-                          <p>
-                            <span className='text-lg'>{v.name}</span>{' '}
-                            <span className='text-green-300'>
-                              v{v.latestVersion}
-                            </span>
-                          </p>
-                          <p className='text-yellow-200'>
-                            Made by {v.creators[0]}
-                            {v.creators.length > 1
-                              ? ' + ' + (v.creators.length - 1) + ' more'
-                              : null}
-                          </p>
-                        </div>
-                        <div className='flex items-center h-full gap-2 px-3 ml-auto'>
-                          <button className='button btntheme3'>View</button>
-                        </div>
-                      </div>
-                    )
-                  })
-              : mods
-                  .filter(
-                    v =>
-                      !downloadedVersionsConfig ||
-                      !Object.keys(downloadedVersionsConfig.mods).includes(
+                    : !Object.keys(downloadedVersionsConfig.mods).includes(
                         String(v.id)
-                      )
-                  )
-                  .map(v => {
-                    return (
-                      <div
-                        key={v.id}
-                        className='bg-(--col3) border border-(--col5) rounded-lg w-full h-16 flex flex-row'
+                      ))
+              )
+              .map(v => {
+                return (
+                  <div
+                    key={v.id}
+                    className='bg-(--col3) border border-(--col5) rounded-lg w-full h-16 flex flex-row'
+                  >
+                    <div className='flex flex-col justify-center h-full px-3 w-fit'>
+                      <p>
+                        <span className='text-lg'>{v.name}</span>{' '}
+                        <span className='text-green-300'>
+                          v{v.latestVersion}
+                        </span>
+                      </p>
+                      <p className='text-yellow-200'>
+                        Made by {v.creators[0]}
+                        {v.creators.length > 1
+                          ? ' + ' + (v.creators.length - 1) + ' more'
+                          : null}
+                      </p>
+                    </div>
+                    <div className='flex flex-row items-center h-full gap-2 px-3 ml-auto'>
+                      <p className='text-green-400' hidden={tab == 0}>
+                        <FontAwesomeIcon icon={faDownload} /> {v.downloads}
+                      </p>
+                      <button
+                        className='button btntheme3'
+                        onClick={() => setShowModInfo(v.id)}
                       >
-                        <div className='flex flex-col justify-center h-full px-3 w-fit'>
-                          <p>
-                            <span className='text-lg'>{v.name}</span>{' '}
-                            <span className='text-green-300'>
-                              v{v.latestVersion}
-                            </span>
-                          </p>
-                          <p className='text-yellow-200'>
-                            Made by {v.creators[0]}
-                            {v.creators.length > 1
-                              ? ' + ' + (v.creators.length - 1) + ' more'
-                              : null}
-                          </p>
-                        </div>
-                        <div className='flex flex-row items-center h-full gap-2 px-3 ml-auto'>
-                          <p className='text-green-400'>
-                            <FontAwesomeIcon icon={faDownload} /> {v.downloads}
-                          </p>
-                          <button className='button btntheme3'>Get</button>
-                        </div>
-                      </div>
-                    )
-                  })}
+                        {tab == 0 ? 'View' : 'Get'}
+                      </button>
+                    </div>
+                  </div>
+                )
+              })}
           </div>
         )}
       </div>