Move away from using hidden

src/app/main/game/page.tsx

@@ -71,6 +71,7 @@ export default function Installs () {
           {game.name} Installs
         </p>
         <div className='flex gap-2'>
+          {game.id == 1 && (
             <button
               className='button btntheme1'
               onClick={() =>
@@ -86,10 +87,11 @@ export default function Installs () {
                 })
               }
               title='View the leaderboards for this game.'
-            hidden={game.id != 1}
             >
               Leaderboards
             </button>
+          )}
+          {game.id == 9 && category == -1 && (
             <button
               className='button btntheme1'
               onClick={() =>
@@ -103,20 +105,21 @@ export default function Installs () {
                 })
               }
               title='Open the GDPS Dashboard!'
-            hidden={game.id != 9 || category != -1}
             >
               Dashboard
             </button>
+          )}
+          {category != -1 && (
             <button
               className='button btntheme1'
               onClick={() => {
                 setCategory(-1)
               }}
               title='Click to go up a level.'
-            hidden={category == -1}
             >
               Back
             </button>
+          )}
           <button
             className='button btntheme1'
             onClick={() => {
@@ -267,27 +270,25 @@ export default function Installs () {
                           )}
                         </p>
                       </div>
+                      {platform() == 'linux' &&
+                        versionInfo.wine &&
+                        needsRevisionUpdate(versionInfo.lastRevision, v) && (
                           <div
                             className='entry-info-item'
                             title='This version is using wine. It cannot be guarenteed to work fully and might not work at all.'
-                        hidden={
-                          !(platform() == 'linux' && versionInfo.wine) ||
-                          needsRevisionUpdate(versionInfo.lastRevision, v)
-                        }
                           >
                             <FontAwesomeIcon icon={faWarning} color='#ffc800' />
                             <p>Uses wine</p>
                           </div>
-                      <div
+                        )}
-                        className='entry-info-item'
+                      {needsRevisionUpdate(versionInfo.lastRevision, v) && (
-                        hidden={
+                        <div className='entry-info-item'>
-                          !needsRevisionUpdate(versionInfo.lastRevision, v)
-                        }
-                      >
                           <FontAwesomeIcon icon={faWarning} color='#ffc800' />
                           <p>Needs revision update!</p>
                         </div>
+                      )}
                     </div>
+                    {versionInfo.modSupportDownload && (
                       <button
                         className='absolute right-0 bottom-0 button'
                         title='Click to manage mods for this game!'
@@ -329,10 +330,10 @@ export default function Installs () {
                           setShowPopup(true)
                           setFadeOut(false)
                         }}
-                      hidden={!versionInfo.modSupportDownload}
                       >
                         Mod Manager
                       </button>
+                    )}
                   </div>
                 </div>
               )

src/app/main/layout.tsx

