Add notifications & update dependencies

src/componets/Sidebar.tsx

@@ -72,8 +72,8 @@ export default function Sidebar({ setShowPopup, setPopupMode, setFadeOut }: Side
         />
       </div>
       <nav className="nav-links">
-        <a draggable={false} href="#installs" className={`link ${(window.location.hash || '#installs') === '#installs' ? 'active' : ''}`}><FontAwesomeIcon icon={faServer} className="mr-2" /> Installs</a>
-        <a draggable={false} href="#settings" className={`link ${(window.location.hash || '#installs') === '#settings' ? 'active' : ''}`}><FontAwesomeIcon icon={faCog} className="mr-2" /> Settings</a>
+        <a draggable={false} href="#installs" className={`link ${(window.location.hash || '#installs') === '#installs' ? 'active' : ''}`}><FontAwesomeIcon icon={faServer} className="mr-1" /> Installs</a>
+        <a draggable={false} href="#settings" className={`link ${(window.location.hash || '#installs') === '#settings' ? 'active' : ''}`}><FontAwesomeIcon icon={faCog} className="mr-1" /> Settings</a>
         <a draggable={false} href="#leaderboards" className={`link ${(window.location.hash || '#installs') === '#leaderboards' ? 'active' : ''}`}><FontAwesomeIcon icon={faRankingStar} className="mr-1" /> Leaderboards</a>
         <a draggable={false} onClick={() => openUrl("https://berrydash.lncvrt.xyz/discord")} className="link"><FontAwesomeIcon icon={faDiscord} className="mr-1" /> Community</a>
       </nav>

src/main.tsx

@@ -13,6 +13,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faAdd, faRemove, faX } from '@fortawesome/free-solid-svg-icons'
 import '@fontsource/roboto'
 import Leaderboards from './routes/Leaderboards'
+import { isPermissionGranted, requestPermission, sendNotification } from '@tauri-apps/plugin-notification'
 
 function App () {
   const [hash, setHash] = useState(window.location.hash || '#installs')
@@ -32,32 +33,48 @@ function App () {
     next?.()
   }
 
-  listen<string>('download-progress', (event) => {
-    const [versionName, progStr] = event.payload.split(':')
-    const prog = Number(progStr)
+  useEffect(() => {
+    const unlistenProgress = listen<string>('download-progress', (event) => {
+      const [versionName, progStr] = event.payload.split(':')
+      const prog = Number(progStr)
 
-    setDownloadProgress(prev => {
-      const i = prev.findIndex(d => d.version.version === versionName)
-      if (i === -1) return prev
-      const copy = [...prev]
-      copy[i] = { ...copy[i], progress: prog }
-      return copy
+      setDownloadProgress(prev => {
+        const i = prev.findIndex(d => d.version.version === versionName)
+        if (i === -1) return prev
+        const copy = [...prev]
+        copy[i] = { ...copy[i], progress: prog }
+        return copy
+      })
     })
-  })
 
-  listen<string>('download-done', (event) => {
-    const versionName = event.payload
-    setDownloadProgress(prev => prev.filter(d => d.version.version !== versionName))
-    activeDownloads--
-    runNext()
-  })
+    const unlistenDone = listen<string>('download-done', async (event) => {
+      const versionName = event.payload
+      setDownloadProgress(prev => prev.filter(d => d.version.version !== versionName))
+      activeDownloads--
+      runNext()
+      if (downloadProgress.length === 0) {
+        await notifyUser('Downloads Complete', 'All downloads have completed.')
+      }
+    })
 
-  listen<string>('download-failed', (event) => {
-    const versionName = event.payload
-    setDownloadProgress(prev => prev.filter(d => d.version.version !== versionName))
-    activeDownloads--
-    runNext()
-  })
+    const unlistenFailed = listen<string>('download-failed', async (event) => {
+      const versionName = event.payload
+      setDownloadProgress(prev =>
+        prev.map(d =>
+          d.version.version === versionName ? { ...d, failed: true } : d
+        )
+      )
+      activeDownloads--
+      runNext()
+      await notifyUser('Download Failed', `The download for version ${versionName} has failed.`)
+    })
+
+    return () => {
+      unlistenProgress.then(f => f())
+      unlistenDone.then(f => f())
+      unlistenFailed.then(f => f())
+    }
+  }, [])
 
   function downloadVersions(versions: LauncherVersion[]) {
     const newDownloads = versions.map(v => new DownloadProgress(v, 0, false, true))
@@ -92,6 +109,17 @@ function App () {
     }
   }
 
+  async function notifyUser(title: string, body: string) {
+    let permissionGranted = await isPermissionGranted();
+    if (!permissionGranted) {
+      const permission = await requestPermission();
+      permissionGranted = permission === 'granted';
+    }
+    if (permissionGranted) {
+      sendNotification({ title, body });
+    }
+  }
+
   useEffect(() => {
     const onHashChange = () => setHash(window.location.hash || '#installs')
     window.addEventListener('hashchange', onHashChange)