Change the way buttons and info items are colored, fix inconsistencies, change sidebar, add a new method of interacting instead of installs/launch button

src/app/componets/Sidebar.css

@@ -5,20 +5,20 @@
 }
 
 .sidebar-downloads {
-  @apply text-[#bdbdbd] fixed bottom-3 left-2 bg-(--col2) rounded-lg border border-(--col3) w-55 p-4 cursor-pointer transition-colors duration-[0.25s];
+  @apply text-[#bdbdbd] fixed bottom-2 left-2 bg-(--col2) rounded-lg border border-(--col3) px-4 py-3 text-xl cursor-pointer transition-colors duration-[0.25s] opacity-75;
 }
 
 .sidebar-downloads:hover {
-  @apply text-white;
+  @apply text-white opacity-100;
   @apply bg-(--col3) border-(--col4);
 }
 
 .logo {
-  @apply text-2xl font-bold p-4;
+  @apply flex items-center pl-1 h-14 w-60;
 }
 
 .nav-links {
-  @apply flex flex-col p-4 space-y-1 overflow-y-auto overflow-x-hidden;
+  @apply flex flex-col px-4 space-y-1;
 }
 
 .link {
@@ -37,3 +37,11 @@
 .link.active:hover {
   @apply bg-(--col3) border-(--col4);
 }
+
+.sidebar ::-webkit-scrollbar {
+  @apply hidden;
+}
+
+.macos-drag {
+  @apply h-7 fixed top-0 left-0 w-60 -z-10;
+}

src/app/componets/Sidebar.tsx

@@ -12,11 +12,11 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 import { faDiscord } from '@fortawesome/free-brands-svg-icons'
 import { platform } from '@tauri-apps/plugin-os'
-import { getCurrentWindow } from '@tauri-apps/api/window'
 import { useGlobal } from '../GlobalProvider'
 import Image from 'next/image'
 import Link from 'next/link'
 import { usePathname, useSearchParams } from 'next/navigation'
+import { getCurrentWindow } from '@tauri-apps/api/window'
 
 export default function Sidebar () {
   const {
@@ -34,89 +34,96 @@ export default function Sidebar () {
   return (
     <aside className='sidebar'>
       <div
-        data-tauri-drag-region
-        style={{
-          height: '30px',
-          width: 'calc(var(--spacing) * 60)',
-          top: 0,
-          left: 0,
-          marginBottom: '-15px',
-          position: 'absolute',
-          zIndex: 9999,
-          display: platform() == 'macos' ? 'block' : 'none',
-          pointerEvents: 'auto'
+        className='macos-drag'
+        hidden={platform() != 'macos'}
+        onMouseDown={e => {
+          if (e.buttons === 1) {
+            e.detail === 2
+              ? getCurrentWindow().toggleMaximize()
+              : getCurrentWindow().startDragging()
+          }
         }}
       ></div>
-      <div className='logo'>
-        <Image
-          draggable={false}
-          src={Icon}
-          width={48}
-          height={48}
-          alt=''
-          style={{
-            marginTop: ['windows', 'macos'].includes(platform())
-              ? '20px'
-              : '0px',
-            marginBottom: '-20px'
-          }}
-        />
+      <div
+        className='logo'
+        style={{
+          marginTop:
+            platform() == 'windows'
+              ? '32px'
+              : platform() == 'macos'
+              ? '28px'
+              : ''
+        }}
+        onMouseDown={e => {
+          if (platform() != 'macos') return
+          if (e.buttons === 1) {
+            e.detail === 2
+              ? getCurrentWindow().toggleMaximize()
+              : getCurrentWindow().startDragging()
+          }
+        }}
+      >
+        <Image draggable={false} src={Icon} width={48} height={48} alt='' />
+        <p className='ml-1 text-[17px] whitespace-nowrap'>
+          Lncvrt Games Launcher
+        </p>
+      </div>
+      <div className='overflow-auto'>
+        <nav className='nav-links'>
+          <Link
+            draggable={false}
+            href='/'
+            className={`link relative flex items-center ${
+              pathname === '/' || pathname === '/game' ? 'active' : ''
+            }`}
+          >
+            <FontAwesomeIcon icon={faHexagonNodes} className='mr-2' /> Games
+          </Link>
+          {getListOfGames()
+            .sort((a, b) => {
+              return a.id - b.id
+            })
+            .map(i => (
+              <Link
+                key={i.id}
+                draggable={false}
+                href={'/game?id=' + i.id}
+                className={`link ${
+                  pathname === '/game' && Number(params.get('id') || 0) == i.id
+                    ? 'active'
+                    : ''
+                } ml-auto w-50 ${
+                  normalConfig?.settings.alwaysShowGamesInSidebar ||
+                  pathname === '/' ||
+                  pathname === '/game'
+                    ? ''
+                    : 'hidden'
+                }`}
+              >
+                <div className='flex items-center'>
+                  <FontAwesomeIcon icon={faGamepad} className='mr-1' />
+                  <span className='truncate max-w-full'>{i.name}</span>
+                </div>
+              </Link>
+            ))}
+          <Link
+            draggable={false}
+            href='/settings'
+            className={`link ${pathname === '/settings' ? 'active' : ''}`}
+          >
+            <FontAwesomeIcon icon={faCog} className='mr-1' /> Settings
+          </Link>
+          <button
+            onClick={() => openUrl('https://games.lncvrt.xyz/discord')}
+            className='link mr-auto'
+          >
+            <FontAwesomeIcon icon={faDiscord} className='mr-1' /> Community
+          </button>
+        </nav>
       </div>
-      <nav className='nav-links'>
-        <Link
-          draggable={false}
-          href='/'
-          className={`link relative flex items-center ${
-            pathname === '/' || pathname === '/game' ? 'active' : ''
-          }`}
-        >
-          <FontAwesomeIcon icon={faHexagonNodes} className='mr-2' /> Games
-        </Link>
-        {getListOfGames()
-          .sort((a, b) => {
-            return a.id - b.id
-          })
-          .map(i => (
-            <Link
-              key={i.id}
-              draggable={false}
-              href={'/game?id=' + i.id}
-              className={`link ${
-                pathname === '/game' && Number(params.get('id') || 0) == i.id
-                  ? 'active'
-                  : ''
-              } ml-auto w-50 ${
-                normalConfig?.settings.alwaysShowGamesInSidebar ||
-                pathname === '/' ||
-                pathname === '/game'
-                  ? ''
-                  : 'hidden'
-              }`}
-            >
-              <FontAwesomeIcon icon={faGamepad} className='mr-1' />{' '}
-              {i.cutOff == null
-                ? i.name
-                : i.name.substring(0, i.cutOff) + '...'}
-            </Link>
-          ))}
-        <Link
-          draggable={false}
-          href='/settings'
-          className={`link ${pathname === '/settings' ? 'active' : ''}`}
-        >
-          <FontAwesomeIcon icon={faCog} className='mr-1' /> Settings
-        </Link>
-        <a
-          draggable={false}
-          onClick={() => openUrl('https://games.lncvrt.xyz/discord')}
-          className='link'
-        >
-          <FontAwesomeIcon icon={faDiscord} className='mr-1' /> Community
-        </a>
-      </nav>
       <div
         className='sidebar-downloads'
-        style={{ display: downloadProgress.length != 0 ? 'block' : 'none' }}
+        hidden={downloadProgress.length == 0}
         onClick={() => {
           setPopupMode(1)
           setShowPopup(true)

src/app/componets/VersionInfo.tsx

@@ -44,7 +44,10 @@ export default function VersionInfo () {
         {getVersionInfo(managingVersion)?.versionName}
       </p>
       <div className='popup-content flex flex-col items-center justify-center gap-2 h-full'>
-        <div className='entry-info-item' hidden={viewingInfoFromDownloads}>
+        <div
+          className='entry-info-item btntheme2'
+          hidden={viewingInfoFromDownloads}
+        >
           <p>
             Installed{' '}
             {format(
@@ -56,7 +59,7 @@ export default function VersionInfo () {
           </p>
         </div>
         <div
-          className='entry-info-item'
+          className='entry-info-item btntheme2'
           hidden={!versionInfo || versionInfo.releaseDate == 0}
         >
           <p>
@@ -69,23 +72,23 @@ export default function VersionInfo () {
             )}
           </p>
         </div>
-        <div className='entry-info-item' hidden={!gameInfo?.official}>
+        <div className='entry-info-item btntheme2' hidden={!gameInfo?.official}>
           <FontAwesomeIcon icon={faCheck} color='#19c84b' />
           <p>Official</p>
         </div>
-        <div className='entry-info-item' hidden={gameInfo?.official}>
+        <div className='entry-info-item btntheme2' hidden={gameInfo?.official}>
           <FontAwesomeIcon
             icon={gameInfo?.verified ? faShieldHalved : faWarning}
             color={gameInfo?.verified ? '#19c84b' : '#ffc800'}
           />
           <p>{gameInfo?.verified ? 'Verified' : 'Unverified'}</p>
         </div>
-        <div className='entry-info-item' hidden={gameInfo?.official}>
+        <div className='entry-info-item btntheme2' hidden={gameInfo?.official}>
           <FontAwesomeIcon icon={faCode} color='lightgray' />
           <p>Developer: {gameInfo?.developer}</p>
         </div>
         <div
-          className='entry-info-item'
+          className='entry-info-item btntheme2'
           hidden={viewingInfoFromDownloads || versionSize === null}
         >
           <FontAwesomeIcon icon={faHardDrive} color='lightgray' />
@@ -99,7 +102,7 @@ export default function VersionInfo () {
               : 'Loading...'}
           </p>
         </div>
-        <div className='entry-info-item' hidden={!versionInfo}>
+        <div className='entry-info-item btntheme2' hidden={!versionInfo}>
           <FontAwesomeIcon icon={faHardDrive} color='lightgray' />
           <p>
             Size when downloaded (zipped):{' '}