@@ -822,10 +822,9 @@ export default function RootLayout ({
         <body className={theme + '-theme'}>
           {loading ? (
             <>
-              <div
+              {platformName == 'windows' && (
-                className='relative z-2 w-screen border-b border-b-(--col3) h-8.25 bg-(--col1)'
+                <div className='relative z-2 w-screen border-b border-b-(--col3) h-8.25 bg-(--col1)' />
-                hidden={platformName != 'windows'}
+              )}
-              />
               <div
                 className={`w-screen ${
                   platformName == 'windows'
@@ -892,10 +891,9 @@ export default function RootLayout ({
                 }}
               >
                 <Sidebar />
-                <div
+                {platformName == 'windows' && (
-                  className='relative z-2 ml-59.75 w-[calc(100vw-239px)] border-b border-b-(--col3) h-8.25 bg-(--col1)'
+                  <div className='relative z-2 ml-59.75 w-[calc(100vw-239px)] border-b border-b-(--col3) h-8.25 bg-(--col1)' />
-                  hidden={platformName != 'windows'}
+                )}
-                />
                 <div className='relative z-0'>
                   <main className='ml-60'>{children}</main>
                 </div>

src/app/main/page.tsx

@@ -114,17 +114,17 @@ export default function Installs () {
                         versions installed
                       </p>
                     </div>
+                    {i.official ? (
                       <div
                         className='entry-info-item'
-                      hidden={!i.official}
                         title='This game is official.'
                       >
                         <FontAwesomeIcon icon={faCheck} color='#19c84b' />
                         <p>Official</p>
                       </div>
+                    ) : (
                       <div
                         className='entry-info-item'
-                      hidden={i.official}
                         title={
                           i.verified
                             ? 'This game is verified to be safe'
@@ -137,6 +137,7 @@ export default function Installs () {
                         />
                         <p>{i.verified ? 'Verified' : 'Unverified'}</p>
                       </div>
+                    )}
                   </div>
                 </div>
               </div>

src/app/main/settings/page.tsx

@@ -54,7 +54,9 @@ export default function Settings () {
           }}
           className={platform() == 'linux' ? '' : 'hidden'}
         />
-        <p hidden={!(platform() == 'linux' && linuxUseWine)}>Wine Command:</p>
+        {platform() == 'linux' && linuxUseWine && (
+          <>
+            <p>Wine Command:</p>
             <input
               type='text'
               value={linuxWineCommand}
@@ -62,8 +64,9 @@ export default function Settings () {
                 await settings?.set('linuxWineCommand', e.target.value)
               }
               className='input-field my-1'
-          hidden={!(platform() == 'linux' && linuxUseWine)}
             ></input>
+          </>
+        )}
         <Setting
           label='Use custom data location'
           value={!!customDataLocation}

src/app/update/layout.tsx

@@ -24,10 +24,9 @@ export default function RootLayout ({
     <>
       <html lang='en' className={roboto.className}>
         <body className='dark-theme'>
-          <div
+          {platformName == 'windows' && (
-            className='relative z-2 w-screen border-b border-b-(--col3) h-8.25 bg-(--col1)'
+            <div className='relative z-2 w-screen border-b border-b-(--col3) h-8.25 bg-(--col1)' />
-            hidden={platformName != 'windows'}
+          )}
-          />
           <div
             className={`w-screen ${
               platformName == 'windows' ? 'h-[calc(100vh-64px)]' : 'h-screen'

src/components/Sidebar.tsx

@@ -51,9 +51,9 @@ export default function Sidebar () {
 
   return (
     <aside className='sidebar'>
+      {platform() == 'macos' && (
         <div
           className='macos-drag'
-        hidden={platform() != 'macos'}
           onMouseDown={e => {
             if (e.buttons === 1) {
               if (e.detail === 2) {
@@ -63,7 +63,8 @@ export default function Sidebar () {
               }
             }
           }}
-      ></div>
+        />
+      )}
       <div
         className={
           'flex items-center h-10 w-60 ' +
@@ -228,9 +229,9 @@ export default function Sidebar () {
           <FontAwesomeIcon icon={faDiscord} className='mr-1' /> Community
         </button>
       </nav>
+      {downloadProgress.length != 0 && (
         <div
           className='sidebar-downloads'
-        hidden={downloadProgress.length == 0}
           onClick={() => {
             setPopupMode(1)
             setShowPopup(true)
@@ -241,6 +242,7 @@ export default function Sidebar () {
             <FontAwesomeIcon icon={faDownload} /> Downloads
           </p>
         </div>
+      )}
     </aside>
   )
 }

src/popups/Downloads.tsx

@@ -38,15 +38,18 @@ export default function DownloadsPopup () {
               className='popup-entry flex flex-col justify-between relative'
             >
               <div className='absolute right-2 top-2 flex flex-row gap-2'>
+                {(v.downloading || v.paused) && (
+                  <>
                     <div
                       className='cursor-pointer bg-(--col5) hover:bg-(--col7) border border-(--col7) hover:border-(--col9) transition-colors w-8 h-8 flex items-center justify-center rounded-full'
-                  hidden={!v.downloading && !v.paused}
                       onClick={async () => {
                         if (v.downloading) {
                           await invoke('cancel_download', { name: v.version })
                         } else {
                           setDownloadProgress(prev => {
-                        const i = prev.findIndex(d => d.version === v.version)
+                            const i = prev.findIndex(
+                              d => d.version === v.version
+                            )
                             if (i === -1) return prev
                             const copy = [...prev]
                             copy[i] = {
@@ -85,7 +88,9 @@ export default function DownloadsPopup () {
                             }
                           } else if (res == '0') {
                             setDownloadProgress(prev => {
-                          const i = prev.findIndex(d => d.version === v.version)
+                              const i = prev.findIndex(
+                                d => d.version === v.version
+                              )
                               if (i === -1) return prev
                               if (prev[i].canceled) {
                                 return prev.filter((_, idx) => idx !== i)
@@ -135,12 +140,13 @@ export default function DownloadsPopup () {
                     </div>
                     <div
                       className='cursor-pointer bg-(--col5) hover:bg-(--col7) border border-(--col7) hover:border-(--col9) transition-colors w-8 h-8 flex items-center justify-center rounded-full'
-                  hidden={!v.downloading && !v.paused}
                       onClick={async () => {
                         if (!v.paused) {
                           await invoke('cancel_download', { name: v.version })
                           setDownloadProgress(prev => {
-                        const i = prev.findIndex(d => d.version === v.version)
+                            const i = prev.findIndex(
+                              d => d.version === v.version
+                            )
                             if (i === -1) return prev
                             const copy = [...prev]
                             copy[i] = {
@@ -151,7 +157,9 @@ export default function DownloadsPopup () {
                           })
                         } else {
                           setDownloadProgress(prev => {
-                        const i = prev.findIndex(d => d.version === v.version)
+                            const i = prev.findIndex(
+                              d => d.version === v.version
+                            )
                             if (i === -1) return prev
                             return prev.filter((_, idx) => idx !== i)
                           })
@@ -160,9 +168,11 @@ export default function DownloadsPopup () {
                     >
                       <FontAwesomeIcon icon={faCancel} className='w-6 h-6' />
                     </div>
+                  </>
+                )}
+                {(v.failed || v.queued) && (
                   <div
                     className='cursor-pointer bg-(--col5) hover:bg-(--col7) border border-(--col7) hover:border-(--col9) transition-colors w-8 h-8 flex items-center justify-center rounded-full'
-                  hidden={!v.failed && !v.queued}
                     onClick={() => {
                       setDownloadQueue(prev =>
                         prev.filter(id => id !== v.version)
@@ -174,6 +184,7 @@ export default function DownloadsPopup () {
                   >
                     <FontAwesomeIcon icon={faTrash} className='w-6 h-6' />
                   </div>
+                )}
               </div>
               <p className='text-2xl text-center'>
                 {v.type == 1

src/popups/ManageGame.tsx

@@ -65,25 +65,27 @@ export default function ManageGamePopup () {
     <>
       <p className='text-xl text-center'>Viewing {gameInfo?.name}</p>
       <div className='popup-content flex flex-col items-center justify-center gap-2 h-full'>
-        <div className='entry-info-item btntheme2' hidden={!gameInfo?.official}>
+        {gameInfo?.official ? (
+          <div className='entry-info-item btntheme2'>
             <FontAwesomeIcon icon={faCheck} color='#19c84b' />
             <p>Official</p>
           </div>
-        <div className='entry-info-item btntheme2' hidden={gameInfo?.official}>
+        ) : (
+          <div className='entry-info-item btntheme2'>
             <FontAwesomeIcon
               icon={gameInfo?.verified ? faShieldHalved : faWarning}
               color={gameInfo?.verified ? '#19c84b' : '#ffc800'}
             />
             <p>{gameInfo?.verified ? 'Verified' : 'Unverified'}</p>
           </div>
-        <div
+        )}
-          className='entry-info-item btntheme2'
+        {gameInfo?.developer != null && (
-          hidden={gameInfo?.developer == null}
+          <div className='entry-info-item btntheme2'>
-        >
             <FontAwesomeIcon icon={faCode} color='lightgray' />
             <p>Developer: {gameInfo?.developer}</p>
           </div>
-        <div className='entry-info-item btntheme2' hidden={!gameInfo?.official}>
+        )}
+        <div className='entry-info-item btntheme2'>
           <FontAwesomeIcon icon={faDownload} color='lightgray' />
           <p>
             {(() => {
@@ -102,10 +104,9 @@ export default function ManageGamePopup () {
             versions installed
           </p>
         </div>
-        <div
+        {versionsInstalled?.length != 0 && (
-          className='entry-info-item btntheme2'
+          <>
-          hidden={versionsInstalled?.length == 0}
+            <div className='entry-info-item btntheme2'>
-        >
               <FontAwesomeIcon icon={faHardDrive} color='lightgray' />
               <p>
                 Size on disk:{' '}
@@ -157,10 +158,11 @@ export default function ManageGamePopup () {
                 }
               }}
               title='Click to uninstall this game. This will NOT remove any progress or any save files.'
-          hidden={versionsInstalled?.length == 0}
             >
               Uninstall
             </div>
+          </>
+        )}
       </div>
     </>
   )

src/popups/ModDownloads.tsx

@@ -68,6 +68,7 @@ export default function ModDownloadsPopup () {
 
   return (
     <>
+      {typeof mods != 'number' && showModInfo == null && (
         <button
           className='popup-top-button btntheme1 right-2'
           onClick={async () => {
@@ -91,10 +92,10 @@ export default function ModDownloadsPopup () {
               setMods(1)
             }
           }}
-        hidden={typeof mods == 'number' || showModInfo != null}
         >
           <FontAwesomeIcon icon={faRefresh} />
         </button>
+      )}
       <p className='text-xl text-center'>
         {!showModInfo
           ? versionInfo?.displayName + ' Mod Manager'
@@ -180,13 +181,12 @@ export default function ModDownloadsPopup () {
                         >
                           v{tab == 0 ? localVersion : v.latestVersion}
                         </span>
-                        <span
+                        {tab == 0 && v.latestVersion != localVersion && (
-                          className='text-green-300'
+                          <span className='text-green-300'>
-                          hidden={tab != 0 || v.latestVersion == localVersion}
-                        >
                             {' '}
                             (available: v{v.latestVersion})
                           </span>
+                        )}
                       </p>
                       <p className='text-yellow-200'>
                         Made by {v.creators[0]}
@@ -196,10 +196,13 @@ export default function ModDownloadsPopup () {
                       </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}>
+                      {tab != 0 && (
+                        <p className='text-green-400'>
                           <FontAwesomeIcon icon={faDownload} />{' '}
                           {v.downloads.toLocaleString()}
                         </p>
+                      )}
+                      {tab == 0 && v.latestVersion != localVersion && (
                         <button
                           className='button btntheme3'
                           onClick={async () => {
@@ -251,11 +254,11 @@ export default function ModDownloadsPopup () {
                               }
                             ])
                           }}
-                        hidden={tab != 0 || v.latestVersion == localVersion}
                           disabled={downloadProgress.length != 0}
                         >
                           Update
                         </button>
+                      )}
                       <button
                         className='button btntheme3'
                         onClick={() => setShowModInfo(v)}
@@ -388,9 +391,9 @@ export default function ModDownloadsPopup () {
                 />{' '}
                 View changelog
               </button>
+              {showModInfo.creators.length > 2 && (
                 <button
                   className='button btntheme2 w-fit'
-                hidden={showModInfo.creators.length < 2}
                   onClick={async () => {
                     if (!versionInfo) return
                     await message(showModInfo.creators.join(', '), {
@@ -399,9 +402,10 @@ export default function ModDownloadsPopup () {
                     })
                   }}
                 >
-                <FontAwesomeIcon icon={faPeopleGroup} color='lightgray' /> View
+                  <FontAwesomeIcon icon={faPeopleGroup} color='lightgray' />{' '}
-                all creators
+                  View all creators
                 </button>
+              )}
             </div>
           </div>
         )}