Move to NextJS + other changes

src/app/GlobalProvider.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { createContext, useContext, ReactNode } from 'react'
+import { LauncherVersion } from './types/LauncherVersion'
+import { DownloadProgress } from './types/DownloadProgress'
+import { VersionsConfig } from './types/VersionsConfig'
+import { NormalConfig } from './types/NormalConfig'
+import { DownloadedVersion } from './types/DownloadedVersion'
+
+type GlobalCtxType = {
+  versionList: LauncherVersion[] | null
+  setVersionList: (v: LauncherVersion[] | null) => void
+  selectedVersionList: LauncherVersion[]
+  setSelectedVersionList: (v: LauncherVersion[]) => void
+  downloadProgress: DownloadProgress[]
+  setDownloadProgress: (v: DownloadProgress[]) => void
+  showPopup: boolean
+  setShowPopup: (v: boolean) => void
+  popupMode: number | null
+  setPopupMode: (v: number | null) => void
+  fadeOut: boolean
+  setFadeOut: (v: boolean) => void
+  downloadedVersionsConfig: VersionsConfig | null
+  setDownloadedVersionsConfig: (v: VersionsConfig | null) => void
+  normalConfig: NormalConfig | null
+  setNormalConfig: (v: NormalConfig | null) => void
+  managingVersion: DownloadedVersion | null
+  setManagingVersion: (v: DownloadedVersion | null) => void
+}
+
+const GlobalCtx = createContext<GlobalCtxType | null>(null)
+
+export const useGlobal = () => {
+  const ctx = useContext(GlobalCtx)
+  if (!ctx) throw new Error('useGlobal must be inside GlobalProvider')
+  return ctx
+}
+
+export const GlobalProvider = ({
+  children,
+  value
+}: {
+  children: ReactNode
+  value: GlobalCtxType
+}) => {
+  return <GlobalCtx.Provider value={value}>{children}</GlobalCtx.Provider>
+}

src/app/Globals.css

