ci: adding list of filenames

feat: add userid to intercom and post to logout

.env.example

@@ -1,5 +1,4 @@
 MAIN_VITE_API_URL=API_URL
 MAIN_VITE_AUTH_URL=AUTH_URL
 MAIN_VITE_STEAMGRIDDB_API_KEY=YOUR_API_KEY
-MAIN_VITE_SENTRY_DSN=YOUR_SENTRY_DSN
-SENTRY_AUTH_TOKEN=
+RENDERER_VITE_INTERCOM_APP_ID=YOUR_APP_ID

.github/pull-request-template.md

@@ -0,0 +1,12 @@
+<!-- Please be sure to add one of the labels in the right hand side Labels option before creating a PR: [feature], [fix], [documentation],[translation]. This will allow Actions to automatically categorize PRs when generating Releases. -->
+
+**When submitting this pull request, I confirm the following (please check the boxes):**
+
+- [ ] I have read and understood the [Contributor Guidelines](https://github.com/hydralauncher/hydra?tab=readme-ov-file#ways-you-can-contribute).
+- [ ] I have checked that there are no duplicate pull requests related to this request.
+- [ ] I have considered, and confirm that this submission is valuable to others.
+- [ ] I accept that this submission may not be used and the pull request may be closed at the discretion of the maintainers.
+
+**Fill in the PR content:**
+
+-

.github/workflows/build.yml

@@ -17,7 +17,16 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20.11.1
+          node-version: 20.18.0
+
+      - name: Configure AWS CLI for R2
+        env:
+          R2_ACCESS_KEY_ID: ${{ secrets.R2_ACCESS_KEY_ID }}
+          R2_SECRET_ACCESS_KEY: ${{ secrets.R2_SECRET_ACCESS_KEY }}
+        run: |
+          aws configure set aws_access_key_id "$R2_ACCESS_KEY_ID"
+          aws configure set aws_secret_access_key "$R2_SECRET_ACCESS_KEY"
+          aws configure set default.region us-east-1
 
       - name: Install dependencies
         run: yarn
@@ -43,8 +52,8 @@ jobs:
           MAIN_VITE_API_URL: ${{ vars.MAIN_VITE_STAGING_API_URL }}
           MAIN_VITE_AUTH_URL: ${{ vars.MAIN_VITE_STAGING_AUTH_URL }}
           MAIN_VITE_CHECKOUT_URL: ${{ vars.MAIN_VITE_STAGING_CHECKOUT_URL }}
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-          MAIN_VITE_SENTRY_DSN: ${{ vars.MAIN_VITE_SENTRY_DSN }}
+          MAIN_VITE_ANALYTICS_API_URL: ${{ vars.MAIN_VITE_ANALYTICS_API_URL }}
+          RENDERER_VITE_INTERCOM_APP_ID: ${{ vars.RENDERER_VITE_INTERCOM_APP_ID }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Build Windows
@@ -54,8 +63,8 @@ jobs:
           MAIN_VITE_API_URL: ${{ vars.MAIN_VITE_STAGING_API_URL }}
           MAIN_VITE_AUTH_URL: ${{ vars.MAIN_VITE_STAGING_AUTH_URL }}
           MAIN_VITE_CHECKOUT_URL: ${{ vars.MAIN_VITE_STAGING_CHECKOUT_URL }}
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-          MAIN_VITE_SENTRY_DSN: ${{ vars.MAIN_VITE_SENTRY_DSN }}
+          MAIN_VITE_ANALYTICS_API_URL: ${{ vars.MAIN_VITE_ANALYTICS_API_URL }}
+          RENDERER_VITE_INTERCOM_APP_ID: ${{ vars.RENDERER_VITE_INTERCOM_APP_ID }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Create artifact
@@ -72,3 +81,9 @@ jobs:
             dist/*.yml
             dist/*.blockmap
             dist/*.pacman
+
+      - name: Push build to R2
+        env:
+          S3_ENDPOINT: ${{ secrets.S3_ENDPOINT }}
+        run: |
+          aws s3 cp ./dist s3://${{ vars.BUILDS_BUCKET_NAME }}/$GITHUB_SHA --recursive --exclude "*" --include "*-portable.exe" --include ".deb" --endpoint-url $S3_ENDPOINT --expires "$(date -d "7 days" --utc +'%Y-%m-%dT%H:%M:%SZ')"

.github/workflows/lint.yml

@@ -13,7 +13,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20.11.1
+          node-version: 20.18.0
 
       - name: Install dependencies
         run: yarn

.github/workflows/release.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20.11.1
+          node-version: 20.18.0
 
       - name: Install dependencies
         run: yarn
@@ -45,10 +45,9 @@ jobs:
           MAIN_VITE_API_URL: ${{ vars.MAIN_VITE_API_URL }}
           MAIN_VITE_AUTH_URL: ${{ vars.MAIN_VITE_AUTH_URL }}
           MAIN_VITE_CHECKOUT_URL: ${{ vars.MAIN_VITE_CHECKOUT_URL }}
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-          MAIN_VITE_SENTRY_DSN: ${{ vars.MAIN_VITE_SENTRY_DSN }}
+          MAIN_VITE_ANALYTICS_API_URL: ${{ vars.MAIN_VITE_ANALYTICS_API_URL }}
+          RENDERER_VITE_INTERCOM_APP_ID: ${{ vars.RENDERER_VITE_INTERCOM_APP_ID }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
       - name: Build Windows
         if: matrix.os == 'windows-latest'
         run: yarn build:win
@@ -56,10 +55,9 @@ jobs:
           MAIN_VITE_API_URL: ${{ vars.MAIN_VITE_API_URL }}
           MAIN_VITE_AUTH_URL: ${{ vars.MAIN_VITE_AUTH_URL }}
           MAIN_VITE_CHECKOUT_URL: ${{ vars.MAIN_VITE_CHECKOUT_URL }}
-          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-          MAIN_VITE_SENTRY_DSN: ${{ vars.MAIN_VITE_SENTRY_DSN }}
+          MAIN_VITE_ANALYTICS_API_URL: ${{ vars.MAIN_VITE_ANALYTICS_API_URL }}
+          RENDERER_VITE_INTERCOM_APP_ID: ${{ vars.RENDERER_VITE_INTERCOM_APP_ID }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
       - name: Create artifact
         uses: actions/upload-artifact@v4
         with:
@@ -77,7 +75,7 @@ jobs:
             dist/*.pacman
 
       - name: Release
-        uses: softprops/action-gh-release@v1
+        uses: softprops/action-gh-release@v2
         with:
           draft: true
           files: |

.gitignore

@@ -9,5 +9,4 @@ out
 *.log*
 .env
 .vite
-sentry.properties
 ludusavi/

electron-builder.yml

@@ -7,6 +7,7 @@ extraResources:
   - hydra-download-manager
   - seeds
   - from: node_modules/create-desktop-shortcuts/src/windows.vbs
+  - from: resources/achievement.wav
 files:
   - "!**/.vscode/*"
   - "!src/*"

electron.vite.config.ts

@@ -6,16 +6,9 @@ import {
   externalizeDepsPlugin,
 } from "electron-vite";
 import react from "@vitejs/plugin-react";
-import { sentryVitePlugin } from "@sentry/vite-plugin";
 import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 import svgr from "vite-plugin-svgr";
 
-const sentryPlugin = sentryVitePlugin({
-  authToken: process.env.SENTRY_AUTH_TOKEN,
-  org: "hydra-launcher",
-  project: "hydra-launcher",
-});
-
 export default defineConfig(({ mode }) => {
   loadEnv(mode);
 
@@ -35,7 +28,7 @@ export default defineConfig(({ mode }) => {
           "@shared": resolve("src/shared"),
         },
       },
-      plugins: [externalizeDepsPlugin(), swcPlugin(), sentryPlugin],
+      plugins: [externalizeDepsPlugin(), swcPlugin()],
     },
     preload: {
       plugins: [externalizeDepsPlugin()],
@@ -51,7 +44,7 @@ export default defineConfig(({ mode }) => {
           "@shared": resolve("src/shared"),
         },
       },
-      plugins: [svgr(), react(), vanillaExtractPlugin(), sentryPlugin],
+      plugins: [svgr(), react(), vanillaExtractPlugin()],
     },
   };
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hydralauncher",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "description": "Hydra",
   "main": "./out/main/index.js",
   "author": "Los Broxas",
@@ -36,9 +36,9 @@
     "@electron-toolkit/utils": "^3.0.0",
     "@fontsource/noto-sans": "^5.0.22",
     "@hookform/resolvers": "^3.9.0",
+    "@intercom/messenger-js-sdk": "^0.0.14",
     "@primer/octicons-react": "^19.9.0",
     "@reduxjs/toolkit": "^2.2.3",
-    "@sentry/electron": "^5.1.0",
     "@vanilla-extract/css": "^1.14.2",
     "@vanilla-extract/dynamic": "^2.1.1",
     "@vanilla-extract/recipes": "^0.5.2",
@@ -51,25 +51,25 @@
     "color.js": "^1.2.0",
     "create-desktop-shortcuts": "^1.11.0",
     "date-fns": "^3.6.0",
-    "dexie": "^4.0.8",
+    "dexie": "^4.0.9",
     "electron-log": "^5.2.0",
     "electron-updater": "^6.3.9",
+    "file-type": "^19.6.0",
     "flexsearch": "^0.7.43",
     "i18next": "^23.11.2",
     "i18next-browser-languagedetector": "^7.2.1",
-    "icojs": "^0.19.4",
     "jsdom": "^24.0.0",
     "jsonwebtoken": "^9.0.2",
     "knex": "^3.1.0",
     "lodash-es": "^4.17.21",
-    "lottie-react": "^2.4.0",
     "parse-torrent": "^11.0.17",
-    "piscina": "^4.5.1",
+    "piscina": "^4.7.0",
     "react-hook-form": "^7.53.0",
     "react-i18next": "^14.1.0",
     "react-loading-skeleton": "^3.4.0",
     "react-redux": "^9.1.1",
     "react-router-dom": "^6.22.3",
+    "sound-play": "^1.1.0",
     "sudo-prompt": "^9.2.1",
     "tar": "^7.4.3",
     "typeorm": "^0.3.20",
@@ -79,12 +79,11 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.3.0",
-    "@commitlint/config-conventional": "^19.2.2",
+    "@commitlint/cli": "^19.5.0",
+    "@commitlint/config-conventional": "^19.5.0",
     "@electron-toolkit/eslint-config-prettier": "^2.0.0",
-    "@electron-toolkit/eslint-config-ts": "^1.0.1",
+    "@electron-toolkit/eslint-config-ts": "^2.0.0",
     "@electron-toolkit/tsconfig": "^1.0.1",
-    "@sentry/vite-plugin": "^2.20.1",
     "@swc/core": "^1.4.16",
     "@types/auto-launch": "^5.0.5",
     "@types/color": "^3.0.6",
@@ -96,6 +95,7 @@
     "@types/parse-torrent": "^5.8.7",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
+    "@types/sound-play": "^1.1.3",
     "@types/user-agents": "^1.0.4",
     "@vanilla-extract/vite-plugin": "^4.0.7",
     "@vitejs/plugin-react": "^4.2.1",
@@ -110,6 +110,7 @@
     "prettier": "^3.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "sass-embedded": "^1.80.6",
     "ts-node": "^10.9.2",
     "typescript": "^5.3.3",
     "vite": "^5.0.12",

requirements.txt

@@ -1,5 +1,5 @@
 libtorrent
-cx_Freeze
+cx_Freeze == 7.2.3
 cx_Logging; sys_platform == 'win32'
 pywin32; sys_platform == 'win32'
 psutil

src/locales/en/translation.json

@@ -25,7 +25,8 @@
     "queued": "{{title}} (Queued)",
     "game_has_no_executable": "Game has no executable selected",
     "sign_in": "Sign in",
-    "friends": "Friends"
+    "friends": "Friends",
+    "need_help": "Need help?"
   },
   "header": {
     "search": "Search games",
@@ -130,7 +131,7 @@
     "download": "Download",
     "executable_path_in_use": "Executable already in use by \"{{game}}\"",
     "warning": "Warning:",
-    "hydra_needs_to_remain_open": "for this download, Hydra needs to remain open util its conclusion. In case Hydra closes before the conclusion, you will lose your progress.",
+    "hydra_needs_to_remain_open": "for this download, Hydra needs to remain open util it's completed. If Hydra closes before completing, you will lose your progress.",
     "achievements": "Achievements",
     "achievements_count": "Achievements {{unlockedCount}}/{{achievementsCount}}",
     "cloud_save": "Cloud save",
@@ -215,7 +216,7 @@
     "language": "Language",
     "real_debrid_api_token": "API Token",
     "enable_real_debrid": "Enable Real-Debrid",
-    "real_debrid_description": "Real-Debrid is an unrestricted downloader that allows you to download files instantly and at the best of your Internet speed.",
+    "real_debrid_description": "Real-Debrid is an unrestricted downloader that allows you to quickly download files, only limited by your internet speed.",
     "real_debrid_invalid_token": "Invalid API token",
     "real_debrid_api_token_hint": "You can get your API token <0>here</0>",
     "real_debrid_free_account_error": "The account \"{{username}}\" is a free account. Please subscribe to Real-Debrid",
@@ -230,7 +231,7 @@
     "download_count_one": "{{countFormatted}} download option",
     "download_count_other": "{{countFormatted}} download options",
     "download_source_url": "Download source URL",
-    "add_download_source_description": "Insert the URL containing the .json file",
+    "add_download_source_description": "Insert the URL of the .json file",
     "download_source_up_to_date": "Up-to-date",
     "download_source_errored": "Errored",
     "sync_download_sources": "Sync sources",
@@ -249,11 +250,13 @@
     "profile_visibility": "Profile visibility",
     "profile_visibility_description": "Choose who can see your profile and library",
     "required_field": "This field is required",
-    "source_already_exists": "This source has been already added",
+    "source_already_exists": "This source has already been added",
     "must_be_valid_url": "The source must be a valid URL",
     "blocked_users": "Blocked users",
     "user_unblocked": "User has been unblocked",
-    "enable_achievement_notifications": "When an achievement in unlocked"
+    "enable_achievement_notifications": "When an achievement is unlocked",
+    "launch_minimized": "Launch Hydra minimized",
+    "disable_nsfw_alert": "Disable NSFW alert"
   },
   "notifications": {
     "download_complete": "Download complete",
@@ -288,7 +291,7 @@
     "amount_hours": "{{amount}} hours",
     "amount_minutes": "{{amount}} minutes",
     "last_time_played": "Last played {{period}}",
-    "activity": "Recent activity",
+    "activity": "Recent Activity",
     "library": "Library",
     "total_play_time": "Total playtime: {{amount}}",
     "no_recent_activity_title": "Hmmm… nothing here",
@@ -327,7 +330,7 @@
     "user_block_modal_text": "This will block {{displayName}}",
     "blocked_users": "Blocked users",
     "unblock": "Unblock",
-    "no_friends_added": "You still don't have added friends",
+    "no_friends_added": "You have no added friends",
     "pending": "Pending",
     "no_pending_invites": "You have no pending invites",
     "no_blocked_users": "You have no blocked users",
@@ -361,7 +364,9 @@
     "your_achievements": "Your Achievements",
     "unlocked_at": "Unlocked at:",
     "subscription_needed": "A Hydra Cloud subscription is required to see this content",
-    "new_achievements_unlocked": "Unlocked {{achievementCount}} new achievements from {{gameCount}} games"
+    "new_achievements_unlocked": "Unlocked {{achievementCount}} new achievements from {{gameCount}} games",
+    "achievement_progress": "{{unlockedCount}}/{{totalCount}} achievements",
+    "achievements_unlocked_for_game": "Unlocked {{achievementCount}} new achievements for {{gameTitle}}"
   },
   "tour": {
     "subscription_tour_title": "Hydra Cloud Subscription",

src/locales/es/translation.json

@@ -25,7 +25,8 @@
     "queued": "{{title}} (En cola)",
     "game_has_no_executable": "El juego no tiene un ejecutable seleccionado",
     "sign_in": "Iniciar sesión",
-    "friends": "Amigos"
+    "friends": "Amigos",
+    "need_help": "¿Necesitas ayuda?"
   },
   "header": {
     "search": "Buscar juegos",

src/locales/pt-BR/translation.json

@@ -25,7 +25,8 @@
     "queued": "{{title}} (Na fila)",
     "game_has_no_executable": "Jogo não possui executável selecionado",
     "sign_in": "Login",
-    "friends": "Amigos"
+    "friends": "Amigos",
+    "need_help": "Precisa de ajuda?"
   },
   "header": {
     "search": "Buscar jogos",
@@ -249,7 +250,9 @@
     "must_be_valid_url": "A fonte deve ser uma URL válida",
     "blocked_users": "Usuários bloqueados",
     "user_unblocked": "Usuário desbloqueado",
-    "enable_achievement_notifications": "Quando uma conquista é desbloqueada"
+    "enable_achievement_notifications": "Quando uma conquista é desbloqueada",
+    "launch_minimized": "Iniciar o Hydra minimizado",
+    "disable_nsfw_alert": "Desativar alerta de conteúdo inapropriado"
   },
   "notifications": {
     "download_complete": "Download concluído",
@@ -359,7 +362,9 @@
     "user_achievements": "Conquistas de {{displayName}}",
     "unlocked_at": "Desbloqueado em:",
     "subscription_needed": "Você precisa de uma assinatura Hydra Cloud para visualizar este conteúdo",
-    "new_achievements_unlocked": "{{achievementCount}} novas conquistas de {{gameCount}} jogos"
+    "new_achievements_unlocked": "{{achievementCount}} novas conquistas de {{gameCount}} jogos",
+    "achievement_progress": "{{unlockedCount}}/{{totalCount}} conquistas",
+    "achievements_unlocked_for_game": "Desbloqueadas {{achievementCount}} novas conquistas em {{gameTitle}}"
   },
   "tour": {
     "subscription_tour_title": "Assinatura Hydra Cloud",

src/locales/ru/translation.json

@@ -7,7 +7,7 @@
     "featured": "Рекомендованное",
     "surprise_me": "Удиви меня",
     "no_results": "Ничего не найдено",
-    "hot": "Сейчас жарко",
+    "hot": "Сейчас в топе",
     "start_typing": "Начинаю вводить текст для поиска...",
     "weekly": "📅 Лучшие игры недели"
   },
@@ -24,7 +24,8 @@
     "queued": "{{title}} (В очереди)",
     "game_has_no_executable": "Файл запуска игры не выбран",
     "sign_in": "Войти",
-    "friends": "Друзья"
+    "friends": "Друзья",
+    "need_help": "Нужна помощь?"
   },
   "header": {
     "search": "Поиск",

src/locales/zh/translation.json

@@ -6,7 +6,11 @@
   "home": {
     "featured": "特色推荐",
     "surprise_me": "向我推荐",
-    "no_results": "没有找到结果"
+    "no_results": "没有找到结果",
+    "start_typing": "键入以开始搜素...",
+    "hot": "当下热门",
+    "weekly": "📅本周热门游戏",
+    "achievements": "🏆尝试击败"
   },
   "sidebar": {
     "catalogue": "游戏目录",
@@ -20,7 +24,8 @@
     "home": "主页",
     "queued": "{{title}} (已加入下载队列)",
     "game_has_no_executable": "未选择游戏的可执行文件",
-    "sign_in": "登入"
+    "sign_in": "登入",
+    "friends": "好友"
   },
   "header": {
     "search": "搜索游戏",
@@ -36,17 +41,18 @@
     "no_downloads_in_progress": "没有正在进行的下载",
     "downloading_metadata": "正在下载{{title}}的元数据…",
     "downloading": "正在下载{{title}}… ({{percentage}}完成) - 剩余时间{{eta}} - 速度{{speed}}",
-    "calculating_eta": "正在下载 {{title}}… (已完成{{percentage}}.) - 正在计算剩余时间..."
+    "calculating_eta": "正在下载 {{title}}… (已完成{{percentage}}.) - 正在计算剩余时间...",
+    "checking_files": "正在校验 {{title}} 的文件... ({{percentage}} 已完成)"
   },
   "catalogue": {
     "next_page": "下一页",
     "previous_page": "上一页"
   },
   "game_details": {
-    "open_download_options": "打开下载选项",
-    "download_options_zero": "无下载选项",
-    "download_options_one": "{{count}}个下载选项",
-    "download_options_other": "{{count}}个下载选项",
+    "open_download_options": "打开下载菜单",
+    "download_options_zero": "无可下载项",
+    "download_options_one": "{{count}}个可下载项",
+    "download_options_other": "{{count}}个可下载项",
     "updated_at": "更新于{{updated_at}}",
     "install": "安装",
     "resume": "恢复",
@@ -55,11 +61,13 @@
     "remove": "移除",
     "space_left_on_disk": "磁盘剩余空间{{space}}",
     "eta": "预计完成时间{{eta}}",
+    "calculating_eta": "正在计算剩余时间…",
     "downloading_metadata": "正在下载元数据…",
     "filter": "筛选重打包",
     "requirements": "配置要求",
     "minimum": "最低要求",
     "recommended": "推荐要求",
+    "paused": "已暂停",
     "release_date": "发布于{{date}}",
     "publisher": "发行商{{publisher}}",
     "hours": "小时",
@@ -80,15 +88,18 @@
     "playing_now": "正在游戏中",
     "change": "更改",
     "repacks_modal_description": "选择您想要下载的重打包",
-    "select_folder_hint": "要更改默认文件夹,请访问",
+    "select_folder_hint": "要更改默认文件夹,请访问<0>设置</0>",
     "download_now": "立即下载",
+    "no_shop_details": "无法检索商店详细信息.",
+    "download_options": "下载选项",
+    "download_path": "下载路径",
     "previous_screenshot": "上一张截图",
     "next_screenshot": "下一张截图",
     "screenshot": "截图 {{number}}",
     "open_screenshot": "打开截图 {{number}}",
     "download_settings": "下载设置",
     "downloader": "下载器",
-    "select_executable": "选择",
+    "select_executable": "选择可执行文件",
     "no_executable_selected": "没有可执行文件被指定",
     "open_folder": "打开目录",
     "open_download_location": "查看已下载的文件",
@@ -107,7 +118,54 @@
     "download_paused": "下载暂停",
     "last_downloaded_option": "上次下载的选项",
     "create_shortcut_success": "成功创建快捷方式",
-    "create_shortcut_error": "创建快捷方式出错"
+    "create_shortcut_error": "创建快捷方式出错",
+    "nsfw_content_title": "本游戏包含不适合展示的内容",
+    "nsfw_content_description": "{{title}}包含可能不适合所有年龄段的内容。您确定要继续吗？",
+    "allow_nsfw_content": "继续",
+    "refuse_nsfw_content": "返回",
+    "stats": "统计数据",
+    "download_count": "下载量",
+    "player_count": "活跃玩家",
+    "download_error": "此下载选项不可用",
+    "download": "下载",
+    "executable_path_in_use": "可执行文件已经被以下游戏 \"{{game}}\" 使用",
+    "warning": "警告:",
+    "hydra_needs_to_remain_open": "对于此次下载,Hydra必须保持开启直至其完成。若海德拉在完成前关闭,您的进度将丢失。",
+    "achievements": "成就",
+    "achievements_count": "成就 {{unlockedCount}}/{{achievementsCount}}",
+    "cloud_save": "云存档",
+    "cloud_save_description": "将您的进度保存在云端，便可在任何设备上继续游戏。",
+    "backups": "备份",
+    "install_backup": "安装",
+    "delete_backup": "删除",
+    "create_backup": "新备份",
+    "last_backup_date": "最后一次备份于{{date}}",
+    "no_backup_preview": "未找到此游戏标题的存档",
+    "restoring_backup": "正在恢复备份({{progress}}已完成)…",
+    "uploading_backup": "上传备份中…",
+    "no_backups": "您尚未为这款游戏创建任何备份",
+    "backup_uploaded": "备份已上传",
+    "backup_deleted": "备份已删除",
+    "backup_restored": "备份已恢复",
+    "see_all_achievements": "查看所有成就",
+    "sign_in_to_see_achievements": "登入以查看所有成就",
+    "mapping_method_automatic": "自动",
+    "mapping_method_manual": "常规",
+    "mapping_method_label": "索引类型",
+    "files_automatically_mapped": "文件已自动索引",
+    "no_backups_created": "没有为此游戏创建过备份",
+    "manage_files": "管理文件",
+    "loading_save_preview": "正在查找要保存的游戏…",
+    "wine_prefix": "Wine 前置",
+    "wine_prefix_description": "运行该游戏所用的 Wine 前置",
+    "no_download_option_info": "无可用信息",
+    "backup_deletion_failed": "删除备份失败",
+    "max_number_of_artifacts_reached": "已达到该游戏备份上限",
+    "achievements_not_sync": "你的成就未同步",
+    "manage_files_description": "管理哪些文件要备份和恢复",
+    "select_folder": "选择文件夹",
+    "backup_from": "{{date}} 时备份",
+    "custom_backup_location_set": "自定义备份文件位置"
   },
   "activation": {
     "title": "激活 Hydra",
@@ -124,6 +182,7 @@
     "paused": "已暂停",
     "verifying": "正在验证…",
     "completed": "已完成",
+    "removed": "未下载",
     "cancel": "取消",
     "filter": "筛选已下载游戏",
     "remove": "移除",
@@ -138,7 +197,8 @@
     "downloads_completed": "已完成",
     "queued": "下载列表",
     "no_downloads_title": "空空如也",
-    "no_downloads_description": "你还未使用Hydra下载任何游戏,但什么时候开始,都为时不晚。"
+    "no_downloads_description": "你还未使用Hydra下载任何游戏,但什么时候开始,都为时不晚。",
+    "checking_files": "正在校验文件…"
   },
   "settings": {
     "downloads_path": "下载路径",
@@ -181,14 +241,49 @@
     "found_download_option_zero": "未找到下载选项",
     "found_download_option_one": "找到 {{countFormatted}} 个下载选项",
     "found_download_option_other": "找到 {{countFormatted}} 个下载选项",
-    "import": "导入"
+    "import": "导入",
+    "public": "公开",
+    "private": "私密",
+    "friends_only": "仅限朋友",
+    "privacy": "隐私",
+    "profile_visibility": "资料可见性",
+    "profile_visibility_description": "选择谁可以查看您的个人资料和资料库",
+    "required_field": "该字段为必填字段",
+    "source_already_exists": "已添加此来源",
+    "must_be_valid_url": "来源必须是有效的 URL",
+    "blocked_users": "已屏蔽用户",
+    "user_unblocked": "用户已经被屏蔽",
+    "enable_achievement_notifications": "当成就解锁时"
   },
-  "modal": {
-    "close": "关闭按钮"
+  "notifications": {
+    "download_complete": "下载完成",
+    "game_ready_to_install": "{{title}} 已准备就绪",
+    "repack_list_updated": "重打包列表已更新",
+    "repack_count_one": "{{count}} 重打包已添加",
+    "repack_count_other": "{{count}} 重打包已添加",
+    "new_update_available": "版本 {{version}} 可用",
+    "restart_to_install_update": "重启 Hydra 以安装更新",
+    "notification_achievement_unlocked_title": "{{game}} 的成绩已解锁",
+    "notification_achievement_unlocked_body": "{{achievement}} 和其他 {{count}} 已解锁"
+  },
+  "system_tray": {
+    "open": "打开 Hydra",
+    "quit": "退出"
+  },
+  "game_card": {
+    "no_downloads": "无可用下载选项"
+  },
+  "binary_not_found_modal": {
+    "title": "程序未安装",
+    "description": "您的系统中找不到 Wine 或 Lutris 的可执行文件",
+    "instructions": "请检查在 Linux 发行版上安装这些软件的正确方法，以便游戏能够正常运行"
   },
   "forms": {
     "toggle_password_visibility": "切换密码可见性"
   },
+  "modal": {
+    "close": "关闭按钮"
+  },
   "user_profile": {
     "amount_hours": "{{amount}} 小时",
     "amount_minutes": "{{amount}} 分钟",
@@ -208,7 +303,74 @@
     "cancel": "取消",
     "successfully_signed_out": "登出成功",
     "sign_out": "登出",
-    "playing_for": "Playing for {{amount}}",
-    "sign_out_modal_text": "您的资料库与您当前的账户相关联。注销后，您的资料库将不再可见，任何进度也不会保存。继续退出吗？"
+    "playing_for": "已经玩了{{amount}}",
+    "sign_out_modal_text": "您的资料库与您当前的账户相关联。注销后，您的资料库将不再可见，任何进度也不会保存。继续退出吗？",
+    "add_friends": "添加好友",
+    "add": "添加",
+    "friend_code": "好友代码",
+    "see_profile": "查看资料",
+    "sending": "发送中",
+    "friend_request_sent": "好友请求已发送",
+    "friends": "好友",
+    "friends_list": "好友列表",
+    "user_not_found": "未找到此用户",
+    "block_user": "屏蔽此用户",
+    "add_friend": "添加好友",
+    "request_sent": "请求已发送",
+    "request_received": "已收到请求",
+    "accept_request": "同意申请",
+    "ignore_request": "忽略申请",
+    "cancel_request": "取消申请",
+    "undo_friendship": "解除好友关系",
+    "request_accepted": "请求已通过",
+    "user_blocked_successfully": "成功屏蔽此用户",
+    "user_block_modal_text": "这将会屏蔽 {{displayName}}",
+    "blocked_users": "黑名单用户",
+    "unblock": "解除屏蔽",
+    "no_friends_added": "你还没有添加过好友",
+    "pending": "待处理",
+    "no_pending_invites": "您没有待处理的邀请",
+    "no_blocked_users": "你没有已经拉人黑名单的用户",
+    "friend_code_copied": "好友代码已复制",
+    "undo_friendship_modal_text": "这将使你与 {{displayName}} 解除好友关系",
+    "privacy_hint": "要调整谁可以看到你的个人资料，可以去<0>设置</0>中修改",
+    "locked_profile": "此个人资料是私密的",
+    "image_process_failure": "处理图片时发生错误",
+    "required_field": "此字段为必填项",
+    "displayname_min_length": "显示名称最少必须为3个字符。",
+    "displayname_max_length": "显示名称最多必须为50个字符",
+    "report_profile": "举报此资料",
+    "report_reason": "为什么你要举报此资料?",
+    "report_description": "额外信息",
+    "report_description_placeholder": "额外信息",
+    "report": "举报",
+    "report_reason_hate": "Hate speech",
+    "report_reason_sexual_content": "色情内容",
+    "report_reason_violence": "暴力",
+    "report_reason_spam": "骚扰",
+    "report_reason_other": "其他",
+    "profile_reported": "个人资料已举报",
+    "your_friend_code": "你的好友代码:",
+    "upload_banner": "上传横幅",
+    "uploading_banner": "上传横幅中…",
+    "background_image_updated": "背景图片已更新"
+  },
+  "achievement": {
+    "achievement_unlocked": "成就已解锁",
+    "user_achievements": "{{displayName}}的成就",
+    "your_achievements": "你的成就",
+    "unlocked_at": "解锁于:",
+    "subscription_needed": "需要订阅 Hydra Cloud 才能看到此内容",
+    "new_achievements_unlocked": "从 {{gameCount}} 游戏中解锁 {{achievementCount}} 新成就"
+  },
+  "tour": {
+    "subscription_tour_title": "Hydra 云订阅",
+    "subscribe_now": "现在订购",
+    "cloud_saving": "云存档",
+    "cloud_achievements": "将你的成就保存至云端",
+    "animated_profile_picture": "动画头像",
+    "premium_support": "高级技术支持",
+    "show_and_compare_achievements": "展示并与其他用户比较您的成就",
+    "animated_profile_banner": "动态个人简介横幅"
   }
 }

src/main/constants.ts

@@ -5,12 +5,12 @@ export const LUDUSAVI_MANIFEST_URL = "https://cdn.losbroxas.org/manifest.yaml";
 
 export const defaultDownloadsPath = app.getPath("downloads");
 
+export const isStaging = import.meta.env.MAIN_VITE_API_URL.includes("staging");
+
 export const databaseDirectory = path.join(app.getPath("appData"), "hydra");
 export const databasePath = path.join(
   databaseDirectory,
-  import.meta.env.MAIN_VITE_API_URL.includes("staging")
-    ? "hydra_test.db"
-    : "hydra.db"
+  isStaging ? "hydra_test.db" : "hydra.db"
 );
 
 export const logsPath = path.join(app.getPath("appData"), "hydra", "logs");
@@ -19,6 +19,10 @@ export const seedsPath = app.isPackaged
   ? path.join(process.resourcesPath, "seeds")
   : path.join(__dirname, "..", "..", "seeds");
 
+export const achievementSoundPath = app.isPackaged
+  ? path.join(process.resourcesPath, "achievement.wav")
+  : path.join(__dirname, "..", "..", "resources", "achievement.wav");
+
 export const backupsPath = path.join(app.getPath("userData"), "Backups");
 
-export const appVersion = app.getVersion();
+export const appVersion = app.getVersion() + (isStaging ? "-staging" : "");

src/main/entity/user-preferences.entity.ts

@@ -35,6 +35,12 @@ export class UserPreferences {
   @Column("boolean", { default: false })
   runAtStartup: boolean;
 
+  @Column("boolean", { default: false })
+  startMinimized: boolean;
+
+  @Column("boolean", { default: false })
+  disableNsfwAlert: boolean;
+
   @CreateDateColumn()
   createdAt: Date;
 

src/main/events/auth/get-session-hash.ts

@@ -1,5 +1,4 @@
 import jwt from "jsonwebtoken";
-import * as Sentry from "@sentry/electron/main";
 
 import { userAuthRepository } from "@main/repository";
 import { registerEvent } from "../register-event";
@@ -10,8 +9,6 @@ const getSessionHash = async (_event: Electron.IpcMainInvokeEvent) => {
   if (!auth) return null;
   const payload = jwt.decode(auth.accessToken) as jwt.JwtPayload;
 
-  Sentry.setContext("sessionId", payload.sessionId);
-
   return payload.sessionId;
 };
 

src/main/events/auth/sign-out.ts

@@ -1,5 +1,4 @@
 import { registerEvent } from "../register-event";
-import * as Sentry from "@sentry/electron/main";
 import {
   DownloadManager,
   HydraApi,
@@ -29,9 +28,6 @@ const signOut = async (_event: Electron.IpcMainInvokeEvent) => {
       gamesPlaytime.clear();
     });
 
-  /* Removes user from Sentry */
-  Sentry.setUser(null);
-
   /* Cancels any ongoing downloads */
   DownloadManager.cancelDownload();
 

src/main/events/misc/open-checkout.ts

@@ -1,10 +1,16 @@
 import { shell } from "electron";
 import { registerEvent } from "../register-event";
-import { userAuthRepository } from "@main/repository";
+import {
+  userAuthRepository,
+  userPreferencesRepository,
+} from "@main/repository";
 import { HydraApi } from "@main/services";
 
 const openCheckout = async (_event: Electron.IpcMainInvokeEvent) => {
-  const userAuth = await userAuthRepository.findOne({ where: { id: 1 } });
+  const [userAuth, userPreferences] = await Promise.all([
+    userAuthRepository.findOne({ where: { id: 1 } }),
+    userPreferencesRepository.findOne({ where: { id: 1 } }),
+  ]);
 
   if (!userAuth) {
     return;
@@ -16,6 +22,7 @@ const openCheckout = async (_event: Electron.IpcMainInvokeEvent) => {
 
   const params = new URLSearchParams({
     token: paymentToken,
+    lng: userPreferences?.language || "en",
   });
 
   shell.openExternal(

src/main/events/torrenting/start-game-download.ts

@@ -1,5 +1,5 @@
 import { registerEvent } from "../register-event";
-
+import parseTorrent from "parse-torrent";
 import type { StartGameDownloadPayload } from "@types";
 import { DownloadManager, HydraApi, logger } from "@main/services";
 
@@ -9,6 +9,7 @@ import { createGame } from "@main/services/library-sync";
 import { steamUrlBuilder } from "@shared";
 import { dataSource } from "@main/data-source";
 import { DownloadQueue, Game } from "@main/entity";
+import { HydraAnalytics } from "@main/services/hydra-analytics";
 
 const startGameDownload = async (
   _event: Electron.IpcMainInvokeEvent,
@@ -90,6 +91,17 @@ const startGameDownload = async (
       logger.error("Failed to create game download", err);
     });
 
+    if (uri.startsWith("magnet:")) {
+      try {
+        const { infoHash } = await parseTorrent(payload.uri);
+        if (infoHash) {
+          HydraAnalytics.postDownload(infoHash).catch(() => {});
+        }
+      } catch (err) {
+        logger.error("Failed to parse torrent", err);
+      }
+    }
+
     await DownloadManager.cancelDownload(updatedGame!.id);
     await DownloadManager.startDownload(updatedGame!);
 

src/main/events/user-preferences/auto-launch.ts

@@ -16,15 +16,16 @@ const windowsStartupPath = path.join(
 
 const autoLaunch = async (
   _event: Electron.IpcMainInvokeEvent,
-  enabled: boolean
+  autoLaunchProps: { enabled: boolean; minimized: boolean }
 ) => {
   if (!app.isPackaged) return;
 
   const appLauncher = new AutoLaunch({
     name: app.getName(),
+    isHidden: autoLaunchProps.minimized,
   });
 
-  if (enabled) {
+  if (autoLaunchProps.enabled) {
     appLauncher.enable().catch((err) => {
       logger.error(err);
     });

src/main/index.ts

@@ -1,5 +1,4 @@
 import { app, BrowserWindow, net, protocol } from "electron";
-import { init } from "@sentry/electron/main";
 import updater from "electron-updater";
 import i18n from "i18next";
 import path from "node:path";
@@ -26,12 +25,6 @@ autoUpdater.logger = logger;
 const gotTheLock = app.requestSingleInstanceLock();
 if (!gotTheLock) app.quit();
 
-if (import.meta.env.MAIN_VITE_SENTRY_DSN) {
-  init({
-    dsn: import.meta.env.MAIN_VITE_SENTRY_DSN,
-  });
-}
-
 app.commandLine.appendSwitch("--no-sandbox");
 
 i18n.init({
@@ -101,8 +94,10 @@ app.whenReady().then(async () => {
     i18n.changeLanguage(userPreferences.language);
   }
 
-  WindowManager.createMainWindow();
-  WindowManager.createNotificationWindow();
+  if (!process.argv.includes("--hidden")) {
+    WindowManager.createMainWindow();
+  }
+
   WindowManager.createSystemTray(userPreferences?.language || "en");
 });
 

src/main/knex-client.ts

@@ -11,7 +11,8 @@ import { AddAchievementNotificationPreference } from "./migrations/2024101301290
 import { CreateUserSubscription } from "./migrations/20241015235142_create_user_subscription";
 import { AddBackgroundImageUrl } from "./migrations/20241016100249_add_background_image_url";
 import { AddWinePrefixToGame } from "./migrations/20241019081648_add_wine_prefix_to_game";
-
+import { AddStartMinimizedColumn } from "./migrations/20241030171454_add_start_minimized_column";
+import { AddDisableNsfwAlertColumn } from "./migrations/20241106053733_add_disable_nsfw_alert_column";
 export type HydraMigration = Knex.Migration & { name: string };
 
 class MigrationSource implements Knex.MigrationSource<HydraMigration> {
@@ -27,6 +28,8 @@ class MigrationSource implements Knex.MigrationSource<HydraMigration> {
       CreateUserSubscription,
       AddBackgroundImageUrl,
       AddWinePrefixToGame,
+      AddStartMinimizedColumn,
+      AddDisableNsfwAlertColumn,
     ]);
   }
   getMigrationName(migration: HydraMigration): string {

src/main/migrations/20241030171454_add_start_minimized_column.ts

@@ -0,0 +1,17 @@
+import type { HydraMigration } from "@main/knex-client";
+import type { Knex } from "knex";
+
+export const AddStartMinimizedColumn: HydraMigration = {
+  name: "AddStartMinimizedColumn",
+  up: (knex: Knex) => {
+    return knex.schema.alterTable("user_preferences", (table) => {
+      return table.boolean("startMinimized").notNullable().defaultTo(0);
+    });
+  },
+
+  down: async (knex: Knex) => {
+    return knex.schema.alterTable("user_preferences", (table) => {
+      return table.dropColumn("startMinimized");
+    });
+  },
+};

src/main/migrations/20241106053733_add_disable_nsfw_alert_column.ts

@@ -0,0 +1,17 @@
+import type { HydraMigration } from "@main/knex-client";
+import type { Knex } from "knex";
+
+export const AddDisableNsfwAlertColumn: HydraMigration = {
+  name: "AddDisableNsfwAlertColumn",
+  up: (knex: Knex) => {
+    return knex.schema.alterTable("user_preferences", (table) => {
+      return table.boolean("disableNsfwAlert").notNullable().defaultTo(0);
+    });
+  },
+
+  down: async (knex: Knex) => {
+    return knex.schema.alterTable("user_preferences", (table) => {
+      return table.dropColumn("disableNsfwAlert");
+    });
+  },
+};

src/main/services/achievements/achievement-watcher-manager.ts

@@ -13,7 +13,7 @@ import type { AchievementFile, UnlockedAchievement } from "@types";
 import { achievementsLogger } from "../logger";
 import { Cracker } from "@shared";
 import { IsNull, Not } from "typeorm";
-import { WindowManager } from "../window-manager";
+import { publishCombinedNewAchievementNotification } from "../notifications";
 
 const fileStats: Map<string, number> = new Map();
 const fltFiles: Map<string, Set<string>> = new Map();
@@ -249,11 +249,12 @@ export class AchievementWatcherManager {
       0
     );
 
-    WindowManager.notificationWindow?.webContents.send(
-      "on-combined-achievements-unlocked",
-      totalNewGamesWithAchievements,
-      totalNewAchievements
-    );
+    if (totalNewAchievements > 0) {
+      publishCombinedNewAchievementNotification(
+        totalNewAchievements,
+        totalNewGamesWithAchievements
+      );
+    }
 
     this.hasFinishedMergingWithRemote = true;
   };

src/main/services/achievements/merge-achievements.ts

@@ -8,11 +8,12 @@ import { HydraApi } from "../hydra-api";
 import { getUnlockedAchievements } from "@main/events/user/get-unlocked-achievements";
 import { Game } from "@main/entity";
 import { achievementsLogger } from "../logger";
+import { publishNewAchievementNotification } from "../notifications";
 
 const saveAchievementsOnLocal = async (
   objectId: string,
   shop: GameShop,
-  achievements: any[],
+  achievements: UnlockedAchievement[],
   sendUpdateEvent: boolean
 ) => {
   return gameAchievementRepository
@@ -82,6 +83,8 @@ export const mergeAchievements = async (
       };
     });
 
+  const mergedLocalAchievements = unlockedAchievements.concat(newAchievements);
+
   if (
     newAchievements.length &&
     publishNotification &&
@@ -99,7 +102,7 @@ export const mergeAchievements = async (
           );
         });
       })
-      .filter((achievement) => achievement)
+      .filter((achievement) => Boolean(achievement))
       .map((achievement) => {
         return {
           displayName: achievement!.displayName,
@@ -107,16 +110,15 @@ export const mergeAchievements = async (
         };
       });
 
-    WindowManager.notificationWindow?.webContents.send(
-      "on-achievement-unlocked",
-      game.objectID,
-      game.shop,
-      achievementsInfo
-    );
+    publishNewAchievementNotification({
+      achievements: achievementsInfo,
+      unlockedAchievementCount: mergedLocalAchievements.length,
+      totalAchievementCount: achievementsData.length,
+      gameTitle: game.title,
+      gameIcon: game.iconUrl,
+    });
   }
 
-  const mergedLocalAchievements = unlockedAchievements.concat(newAchievements);
-
   if (game.remoteId) {
     await HydraApi.put("/profile/games/achievements", {
       id: game.remoteId,

src/main/services/hydra-analytics.ts

@@ -0,0 +1,34 @@
+import { userSubscriptionRepository } from "@main/repository";
+import axios from "axios";
+import { appVersion } from "@main/constants";
+
+export class HydraAnalytics {
+  private static instance = axios.create({
+    baseURL: import.meta.env.MAIN_VITE_ANALYTICS_API_URL,
+    headers: { "User-Agent": `Hydra Launcher v${appVersion}` },
+  });
+
+  private static async hasActiveSubscription() {
+    const userSubscription = await userSubscriptionRepository.findOne({
+      where: { id: 1 },
+    });
+
+    return (
+      userSubscription?.expiresAt && userSubscription.expiresAt > new Date()
+    );
+  }
+
+  static async postDownload(hash: string) {
+    const hasSubscription = await this.hasActiveSubscription();
+
+    return this.instance
+      .post("/track", {
+        event: "download",
+        attributes: {
+          hash,
+          hasSubscription,
+        },
+      })
+      .then((response) => response.data);
+  }
+}

src/main/services/hydra-api.ts

@@ -112,6 +112,8 @@ export class HydraApi {
       expirationTimestamp: 0,
       subscription: null,
     };
+
+    this.post("/auth/logout", {}, { needsAuth: false }).catch(() => {});
   }
 
   static async setupApi() {

src/main/services/ludusavi.ts

@@ -24,6 +24,7 @@ export class Ludusavi {
     workerData: {
       binaryPath: this.binaryPath,
     },
+    maxThreads: 1,
   });
 
   static async getConfig() {

src/main/services/notifications.ts

@@ -1,67 +0,0 @@
-import { Notification, nativeImage } from "electron";
-import { t } from "i18next";
-import { parseICO } from "icojs";
-import trayIcon from "@resources/tray-icon.png?asset";
-import { Game } from "@main/entity";
-import { gameRepository, userPreferencesRepository } from "@main/repository";
-
-const getGameIconNativeImage = async (gameId: number) => {
-  try {
-    const game = await gameRepository.findOne({
-      where: {
-        id: gameId,
-      },
-    });
-
-    if (!game?.iconUrl) return undefined;
-
-    const images = await parseICO(
-      Buffer.from(game.iconUrl.split("base64,")[1], "base64")
-    );
-
-    const highResIcon = images.find((image) => image.width >= 128);
-    if (!highResIcon) return undefined;
-
-    return nativeImage.createFromBuffer(Buffer.from(highResIcon.buffer));
-  } catch (err) {
-    return undefined;
-  }
-};
-
-export const publishDownloadCompleteNotification = async (game: Game) => {
-  const userPreferences = await userPreferencesRepository.findOne({
-    where: { id: 1 },
-  });
-
-  const icon = await getGameIconNativeImage(game.id);
-
-  if (userPreferences?.downloadNotificationsEnabled) {
-    new Notification({
-      title: t("download_complete", {
-        ns: "notifications",
-      }),
-      body: t("game_ready_to_install", {
-        ns: "notifications",
-        title: game.title,
-      }),
-      icon,
-    }).show();
-  }
-};
-
-export const publishNotificationUpdateReadyToInstall = async (
-  version: string
-) => {
-  new Notification({
-    title: t("new_update_available", {
-      ns: "notifications",
-      version,
-    }),
-    body: t("restart_to_install_update", {
-      ns: "notifications",
-    }),
-    icon: trayIcon,
-  }).show();
-};
-
-export const publishNewFriendRequestNotification = async () => {};

src/main/services/notifications/index.ts

@@ -0,0 +1,146 @@
+import { Notification, app } from "electron";
+import { t } from "i18next";
+import trayIcon from "@resources/tray-icon.png?asset";
+import { Game } from "@main/entity";
+import { userPreferencesRepository } from "@main/repository";
+import fs from "node:fs";
+import axios from "axios";
+import path from "node:path";
+import sound from "sound-play";
+import { achievementSoundPath } from "@main/constants";
+import icon from "@resources/icon.png?asset";
+import { NotificationOptions, toXmlString } from "./xml";
+import { logger } from "../logger";
+
+async function downloadImage(url: string | null) {
+  if (!url) return undefined;
+  if (!url.startsWith("http")) return undefined;
+
+  const fileName = url.split("/").pop()!;
+  const outputPath = path.join(app.getPath("temp"), fileName);
+  const writer = fs.createWriteStream(outputPath);
+
+  const response = await axios.get(url, {
+    responseType: "stream",
+  });
+
+  response.data.pipe(writer);
+
+  return new Promise<string | undefined>((resolve) => {
+    writer.on("finish", () => {
+      resolve(outputPath);
+    });
+    writer.on("error", () => {
+      logger.error("Failed to download image", { url });
+      resolve(undefined);
+    });
+  });
+}
+
+export const publishDownloadCompleteNotification = async (game: Game) => {
+  const userPreferences = await userPreferencesRepository.findOne({
+    where: { id: 1 },
+  });
+
+  if (userPreferences?.downloadNotificationsEnabled) {
+    new Notification({
+      title: t("download_complete", {
+        ns: "notifications",
+      }),
+      body: t("game_ready_to_install", {
+        ns: "notifications",
+        title: game.title,
+      }),
+      icon: await downloadImage(game.iconUrl),
+    }).show();
+  }
+};
+
+export const publishNotificationUpdateReadyToInstall = async (
+  version: string
+) => {
+  new Notification({
+    title: t("new_update_available", {
+      ns: "notifications",
+      version,
+    }),
+    body: t("restart_to_install_update", {
+      ns: "notifications",
+    }),
+    icon: trayIcon,
+  }).show();
+};
+
+export const publishNewFriendRequestNotification = async () => {};
+
+export const publishCombinedNewAchievementNotification = async (
+  achievementCount,
+  gameCount
+) => {
+  const options: NotificationOptions = {
+    title: t("achievement_unlocked", { ns: "achievement" }),
+    body: t("new_achievements_unlocked", {
+      ns: "achievement",
+      gameCount,
+      achievementCount,
+    }),
+    icon,
+    silent: true,
+  };
+
+  new Notification({
+    ...options,
+    toastXml: toXmlString(options),
+  }).show();
+
+  if (process.platform !== "linux") {
+    sound.play(achievementSoundPath);
+  }
+};
+
+export const publishNewAchievementNotification = async (info: {
+  achievements: { displayName: string; iconUrl: string }[];
+  unlockedAchievementCount: number;
+  totalAchievementCount: number;
+  gameTitle: string;
+  gameIcon: string | null;
+}) => {
+  const partialOptions =
+    info.achievements.length > 1
+      ? {
+          title: t("achievements_unlocked_for_game", {
+            ns: "achievement",
+            gameTitle: info.gameTitle,
+            achievementCount: info.achievements.length,
+          }),
+          body: info.achievements.map((a) => a.displayName).join(", "),
+          icon: (await downloadImage(info.gameIcon)) ?? icon,
+        }
+      : {
+          title: t("achievement_unlocked", { ns: "achievement" }),
+          body: info.achievements[0].displayName,
+          icon: (await downloadImage(info.achievements[0].iconUrl)) ?? icon,
+        };
+
+  const options: NotificationOptions = {
+    ...partialOptions,
+    silent: true,
+    progress: {
+      value: info.unlockedAchievementCount / info.totalAchievementCount,
+      valueOverride: t("achievement_progress", {
+        ns: "achievement",
+        unlockedCount: info.unlockedAchievementCount,
+        totalCount: info.totalAchievementCount,
+      }),
+    },
+  };
+
+  new Notification({
+    ...options,
+    toastXml: toXmlString(options),
+  }).show();
+
+  if (process.platform !== "linux") {
+    sound.play(achievementSoundPath);
+  }
+};

src/main/services/notifications/xml.ts

@@ -0,0 +1,79 @@
+export interface NotificationOptions {
+  title: string;
+  body?: string;
+  icon: string;
+  duration?: "short" | "long";
+  silent?: boolean;
+  progress?: {
+    status?: string;
+    value: number;
+    valueOverride: string;
+  };
+}
+
+function escape(string: string) {
+  return string.replace(/[<>&'"]/g, (match) => {
+    switch (match) {
+      case "<":
+        return "&lt;";
+      case ">":
+        return "&gt;";
+      case "&":
+        return "&amp;";
+      case "'":
+        return "&apos;";
+      case '"':
+        return "&quot;";
+      default:
+        return "";
+    }
+  });
+}
+
+function addAttributeOrTrim(name: string, value: string) {
+  return value ? `${name}="${value}" ` : "";
+}
+
+export function toXmlString(options: NotificationOptions) {
+  let template =
+    "<toast " +
+    `displayTimestamp="${new Date().toISOString()}" ` +
+    `scenario="default" ` +
+    `duration="${options.duration ?? "short"}" ` +
+    `activationType="protocol" ` +
+    ">";
+
+  //Visual
+  template += `<visual><binding template="ToastGeneric">`;
+  if (options.icon)
+    template += `<image placement="appLogoOverride" src="${options.icon}" hint-crop="none"/>`;
+  template +=
+    `<text><![CDATA[${options.title}]]></text>` +
+    `<text><![CDATA[${options.body}]]></text>`;
+
+  //Progress bar
+  if (options.progress) {
+    template +=
+      "<progress " +
+      `value="${options.progress.value}" ` +
+      `status="" ` +
+      addAttributeOrTrim(
+        "valueStringOverride",
+        escape(options.progress.valueOverride)
+      ) +
+      "/>";
+  }
+  template += "</binding></visual>";
+
+  //Actions
+  template += "<actions>";
+  template += "</actions>";
+
+  //Audio
+  template += "<audio " + `silent="true" ` + `loop="false" ` + "/>";
+
+  //EOF
+  template += "</toast>";
+
+  return template;
+}

src/main/services/user/get-user-data.ts

@@ -4,7 +4,6 @@ import {
   userAuthRepository,
   userSubscriptionRepository,
 } from "@main/repository";
-import * as Sentry from "@sentry/electron/main";
 import { UserNotLoggedInError } from "@shared";
 import { logger } from "../logger";
 
@@ -39,8 +38,6 @@ export const getUserData = () => {
         await userSubscriptionRepository.delete({ id: 1 });
       }
 
-      Sentry.setUser({ id: me.id, username: me.username });
-
       return me;
     })
     .catch(async (err) => {
@@ -59,6 +56,7 @@ export const getUserData = () => {
           id: loggedUser.userId,
           username: "",
           bio: "",
+          email: null,
           profileVisibility: "PUBLIC" as ProfileVisibility,
           subscription: loggedUser.subscription
             ? {

src/main/services/window-manager.ts

@@ -20,7 +20,6 @@ import UserAgent from "user-agents";
 
 export class WindowManager {
   public static mainWindow: Electron.BrowserWindow | null = null;
-  public static notificationWindow: Electron.BrowserWindow | null = null;
 
   private static loadMainWindowURL(hash = "") {
     // HMR for renderer base on electron-vite cli.
@@ -39,21 +38,6 @@ export class WindowManager {
     }
   }
 
-  private static loadNotificationWindowURL() {
-    if (is.dev && process.env["ELECTRON_RENDERER_URL"]) {
-      this.notificationWindow?.loadURL(
-        `${process.env["ELECTRON_RENDERER_URL"]}#/achievement-notification`
-      );
-    } else {
-      this.notificationWindow?.loadFile(
-        path.join(__dirname, "../renderer/index.html"),
-        {
-          hash: "achievement-notification",
-        }
-      );
-    }
-  }
-
   public static createMainWindow() {
     if (this.mainWindow) return;
 
@@ -63,7 +47,7 @@ export class WindowManager {
       minWidth: 1024,
       minHeight: 540,
       backgroundColor: "#1c1c1c",
-      titleBarStyle: process.platform === "win32" ? "hidden" : "default",
+      titleBarStyle: process.platform === "linux" ? "default" : "hidden",
       ...(process.platform === "linux" ? { icon } : {}),
       trafficLightPosition: { x: 16, y: 16 },
       titleBarOverlay: {
@@ -101,6 +85,10 @@ export class WindowManager {
           return callback(details);
         }
 
+        if (details.url.includes("intercom.io")) {
+          return callback(details);
+        }
+
         const headers = {
           "access-control-allow-origin": ["*"],
           "access-control-allow-methods": ["GET, POST, PUT, DELETE, OPTIONS"],
@@ -151,32 +139,6 @@ export class WindowManager {
     });
   }
 
-  public static createNotificationWindow() {
-    this.notificationWindow = new BrowserWindow({
-      transparent: true,
-      maximizable: false,
-      autoHideMenuBar: true,
-      minimizable: false,
-      focusable: false,
-      skipTaskbar: true,
-      frame: false,
-      width: 350,
-      height: 104,
-      x: 0,
-      y: 0,
-      webPreferences: {
-        preload: path.join(__dirname, "../preload/index.mjs"),
-        sandbox: false,
-      },
-    });
-    this.notificationWindow.setIgnoreMouseEvents(true);
-    // this.notificationWindow.setVisibleOnAllWorkspaces(true, {
-    //   visibleOnFullScreen: true,
-    // });
-    this.notificationWindow.setAlwaysOnTop(true, "screen-saver", 1);
-    this.loadNotificationWindowURL();
-  }
-
   public static openAuthWindow() {
     if (this.mainWindow) {
       const authWindow = new BrowserWindow({
@@ -310,14 +272,15 @@ export class WindowManager {
     if (process.platform !== "darwin") {
       tray.addListener("click", () => {
         if (this.mainWindow) {
-          if (WindowManager.mainWindow?.isMinimized())
-            WindowManager.mainWindow.restore();
-
-          WindowManager.mainWindow?.focus();
-          return;
+          if (
+            WindowManager.mainWindow?.isMinimized() ||
+            !WindowManager.mainWindow?.isVisible()
+          ) {
+            WindowManager.mainWindow?.show();
+          }
+        } else {
+          this.createMainWindow();
         }
-
-        this.createMainWindow();
       });
 
       tray.addListener("right-click", showContextMenu);

src/main/vite-env.d.ts

@@ -3,8 +3,8 @@
 interface ImportMetaEnv {
   readonly MAIN_VITE_STEAMGRIDDB_API_KEY: string;
   readonly MAIN_VITE_API_URL: string;
+  readonly MAIN_VITE_ANALYTICS_API_URL: string;
   readonly MAIN_VITE_AUTH_URL: string;
-  readonly MAIN_VITE_SENTRY_DSN: string;
   readonly MAIN_VITE_CHECKOUT_URL: string;
 }
 

src/main/workers/ludusavi.worker.ts

@@ -16,15 +16,25 @@ export const backupGame = ({
   preview?: boolean;
   winePrefix?: string;
 }) => {
-  const args = ["backup", title, "--api", "--force"];
+  return new Promise((resolve, reject) => {
+    const args = ["backup", title, "--api", "--force"];
 
-  if (preview) args.push("--preview");
-  if (backupPath) args.push("--path", backupPath);
-  if (winePrefix) args.push("--wine-prefix", winePrefix);
+    if (preview) args.push("--preview");
+    if (backupPath) args.push("--path", backupPath);
+    if (winePrefix) args.push("--wine-prefix", winePrefix);
 
-  const result = cp.execFileSync(binaryPath, args);
+    cp.execFile(
+      binaryPath,
+      args,
+      (err: cp.ExecFileException | null, stdout: string) => {
+        if (err) {
+          return reject(err);
+        }
 
-  return JSON.parse(result.toString("utf-8")) as LudusaviBackup;
+        return resolve(JSON.parse(stdout) as LudusaviBackup);
+      }
+    );
+  });
 };
 
 export const restoreBackup = (backupPath: string) => {

src/preload/index.ts

@@ -51,35 +51,6 @@ contextBridge.exposeInMainWorld("electron", {
   getGameStats: (objectId: string, shop: GameShop) =>
     ipcRenderer.invoke("getGameStats", objectId, shop),
   getTrendingGames: () => ipcRenderer.invoke("getTrendingGames"),
-  onAchievementUnlocked: (
-    cb: (
-      objectId: string,
-      shop: GameShop,
-      achievements?: { displayName: string; iconUrl: string }[]
-    ) => void
-  ) => {
-    const listener = (
-      _event: Electron.IpcRendererEvent,
-      objectId: string,
-      shop: GameShop,
-      achievements?: { displayName: string; iconUrl: string }[]
-    ) => cb(objectId, shop, achievements);
-    ipcRenderer.on("on-achievement-unlocked", listener);
-    return () =>
-      ipcRenderer.removeListener("on-achievement-unlocked", listener);
-  },
-  onCombinedAchievementsUnlocked: (
-    cb: (gameCount: number, achievementsCount: number) => void
-  ) => {
-    const listener = (
-      _event: Electron.IpcRendererEvent,
-      gameCount: number,
-      achievementCount: number
-    ) => cb(gameCount, achievementCount);
-    ipcRenderer.on("on-combined-achievements-unlocked", listener);
-    return () =>
-      ipcRenderer.removeListener("on-combined-achievements-unlocked", listener);
-  },
   onUpdateAchievements: (
     objectId: string,
     shop: GameShop,
@@ -101,7 +72,8 @@ contextBridge.exposeInMainWorld("electron", {
   getUserPreferences: () => ipcRenderer.invoke("getUserPreferences"),
   updateUserPreferences: (preferences: UserPreferences) =>
     ipcRenderer.invoke("updateUserPreferences", preferences),
-  autoLaunch: (enabled: boolean) => ipcRenderer.invoke("autoLaunch", enabled),
+  autoLaunch: (autoLaunchProps: { enabled: boolean; minimized: boolean }) =>
+    ipcRenderer.invoke("autoLaunch", autoLaunchProps),
   authenticateRealDebrid: (apiToken: string) =>
     ipcRenderer.invoke("authenticateRealDebrid", apiToken),
 

src/renderer/index.html

@@ -6,7 +6,7 @@
     <title>Hydra</title>
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: local: *; media-src 'self' local: data: *;"
+      content="default-src 'self'; script-src *; style-src 'self' 'unsafe-inline'; img-src 'self' data: local: *; media-src 'self' local: data: *; connect-src *; font-src *;"
     />
   </head>
   <body>

src/renderer/src/app.css.ts

@@ -126,3 +126,9 @@ export const titleBar = style({
   zIndex: "4",
   borderBottom: `1px solid ${vars.color.border}`,
 } as ComplexStyleRule);
+
+export const cloudText = style({
+  background: "linear-gradient(270deg, #16B195 50%, #3E62C0 100%)",
+  backgroundClip: "text",
+  color: "transparent",
+});

src/renderer/src/app.tsx

@@ -1,7 +1,9 @@
-import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { useCallback, useContext, useEffect, useRef } from "react";
 
 import { Sidebar, BottomPanel, Header, Toast } from "@renderer/components";
 
+import Intercom from "@intercom/messenger-js-sdk";
+
 import {
   useAppDispatch,
   useAppSelector,
@@ -29,16 +31,15 @@ import { UserFriendModal } from "./pages/shared-modals/user-friend-modal";
 import { downloadSourcesWorker } from "./workers";
 import { repacksContext } from "./context";
 import { logger } from "./logger";
-import { SubscriptionTourModal } from "./pages/shared-modals/subscription-tour-modal";
-
-interface TourModals {
-  subscriptionModal?: boolean;
-}
 
 export interface AppProps {
   children: React.ReactNode;
 }
 
+Intercom({
+  app_id: import.meta.env.RENDERER_VITE_INTERCOM_APP_ID,
+});
+
 export function App() {
   const contentRef = useRef<HTMLDivElement>(null);
   const { updateLibrary, library } = useLibrary();
@@ -59,8 +60,13 @@ export function App() {
     hideFriendsModal,
   } = useUserDetails();
 
-  const { userDetails, fetchUserDetails, updateUserDetails, clearUserDetails } =
-    useUserDetails();
+  const {
+    userDetails,
+    hasActiveSubscription,
+    fetchUserDetails,
+    updateUserDetails,
+    clearUserDetails,
+  } = useUserDetails();
 
   const dispatch = useAppDispatch();
 
@@ -77,9 +83,6 @@ export function App() {
 
   const { showSuccessToast } = useToast();
 
-  const [showSubscritionTourModal, setShowSubscritionTourModal] =
-    useState(false);
-
   useEffect(() => {
     Promise.all([window.electron.getUserPreferences(), updateLibrary()]).then(
       ([preferences]) => {
@@ -125,16 +128,6 @@ export function App() {
     });
   }, [fetchUserDetails, syncFriendRequests, updateUserDetails, dispatch]);
 
-  useEffect(() => {
-    const tourModalsString = window.localStorage.getItem("tourModals") || "{}";
-
-    const tourModals = JSON.parse(tourModalsString) as TourModals;
-
-    if (!tourModals.subscriptionModal) {
-      setShowSubscritionTourModal(true);
-    }
-  }, []);
-
   const onSignIn = useCallback(() => {
     fetchUserDetails().then((response) => {
       if (response) {
@@ -222,7 +215,9 @@ export function App() {
 
   useEffect(() => {
     new MutationObserver(() => {
-      const modal = document.body.querySelector("[role=dialog]");
+      const modal = document.body.querySelector(
+        "[role=dialog]:not([data-intercom-frame='true'])"
+      );
 
       dispatch(toggleDraggingDisabled(Boolean(modal)));
     }).observe(document.body, {
@@ -280,14 +275,6 @@ export function App() {
     });
   }, [indexRepacks]);
 
-  const handleCloseSubscriptionTourModal = () => {
-    setShowSubscritionTourModal(false);
-    window.localStorage.setItem(
-      "tourModals",
-      JSON.stringify({ subscriptionModal: true } as TourModals)
-    );
-  };
-
   const handleToastClose = useCallback(() => {
     dispatch(closeToast());
   }, [dispatch]);
@@ -296,7 +283,12 @@ export function App() {
     <>
       {window.electron.platform === "win32" && (
         <div className={styles.titleBar}>
-          <h4>Hydra</h4>
+          <h4>
+            Hydra
+            {hasActiveSubscription && (
+              <span className={styles.cloudText}> Cloud</span>
+            )}
+          </h4>
         </div>
       )}
 
@@ -307,11 +299,6 @@ export function App() {
         onClose={handleToastClose}
       />
 
-      <SubscriptionTourModal
-        visible={showSubscritionTourModal && false}
-        onClose={handleCloseSubscriptionTourModal}
-      />
-
       {userDetails && (
         <UserFriendModal
           visible={isFriendsModalVisible}

src/renderer/src/assets/lottie/cloud.json

@@ -1,725 +0,0 @@
-{
-  "v": "5.12.1",
-  "fr": 30,
-  "ip": 0,
-  "op": 60,
-  "w": 400,
-  "h": 400,
-  "nm": "Cloud",
-  "ddd": 0,
-  "assets": [],
-  "layers": [
-    {
-      "ddd": 0,
-      "ind": 2,
-      "ty": 4,
-      "nm": "Layer 6",
-      "sr": 1,
-      "ks": {
-        "o": { "a": 0, "k": 100, "ix": 11 },
-        "r": { "a": 0, "k": 0, "ix": 10 },
-        "p": {
-          "a": 1,
-          "k": [
-            {
-              "i": { "x": 0.667, "y": 1 },
-              "o": { "x": 0.333, "y": 0 },
-              "t": 0,
-              "s": [322.789, 202.565, 0],
-              "to": [-1.5, -0.167, 0],
-              "ti": [0, 0, 0]
-            },
-            {
-              "i": { "x": 0.667, "y": 1 },
-              "o": { "x": 0.333, "y": 0 },
-              "t": 30,
-              "s": [313.789, 201.565, 0],
-              "to": [0, 0, 0],
-              "ti": [-1.5, -0.167, 0]
-            },
-            { "t": 60, "s": [322.789, 202.565, 0] }
-          ],
-          "ix": 2,
-          "l": 2
-        },
-        "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 },
-        "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
-      },
-      "ao": 0,
-      "shapes": [
-        {
-          "ty": "gr",
-          "it": [
-            {
-              "ind": 0,
-              "ty": "sh",
-              "ix": 1,
-              "ks": {
-                "a": 0,
-                "k": {
-                  "i": [
-                    [0, -38.564],
-                    [38.564, 0],
-                    [0, 38.564],
-                    [-38.564, 0]
-                  ],
-                  "o": [
-                    [0, 38.564],
-                    [-38.564, 0],
-                    [0, -38.564],
-                    [38.564, 0]
-                  ],
-                  "v": [
-                    [69.827, 0],
-                    [0, 69.827],
-                    [-69.827, 0],
-                    [0, -69.827]
-                  ],
-                  "c": true
-                },
-                "ix": 2
-              },
-              "nm": "Path 1",
-              "mn": "ADBE Vector Shape - Group",
-              "hd": false
-            },
-            {
-              "ty": "fl",
-              "c": {
-                "a": 0,
-                "k": [0.839215686275, 0.854901960784, 0.933333333333, 1],
-                "ix": 4
-              },
-              "o": { "a": 0, "k": 100, "ix": 5 },
-              "r": 1,
-              "bm": 0,
-              "nm": "Fill 1",
-              "mn": "ADBE Vector Graphic - Fill",
-              "hd": false
-            },
-            {
-              "ty": "tr",
-              "p": { "a": 0, "k": [0, 0], "ix": 2 },
-              "a": { "a": 0, "k": [0, 0], "ix": 1 },
-              "s": { "a": 0, "k": [100, 100], "ix": 3 },
-              "r": { "a": 0, "k": 0, "ix": 6 },
-              "o": { "a": 0, "k": 100, "ix": 7 },
-              "sk": { "a": 0, "k": 0, "ix": 4 },
-              "sa": { "a": 0, "k": 0, "ix": 5 },
-              "nm": "Transform"
-            }
-          ],
-          "nm": "Group 1",
-          "np": 2,
-          "cix": 2,
-          "bm": 0,
-          "ix": 1,
-          "mn": "ADBE Vector Group",
-          "hd": false
-        }
-      ],
-      "ip": 0,
-      "op": 270,
-      "st": 0,
-      "ct": 1,
-      "bm": 0
-    },
-    {
-      "ddd": 0,
-      "ind": 3,
-      "ty": 4,
-      "nm": "Layer 5",
-      "sr": 1,
-      "ks": {
-        "o": { "a": 0, "k": 100, "ix": 11 },
-        "r": { "a": 0, "k": 0, "ix": 10 },
-        "p": {
-          "a": 1,
-          "k": [
-            {
-              "i": { "x": 0.667, "y": 1 },
-              "o": { "x": 0.333, "y": 0 },
-              "t": 0,
-              "s": [243.704, 202.565, 0],
-              "to": [-1.667, 0, 0],
-              "ti": [0, 0, 0]
-            },
-            {
-              "i": { "x": 0.667, "y": 1 },
-              "o": { "x": 0.333, "y": 0 },
-              "t": 30,
-              "s": [233.704, 202.565, 0],
-              "to": [0, 0, 0],
-              "ti": [-1.667, 0, 0]
-            },
-            { "t": 60, "s": [243.704, 202.565, 0] }
-          ],
-          "ix": 2,
-          "l": 2
-        },
-        "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 },
-        "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
-      },
-      "ao": 0,
-      "shapes": [
-        {
-          "ty": "gr",
-          "it": [
-            {
-              "ind": 0,
-              "ty": "sh",
-              "ix": 1,
-              "ks": {
-                "a": 0,
-                "k": {
-                  "i": [
-                    [0, -38.564],
-                    [38.564, 0],
-                    [0, 38.564],
-                    [-38.564, 0]
-                  ],
-                  "o": [
-                    [0, 38.564],
-                    [-38.564, 0],
-                    [0, -38.564],
-                    [38.564, 0]
-                  ],
-                  "v": [
-                    [69.827, 0],
-                    [0, 69.827],
-                    [-69.827, 0],
-                    [0, -69.827]
-                  ],
-                  "c": true
-                },
-                "ix": 2
-              },
-              "nm": "Path 1",
-              "mn": "ADBE Vector Shape - Group",
-              "hd": false
-            },
-            {
-              "ty": "fl",
-              "c": {
-                "a": 0,
-                "k": [0.839215686275, 0.854901960784, 0.933333333333, 1],
-                "ix": 4
-              },
-              "o": { "a": 0, "k": 100, "ix": 5 },
-              "r": 1,
-              "bm": 0,
-              "nm": "Fill 1",
-              "mn": "ADBE Vector Graphic - Fill",
-              "hd": false
-            },
-            {
-              "ty": "tr",
-              "p": { "a": 0, "k": [0, 0], "ix": 2 },
-              "a": { "a": 0, "k": [0, 0], "ix": 1 },
-              "s": { "a": 0, "k": [100, 100], "ix": 3 },
-              "r": { "a": 0, "k": 0, "ix": 6 },
-              "o": { "a": 0, "k": 100, "ix": 7 },
-              "sk": { "a": 0, "k": 0, "ix": 4 },
-              "sa": { "a": 0, "k": 0, "ix": 5 },
-              "nm": "Transform"
-            }
-          ],
-          "nm": "Group 1",
-          "np": 2,
-          "cix": 2,
-          "bm": 0,
-          "ix": 1,
-          "mn": "ADBE Vector Group",
-          "hd": false
-        }
-      ],
-      "ip": 0,
-      "op": 270,
-      "st": 0,
-      "ct": 1,
-      "bm": 0
-    },
-    {
-      "ddd": 0,
-      "ind": 4,
-      "ty": 4,
-      "nm": "Layer 4",
-      "sr": 1,
-      "ks": {
-        "o": { "a": 0, "k": 100, "ix": 11 },
-        "r": { "a": 0, "k": 0, "ix": 10 },
-        "p": {
-          "a": 1,
-          "k": [
-            {
-              "i": { "x": 0.667, "y": 1 },
-              "o": { "x": 0.333, "y": 0 },
-              "t": 0,
-              "s": [260.681, 151.053, 0],
-              "to": [1.333, -1.333, 0],
-              "ti": [0, 0, 0]
-            },
-            {
-              "i": { "x": 0.667, "y": 1 },
-              "o": { "x": 0.333, "y": 0 },
-              "t": 30,
-              "s": [268.681, 143.053, 0],
-              "to": [0, 0, 0],
-              "ti": [1.333, -1.333, 0]
-            },
-            { "t": 60, "s": [260.681, 151.053, 0] }
-          ],
-          "ix": 2,
-          "l": 2
-        },
-        "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 },
-        "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
-      },
-      "ao": 0,
-      "shapes": [
-        {
-          "ty": "gr",
-          "it": [
-            {
-              "ind": 0,
-              "ty": "sh",
-              "ix": 1,
-              "ks": {
-                "a": 0,
-                "k": {
-                  "i": [
-                    [0, -38.564],
-                    [38.564, 0],
-                    [0, 38.564],
-                    [-38.564, 0]
-                  ],
-                  "o": [
-                    [0, 38.564],
-                    [-38.564, 0],
-                    [0, -38.564],
-                    [38.564, 0]
-                  ],
-                  "v": [
-                    [69.827, 0],
-                    [0, 69.827],
-                    [-69.827, 0],
-                    [0, -69.827]
-                  ],
-                  "c": true
-                },
-                "ix": 2
-              },
-              "nm": "Path 1",
-              "mn": "ADBE Vector Shape - Group",
-              "hd": false
-            },
-            {
-              "ty": "fl",
-              "c": {
-                "a": 0,
-                "k": [0.839215686275, 0.854901960784, 0.933333333333, 1],
-                "ix": 4
-              },
-              "o": { "a": 0, "k": 100, "ix": 5 },
-              "r": 1,
-              "bm": 0,
-              "nm": "Fill 1",
-              "mn": "ADBE Vector Graphic - Fill",
-              "hd": false
-            },
-            {
-              "ty": "tr",
-              "p": { "a": 0, "k": [0, 0], "ix": 2 },
-              "a": { "a": 0, "k": [0, 0], "ix": 1 },
-              "s": { "a": 0, "k": [100, 100], "ix": 3 },
-              "r": { "a": 0, "k": 0, "ix": 6 },
-              "o": { "a": 0, "k": 100, "ix": 7 },
-              "sk": { "a": 0, "k": 0, "ix": 4 },
-              "sa": { "a": 0, "k": 0, "ix": 5 },
-              "nm": "Transform"
-            }
-          ],
-          "nm": "Group 1",
-          "np": 2,
-          "cix": 2,
-          "bm": 0,
-          "ix": 1,
-          "mn": "ADBE Vector Group",
-          "hd": false
-        }
-      ],
-      "ip": 0,
-      "op": 270,
-      "st": 0,
-      "ct": 1,
-      "bm": 0
-    },
-    {
-      "ddd": 0,
-      "ind": 5,
-      "ty": 4,
-      "nm": "Layer 3",
-      "sr": 1,
-      "ks": {
-        "o": { "a": 0, "k": 100, "ix": 11 },
-        "r": { "a": 0, "k": 0, "ix": 10 },
-        "p": {
-          "a": 1,
-          "k": [
-            {
-              "i": { "x": 0.667, "y": 1 },
-              "o": { "x": 0.333, "y": 0 },
-              "t": 0,
-              "s": [162.135, 206.563, 0],
-              "to": [-0.833, -0.167, 0],
-              "ti": [0, 0, 0]
-            },
-            {
-              "i": { "x": 0.667, "y": 1 },
-              "o": { "x": 0.333, "y": 0 },
-              "t": 30,
-              "s": [157.135, 205.563, 0],
-              "to": [0, 0, 0],
-              "ti": [-0.833, -0.167, 0]
-            },
-            { "t": 60, "s": [162.135, 206.563, 0] }
-          ],
-          "ix": 2,
-          "l": 2
-        },
-        "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 },
-        "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
-      },
-      "ao": 0,
-      "shapes": [
-        {
-          "ty": "gr",
-          "it": [
-            {
-              "ind": 0,
-              "ty": "sh",
-              "ix": 1,
-              "ks": {
-                "a": 0,
-                "k": {
-                  "i": [
-                    [0, -36.66],
-                    [36.66, 0],
-                    [0, 36.66],
-                    [-36.66, 0]
-                  ],
-                  "o": [
-                    [0, 36.66],
-                    [-36.66, 0],
-                    [0, -36.66],
-                    [36.66, 0]
-                  ],
-                  "v": [
-                    [66.378, 0],
-                    [0, 66.378],
-                    [-66.378, 0],
-                    [0, -66.378]
-                  ],
-                  "c": true
-                },
-                "ix": 2
-              },
-              "nm": "Path 1",
-              "mn": "ADBE Vector Shape - Group",
-              "hd": false
-            },
-            {
-              "ty": "fl",
-              "c": {
-                "a": 0,
-                "k": [0.839215686275, 0.854901960784, 0.933333333333, 1],
-                "ix": 4
-              },
-              "o": { "a": 0, "k": 100, "ix": 5 },
-              "r": 1,
-              "bm": 0,
-              "nm": "Fill 1",
-              "mn": "ADBE Vector Graphic - Fill",
-              "hd": false
-            },
-            {
-              "ty": "tr",
-              "p": { "a": 0, "k": [0, 0], "ix": 2 },
-              "a": { "a": 0, "k": [0, 0], "ix": 1 },
-              "s": { "a": 0, "k": [100, 100], "ix": 3 },
-              "r": { "a": 0, "k": 0, "ix": 6 },
-              "o": { "a": 0, "k": 100, "ix": 7 },
-              "sk": { "a": 0, "k": 0, "ix": 4 },
-              "sa": { "a": 0, "k": 0, "ix": 5 },
-              "nm": "Transform"
-            }
-          ],
-          "nm": "Group 1",
-          "np": 2,
-          "cix": 2,
-          "bm": 0,
-          "ix": 1,
-          "mn": "ADBE Vector Group",
-          "hd": false
-        }
-      ],
-      "ip": 0,
-      "op": 270,
-      "st": 0,
-      "ct": 1,
-      "bm": 0
-    },
-    {
-      "ddd": 0,
-      "ind": 6,
-      "ty": 4,
-      "nm": "Layer 2",
-      "sr": 1,
-      "ks": {
-        "o": { "a": 0, "k": 100, "ix": 11 },
-        "r": { "a": 0, "k": 0, "ix": 10 },
-        "p": {
-          "a": 1,
-          "k": [
-            {
-              "i": { "x": 0.667, "y": 1 },
-              "o": { "x": 0.333, "y": 0 },
-              "t": 0,
-              "s": [180.178, 132.225, 0],
-              "to": [-0.5, -2.333, 0],
-              "ti": [0, 0, 0]
-            },
-            {
-              "i": { "x": 0.667, "y": 1 },
-              "o": { "x": 0.333, "y": 0 },
-              "t": 30,
-              "s": [177.178, 118.225, 0],
-              "to": [0, 0, 0],
-              "ti": [-0.5, -2.333, 0]
-            },
-            { "t": 60, "s": [180.178, 132.225, 0] }
-          ],
-          "ix": 2,
-          "l": 2
-        },
-        "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 },
-        "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
-      },
-      "ao": 0,
-      "shapes": [
-        {
-          "ty": "gr",
-          "it": [
-            {
-              "ind": 0,
-              "ty": "sh",
-              "ix": 1,
-              "ks": {
-                "a": 0,
-                "k": {
-                  "i": [
-                    [0, -50.068],
-                    [50.068, 0],
-                    [0, 50.068],
-                    [-50.068, 0]
-                  ],
-                  "o": [
-                    [0, 50.068],
-                    [-50.068, 0],
-                    [0, -50.068],
-                    [50.068, 0]
-                  ],
-                  "v": [
-                    [90.655, 0],
-                    [0, 90.655],
-                    [-90.655, 0],
-                    [0, -90.655]
-                  ],
-                  "c": true
-                },
-                "ix": 2
-              },
-              "nm": "Path 1",
-              "mn": "ADBE Vector Shape - Group",
-              "hd": false
-            },
-            {
-              "ty": "fl",
-              "c": {
-                "a": 0,
-                "k": [0.839215686275, 0.854901960784, 0.933333333333, 1],
-                "ix": 4
-              },
-              "o": { "a": 0, "k": 100, "ix": 5 },
-              "r": 1,
-              "bm": 0,
-              "nm": "Fill 1",
-              "mn": "ADBE Vector Graphic - Fill",
-              "hd": false
-            },
-            {
-              "ty": "tr",
-              "p": { "a": 0, "k": [0, 0], "ix": 2 },
-              "a": { "a": 0, "k": [0, 0], "ix": 1 },
-              "s": { "a": 0, "k": [100, 100], "ix": 3 },
-              "r": { "a": 0, "k": 0, "ix": 6 },
-              "o": { "a": 0, "k": 100, "ix": 7 },
-              "sk": { "a": 0, "k": 0, "ix": 4 },
-              "sa": { "a": 0, "k": 0, "ix": 5 },
-              "nm": "Transform"
-            }
-          ],
-          "nm": "Group 1",
-          "np": 2,
-          "cix": 2,
-          "bm": 0,
-          "ix": 1,
-          "mn": "ADBE Vector Group",
-          "hd": false
-        }
-      ],
-      "ip": 0,
-      "op": 270,
-      "st": 0,
-      "ct": 1,
-      "bm": 0
-    },
-    {
-      "ddd": 0,
-      "ind": 7,
-      "ty": 4,
-      "nm": "Layer 1",
-      "sr": 1,
-      "ks": {
-        "o": { "a": 0, "k": 100, "ix": 11 },
-        "r": { "a": 0, "k": 0, "ix": 10 },
-        "p": {
-          "a": 1,
-          "k": [
-            {
-              "i": { "x": 0.667, "y": 1 },
-              "o": { "x": 0.333, "y": 0 },
-              "t": 0,
-              "s": [95.756, 208.288, 0],
-              "to": [-1.167, 0, 0],
-              "ti": [0, 0, 0]
-            },
-            {
-              "i": { "x": 0.667, "y": 1 },
-              "o": { "x": 0.333, "y": 0 },
-              "t": 30,
-              "s": [88.756, 208.288, 0],
-              "to": [0, 0, 0],
-              "ti": [-1.167, 0, 0]
-            },
-            { "t": 60, "s": [95.756, 208.288, 0] }
-          ],
-          "ix": 2,
-          "l": 2
-        },
-        "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 },
-        "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
-      },
-      "ao": 0,
-      "shapes": [
-        {
-          "ty": "gr",
-          "it": [
-            {
-              "ind": 0,
-              "ty": "sh",
-              "ix": 1,
-              "ks": {
-                "a": 0,
-                "k": {
-                  "i": [
-                    [0, -35.403],
-                    [35.403, 0],
-                    [0, 35.403],
-                    [-35.403, 0]
-                  ],
-                  "o": [
-                    [0, 35.403],
-                    [-35.403, 0],
-                    [0, -35.403],
-                    [35.403, 0]
-                  ],
-                  "v": [
-                    [64.103, 0],
-                    [0, 64.103],
-                    [-64.103, 0],
-                    [0, -64.103]
-                  ],
-                  "c": true
-                },
-                "ix": 2
-              },
-              "nm": "Path 1",
-              "mn": "ADBE Vector Shape - Group",
-              "hd": false
-            },
-            {
-              "ty": "fl",
-              "c": {
-                "a": 0,
-                "k": [0.839215686275, 0.854901960784, 0.933333333333, 1],
-                "ix": 4
-              },
-              "o": { "a": 0, "k": 100, "ix": 5 },
-              "r": 1,
-              "bm": 0,
-              "nm": "Fill 1",
-              "mn": "ADBE Vector Graphic - Fill",
-              "hd": false
-            },
-            {
-              "ty": "tr",
-              "p": { "a": 0, "k": [0, 0], "ix": 2 },
-              "a": { "a": 0, "k": [0, 0], "ix": 1 },
-              "s": { "a": 0, "k": [100, 100], "ix": 3 },
-              "r": { "a": 0, "k": 0, "ix": 6 },
-              "o": { "a": 0, "k": 100, "ix": 7 },
-              "sk": { "a": 0, "k": 0, "ix": 4 },
-              "sa": { "a": 0, "k": 0, "ix": 5 },
-              "nm": "Transform"
-            }
-          ],
-          "nm": "Group 1",
-          "np": 2,
-          "cix": 2,
-          "bm": 0,
-          "ix": 1,
-          "mn": "ADBE Vector Group",
-          "hd": false
-        }
-      ],
-      "ip": 0,
-      "op": 270,
-      "st": 0,
-      "ct": 1,
-      "bm": 0
-    },
-    {
-      "ddd": 0,
-      "ind": 8,
-      "ty": 3,
-      "nm": "Null 1",
-      "parent": 6,
-      "sr": 1,
-      "ks": {
-        "o": { "a": 0, "k": 0, "ix": 11 },
-        "r": { "a": 0, "k": 0, "ix": 10 },
-        "p": { "a": 0, "k": [19.822, 67.775, 0], "ix": 2, "l": 2 },
-        "a": { "a": 0, "k": [0, 0, 0], "ix": 1, "l": 2 },
-        "s": { "a": 0, "k": [100, 100, 100], "ix": 6, "l": 2 }
-      },
-      "ao": 0,
-      "ip": 0,
-      "op": 270,
-      "st": 0,
-      "bm": 0
-    }
-  ],
-  "markers": [],
-  "props": {}
-}

src/renderer/src/assets/lottie/downloading.json

@@ -1,843 +0,0 @@
-{
-  "v": "4.8.0",
-  "meta": { "g": "LottieFiles AE 3.5.6", "a": "", "k": "", "d": "", "tc": "" },
-  "fr": 60,
-  "ip": 0,
-  "op": 120,
-  "w": 714,
-  "h": 678,
-  "nm": "Pre-comp 1",
-  "ddd": 0,
-  "assets": [
-    {
-      "id": "comp_0",
-      "layers": [
-        {
-          "ddd": 0,
-          "ind": 1,
-          "ty": 4,
-          "nm": "centro",
-          "sr": 1,
-          "ks": {
-            "o": { "a": 0, "k": 100, "ix": 11 },
-            "r": { "a": 0, "k": 0, "ix": 10 },
-            "p": {
-              "a": 1,
-              "k": [
-                {
-                  "i": { "x": 0.214, "y": 1 },
-                  "o": { "x": 0.462, "y": 0 },
-                  "t": 0,
-                  "s": [450, 907, 0],
-                  "to": [0, 0, 0],
-                  "ti": [0, 0, 0]
-                },
-                { "t": 30, "s": [450, 1513, 0] }
-              ],
-              "ix": 2
-            },
-            "a": { "a": 0, "k": [-348, -169, 0], "ix": 1 },
-            "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
-          },
-          "ao": 0,
-          "shapes": [
-            {
-              "ty": "gr",
-              "it": [
-                {
-                  "ind": 0,
-                  "ty": "sh",
-                  "ix": 1,
-                  "ks": {
-                    "a": 0,
-                    "k": {
-                      "i": [
-                        [0, 0],
-                        [0, 0]
-                      ],
-                      "o": [
-                        [0, 0],
-                        [0, 0]
-                      ],
-                      "v": [
-                        [-348, -420],
-                        [-348, -30]
-                      ],
-                      "c": false
-                    },
-                    "ix": 2
-                  },
-                  "nm": "Path 1",
-                  "mn": "ADBE Vector Shape - Group",
-                  "hd": false
-                },
-                {
-                  "ty": "st",
-                  "c": {
-                    "a": 0,
-                    "k": [0.854901960784, 0.858823529412, 0.882352941176, 1],
-                    "ix": 3
-                  },
-                  "o": { "a": 0, "k": 100, "ix": 4 },
-                  "w": { "a": 0, "k": 77, "ix": 5 },
-                  "lc": 2,
-                  "lj": 1,
-                  "ml": 4,
-                  "bm": 0,
-                  "nm": "Stroke 1",
-                  "mn": "ADBE Vector Graphic - Stroke",
-                  "hd": false
-                },
-                {
-                  "ty": "tr",
-                  "p": { "a": 0, "k": [-348, -164], "ix": 2 },
-                  "a": { "a": 0, "k": [-348, -156], "ix": 1 },
-                  "s": { "a": 0, "k": [100, 100], "ix": 3 },
-                  "r": { "a": 0, "k": 0, "ix": 6 },
-                  "o": { "a": 0, "k": 100, "ix": 7 },
-                  "sk": { "a": 0, "k": 0, "ix": 4 },
-                  "sa": { "a": 0, "k": 0, "ix": 5 },
-                  "nm": "Transform"
-                }
-              ],
-              "nm": "Shape 1",
-              "np": 3,
-              "cix": 2,
-              "bm": 0,
-              "ix": 1,
-              "mn": "ADBE Vector Group",
-              "hd": false
-            }
-          ],
-          "ip": 0,
-          "op": 120,
-          "st": 0,
-          "bm": 0
-        },
-        {
-          "ddd": 0,
-          "ind": 2,
-          "ty": 4,
-          "nm": "esquerdo",
-          "parent": 1,
-          "sr": 1,
-          "ks": {
-            "o": { "a": 0, "k": 100, "ix": 11 },
-            "r": {
-              "a": 1,
-              "k": [
-                {
-                  "i": { "x": [0.298], "y": [1] },
-                  "o": { "x": [0.448], "y": [0] },
-                  "t": 6,
-                  "s": [43.5]
-                },
-                { "t": 36, "s": [-1] }
-              ],
-              "ix": 10
-            },
-            "p": { "a": 0, "k": [-348.39, -36.55, 0], "ix": 2 },
-            "a": { "a": 0, "k": [-2, 84, 0], "ix": 1 },
-            "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
-          },
-          "ao": 0,
-          "shapes": [
-            {
-              "ty": "gr",
-              "it": [
-                {
-                  "ind": 0,
-                  "ty": "sh",
-                  "ix": 1,
-                  "ks": {
-                    "a": 0,
-                    "k": {
-                      "i": [
-                        [0, 0],
-                        [0, 0]
-                      ],
-                      "o": [
-                        [0, 0],
-                        [0, 0]
-                      ],
-                      "v": [
-                        [-178, -102],
-                        [-2, 84]
-                      ],
-                      "c": false
-                    },
-                    "ix": 2
-                  },
-                  "nm": "Path 1",
-                  "mn": "ADBE Vector Shape - Group",
-                  "hd": false
-                },
-                {
-                  "ty": "st",
-                  "c": {
-                    "a": 0,
-                    "k": [0.854901960784, 0.858823529412, 0.882352941176, 1],
-                    "ix": 3
-                  },
-                  "o": { "a": 0, "k": 100, "ix": 4 },
-                  "w": { "a": 0, "k": 77, "ix": 5 },
-                  "lc": 2,
-                  "lj": 1,
-                  "ml": 4,
-                  "bm": 0,
-                  "nm": "Stroke 1",
-                  "mn": "ADBE Vector Graphic - Stroke",
-                  "hd": false
-                },
-                {
-                  "ty": "tr",
-                  "p": { "a": 0, "k": [0, 0], "ix": 2 },
-                  "a": { "a": 0, "k": [0, 0], "ix": 1 },
-                  "s": { "a": 0, "k": [100, 100], "ix": 3 },
-                  "r": { "a": 0, "k": 0, "ix": 6 },
-                  "o": { "a": 0, "k": 100, "ix": 7 },
-                  "sk": { "a": 0, "k": 0, "ix": 4 },
-                  "sa": { "a": 0, "k": 0, "ix": 5 },
-                  "nm": "Transform"
-                }
-              ],
-              "nm": "Shape 1",
-              "np": 3,
-              "cix": 2,
-              "bm": 0,
-              "ix": 1,
-              "mn": "ADBE Vector Group",
-              "hd": false
-            },
-            {
-              "ty": "tm",
-              "s": { "a": 0, "k": 8, "ix": 1 },
-              "e": { "a": 0, "k": 100, "ix": 2 },
-              "o": { "a": 0, "k": 0, "ix": 3 },
-              "m": 1,
-              "ix": 2,
-              "nm": "Trim Paths 1",
-              "mn": "ADBE Vector Filter - Trim",
-              "hd": false
-            }
-          ],
-          "ip": 0,
-          "op": 120,
-          "st": 0,
-          "bm": 0
-        },
-        {
-          "ddd": 0,
-          "ind": 3,
-          "ty": 4,
-          "nm": "direito",
-          "parent": 1,
-          "sr": 1,
-          "ks": {
-            "o": { "a": 0, "k": 100, "ix": 11 },
-            "r": {
-              "a": 1,
-              "k": [
-                {
-                  "i": { "x": [0.265], "y": [1] },
-                  "o": { "x": [0.53], "y": [0] },
-                  "t": 6,
-                  "s": [-43.5]
-                },
-                { "t": 36, "s": [1] }
-              ],
-              "ix": 10
-            },
-            "p": { "a": 0, "k": [-348.39, -36.55, 0], "ix": 2 },
-            "a": { "a": 0, "k": [-2, 84, 0], "ix": 1 },
-            "s": { "a": 0, "k": [-100, 100, 100], "ix": 6 }
-          },
-          "ao": 0,
-          "shapes": [
-            {
-              "ty": "gr",
-              "it": [
-                {
-                  "ind": 0,
-                  "ty": "sh",
-                  "ix": 1,
-                  "ks": {
-                    "a": 0,
-                    "k": {
-                      "i": [
-                        [0, 0],
-                        [0, 0]
-                      ],
-                      "o": [
-                        [0, 0],
-                        [0, 0]
-                      ],
-                      "v": [
-                        [-178, -102],
-                        [-2, 84]
-                      ],
-                      "c": false
-                    },
-                    "ix": 2
-                  },
-                  "nm": "Path 1",
-                  "mn": "ADBE Vector Shape - Group",
-                  "hd": false
-                },
-                {
-                  "ty": "tm",
-                  "s": { "a": 0, "k": 8, "ix": 1 },
-                  "e": { "a": 0, "k": 100, "ix": 2 },
-                  "o": { "a": 0, "k": 0, "ix": 3 },
-                  "m": 1,
-                  "ix": 2,
-                  "nm": "Trim Paths 1",
-                  "mn": "ADBE Vector Filter - Trim",
-                  "hd": false
-                },
-                {
-                  "ty": "st",
-                  "c": {
-                    "a": 0,
-                    "k": [0.854901960784, 0.858823529412, 0.882352941176, 1],
-                    "ix": 3
-                  },
-                  "o": { "a": 0, "k": 100, "ix": 4 },
-                  "w": { "a": 0, "k": 77, "ix": 5 },
-                  "lc": 2,
-                  "lj": 1,
-                  "ml": 4,
-                  "bm": 0,
-                  "nm": "Stroke 1",
-                  "mn": "ADBE Vector Graphic - Stroke",
-                  "hd": false
-                },
-                {
-                  "ty": "tr",
-                  "p": { "a": 0, "k": [0, 0], "ix": 2 },
-                  "a": { "a": 0, "k": [0, 0], "ix": 1 },
-                  "s": { "a": 0, "k": [100, 100], "ix": 3 },
-                  "r": { "a": 0, "k": 0, "ix": 6 },
-                  "o": { "a": 0, "k": 100, "ix": 7 },
-                  "sk": { "a": 0, "k": 0, "ix": 4 },
-                  "sa": { "a": 0, "k": 0, "ix": 5 },
-                  "nm": "Transform"
-                }
-              ],
-              "nm": "Shape 1",
-              "np": 4,
-              "cix": 2,
-              "bm": 0,
-              "ix": 1,
-              "mn": "ADBE Vector Group",
-              "hd": false
-            }
-          ],
-          "ip": 0,
-          "op": 120,
-          "st": 0,
-          "bm": 0
-        }
-      ]
-    },
-    {
-      "id": "comp_1",
-      "layers": [
-        {
-          "ddd": 0,
-          "ind": 1,
-          "ty": 4,
-          "nm": "centro",
-          "sr": 1,
-          "ks": {
-            "o": { "a": 0, "k": 100, "ix": 11 },
-            "r": { "a": 0, "k": 0, "ix": 10 },
-            "p": {
-              "a": 1,
-              "k": [
-                {
-                  "i": { "x": 0.569, "y": 1 },
-                  "o": { "x": 0.809, "y": 0 },
-                  "t": 0,
-                  "s": [450, 391, 0],
-                  "to": [0, 0, 0],
-                  "ti": [0, 0, 0]
-                },
-                { "t": 30, "s": [450, 997, 0] }
-              ],
-              "ix": 2
-            },
-            "a": { "a": 0, "k": [-348, -169, 0], "ix": 1 },
-            "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
-          },
-          "ao": 0,
-          "shapes": [
-            {
-              "ty": "gr",
-              "it": [
-                {
-                  "ind": 0,
-                  "ty": "sh",
-                  "ix": 1,
-                  "ks": {
-                    "a": 0,
-                    "k": {
-                      "i": [
-                        [0, 0],
-                        [0, 0]
-                      ],
-                      "o": [
-                        [0, 0],
-                        [0, 0]
-                      ],
-                      "v": [
-                        [-348, -420],
-                        [-348, -30]
-                      ],
-                      "c": false
-                    },
-                    "ix": 2
-                  },
-                  "nm": "Path 1",
-                  "mn": "ADBE Vector Shape - Group",
-                  "hd": false
-                },
-                {
-                  "ty": "st",
-                  "c": {
-                    "a": 0,
-                    "k": [0.854901960784, 0.858823529412, 0.882352941176, 1],
-                    "ix": 3
-                  },
-                  "o": { "a": 0, "k": 100, "ix": 4 },
-                  "w": { "a": 0, "k": 77, "ix": 5 },
-                  "lc": 2,
-                  "lj": 1,
-                  "ml": 4,
-                  "bm": 0,
-                  "nm": "Stroke 1",
-                  "mn": "ADBE Vector Graphic - Stroke",
-                  "hd": false
-                },
-                {
-                  "ty": "tr",
-                  "p": { "a": 0, "k": [-348, -164], "ix": 2 },
-                  "a": { "a": 0, "k": [-348, -156], "ix": 1 },
-                  "s": { "a": 0, "k": [100, 100], "ix": 3 },
-                  "r": { "a": 0, "k": 0, "ix": 6 },
-                  "o": { "a": 0, "k": 100, "ix": 7 },
-                  "sk": { "a": 0, "k": 0, "ix": 4 },
-                  "sa": { "a": 0, "k": 0, "ix": 5 },
-                  "nm": "Transform"
-                }
-              ],
-              "nm": "Shape 1",
-              "np": 3,
-              "cix": 2,
-              "bm": 0,
-              "ix": 1,
-              "mn": "ADBE Vector Group",
-              "hd": false
-            }
-          ],
-          "ip": 0,
-          "op": 120,
-          "st": 0,
-          "bm": 0
-        },
-        {
-          "ddd": 0,
-          "ind": 2,
-          "ty": 4,
-          "nm": "esquerdo",
-          "parent": 1,
-          "sr": 1,
-          "ks": {
-            "o": { "a": 0, "k": 100, "ix": 11 },
-            "r": {
-              "a": 1,
-              "k": [
-                {
-                  "i": { "x": [0.552], "y": [1] },
-                  "o": { "x": [0.702], "y": [0] },
-                  "t": 0,
-                  "s": [-1]
-                },
-                { "t": 30, "s": [43.5] }
-              ],
-              "ix": 10
-            },
-            "p": { "a": 0, "k": [-348.39, -36.55, 0], "ix": 2 },
-            "a": { "a": 0, "k": [-2, 84, 0], "ix": 1 },
-            "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
-          },
-          "ao": 0,
-          "shapes": [
-            {
-              "ty": "gr",
-              "it": [
-                {
-                  "ind": 0,
-                  "ty": "sh",
-                  "ix": 1,
-                  "ks": {
-                    "a": 0,
-                    "k": {
-                      "i": [
-                        [0, 0],
-                        [0, 0]
-                      ],
-                      "o": [
-                        [0, 0],
-                        [0, 0]
-                      ],
-                      "v": [
-                        [-178, -102],
-                        [-2, 84]
-                      ],
-                      "c": false
-                    },
-                    "ix": 2
-                  },
-                  "nm": "Path 1",
-                  "mn": "ADBE Vector Shape - Group",
-                  "hd": false
-                },
-                {
-                  "ty": "st",
-                  "c": {
-                    "a": 0,
-                    "k": [0.854901960784, 0.858823529412, 0.882352941176, 1],
-                    "ix": 3
-                  },
-                  "o": { "a": 0, "k": 100, "ix": 4 },
-                  "w": { "a": 0, "k": 77, "ix": 5 },
-                  "lc": 2,
-                  "lj": 1,
-                  "ml": 4,
-                  "bm": 0,
-                  "nm": "Stroke 1",
-                  "mn": "ADBE Vector Graphic - Stroke",
-                  "hd": false
-                },
-                {
-                  "ty": "tr",
-                  "p": { "a": 0, "k": [0, 0], "ix": 2 },
-                  "a": { "a": 0, "k": [0, 0], "ix": 1 },
-                  "s": { "a": 0, "k": [100, 100], "ix": 3 },
-                  "r": { "a": 0, "k": 0, "ix": 6 },
-                  "o": { "a": 0, "k": 100, "ix": 7 },
-                  "sk": { "a": 0, "k": 0, "ix": 4 },
-                  "sa": { "a": 0, "k": 0, "ix": 5 },
-                  "nm": "Transform"
-                }
-              ],
-              "nm": "Shape 1",
-              "np": 3,
-              "cix": 2,
-              "bm": 0,
-              "ix": 1,
-              "mn": "ADBE Vector Group",
-              "hd": false
-            },
-            {
-              "ty": "tm",
-              "s": { "a": 0, "k": 8, "ix": 1 },
-              "e": { "a": 0, "k": 100, "ix": 2 },
-              "o": { "a": 0, "k": 0, "ix": 3 },
-              "m": 1,
-              "ix": 2,
-              "nm": "Trim Paths 1",
-              "mn": "ADBE Vector Filter - Trim",
-              "hd": false
-            }
-          ],
-          "ip": 0,
-          "op": 120,
-          "st": 0,
-          "bm": 0
-        },
-        {
-          "ddd": 0,
-          "ind": 3,
-          "ty": 4,
-          "nm": "direito",
-          "parent": 1,
-          "sr": 1,
-          "ks": {
-            "o": { "a": 0, "k": 100, "ix": 11 },
-            "r": {
-              "a": 1,
-              "k": [
-                {
-                  "i": { "x": [0.47], "y": [1] },
-                  "o": { "x": [0.735], "y": [0] },
-                  "t": 0,
-                  "s": [1]
-                },
-                { "t": 30, "s": [-43.5] }
-              ],
-              "ix": 10
-            },
-            "p": { "a": 0, "k": [-348.39, -36.55, 0], "ix": 2 },
-            "a": { "a": 0, "k": [-2, 84, 0], "ix": 1 },
-            "s": { "a": 0, "k": [-100, 100, 100], "ix": 6 }
-          },
-          "ao": 0,
-          "shapes": [
-            {
-              "ty": "gr",
-              "it": [
-                {
-                  "ind": 0,
-                  "ty": "sh",
-                  "ix": 1,
-                  "ks": {
-                    "a": 0,
-                    "k": {
-                      "i": [
-                        [0, 0],
-                        [0, 0]
-                      ],
-                      "o": [
-                        [0, 0],
-                        [0, 0]
-                      ],
-                      "v": [
-                        [-178, -102],
-                        [-2, 84]
-                      ],
-                      "c": false
-                    },
-                    "ix": 2
-                  },
-                  "nm": "Path 1",
-                  "mn": "ADBE Vector Shape - Group",
-                  "hd": false
-                },
-                {
-                  "ty": "tm",
-                  "s": { "a": 0, "k": 8, "ix": 1 },
-                  "e": { "a": 0, "k": 100, "ix": 2 },
-                  "o": { "a": 0, "k": 0, "ix": 3 },
-                  "m": 1,
-                  "ix": 2,
-                  "nm": "Trim Paths 1",
-                  "mn": "ADBE Vector Filter - Trim",
-                  "hd": false
-                },
-                {
-                  "ty": "st",
-                  "c": {
-                    "a": 0,
-                    "k": [0.854901960784, 0.858823529412, 0.882352941176, 1],
-                    "ix": 3
-                  },
-                  "o": { "a": 0, "k": 100, "ix": 4 },
-                  "w": { "a": 0, "k": 77, "ix": 5 },
-                  "lc": 2,
-                  "lj": 1,
-                  "ml": 4,
-                  "bm": 0,
-                  "nm": "Stroke 1",
-                  "mn": "ADBE Vector Graphic - Stroke",
-                  "hd": false
-                },
-                {
-                  "ty": "tr",
-                  "p": { "a": 0, "k": [0, 0], "ix": 2 },
-                  "a": { "a": 0, "k": [0, 0], "ix": 1 },
-                  "s": { "a": 0, "k": [100, 100], "ix": 3 },
-                  "r": { "a": 0, "k": 0, "ix": 6 },
-                  "o": { "a": 0, "k": 100, "ix": 7 },
-                  "sk": { "a": 0, "k": 0, "ix": 4 },
-                  "sa": { "a": 0, "k": 0, "ix": 5 },
-                  "nm": "Transform"
-                }
-              ],
-              "nm": "Shape 1",
-              "np": 4,
-              "cix": 2,
-              "bm": 0,
-              "ix": 1,
-              "mn": "ADBE Vector Group",
-              "hd": false
-            }
-          ],
-          "ip": 0,
-          "op": 120,
-          "st": 0,
-          "bm": 0
-        }
-      ]
-    }
-  ],
-  "layers": [
-    {
-      "ddd": 0,
-      "ind": 1,
-      "ty": 0,
-      "nm": "seta 2",
-      "refId": "comp_0",
-      "sr": 1,
-      "ks": {
-        "o": { "a": 0, "k": 100, "ix": 11 },
-        "r": { "a": 0, "k": 0, "ix": 10 },
-        "p": { "a": 0, "k": [357, -247, 0], "ix": 2 },
-        "a": { "a": 0, "k": [450, 960, 0], "ix": 1 },
-        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
-      },
-      "ao": 0,
-      "w": 900,
-      "h": 1920,
-      "ip": 30,
-      "op": 120,
-      "st": 30,
-      "bm": 0
-    },
-    {
-      "ddd": 0,
-      "ind": 2,
-      "ty": 0,
-      "nm": "seta",
-      "refId": "comp_1",
-      "sr": 1,
-      "ks": {
-        "o": { "a": 0, "k": 100, "ix": 11 },
-        "r": { "a": 0, "k": 0, "ix": 10 },
-        "p": { "a": 0, "k": [357, 258, 0], "ix": 2 },
-        "a": { "a": 0, "k": [450, 345, 0], "ix": 1 },
-        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
-      },
-      "ao": 0,
-      "w": 900,
-      "h": 690,
-      "ip": 0,
-      "op": 120,
-      "st": 0,
-      "bm": 0
-    },
-    {
-      "ddd": 0,
-      "ind": 3,
-      "ty": 4,
-      "nm": "base Outlines",
-      "sr": 1,
-      "ks": {
-        "o": { "a": 0, "k": 100, "ix": 11 },
-        "r": { "a": 0, "k": 0, "ix": 10 },
-        "p": { "a": 0, "k": [357, 548.713, 0], "ix": 2 },
-        "a": { "a": 0, "k": [357.81, 129.934, 0], "ix": 1 },
-        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
-      },
-      "ao": 0,
-      "shapes": [
-        {
-          "ty": "gr",
-          "it": [
-            {
-              "ind": 0,
-              "ty": "sh",
-              "ix": 1,
-              "ks": {
-                "a": 0,
-                "k": {
-                  "i": [
-                    [0, 0],
-                    [0, 50.043],
-                    [0, 0],
-                    [-21.158, 0],
-                    [0, -21.447],
-                    [0, 0],
-                    [-7.049, 0],
-                    [0, 0],
-                    [0, 7.149],
-                    [0, 0],
-                    [-21.158, 0],
-                    [0, -21.447],
-                    [0, 0],
-                    [49.368, 0]
-                  ],
-                  "o": [
-                    [-49.369, 0],
-                    [0, 0],
-                    [0, -21.447],
-                    [21.158, 0],
-                    [0, 0],
-                    [0, 7.145],
-                    [0, 0],
-                    [7.053, 0],
-                    [0, 0],
-                    [0, -21.447],
-                    [21.158, 0],
-                    [0, 0],
-                    [0, 50.043],
-                    [0, 0]
-                  ],
-                  "v": [
-                    [-268.169, 129.445],
-                    [-357.559, 38.834],
-                    [-357.559, -90.61],
-                    [-319.249, -129.445],
-                    [-280.939, -90.61],
-                    [-280.939, 38.834],
-                    [-268.169, 51.778],
-                    [268.169, 51.778],
-                    [280.939, 38.834],
-                    [280.939, -90.61],
-                    [319.249, -129.445],
-                    [357.559, -90.61],
-                    [357.559, 38.834],
-                    [268.169, 129.445]
-                  ],
-                  "c": true
-                },
-                "ix": 2
-              },
-              "nm": "Path 1",
-              "mn": "ADBE Vector Shape - Group",
-              "hd": false
-            },
-            {
-              "ty": "fl",
-              "c": {
-                "a": 0,
-                "k": [0.865977448108, 0.86824388691, 0.890449075138, 1],
-                "ix": 4
-              },
-              "o": { "a": 0, "k": 100, "ix": 5 },
-              "r": 1,
-              "bm": 0,
-              "nm": "Fill 1",
-              "mn": "ADBE Vector Graphic - Fill",
-              "hd": false
-            },
-            {
-              "ty": "tr",
-              "p": { "a": 0, "k": [357.809, 129.695], "ix": 2 },
-              "a": { "a": 0, "k": [0, 0], "ix": 1 },
-              "s": { "a": 0, "k": [100, 100], "ix": 3 },
-              "r": { "a": 0, "k": 0, "ix": 6 },
-              "o": { "a": 0, "k": 100, "ix": 7 },
-              "sk": { "a": 0, "k": 0, "ix": 4 },
-              "sa": { "a": 0, "k": 0, "ix": 5 },
-              "nm": "Transform"
-            }
-          ],
-          "nm": "Group 1",
-          "np": 2,
-          "cix": 2,
-          "bm": 0,
-          "ix": 1,
-          "mn": "ADBE Vector Group",
-          "hd": false
-        }
-      ],
-      "ip": 0,
-      "op": 120,
-      "st": 0,
-      "bm": 0
-    }
-  ],
-  "markers": []
-}

src/renderer/src/assets/lottie/stars.json

@@ -1,928 +0,0 @@
-{
-  "v": "4.8.0",
-  "meta": { "g": "LottieFiles AE 3.5.6", "a": "", "k": "", "d": "", "tc": "" },
-  "fr": 60,
-  "ip": 0,
-  "op": 120,
-  "w": 300,
-  "h": 300,
-  "nm": "Comp 1",
-  "ddd": 0,
-  "assets": [
-    {
-      "id": "comp_0",
-      "layers": [
-        {
-          "ddd": 0,
-          "ind": 1,
-          "ty": 5,
-          "nm": "3",
-          "sr": 1,
-          "ks": {
-            "o": { "a": 0, "k": 100, "ix": 11 },
-            "r": {
-              "a": 1,
-              "k": [
-                {
-                  "i": { "x": [0.055], "y": [1] },
-                  "o": { "x": [0.333], "y": [0] },
-                  "t": 0,
-                  "s": [0]
-                },
-                {
-                  "i": { "x": [0.055], "y": [1] },
-                  "o": { "x": [0.333], "y": [0] },
-                  "t": 30,
-                  "s": [8]
-                },
-                { "t": 60, "s": [0] }
-              ],
-              "ix": 10
-            },
-            "p": { "a": 0, "k": [930, 525, 0], "ix": 2 },
-            "a": { "a": 0, "k": [16.605, -23.904, 0], "ix": 1 },
-            "s": { "a": 0, "k": [170, 170, 100], "ix": 6 }
-          },
-          "ao": 0,
-          "hasMask": true,
-          "masksProperties": [
-            {
-              "inv": false,
-              "mode": "a",
-              "pt": {
-                "a": 0,
-                "k": {
-                  "i": [
-                    [0, 0],
-                    [0, 0],
-                    [0, 0],
-                    [0, 0],
-                    [0, 0],
-                    [0, 0]
-                  ],
-                  "o": [
-                    [0, 0],
-                    [0, 0],
-                    [0, 0],
-                    [0, 0],
-                    [0, 0],
-                    [0, 0]
-                  ],
-                  "v": [
-                    [14.987, -34.426],
-                    [9.105, -30.309],
-                    [9.987, -22.073],
-                    [17.487, -16.779],
-                    [24.105, -23.544],
-                    [22.193, -30.603]
-                  ],
-                  "c": true
-                },
-                "ix": 1
-              },
-              "o": { "a": 0, "k": 100, "ix": 3 },
-              "x": { "a": 0, "k": 0, "ix": 4 },
-              "nm": "Mask 1"
-            }
-          ],
-          "ef": [
-            {
-              "ty": 21,
-              "nm": "Fill",
-              "np": 9,
-              "mn": "ADBE Fill",
-              "ix": 1,
-              "en": 1,
-              "ef": [
-                {
-                  "ty": 10,
-                  "nm": "Fill Mask",
-                  "mn": "ADBE Fill-0001",
-                  "ix": 1,
-                  "v": { "a": 0, "k": 0, "ix": 1 }
-                },
-                {
-                  "ty": 7,
-                  "nm": "All Masks",
-                  "mn": "ADBE Fill-0007",
-                  "ix": 2,
-                  "v": { "a": 0, "k": 0, "ix": 2 }
-                },
-                {
-                  "ty": 2,
-                  "nm": "Color",
-                  "mn": "ADBE Fill-0002",
-                  "ix": 3,
-                  "v": {
-                    "a": 0,
-                    "k": [0.992156863213, 0.880375564098, 0.128396704793, 1],
-                    "ix": 3
-                  }
-                },
-                {
-                  "ty": 7,
-                  "nm": "Invert",
-                  "mn": "ADBE Fill-0006",
-                  "ix": 4,
-                  "v": { "a": 0, "k": 0, "ix": 4 }
-                },
-                {
-                  "ty": 0,
-                  "nm": "Horizontal Feather",
-                  "mn": "ADBE Fill-0003",
-                  "ix": 5,
-                  "v": { "a": 0, "k": 0, "ix": 5 }
-                },
-                {
-                  "ty": 0,
-                  "nm": "Vertical Feather",
-                  "mn": "ADBE Fill-0004",
-                  "ix": 6,
-                  "v": { "a": 0, "k": 0, "ix": 6 }
-                },
-                {
-                  "ty": 0,
-                  "nm": "Opacity",
-                  "mn": "ADBE Fill-0005",
-                  "ix": 7,
-                  "v": { "a": 0, "k": 1, "ix": 7 }
-                }
-              ]
-            }
-          ],
-          "t": {
-            "d": {
-              "k": [
-                {
-                  "s": {
-                    "s": 40,
-                    "f": "SegoeUIEmoji",
-                    "t": "✨",
-                    "j": 0,
-                    "tr": 0,
-                    "lh": 48,
-                    "ls": 0,
-                    "fc": [1, 1, 1]
-                  },
-                  "t": 0
-                }
-              ]
-            },
-            "p": {},
-            "m": { "g": 1, "a": { "a": 0, "k": [0, 0], "ix": 2 } },
-            "a": []
-          },
-          "ip": 0,
-          "op": 123,
-          "st": 0,
-          "bm": 0
-        },
-        {
-          "ddd": 0,
-          "ind": 2,
-          "ty": 5,
-          "nm": "2",
-          "sr": 1,
-          "ks": {
-            "o": { "a": 0, "k": 100, "ix": 11 },
-            "r": {
-              "a": 1,
-              "k": [
-                {
-                  "i": { "x": [0.055], "y": [1] },
-                  "o": { "x": [0.333], "y": [0] },
-                  "t": 0,
-                  "s": [0]
-                },
-                {
-                  "i": { "x": [0.055], "y": [1] },
-                  "o": { "x": [0.333], "y": [0] },
-                  "t": 30,
-                  "s": [-8]
-                },
-                { "t": 60, "s": [0] }
-              ],
-              "ix": 10
-            },
-            "p": { "a": 0, "k": [960, 540, 0], "ix": 2 },
-            "a": { "a": 0, "k": [31.912, -13.397, 0], "ix": 1 },
-            "s": { "a": 0, "k": [170, 170, 100], "ix": 6 }
-          },
-          "ao": 0,
-          "hasMask": true,
-          "masksProperties": [
-            {
-              "inv": false,
-              "mode": "a",
-              "pt": {
-                "a": 0,
-                "k": {
-                  "i": [
-                    [0, 0],
-                    [0, 0],
-                    [0, 0],
-                    [0, 0],
-                    [0, 0],
-                    [0, 0],
-                    [0, 0],
-                    [0, 0],
-                    [0, 0]
-                  ],
-                  "o": [
-                    [0, 0],
-                    [0, 0],
-                    [0, 0],
-                    [0, 0],
-                    [0, 0],
-                    [0, 0],
-                    [0, 0],
-                    [0, 0],
-                    [0, 0]
-                  ],
-                  "v": [
-                    [31.31, -34.72],
-                    [24.546, -22.514],
-                    [16.605, -16.485],
-                    [17.046, -11.338],
-                    [21.163, -7.073],
-                    [27.487, -0.309],
-                    [33.663, 10.133],
-                    [47.634, -1.926],
-                    [51.31, -12.073]
-                  ],
-                  "c": true
-                },
-                "ix": 1
-              },
-              "o": { "a": 0, "k": 100, "ix": 3 },
-              "x": { "a": 0, "k": 0, "ix": 4 },
-              "nm": "Mask 1"
-            }
-          ],
-          "ef": [
-            {
-              "ty": 21,
-              "nm": "Fill",
-              "np": 9,
-              "mn": "ADBE Fill",
-              "ix": 1,
-              "en": 1,
-              "ef": [
-                {
-                  "ty": 10,
-                  "nm": "Fill Mask",
-                  "mn": "ADBE Fill-0001",
-                  "ix": 1,
-                  "v": { "a": 0, "k": 0, "ix": 1 }
-                },
-                {
-                  "ty": 7,
-                  "nm": "All Masks",
-                  "mn": "ADBE Fill-0007",
-                  "ix": 2,
-                  "v": { "a": 0, "k": 0, "ix": 2 }
-                },
-                {
-                  "ty": 2,
-                  "nm": "Color",
-                  "mn": "ADBE Fill-0002",
-                  "ix": 3,
-                  "v": {
-                    "a": 0,
-                    "k": [0.992156863213, 0.880375564098, 0.128396704793, 1],
-                    "ix": 3
-                  }
-                },
-                {
-                  "ty": 7,
-                  "nm": "Invert",
-                  "mn": "ADBE Fill-0006",
-                  "ix": 4,
-                  "v": { "a": 0, "k": 0, "ix": 4 }
-                },
-                {
-                  "ty": 0,
-                  "nm": "Horizontal Feather",
-                  "mn": "ADBE Fill-0003",
-                  "ix": 5,
-                  "v": { "a": 0, "k": 0, "ix": 5 }
-                },
-                {
-                  "ty": 0,
-                  "nm": "Vertical Feather",
-                  "mn": "ADBE Fill-0004",
-                  "ix": 6,
-                  "v": { "a": 0, "k": 0, "ix": 6 }
-                },
-                {
-                  "ty": 0,
-                  "nm": "Opacity",
-                  "mn": "ADBE Fill-0005",
-                  "ix": 7,
-                  "v": { "a": 0, "k": 1, "ix": 7 }
-                }
-              ]
-            }
-          ],
-          "t": {
-            "d": {
-              "k": [
-                {
-                  "s": {
-                    "s": 40,
-                    "f": "SegoeUIEmoji",
-                    "t": "✨",
-                    "j": 0,
-                    "tr": 0,
-                    "lh": 48,
-                    "ls": 0,
-                    "fc": [1, 1, 1]
-                  },
-                  "t": 0
-                }
-              ]
-            },
-            "p": {},
-            "m": { "g": 1, "a": { "a": 0, "k": [0, 0], "ix": 2 } },
-            "a": []
-          },
-          "ip": 0,
-          "op": 123,
-          "st": 0,
-          "bm": 0
-        },
-        {
-          "ddd": 0,
-          "ind": 3,
-          "ty": 5,
-          "nm": "✨",
-          "sr": 1,
-          "ks": {
-            "o": { "a": 0, "k": 100, "ix": 11 },
-            "r": {
-              "a": 1,
-              "k": [
-                {
-                  "i": { "x": [0.055], "y": [1] },
-                  "o": { "x": [0.333], "y": [0] },
-                  "t": 0,
-                  "s": [0]
-                },
-                {
-                  "i": { "x": [0.055], "y": [1] },
-                  "o": { "x": [0.333], "y": [0] },
-                  "t": 30,
-                  "s": [8]
-                },
-                { "t": 60, "s": [0] }
-              ],
-              "ix": 10
-            },
-            "p": { "a": 0, "k": [935, 560, 0], "ix": 2 },
-            "a": { "a": 0, "k": [14.973, -6.64, 0], "ix": 1 },
-            "s": { "a": 0, "k": [170, 170, 100], "ix": 6 }
-          },
-          "ao": 0,
-          "hasMask": true,
-          "masksProperties": [
-            {
-              "inv": false,
-              "mode": "a",
-              "pt": {
-                "a": 0,
-                "k": {
-                  "i": [
-                    [0, 0],
-                    [0, 0],
-                    [0, 0],
-                    [0, 0],
-                    [0, 0],
-                    [0, 0],
-                    [0, 0]
-                  ],
-                  "o": [
-                    [0, 0],
-                    [0, 0],
-                    [0, 0],
-                    [0, 0],
-                    [0, 0],
-                    [0, 0],
-                    [0, 0]
-                  ],
-                  "v": [
-                    [13.957, -17.514],
-                    [2.928, -9.132],
-                    [2.487, 1.603],
-                    [14.105, 7.339],
-                    [21.605, -0.161],
-                    [22.193, -5.161],
-                    [17.34, -10.014]
-                  ],
-                  "c": true
-                },
-                "ix": 1
-              },
-              "o": { "a": 0, "k": 100, "ix": 3 },
-              "x": { "a": 0, "k": 0, "ix": 4 },
-              "nm": "Mask 1"
-            }
-          ],
-          "ef": [
-            {
-              "ty": 21,
-              "nm": "Fill",
-              "np": 9,
-              "mn": "ADBE Fill",
-              "ix": 1,
-              "en": 1,
-              "ef": [
-                {
-                  "ty": 10,
-                  "nm": "Fill Mask",
-                  "mn": "ADBE Fill-0001",
-                  "ix": 1,
-                  "v": { "a": 0, "k": 0, "ix": 1 }
-                },
-                {
-                  "ty": 7,
-                  "nm": "All Masks",
-                  "mn": "ADBE Fill-0007",
-                  "ix": 2,
-                  "v": { "a": 0, "k": 0, "ix": 2 }
-                },
-                {
-                  "ty": 2,
-                  "nm": "Color",
-                  "mn": "ADBE Fill-0002",
-                  "ix": 3,
-                  "v": {
-                    "a": 0,
-                    "k": [0.992156863213, 0.880375564098, 0.128396704793, 1],
-                    "ix": 3
-                  }
-                },
-                {
-                  "ty": 7,
-                  "nm": "Invert",
-                  "mn": "ADBE Fill-0006",
-                  "ix": 4,
-                  "v": { "a": 0, "k": 0, "ix": 4 }
-                },
-                {
-                  "ty": 0,
-                  "nm": "Horizontal Feather",
-                  "mn": "ADBE Fill-0003",
-                  "ix": 5,
-                  "v": { "a": 0, "k": 0, "ix": 5 }
-                },
-                {
-                  "ty": 0,
-                  "nm": "Vertical Feather",
-                  "mn": "ADBE Fill-0004",
-                  "ix": 6,
-                  "v": { "a": 0, "k": 0, "ix": 6 }
-                },
-                {
-                  "ty": 0,
-                  "nm": "Opacity",
-                  "mn": "ADBE Fill-0005",
-                  "ix": 7,
-                  "v": { "a": 0, "k": 1, "ix": 7 }
-                }
-              ]
-            }
-          ],
-          "t": {
-            "d": {
-              "k": [
-                {
-                  "s": {
-                    "s": 40,
-                    "f": "SegoeUIEmoji",
-                    "t": "✨",
-                    "j": 0,
-                    "tr": 0,
-                    "lh": 48,
-                    "ls": 0,
-                    "fc": [1, 1, 1]
-                  },
-                  "t": 0
-                }
-              ]
-            },
-            "p": {},
-            "m": { "g": 1, "a": { "a": 0, "k": [0, 0], "ix": 2 } },
-            "a": []
-          },
-          "ip": 0,
-          "op": 123,
-          "st": 0,
-          "bm": 0
-        }
-      ]
-    }
-  ],
-  "fonts": {
-    "list": [
-      {
-        "fName": "SegoeUIEmoji",
-        "fFamily": "Segoe UI Emoji",
-        "fStyle": "Regular",
-        "ascent": 74.0234375
-      }
-    ]
-  },
-  "layers": [
-    {
-      "ddd": 0,
-      "ind": 1,
-      "ty": 0,
-      "nm": "botão",
-      "refId": "comp_0",
-      "sr": 1,
-      "ks": {
-        "o": { "a": 0, "k": 100, "ix": 11 },
-        "r": { "a": 0, "k": 0, "ix": 10 },
-        "p": { "a": 0, "k": [155, 154, 0], "ix": 2 },
-        "a": { "a": 0, "k": [960, 540, 0], "ix": 1 },
-        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
-      },
-      "ao": 0,
-      "ef": [
-        {
-          "ty": 25,
-          "nm": "Drop Shadow",
-          "np": 8,
-          "mn": "ADBE Drop Shadow",
-          "ix": 1,
-          "en": 1,
-          "ef": [
-            {
-              "ty": 2,
-              "nm": "Shadow Color",
-              "mn": "ADBE Drop Shadow-0001",
-              "ix": 1,
-              "v": {
-                "a": 0,
-                "k": [1, 0.829733371735, 0.414901971817, 1],
-                "ix": 1
-              }
-            },
-            {
-              "ty": 0,
-              "nm": "Opacity",
-              "mn": "ADBE Drop Shadow-0002",
-              "ix": 2,
-              "v": {
-                "a": 1,
-                "k": [
-                  {
-                    "i": { "x": [0], "y": [1] },
-                    "o": { "x": [0.333], "y": [0] },
-                    "t": 0,
-                    "s": [127.5]
-                  },
-                  {
-                    "i": { "x": [0], "y": [1] },
-                    "o": { "x": [0.333], "y": [0] },
-                    "t": 15,
-                    "s": [204]
-                  },
-                  {
-                    "i": { "x": [0], "y": [1] },
-                    "o": { "x": [0.333], "y": [0] },
-                    "t": 30,
-                    "s": [127.5]
-                  },
-                  {
-                    "i": { "x": [0], "y": [1] },
-                    "o": { "x": [0.333], "y": [0] },
-                    "t": 45,
-                    "s": [204]
-                  },
-                  { "t": 70, "s": [76.5] }
-                ],
-                "ix": 2
-              }
-            },
-            {
-              "ty": 0,
-              "nm": "Direction",
-              "mn": "ADBE Drop Shadow-0003",
-              "ix": 3,
-              "v": { "a": 0, "k": 135, "ix": 3 }
-            },
-            {
-              "ty": 0,
-              "nm": "Distance",
-              "mn": "ADBE Drop Shadow-0004",
-              "ix": 4,
-              "v": { "a": 0, "k": 0, "ix": 4 }
-            },
-            {
-              "ty": 0,
-              "nm": "Softness",
-              "mn": "ADBE Drop Shadow-0005",
-              "ix": 5,
-              "v": { "a": 0, "k": 40, "ix": 5 }
-            },
-            {
-              "ty": 7,
-              "nm": "Shadow Only",
-              "mn": "ADBE Drop Shadow-0006",
-              "ix": 6,
-              "v": { "a": 0, "k": 0, "ix": 6 }
-            }
-          ]
-        }
-      ],
-      "w": 1920,
-      "h": 1080,
-      "ip": 0,
-      "op": 120,
-      "st": 0,
-      "bm": 0
-    }
-  ],
-  "markers": [],
-  "chars": [
-    {
-      "ch": "✨",
-      "size": 40,
-      "style": "Regular",
-      "w": 137.3,
-      "data": {
-        "shapes": [
-          {
-            "ty": "gr",
-            "it": [
-              {
-                "ind": 0,
-                "ty": "sh",
-                "ix": 1,
-                "ks": {
-                  "a": 0,
-                  "k": {
-                    "i": [
-                      [0.423, 1.042],
-                      [0, 0],
-                      [0.7, 0],
-                      [0.293, -0.618],
-                      [0, 0],
-                      [1.041, -0.488],
-                      [0, 0],
-                      [0, -0.684],
-                      [-0.652, -0.293],
-                      [0, 0],
-                      [-0.423, -1.041],
-                      [0, 0],
-                      [-0.716, 0],
-                      [-0.293, 0.619],
-                      [0, 0],
-                      [-1.042, 0.488],
-                      [0, 0],
-                      [0, 0.684],
-                      [0.618, 0.293],
-                      [0, 0]
-                    ],
-                    "o": [
-                      [0, 0],
-                      [-0.326, -0.618],
-                      [-0.7, 0],
-                      [0, 0],
-                      [-0.456, 1.009],
-                      [0, 0],
-                      [-0.652, 0.293],
-                      [0, 0.684],
-                      [0, 0],
-                      [1.074, 0.456],
-                      [0, 0],
-                      [0.293, 0.619],
-                      [0.716, 0],
-                      [0, 0],
-                      [0.455, -1.009],
-                      [0, 0],
-                      [0.618, -0.293],
-                      [0, -0.684],
-                      [0, 0],
-                      [-1.074, -0.455]
-                    ],
-                    "v": [
-                      [47.119, -68.994],
-                      [43.799, -76.562],
-                      [42.261, -77.49],
-                      [40.771, -76.562],
-                      [37.402, -68.994],
-                      [35.156, -66.748],
-                      [30.908, -64.893],
-                      [29.932, -63.428],
-                      [30.908, -61.963],
-                      [35.156, -60.107],
-                      [37.402, -57.861],
-                      [40.771, -50.244],
-                      [42.285, -49.316],
-                      [43.799, -50.244],
-                      [47.119, -57.861],
-                      [49.365, -60.107],
-                      [53.662, -61.963],
-                      [54.59, -63.428],
-                      [53.662, -64.893],
-                      [49.365, -66.748]
-                    ],
-                    "c": true
-                  },
-                  "ix": 2
-                },
-                "nm": "✨",
-                "mn": "ADBE Vector Shape - Group",
-                "hd": false
-              },
-              {
-                "ind": 1,
-                "ty": "sh",
-                "ix": 2,
-                "ks": {
-                  "a": 0,
-                  "k": {
-                    "i": [
-                      [1.334, 3.223],
-                      [0, 0],
-                      [1.204, 0.423],
-                      [1.204, -0.423],
-                      [0.618, -1.237],
-                      [0, 0],
-                      [3.125, -1.432],
-                      [0, 0],
-                      [0.423, -1.221],
-                      [-0.423, -1.221],
-                      [-1.27, -0.618],
-                      [0, 0],
-                      [-1.335, -3.223],
-                      [0, 0],
-                      [-1.205, -0.407],
-                      [-1.205, 0.407],
-                      [-0.619, 1.27],
-                      [0, 0],
-                      [-3.125, 1.433],
-                      [0, 0],
-                      [-0.423, 1.221],
-                      [0.423, 1.221],
-                      [1.27, 0.619],
-                      [0, 0]
-                    ],
-                    "o": [
-                      [0, 0],
-                      [-0.619, -1.237],
-                      [-1.205, -0.423],
-                      [-1.205, 0.423],
-                      [0, 0],
-                      [-1.367, 3.223],
-                      [0, 0],
-                      [-1.27, 0.619],
-                      [-0.423, 1.221],
-                      [0.423, 1.221],
-                      [0, 0],
-                      [3.157, 1.433],
-                      [0, 0],
-                      [0.618, 1.27],
-                      [1.204, 0.407],
-                      [1.204, -0.407],
-                      [0, 0],
-                      [1.367, -3.223],
-                      [0, 0],
-                      [1.27, -0.618],
-                      [0.423, -1.221],
-                      [-0.423, -1.221],
-                      [0, 0],
-                      [-3.158, -1.432]
-                    ],
-                    "v": [
-                      [95.605, -50.83],
-                      [85.498, -74.658],
-                      [82.764, -77.148],
-                      [79.15, -77.148],
-                      [76.416, -74.658],
-                      [66.357, -50.83],
-                      [59.619, -43.848],
-                      [46.875, -38.086],
-                      [44.336, -35.327],
-                      [44.336, -31.665],
-                      [46.875, -28.906],
-                      [59.619, -23.145],
-                      [66.357, -16.162],
-                      [76.416, 7.666],
-                      [79.15, 10.181],
-                      [82.764, 10.181],
-                      [85.498, 7.666],
-                      [95.605, -16.162],
-                      [102.344, -23.145],
-                      [115.088, -28.906],
-                      [117.627, -31.665],
-                      [117.627, -35.327],
-                      [115.088, -38.086],
-                      [102.344, -43.848]
-                    ],
-                    "c": true
-                  },
-                  "ix": 2
-                },
-                "nm": "✨",
-                "mn": "ADBE Vector Shape - Group",
-                "hd": false
-              },
-              {
-                "ind": 2,
-                "ty": "sh",
-                "ix": 3,
-                "ks": {
-                  "a": 0,
-                  "k": {
-                    "i": [
-                      [-1.367, -0.651],
-                      [0, 0],
-                      [0, -0.928],
-                      [0.813, -0.423],
-                      [0, 0],
-                      [0.586, -1.399],
-                      [0, 0],
-                      [0.895, 0],
-                      [0.391, 0.846],
-                      [0, 0],
-                      [1.334, 0.652],
-                      [0, 0],
-                      [0, 0.928],
-                      [-0.814, 0.423],
-                      [0, 0],
-                      [-0.586, 1.4],
-                      [0, 0],
-                      [-0.896, 0],
-                      [-0.391, -0.846],
-                      [0, 0]
-                    ],
-                    "o": [
-                      [0, 0],
-                      [0.813, 0.423],
-                      [0, 0.928],
-                      [0, 0],
-                      [-1.335, 0.652],
-                      [0, 0],
-                      [-0.391, 0.846],
-                      [-0.896, 0],
-                      [0, 0],
-                      [-0.586, -1.399],
-                      [0, 0],
-                      [-0.814, -0.423],
-                      [0, -0.928],
-                      [0, 0],
-                      [1.334, -0.651],
-                      [0, 0],
-                      [0.391, -0.846],
-                      [0.895, 0],
-                      [0, 0],
-                      [0.553, 1.4]
-                    ],
-                    "v": [
-                      [44.385, -16.943],
-                      [49.854, -14.404],
-                      [51.074, -12.378],
-                      [49.854, -10.352],
-                      [44.385, -7.812],
-                      [41.504, -4.736],
-                      [37.158, 5.713],
-                      [35.229, 6.982],
-                      [33.301, 5.713],
-                      [28.955, -4.736],
-                      [26.074, -7.812],
-                      [20.605, -10.352],
-                      [19.385, -12.378],
-                      [20.605, -14.404],
-                      [26.074, -16.943],
-                      [28.955, -20.02],
-                      [33.301, -30.469],
-                      [35.229, -31.738],
-                      [37.158, -30.469],
-                      [41.504, -20.02]
-                    ],
-                    "c": true
-                  },
-                  "ix": 2
-                },
-                "nm": "✨",
-                "mn": "ADBE Vector Shape - Group",
-                "hd": false
-              }
-            ],
-            "nm": "✨",
-            "np": 6,
-            "cix": 2,
-            "bm": 0,
-            "ix": 1,
-            "mn": "ADBE Vector Group",
-            "hd": false
-          }
-        ]
-      },
-      "fFamily": "Segoe UI Emoji"
-    }
-  ]
-}

src/renderer/src/components/avatar/avatar.css.ts

@@ -1,23 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { vars } from "../../theme.css";
-
-export const profileAvatar = style({
-  borderRadius: "4px",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  backgroundColor: vars.color.background,
-  border: `solid 1px ${vars.color.border}`,
-  cursor: "pointer",
-  color: vars.color.muted,
-  position: "relative",
-});
-
-export const profileAvatarImage = style({
-  height: "100%",
-  width: "100%",
-  objectFit: "cover",
-  overflow: "hidden",
-  borderRadius: "4px",
-});

src/renderer/src/components/avatar/avatar.scss

@@ -0,0 +1,21 @@
+@use "../../scss/globals.scss";
+
+.profile-avatar {
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: globals.$background-color;
+  border: solid 1px globals.$border-color;
+  cursor: pointer;
+  color: globals.$muted-color;
+  position: relative;
+
+  &__image {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+    overflow: hidden;
+    border-radius: 4px;
+  }
+}

src/renderer/src/components/avatar/avatar.tsx

@@ -1,6 +1,6 @@
 import { PersonIcon } from "@primer/octicons-react";
 
-import * as styles from "./avatar.css";
+import "./avatar.scss";
 
 export interface AvatarProps
   extends Omit<
@@ -16,14 +16,9 @@ export interface AvatarProps
 
 export function Avatar({ size, alt, src, ...props }: AvatarProps) {
   return (
-    <div className={styles.profileAvatar} style={{ width: size, height: size }}>
+    <div className="profile-avatar" style={{ width: size, height: size }}>
       {src ? (
-        <img
-          className={styles.profileAvatarImage}
-          alt={alt}
-          src={src}
-          {...props}
-        />
+        <img className="profile-avatar__image" alt={alt} src={src} {...props} />
       ) : (
         <PersonIcon size={size * 0.7} />
       )}

src/renderer/src/components/badge/badge.css.ts

@@ -1,13 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT } from "../../theme.css";
-
-export const badge = style({
-  color: "#c0c1c7",
-  fontSize: "10px",
-  padding: `${SPACING_UNIT / 2}px ${SPACING_UNIT}px`,
-  border: "solid 1px #c0c1c7",
-  borderRadius: "4px",
-  display: "flex",
-  alignItems: "center",
-});

src/renderer/src/components/badge/badge.scss

@@ -0,0 +1,11 @@
+@use "../../scss/globals.scss";
+
+.badge {
+  color: globals.$muted-color;
+  font-size: 10px;
+  padding: calc(globals.$spacing-unit / 2) globals.$spacing-unit;
+  border: solid 1px globals.$muted-color;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+}

src/renderer/src/components/badge/badge.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import * as styles from "./badge.css";
+
+import "./badge.scss";
 
 export interface BadgeProps {
   children: React.ReactNode;
@@ -7,7 +8,7 @@ export interface BadgeProps {
 
 export function Badge({ children }: BadgeProps) {
   return (
-    <div className={styles.badge}>
+    <div className="badge">
       <span>{children}</span>
     </div>
   );

src/renderer/src/components/bottom-panel/bottom-panel.css.ts

@@ -1,25 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-import { SPACING_UNIT, vars } from "../../theme.css";
-
-export const bottomPanel = style({
-  width: "100%",
-  borderTop: `solid 1px ${vars.color.border}`,
-  backgroundColor: vars.color.background,
-  padding: `${SPACING_UNIT / 2}px ${SPACING_UNIT * 2}px`,
-  display: "flex",
-  alignItems: "center",
-  transition: "all ease 0.2s",
-  justifyContent: "space-between",
-  position: "relative",
-  zIndex: vars.zIndex.bottomPanel,
-});
-
-export const downloadsButton = style({
-  color: vars.color.body,
-  borderBottom: "1px solid transparent",
-  ":hover": {
-    borderBottom: `1px solid ${vars.color.body}`,
-    cursor: "pointer",
-  },
-});

src/renderer/src/components/bottom-panel/bottom-panel.scss

@@ -0,0 +1,24 @@
+@use "../../scss/globals.scss";
+
+.bottom-panel {
+  width: 100%;
+  border-top: solid 1px globals.$border-color;
+  background-color: globals.$background-color;
+  padding: calc(globals.$spacing-unit / 2) calc(globals.$spacing-unit * 2);
+  display: flex;
+  align-items: center;
+  transition: all ease 0.2s;
+  justify-content: space-between;
+  position: relative;
+  z-index: globals.$bottom-panel-z-index;
+
+  &__downloads-button {
+    color: globals.$body-color;
+    border-bottom: solid 1px transparent;
+
+    &:hover {
+      border-bottom: solid 1px globals.$body-color;
+      cursor: pointer;
+    }
+  }
+}

src/renderer/src/components/bottom-panel/bottom-panel.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 
 import { useDownload, useUserDetails } from "@renderer/hooks";
 
-import * as styles from "./bottom-panel.css";
+import "./bottom-panel.scss";
 
 import { useNavigate } from "react-router-dom";
 import { VERSION_CODENAME } from "@renderer/constants";
@@ -72,10 +72,10 @@ export function BottomPanel() {
   ]);
 
   return (
-    <footer className={styles.bottomPanel}>
+    <footer className="bottom-panel">
       <button
         type="button"
-        className={styles.downloadsButton}
+        className="bottom-panel__downloads-button"
         onClick={() => navigate("/downloads")}
       >
         <small>{status}</small>

src/renderer/src/components/button/button.css.ts

@@ -1,69 +0,0 @@
-import { style, styleVariants } from "@vanilla-extract/css";
-import { SPACING_UNIT, vars } from "../../theme.css";
-
-const base = style({
-  padding: `${SPACING_UNIT}px ${SPACING_UNIT * 2}px`,
-  backgroundColor: vars.color.muted,
-  borderRadius: "8px",
-  border: "solid 1px transparent",
-  transition: "all ease 0.2s",
-  cursor: "pointer",
-  minHeight: "40px",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  gap: `${SPACING_UNIT}px`,
-  ":active": {
-    opacity: vars.opacity.active,
-  },
-  ":disabled": {
-    opacity: vars.opacity.disabled,
-    cursor: "not-allowed",
-  },
-});
-
-export const button = styleVariants({
-  primary: [
-    base,
-    {
-      ":hover": {
-        backgroundColor: "#DADBE1",
-      },
-      ":disabled": {
-        backgroundColor: vars.color.muted,
-      },
-    },
-  ],
-  outline: [
-    base,
-    {
-      backgroundColor: "transparent",
-      border: `solid 1px ${vars.color.border}`,
-      color: vars.color.muted,
-      ":hover": {
-        backgroundColor: "rgba(255, 255, 255, 0.1)",
-      },
-      ":disabled": {
-        backgroundColor: "transparent",
-      },
-    },
-  ],
-  dark: [
-    base,
-    {
-      backgroundColor: vars.color.darkBackground,
-      color: "#c0c1c7",
-    },
-  ],
-  danger: [
-    base,
-    {
-      borderColor: "transparent",
-      backgroundColor: "#a31533",
-      color: "#c0c1c7",
-      ":hover": {
-        backgroundColor: "#b3203f",
-      },
-    },
-  ],
-});

src/renderer/src/components/button/button.scss

@@ -0,0 +1,63 @@
+@use "../../scss/globals.scss";
+
+.button {
+  padding: globals.$spacing-unit globals.$spacing-unit * 2;
+  background-color: globals.$muted-color;
+  border-radius: 8px;
+  border: solid 1px transparent;
+  transition: all ease 0.2s;
+  cursor: pointer;
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: globals.$spacing-unit;
+
+  &:active {
+    opacity: globals.$active-opacity;
+  }
+
+  &:disabled {
+    opacity: globals.$disabled-opacity;
+    cursor: not-allowed;
+  }
+
+  &--primary {
+    &:hover {
+      background-color: #dadbe1;
+    }
+
+    &:disabled {
+      background-color: globals.$muted-color;
+    }
+  }
+
+  &--outline {
+    background-color: transparent;
+    border: solid 1px globals.$border-color;
+    color: globals.$muted-color;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+
+    &:disabled {
+      background-color: transparent;
+    }
+  }
+
+  &--dark {
+    background-color: globals.$dark-background-color;
+    color: globals.$muted-color;
+  }
+
+  &--danger {
+    border-color: transparent;
+    background-color: globals.$danger-color;
+    color: globals.$muted-color;
+
+    &:hover {
+      background-color: #b3203f;
+    }
+  }
+}

src/renderer/src/components/button/button.tsx

@@ -1,12 +1,13 @@
 import cn from "classnames";
-import * as styles from "./button.css";
+
+import "./button.scss";
 
 export interface ButtonProps
   extends React.DetailedHTMLProps<
     React.ButtonHTMLAttributes<HTMLButtonElement>,
     HTMLButtonElement
   > {
-  theme?: keyof typeof styles.button;
+  theme?: "primary" | "outline" | "dark" | "danger";
 }
 
 export function Button({
@@ -18,7 +19,7 @@ export function Button({
   return (
     <button
       type="button"
-      className={cn(styles.button[theme], className)}
+      className={cn("button", `button--${theme}`, className)}
       {...props}
     >
       {children}

src/renderer/src/components/sidebar/download-icon.tsx

@@ -1,18 +0,0 @@
-import Lottie from "lottie-react";
-
-import downloadingAnimation from "@renderer/assets/lottie/downloading.json";
-
-export interface DownloadIconProps {
-  isDownloading: boolean;
-}
-
-export function DownloadIcon({ isDownloading }: DownloadIconProps) {
-  return (
-    <Lottie
-      animationData={downloadingAnimation}
-      loop={isDownloading}
-      autoplay={isDownloading}
-      style={{ width: 16 }}
-    />
-  );
-}

src/renderer/src/components/sidebar/routes.tsx

@@ -1,6 +1,9 @@
-import { AppsIcon, GearIcon, HomeIcon } from "@primer/octicons-react";
-
-import { DownloadIcon } from "./download-icon";
+import {
+  AppsIcon,
+  DownloadIcon,
+  GearIcon,
+  HomeIcon,
+} from "@primer/octicons-react";
 
 export const routes = [
   {
@@ -16,9 +19,7 @@ export const routes = [
   {
     path: "/downloads",
     nameKey: "downloads",
-    render: (isDownloading: boolean) => (
-      <DownloadIcon isDownloading={isDownloading} />
-    ),
+    render: () => <DownloadIcon />,
   },
   {
     path: "/settings",

src/renderer/src/components/sidebar/sidebar.css.ts

@@ -13,6 +13,7 @@ export const sidebar = recipe({
     borderRight: `solid 1px ${vars.color.border}`,
     position: "relative",
     overflow: "hidden",
+    justifyContent: "space-between",
   },
   variants: {
     resizing: {
@@ -124,3 +125,28 @@ export const section = style({
   flexDirection: "column",
   paddingBottom: `${SPACING_UNIT}px`,
 });
+
+export const helpButton = style({
+  color: vars.color.muted,
+  padding: `${SPACING_UNIT}px ${SPACING_UNIT * 2}px`,
+  gap: "9px",
+  display: "flex",
+  alignItems: "center",
+  cursor: "pointer",
+  borderTop: `solid 1px ${vars.color.border}`,
+  transition: "background-color ease 0.1s",
+  ":hover": {
+    backgroundColor: "rgba(255, 255, 255, 0.15)",
+  },
+});
+
+export const helpButtonIcon = style({
+  background: "linear-gradient(0deg, #16B195 50%, #3E62C0 100%)",
+  width: "24px",
+  height: "24px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "#fff",
+  borderRadius: "50%",
+});

src/renderer/src/components/sidebar/sidebar.tsx

@@ -5,7 +5,12 @@ import { useLocation, useNavigate } from "react-router-dom";
 import type { LibraryGame } from "@types";
 
 import { TextField } from "@renderer/components";
-import { useDownload, useLibrary, useToast } from "@renderer/hooks";
+import {
+  useDownload,
+  useLibrary,
+  useToast,
+  useUserDetails,
+} from "@renderer/hooks";
 
 import { routes } from "./routes";
 
@@ -15,6 +20,9 @@ import { buildGameDetailsPath } from "@renderer/helpers";
 import SteamLogo from "@renderer/assets/steam-logo.svg?react";
 import { SidebarProfile } from "./sidebar-profile";
 import { sortBy } from "lodash-es";
+import { CommentDiscussionIcon } from "@primer/octicons-react";
+
+import { show, update } from "@intercom/messenger-js-sdk";
 
 const SIDEBAR_MIN_WIDTH = 200;
 const SIDEBAR_INITIAL_WIDTH = 250;
@@ -42,6 +50,21 @@ export function Sidebar() {
     return sortBy(library, (game) => game.title);
   }, [library]);
 
+  const { userDetails, hasActiveSubscription } = useUserDetails();
+
+  useEffect(() => {
+    if (userDetails) {
+      update({
+        name: userDetails.displayName,
+        Username: userDetails.username,
+        email: userDetails.email ?? undefined,
+        Email: userDetails.email,
+        "Subscription expiration date": userDetails?.subscription?.expiresAt,
+        "Payment status": userDetails?.subscription?.status,
+      });
+    }
+  }, [userDetails, hasActiveSubscription]);
+
   const { lastPacket, progress } = useDownload();
 
   const { showWarningToast } = useToast();
@@ -50,10 +73,6 @@ export function Sidebar() {
     updateLibrary();
   }, [lastPacket?.game.id, updateLibrary]);
 
-  const isDownloading = sortedLibrary.some(
-    (game) => game.status === "active" && game.progress !== 1
-  );
-
   const sidebarRef = useRef<HTMLElement>(null);
 
   const cursorPos = useRef({ x: 0 });
@@ -170,77 +189,91 @@ export function Sidebar() {
         maxWidth: sidebarWidth,
       }}
     >
-      <SidebarProfile />
+      <div
+        style={{ display: "flex", flexDirection: "column", overflow: "hidden" }}
+      >
+        <SidebarProfile />
 
-      <div className={styles.content}>
-        <section className={styles.section}>
-          <ul className={styles.menu}>
-            {routes.map(({ nameKey, path, render }) => (
-              <li
-                key={nameKey}
-                className={styles.menuItem({
-                  active: location.pathname === path,
-                })}
-              >
-                <button
-                  type="button"
-                  className={styles.menuItemButton}
-                  onClick={() => handleSidebarItemClick(path)}
+        <div className={styles.content}>
+          <section className={styles.section}>
+            <ul className={styles.menu}>
+              {routes.map(({ nameKey, path, render }) => (
+                <li
+                  key={nameKey}
+                  className={styles.menuItem({
+                    active: location.pathname === path,
+                  })}
                 >
-                  {render(isDownloading)}
-                  <span>{t(nameKey)}</span>
-                </button>
-              </li>
-            ))}
-          </ul>
-        </section>
+                  <button
+                    type="button"
+                    className={styles.menuItemButton}
+                    onClick={() => handleSidebarItemClick(path)}
+                  >
+                    {render()}
+                    <span>{t(nameKey)}</span>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </section>
 
-        <section className={styles.section}>
-          <small className={styles.sectionTitle}>{t("my_library")}</small>
+          <section className={styles.section}>
+            <small className={styles.sectionTitle}>{t("my_library")}</small>
 
-          <TextField
-            ref={filterRef}
-            placeholder={t("filter")}
-            onChange={handleFilter}
-            theme="dark"
-          />
+            <TextField
+              ref={filterRef}
+              placeholder={t("filter")}
+              onChange={handleFilter}
+              theme="dark"
+            />
 
-          <ul className={styles.menu}>
-            {filteredLibrary.map((game) => (
-              <li
-                key={game.id}
-                className={styles.menuItem({
-                  active:
-                    location.pathname === `/game/${game.shop}/${game.objectID}`,
-                  muted: game.status === "removed",
-                })}
-              >
-                <button
-                  type="button"
-                  className={styles.menuItemButton}
-                  onClick={(event) => handleSidebarGameClick(event, game)}
+            <ul className={styles.menu}>
+              {filteredLibrary.map((game) => (
+                <li
+                  key={game.id}
+                  className={styles.menuItem({
+                    active:
+                      location.pathname ===
+                      `/game/${game.shop}/${game.objectID}`,
+                    muted: game.status === "removed",
+                  })}
                 >
-                  {game.iconUrl ? (
-                    <img
-                      className={styles.gameIcon}
-                      src={game.iconUrl}
-                      alt={game.title}
-                      loading="lazy"
-                    />
-                  ) : (
-                    <SteamLogo className={styles.gameIcon} />
-                  )}
+                  <button
+                    type="button"
+                    className={styles.menuItemButton}
+                    onClick={(event) => handleSidebarGameClick(event, game)}
+                  >
+                    {game.iconUrl ? (
+                      <img
+                        className={styles.gameIcon}
+                        src={game.iconUrl}
+                        alt={game.title}
+                        loading="lazy"
+                      />
+                    ) : (
+                      <SteamLogo className={styles.gameIcon} />
+                    )}
 
-                  <span className={styles.menuItemButtonLabel}>
-                    {getGameTitle(game)}
-                  </span>
-                </button>
-              </li>
-            ))}
-          </ul>
-        </section>
+                    <span className={styles.menuItemButtonLabel}>
+                      {getGameTitle(game)}
+                    </span>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </section>
+        </div>
       </div>
 
+      {hasActiveSubscription && (
+        <button type="button" className={styles.helpButton} onClick={show}>
+          <div className={styles.helpButtonIcon}>
+            <CommentDiscussionIcon size={14} />
+          </div>
+          <span>{t("need_help")}</span>
+        </button>
+      )}
+
       <button
         type="button"
         className={styles.handle}

src/renderer/src/context/game-details/game-details.context.tsx

@@ -147,7 +147,8 @@ export function GameDetailsContextProvider({
         if (
           result?.content_descriptors.ids.includes(
             SteamContentDescriptor.AdultOnlySexualContent
-          )
+          ) &&
+          !userPreferences?.disableNsfwAlert
         ) {
           setHasNSFWContentBlocked(true);
         }

src/renderer/src/declaration.d.ts

@@ -66,16 +66,6 @@ declare global {
     searchGameRepacks: (query: string) => Promise<GameRepack[]>;
     getGameStats: (objectId: string, shop: GameShop) => Promise<GameStats>;
     getTrendingGames: () => Promise<TrendingGame[]>;
-    onAchievementUnlocked: (
-      cb: (
-        objectId: string,
-        shop: GameShop,
-        achievements?: { displayName: string; iconUrl: string }[]
-      ) => void
-    ) => () => Electron.IpcRenderer;
-    onCombinedAchievementsUnlocked: (
-      cb: (gameCount: number, achievementCount: number) => void
-    ) => () => Electron.IpcRenderer;
     onUpdateAchievements: (
       objectId: string,
       shop: GameShop,
@@ -114,7 +104,10 @@ declare global {
     updateUserPreferences: (
       preferences: Partial<UserPreferences>
     ) => Promise<void>;
-    autoLaunch: (enabled: boolean) => Promise<void>;
+    autoLaunch: (autoLaunchProps: {
+      enabled: boolean;
+      minimized: boolean;
+    }) => Promise<void>;
     authenticateRealDebrid: (apiToken: string) => Promise<RealDebridUser>;
 
     /* Download sources */

src/renderer/src/dexie.ts

@@ -10,12 +10,22 @@ export interface HowLongToBeatEntry {
   updatedAt: Date;
 }
 
+export interface CatalogueCache {
+  id?: number;
+  category: string;
+  games: { objectId: string; shop: GameShop }[];
+  createdAt: Date;
+  updatedAt: Date;
+  expiresAt: Date;
+}
+
 export const db = new Dexie("Hydra");
 
-db.version(4).stores({
+db.version(5).stores({
   repacks: `++id, title, uris, fileSize, uploadDate, downloadSourceId, repacker, createdAt, updatedAt`,
   downloadSources: `++id, url, name, etag, downloadCount, status, createdAt, updatedAt`,
   howLongToBeatEntries: `++id, categories, [shop+objectId], createdAt, updatedAt`,
+  catalogueCache: `++id, category, games, createdAt, updatedAt, expiresAt`,
 });
 
 export const downloadSourcesTable = db.table("downloadSources");
@@ -24,4 +34,6 @@ export const howLongToBeatEntriesTable = db.table<HowLongToBeatEntry>(
   "howLongToBeatEntries"
 );
 
+export const catalogueCacheTable = db.table<CatalogueCache>("catalogueCache");
+
 db.open();

src/renderer/src/main.tsx

@@ -6,8 +6,6 @@ import { Provider } from "react-redux";
 import LanguageDetector from "i18next-browser-languagedetector";
 import { HashRouter, Route, Routes } from "react-router-dom";
 
-import * as Sentry from "@sentry/electron/renderer";
-
 import "@fontsource/noto-sans/400.css";
 import "@fontsource/noto-sans/500.css";
 import "@fontsource/noto-sans/700.css";
@@ -19,9 +17,7 @@ import { App } from "./app";
 import { store } from "./store";
 
 import resources from "@locales";
-import { AchievementNotification } from "./pages/achievements/notification/achievement-notification";
 
-import "./workers";
 import { RepacksContextProvider } from "./context";
 import { SuspenseWrapper } from "./components";
 
@@ -38,8 +34,6 @@ const Achievements = React.lazy(
   () => import("./pages/achievements/achievements")
 );
 
-Sentry.init({});
-
 i18n
   .use(LanguageDetector)
   .use(initReactI18next)
@@ -97,10 +91,6 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
                 element={<SuspenseWrapper Component={Achievements} />}
               />
             </Route>
-            <Route
-              path="/achievement-notification"
-              Component={AchievementNotification}
-            />
           </Routes>
         </HashRouter>
       </RepacksContextProvider>

src/renderer/src/pages/achievements/achievements-content.tsx

@@ -273,7 +273,6 @@ export function AchievementsContent({
         src={steamUrlBuilder.libraryHero(objectId)}
         style={{ display: "none" }}
         alt={gameTitle}
-        className={styles.heroImage}
         onLoad={handleHeroLoad}
       />
 

src/renderer/src/pages/achievements/achievements.css.ts

@@ -23,31 +23,6 @@ export const hero = style({
   flexDirection: "column",
   position: "relative",
   transition: "all ease 0.2s",
-  "@media": {
-    "(min-width: 1250px)": {
-      height: "350px",
-      minHeight: "350px",
-    },
-  },
-});
-
-export const heroImage = style({
-  width: "100%",
-  height: `${HERO_HEIGHT}px`,
-  minHeight: `${HERO_HEIGHT}px`,
-  objectFit: "cover",
-  objectPosition: "top",
-  transition: "all ease 0.2s",
-  position: "absolute",
-  zIndex: "0",
-  filter: "blur(5px)",
-  "@media": {
-    "(min-width: 1250px)": {
-      objectPosition: "center",
-      height: "350px",
-      minHeight: "350px",
-    },
-  },
 });
 
 export const heroContent = style({

src/renderer/src/pages/achievements/notification/achievement-notification.css.ts

@@ -1,44 +0,0 @@
-import { recipe } from "@vanilla-extract/recipes";
-import { vars } from "../../../theme.css";
-import { keyframes, style } from "@vanilla-extract/css";
-
-const animationIn = keyframes({
-  "0%": { transform: `translateY(-240px)` },
-  "100%": { transform: "translateY(0)" },
-});
-
-const animationOut = keyframes({
-  "0%": { transform: `translateY(0)` },
-  "100%": { transform: "translateY(-240px)" },
-});
-
-export const container = recipe({
-  base: {
-    marginTop: "24px",
-    marginLeft: "24px",
-    animationDuration: "1.0s",
-    height: "60px",
-    display: "flex",
-  },
-  variants: {
-    closing: {
-      true: {
-        animationName: animationOut,
-        transform: "translateY(-240px)",
-      },
-      false: {
-        animationName: animationIn,
-        transform: "translateY(0)",
-      },
-    },
-  },
-});
-
-export const content = style({
-  display: "flex",
-  flexDirection: "row",
-  gap: "8px",
-  alignItems: "center",
-  background: vars.color.background,
-  paddingRight: "8px",
-});

src/renderer/src/pages/achievements/notification/achievement-notification.tsx

@@ -1,141 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import achievementSound from "@renderer/assets/audio/achievement.wav";
-import { useTranslation } from "react-i18next";
-import * as styles from "./achievement-notification.css";
-
-interface AchievementInfo {
-  displayName: string;
-  iconUrl: string;
-}
-
-const NOTIFICATION_TIMEOUT = 4000;
-
-export function AchievementNotification() {
-  const { t } = useTranslation("achievement");
-
-  const [isClosing, setIsClosing] = useState(false);
-  const [isVisible, setIsVisible] = useState(false);
-
-  const [achievements, setAchievements] = useState<AchievementInfo[]>([]);
-  const [currentAchievement, setCurrentAchievement] =
-    useState<AchievementInfo | null>(null);
-
-  const achievementAnimation = useRef(-1);
-  const closingAnimation = useRef(-1);
-  const visibleAnimation = useRef(-1);
-
-  const playAudio = useCallback(() => {
-    const audio = new Audio(achievementSound);
-    audio.volume = 0.2;
-    audio.play();
-  }, []);
-
-  useEffect(() => {
-    const unsubscribe = window.electron.onCombinedAchievementsUnlocked(
-      (gameCount, achievementCount) => {
-        if (gameCount === 0 || achievementCount === 0) return;
-
-        setAchievements([
-          {
-            displayName: t("new_achievements_unlocked", {
-              gameCount,
-              achievementCount,
-            }),
-            iconUrl:
-              "https://avatars.githubusercontent.com/u/164102380?s=400&u=01a13a7b4f0c642f7e547b8e1d70440ea06fa750&v=4",
-          },
-        ]);
-
-        playAudio();
-      }
-    );
-
-    return () => {
-      unsubscribe();
-    };
-  }, [playAudio]);
-
-  useEffect(() => {
-    const unsubscribe = window.electron.onAchievementUnlocked(
-      (_object, _shop, achievements) => {
-        if (!achievements || !achievements.length) return;
-
-        setAchievements((ach) => ach.concat(achievements));
-
-        playAudio();
-      }
-    );
-
-    return () => {
-      unsubscribe();
-    };
-  }, [playAudio]);
-
-  const hasAchievementsPending = achievements.length > 0;
-
-  const startAnimateClosing = useCallback(() => {
-    cancelAnimationFrame(closingAnimation.current);
-    cancelAnimationFrame(visibleAnimation.current);
-    cancelAnimationFrame(achievementAnimation.current);
-
-    setIsClosing(true);
-
-    const zero = performance.now();
-    closingAnimation.current = requestAnimationFrame(
-      function animateClosing(time) {
-        if (time - zero <= 1000) {
-          closingAnimation.current = requestAnimationFrame(animateClosing);
-        } else {
-          setIsVisible(false);
-        }
-      }
-    );
-  }, []);
-
-  useEffect(() => {
-    if (hasAchievementsPending) {
-      setIsClosing(false);
-      setIsVisible(true);
-
-      let zero = performance.now();
-      cancelAnimationFrame(closingAnimation.current);
-      cancelAnimationFrame(visibleAnimation.current);
-      cancelAnimationFrame(achievementAnimation.current);
-      achievementAnimation.current = requestAnimationFrame(
-        function animateLock(time) {
-          if (time - zero > NOTIFICATION_TIMEOUT) {
-            zero = performance.now();
-            setAchievements((ach) => ach.slice(1));
-          }
-          achievementAnimation.current = requestAnimationFrame(animateLock);
-        }
-      );
-    } else {
-      startAnimateClosing();
-    }
-  }, [hasAchievementsPending]);
-
-  useEffect(() => {
-    if (achievements.length) {
-      setCurrentAchievement(achievements[0]);
-    }
-  }, [achievements]);
-
-  if (!isVisible || !currentAchievement) return null;
-
-  return (
-    <div className={styles.container({ closing: isClosing })}>
-      <div className={styles.content}>
-        <img
-          src={currentAchievement.iconUrl}
-          alt={currentAchievement.displayName}
-          style={{ flex: 1, width: "60px" }}
-        />
-        <div>
-          <p>{t("achievement_unlocked")}</p>
-          <p>{currentAchievement.displayName}</p>
-        </div>
-      </div>
-    </div>
-  );
-}

src/renderer/src/pages/game-details/cloud-sync-files-modal/cloud-sync-files-modal.tsx

@@ -75,7 +75,7 @@ export function CloudSyncFilesModal({
       showSuccessToast(t("custom_backup_location_set"));
       getGameBackupPreview();
     }
-  }, [objectId, setValue, shop, showSuccessToast, getGameBackupPreview]);
+  }, [objectId, setValue, shop, t, showSuccessToast, getGameBackupPreview]);
 
   const handleFileMappingMethodClick = useCallback(
     (mappingOption: FileMappingMethod) => {

src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.tsx

@@ -83,8 +83,10 @@ export function CloudSyncModal({ visible, onClose }: CloudSyncModalProps) {
   };
 
   useEffect(() => {
-    getGameBackupPreview();
-  }, [getGameBackupPreview]);
+    if (visible) {
+      getGameBackupPreview();
+    }
+  }, [getGameBackupPreview, visible]);
 
   const backupStateLabel = useMemo(() => {
     if (uploadingBackup) {

src/renderer/src/pages/game-details/game-details-content.tsx

@@ -11,9 +11,8 @@ import * as styles from "./game-details.css";
 import { useTranslation } from "react-i18next";
 import { cloudSyncContext, gameDetailsContext } from "@renderer/context";
 import { steamUrlBuilder } from "@shared";
-import Lottie from "lottie-react";
 
-import cloudAnimation from "@renderer/assets/lottie/cloud.json";
+import cloudIconAnimated from "@renderer/assets/icons/cloud-animated.gif";
 import { useUserDetails } from "@renderer/hooks";
 
 const HERO_ANIMATION_THRESHOLD = 25;
@@ -165,10 +164,9 @@ export function GameDetailsContent() {
                     position: "relative",
                   }}
                 >
-                  <Lottie
-                    animationData={cloudAnimation}
-                    loop={false}
-                    autoplay
+                  <img
+                    src={cloudIconAnimated}
+                    alt="Cloud icon"
                     style={{ width: 26, position: "absolute", top: -3 }}
                   />
                 </div>

src/renderer/src/pages/game-details/game-details.tsx

@@ -6,9 +6,8 @@ import type { GameRepack, GameShop, Steam250Game } from "@types";
 import { Button, ConfirmationModal } from "@renderer/components";
 import { buildGameDetailsPath } from "@renderer/helpers";
 
-import starsAnimation from "@renderer/assets/lottie/stars.json";
+import starsIconAnimated from "@renderer/assets/icons/stars-animated.gif";
 
-import Lottie from "lottie-react";
 import { useTranslation } from "react-i18next";
 import { SkeletonTheme } from "react-loading-skeleton";
 import { GameDetailsSkeleton } from "./game-details-skeleton";
@@ -194,15 +193,15 @@ export default function GameDetails() {
                     <div
                       style={{ width: 16, height: 16, position: "relative" }}
                     >
-                      <Lottie
-                        animationData={starsAnimation}
+                      <img
+                        src={starsIconAnimated}
+                        alt="Stars animation"
                         style={{
                           width: 70,
                           position: "absolute",
                           top: -28,
                           left: -27,
                         }}
-                        loop={false}
                       />
                     </div>
                     {t("next_suggestion")}

src/renderer/src/pages/game-details/hero/hero-panel-actions.tsx

@@ -1,4 +1,9 @@
-import { GearIcon, PlayIcon, PlusCircleIcon } from "@primer/octicons-react";
+import {
+  DownloadIcon,
+  GearIcon,
+  PlayIcon,
+  PlusCircleIcon,
+} from "@primer/octicons-react";
 import { Button } from "@renderer/components";
 import { useDownload, useLibrary } from "@renderer/hooks";
 import { useContext, useState } from "react";
@@ -6,7 +11,6 @@ import { useTranslation } from "react-i18next";
 import * as styles from "./hero-panel-actions.css";
 
 import { gameDetailsContext } from "@renderer/context";
-import { DownloadIcon } from "@renderer/components/sidebar/download-icon";
 
 export function HeroPanelActions() {
   const [toggleLibraryGameDisabled, setToggleLibraryGameDisabled] =
@@ -125,7 +129,7 @@ export function HeroPanelActions() {
         disabled={isGameDownloading || !repacks.length}
         className={styles.heroPanelAction}
       >
-        <DownloadIcon isDownloading={false} />
+        <DownloadIcon />
         {t("download")}
       </Button>
     );

src/renderer/src/pages/home/home.css.ts

@@ -68,3 +68,10 @@ export const buttonsList = style({
   padding: "0",
   gap: `${SPACING_UNIT}px`,
 });
+
+export const flameIcon = style({
+  width: "30px",
+  top: "-10px",
+  left: "-5px",
+  position: "absolute",
+});

src/renderer/src/pages/home/home.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
@@ -7,21 +7,28 @@ import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
 import { Button, GameCard, Hero } from "@renderer/components";
 import type { Steam250Game, CatalogueEntry } from "@types";
 
-import starsAnimation from "@renderer/assets/lottie/stars.json";
-import flameAnimation from "@renderer/assets/lottie/flame.json";
+import flameIconStatic from "@renderer/assets/icons/flame-static.png";
+import flameIconAnimated from "@renderer/assets/icons/flame-animated.gif";
+import starsIconAnimated from "@renderer/assets/icons/stars-animated.gif";
 
 import * as styles from "./home.css";
 import { SPACING_UNIT, vars } from "@renderer/theme.css";
-import Lottie, { type LottieRefCurrentProps } from "lottie-react";
 import { buildGameDetailsPath } from "@renderer/helpers";
 import { CatalogueCategory } from "@shared";
+import { catalogueCacheTable, db } from "@renderer/dexie";
+import { add } from "date-fns";
+
+const categoryCacheDurationInSeconds = {
+  [CatalogueCategory.Hot]: 60 * 60 * 2,
+  [CatalogueCategory.Weekly]: 60 * 60 * 24,
+  [CatalogueCategory.Achievements]: 60 * 60 * 24,
+};
 
 export default function Home() {
   const { t } = useTranslation("home");
   const navigate = useNavigate();
 
-  const flameAnimationRef = useRef<LottieRefCurrentProps>(null);
-
+  const [animateFlame, setAnimateFlame] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [randomGame, setRandomGame] = useState<Steam250Game | null>(null);
 
@@ -37,19 +44,43 @@ export default function Home() {
     [CatalogueCategory.Achievements]: [],
   });
 
-  const getCatalogue = useCallback((category: CatalogueCategory) => {
-    setCurrentCatalogueCategory(category);
-    setIsLoading(true);
+  const getCatalogue = useCallback(async (category: CatalogueCategory) => {
+    try {
+      const catalogueCache = await catalogueCacheTable
+        .where("expiresAt")
+        .above(new Date())
+        .and((cache) => cache.category === category)
+        .first();
 
-    window.electron
-      .getCatalogue(category)
-      .then((catalogue) => {
-        setCatalogue((prev) => ({ ...prev, [category]: catalogue }));
-      })
-      .catch(() => {})
-      .finally(() => {
-        setIsLoading(false);
+      setCurrentCatalogueCategory(category);
+      setIsLoading(true);
+
+      if (catalogueCache)
+        return setCatalogue((prev) => ({
+          ...prev,
+          [category]: catalogueCache.games,
+        }));
+
+      const catalogue = await window.electron.getCatalogue(category);
+
+      db.transaction("rw", catalogueCacheTable, async () => {
+        await catalogueCacheTable.where("category").equals(category).delete();
+
+        await catalogueCacheTable.add({
+          category,
+          games: catalogue,
+          createdAt: new Date(),
+          updatedAt: new Date(),
+          expiresAt: add(new Date(), {
+            seconds: categoryCacheDurationInSeconds[category],
+          }),
+        });
       });
+
+      setCatalogue((prev) => ({ ...prev, [category]: catalogue }));
+    } finally {
+      setIsLoading(false);
+    }
   }, []);
 
   const getRandomGame = useCallback(() => {
@@ -88,13 +119,13 @@ export default function Home() {
 
   const handleMouseEnterCategory = (category: CatalogueCategory) => {
     if (category === CatalogueCategory.Hot) {
-      flameAnimationRef?.current?.play();
+      setAnimateFlame(true);
     }
   };
 
   const handleMouseLeaveCategory = (category: CatalogueCategory) => {
     if (category === CatalogueCategory.Hot) {
-      flameAnimationRef?.current?.stop();
+      setAnimateFlame(false);
     }
   };
 
@@ -123,17 +154,17 @@ export default function Home() {
                     <div
                       style={{ width: 16, height: 16, position: "relative" }}
                     >
-                      <Lottie
-                        lottieRef={flameAnimationRef}
-                        animationData={flameAnimation}
-                        loop={false}
-                        autoplay={false}
-                        style={{
-                          width: 30,
-                          top: -10,
-                          left: -5,
-                          position: "absolute",
-                        }}
+                      <img
+                        src={flameIconStatic}
+                        alt="Flame icon"
+                        className={styles.flameIcon}
+                        style={{ display: animateFlame ? "none" : "block" }}
+                      />
+                      <img
+                        src={flameIconAnimated}
+                        alt="Flame animation"
+                        className={styles.flameIcon}
+                        style={{ display: animateFlame ? "block" : "none" }}
                       />
                     </div>
                   )}
@@ -150,10 +181,10 @@ export default function Home() {
             disabled={!randomGame}
           >
             <div style={{ width: 16, height: 16, position: "relative" }}>
-              <Lottie
-                animationData={starsAnimation}
+              <img
+                src={starsIconAnimated}
+                alt="Stars animation"
                 style={{ width: 70, position: "absolute", top: -28, left: -27 }}
-                loop={false}
               />
             </div>
             {t("surprise_me")}
@@ -163,10 +194,9 @@ export default function Home() {
         <h2 style={{ display: "flex", gap: SPACING_UNIT }}>
           {currentCatalogueCategory === CatalogueCategory.Hot && (
             <div style={{ width: 24, height: 24, position: "relative" }}>
-              <Lottie
-                animationData={flameAnimation}
-                loop={false}
-                autoplay
+              <img
+                src={flameIconAnimated}
+                alt="Flame animation"
                 style={{
                   width: 40,
                   top: -10,

src/renderer/src/pages/profile/profile-content/profile-content.tsx

@@ -259,6 +259,7 @@ export function ProfileContent() {
     userStats,
     numberFormatter,
     t,
+    buildUserGameDetailsPath,
     formatPlayTime,
     navigate,
   ]);

src/renderer/src/pages/profile/profile-hero/profile-hero.tsx

@@ -254,6 +254,7 @@ export function ProfileHero() {
       if (gameRunning)
         return {
           ...gameRunning,
+          objectId: gameRunning.objectID,
           sessionDurationInSeconds: gameRunning.sessionDurationInMillis / 1000,
         };
 
@@ -330,7 +331,7 @@ export function ProfileHero() {
                     <Link
                       to={buildGameDetailsPath({
                         ...currentGame,
-                        objectId: currentGame.objectID,
+                        objectId: currentGame.objectId,
                       })}
                     >
                       {currentGame.title}

src/renderer/src/pages/settings/settings-behavior.tsx

@@ -17,6 +17,8 @@ export function SettingsBehavior() {
   const [form, setForm] = useState({
     preferQuitInsteadOfHiding: false,
     runAtStartup: false,
+    startMinimized: false,
+    disableNsfwAlert: false,
   });
 
   const { t } = useTranslation("settings");
@@ -26,6 +28,8 @@ export function SettingsBehavior() {
       setForm({
         preferQuitInsteadOfHiding: userPreferences.preferQuitInsteadOfHiding,
         runAtStartup: userPreferences.runAtStartup,
+        startMinimized: userPreferences.startMinimized,
+        disableNsfwAlert: userPreferences.disableNsfwAlert,
       });
     }
   }, [userPreferences]);
@@ -58,11 +62,40 @@ export function SettingsBehavior() {
           label={t("launch_with_system")}
           onChange={() => {
             handleChange({ runAtStartup: !form.runAtStartup });
-            window.electron.autoLaunch(!form.runAtStartup);
+            window.electron.autoLaunch({
+              enabled: !form.runAtStartup,
+              minimized: form.startMinimized,
+            });
           }}
           checked={form.runAtStartup}
         />
       )}
+
+      {showRunAtStartup && (
+        <div style={{ opacity: form.runAtStartup ? 1 : 0.5 }}>
+          <CheckboxField
+            label={t("launch_minimized")}
+            style={{ cursor: form.runAtStartup ? "pointer" : "not-allowed" }}
+            checked={form.runAtStartup && form.startMinimized}
+            disabled={!form.runAtStartup}
+            onChange={() => {
+              handleChange({ startMinimized: !form.startMinimized });
+              window.electron.autoLaunch({
+                minimized: !form.startMinimized,
+                enabled: form.runAtStartup,
+              });
+            }}
+          />
+        </div>
+      )}
+
+      <CheckboxField
+        label={t("disable_nsfw_alert")}
+        checked={form.disableNsfwAlert}
+        onChange={() =>
+          handleChange({ disableNsfwAlert: !form.disableNsfwAlert })
+        }
+      />
     </>
   );
 }

src/renderer/src/pages/shared-modals/subscription-tour-modal.tsx

@@ -1,75 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Button, Modal } from "../../components";
-import { SPACING_UNIT } from "../../theme.css";
-
-export interface UserFriendsModalProps {
-  visible: boolean;
-  onClose: () => void;
-}
-
-export const SubscriptionTourModal = ({
-  visible,
-  onClose,
-}: UserFriendsModalProps) => {
-  const { t } = useTranslation("tour");
-
-  const handleSubscribeClick = () => {
-    window.electron.openCheckout().finally(onClose);
-  };
-
-  return (
-    <Modal
-      visible={visible}
-      title={t("subscription_tour_title")}
-      onClose={onClose}
-    >
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: `${SPACING_UNIT * 2}px`,
-        }}
-      >
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "row",
-            gap: `${SPACING_UNIT * 2}px`,
-            justifyContent: "space-around",
-          }}
-        >
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "column",
-              gap: `${SPACING_UNIT * 2}px`,
-            }}
-          >
-            <h2>Hydra Cloud</h2>
-            <ul style={{ margin: "0", padding: "0" }}>
-              <li style={{ margin: `${SPACING_UNIT}px ${SPACING_UNIT * 2}px` }}>
-                {t("cloud_saving")}
-              </li>
-              <li style={{ margin: `${SPACING_UNIT}px ${SPACING_UNIT * 2}px` }}>
-                {t("cloud_achievements")}
-              </li>
-              <li style={{ margin: `${SPACING_UNIT}px ${SPACING_UNIT * 2}px` }}>
-                {t("show_and_compare_achievements")}
-              </li>
-              <li style={{ margin: `${SPACING_UNIT}px ${SPACING_UNIT * 2}px` }}>
-                {t("animated_profile_banner")}
-              </li>
-              <li style={{ margin: `${SPACING_UNIT}px ${SPACING_UNIT * 2}px` }}>
-                {t("animated_profile_picture")}
-              </li>
-              <li style={{ margin: `${SPACING_UNIT}px ${SPACING_UNIT * 2}px` }}>
-                {t("premium_support")}
-              </li>
-            </ul>
-          </div>
-        </div>
-        <Button onClick={handleSubscribeClick}>{t("subscribe_now")}</Button>
-      </div>
-    </Modal>
-  );
-};

src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.tsx

@@ -101,6 +101,7 @@ export const UserFriendModalAddFriend = ({
         >
           {isAddingFriend ? t("sending") : t("add")}
         </Button>
+
         <Button
           onClick={handleClickSeeProfile}
           disabled={isAddingFriend}

src/renderer/src/scss/globals.scss

@@ -0,0 +1,21 @@
+$background-color: #1c1c1c;
+$dark-background-color: #151515;
+
+$muted-color: #c0c1c7;
+$body-color: #8e919b;
+
+$border-color: #424244;
+$success-color: #1c9749;
+$danger-color: #e11d48;
+$warning-color: #ffc107;
+
+$disabled-opacity: 0.5;
+$active-opacity: 0.7;
+
+$spacing-unit: 8px;
+
+$toast-z-index: 5;
+$bottom-panel-z-index: 3;
+$title-bar-z-index: 4;
+$backdrop-z-index: 4;
+$modal-z-index: 5;

src/renderer/src/vite-env.d.ts

@@ -1,2 +1,10 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-svgr/client" />
+
+interface ImportMetaEnv {
+  readonly RENDERER_VITE_INTERCOM_APP_ID: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

src/shared/index.ts

@@ -55,6 +55,9 @@ export const removeDuplicateSpaces = (name: string) =>
 
 export const replaceDotsWithSpace = (name: string) => name.replace(/\./g, " ");
 
+export const replaceNbspWithSpace = (name: string) =>
+  name.replace(new RegExp(String.fromCharCode(160), "g"), " ");
+
 export const replaceUnderscoreWithSpace = (name: string) =>
   name.replace(/_/g, " ");
 
@@ -69,6 +72,7 @@ export const formatName = pipe<string>(
   removeSpecialEditionFromName,
   replaceUnderscoreWithSpace,
   replaceDotsWithSpace,
+  replaceNbspWithSpace,
   (str) => str.replace(/DIRECTOR'S CUT/g, ""),
   removeSymbolsFromName,
   removeDuplicateSpaces,

src/types/index.ts

@@ -160,6 +160,8 @@ export interface UserPreferences {
   realDebridApiToken: string | null;
   preferQuitInsteadOfHiding: boolean;
   runAtStartup: boolean;
+  startMinimized: boolean;
+  disableNsfwAlert: boolean;
 }
 
 export interface Steam250Game {
@@ -244,6 +246,7 @@ export interface Subscription {
 export interface UserDetails {
   id: string;
   username: string;
+  email: string | null;
   displayName: string;
   profileImageUrl: string | null;
   backgroundImageUrl: string | null;
@@ -256,6 +259,7 @@ export interface UserProfile {
   id: string;
   displayName: string;
   profileImageUrl: string | null;
+  email: string | null;
   backgroundImageUrl: string | null;
   profileVisibility: ProfileVisibility;
   libraryGames: UserGame[];
@@ -372,4 +376,4 @@ export interface ComparedAchievements {
 export * from "./steam.types";
 export * from "./real-debrid.types";
 export * from "./ludusavi.types";
-export * from "./howlongtobeat.types";
+export * from "./how-long-to-beat.types";