Show a list when opening download menu, change button styles, switch from scss to tailwindcss, add downloads button to sidebar and more

src/Globals.css

@@ -0,0 +1,27 @@
+@import 'tailwindcss';
+@import '@fontsource/roboto';
+
+body {
+  font-family: 'Roboto', sans-serif;
+  @apply bg-[#131313] text-white select-none;
+}
+
+.button {
+  @apply bg-[#0a6ec8] hover:bg-[#1361ad] rounded-md cursor-pointer text-[16px] py-1.5 px-3 transition-colors duration-[0.25s];
+}
+
+::-webkit-scrollbar {
+  @apply w-2;
+}
+
+::-webkit-scrollbar-track {
+  @apply bg-[#1f1f1f];
+}
+
+::-webkit-scrollbar-thumb {
+  @apply bg-[#555] w-1 rounded-lg;
+}
+
+::-webkit-scrollbar-thumb:active {
+  @apply bg-[#888];
+}

src/Globals.scss

@@ -1,11 +0,0 @@
-@use 'tailwindcss' as *;
-@use '@fontsource/roboto' as *;
-
-body {
-  font-family: 'Roboto', sans-serif;
-  @apply bg-[#131313] text-white select-none;
-}
-
-.button {
-  @apply bg-[#4378bf] hover:bg-[#5988c6] rounded-md cursor-pointer text-[16px] p-3 transition-colors duration-[0.25s];
-}

src/componets/Sidebar.css

@@ -4,6 +4,15 @@
   @apply fixed top-0 left-0 w-60 h-screen bg-[#191919] flex flex-col border-e-[1px] border-[#2a2a2a];
 }
 
+.sidebar-downloads {
+  @apply text-[#bdbdbd] fixed bottom-3 left-2 bg-[#242424] rounded-lg border border-[#323232] w-55 p-4 cursor-pointer transition-colors duration-[0.25s];
+}
+
+.sidebar-downloads:hover {
+  @apply text-white;
+  @apply bg-[#323232] border-[#484848];
+}
+
 .logo {
   @apply text-2xl font-bold p-4;
 }
@@ -13,14 +22,18 @@
 }
 
 .link {
-  @apply text-[#bdbdbd] p-2 rounded-lg no-underline cursor-pointer transition-colors duration-[0.25s];
+  @apply text-[#bdbdbd] p-2 rounded-md no-underline cursor-pointer transition-colors duration-[0.25s] border border-transparent;
 }
 
 .link.active {
-  @apply bg-[#313131];
+  @apply bg-[#242424] border-[#323232];
 }
 
 .link.active,
 .link:hover {
   @apply text-white;
 }
+
+.link.active:hover {
+  @apply bg-[#323232] border-[#484848];
+}

src/componets/Sidebar.tsx

@@ -2,13 +2,14 @@ import './Sidebar.css'
 import Icon from '../Icon.png'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCog, faServer } from '@fortawesome/free-solid-svg-icons'
+import { faCog, faDownload, faServer } from '@fortawesome/free-solid-svg-icons'
 import { faDiscord } from '@fortawesome/free-brands-svg-icons'
 import { useState } from 'react'
 import { platform } from '@tauri-apps/plugin-os'
 import { getCurrentWindow } from '@tauri-apps/api/window'
+import { SidebarProps } from '../types/SidebarProps'
 
-const Sidebar = () => {
+export default function Sidebar({ downloadProgress }: SidebarProps) {
   const [rot, setRot] = useState(0)
   const [dir, setDir] = useState(1)
 
@@ -62,8 +63,9 @@ const Sidebar = () => {
         <a draggable={false} href="#settings" className={`link ${(window.location.hash || '#installs') === '#settings' ? 'active' : ''}`}><FontAwesomeIcon icon={faCog} className="mr-2" /> Settings</a>
         <a draggable={false} onClick={() => openUrl("https://berrydash.lncvrt.xyz/discord")} className="link"><FontAwesomeIcon icon={faDiscord} className="mr-2" /> Support</a>
       </nav>
+      <div className='sidebar-downloads'>
+        <p><FontAwesomeIcon icon={faDownload} /> Downloads</p>
+      </div>
     </aside>
   )
 }
-
-export default Sidebar

src/main.tsx

@@ -3,10 +3,21 @@ import ReactDOM from 'react-dom/client'
 import Installs from './routes/Installs'
 import Settings from './routes/Settings'
 import Sidebar from './componets/Sidebar'
-import './Globals.scss'
+import './Globals.css'
+import { LauncherVersion } from './types/LauncherVersion'
+import { DownloadProgress } from './types/DownloadProgress'
 
 function App () {
   const [hash, setHash] = useState(window.location.hash || '#installs')
+  const [downloadProgress, setDownloadProgress] = useState<DownloadProgress[]>([]);
+
+  function downloadVersions(versions: LauncherVersion[]) {
+    setDownloadProgress(prev => [
+      ...prev,
+      ...versions.map(v => new DownloadProgress(v, 0, false))
+    ])
+    return;
+  }
 
   useEffect(() => {
     const onHashChange = () => setHash(window.location.hash || '#installs')
@@ -22,7 +33,7 @@ function App () {
 
   function renderContent () {
     if (hash === '#installs') {
-      return <Installs />
+      return <Installs downloadVersions={downloadVersions} />
     } else if (hash === '#settings') {
       return <Settings />
     }
@@ -31,7 +42,7 @@ function App () {
 
   return (
     <>
-      <Sidebar />
+      <Sidebar downloadProgress={downloadProgress} />
       <main style={{ marginLeft: '15rem' }}>{renderContent()}</main>
     </>
   )

src/routes/Installs.css

@@ -27,13 +27,21 @@
 }
 
 .popup-box {
-  @apply relative w-[85vw] h-[80vh] shadow-[0_0_20px_rgba(0,0,0,0.2)] rounded-lg bg-[#191919] flex flex-col p-6;
+  @apply relative w-[60vw] h-[80vh] shadow-[0_0_20px_rgba(0,0,0,0.2)] rounded-lg bg-[#191919] flex flex-col p-6;
 }
 
 .popup-content {
   @apply flex-1 overflow-auto border border-[#323232] rounded-lg mt-4;
 }
 
-.close-button {
-  @apply flex justify-center items-center absolute bg-[#363636] hover:bg-[#484848] text-2xl cursor-pointer text-gray-300 hover:text-white h-12 w-12 p-3 rounded-xl border-[none] left-2 top-2 transition-colors;
+.popup-entry {
+  @apply relative h-[100px] bg-[#242424] m-2 p-2 rounded-lg border border-[#484848];
+}
+
+.popup-entry button {
+  @apply absolute;
+}
+
+.close-button {
+  @apply flex justify-center items-center absolute bg-[#323232] hover:bg-[#484848] text-2xl cursor-pointer text-gray-300 hover:text-white h-12 w-12 p-3 rounded-xl border-[none] left-2 top-2 transition-colors;
 }

src/routes/Installs.tsx

@@ -1,11 +1,16 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import './Installs.css'
-import { useState } from 'react'
-import { faX } from '@fortawesome/free-solid-svg-icons'
+import { useEffect, useState } from 'react'
+import { faAdd, faRemove, faX } from '@fortawesome/free-solid-svg-icons'
+import { LauncherVersion } from '../types/LauncherVersion'
+import axios from 'axios'
+import { InstallsProps } from '../types/InstallsProps'
 
-export default function Installs () {
+export default function Installs({ downloadVersions }: InstallsProps) {
   const [showPopup, setShowPopup] = useState(false)
   const [fadeOut, setFadeOut] = useState(false)
+  const [versionList, setVersionList] = useState<null | LauncherVersion[]>(null);
+  const [selectedVersionList, setSelectedVersionList] = useState<LauncherVersion[]>([]);
 
   function downloadVersion () {
     setShowPopup(true)
@@ -19,6 +24,15 @@ export default function Installs () {
     }
   }
 
+  useEffect(() => {
+    if (!showPopup) return
+    setSelectedVersionList([]);
+    setVersionList(null)
+    axios.get('https://berrydash.lncvrt.xyz/database/launcher/versions.php')
+      .then(res => setVersionList(res.data.reverse()))
+      .catch(() => setVersionList([]))
+  }, [showPopup])
+
   return (
     <>
       <p className='text-3xl ml-4 mt-4'>Installs</p>
@@ -45,8 +59,33 @@ export default function Installs () {
             </button>
             <p className='text-xl text-center'>Select versions to download</p>
             <div className='popup-content'>
-              <p className='text-center'>Downloading version list...</p>
+              {versionList == null ? (
+                <p className='text-center'>Downloading version list...</p>
+              ) : (
+                versionList.map((v, i) => 
+                  <div key={i} className='popup-entry'>
+                    <p className='text-2xl'>Berry Dash v{v.displayName}</p>
+                    <button className='button right-2 bottom-2' onClick={() => {
+                      if (!selectedVersionList) return
+                      if (!selectedVersionList.includes(v)) {
+                        setSelectedVersionList([...selectedVersionList, v])
+                      } else {
+                        setSelectedVersionList(selectedVersionList.filter(x => x !== v))
+                      }
+                    }}>{selectedVersionList.includes(v) ? <><FontAwesomeIcon icon={faRemove} /> Remove</> : <><FontAwesomeIcon icon={faAdd} /> Add</>}</button>
+                  </div>
+                )
+              )}
             </div>
+            {versionList != null && (
+              <div className='flex justify-center'>
+                <button className='button w-fit mt-2 mb-[-16px]' onClick={() => {
+                  setFadeOut(true)
+                  setTimeout(() => setShowPopup(false), 200)
+                  downloadVersions(selectedVersionList)
+                }}>Download {selectedVersionList.length} version{selectedVersionList.length == 1 ? '' : 's'}</button>
+              </div>
+            )}
           </div>
         </div>
       )}