@@ -0,0 +1,75 @@
+@import "tailwindcss";
+
+body {
+  @apply bg-[#0f0f0f] text-white select-none;
+}
+
+.button {
+  @apply bg-[#0a6ec8] hover:bg-[#1361ad] disabled:bg-[#124c7e] disabled:hover:bg-[#1b3f63] disabled:text-[#bdbdbd] disabled:hover:text-[#e6e6e6] rounded-md cursor-pointer text-[16px] py-1.5 px-3 transition-colors duration-[0.25s];
+}
+
+.button-green {
+  @apply bg-[#28a745] hover:bg-[#218838] disabled:bg-[#1c7430] disabled:hover:bg-[#1a5c24] disabled:text-[#bdbdbd] disabled:hover:text-[#e6e6e6];
+}
+
+::-webkit-scrollbar {
+  @apply w-2;
+}
+
+::-webkit-scrollbar-track {
+  @apply bg-[#1f1f1f] rounded-lg;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply bg-[#555] w-1 rounded-lg active:bg-[#888];
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.popup-overlay {
+  @apply fixed w-screen h-screen z-[99999] flex justify-center items-center animate-[fadeIn_0.2s_ease-out_forwards] left-0 top-0 bg-[rgba(0,0,0,0.5)];
+}
+
+.popup-overlay.fade-out {
+  @apply animate-[fadeOut_0.2s_ease-out_forwards];
+}
+
+.popup-box {
+  @apply relative w-[60vw] h-[80vh] rounded-lg bg-[#161616] border border-[#323232] flex flex-col p-6;
+}
+
+.popup-content {
+  @apply flex-1 overflow-auto bg-[#242424] border border-[#484848] rounded-lg mt-4;
+}
+
+.popup-entry {
+  @apply relative h-[100px] bg-[#323232] m-2 p-2 rounded-lg border border-[#646464];
+}
+
+.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 left-2 top-2 transition-colors border border-[#484848] hover:border-[#646464];
+}
+
+*:focus {
+  @apply outline-none;
+}

src/app/Installs.css

@@ -0,0 +1,17 @@
+@import "tailwindcss";
+
+.downloads-container {
+  @apply flex justify-center;
+}
+
+.downloads-scroll {
+  @apply h-[515px] bg-[#161616] border border-[#242424] rounded-lg overflow-y-auto w-full;
+}
+
+.downloads-entry {
+  @apply flex justify-between items-center m-2 p-4 rounded-lg text-gray-200 text-lg transition-colors cursor-default bg-[#242424] hover:bg-[#323232] border border-[#484848] hover:border-[#565656];
+}
+
+.downloads-entry p.score {
+  @apply font-mono text-blue-500 text-lg;
+}

src/app/componets/Setting.css

@@ -0,0 +1,17 @@
+@import "tailwindcss";
+
+.setting-checkbox-wrapper {
+  @apply relative w-5 h-5;
+}
+
+.setting-checkbox {
+  @apply appearance-none w-full h-full border-2 border-[#484848] rounded-md bg-[#242424] transition-colors duration-200 cursor-pointer;
+}
+
+.setting-checkbox:checked {
+  @apply bg-blue-500 border-blue-600;
+}
+
+.fa-check-icon {
+  @apply absolute top-1/2 left-1/2 text-white text-[11px] pointer-events-none -translate-x-2/4 -translate-y-2/4;
+}

src/app/componets/Setting.tsx

@@ -0,0 +1,21 @@
+import './Setting.css'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCheck } from '@fortawesome/free-solid-svg-icons'
+import { SettingProps } from '../types/SettingProps'
+
+export function Setting ({ label, value, onChange, className }: SettingProps) {
+  return (
+    <div className={`flex items-center gap-2 mb-2 ${className}`}>
+      <label className='text-white text-lg'>{label}</label>
+      <div className='setting-checkbox-wrapper'>
+        <input
+          type='checkbox'
+          className='setting-checkbox'
+          checked={value}
+          onChange={() => onChange(!value)}
+        />
+        {value && <FontAwesomeIcon icon={faCheck} className='fa-check-icon' />}
+      </div>
+    </div>
+  )
+}

src/app/componets/Sidebar.css

@@ -0,0 +1,39 @@
+@import "tailwindcss";
+
+.sidebar {
+  @apply fixed top-0 left-0 w-60 h-screen bg-[#161616] flex flex-col border-e-[1px] border-[#242424] z-[1];
+}
+
+.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;
+}
+
+.nav-links {
+  @apply flex flex-col p-4 space-y-1;
+}
+
+.link {
+  @apply text-[#bdbdbd] p-2 rounded-md no-underline cursor-pointer transition-colors duration-[0.25s] border border-transparent;
+}
+
+.link.active {
+  @apply bg-[#242424] border-[#323232];
+}
+
+.link.active,
+.link:hover {
+  @apply text-white;
+}
+
+.link.active:hover {
+  @apply bg-[#323232] border-[#484848];
+}

src/app/componets/Sidebar.tsx

@@ -0,0 +1,135 @@
+'use client'
+
+import './Sidebar.css'
+import Icon from '../Icon.png'
+import { openUrl } from '@tauri-apps/plugin-opener'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+  faCog,
+  faDownload,
+  faRankingStar,
+  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 { useGlobal } from '../GlobalProvider'
+import Image from 'next/image'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
+export default function Sidebar () {
+  const [rot, setRot] = useState(0)
+  const [dir, setDir] = useState(1)
+  const { setShowPopup, setPopupMode, setFadeOut, downloadProgress } =
+    useGlobal()
+  const pathname = usePathname()
+
+  return (
+    <aside className='sidebar'>
+      <div
+        className='dragarea'
+        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'
+        }}
+        onMouseDown={() => {
+          getCurrentWindow().startDragging()
+        }}
+      ></div>
+      <div className='logo'>
+        <Image
+          draggable={false}
+          src={Icon}
+          width={48}
+          height={48}
+          alt=''
+          style={{
+            transform: `rotate(${rot}deg)`,
+            transition: 'transform 0.3s ease',
+            marginTop: ['windows', 'macos'].includes(platform())
+              ? '20px'
+              : '0px'
+          }}
+          onClick={() =>
+            setRot(r => {
+              let next = r + dir * 90
+              if (next >= 360) {
+                next = 360
+                setDir(-1)
+              } else if (next <= 0) {
+                next = 0
+                setDir(1)
+              }
+              return next
+            })
+          }
+          onContextMenu={() =>
+            setRot(r => {
+              let next = r - dir * 90
+              if (next >= 360) {
+                next = 360
+                setDir(-1)
+              } else if (next <= 0) {
+                next = 0
+                setDir(1)
+              }
+              return next
+            })
+          }
+        />
+      </div>
+      <nav className='nav-links'>
+        <Link
+          draggable={false}
+          href='/'
+          className={`link ${pathname === '/' ? 'active' : ''}`}
+        >
+          <FontAwesomeIcon icon={faServer} className='mr-1' /> Installs
+        </Link>
+        <Link
+          draggable={false}
+          href='/settings'
+          className={`link ${pathname === '/settings' ? 'active' : ''}`}
+        >
+          <FontAwesomeIcon icon={faCog} className='mr-1' /> Settings
+        </Link>
+        <Link
+          draggable={false}
+          href='/leaderboards'
+          className={`link ${pathname === '/leaderboards' ? 'active' : ''}`}
+        >
+          <FontAwesomeIcon icon={faRankingStar} className='mr-1' /> Leaderboards
+        </Link>
+        <a
+          draggable={false}
+          onClick={() => openUrl('https://berrydash.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' }}
+        onClick={() => {
+          setPopupMode(1)
+          setShowPopup(true)
+          setFadeOut(false)
+        }}
+      >
+        <p>
+          <FontAwesomeIcon icon={faDownload} /> Downloads
+        </p>
+      </div>
+    </aside>
+  )
+}

src/app/layout.tsx

@@ -0,0 +1,604 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import Sidebar from './componets/Sidebar'
+import './Globals.css'
+import { LauncherVersion } from './types/LauncherVersion'
+import { DownloadProgress } from './types/DownloadProgress'
+import { platform } from '@tauri-apps/plugin-os'
+import { invoke } from '@tauri-apps/api/core'
+import { listen } from '@tauri-apps/api/event'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faAdd, faRemove, faX } from '@fortawesome/free-solid-svg-icons'
+import {
+  isPermissionGranted,
+  requestPermission,
+  sendNotification
+} from '@tauri-apps/plugin-notification'
+import {
+  readNormalConfig,
+  readVersionsConfig,
+  writeVersionsConfig
+} from './util/BazookaManager'
+import { VersionsConfig } from './types/VersionsConfig'
+import { DownloadedVersion } from './types/DownloadedVersion'
+import { NormalConfig } from './types/NormalConfig'
+import { app } from '@tauri-apps/api'
+import axios from 'axios'
+import { openUrl } from '@tauri-apps/plugin-opener'
+import { GlobalProvider } from './GlobalProvider'
+import { Roboto } from 'next/font/google'
+
+const roboto = Roboto({
+  subsets: ['latin']
+})
+
+export default function RootLayout ({
+  children
+}: {
+  children: React.ReactNode
+}) {
+  const [loading, setLoading] = useState(true)
+  const [loadingText, setLoadingText] = useState('Loading...')
+  const [outdated, setOutdated] = useState(false)
+  const [versionList, setVersionList] = useState<null | LauncherVersion[]>(null)
+  const [selectedVersionList, setSelectedVersionList] = useState<
+    LauncherVersion[]
+  >([])
+  const [downloadProgress, setDownloadProgress] = useState<DownloadProgress[]>(
+    []
+  )
+  const [showPopup, setShowPopup] = useState(false)
+  const [popupMode, setPopupMode] = useState<null | number>(null)
+  const [fadeOut, setFadeOut] = useState(false)
+  const activeDownloads = useRef(0)
+  const queue = useRef<(() => void)[]>([])
+  const [downloadedVersionsConfig, setDownloadedVersionsConfig] =
+    useState<VersionsConfig | null>(null)
+  const [normalConfig, setNormalConfig] = useState<NormalConfig | null>(null)
+  const [managingVersion, setManagingVersion] =
+    useState<DownloadedVersion | null>(null)
+
+  function runNext () {
+    if (activeDownloads.current === 0 && queue.current.length === 0) {
+      setFadeOut(true)
+      setTimeout(() => setShowPopup(false), 200)
+      return
+    }
+    if (activeDownloads.current >= 3 || queue.current.length === 0) return
+    activeDownloads.current++
+    const next = queue.current.shift()
+    next?.()
+  }
+
+  async function downloadVersions (versions: LauncherVersion[]) {
+    while (normalConfig != null) {
+      const useWine = normalConfig.settings.useWineOnUnixWhenNeeded
+      const p = platform()
+      const newDownloads = versions.map(
+        v => new DownloadProgress(v, 0, false, true)
+      )
+      setDownloadProgress(prev => [...prev, ...newDownloads])
+
+      newDownloads.forEach(download => {
+        let plat = p
+        if (p === 'linux' && useWine) {
+          if (
+            !download.version.platforms.includes(p) &&
+            download.version.platforms.includes('windows')
+          ) {
+            plat = 'windows'
+          }
+        }
+        const idx = download.version.platforms.indexOf(plat)
+        const url = download.version.downloadUrls[idx]
+        const exe = download.version.executables[idx]
+
+        if (!url) {
+          setDownloadProgress(prev =>
+            prev.map(d =>
+              d.version.version === download.version.version
+                ? { ...d, failed: true }
+                : d
+            )
+          )
+          return
+        }
+
+        const task = () => {
+          setDownloadProgress(prev => {
+            const i = prev.findIndex(
+              d => d.version.version === download.version.version
+            )
+            if (i === -1) return prev
+            const copy = [...prev]
+            copy[i] = { ...copy[i], queued: false }
+            return copy
+          })
+
+          invoke('download', {
+            url,
+            name: download.version.version,
+            executable: exe
+          })
+        }
+
+        queue.current.push(task)
+        runNext()
+      })
+      break
+    }
+  }
+
+  function handleOverlayClick (e: React.MouseEvent<HTMLDivElement>) {
+    if (e.target === e.currentTarget) {
+      setFadeOut(true)
+      setTimeout(() => setShowPopup(false), 200)
+    }
+  }
+
+  const notifyUser = useCallback(
+    async (title: string, body: string) => {
+      if (!normalConfig?.settings.allowNotifications) return
+
+      let permissionGranted = await isPermissionGranted()
+      if (!permissionGranted) {
+        const permission = await requestPermission()
+        permissionGranted = permission === 'granted'
+      }
+
+      if (permissionGranted) {
+        sendNotification({ title, body })
+      }
+    },
+    [normalConfig]
+  )
+
+  useEffect(() => {
+    ;(async () => {
+      setLoadingText('Checking latest version...')
+      try {
+        const response = await axios.get(
+          'https://berrydash.lncvrt.xyz/database/launcher/latest.php'
+        )
+        const client = await app.getVersion()
+        if (response.data !== client) {
+          setOutdated(true)
+          return
+        }
+      } catch {
+        setLoadingText('Failed to check latest version.')
+        return
+      }
+      setLoadingText('Loading configs...')
+      const normalConfig = await readNormalConfig()
+      const versionsConfig = await readVersionsConfig()
+      setDownloadedVersionsConfig(versionsConfig)
+      setNormalConfig(normalConfig)
+      if (platform() == 'windows') {
+        invoke('windows_rounded_corners', {
+          enabled: normalConfig.settings.useWindowsRoundedCorners
+        })
+      }
+      setLoading(false)
+    })()
+  }, [])
+
+  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
+      })
+    })
+
+    const unlistenDone = listen<string>('download-done', async event => {
+      const versionName = event.payload
+      setDownloadProgress(prev => {
+        const downloaded = prev.find(d => d.version.version === versionName)
+        if (downloaded && downloadedVersionsConfig) {
+          const newDownloaded = DownloadedVersion.import(downloaded.version)
+          const updatedConfig = {
+            ...downloadedVersionsConfig,
+            list: [...downloadedVersionsConfig.list, newDownloaded]
+          }
+          setDownloadedVersionsConfig(updatedConfig)
+          writeVersionsConfig(updatedConfig)
+        }
+        return prev.filter(d => d.version.version !== versionName)
+      })
+      activeDownloads.current--
+      runNext()
+      if (downloadProgress.length === 0) {
+        await notifyUser('Downloads Complete', 'All downloads have completed.')
+      }
+    })
+
+    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.current--
+      runNext()
+      await notifyUser(
+        'Download Failed',
+        `The download for version ${versionName} has failed.`
+      )
+    })
+
+    const unlistenUninstalled = listen<string>(
+      'version-uninstalled',
+      async event => {
+        const versionName = event.payload
+        setDownloadedVersionsConfig(prev => {
+          if (!prev) return prev
+          const updatedList = prev.list.filter(
+            v => v.version.version !== versionName
+          )
+          const updatedConfig = { ...prev, list: updatedList }
+          writeVersionsConfig(updatedConfig)
+          setManagingVersion(null)
+          setFadeOut(true)
+          setTimeout(() => setShowPopup(false), 200)
+          return updatedConfig
+        })
+      }
+    )
+
+    return () => {
+      unlistenProgress.then(f => f())
+      unlistenDone.then(f => f())
+      unlistenFailed.then(f => f())
+      unlistenUninstalled.then(f => f())
+    }
+  }, [downloadedVersionsConfig, downloadProgress, notifyUser])
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => e.preventDefault()
+    document.addEventListener('contextmenu', handler)
+    return () => document.removeEventListener('contextmenu', handler)
+  }, [])
+
+  return (
+    <>
+      <html lang='en' className={roboto.className}>
+        <body>
+          {loading ? (
+            <div className='w-screen h-screen flex items-center justify-center'>
+              {outdated ? (
+                <div className='text-center'>
+                  <p className='text-8xl mb-4'>Outdated Launcher!</p>
+                  <p className='text-4xl mb-4'>
+                    Please update to the latest version to continue.
+                  </p>
+                  <button
+                    className='button'
+                    onClick={() =>
+                      openUrl('https://berrydash.lncvrt.xyz/download')
+                    }
+                  >
+                    Download latest version
+                  </button>
+                </div>
+              ) : (
+                <p className='text-7xl text-center'>{loadingText}</p>
+              )}
+            </div>
+          ) : (
+            <>
+              <div
+                tabIndex={0}
+                onKeyDown={e => {
+                  if (showPopup && e.key === 'Escape') {
+                    setFadeOut(true)
+                    setTimeout(() => setShowPopup(false), 200)
+                  }
+                }}
+              >
+                <GlobalProvider
+                  value={{
+                    versionList,
+                    setVersionList,
+                    selectedVersionList,
+                    setSelectedVersionList,
+                    downloadProgress,
+                    setDownloadProgress,
+                    showPopup,
+                    setShowPopup,
+                    popupMode,
+                    setPopupMode,
+                    fadeOut,
+                    setFadeOut,
+                    downloadedVersionsConfig,
+                    setDownloadedVersionsConfig,
+                    normalConfig,
+                    setNormalConfig,
+                    managingVersion,
+                    setManagingVersion
+                  }}
+                >
+                  <Sidebar />
+                </GlobalProvider>
+                <div
+                  className='relative z-[2] ml-[239px] w-[761px] border-b border-[#242424] h-[33px] bg-[#161616]'
+                  style={{
+                    display: platform() == 'windows' ? 'block' : 'none'
+                  }}
+                ></div>
+                <div className='relative z-0'>
+                  <main style={{ marginLeft: '15rem' }}>
+                    <GlobalProvider
+                      value={{
+                        versionList,
+                        setVersionList,
+                        selectedVersionList,
+                        setSelectedVersionList,
+                        downloadProgress,
+                        setDownloadProgress,
+                        showPopup,
+                        setShowPopup,
+                        popupMode,
+                        setPopupMode,
+                        fadeOut,
+                        setFadeOut,
+                        downloadedVersionsConfig,
+                        setDownloadedVersionsConfig,
+                        normalConfig,
+                        setNormalConfig,
+                        managingVersion,
+                        setManagingVersion
+                      }}
+                    >
+                      {children}
+                    </GlobalProvider>
+                  </main>
+                </div>
+                {showPopup && (
+                  <div
+                    className={`popup-overlay ${fadeOut ? 'fade-out' : ''}`}
+                    onClick={handleOverlayClick}
+                  >
+                    <div className='popup-box'>
+                      <button
+                        className='close-button'
+                        onClick={() => {
+                          setFadeOut(true)
+                          setTimeout(() => setShowPopup(false), 200)
+                        }}
+                      >
+                        <FontAwesomeIcon icon={faX} />
+                      </button>
+                      {popupMode === 0 ? (
+                        <>
+                          <p className='text-xl text-center'>
+                            Select versions to download
+                          </p>
+                          <div className='popup-content'>
+                            {versionList == null ? (
+                              <p className='text-center'>
+                                Getting version list...
+                              </p>
+                            ) : (
+                              versionList
+                                .filter(
+                                  v =>
+                                    !downloadedVersionsConfig?.list.some(
+                                      dv => dv.version.version === v.version
+                                    )
+                                )
+                                .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>
+                        </>
+                      ) : popupMode === 1 ? (
+                        <>
+                          <p className='text-xl text-center'>Downloads</p>
+                          <div className='popup-content'>
+                            {downloadProgress.length === 0 ? (
+                              <p className='text-center mt-6'>
+                                Nothing here...
+                              </p>
+                            ) : (
+                              downloadProgress.map((v, i) => (
+                                <div
+                                  key={i}
+                                  className='popup-entry flex flex-col justify-between'
+                                >
+                                  <p className='text-2xl'>
+                                    Berry Dash v{v.version.displayName}
+                                  </p>
+                                  <div className='mt-[25px] flex items-center justify-between'>
+                                    {v.failed ? (
+                                      <>
+                                        <div className='flex items-center'>
+                                          <span className='text-red-500'>
+                                            Download failed
+                                          </span>
+                                          <button
+                                            className='button ml-30 mb-2'
+                                            onClick={() =>
+                                              setDownloadProgress(prev =>
+                                                prev.filter(
+                                                  (_, idx) => idx !== i
+                                                )
+                                              )
+                                            }
+                                          >
+                                            Cancel
+                                          </button>
+                                        </div>
+                                      </>
+                                    ) : v.queued ? (
+                                      <span className='text-yellow-500'>
+                                        Queued…
+                                      </span>
+                                    ) : (
+                                      <span>
+                                        Downloading: {v.progress}% done
+                                      </span>
+                                    )}
+                                  </div>
+                                </div>
+                              ))
+                            )}
+                          </div>
+                        </>
+                      ) : popupMode === 2 ? (
+                        managingVersion ? (
+                          <>
+                            <p className='text-xl text-center'>
+                              Manage version{' '}
+                              {managingVersion.version.displayName}
+                            </p>
+                            <div className='popup-content flex flex-col items-center justify-center gap-2 h-full'>
+                              <button
+                                className='button'
+                                onClick={() =>
+                                  invoke('uninstall_version', {
+                                    name: managingVersion.version.version
+                                  })
+                                }
+                              >
+                                Uninstall
+                              </button>
+                              <button
+                                className='button'
+                                onClick={async () =>
+                                  invoke('open_folder', {
+                                    name: managingVersion.version.version
+                                  })
+                                }
+                              >
+                                Open Folder
+                              </button>
+                              <button
+                                className='button'
+                                style={{
+                                  display:
+                                    platform() == 'macos' ? 'block' : 'none'
+                                }}
+                                onClick={async () => {
+                                  const exe =
+                                    managingVersion.version.executables[
+                                      managingVersion.version.platforms.indexOf(
+                                        platform()
+                                      )
+                                    ]
+                                  await invoke('fix_mac_permissions', {
+                                    name: managingVersion.version.version,
+                                    executable: exe
+                                  })
+                                }}
+                              >
+                                Fix permissions
+                              </button>
+                            </div>
+                          </>
+                        ) : (
+                          <p className='text-xl text-center'>
+                            No version selected
+                          </p>
+                        )
+                      ) : null}
+                      {popupMode == 0 && 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>
+                          <button
+                            className='button w-fit mt-2 ml-2 mb-[-16px]'
+                            onClick={() => {
+                              const filtered = versionList.filter(
+                                v =>
+                                  !downloadedVersionsConfig?.list.some(
+                                    dv => dv.version.version === v.version
+                                  )
+                              )
+                              if (
+                                selectedVersionList.length ===
+                                  filtered.length &&
+                                filtered.every(v =>
+                                  selectedVersionList.includes(v)
+                                )
+                              ) {
+                                setSelectedVersionList([])
+                              } else {
+                                setSelectedVersionList(filtered)
+                              }
+                            }}
+                          >
+                            {selectedVersionList.length ===
+                            versionList.filter(
+                              v =>
+                                !downloadedVersionsConfig?.list.some(
+                                  dv => dv.version.version === v.version
+                                )
+                            ).length
+                              ? 'Deselect All'
+                              : 'Select All'}
+                          </button>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </>
+          )}
+        </body>
+      </html>
+    </>
+  )
+}

src/app/leaderboards/Leaderboards.css

@@ -0,0 +1,17 @@
+@import "tailwindcss";
+
+.leaderboard-container {
+  @apply flex justify-center;
+}
+
+.leaderboard-scroll {
+  @apply h-[510px] bg-[#161616] border border-[#242424] rounded-lg overflow-y-auto max-w-md w-full;
+}
+
+.leaderboard-entry {
+  @apply flex justify-between items-center m-2 p-4 rounded-lg text-gray-200 text-lg transition-colors cursor-default bg-[#242424] hover:bg-[#323232] border border-[#484848] hover:border-[#565656];
+}
+
+.leaderboard-entry p.score {
+  @apply font-mono text-blue-500 text-lg;
+}

src/app/leaderboards/page.tsx

@@ -0,0 +1,103 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import './Leaderboards.css'
+import axios from 'axios'
+import { LeaderboardEntry } from '../types/LeaderboardEntry'
+import { app } from '@tauri-apps/api'
+import { platform } from '@tauri-apps/plugin-os'
+import { decrypt } from '../util/Encryption'
+import { invoke } from '@tauri-apps/api/core'
+
+export default function Leaderboards () {
+  const [leaderboardData, setLeaderboardData] = useState<LeaderboardEntry[]>([])
+  const [loading, setLoading] = useState(true)
+  const formatter = new Intl.NumberFormat('en-US')
+
+  async function refresh () {
+    setLoading(true)
+    setLeaderboardData([])
+    try {
+      const launcherVersion = await app.getVersion()
+      const response = await axios.get(
+        'https://berrydash.lncvrt.xyz/database/getTopPlayers.php',
+        {
+          headers: {
+            Requester: 'BerryDashLauncher',
+            LauncherVersion: launcherVersion,
+            ClientPlatform: platform()
+          }
+        }
+      )
+      const decrypted = await decrypt(response.data)
+      setLeaderboardData(JSON.parse(decrypted))
+    } catch (e) {
+      console.error('Error fetching leaderboard data:', e)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  function downloadLeaderboard () {
+    let content = '"Username","Score","ScoreFormatted"\n'
+    leaderboardData.forEach(entry => {
+      content += `"${entry.username}","${entry.value}","${formatter.format(
+        BigInt(entry.value)
+      )}"\n`
+    })
+    while (content.endsWith('\n')) {
+      content = content.slice(0, -1)
+    }
+    invoke('download_leaderboard', { content })
+  }
+
+  useEffect(() => {
+    refresh()
+  }, [])
+
+  return (
+    <div className='mx-4 mt-4'>
+      <div className='flex justify-between items-center mb-4'>
+        <p className='text-3xl'>Leaderboards</p>
+        <div className='flex gap-2'>
+          <button
+            className='button text-3xl'
+            onClick={downloadLeaderboard}
+            disabled={loading || leaderboardData.length === 0}
+          >
+            Download Leaderboards
+          </button>
+          <button
+            className='button text-3xl'
+            onClick={refresh}
+            disabled={loading}
+          >
+            Refresh
+          </button>
+        </div>
+      </div>
+      <div className='leaderboard-container'>
+        <div className='leaderboard-scroll'>
+          {leaderboardData.length ? (
+            leaderboardData.map((entry, i) => (
+              <div key={i} className='leaderboard-entry'>
+                <p>
+                  #{i + 1} {entry.username}
+                </p>
+                <p className='score'>{formatter.format(BigInt(entry.value))}</p>
+              </div>
+            ))
+          ) : loading ? (
+            <div className='flex justify-center items-center h-full'>
+              <p className='text-3xl'>Loading...</p>
+            </div>
+          ) : (
+            <div className='flex justify-center items-center h-full'>
+              <p className='text-3xl'>No data...</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/page.tsx

@@ -0,0 +1,152 @@
+'use client'
+
+import { useEffect } from 'react'
+import axios from 'axios'
+import { platform } from '@tauri-apps/plugin-os'
+import './Installs.css'
+import { format } from 'date-fns'
+import { invoke } from '@tauri-apps/api/core'
+import { message } from '@tauri-apps/plugin-dialog'
+import { useGlobal } from './GlobalProvider'
+
+export default function Installs () {
+  const {
+    downloadProgress,
+    showPopup,
+    setShowPopup,
+    setPopupMode,
+    setFadeOut,
+    setSelectedVersionList,
+    setVersionList,
+    downloadedVersionsConfig,
+    normalConfig,
+    setManagingVersion
+  } = useGlobal()
+
+  useEffect(() => {
+    if (!showPopup) return
+    setSelectedVersionList([])
+    setVersionList(null)
+    ;(async () => {
+      try {
+        while (normalConfig != null) {
+          const useWine = normalConfig.settings.useWineOnUnixWhenNeeded
+          const res = await axios.get(
+            'https://berrydash.lncvrt.xyz/database/launcher/versions.php'
+          )
+          const p = platform()
+          const filtered = res.data.filter((d: { platforms: string[] }) =>
+            p === 'macos' || p === 'linux'
+              ? useWine
+                ? d.platforms.includes('windows') || d.platforms.includes(p)
+                : d.platforms.includes(p)
+              : d.platforms.includes(p)
+          )
+          setVersionList(filtered)
+          break
+        }
+      } catch {
+        setVersionList([])
+      }
+    })()
+  }, [normalConfig, setSelectedVersionList, setVersionList, showPopup])
+
+  return (
+    <div className='mx-4 mt-4'>
+      <div className='flex justify-between items-center mb-4'>
+        <p className='text-3xl'>Installs</p>
+        <button
+          className='button text-3xl'
+          onClick={() => {
+            setPopupMode(0)
+            setShowPopup(true)
+            setFadeOut(false)
+          }}
+          disabled={downloadProgress.length != 0}
+        >
+          Download new version
+        </button>
+      </div>
+      <div className='downloads-container'>
+        <div className='downloads-scroll'>
+          {downloadedVersionsConfig && downloadedVersionsConfig.list.length ? (
+            downloadedVersionsConfig.list
+              .sort((a, b) => b.version.id - a.version.id)
+              .map((entry, i) => (
+                <div key={i} className='downloads-entry'>
+                  <div className='flex flex-col'>
+                    <p className='text-2xl'>
+                      Berry Dash v{entry.version.displayName}
+                    </p>
+                    <p className='text-gray-400 text-md'>
+                      Installed{' '}
+                      {format(new Date(entry.installDate), 'MM/dd/yyyy')}
+                    </p>
+                  </div>
+                  <div className='flex flex-row items-center gap-2'>
+                    <button
+                      className='button'
+                      onClick={async () => {
+                        setManagingVersion(entry)
+                        setPopupMode(2)
+                        setShowPopup(true)
+                        setFadeOut(false)
+                      }}
+                    >
+                      Manage
+                    </button>
+                    <button
+                      className='button button-green'
+                      onClick={async () => {
+                        let plat = platform()
+                        let willUseWine = false
+                        if (plat === 'macos' || plat === 'linux') {
+                          if (
+                            !entry.version.platforms.includes(plat) &&
+                            entry.version.platforms.includes('windows')
+                          ) {
+                            while (normalConfig != null) {
+                              if (
+                                !normalConfig.settings.useWineOnUnixWhenNeeded
+                              ) {
+                                await message(
+                                  'Wine support is disabled in settings and this version requires wine',
+                                  {
+                                    title:
+                                      'Wine is needed to load this version',
+                                    kind: 'error'
+                                  }
+                                )
+                                return
+                              }
+                              break
+                            }
+                            plat = 'windows'
+                            willUseWine = true
+                          }
+                        }
+                        invoke('launch_game', {
+                          name: entry.version.version,
+                          executable:
+                            entry.version.executables[
+                              entry.version.platforms.indexOf(plat)
+                            ],
+                          wine: willUseWine
+                        })
+                      }}
+                    >
+                      Launch
+                    </button>
+                  </div>
+                </div>
+              ))
+          ) : (
+            <div className='flex justify-center items-center h-full'>
+              <p className='text-3xl'>No versions installed</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/settings/page.tsx

@@ -0,0 +1,104 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Setting } from '../componets/Setting'
+import { writeNormalConfig } from '../util/BazookaManager'
+import { platform } from '@tauri-apps/plugin-os'
+import { invoke } from '@tauri-apps/api/core'
+import { useGlobal } from '../GlobalProvider'
+
+export default function Settings () {
+  const [checkForNewVersionOnLoad, setCheckForNewVersionOnLoad] =
+    useState(false)
+  const [allowNotifications, setAllowNotifications] = useState(false)
+  const [useWineOnUnixWhenNeeded, setUseWineOnUnixWhenNeeded] = useState(false)
+  const [useWindowsRoundedCorners, setUseWindowsRoundedCorners] =
+    useState(false)
+  const [loaded, setLoaded] = useState(false)
+  const { normalConfig } = useGlobal()
+
+  useEffect(() => {
+    ;(async () => {
+      while (normalConfig != null) {
+        setCheckForNewVersionOnLoad(
+          normalConfig.settings.checkForNewVersionOnLoad
+        )
+        setUseWineOnUnixWhenNeeded(
+          normalConfig.settings.useWineOnUnixWhenNeeded
+        )
+        setAllowNotifications(normalConfig.settings.allowNotifications)
+        setUseWindowsRoundedCorners(
+          normalConfig.settings.useWindowsRoundedCorners
+        )
+        setLoaded(true)
+        break
+      }
+    })()
+  }, [normalConfig])
+
+  return (
+    <>
+      <p className='text-3xl ml-4 mt-4'>Settings</p>
+      {loaded && (
+        <div className='ml-4 mt-4 bg-[#161616] border border-[#242424] rounded-lg p-4 w-fit h-fit'>
+          <Setting
+            label='Check for new version on load'
+            value={checkForNewVersionOnLoad}
+            onChange={async () => {
+              while (normalConfig != null) {
+                setCheckForNewVersionOnLoad(!checkForNewVersionOnLoad)
+                normalConfig.settings.checkForNewVersionOnLoad =
+                  !checkForNewVersionOnLoad
+                await writeNormalConfig(normalConfig)
+                break
+              }
+            }}
+          />
+          <Setting
+            label='Allow sending notifications'
+            value={allowNotifications}
+            onChange={async () => {
+              while (normalConfig != null) {
+                setAllowNotifications(!allowNotifications)
+                normalConfig.settings.allowNotifications = !allowNotifications
+                await writeNormalConfig(normalConfig)
+                break
+              }
+            }}
+          />
+          <Setting
+            label='Use wine to launch Berry Dash when needed'
+            value={useWineOnUnixWhenNeeded}
+            onChange={async () => {
+              while (normalConfig != null) {
+                setUseWineOnUnixWhenNeeded(!useWineOnUnixWhenNeeded)
+                normalConfig.settings.useWineOnUnixWhenNeeded =
+                  !useWineOnUnixWhenNeeded
+                await writeNormalConfig(normalConfig)
+                break
+              }
+            }}
+            className={platform() == 'linux' ? '' : 'hidden'}
+          />
+          <Setting
+            label='Use rounded corners (if supported)'
+            value={useWindowsRoundedCorners}
+            onChange={async () => {
+              while (normalConfig != null) {
+                setUseWindowsRoundedCorners(!useWindowsRoundedCorners)
+                normalConfig.settings.useWindowsRoundedCorners =
+                  !useWindowsRoundedCorners
+                await writeNormalConfig(normalConfig)
+                invoke('windows_rounded_corners', {
+                  enabled: !useWindowsRoundedCorners
+                })
+                break
+              }
+            }}
+            className={platform() == 'windows' ? '' : 'hidden'}
+          />
+        </div>
+      )}
+    </>
+  )
+}

src/app/types/DownloadProgress.ts

@@ -0,0 +1,10 @@
+import { LauncherVersion } from './LauncherVersion'
+
+export class DownloadProgress {
+  constructor (
+    public version: LauncherVersion,
+    public progress: number,
+    public failed: boolean,
+    public queued: boolean
+  ) {}
+}

src/app/types/DownloadedVersion.ts

@@ -0,0 +1,12 @@
+import { LauncherVersion } from './LauncherVersion'
+
+export class DownloadedVersion {
+  constructor (
+    public version: LauncherVersion,
+    public installDate: number = Date.now()
+  ) {}
+
+  static import (data: LauncherVersion) {
+    return new DownloadedVersion(data)
+  }
+}

src/app/types/InstallsProps.ts

@@ -0,0 +1,18 @@
+import { DownloadedVersion } from './DownloadedVersion'
+import { DownloadProgress } from './DownloadProgress'
+import { LauncherVersion } from './LauncherVersion'
+import { NormalConfig } from './NormalConfig'
+import { VersionsConfig } from './VersionsConfig'
+
+export type InstallsProps = {
+  downloadProgress: DownloadProgress[]
+  showPopup: boolean
+  setShowPopup: (v: boolean) => void
+  setPopupMode: (v: null | number) => void
+  setFadeOut: (v: boolean) => void
+  setSelectedVersionList: (v: LauncherVersion[]) => void
+  setVersionList: (v: null | LauncherVersion[]) => void
+  downloadedVersionsConfig: VersionsConfig | null
+  normalConfig: NormalConfig | null
+  setManagingVersion: (v: DownloadedVersion | null) => void
+}

src/app/types/LauncherVersion.ts

@@ -0,0 +1,8 @@
+export interface LauncherVersion {
+  version: string
+  displayName: string
+  platforms: string[]
+  downloadUrls: string[]
+  executables: string[]
+  id: number
+}

src/app/types/LeaderboardEntry.ts

@@ -0,0 +1,9 @@
+export interface LeaderboardEntry {
+  username: string
+  userid: bigint
+  value: bigint
+  icon: number
+  overlay: number
+  birdColor: number[]
+  overlayColor: number[]
+}

src/app/types/NormalConfig.ts

@@ -0,0 +1,21 @@
+import { SettingsType } from './SettingsType'
+
+type NormalConfigData = {
+  version: string
+  settings?: Partial<SettingsType>
+}
+
+export class NormalConfig {
+  constructor (
+    public version: string,
+    public settings: SettingsType = new SettingsType()
+  ) {}
+
+  static import (data: NormalConfigData) {
+    const cfg = new NormalConfig(data.version)
+    if (data.settings) {
+      cfg.settings = { ...cfg.settings, ...data.settings }
+    }
+    return cfg
+  }
+}

src/app/types/SettingProps.ts

@@ -0,0 +1,6 @@
+export type SettingProps = {
+  label: string
+  value: boolean
+  onChange: (val: boolean) => void
+  className?: string
+}

src/app/types/SettingsProps.ts

@@ -0,0 +1,5 @@
+import { NormalConfig } from './NormalConfig'
+
+export type SettingsProps = {
+  normalConfig: NormalConfig | null
+}

src/app/types/SettingsType.ts

@@ -0,0 +1,8 @@
+export class SettingsType {
+  constructor (
+    public checkForNewVersionOnLoad: boolean = true,
+    public allowNotifications: boolean = true,
+    public useWineOnUnixWhenNeeded: boolean = false,
+    public useWindowsRoundedCorners: boolean = false
+  ) {}
+}

src/app/types/SidebarProps.ts

@@ -0,0 +1,8 @@
+import { DownloadProgress } from './DownloadProgress'
+
+export type SidebarProps = {
+  setShowPopup: (v: boolean) => void
+  setPopupMode: (v: null | number) => void
+  setFadeOut: (v: boolean) => void
+  downloadProgress: DownloadProgress[]
+}

src/app/types/VersionsConfig.ts

@@ -0,0 +1,16 @@
+import { DownloadedVersion } from './DownloadedVersion'
+
+type VersionsConfigData = {
+  version: string
+  list: DownloadedVersion[]
+}
+
+export class VersionsConfig {
+  constructor (public version: string, public list: DownloadedVersion[] = []) {}
+
+  static import (data: VersionsConfigData) {
+    const cfg = new VersionsConfig(data.version)
+    cfg.list = [...data.list]
+    return cfg
+  }
+}

src/app/util/BazookaManager.ts

@@ -0,0 +1,135 @@
+import { app } from '@tauri-apps/api'
+import { NormalConfig } from '../types/NormalConfig'
+import {
+  BaseDirectory,
+  create,
+  exists,
+  mkdir,
+  readTextFile,
+  writeFile
+} from '@tauri-apps/plugin-fs'
+import { decrypt, encrypt } from './Encryption'
+import { VersionsConfig } from '../types/VersionsConfig'
+import { getKey } from './KeysHelper'
+
+export async function readNormalConfig (): Promise<NormalConfig> {
+  const version = await app.getVersion()
+  try {
+    const options = {
+      baseDir: BaseDirectory.AppLocalData
+    }
+    const doesFolderExist = await exists('', options)
+    const doesConfigExist = await exists('config.dat', options)
+    if (!doesFolderExist || !doesConfigExist) {
+      if (!doesFolderExist) {
+        await mkdir('', options)
+      }
+      const file = await create('config.dat', options)
+      await file.write(
+        new TextEncoder().encode(
+          await encrypt(
+            JSON.stringify(new NormalConfig(version)),
+            await getKey(2)
+          )
+        )
+      )
+      await file.close()
+      return new NormalConfig(version)
+    }
+    const config = await readTextFile('config.dat', options)
+    return NormalConfig.import(
+      JSON.parse(await decrypt(config, await getKey(2)))
+    )
+  } catch {
+    return new NormalConfig(version)
+  }
+}
+
+export async function writeNormalConfig (data: NormalConfig) {
+  const options = {
+    baseDir: BaseDirectory.AppLocalData
+  }
+  const doesFolderExist = await exists('', options)
+  const doesConfigExist = await exists('config.dat', options)
+  if (!doesFolderExist || !doesConfigExist) {
+    if (!doesFolderExist) {
+      await mkdir('', options)
+    }
+    const file = await create('config.dat', options)
+    await file.write(
+      new TextEncoder().encode(
+        await encrypt(JSON.stringify(data), await getKey(2))
+      )
+    )
+    await file.close()
+  } else {
+    await writeFile(
+      'config.dat',
+      new TextEncoder().encode(
+        await encrypt(JSON.stringify(data), await getKey(2))
+      ),
+      options
+    )
+  }
+}
+
+export async function readVersionsConfig (): Promise<VersionsConfig> {
+  const version = await app.getVersion()
+  try {
+    const options = {
+      baseDir: BaseDirectory.AppLocalData
+    }
+    const doesFolderExist = await exists('', options)
+    const doesConfigExist = await exists('versions.dat', options)
+    if (!doesFolderExist || !doesConfigExist) {
+      if (!doesFolderExist) {
+        await mkdir('', options)
+      }
+      const file = await create('versions.dat', options)
+      await file.write(
+        new TextEncoder().encode(
+          await encrypt(
+            JSON.stringify(new VersionsConfig(version)),
+            await getKey(3)
+          )
+        )
+      )
+      await file.close()
+      return new VersionsConfig(version)
+    }
+    const config = await readTextFile('versions.dat', options)
+    return VersionsConfig.import(
+      JSON.parse(await decrypt(config, await getKey(3)))
+    )
+  } catch {
+    return new VersionsConfig(version)
+  }
+}
+
+export async function writeVersionsConfig (data: VersionsConfig) {
+  const options = {
+    baseDir: BaseDirectory.AppLocalData
+  }
+  const doesFolderExist = await exists('', options)
+  const doesConfigExist = await exists('versions.dat', options)
+  if (!doesFolderExist || !doesConfigExist) {
+    if (!doesFolderExist) {
+      await mkdir('', options)
+    }
+    const file = await create('versions.dat', options)
+    await file.write(
+      new TextEncoder().encode(
+        await encrypt(JSON.stringify(data), await getKey(3))
+      )
+    )
+    await file.close()
+  } else {
+    await writeFile(
+      'versions.dat',
+      new TextEncoder().encode(
+        await encrypt(JSON.stringify(data), await getKey(3))
+      ),
+      options
+    )
+  }
+}

src/app/util/Encryption.ts

@@ -0,0 +1,45 @@
+import CryptoJS from 'crypto-js'
+import { getKey } from './KeysHelper'
+
+export async function encrypt (
+  plainText: string,
+  key?: string
+): Promise<string> {
+  if (!key) key = await getKey(1)
+  const iv = CryptoJS.lib.WordArray.random(16)
+  const encrypted = CryptoJS.AES.encrypt(
+    plainText,
+    CryptoJS.enc.Utf8.parse(key),
+    {
+      iv,
+      mode: CryptoJS.mode.CBC,
+      padding: CryptoJS.pad.Pkcs7
+    }
+  )
+  const combined = iv.concat(encrypted.ciphertext)
+  return CryptoJS.enc.Base64.stringify(combined)
+}
+
+export async function decrypt (dataB64: string, key?: string): Promise<string> {
+  if (!key) key = await getKey(0)
+  const data = CryptoJS.enc.Base64.parse(dataB64)
+  const iv = CryptoJS.lib.WordArray.create(data.words.slice(0, 4), 16)
+  const ciphertext = CryptoJS.lib.WordArray.create(
+    data.words.slice(4),
+    data.sigBytes - 16
+  )
+  const cipherParams = CryptoJS.lib.CipherParams.create({ ciphertext })
+
+  const decrypted = CryptoJS.AES.decrypt(
+    cipherParams,
+    CryptoJS.enc.Utf8.parse(key),
+    {
+      iv,
+      mode: CryptoJS.mode.CBC,
+      padding: CryptoJS.pad.Pkcs7
+    }
+  )
+  const result = decrypted.toString(CryptoJS.enc.Utf8)
+  if (!result) throw new Error(await encrypt('-997'))
+  return result
+}

src/app/util/KeysHelper.ts

@@ -0,0 +1,11 @@
+import { invoke } from '@tauri-apps/api/core'
+
+export async function getKey (key: number): Promise<string> {
+  try {
+    const message = await invoke('get_keys_config', { key })
+    return message as string
+  } catch (error) {
+    console.error('Failed to get key from Tauri backend', error)
+    return ''
+  }
+}