[chore] npm i

[chore] add missing scripts and asar package
Merge branch 'master' into chore/e2e-tests
2026-07-03 14:08:25 +02:00 · 2024-01-12 22:10:18 +01:00 · 2024-01-07 20:23:15 +01:00 · 2024-01-07 20:18:20 +01:00 · 2024-01-07 19:10:29 +01:00 · 2024-01-07 18:27:42 +01:00
81 changed files with 1604 additions and 541 deletions
@@ -0,0 +1,48 @@
+name : e2e-tests
+
+on:
+    push:
+        branches: ["master"]
+    pull_request:
+        branches: ["master"]
+    workflow_dispatch:
+
+jobs:
+    e2e-tests-windows:
+        runs-on: windows-latest
+
+        steps:
+            - name: Cleanup files
+              run: cmd /r dir
+            
+            - name: Checkout
+              uses: actions/checkout@v3
+
+            - name: Use Node.js
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 18.x
+                  cache: "npm"
+
+            - name: Install dependencies
+              run: npm ci
+
+            - name: Install Playwright deps
+              run: npx playwright install --with-deps
+            
+            - name: Build
+              run: npm run build
+
+            - name: Package
+              run: npm exec -c 'electron-builder build --publish "never" --win --x64'
+            
+            - name: Run e2e tests
+              run: npm run e2e-test-ci
+            
+            - name: Upload test results
+              if: always()
+              uses: actions/upload-artifact@v3
+              with:
+                  name: playwright-output
+                  path: test-results/
+
@@ -27,3 +27,5 @@ npm-debug.log.*
 *.css.d.ts
 *.sass.d.ts
 *.scss.d.ts
+
+test-results
@@ -1,4 +1,247 @@
-## [0.2.0](https://github.com/Zagrios/bs-manager/releases/tag/v0.2.0) (October 23, 2022)
+## Not released yet ~
+
+## [1.4.3](https://github.com/Zagrios/bs-manager/releases/tag/v1.4.3) (Dec 27, 2023)
+
+### Features
+- It's now possible to save Oculus token entered manually with a password #383
+
+### Fixes
+- Fixed issue where the latest Beat Saber version was misordered #379 
+
+### Other changes
+- Re-enabled Oculus downgrade with manual token input #383 
+
+## [1.4.2](https://github.com/Zagrios/bs-manager/releases/tag/v1.4.2) (Dec 17, 2023)
+
+### Features
+- Added Traditional Chinese translation (thanks to @mant0u0) #372
+
+### Fixes
+- Fixed an issue with keyboard navigation in the downloadable versions list [344e7ab](https://github.com/Zagrios/bs-manager/commit/344e7abc95130cfa44d9fa51365a5161c9f378a6)
+- Fixed an issue where automatic Steam version detection  was not working for some users  #375
+
+### Other changes
+- Temporarily disabled Oculus downgrade #377
+- Recommended version now appears first in the versions list #376 
+- Updated the "Broken Models" notification #378 
+
+## [1.4.1](https://github.com/Zagrios/bs-manager/releases/tag/v1.4.1) (Dec 5, 2023)
+
+### Features
+- Added Japanese translation (thanks to @emesan22) #365
+
+### Fixes
+- Fixed a JavaScript error that occurred when closing a window during a download #366
+- Resolved text overflow issue with the Spanish translation #367
+- Fixed an issue where downloading a playlist was not possible if a version do not has the "CustomLevel" folder #368
+- Installing a playlist now doesn't download maps that are already present #369 
+
+## [1.4.0](https://github.com/Zagrios/bs-manager/releases/tag/v1.4.0) (Nov 28, 2023)
+
+### Features
+- Oculus PCVR support #346 
+- The most moddable version now have a “Recommended” banner #354 
+- Chinese translation has been added (thanks to @ktKongTong)
+
+### Fixes
+- BSManager crashes if too many OneClick downloads are done at the same time #340
+- Unable to download playlists with OneClick from some websites #349
+- "Refresh list" was updating available versions but not installed versions #351
+- Prevent launching a version that is currently downloading #355 
+- Prioritize IPv4 to avoid IPv6 issues #353 
+- Import version progress bar is now accurate #358
+
+### Other changes
+- Fix french translation misspelling and standardize the "Beat Saber" name #341 (Thanks to @Synaelle)
+
+## [1.3.2](https://github.com/Zagrios/bs-manager/releases/tag/v1.3.2) (Oct 8, 2023)
+
+### Fixes
+- Maps or Playlists couldn't be downloaded with OneClick if maps were linked #331 #337 
+- Mishandling of additional launch arguments when launching from a shortcut #335 
+- Incorrect English translation #336 
+
+## [1.3.1](https://github.com/Zagrios/bs-manager/releases/tag/v1.3.1) (Oct 2, 2023)
+
+### Features
+- Beat Saber versions now automatically sync with LIV #320
+- Use ArcViewer to preview maps #312 
+
+### Fixes
+- SteamVR backup folder is now restored when disabling FPFC Mode #314 
+- OneClick installs now correctly place contents in user-defined symlinks #311
+- Currently downloading Beat Saber version no longer disappears on uninstalling a version #307 
+- Add "no-yeet" argument when launching Beat Saber to prevent mods to be removed if "UserData" is linked #321
+- Fixed a rare bug that prevent BSManager from launching due to a missing DLL #328 
+- Increase the SteamVR restore timeout to prevent it from launching in FPFC Mode #330 
+
+### Other changes
+- Improved Spanish translation #309 (Thanks to @GabiRP)
+- For new installations, the default folder for BSManager contents has been moved from "Documents" to the "User" directory to avoid OneDrive conflicts #319 
+
+## [1.3.0](https://github.com/Zagrios/bs-manager/releases/tag/v1.3.0) (Aug 10, 2023)
+
+### Features
+- Steam now launches automatically if needed when starting a version of Beat Saber #255
+- Create shortcuts to launch Beat Saber more quickly without going through BSManager #282
+- Russian translation has been added (thanks to @Dead0Duck)
+- Download Beat Saber versions without enter your credentials using QR code to login #293 
+- Login approval from the Steam app is now being handled #293 
+
+### Fixes
+- Unable to delete maps from shared content #262
+- Maps are no longer loaded unnecessarily when not accessing the map tab #261
+- BSManager no longer crashes when it loads tons of maps #288 
+- Loading maps is faster and consumes a lot less memory #288
+- Prevent installed mods from being downgraded after mods installation #291
+- Window title of BSManager no longer become "index.html" after closing settings #290 
+- Models' texts color within the download modal in light theme is now correct #296 
+- Downloading versions of Beat Saber now works on Linux #297 (thanks to @Insprill)
+- Fix the ability to focus on non-visible elements #299 
+
+### Other changes
+- Corrections and adjustments of some translations for better clarity #249 #279 (Thanks to @AltyFox and @KnuckleDF)
+- Improved compatibility with Linux (Thanks to @RedlineTriad and @Insprill)
+- Alpha versions should now update to the latest Stable version when its available #294 
+
+## [1.2.0](https://github.com/Zagrios/bs-manager/releases/tag/v1.2.0) (Jun 16, 2023)
+
+### Features
+- Add models management #218
+- Hexadecimal field has been added in color pickers #236 
+- "Show Password" button has been added in the login modal #244 
+
+### Fixes
+- Made permission error not possible when installing mods #219
+- Fix progress collision when switching versions while maps are being loaded #220 
+- Some mods do not show as installed after an update #231
+- Some mods are not marked as updated, after a mods update #229 
+- Shortcut to BSManager had an incorrect description #240 
+- Mod LookupID was never shown as installed #242 
+- Usernames with spaces were not supported for Steam login #243 
+- Can't clone Steam version without renaming it #248 
+
+### Other changes
+- Some UI elements have been reorganized to make usage more pleasant #218 
+- Initial loading of mods is now faster #232 
+- A warning has been added when the Steam password exceeds 64 characters #225 
+
+## [1.1.1](https://github.com/Zagrios/bs-manager/releases/tag/v1.1.1) (Apr 13, 2023)
+
+### Features
+- Add German translation #198 #199 (thanks @XCraftTM)
+- Add message when no mods are available #197 
+- Add button to link all folders at once #204 
+- Add indicator when a supporter is clickable #208 
+
+### Fixes
+- Fix error with mods management when offline #202
+- Can't open supporter link #207 
+- Change color of diamond supporters to match the discord role color #208 
+- Error when spaces are present in Steam Guard code #209 
+- Unable to move contents folder of BSManager when parent folder is named "BSManager" #210 
+- Unable to move contents folder of BSManager to another drive if symlinks are present #210 
+- Improve resilience to errors when moving contents folder of BSManager #210 
+- A strange bug prevents the launch of Beat Saber for some people #215 
+
+### Other changes
+- Add BeatLeader icon in OneClicks settings #193 
+
+## [1.1.0](https://github.com/Zagrios/bs-manager/releases/tag/v1.1.0) (Mar 24, 2023)
+
+### Features
+- Custom folders can now be shared between BeatSaber versions #176  
+- Advanced launch options to add custom launch arguments for BeatSaber #179 
+- Added an indicator if the current version is a preview #185 
+
+### Fixes
+- Disable SteamVR when "Desktop Mode" is enabled #181 
+- Fix some UI bugs #175 
+- Reactivate support button #183 
+- Installing an older version of a mod overwrites the most recent version installed #186
+- On version cloning, contents of linked folders no longer duplicate #189 
+- Now, the content of a shared folder is moved instead of being duplicated if no other version uses this shared folder #191 
+
+## [1.0.4](https://github.com/Zagrios/bs-manager/releases/tag/v1.0.4) (Mar 4, 2023)
+
+### Features
+- Add volume control #154 
+
+### Fixes
+- Fix some English translations #153 #151 #167 
+- The debug console does not open #158 
+- Can't enable Oculus and Desktop mode in the same time #159 
+- Pause Map song on open preview #160 
+- Reduces map loading time by 20 to 40% depending on configuration (still work on that) #161 
+- Mods menu partially hidden when no mods listed #165 
+- Fix light theme issues #168 
+- The .NET installation request notification sometimes does not appear #170 
+- Change Oculus Mode description #166 
+
+### Other changes
+- We have added an explanation of why we need your Steam credentials to download a BeatSaber version #164 
+
+## [1.0.3](https://github.com/Zagrios/bs-manager/releases/tag/v1.0.3) (Feb 28, 2023)
+
+### Fixes
+- Can't download Beat Saber version if there are spaces in the folder path
+
+## [1.0.2](https://github.com/Zagrios/bs-manager/releases/tag/v1.0.2) (Feb 24, 2023)
+
+### Fixes
+- Huge RAM usage optimization in maps list #140 
+- Maps deletion is way faster #140 
+- Maps progress bars are now accurate #140 
+- Maps loading is slightly faster #140 
+- Other little optimizations for the Maps management feature #140 
+- OneClick install for Maps not work if no Beat Saber version is installed #141
+- Little English translation fix #143 
+
+## [1.0.1](https://github.com/Zagrios/bs-manager/releases/tag/v1.0.1) (Feb 6, 2023)
+
+### Fixes
+- Some French translation corrections #133 
+- Update the default Mods to be more consistent with ModAssistant #132 #135 
+- Disable the `Support BSManager` button due to the change of the donation platform #134 
+
+## [1.0.0](https://github.com/Zagrios/bs-manager/releases/tag/v1.0.0) (Jan 26, 2023)
+
+### Breaking Change
+
+- Config file have been moved to contents folder of BSManager to keep user config even if it exports the contents folder to another pc #55
+- Versions file system have been modified to be more reliable #118 
+
+### Features
+
+- Maps Management #35 
+- OneClick installs (maps, playlists, models) #35
+- Oculus BeatSaber detection #17 
+- Lunch Steam from BSManager #37 
+- Alert if dotnet is not installed #54 
+- Swipe notification to close it #40 
+- Add discord button in settings #46 
+- Add Mods disclaimer #50 
+- Some UI tweaks #39 #51
+- Moving from Patreon to Mee6 #86 
+- Add launch mod infos #11 
+- Can import external BeatSaber installs #121
+- Add Web installer
+
+### Fixes
+
+- Outdated mod not seen as outdated #36 
+- Settings close button was stuck when scrolling #85 
+- Error when try to loading mods without internet #87 
+- Can't manage any version if Oculus app is not installed #101 
+- Download version button overlap with the spin loader #99 
+- After uninstall last BeatSaber version we stay on the same page #105 
+- No more files verification in available versions list #126 
+
+### Other Changes
+
+- Fix high CPU usage #121 
+
+## [0.2.0](https://github.com/Zagrios/bs-manager/releases/tag/v0.2.0) (Oct 23, 2022)

 ### Features

@@ -25,9 +25,6 @@
        }
    },
    "pages": {
-        "shared-maps": {
-            "title": "Geteilte Maps"
-        },
        "version-viewer": {
            "launch-mods": {
                "oculus": "Oculus Modus",
@@ -42,7 +39,6 @@
                }
            },
            "maps": {
-                "title": "Geteilte Maps",
                "search-bar": {
                    "search-placeholder": "Suche eine Map",
                    "filters-btn": "Filter",
@@ -728,6 +724,7 @@
    "maps": {
        "map-filter-panel": {
            "duration": "Länge",
+            "nps" : "Noten Pro Sekunde",
            "tags": "Stichworte",
            "specificities": "Allgemein",
            "requirements": "Anforderungen"
@@ -795,7 +792,13 @@
        },
        "map-item": {
            "by": "Von {songAutor}",
-            "mapped-by": "Gemapped von"
+            "mapped-by": "Gemapped von",
+            "delete": "Löschen",
+            "preview" : "Kartenvorschau",
+            "bsr-code" : "BSR Code",
+            "download" : "Karte herunterladen",
+            "downloading" :"Karte wird heruntergeladen",
+            "cancel-download" : "Download abbrechen"
        }
    },
    "models": {
@@ -25,9 +25,6 @@
        }
    },
    "pages": {
-        "shared-maps": {
-            "title": "Shared maps"
-        },
        "version-viewer": {
            "launch-mods": {
                "oculus": "Oculus Mode",
@@ -42,7 +39,6 @@
                }
            },
            "maps": {
-                "title": "Shared maps",
                "search-bar": {
                    "search-placeholder": "Search a map",
                    "filters-btn": "Filters",
@@ -728,6 +724,7 @@
    "maps": {
        "map-filter-panel": {
            "duration": "Duration",
+            "nps" : "Notes Per Second",
            "tags": "tags",
            "specificities": "general",
            "requirements": "requirements"
@@ -795,7 +792,13 @@
        },
        "map-item": {
            "by": "By {songAutor}",
-            "mapped-by": "mapped by"
+            "mapped-by": "mapped by",
+            "delete": "Delete",
+            "preview" : "Preview map",
+            "bsr-code" : "BSR code",
+            "download" : "Download map",
+            "downloading" :"Downloading map",
+            "cancel-download" : "Cancel download"
        }
    },
    "models": {
@@ -25,9 +25,6 @@
        }
    },
    "pages": {
-        "shared-maps": {
-            "title": "Mapas comunes"
-        },
        "version-viewer": {
            "launch-mods": {
                "oculus": "Modo Oculus",
@@ -727,6 +724,7 @@
    "maps": {
        "map-filter-panel": {
            "duration": "Duración",
+            "nps" : "Notas Por Segundo",
            "tags": "tags",
            "specificities": "general",
            "requirements": "requisitos"
@@ -794,7 +792,13 @@
        },
        "map-item": {
            "by": "Por {songAutor}",
-            "mapped-by": "mapeado por"
+            "mapped-by": "mapeado por",
+            "delete": "Borrar",
+            "preview" : "Vista previa del mapa",
+            "bsr-code" : "Código BSR",
+            "download" : "Descargar mapa",
+            "downloading" :"Descargando mapa",
+            "cancel-download" : "Cancelar descarga"
        }
    },
    "models": {
@@ -25,9 +25,6 @@
        }
    },
    "pages": {
-        "shared-maps": {
-            "title": "Maps partagées"
-        },
        "version-viewer": {
            "launch-mods": {
                "oculus": "Mode Oculus",
@@ -230,8 +227,11 @@
            "steam-download": {
                "warnings": {
                    "msg": {
+                        "ManifestChecksum": "Le manifeste précédemment téléchargé ne correspond pas au nouveau 🤔",
                        "ConnectionTimeout": "Ta connexion internet semble instable 🥶",
-                        "Unknown": "Quelque chose d'étrange s'est produit 🤔 Votre connexion est surement instable."
+                        "ConnectionLost": "La connexion a été perdue, essayez à nouveau...",
+                        "ConnectionError": "Impossible de se connecter à Steam, essayez à nouveau...",
+                        "Unknown": "Quelque chose d'étrange s'est produit 🤔 Votre connexion est probablement instable."
                    }
                },
                "errors": {
@@ -724,6 +724,7 @@
    "maps": {
        "map-filter-panel": {
            "duration": "Durée",
+            "nps" : "Notes Par Seconde",
            "tags": "tags",
            "specificities": "général",
            "requirements": "requis"
@@ -791,7 +792,13 @@
        },
        "map-item": {
            "by": "Par {songAutor}",
-            "mapped-by": "mappée par"
+            "mapped-by": "mappée par",
+            "delete": "Supprimer",
+            "preview" : "Aperçu de la carte",
+            "bsr-code" : "Code BSR",
+            "download" : "Télécharger la carte",
+            "downloading" :"Téléchargement de la carte",
+            "cancel-download" : "Annuler le téléchargement"
        }
    },
    "models": {
@@ -25,9 +25,6 @@
        }
    },
    "pages": {
-        "shared-maps": {
-            "title": "共有マップ"
-        },
        "version-viewer": {
            "launch-mods": {
                "oculus": "Oculusモード",
@@ -42,7 +39,6 @@
                }
            },
            "maps": {
-                "title": "共有マップ",
                "search-bar": {
                    "search-placeholder": "マップを検索",
                    "filters-btn": "絞り込み",
@@ -728,6 +724,7 @@
    "maps": {
        "map-filter-panel": {
            "duration": "尺",
+            "nps" : "秒間ノート数",
            "tags": "タグ",
            "specificities": "一般",
            "requirements": "要Mod"
@@ -795,7 +792,13 @@
        },
        "map-item": {
            "by": "By {songAutor}",
-            "mapped-by": "作成者 "
+            "mapped-by": "作成者 ",
+            "delete": "削除",
+            "preview" : "マッププレビュー",
+            "bsr-code" : "BSRコード",
+            "download" : "マップをダウンロード",
+            "downloading" :"マップをダウンロード中",
+            "cancel-download" : "ダウンロードをキャンセル"
        }
    },
    "models": {
@@ -25,9 +25,6 @@
        }
    },
    "pages": {
-        "shared-maps": {
-            "title": "Общие карты"
-        },
        "version-viewer": {
            "launch-mods": {
                "oculus": "Режим Oculus",
@@ -42,7 +39,6 @@
                }
            },
            "maps": {
-                "title": "Общие карты",
                "search-bar": {
                    "search-placeholder": "Поиск среди карт",
                    "filters-btn": "Фильтр",
@@ -728,6 +724,7 @@
    "maps": {
        "map-filter-panel": {
            "duration": "Длительность",
+            "nps" : "Нот в Секунду",
            "tags": "тэги",
            "specificities": "основное",
            "requirements": "требуемые моды"
@@ -795,7 +792,13 @@
        },
        "map-item": {
            "by": "От {songAutor}",
-            "mapped-by": "автор карты "
+            "mapped-by": "автор карты ",
+            "delete": "Удалить",
+            "preview" : "Предпросмотр карты",
+            "bsr-code" : "Код BSR",
+            "download" : "Скачать карту",
+            "downloading" :"Загрузка карты",
+            "cancel-download" : "Отменить загрузку"
        }
    },
    "models": {
@@ -25,9 +25,6 @@
        }
    },
    "pages": {
-        "shared-maps": {
-            "title": "共享譜面 "
-        },
        "version-viewer": {
            "launch-mods": {
                "oculus": "Oculus 模式",
@@ -42,7 +39,6 @@
                }
            },
            "maps": {
-                "title": "Shared maps",
                "search-bar": {
                    "search-placeholder": "譜面搜尋",
                    "filters-btn": "篩選",
@@ -653,7 +649,6 @@
                "valid-btn": "取消關聯譜面"
            }
        },
-
        "download-maps": {
            "search-btn": "搜尋",
            "loading-maps": "譜面載入中...",
@@ -729,6 +724,7 @@
    "maps": {
        "map-filter-panel": {
            "duration": "時長",
+            "nps" : "每秒音符數",
            "tags": "標籤",
            "specificities": "general",
            "requirements": "要求"
@@ -796,7 +792,13 @@
        },
        "map-item": {
            "by": "By {songAutor}",
-            "mapped-by": "mapped by"
+            "mapped-by": "mapped by",
+            "delete": "刪除",
+            "preview" : "預覽地圖",
+            "bsr-code" : "BSR代碼",
+            "download" : "下載地圖",
+            "downloading" :"正在下載地圖",
+            "cancel-download" : "取消下載"
        }
    },
    "models": {
@@ -25,9 +25,6 @@
        }
    },
    "pages": {
-        "shared-maps": {
-            "title": "共享谱面"
-        },
        "version-viewer": {
            "launch-mods": {
                "oculus": "Oculus 模式",
@@ -42,7 +39,6 @@
                }
            },
            "maps": {
-                "title": "Shared maps",
                "search-bar": {
                    "search-placeholder": "谱面搜索",
                    "filters-btn": "筛选",
@@ -653,7 +649,6 @@
                "valid-btn": "取消关联谱面"
            }
        },
-
        "download-maps": {
            "search-btn": "搜索",
            "loading-maps": "谱面加载中...",
@@ -729,6 +724,7 @@
    "maps": {
        "map-filter-panel": {
            "duration": "时长",
+            "nps" : "每秒音符数",
            "tags": "标签",
            "specificities": "general",
            "requirements": "要求"
@@ -796,7 +792,13 @@
        },
        "map-item": {
            "by": "By {songAutor}",
-            "mapped-by": "mapped by"
+            "mapped-by": "mapped by",
+            "delete": "删除",
+            "preview" : "预览地图",
+            "bsr-code" : "BSR代码",
+            "download" : "下载地图",
+            "downloading" :"正在下载地图",
+            "cancel-download" : "取消下载"
        }
    },
    "models": {
@@ -0,0 +1,243 @@
+/**
+* Code taken from https://github.com/kubeshop/monokle/blob/main/tests/electronHelpers.ts
+* don't tunch unless you know what you're doing
+*/
+
+import { Page } from "@playwright/test";
+import path from "path";
+import {ElectronApplication, _electron as electron} from 'playwright-core';
+import { pause } from "shared/helpers/promise.helpers";
+import log from "electron-log";
+import * as fs from 'fs';
+import * as ASAR from 'asar';
+
+export const TEST_OUTPUT_DIR = 'test-results';
+
+export async function startApp(): Promise<StartAppResponse> {
+    const latestBuild = findLatestBuild();
+    const appInfo = parseElectronApp(latestBuild);
+    const electronApp = await electron.launch({
+        args: [appInfo.main],
+        env: {
+            ...process.env,
+            E2E_BUILD: "true",
+        },
+        executablePath: appInfo.executable,
+        recordVideo: {
+            dir: getRecordingPath(appInfo.platform),
+            size: {
+                width: 1200,
+                height: 800,
+            },
+        },
+    });
+  
+    const appWindow = await electronApp.firstWindow();
+
+    if (!appWindow) {
+        throw new Error('Unable to get main window');
+    }
+
+    await pause(3000);
+
+    appWindow.on('console', log.info);
+    appWindow.screenshot({path: path.join(TEST_OUTPUT_DIR, "initial-screen.png")});
+  
+    return {appWindow, appInfo, electronApp};
+}
+
+export function findLatestBuild(): string {
+    const rootDir = path.resolve('./');
+    const outDir = path.join(rootDir, 'release', 'build');
+    const builds = fs.readdirSync(outDir);
+    const platforms = ['win32', 'win', 'windows', 'darwin', 'mac', 'macos', 'osx', 'linux', 'ubuntu'];
+  
+    const latestBuild = builds
+        .map(fileName => {
+            // make sure it's a directory with "-" delimited platform in its name
+            const stats = fs.statSync(path.join(outDir, fileName));
+            const isBuild = fileName.toLocaleLowerCase().split('-').some(part => platforms.includes(part));
+
+            if(!stats.isDirectory() || !isBuild){ return undefined; }
+
+            return {
+                name: fileName,
+                time: fs.statSync(path.join(outDir, fileName)).mtimeMs,
+            };
+        })
+        .sort((a, b) => b.time - a.time)
+        .map(file => file?.name)[0];
+
+    if (!latestBuild) {
+        throw new Error('No build found in out directory');
+    }
+    
+    return path.join(outDir, latestBuild);
+}
+
+/**
+ * Given a directory containing an Electron app build,
+ * return the path to the app's executable and the path to the app's main file.
+ */
+export function parseElectronApp(buildDir: string): ElectronAppInfo {
+    log.info(`Parsing Electron app in ${buildDir}`);
+
+    let platform: string | undefined;
+
+    if (buildDir.endsWith('.app')) {
+        buildDir = path.dirname(buildDir);
+        platform = 'darwin';
+    }
+    else if (buildDir.endsWith('.exe')) {
+        buildDir = path.dirname(buildDir);
+        platform = 'win32';
+    }
+  
+    const baseName = path.basename(buildDir).toLowerCase();
+    if (!platform) {
+        // parse the directory name to figure out the platform
+        if (baseName.includes('win')) {
+            platform = 'win32';
+        }
+        if (baseName.includes('linux') || baseName.includes('ubuntu') || baseName.includes('debian')) {
+            platform = 'linux';
+        }
+        if (baseName.includes('darwin') || baseName.includes('mac') || baseName.includes('osx')) {
+            platform = 'darwin';
+        }
+    }
+  
+    if (!platform) {
+        throw new Error(`Platform not found in directory name: ${baseName}`);
+    }
+  
+    let arch: Architecture;
+    if (baseName.includes('x32') || baseName.includes('i386')) {
+        arch = 'x32';
+    }
+    if (baseName.includes('x64')) {
+        arch = 'x64';
+    }
+    if (baseName.includes('arm64')) {
+        arch = 'arm64';
+    }
+  
+    let executable: string;
+    let main: string;
+    let name: string;
+    let asar: boolean;
+    let resourcesDir: string;
+  
+    if (platform === 'darwin') {
+      // MacOS Structure
+      // <buildDir>/
+      //   <appName>.app/
+      //     Contents/
+      //       MacOS/
+      //        <appName> (executable)
+      //       Info.plist
+      //       PkgInfo
+      //       Resources/
+      //         electron.icns
+      //         file.icns
+      //         app.asar (asar bundle) - or -
+      //         app
+      //           package.json
+      //           (your app structure)
+  
+        const list = fs.readdirSync(buildDir);
+        const appBundle = list.find(fileName => {
+            return fileName.endsWith('.app');
+        });
+
+        const appDir = path.join(buildDir, appBundle, 'Contents', 'MacOS');
+        const appName = fs.readdirSync(appDir)[0];
+        executable = path.join(appDir, appName);
+  
+        resourcesDir = path.join(buildDir, appBundle, 'Contents', 'Resources');
+        const resourcesList = fs.readdirSync(resourcesDir);
+        asar = resourcesList.includes('app.asar');
+  
+        let packageJson: {main: string; name: string};
+        if (asar) {
+            const asarPath = path.join(resourcesDir, 'app.asar');
+            packageJson = JSON.parse(ASAR.extractFile(asarPath, 'package.json').toString('utf8'));
+            main = path.join(asarPath, packageJson.main);
+        } else {
+            packageJson = JSON.parse(fs.readFileSync(path.join(resourcesDir, 'app', 'package.json'), 'utf8'));
+            main = path.join(resourcesDir, 'app', packageJson.main);
+        }
+        name = packageJson.name;
+    } 
+    else if (platform === 'win32') {
+      // Windows Structure
+      // <buildDir>/
+      //   <appName>.exe (executable)
+      //   resources/
+      //     app.asar (asar bundle) - or -
+      //     app
+      //       package.json
+      //       (your app structure)
+  
+        const list = fs.readdirSync(buildDir);
+        const exe = list.find(fileName => {
+            return fileName.endsWith('.exe');
+        });
+
+        executable = path.join(buildDir, exe);
+  
+        resourcesDir = path.join(buildDir, 'resources');
+        const resourcesList = fs.readdirSync(resourcesDir);
+        asar = resourcesList.includes('app.asar');
+  
+        let packageJson: {main: string; name: string};
+  
+        if (asar) {
+            const asarPath = path.join(resourcesDir, 'app.asar');
+            packageJson = JSON.parse(ASAR.extractFile(asarPath, 'package.json').toString('utf8'));
+            main = path.join(asarPath, packageJson.main);
+        } else {
+            packageJson = JSON.parse(fs.readFileSync(path.join(resourcesDir, 'app', 'package.json'), 'utf8'));
+            main = path.join(resourcesDir, 'app', packageJson.main);
+        }
+        name = packageJson.name;
+    } 
+    else {
+        /**  @todo add support for linux */
+        throw new Error(`Platform not supported: ${platform}`);
+    }
+
+    return { executable, main, asar, name, platform, resourcesDir, arch };
+}
+
+export function getRecordingPath(...paths: string[]): string {
+    return path.join(TEST_OUTPUT_DIR, ...paths);
+}
+
+export function getMainWindow(windows: Page[]): Page {
+    const mainWindow = windows.find(w => w.url().includes('index.html'));
+    return mainWindow;
+}
+
+type Architecture = 'x64' | 'x32' | 'arm64';
+export interface ElectronAppInfo {
+  /** Path to the app's executable file */
+  executable: string;
+  /** Path to the app's main (JS) file */
+  main: string;
+  /** Name of the app */
+  name: string;
+  /** Resources directory */
+  resourcesDir: string;
+  /** True if the app is using asar */
+  asar: boolean;
+  /** OS platform */
+  platform: 'darwin' | 'win32' | 'linux';
+  arch: Architecture;
+}
+
+interface StartAppResponse {
+    electronApp: ElectronApplication;
+    appWindow: Page;
+    appInfo: ElectronAppInfo;
+}
@@ -0,0 +1,55 @@
+import {Page} from 'playwright';
+import { test, expect } from '@playwright/test';
+import { getRecordingPath, startApp } from './helpers/electron.helpers';
+import { pause } from 'shared/helpers/promise.helpers';
+import { MainWindow } from './models/main-window.class';
+import { AddVersionPanel } from './models/add-version-panel.class';
+
+
+let appWindow: Page;
+let mainWindow: MainWindow;
+let addVersionPanel: AddVersionPanel;
+
+test.beforeAll(async () => {
+    const startAppResponse = await startApp();
+    appWindow = startAppResponse.appWindow;
+    mainWindow = new MainWindow(appWindow);
+    addVersionPanel = new AddVersionPanel(appWindow);
+});
+
+test.beforeEach(async () => {
+    await pause(1000);
+    await mainWindow.clickAddVersionButton();
+});
+
+test.afterEach(async () => {
+    await pause(1000);
+});
+
+test('should be able to select then unselect a bs version', async () => {
+    const versionManifest = "8948172000430595334";
+    await addVersionPanel.selectYear("2021");
+    await pause(1000);
+
+    await addVersionPanel.clickVersion(versionManifest); // select version 0.12.2
+    await pause(1000);
+
+    expect(await addVersionPanel.downloadVersionButton.isVisible()).toBeTruthy();
+
+    await addVersionPanel.clickVersion(versionManifest);  // deselect version 0.12.2
+    await pause(3000);
+
+    expect(await addVersionPanel.downloadVersionButton.isVisible()).toBeFalsy();
+
+    // sadly we can't test if the download works or not :( (Steam ids, dot-net, etc)
+});
+
+test('should be able to download a map then delete it', async () => {
+    // TODO: implement this test
+});
+
+test.afterAll(async () => {
+    await pause(3000);
+    await appWindow.screenshot({path: getRecordingPath("final-screen.png")});
+    await appWindow.close();
+});
@@ -0,0 +1,26 @@
+import { Page, Locator } from "playwright";
+import { MainWindow } from "./main-window.class";
+
+export class AddVersionPanel extends MainWindow {
+
+    private readonly _yearsTabBar: Locator;
+    private readonly _downloadVersionButton: Locator;
+
+    constructor(page: Page) {
+        super(page);
+
+        this._yearsTabBar = page.locator("#version-years-tab-bar");
+        this._downloadVersionButton = page.locator("#download-version-btn");
+    }
+
+    selectYear(year: string): Promise<void>{
+        return this._yearsTabBar.getByText(year).click();
+    }
+
+    clickVersion(manifest: string): Promise<void>{
+        return this._page.locator(`#version-item-${manifest}`).click();
+    }
+
+    get downloadVersionButton(): Locator { return this._downloadVersionButton; }
+
+}
@@ -0,0 +1,36 @@
+import { Page, Locator } from "playwright"
+
+export class MainWindow {
+
+    protected readonly _page: Page;
+
+    private readonly _bsmLogo: Locator;
+    private readonly _addVersionButton: Locator;
+    private readonly _settingsButton: Locator;
+    private readonly _sharedContentButton: Locator;
+
+    constructor(page: Page) {
+        this._page = page;
+
+        this._bsmLogo = page.locator("#bsm-logo");
+        this._addVersionButton = page.locator("#add-version-btn");
+        this._settingsButton = page.locator("#settings-btn");
+        this._sharedContentButton = page.locator("#shared-contents-btn");
+    }
+    public async clickBsmLogo(): Promise<void> {
+        return this._bsmLogo.click();
+    }
+
+    public async clickAddVersionButton(): Promise<void> {
+        return this._addVersionButton.click();
+    }
+
+    public async clickSettingsButton(): Promise<void> {
+        return this._settingsButton.click();
+    }
+
+    public async clickSharedContentButton(): Promise<void> {
+        return this._sharedContentButton.click();
+    }
+
+}
@@ -55,6 +55,7 @@
            },
            "devDependencies": {
                "@electron/rebuild": "^3.2.13",
+                "@playwright/test": "^1.38.1",
                "@pmmmwh/react-refresh-webpack-plugin": "0.5.5",
                "@teamsupercell/typings-for-css-modules-loader": "^2.5.1",
                "@testing-library/jest-dom": "^5.16.5",
@@ -81,6 +82,7 @@
                "@types/webpack-env": "^1.18.0",
                "@typescript-eslint/eslint-plugin": "^5.34.0",
                "@typescript-eslint/parser": "^5.34.0",
+                "asar": "^3.2.0",
                "autoprefixer": "^10.4.8",
                "browserslist-config-erb": "^0.0.3",
                "chalk": "^4.1.2",
@@ -114,6 +116,8 @@
                "lint-staged": "^12.5.0",
                "mini-css-extract-plugin": "^2.6.1",
                "opencollective-postinstall": "^2.0.3",
+                "playwright": "^1.38.1",
+                "playwright-core": "^1.38.1",
                "postcss": "^8.4.16",
                "postcss-loader": "^6.2.1",
                "prettier": "^2.7.1",
@@ -137,7 +141,8 @@
                "webpack-bundle-analyzer": "^4.6.1",
                "webpack-cli": "^4.10.0",
                "webpack-dev-server": "^4.10.0",
-                "webpack-merge": "^5.8.0"
+                "webpack-merge": "^5.8.0",
+                "xvfb-maybe": "^0.2.1"
            }
        },
        "node_modules/@adobe/css-tools": {
@@ -2015,6 +2020,21 @@
                "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
            }
        },
+        "node_modules/@playwright/test": {
+            "version": "1.38.1",
+            "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.1.tgz",
+            "integrity": "sha512-NqRp8XMwj3AK+zKLbZShl0r/9wKgzqI/527bkptKXomtuo+dOjU9NdMASQ8DNC9z9zLOMbG53T4eihYr3XR+BQ==",
+            "dev": true,
+            "dependencies": {
+                "playwright": "1.38.1"
+            },
+            "bin": {
+                "playwright": "cli.js"
+            },
+            "engines": {
+                "node": ">=16"
+            }
+        },
        "node_modules/@pmmmwh/react-refresh-webpack-plugin": {
            "version": "0.5.5",
            "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.5.tgz",
@@ -4123,6 +4143,48 @@
                "node": ">=0.10.0"
            }
        },
+        "node_modules/asar": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/asar/-/asar-3.2.0.tgz",
+            "integrity": "sha512-COdw2ZQvKdFGFxXwX3oYh2/sOsJWJegrdJCGxnN4MZ7IULgRBp9P6665aqj9z1v9VwP4oP1hRBojRDQ//IGgAg==",
+            "deprecated": "Please use @electron/asar moving forward.  There is no API change, just a package name change",
+            "dev": true,
+            "dependencies": {
+                "chromium-pickle-js": "^0.2.0",
+                "commander": "^5.0.0",
+                "glob": "^7.1.6",
+                "minimatch": "^3.0.4"
+            },
+            "bin": {
+                "asar": "bin/asar.js"
+            },
+            "engines": {
+                "node": ">=10.12.0"
+            },
+            "optionalDependencies": {
+                "@types/glob": "^7.1.1"
+            }
+        },
+        "node_modules/asar/node_modules/@types/glob": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz",
+            "integrity": "sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==",
+            "dev": true,
+            "optional": true,
+            "dependencies": {
+                "@types/minimatch": "*",
+                "@types/node": "*"
+            }
+        },
+        "node_modules/asar/node_modules/commander": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+            "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+            "dev": true,
+            "engines": {
+                "node": ">= 6"
+            }
+        },
        "node_modules/asn1": {
            "version": "0.2.6",
            "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
@@ -4952,9 +5014,9 @@
            }
        },
        "node_modules/caniuse-lite": {
-            "version": "1.0.30001508",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001508.tgz",
-            "integrity": "sha512-sdQZOJdmt3GJs1UMNpCCCyeuS2IEGLXnHyAo9yIO5JJDjbjoVRij4M1qep6P6gFpptD1PqIYgzM+gwJbOi92mw==",
+            "version": "1.0.30001572",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001572.tgz",
+            "integrity": "sha512-1Pbh5FLmn5y4+QhNyJE9j3/7dK44dGB83/ZMjv/qJk86TvDbjk0LosiZo0i0WB0Vx607qMX9jYrn1VLHCkN4rw==",
            "dev": true,
            "funding": [
                {
@@ -14451,6 +14513,36 @@
                "node": ">=8"
            }
        },
+        "node_modules/playwright": {
+            "version": "1.38.1",
+            "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.1.tgz",
+            "integrity": "sha512-oRMSJmZrOu1FP5iu3UrCx8JEFRIMxLDM0c/3o4bpzU5Tz97BypefWf7TuTNPWeCe279TPal5RtPPZ+9lW/Qkow==",
+            "dev": true,
+            "dependencies": {
+                "playwright-core": "1.38.1"
+            },
+            "bin": {
+                "playwright": "cli.js"
+            },
+            "engines": {
+                "node": ">=16"
+            },
+            "optionalDependencies": {
+                "fsevents": "2.3.2"
+            }
+        },
+        "node_modules/playwright-core": {
+            "version": "1.38.1",
+            "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.1.tgz",
+            "integrity": "sha512-tQqNFUKa3OfMf4b2jQ7aGLB8o9bS3bOY0yMEtldtC2+spf8QXG9zvXLTXUeRsoNuxEYMgLYR+NXfAa1rjKRcrg==",
+            "dev": true,
+            "bin": {
+                "playwright-core": "cli.js"
+            },
+            "engines": {
+                "node": ">=16"
+            }
+        },
        "node_modules/plist": {
            "version": "3.1.0",
            "resolved": "https://registry.npmjs.org/plist/-/plist-3.1.0.tgz",
@@ -19081,6 +19173,46 @@
                "node": ">=0.4"
            }
        },
+        "node_modules/xvfb-maybe": {
+            "version": "0.2.1",
+            "resolved": "https://registry.npmjs.org/xvfb-maybe/-/xvfb-maybe-0.2.1.tgz",
+            "integrity": "sha512-9IyRz3l6Qyhl6LvnGRF5jMPB4oBEepQnuzvVAFTynP6ACLLSevqigICJ9d/+ofl29m2daeaVBChnPYUnaeJ7yA==",
+            "dev": true,
+            "dependencies": {
+                "debug": "^2.2.0",
+                "which": "^1.2.4"
+            },
+            "bin": {
+                "xvfb-maybe": "src/xvfb-maybe.js"
+            }
+        },
+        "node_modules/xvfb-maybe/node_modules/debug": {
+            "version": "2.6.9",
+            "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+            "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+            "dev": true,
+            "dependencies": {
+                "ms": "2.0.0"
+            }
+        },
+        "node_modules/xvfb-maybe/node_modules/ms": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+            "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+            "dev": true
+        },
+        "node_modules/xvfb-maybe/node_modules/which": {
+            "version": "1.3.1",
+            "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+            "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+            "dev": true,
+            "dependencies": {
+                "isexe": "^2.0.0"
+            },
+            "bin": {
+                "which": "bin/which"
+            }
+        },
        "node_modules/y18n": {
            "version": "5.0.8",
            "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@@ -20675,6 +20807,15 @@
                "rimraf": "^3.0.2"
            }
        },
+        "@playwright/test": {
+            "version": "1.38.1",
+            "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.1.tgz",
+            "integrity": "sha512-NqRp8XMwj3AK+zKLbZShl0r/9wKgzqI/527bkptKXomtuo+dOjU9NdMASQ8DNC9z9zLOMbG53T4eihYr3XR+BQ==",
+            "dev": true,
+            "requires": {
+                "playwright": "1.38.1"
+            }
+        },
        "@pmmmwh/react-refresh-webpack-plugin": {
            "version": "0.5.5",
            "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.5.tgz",
@@ -22400,6 +22541,38 @@
            "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
            "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA=="
        },
+        "asar": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/asar/-/asar-3.2.0.tgz",
+            "integrity": "sha512-COdw2ZQvKdFGFxXwX3oYh2/sOsJWJegrdJCGxnN4MZ7IULgRBp9P6665aqj9z1v9VwP4oP1hRBojRDQ//IGgAg==",
+            "dev": true,
+            "requires": {
+                "@types/glob": "^7.1.1",
+                "chromium-pickle-js": "^0.2.0",
+                "commander": "^5.0.0",
+                "glob": "^7.1.6",
+                "minimatch": "^3.0.4"
+            },
+            "dependencies": {
+                "@types/glob": {
+                    "version": "7.2.0",
+                    "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz",
+                    "integrity": "sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==",
+                    "dev": true,
+                    "optional": true,
+                    "requires": {
+                        "@types/minimatch": "*",
+                        "@types/node": "*"
+                    }
+                },
+                "commander": {
+                    "version": "5.1.0",
+                    "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+                    "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+                    "dev": true
+                }
+            }
+        },
        "asn1": {
            "version": "0.2.6",
            "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
@@ -23045,9 +23218,9 @@
            }
        },
        "caniuse-lite": {
-            "version": "1.0.30001508",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001508.tgz",
-            "integrity": "sha512-sdQZOJdmt3GJs1UMNpCCCyeuS2IEGLXnHyAo9yIO5JJDjbjoVRij4M1qep6P6gFpptD1PqIYgzM+gwJbOi92mw==",
+            "version": "1.0.30001572",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001572.tgz",
+            "integrity": "sha512-1Pbh5FLmn5y4+QhNyJE9j3/7dK44dGB83/ZMjv/qJk86TvDbjk0LosiZo0i0WB0Vx607qMX9jYrn1VLHCkN4rw==",
            "dev": true
        },
        "caseless": {
@@ -30236,6 +30409,22 @@
                "find-up": "^3.0.0"
            }
        },
+        "playwright": {
+            "version": "1.38.1",
+            "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.1.tgz",
+            "integrity": "sha512-oRMSJmZrOu1FP5iu3UrCx8JEFRIMxLDM0c/3o4bpzU5Tz97BypefWf7TuTNPWeCe279TPal5RtPPZ+9lW/Qkow==",
+            "dev": true,
+            "requires": {
+                "fsevents": "2.3.2",
+                "playwright-core": "1.38.1"
+            }
+        },
+        "playwright-core": {
+            "version": "1.38.1",
+            "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.1.tgz",
+            "integrity": "sha512-tQqNFUKa3OfMf4b2jQ7aGLB8o9bS3bOY0yMEtldtC2+spf8QXG9zvXLTXUeRsoNuxEYMgLYR+NXfAa1rjKRcrg==",
+            "dev": true
+        },
        "plist": {
            "version": "3.1.0",
            "resolved": "https://registry.npmjs.org/plist/-/plist-3.1.0.tgz",
@@ -33600,6 +33789,42 @@
            "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
            "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
        },
+        "xvfb-maybe": {
+            "version": "0.2.1",
+            "resolved": "https://registry.npmjs.org/xvfb-maybe/-/xvfb-maybe-0.2.1.tgz",
+            "integrity": "sha512-9IyRz3l6Qyhl6LvnGRF5jMPB4oBEepQnuzvVAFTynP6ACLLSevqigICJ9d/+ofl29m2daeaVBChnPYUnaeJ7yA==",
+            "dev": true,
+            "requires": {
+                "debug": "^2.2.0",
+                "which": "^1.2.4"
+            },
+            "dependencies": {
+                "debug": {
+                    "version": "2.6.9",
+                    "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+                    "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+                    "dev": true,
+                    "requires": {
+                        "ms": "2.0.0"
+                    }
+                },
+                "ms": {
+                    "version": "2.0.0",
+                    "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+                    "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+                    "dev": true
+                },
+                "which": {
+                    "version": "1.3.1",
+                    "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+                    "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+                    "dev": true,
+                    "requires": {
+                        "isexe": "^2.0.0"
+                    }
+                }
+            }
+        },
        "y18n": {
            "version": "5.0.8",
            "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@@ -14,7 +14,9 @@
        "start:preload": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.preload.dev.ts",
        "start:renderer": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./.erb/configs/webpack.config.renderer.dev.ts",
        "test": "jest",
-        "publish": "npm run build && electron-builder -c.win.certificateSha1=842a817a51e2a1d360fcd62f54bf5f9193e919e1 --publish always --win --x64"
+        "publish": "npm run build && electron-builder -c.win.certificateSha1=842a817a51e2a1d360fcd62f54bf5f9193e919e1 --publish always --win --x64",
+        "e2e-test": "npm run package && xvfb-maybe npx playwright test --workers=1",
+        "e2e-test-ci": "xvfb-maybe npx playwright test --workers=1"
    },
    "lint-staged": {
        "*.{js,jsx,ts,tsx}": [
@@ -149,12 +151,14 @@
    },
    "devDependencies": {
        "@electron/rebuild": "^3.2.13",
+        "@playwright/test": "^1.38.1",
        "@pmmmwh/react-refresh-webpack-plugin": "0.5.5",
        "@teamsupercell/typings-for-css-modules-loader": "^2.5.1",
        "@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^13.3.0",
        "@types/archiver": "^5.3.1",
        "@types/color": "^3.0.3",
+        "@types/crypto-js": "^4.2.1",
        "@types/dateformat": "^5.0.0",
        "@types/jest": "^27.5.2",
        "@types/node": "17.0.23",
@@ -172,9 +176,9 @@
        "@types/use-double-click": "^1.0.1",
        "@types/webpack-bundle-analyzer": "^4.4.2",
        "@types/webpack-env": "^1.18.0",
-        "@types/crypto-js": "^4.2.1",
        "@typescript-eslint/eslint-plugin": "^5.34.0",
        "@typescript-eslint/parser": "^5.34.0",
+        "asar": "^3.2.0",
        "autoprefixer": "^10.4.8",
        "browserslist-config-erb": "^0.0.3",
        "chalk": "^4.1.2",
@@ -208,6 +212,8 @@
        "lint-staged": "^12.5.0",
        "mini-css-extract-plugin": "^2.6.1",
        "opencollective-postinstall": "^2.0.3",
+        "playwright": "^1.38.1",
+        "playwright-core": "^1.38.1",
        "postcss": "^8.4.16",
        "postcss-loader": "^6.2.1",
        "prettier": "^2.7.1",
@@ -231,7 +237,8 @@
        "webpack-bundle-analyzer": "^4.6.1",
        "webpack-cli": "^4.10.0",
        "webpack-dev-server": "^4.10.0",
-        "webpack-merge": "^5.8.0"
+        "webpack-merge": "^5.8.0",
+        "xvfb-maybe": "^0.2.1"
    },
    "dependencies": {
        "@electron/fuses": "^1.6.2",
@@ -0,0 +1,18 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+    testDir: "./e2e-tests",
+    testMatch: "**/*.test.ts",
+    timeout: 200000,
+    fullyParallel: true,
+    retries: 1,
+});
@@ -1,12 +1,12 @@
 {
  "name": "bs-manager",
-  "version": "1.4.2",
+  "version": "1.4.3",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "bs-manager",
-      "version": "1.4.2",
+      "version": "1.4.3",
      "hasInstallScript": true,
      "license": "MIT",
      "dependencies": {
@@ -5,6 +5,8 @@ import { Observable, concatMap, from } from "rxjs";
 import log from "electron-log";
 import { BsmException } from "shared/models/bsm-exception.model";
 import crypto from "crypto";
+import { execSync } from "child_process";
+import { tryit } from "../../shared/helpers/error.helpers";

 export async function pathExist(path: string): Promise<boolean> {
    try {
@@ -232,6 +234,16 @@ export async function isJunction(path: string): Promise<boolean>{
    return lstats.isSymbolicLink() && stats.isDirectory();
 }

+export function resolveGUIDPath(guidPath: string): string {
+    const guidVolume = path.parse(guidPath).root;
+    const command = `powershell -command "(Get-WmiObject -Class Win32_Volume | Where-Object { $_.DeviceID -like '${guidVolume}' }).DriveLetter"`;
+    const {result: driveLetter, error} = tryit(() => execSync(command).toString().trim());
+    if (!driveLetter || error) {
+        throw new Error("Unable to resolve GUID path", error);
+    }
+    return path.join(driveLetter, path.relative(guidVolume, guidPath));
+}
+
 export interface Progression<T = unknown> {
    total: number;
    current: number;
@@ -23,6 +23,7 @@ import { LivShortcut } from "./services/liv/liv-shortcut.service";
 import { SteamLauncherService } from "./services/bs-launcher/steam-launcher.service";

 const isDebug = process.env.NODE_ENV === "development" || process.env.DEBUG_PROD === "true";
+const isE2E = process.env.E2E_BUILD === "true";

 log.transports.file.level = "info";
 log.transports.file.resolvePath = () => {
@@ -54,7 +55,7 @@ const installExtensions = async () => {
        .catch(log.error);
 };

-const createWindow = async (window: AppWindow = "launcher.html") => {
+const createWindow = async (window: AppWindow) => {
    if (isDebug) {
        await installExtensions();
    }
@@ -98,7 +99,7 @@ if (!gotTheLock) {
        const deepLink = process.argv.find(arg => DeepLinkService.getInstance().isDeepLink(arg));

        if (!deepLink) {
-            createWindow();
+            createWindow(!isE2E ? "launcher.html" : "index.html");
        } else {
            DeepLinkService.getInstance().dispatchLinkOpened(deepLink);
        }
@@ -7,7 +7,7 @@ import { InstallationLocationService } from "../installation-location.service";
 import { UtilsService } from "../utils.service";
 import crypto from "crypto";
 import { lstatSync } from "fs";
-import { copy, createReadStream, ensureDir, realpath, unlink } from "fs-extra";
+import { copy, createReadStream, ensureDir, pathExists, realpath, unlink } from "fs-extra";
 import StreamZip from "node-stream-zip";
 import { RequestService } from "../request.service";
 import sanitize from "sanitize-filename";
@@ -255,10 +255,12 @@ export class LocalMapsManagerService {
        const mapFolderName = sanitize(`${map.id}-${map.name}`);
        const mapsFolder = await this.getMapsFolderPath(version);

-        const installedMap = await this.loadMapInfoFromPath(path.join(mapsFolder, mapFolderName)).catch(e => {
-            log.error("loadMapInfoFromPath", e);
-            return null;
-        });
+        const mapPath = path.join(mapsFolder, mapFolderName);
+
+        const installedMap = await pathExists(mapPath).then(exists => {
+            if(!exists){ return null; }
+            return this.loadMapInfoFromPath(mapPath);
+        }).catch(() => null);
        
        if(map.versions.every(version => version.hash === installedMap?.hash)) {
            return installedMap;
@@ -270,8 +272,6 @@ export class LocalMapsManagerService {
            throw `Cannot download ${zipUrl}`;
        }

-        const mapPath = path.join(mapsFolder, mapFolderName);
-
        await ensureFolderExist(mapPath);

        await zip.extract(null, mapPath);
@@ -34,7 +34,9 @@ export class OculusLauncherService extends AbstractLauncherService implements St
        this.pathsService = InstallationLocationService.getInstance();

        this.oculus.tryGetGameFolder([OCULUS_BS_DIR, OCULUS_BS_BACKUP_DIR]).then(async dirPath => {
-            if(dirPath){ return this.oculusLib$.next( path.join(dirPath, "..") ); }
+            if(dirPath){
+                return this.oculusLib$.next( path.join(dirPath, "..") );
+            }
            const defaultLib = ((await this.oculus.getOculusLibs()) || []).find(lib => lib.isDefault);
            if(defaultLib?.path){ return this.oculusLib$.next(path.join(defaultLib.path, "Software")); }
            this.oculusLib$.next(null);
@@ -57,7 +57,7 @@ export class BeatModsApiService {
            if (Array.from(aliases.keys()).some(k => k === version.BSVersion)) {
                return version;
            }
-            const alias = Array.from(aliases.entries()).find(([key, value]) => value.find(v => v.BSVersion === version.BSVersion))[0];
+            const alias = Array.from(aliases.entries()).find(([key, value]) => value.find(v => v.BSVersion === version.BSVersion))?.[0];
            return { BSVersion: alias } as BSVersion;
        });
    }
@@ -1,8 +1,9 @@
 import { list } from "regedit-rs";
 import path from "path";
-import { pathExist } from "../helpers/fs.helpers";
+import { pathExist, resolveGUIDPath } from "../helpers/fs.helpers";
 import log from "electron-log";
 import { lstat } from "fs-extra";
+import { tryit } from "../../shared/helpers/error.helpers";

 export class OculusService {
    private static instance: OculusService;
@@ -42,11 +43,16 @@ export class OculusService {
            await Promise.all(libsRegData.keys.map(async key => {
                const originalPath = await list([`${oculusLibsRegKey}\\${key}`]).then(res => res[`${oculusLibsRegKey}\\${key}`]);
                
-                if (!originalPath.values?.OriginalPath) {
-                    return null;
+                if (originalPath.values?.OriginalPath) {
+                    return { id: key, path: originalPath.values.OriginalPath.value, isDefault: defaultLibraryId === key } as OculusLibrary;
+                } 
+                
+                if(originalPath.values?.Path) {
+                    const { result } = tryit(() => resolveGUIDPath(originalPath.values.Path.value as string));
+                    return result ? { id: key, path: result, isDefault: defaultLibraryId === key } as OculusLibrary : null;
                }

-                return { id: key, path: originalPath.values.OriginalPath.value, isDefault: defaultLibraryId === key } as OculusLibrary
+                return null;
            }, []))
        ).filter(Boolean);

@@ -23,7 +23,7 @@ export const AvailableVersionItem = memo(function AvailableVersionItem({version,
    const formatedDate = useConstant(() => dateFormat(+version.ReleaseDate * 1000, "ddd. d mmm yyyy"));

    return (
-        <motion.li className="group relative w-72 h-60 active:scale-[.98]" onClick={onClick} onHoverStart={() => setHovered(true)} onHoverEnd={() => setHovered(false)}>
+        <motion.li id={`version-item-${version.BSManifest}`} className="group relative w-72 h-60 active:scale-[.98]" onClick={onClick} onHoverStart={() => setHovered(true)} onHoverEnd={() => setHovered(false)}>
            <GlowEffect visible={hovered || selected} className="absolute" />
            <div className={`relative flex flex-col overflow-hidden rounded-md w-72 h-60 cursor-pointer group-hover:shadow-none duration-300 bg-light-main-color-2 dark:bg-main-color-2 ${!selected && "shadow-lg shadow-gray-900"}`}>
                {version.recommended && (
@@ -29,7 +29,7 @@ export function AvailableVersionsSlide({ versions }: Props) {
    }

    return (
-        <ol className="w-full flex items-start justify-center gap-6 shrink-0 content-start flex-wrap px-3.5 py-4 overflow-x-hidden overflow-y-scroll scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900">
+        <ol id={`version-slide-${versions}`} className="w-full flex items-start justify-center gap-6 shrink-0 content-start flex-wrap px-3.5 py-4 overflow-x-hidden overflow-y-scroll scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900">
            {getVersions().map(version => (
                <AvailableVersionItem key={version.BSManifest} version={version} selected={equal(version, context.selectedVersion)} onClick={() => setSelectedVersion(version)}/>
            ))}
@@ -8,7 +8,7 @@ import { useObservable } from "renderer/hooks/use-observable.hook";
 export function AvailableVersionsSlider() {
    const versionManagerService = useService(BSVersionManagerService);

-    const availableVersions = useObservable(versionManagerService.availableVersions$);
+    const availableVersions = useObservable(() => versionManagerService.availableVersions$);
    const [yearIndex, setYearIndex] = useState(0);

    const availableYears = (() => {
@@ -26,7 +26,7 @@ export function AvailableVersionsSlider() {

    return (
        <div className="w-full h-fit max-h-full flex flex-col items-center grow min-h-0 gap-3">
-            <TabNavBar tabIndex={yearIndex} tabsText={availableYears} onTabChange={setSelectedYear} />
+            <TabNavBar id="version-years-tab-bar" tabIndex={yearIndex} tabsText={availableYears} onTabChange={setSelectedYear} />
            <ol className="w-full min-h-0 flex transition-transform duration-300" style={{ transform: `translate(${-(yearIndex * 100)}%, 0)` }}>
                {availableYears.map(year => (
                    <AvailableVersionsSlide key={year} versions={getVersionOfYear(year)} />
@@ -56,7 +56,7 @@ export function FilterPanel({ className, ref, playlist = false, filter, onChange
    const renderDurationLabel = (sec: number): JSX.Element => {
        const textValue = (() => {
            if (sec === MIN_DURATION) {
-                return t("maps.map-filter-panel.duration");
+                return MIN_DURATION;
            }
            if (sec === MAX_DURATION) {
                return "∞";
@@ -72,7 +72,7 @@ export function FilterPanel({ className, ref, playlist = false, filter, onChange
    const renderNpsLabel = (nps: number): JSX.Element => {
        const textValue = (() => {
            if (nps === MIN_NPS) {
-                return "NPS";
+                return MIN_NPS;
            }
            if (nps === MAX_NPS) {
                return "∞";
@@ -167,9 +167,11 @@ export function FilterPanel({ className, ref, playlist = false, filter, onChange

    return !playlist ? (
        <motion.div ref={ref} className={`${className} bg-light-main-color-2 dark:bg-main-color-3`} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
-            <div className="w-full h-6 grid grid-cols-2 gap-x-12 px-4 mb-6 pt-2">
-                <BsmRange min={MIN_NPS} max={MAX_NPS} values={npss} onChange={onNpssChange} renderLabel={renderNpsLabel} step={0.1} />
-                <BsmRange min={MIN_DURATION} max={MAX_DURATION} values={durations} onChange={onDurationsChange} renderLabel={renderDurationLabel} step={5} />
+            <div className="w-full h-6 grid grid-cols-2 gap-x-12 px-4 mb-6 pt-1">
+              <BsmRange min={MIN_NPS} max={MAX_NPS} values={npss} onChange={onNpssChange} renderLabel={renderNpsLabel} step={0.1} />
+              <BsmRange min={MIN_DURATION} max={MAX_DURATION} values={durations} onChange={onDurationsChange} renderLabel={renderDurationLabel} step={5} />
+              <span className=" text-sm font-bold text-center mt-2.5">{t("maps.map-filter-panel.nps")}</span>
+              <span className=" text-sm font-bold text-center mt-2.5">{t("maps.map-filter-panel.duration")}</span>
            </div>
            <div className="w-full h-full flex gap-x-2">
                <section className="shrink-0">
@@ -180,7 +182,6 @@ export function FilterPanel({ className, ref, playlist = false, filter, onChange
                            <span className="grow capitalize">{translateMapSpecificity(specificity)}</span>
                        </div>
                    ))}
-
                    <h2 className="my-1 uppercase text-sm">{t("maps.map-filter-panel.requirements")}</h2>
                    {MAP_REQUIREMENTS.map(requirement => (
                        <div key={requirement} className="flex justify-start items-center h-[22px] z-20 relative py-0.5 cursor-pointer" onClick={() => handleCheckbox(requirement)}>
@@ -1,48 +1,56 @@
 import { motion } from "framer-motion";
-import { forwardRef } from "react";
 import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
 import { BsmIcon } from "../svgs/bsm-icon.component";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
+import { FolderLinkState } from "renderer/services/version-folder-linker.service";

-type Props = {
+export type LinkBtnProps = {
    className?: string;
    title?: string;
-    linked?: boolean;
-    disabled?: boolean;
-    onClick?: () => void;
+    state: FolderLinkState;
+    onClick?: () => unknown;
 };

-export const LinkButton = motion(
-    forwardRef((props: Props, ref) => {
-        const t = useTranslation();
-        const color = useThemeColor("first-color");
+export const LinkButton = ({className, title, state, onClick}: LinkBtnProps) => {
+    const t = useTranslation();
+    
+    const color = useThemeColor("first-color");
+    const disabled = state === FolderLinkState.Processing || state === FolderLinkState.Pending;

-        const linkedColor = (() => {
-            if (props.disabled) {
-                return "orange";
-            }
-            if (props.linked) {
+    const btnColor = () => {
+        switch (state) {
+            case FolderLinkState.Linked:
                return color;
-            }
-            return "red";
-        })();
+            case FolderLinkState.Pending:
+            case FolderLinkState.Processing:
+                return "orange";
+            case FolderLinkState.Unlinked:
+                return "red";
+            default:
+                return "red";
+        }
+    }

-        return (
-            <div
-                ref={ref}
-                className={props.className}
-                title={props.title ? t(props.title) : undefined}
-                onClick={e => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    !props.disabled && props.onClick?.();
-                }}
-                style={{ pointerEvents: props.disabled ? "none" : "auto" }}
-                tabIndex={-1}
-            >
-                <span className="absolute top-0 left-0 h-full w-full rounded-full brightness-50 opacity-75 dark:opacity-20 dark:filter-none" style={{ backgroundColor: linkedColor }} />
-                <BsmIcon className="p-1 absolute top-0 left-0 h-full w-full !bg-transparent -rotate-45 brightness-150" icon={props.linked ? "link" : "unlink"} style={{ color: linkedColor }} />
-            </div>
-        );
-    })
-);
+    const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        !disabled && onClick?.();
+    }
+
+    return (
+        <motion.div
+            variants={{ hover: { rotate: 22.5 }, tap: { rotate: 45 } }}
+            whileHover="hover" 
+            whileTap="tap" 
+            initial={{ rotate: 0 }}
+            className={className}
+            title={title ? t(title) : null}
+            onClick={handleClick}
+            style={{ pointerEvents: disabled ? "none" : "auto" }}
+            tabIndex={-1}
+        >
+            <span className="absolute top-0 left-0 h-full w-full rounded-full brightness-50 opacity-75 dark:opacity-20 dark:filter-none" style={{ backgroundColor: btnColor() }} />
+            <BsmIcon className="p-1 absolute top-0 left-0 h-full w-full !bg-transparent -rotate-45 brightness-150" icon={state === FolderLinkState.Linked ? "link" : "unlink"} style={{ color: btnColor() }} />
+        </motion.div>
+    );
+}
@@ -429,7 +429,7 @@ export const LocalMapsListPanel = forwardRef(({ version, className, filter, sear

    return (
        <div ref={ref} className={className}>
-            <VariableSizeList className="p-0 scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900" width="100%" height={listHeight} itemSize={() => 108} itemCount={preppedMaps.length} itemData={preppedMaps} layout="vertical" style={{ scrollbarGutter: "stable both-edges" }} itemKey={(i, data) => data[i].map(map => map.hash).join()}>
+            <VariableSizeList className="scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900" width="100%" height={listHeight} itemSize={() => 108} itemCount={preppedMaps.length} itemData={preppedMaps} layout="vertical" style={{ scrollbarGutter: "stable both-edges" }} itemKey={(i, data) => data[i].map(map => map.hash).join()}>
                {props => <MapsRow maps={props.data[props.index]} style={props.style} selectedMaps$={selectedMaps$} onMapSelect={onMapSelected} onMapDelete={handleDelete} />}
            </VariableSizeList>
        </div>
@@ -21,6 +21,7 @@ import useDoubleClick from "use-double-click";
 import { GlowEffect } from "../shared/glow-effect.component";
 import { useDelayedState } from "renderer/hooks/use-delayed-state.hook";
 import { useService } from "renderer/hooks/use-service.hook";
+import Tippy from "@tippyjs/react";

 export type ParsedMapDiff = { type: BsvMapDifficultyType; name: string; stars: number };

@@ -51,7 +52,6 @@ export type MapItemProps<T = unknown> = {
 };

 export const MapItem = memo(({ hash, title, autor, songAutor, coverUrl, songUrl, autorId, mapId, diffs, ranked, bpm, duration, likes, createdAt, selected, downloading, showOwned, callBackParam, onDelete, onDownload, onSelected, onCancelDownload, onDoubleClick }: MapItemProps) => {
-    
    const linkOpener = useService(LinkOpenerService);
    const audioPlayer = useService(AudioPlayerService);

@@ -70,7 +70,7 @@ export const MapItem = memo(({ hash, title, autor, songAutor, coverUrl, songUrl,
        onDoubleClick: () => onDoubleClick?.(callBackParam),
    });

-    const songPlaying = useObservable(audioPlayer.playing$.pipe(map(playing => playing && audioPlayer.src === songUrl)));
+    const songPlaying = useObservable(() => audioPlayer.playing$.pipe(map(playing => playing && audioPlayer.src === songUrl)));

    const previewUrl = mapId ? `https://allpoland.github.io/ArcViewer/?id=${mapId}` : null;
    const mapUrl = mapId ? `https://beatsaver.com/maps/${mapId}` : null;
@@ -156,25 +156,25 @@ export const MapItem = memo(({ hash, title, autor, songAutor, coverUrl, songUrl,
    return (
        <motion.li className="relative h-[100px] w-[400px] min-w-[370px] shrink-0 grow basis-0 text-white group cursor-pointer" onHoverStart={() => setHovered(true)} onHoverEnd={() => setHovered(false)} style={{ zIndex: hovered && 5, transform: "translateZ(0) scale(1.0, 1.0)", backfaceVisibility: "hidden" }}>
            <GlowEffect visible={hovered || (selected && !!onSelected)} />
-            <AnimatePresence>
-                {(diffsPanelHovered || bottomBarHovered) && (
-                    <motion.ul key={hash} className="absolute top-[calc(100%-10px)] w-full h-fit max-h-[200%] pt-4 pb-2 px-2 overflow-y-scroll bg-light-main-color-3 dark:bg-main-color-3 text-main-color-1 dark:text-current brightness-125 rounded-md flex flex-col gap-3 scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900 shadow-sm shadow-black" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }} onHoverStart={diffsPanelHoverStart} onHoverEnd={diffsPanelHoverEnd}>
-                        {Array.from(diffs.entries()).map(([charac, diffSet]) => (
-                            <ol key={crypto.randomUUID()} className="flex flex-col w-full gap-1">
-                                {diffSet.map(({ type, name, stars }) => (
-                                    <li key={`${type}${name}${stars}`} className="w-full h-4 flex items-center gap-1">
-                                        <BsmIcon className="h-full w-fit p-px" icon={charac} />
-                                        <span className="h-full px-2 flex items-center text-xs font-bold bg-current rounded-full" style={{ color: MAP_DIFFICULTIES_COLORS[type] }}>
-                                            {stars ? <span className="h-full block brightness-[.25]">★ {stars}</span> : <span className="h-full brightness-[.25] leading-4 pb-[2px] capitalize">{parseDiffLabel(type)}</span>}
-                                        </span>
-                                        <span className="text-sm leading-4 pb-[2px] capitalize">{parseDiffLabel(name)}</span>
-                                    </li>
-                                ))}
-                            </ol>
-                        ))}
-                    </motion.ul>
-                )}
-            </AnimatePresence>
+                <AnimatePresence>
+                    {(diffsPanelHovered || bottomBarHovered) && (
+                        <motion.ul key={hash} className="absolute top-[calc(100%-10px)] w-full h-fit max-h-[200%] pt-4 pb-2 px-2 overflow-y-scroll bg-light-main-color-3 dark:bg-main-color-3 text-main-color-1 dark:text-current brightness-125 rounded-md flex flex-col gap-3 scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900 shadow-sm shadow-black" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }} onHoverStart={diffsPanelHoverStart} onHoverEnd={diffsPanelHoverEnd}>
+                            {Array.from(diffs.entries()).map(([charac, diffSet]) => (
+                                <ol key={crypto.randomUUID()} className="flex flex-col w-full gap-1">
+                                    {diffSet.map(({ type, name, stars }) => (
+                                        <li key={`${type}${name}${stars}`} className="w-full h-4 flex items-center gap-1">
+                                            <BsmIcon className="h-full w-fit p-px" icon={charac} />
+                                            <span className="h-full px-2 flex items-center text-xs font-bold bg-current rounded-full" style={{ color: MAP_DIFFICULTIES_COLORS[type] }}>
+                                                {stars ? <span className="h-full block brightness-[.25]">★ {stars}</span> : <span className="h-full brightness-[.25] leading-4 pb-[2px] capitalize">{parseDiffLabel(type)}</span>}
+                                            </span>
+                                            <span className="text-sm leading-4 pb-[2px] capitalize">{parseDiffLabel(name)}</span>
+                                        </li>
+                                    ))}
+                                </ol>
+                            ))}
+                        </motion.ul>
+                    )}
+                </AnimatePresence>
            <div className="h-full w-full relative pl-[100px] rounded-md overflow-hidden flex flex-row justify-end">
                <div className={`absolute top-0 left-0 h-full aspect-square cursor-pointer ${showOwned && "border-l-[5px]"}`} style={{ borderColor: showOwned && color }}>
                    <BsmImage className="w-full h-full object-cover" image={coverUrl} placeholder={defaultImage} errorImage={defaultImage} loading="lazy" />
@@ -191,8 +191,8 @@ export const MapItem = memo(({ hash, title, autor, songAutor, coverUrl, songUrl,
                    </span>
                </div>
                <div className="relative h-full w-full z-[1] rounded-md overflow-hidden -translate-x-1" ref={ref}>
-                    <BsmImage className="absolute top-0 left-0 w-full h-full -z-[1] object-cover" image={coverUrl} placeholder={defaultImage} errorImage={defaultImage} loading="lazy" />
-                    <div className="pt-1 pl-2 pr-7 top-0 left-0 w-full h-full bg-gray-600 bg-opacity-80 flex flex-col justify-between group-hover:bg-main-color-1 group-hover:bg-opacity-80">
+                    <BsmImage className="absolute top-0 left-0 w-full h-full -z-[1] object-cover saturate-200" image={coverUrl} placeholder={defaultImage} errorImage={defaultImage} loading="lazy" />
+                    <div className="pt-1 pl-2 pr-7 top-0 left-0 w-full h-full bg-neutral-600 bg-opacity-80 flex flex-col justify-between group-hover:bg-main-color-1 group-hover:bg-opacity-80">
                        <h1 className="font-bold whitespace-nowrap text-ellipsis overflow-hidden w-full leading-5 tracking-wide text-lg" title={title}>
                            <BsmLink className="hover:underline" href={mapUrl}>
                                {title}
@@ -240,52 +240,72 @@ export const MapItem = memo(({ hash, title, autor, songAutor, coverUrl, songUrl,
                        </motion.div>
                    </div>
                </div>
-                <div className="absolute bg-light-main-color-1 dark:bg-main-color-3 top-0 h-full z-[1] w-[30px] -right-5 group-hover:right-0 transition-all">
+                <div className="absolute bg-light-main-color-3 dark:bg-main-color-3 top-0 h-full z-[1] w-[30px] -right-5 group-hover:right-0 transition-all">
                    <span className="absolute w-[10px] h-[10px] top-0 right-full bg-inherit" style={{ clipPath: 'path("M11 -1 L11 10 L10 10 A10 10 0 0 0 0 0 L0 -1 Z")' }} />
                    <span className="absolute w-[10px] h-[10px] bottom-0 right-full bg-inherit" style={{ clipPath: 'path("M11 11 L11 0 L10 0 A10 10 0 0 1 0 10 L 0 11 Z")' }} />

                    <div className="flex flex-col justify-center items-center gap-1 w-full h-full overflow-hidden opacity-0 group-hover:opacity-100">
                        {onDelete && !downloading && (
-                            <BsmButton
-                                className="w-6 h-6 p-[2px] rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
-                                iconClassName="w-full h-full brightness-75 dark:brightness-200"
-                                iconColor={color}
-                                icon="trash"
-                                withBar={false}
-                                onClick={e => {
-                                    e.stopPropagation();
-                                    onDelete(callBackParam);
-                                }}
-                            />
+                        <Tippy content={t("maps.map-item.delete")} placement="left" theme="default">
+                            <div>
+                                <BsmButton
+                                    className="w-6 h-6 p-[2px] rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
+                                    iconClassName="w-full h-full brightness-75 dark:brightness-200"
+                                    iconColor={color}
+                                    icon="trash"
+                                    withBar={false}
+                                    onClick={e => {
+                                        e.stopPropagation();
+                                        onDelete(callBackParam);
+                                    }}
+                                />
+                            </div>
+                        </Tippy>
                        )}
                        {onDownload && !downloading && (
-                            <BsmButton
-                                className="w-6 h-6 p-[2px] rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
-                                iconClassName="w-full h-full brightness-75 dark:brightness-200"
-                                iconColor={color}
-                                icon="download"
-                                withBar={false}
-                                onClick={e => {
-                                    e.stopPropagation();
-                                    onDownload(callBackParam);
-                                }}
-                            />
+                        <Tippy content={t("maps.map-item.download")} placement="left" theme="default">
+                            <div>
+                                <BsmButton
+                                    className="w-6 h-6 p-[2px] rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
+                                    iconClassName="w-full h-full brightness-75 dark:brightness-200"
+                                    iconColor={color}
+                                    icon="download"
+                                    withBar={false}
+                                    onClick={e => {
+                                        e.stopPropagation();
+                                        onDownload(callBackParam);
+                                    }}
+                                />
+                            </div>
+                        </Tippy>
                        )}
                        {onCancelDownload && !downloading && (
-                            <BsmButton
-                                className="w-6 h-6 p-1 rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
-                                iconClassName="w-full h-full brightness-75 dark:brightness-200"
-                                iconColor="red"
-                                icon="cross"
-                                withBar={false}
-                                onClick={e => {
-                                    e.stopPropagation();
-                                    onCancelDownload(callBackParam);
-                                }}
-                            />
+                        <Tippy content={t("maps.map-item.cancel-download")} placement="left" theme="default">
+                            <div>
+                                <BsmButton
+                                    className="w-6 h-6 p-1 rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
+                                    iconClassName="w-full h-full brightness-75 dark:brightness-200"
+                                    iconColor="red"
+                                    icon="cross"
+                                    withBar={false}
+                                    onClick={e => {
+                                        e.stopPropagation();
+                                        onCancelDownload(callBackParam);
+                                    }}
+                                />
+                            </div>
+                        </Tippy>
                        )}
-                        {downloading && <BsmBasicSpinner className="w-6 h-6 p-1 rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2 flex items-center justify-center" spinnerClassName="brightness-75 dark:brightness-200" style={{ color }} thikness="3px" />}
+                        {downloading &&
+                        <Tippy content={t("maps.map-item.downloading")} placement="left" theme="default">
+                        <div>
+                            <BsmBasicSpinner className="w-6 h-6 p-1 rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2 flex items-center justify-center" spinnerClassName="brightness-75 dark:brightness-200" style={{ color }} thikness="3px" />
+                        </div>
+                        </Tippy>
+                        }
                        {previewUrl && (
+                        <Tippy content={t("maps.map-item.preview")} placement="left" theme="default">
+                            <div>
                            <BsmButton
                                className="w-6 h-6 p-[2px] rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
                                iconClassName="w-full h-full brightness-75 dark:brightness-200"
@@ -297,8 +317,12 @@ export const MapItem = memo(({ hash, title, autor, songAutor, coverUrl, songUrl,
                                    openPreview();
                                }}
                            />
+                            </div>
+                        </Tippy>
                        )}
                        {mapId && (
+                        <Tippy content={t("maps.map-item.bsr-code")} placement="left" theme="default">
+                            <div>
                            <BsmButton
                                className="w-6 h-6 p-1 rounded-md !bg-inherit hover:!bg-light-main-color-2 hover:dark:!bg-main-color-2"
                                iconClassName="w-full h-full brightness-75 dark:brightness-200"
@@ -310,6 +334,8 @@ export const MapItem = memo(({ hash, title, autor, songAutor, coverUrl, songUrl,
                                    copyBsr();
                                }}
                            />
+                            </div>
+                        </Tippy>
                        )}
                    </div>
                </div>
@@ -1,24 +1,22 @@
-import { DetailedHTMLProps, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { BSVersion } from "shared/bs-version.interface";
-import { TabNavBar } from "../shared/tab-nav-bar.component";
 import { LocalMapsListPanel } from "./local-maps-list-panel.component";
 import { BsmDropdownButton, DropDownItem } from "../shared/bsm-dropdown-button.component";
 import { FilterPanel } from "./filter-panel.component";
 import { MapFilter } from "shared/models/maps/beat-saver.model";
-import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
 import { MapsManagerService } from "renderer/services/maps-manager.service";
-import { motion, Variants } from "framer-motion";
 import { MapsDownloaderService } from "renderer/services/maps-downloader.service";
 import { BsmImage } from "../shared/bsm-image.component";
 import wipGif from "../../../../assets/images/gifs/wip.gif";
-import { OsDiagnosticService } from "renderer/services/os-diagnostic.service";
-import { useObservable } from "renderer/hooks/use-observable.hook";
-import { BsmIcon } from "../svgs/bsm-icon.component";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
-import { LinkButton } from "./link-button.component";
-import { debounceTime } from "rxjs/operators";
-import { VersionFolderLinkerService, VersionLinkerActionListener } from "renderer/services/version-folder-linker.service";
+import { FolderLinkState, VersionFolderLinkerService, VersionLinkerActionListener } from "renderer/services/version-folder-linker.service";
 import { useService } from "renderer/hooks/use-service.hook";
+import { BsContentTabPanel } from "../shared/bs-content-tab-panel/bs-content-tab-panel.component";
+import { BsmButton } from "../shared/bsm-button.component";
+import { MapIcon } from "../svgs/icons/map-icon.component";
+import { PlaylistIcon } from "../svgs/icons/playlist-icon.component";
+import { useObservable } from "renderer/hooks/use-observable.hook";
+import { of } from "rxjs";

 type Props = {
    version?: BSVersion;
@@ -29,7 +27,6 @@ export function MapsPlaylistsPanel({ version, isActive }: Props) {
    
    const mapsService = useService(MapsManagerService);
    const mapsDownloader = useService(MapsDownloaderService);
-    const osDiagnostic = useService(OsDiagnosticService);
    const linker = useService(VersionFolderLinkerService);

    const [tabIndex, setTabIndex] = useState(0);
@@ -37,9 +34,7 @@ export function MapsPlaylistsPanel({ version, isActive }: Props) {
    const [mapSearch, setMapSearch] = useState("");
    const [playlistSearch, setPlaylistSearch] = useState("");
    const [mapsLinked, setMapsLinked] = useState(false);
-    const [linkingPending, setLinkingPending] = useState(false);
-    const isOnline = useObservable(osDiagnostic.isOnline$);
-    const color = useThemeColor("first-color");
+    const mapsLinkedState = useObservable(() => version ? mapsService.$mapsFolderLinkState(version) : of(null), FolderLinkState.Unlinked, [version]);
    const t = useTranslation();
    const mapsRef = useRef<any>();

@@ -50,8 +45,6 @@ export function MapsPlaylistsPanel({ version, isActive }: Props) {

        loadMapIsLinked();

-        const sub = mapsService.$mapsLinkingPending(version).pipe(debounceTime(50)).subscribe(setLinkingPending);
-
        const onMapsLinked: VersionLinkerActionListener = action => {
            if (!action.relativeFolder.includes(MapsManagerService.RELATIVE_MAPS_FOLDER)) {
                return;
@@ -63,7 +56,6 @@ export function MapsPlaylistsPanel({ version, isActive }: Props) {
        linker.onVersionFolderUnlinked(onMapsLinked);

        return () => {
-            sub.unsubscribe();
            linker.removeVersionFolderLinkedListener(onMapsLinked);
            linker.removeVersionFolderUnlinkedListener(onMapsLinked);
        };
@@ -80,6 +72,10 @@ export function MapsPlaylistsPanel({ version, isActive }: Props) {
        return setPlaylistSearch(() => value);
    };

+    const handleMapsAddClick = () => {
+        mapsDownloader.openDownloadMapModal(version, mapsRef.current.getMaps?.());
+    };
+
    const handleMapsLinkClick = () => {
        if (!mapsLinked) {
            return mapsService.linkVersion(version);
@@ -87,56 +83,6 @@ export function MapsPlaylistsPanel({ version, isActive }: Props) {
        return mapsService.unlinkVersion(version);
    };

-    const handleMapsAddClick = () => {
-        mapsDownloader.openDownloadMapModal(version, mapsRef.current.getMaps?.());
-    };
-
-    const renderTab = (props: DetailedHTMLProps<React.HTMLAttributes<HTMLLIElement>, HTMLLIElement>, text: string, index: number): JSX.Element => {
-        const onClickLink = (index: number) => {
-            if (index === 0) {
-                handleMapsLinkClick();
-            }
-        };
-
-        const onClickAdd = (index: number) => {
-            if (index === 0) {
-                handleMapsAddClick();
-            }
-        };
-
-        const variants: Variants = { hover: { rotate: 22.5 }, tap: { rotate: 45 } };
-
-        return (
-            <li className="relative text-center text-lg font-bold hover:backdrop-brightness-75 flex justify-center items-center content-center" onClick={props.onClick}>
-                <span className="text-main-color-1 dark:text-gray-200">{text}</span>
-                {index === 0 && (
-                    <div className="h-full flex absolute right-0 top-0 gap-1.5 items-center pr-2">
-                        {isOnline && (
-                            <motion.div
-                                whileHover="hover"
-                                whileTap="tap"
-                                className="relative h-[calc(100%-5px)] flex flex-row justify-center items-center shrink-0 rounded-full overflow-hidden pr-2"
-                                style={{ color }}
-                                onClick={e => {
-                                    e.stopPropagation();
-                                    onClickAdd(index);
-                                }}
-                                tabIndex={-1}
-                            >
-                                <span className="absolute top-0 left-0 h-full w-full brightness-50 opacity-75 dark:opacity-20 dark:filter-none" style={{ backgroundColor: "currentcolor" }} />
-                                <motion.div className="h-full p-0.5" variants={variants}>
-                                    <BsmIcon className="block h-full aspect-square brightness-150" icon="add" />
-                                </motion.div>
-                                <span className="text-sm brightness-150">{t("misc.add")}</span>
-                            </motion.div>
-                        )}
-                        {!!version && <LinkButton variants={variants} disabled={linkingPending} whileHover="hover" whileTap="tap" initial={{ rotate: 0 }} className="block p-0.5 h-[calc(100%-5px)] aspect-square blur-0 hover:brightness-75" linked={mapsLinked} title={mapsLinked ? "pages.version-viewer.maps.tabs.maps.actions.link-maps.tooltips.unlink" : "pages.version-viewer.maps.tabs.maps.actions.link-maps.tooltips.link"} onClick={() => onClickLink(index)} />}
-                    </div>
-                )}
-            </li>
-        );
-    };
-
    const dropDownItems = ((): DropDownItem[] => {
        if (tabIndex === 1) {
            return [];
@@ -150,6 +96,15 @@ export function MapsPlaylistsPanel({ version, isActive }: Props) {
    return (
        <div className="w-full h-full flex flex-col items-center justify-center gap-4">
            <nav className="w-full shrink-0 flex h-9 justify-center px-40 gap-2 text-main-color-1 dark:text-white">
+                <BsmButton
+                    className="flex items-center justify-center w-fit rounded-full px-2 py-1 font-bold"
+                    icon="add"
+                    text="misc.add"
+                    typeColor="primary"
+                    withBar={false}
+                    disabled={tabIndex === 1}
+                    onClick={handleMapsAddClick}
+                />
                <div className="h-full rounded-full bg-light-main-color-2 dark:bg-main-color-2 grow p-[6px]">
                    <input type="text" className="h-full w-full bg-light-main-color-1 dark:bg-main-color-1 rounded-full px-2" placeholder={t("pages.version-viewer.maps.search-bar.search-placeholder")} value={tabIndex === 0 ? mapSearch : playlistSearch} onChange={e => handleSearch(e.target.value)} tabIndex={-1} />
                </div>
@@ -158,16 +113,34 @@ export function MapsPlaylistsPanel({ version, isActive }: Props) {
                </BsmDropdownButton>
                <BsmDropdownButton className="h-full flex aspect-square relative rounded-full z-[1] bg-light-main-color-1 dark:bg-main-color-3" buttonClassName="rounded-full h-full w-full p-[6px]" icon="three-dots" withBar={false} items={dropDownItems} menuTranslationY="6px" align="center" />
            </nav>
-            <div className="w-full h-full flex flex-col bg-light-main-color-3 dark:bg-main-color-2 rounded-md shadow-black shadow-md overflow-hidden">
-                <TabNavBar className="!rounded-none shadow-sm" tabIndex={tabIndex} tabsText={["misc.maps", "misc.playlists"]} onTabChange={setTabIndex} renderTab={renderTab} />
-                <div className="w-full grow min-h-0 flex flex-row items-center transition-transform duration-300" style={{ transform: `translate(${-(tabIndex * 100)}%, 0)` }}>
+            <BsContentTabPanel
+                tabIndex={tabIndex}
+                onTabChange={index => setTabIndex(index)}
+                tabs={[
+                    {
+                        text: "misc.maps",
+                        icon: MapIcon,
+                        onClick: () => setTabIndex(0),
+                        linkProps: version ? {
+                            state: mapsLinkedState,
+                            onClick: handleMapsLinkClick,
+                        } : null,
+                    },
+                    {
+                        text: "misc.playlists",
+                        icon: PlaylistIcon,
+                        onClick: () => setTabIndex(1),
+                    },
+                ]}
+            >
+                <>
                    <LocalMapsListPanel isActive={isActive && tabIndex === 0} ref={mapsRef} className="w-full h-full shrink-0 flex flex-col" version={version} filter={mapFilter} search={mapSearch} linked={mapsLinked} />
                    <div className="w-full h-full shrink-0 flex flex-col justify-center items-center content-center gap-2 overflow-hidden text-gray-800 dark:text-gray-200">
                        <BsmImage className="rounded-md" image={wipGif} />
                        <span>Coming soon</span>
                    </div>
-                </div>
-            </div>
+                </>
+            </BsContentTabPanel>
        </div>
    );
 }
@@ -16,13 +16,10 @@ type Props = {
 };

 export const MapsRow = memo(({ maps, style, selectedMaps$, onMapSelect, onMapDelete }: Props) => {
-    const selectedMaps = useObservable<BsmLocalMap[]>(
-        selectedMaps$.pipe(
+    const selectedMaps = useObservable<BsmLocalMap[]>(() => selectedMaps$.pipe(
            map(selectedMaps => selectedMaps.filter(selected => maps.some(map => map.hash === selected.hash))),
-            distinctUntilChanged(equal)
-        ),
-        []
-    );
+            distinctUntilChanged(equal),
+        ), []);

    const extractMapDiffs = (map: BsmLocalMap): Map<BsvMapCharacteristic, ParsedMapDiff[]> => {
        const res = new Map<BsvMapCharacteristic, ParsedMapDiff[]>();
@@ -48,11 +45,30 @@ export const MapsRow = memo(({ maps, style, selectedMaps$, onMapSelect, onMapDel
    };

    const renderMapItem = (map: BsmLocalMap) => {
-        return <MapItem key={map.hash} hash={map.hash} title={map.rawInfo._songName} coverUrl={map.coverUrl} songUrl={map.songUrl} autor={map.rawInfo._levelAuthorName} songAutor={map.rawInfo._songAuthorName} bpm={map.rawInfo._beatsPerMinute} duration={map.bsaverInfo?.metadata?.duration} selected={selectedMaps.some(selected => selected.hash === map.hash)} diffs={extractMapDiffs(map)} mapId={map.bsaverInfo?.id} ranked={map.bsaverInfo?.ranked} autorId={map.bsaverInfo?.uploader?.id} likes={map.bsaverInfo?.stats?.upvotes} createdAt={map.bsaverInfo?.createdAt} onDelete={onMapDelete} onSelected={onMapSelect} callBackParam={map} />;
+        return <MapItem 
+            key={map.hash} 
+            hash={map.hash} 
+            title={map.rawInfo._songName} 
+            coverUrl={map.coverUrl} 
+            songUrl={map.songUrl} 
+            autor={map.rawInfo._levelAuthorName} 
+            songAutor={map.rawInfo._songAuthorName} 
+            bpm={map.rawInfo._beatsPerMinute} 
+            duration={map.bsaverInfo?.metadata?.duration} 
+            selected={selectedMaps.some(selected => selected.hash === map.hash)} 
+            diffs={extractMapDiffs(map)} mapId={map.bsaverInfo?.id} 
+            ranked={map.bsaverInfo?.ranked} 
+            autorId={map.bsaverInfo?.uploader?.id} 
+            likes={map.bsaverInfo?.stats?.upvotes} 
+            createdAt={map.bsaverInfo?.createdAt} 
+            onDelete={onMapDelete} 
+            onSelected={onMapSelect} 
+            callBackParam={map}
+        />;
    };

    return (
-        <ul className="h-fit w-full flex flex-nowrap basis-0 gap-x-[8px] py-1 px-3" style={style}>
+        <ul className="h-fit w-full flex flex-nowrap basis-0 gap-x-2 p-2" style={style}>
            {maps?.map(renderMapItem)}
        </ul>
    );
@@ -21,7 +21,7 @@ export const LoginToSteamModal: ModalComponent<
    const [password, setPassword] = useState("");
    const [stay, setStay] = useState(false);
    const [showPassword, setShowPassword] = useState(false);
-    const qrCodeUrl = useObservable(data.qrCode$);
+    const qrCodeUrl = useObservable(() => data.qrCode$);
    const t = useTranslation();

    useEffect(() => {
@@ -27,8 +27,8 @@ export const DownloadMapsModal: ModalComponent<void, { version: BSVersion; owned
    const progressBar = useService(ProgressBarService);
    const os = useService(OsDiagnosticService);

-    const currentDownload = useObservable(mapsDownloader.currentMapDownload$);
-    const mapsInQueue = useObservable(mapsDownloader.mapsInQueue$);
+    const currentDownload = useObservable(() => mapsDownloader.currentMapDownload$);
+    const mapsInQueue = useObservable(() => mapsDownloader.mapsInQueue$);
    const t = useTranslation();
    const filterContainerRef = useRef(null);
    const [filter, setFilter] = useState<MapFilter>({});
@@ -37,7 +37,7 @@ export const DownloadMapsModal: ModalComponent<void, { version: BSVersion; owned
    const [sortOrder, setSortOrder] = useState<SearchOrder>(BSV_SORT_ORDER.at(0));
    const [ownedMapHashs, setOwnedMapHashs] = useState<string[]>(ownedMaps?.map(map => map.hash) ?? []);
    const [loading, setLoading] = useState(false);
-    const isOnline = useObservable(os.isOnline$);
+    const isOnline = useObservable(() => os.isOnline$);
    const [searchParams, setSearchParams] = useState<SearchParams>({
        sortOrder,
        filter,
@@ -44,10 +44,10 @@ export const DownloadModelsModal: ModalComponent<void, { version: BSVersion; typ
        }))
    );

-    const currentDownload = useObservable(modelsDownloader.currentDownload$(), null);
-    const downloadQueue = useObservable(modelsDownloader.getQueue$(), []);
+    const currentDownload = useObservable(() => modelsDownloader.currentDownload$(), null);
+    const downloadQueue = useObservable(() => modelsDownloader.getQueue$(), []);
    const [msModels, msModels$] = useBehaviorSubject<MSModel[]>([]);
-    const isOnline = useObservable(os.isOnline$, true);
+    const isOnline = useObservable(() => os.isOnline$, true);
    const [error, error$] = useBehaviorSubject(false);
    const [isLoading, isLoading$] = useBehaviorSubject(false);
    const [ownedModels, setOwnedModels] = useState<BsmLocalModel[]>(owned ?? []);
@@ -1,5 +1,4 @@
 import Tippy from "@tippyjs/react";
-import { Variants } from "framer-motion";
 import { useEffect, useState } from "react";
 import { LinkButton } from "renderer/components/maps-mangement-components/link-button.component";
 import { BsmBasicSpinner } from "renderer/components/shared/bsm-basic-spinner/bsm-basic-spinner.component";
@@ -12,7 +11,7 @@ import { BSVersionManagerService } from "renderer/services/bs-version-manager.se
 import { ConfigurationService } from "renderer/services/configuration.service";
 import { IpcService } from "renderer/services/ipc.service";
 import { ModalComponent } from "renderer/services/modale.service";
-import { VersionFolderLinkerService, VersionLinkerActionType } from "renderer/services/version-folder-linker.service";
+import { FolderLinkState, VersionFolderLinkerService, VersionLinkerActionType } from "renderer/services/version-folder-linker.service";
 import { BSVersion } from "shared/bs-version.interface";

 export const ShareFoldersModal: ModalComponent<void, BSVersion> = ({ data }) => {
@@ -107,33 +106,12 @@ const FolderItem = ({ version, relativeFolder, onDelete }: FolderProps) => {

    const t = useTranslation();

-    const name = relativeFolder.split(window.electron.path.sep).at(-1);
    const color = useThemeColor("first-color");
-
-    const variants: Variants = {
-        hover: { rotate: 22.5 },
-        tap: { rotate: 45 },
-    };
-
-    const pending = useObservable(linker.isPending(version, relativeFolder));
-    const processing = useObservable(linker.isProcessing(version, relativeFolder));
-    const linkDisabled = pending || processing;
-
-    const [linked, setLinked] = useState(false);
-
-    useEffect(() => {
-        if (pending) {
-            return;
-        }
-        loadFolderIsLinked();
-    }, [version, relativeFolder, pending]);
-
-    const loadFolderIsLinked = () => {
-        linker.isVersionFolderLinked(version, relativeFolder).toPromise().then(setLinked);
-    };
+    const state = useObservable(() => linker.$folderLinkedState(version, relativeFolder), FolderLinkState.Unlinked, [version, relativeFolder]);
+    const name = relativeFolder.split(window.electron.path.sep).at(-1);

    const onClickLink = () => {
-        if (linked) {
+        if (state === FolderLinkState.Linked) {
            return linker.unlinkVersionFolder({
                version,
                relativeFolder,
@@ -150,7 +128,6 @@ const FolderItem = ({ version, relativeFolder, onDelete }: FolderProps) => {

    const cancelLink = () => {
        linker.cancelAction(version, relativeFolder);
-        loadFolderIsLinked();
    };

    return (
@@ -159,14 +136,18 @@ const FolderItem = ({ version, relativeFolder, onDelete }: FolderProps) => {
                {name}
            </span>
            <div className="flex flex-row gap-1.5">
-                <Tippy placement="left" content={t(`modals.shared-folders.buttons.${linked ? "unlink-folder" : "link-folder"}`)} arrow={false}>
-                    <LinkButton variants={variants} linked={linked} disabled={linkDisabled} whileHover="hover" whileTap="tap" className="p-0.5 h-7 shrink-0 aspect-square blur-0 cursor-pointer hover:brightness-75" onClick={onClickLink} />
+                <Tippy placement="left" content={t(`modals.shared-folders.buttons.${state === FolderLinkState.Linked ? "unlink-folder" : "link-folder"}`)} arrow={false}>
+                    <LinkButton 
+                        className="p-0.5 h-7 shrink-0 aspect-square blur-0 cursor-pointer hover:brightness-75"
+                        state={state}
+                        onClick={onClickLink}
+                    />
                </Tippy>
                {(() => {
-                    if (processing) {
+                    if (state === FolderLinkState.Processing) {
                        return <BsmBasicSpinner className="aspect-square h-7 rounded-md p-1 dark:bg-main-color-2" thikness="3.5px" style={{ color }} />;
                    }
-                    if (pending) {
+                    if (state === FolderLinkState.Pending) {
                        return (
                            <BsmButton
                                className="aspect-square h-7 rounded-md p-1"
@@ -8,7 +8,7 @@ import { BsmIcon } from "../svgs/bsm-icon.component";
 export function Modal() {
    const modalSevice = ModalService.getInstance();

-    const ModalComponent = useObservable(modalSevice.getModalToShow());
+    const ModalComponent = useObservable(() => modalSevice.getModalToShow());

    const modalData = modalSevice.getModalData();
    const resolver = modalSevice.getResolver();
@@ -1,6 +1,5 @@
 import { BSVersion } from "shared/bs-version.interface";
 import { useRef, useState } from "react";
-import { ModelsTabsNavbar } from "./models-tabs-navbar.component";
 import { ModelsGrid } from "./models-grid.component";
 import { MSModelType } from "shared/models/models/model-saber.model";
 import { BsmDropdownButton, DropDownItem } from "../shared/bsm-dropdown-button.component";
@@ -14,6 +13,16 @@ import { NotificationService } from "renderer/services/notification.service";
 import { ConfigurationService } from "renderer/services/configuration.service";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
 import { lt } from "semver";
+import { lastValueFrom, of, take } from "rxjs";
+import { FolderLinkState } from "renderer/services/version-folder-linker.service";
+import { BsContentTabItemProps } from "../shared/bs-content-tab-panel/bs-content-tab-item.component";
+import { BsContentTabPanel } from "../shared/bs-content-tab-panel/bs-content-tab-panel.component";
+import { ModelTypeAvatarIcon } from "../svgs/icons/model-type-avatar-icon.component";
+import { SvgIcon } from "../svgs/svg-icon.type";
+import { ModelTypeSaberIcon } from "../svgs/icons/model-type-saber-icon.component";
+import { ModelTypePlatformIcon } from "../svgs/icons/model-type-platform-icon.component";
+import { ModelTypeBloqIcon } from "../svgs/icons/model-type-bloq-icon.component";
+import { useObservable } from "renderer/hooks/use-observable.hook";

 export function ModelsPanel({ version, isActive, goToMods }: { version?: BSVersion; isActive: boolean; goToMods?: () => void }) {
    const modelsManager = useService(ModelsManagerService);
@@ -29,9 +38,15 @@ export function ModelsPanel({ version, isActive, goToMods }: { version?: BSVersi

    const [modelTypeTab, setModelTypeTab] = useState<MSModelType>(MSModelType.Avatar);
    const [currentTabIndex, setCurrentTabIndex] = useState<number>(0);
-
    const [search, setSearch] = useState<string>("");

+    const modelsLinkStats = {
+        [MSModelType.Avatar]: useObservable(() => version ? modelsManager.$modelsLinkingState(version, MSModelType.Avatar) : of(null), FolderLinkState.Unlinked, [version]),
+        [MSModelType.Saber]: useObservable(() => version ? modelsManager.$modelsLinkingState(version, MSModelType.Saber) : of(null), FolderLinkState.Unlinked, [version]),
+        [MSModelType.Platfrom]: useObservable(() => version ? modelsManager.$modelsLinkingState(version, MSModelType.Platfrom) : of(null), FolderLinkState.Unlinked, [version]),
+        [MSModelType.Bloq]: useObservable(() => version ? modelsManager.$modelsLinkingState(version, MSModelType.Bloq) : of(null), FolderLinkState.Unlinked, [version]),
+    }
+
    useOnUpdate(() => {
        if (!isActive || !goToMods) {
            return;
@@ -93,6 +108,44 @@ export function ModelsPanel({ version, isActive, goToMods }: { version?: BSVersi
        { text: "models.panel.actions.drop-down.delete", onClick: deleteModels, icon: "trash" },
    ];

+    const getModelTabProps = (model: MSModelType): BsContentTabItemProps => {
+
+        const onClick = async () => {
+            const state = await lastValueFrom(modelsManager.$modelsLinkingState(version, model).pipe(take(1)));
+            if (state === FolderLinkState.Pending || state === FolderLinkState.Processing) { return; }
+            if (state === FolderLinkState.Linked) {
+                modelsManager.unlinkModels(model, version);
+            } else {
+                modelsManager.linkModels(model, version);
+            }
+        }
+
+        const getModelIcon = (model: MSModelType): SvgIcon => {
+            switch (model) {
+                case MSModelType.Avatar:
+                    return ModelTypeAvatarIcon;
+                case MSModelType.Saber:
+                    return ModelTypeSaberIcon;
+                case MSModelType.Platfrom:
+                    return ModelTypePlatformIcon;
+                case MSModelType.Bloq:
+                    return ModelTypeBloqIcon;
+                default:
+                    return ModelTypeAvatarIcon;
+            }
+        }
+
+        return {
+            text: `models.types.plural.${model}`,
+            icon: getModelIcon(model),
+            onClick: () => setModelTypeTab(model),
+            linkProps: version ? {
+                onClick,
+                state: modelsLinkStats[model],
+            } : null
+        }
+    };
+
    return (
        <div ref={ref} className="w-full h-full flex flex-col items-center justify-center gap-4">
            <div className="w-full shrink-0 flex h-9 justify-center px-40 gap-2 text-main-color-1 dark:text-white">
@@ -112,24 +165,23 @@ export function ModelsPanel({ version, isActive, goToMods }: { version?: BSVersi
                </div>
                <BsmDropdownButton items={threeDotsItems} className="h-full flex aspect-square relative rounded-full z-[1] bg-light-main-color-1 dark:bg-main-color-3" buttonClassName="rounded-full h-full w-full p-[6px]" icon="three-dots" withBar={false} menuTranslationY="6px" align="center" />
            </div>
-            <div className="w-full h-full flex flex-row bg-light-main-color-3 dark:bg-main-color-2 rounded-md shadow-black shadow-md overflow-hidden">
-                <ModelsTabsNavbar
-                    className="flex-shrink-0"
-                    version={version}
-                    tabIndex={currentTabIndex}
-                    onTabChange={(index, tab) => {
-                        setModelTypeTab(() => tab.extra);
-                        setCurrentTabIndex(() => index);
-                    }}
-                />
-
-                <div className="flex-grow h-full flex flex-col transition-all duration-300" style={{ translate: `0 ${0 - currentTabIndex * 100}%` }}>
+            <BsContentTabPanel
+                tabIndex={currentTabIndex}
+                onTabChange={(index) => setCurrentTabIndex(index)}
+                tabs={[
+                    getModelTabProps(MSModelType.Avatar),
+                    getModelTabProps(MSModelType.Saber),
+                    getModelTabProps(MSModelType.Platfrom),
+                    getModelTabProps(MSModelType.Bloq),
+                ]}
+            >
+                <>
                    <ModelsGrid ref={modelsGridRefs[0]} version={version} type={MSModelType.Avatar} active={isActive && modelTypeTab === MSModelType.Avatar} search={search} downloadModels={openDownloadModal} />
                    <ModelsGrid ref={modelsGridRefs[1]} version={version} type={MSModelType.Saber} active={isActive && modelTypeTab === MSModelType.Saber} search={search} downloadModels={openDownloadModal} />
                    <ModelsGrid ref={modelsGridRefs[2]} version={version} type={MSModelType.Platfrom} active={isActive && modelTypeTab === MSModelType.Platfrom} search={search} downloadModels={openDownloadModal} />
                    <ModelsGrid ref={modelsGridRefs[3]} version={version} type={MSModelType.Bloq} active={isActive && modelTypeTab === MSModelType.Bloq} search={search} downloadModels={openDownloadModal} />
-                </div>
-            </div>
+                </>
+            </BsContentTabPanel>
        </div>
    );
 }
@@ -1,87 +0,0 @@
-import { BSVersion } from "shared/bs-version.interface";
-import { MSModelType } from "../../../shared/models/models/model-saber.model";
-import { LinkButton } from "../maps-mangement-components/link-button.component";
-import { useState } from "react";
-import { useOnUpdate } from "renderer/hooks/use-on-update.hook";
-import { ModelsManagerService } from "renderer/services/models-management/models-manager.service";
-import { BsContentNavBar, BsContentNavBarTab } from "../shared/bs-content-nav-bar.component";
-import { useConstant } from "renderer/hooks/use-constant.hook";
-import { BsmIcon } from "../svgs/bsm-icon.component";
-import { MODEL_TYPES } from "../../../shared/models/models/constants";
-import { useService } from "renderer/hooks/use-service.hook";
-import { useTranslation } from "renderer/hooks/use-translation.hook";
-
-type Props = {
-    className?: string;
-    version?: BSVersion;
-    tabIndex: number;
-    onTabChange: (index: number, tab: BsContentNavBarTab<MSModelType>) => void;
-};
-
-export function ModelsTabsNavbar({ className, version, tabIndex, onTabChange }: Props) {
-    const tabs = useConstant<BsContentNavBarTab<MSModelType>[]>(() => {
-        return MODEL_TYPES.map(type => ({
-            text: type,
-            extra: type,
-        }));
-    });
-
-    return <BsContentNavBar className={`!rounded-none shadow-sm ${className ?? ""}`} tabIndex={tabIndex} onTabChange={onTabChange} tabs={tabs} renderTab={(props, tab, activeTab) => <ModelTab version={version} modelType={tab.extra} {...props} active={tab === activeTab} />} />;
-}
-
-type TabProps = {
-    version?: BSVersion;
-    modelType: MSModelType;
-    active?: boolean;
-} & React.ComponentProps<"li">;
-
-function ModelTab({ version, modelType, active, onClick }: TabProps) {
-    const modelsManager = useService(ModelsManagerService);
-
-    const t = useTranslation();
-
-    const [modelsAreLinked, setModelsAreLinked] = useState(false);
-    const [linkBtnDisabled, setLinkBtnDisabled] = useState(false);
-
-    useOnUpdate(() => {
-        if (!version) {
-            return;
-        }
-
-        const sub = modelsManager.$modelsLinkingPending(version, modelType).subscribe(async pending => {
-            if (pending) {
-                return setLinkBtnDisabled(() => pending);
-            }
-            const modelsLinked = await modelsManager.isModelsLinked(version, modelType);
-            setModelsAreLinked(() => modelsLinked);
-            setLinkBtnDisabled(() => pending);
-        });
-
-        return () => {
-            sub.unsubscribe();
-        };
-    }, [version]);
-
-    const linkModels = () => modelsManager.linkModels(modelType, version);
-    const unlinkModels = () => modelsManager.unlinkModels(modelType, version);
-
-    const onClickLink = () => {
-        if (!version) {
-            return Promise.resolve();
-        }
-        if (modelsAreLinked) {
-            return unlinkModels();
-        }
-        return linkModels();
-    };
-
-    return (
-        <li className={`relative w-full cursor-pointer flex-1 text-center text-lg font-bold flex justify-center items-center content-center px-7 dim-on-hover ${active ? "dim" : ""}`} onClick={onClick}>
-            <div className="flex flex-col gap-0.5 justify-start items-center text-main-color-1 dark:text-gray-200">
-                <BsmIcon icon={modelType} className="w-7 h-7" />
-                <span className=" font-thin italic text-xs">{t(`models.types.plural.${modelType}`)}</span>
-            </div>
-            <div className="flex items-center absolute top-1.5 left-1.5">{!!version && <LinkButton variants={{ hover: { rotate: 22.5 }, tap: { rotate: 45 } }} disabled={linkBtnDisabled} whileHover="hover" whileTap="tap" initial={{ rotate: 0 }} className="block w-6 h-6 aspect-square blur-0 cursor-pointer hover:brightness-75" linked={modelsAreLinked} title={modelsAreLinked ? "models.panel.actions.unlink-models" : "models.panel.actions.link-models"} onClick={onClickLink} />}</div>
-        </li>
-    );
-}
@@ -12,7 +12,7 @@ export const BsManagerIcon = memo(({ className }: { className?: string }) => {
    const audioPlayer = useService(AudioPlayerService);

    const { firstColor, secondColor } = useThemeColor();
-    const playing = useObservable(audioPlayer.playing$);
+    const playing = useObservable(() => audioPlayer.playing$);

    const { bpm } = audioPlayer;

@@ -31,7 +31,7 @@ export const BsManagerIcon = memo(({ className }: { className?: string }) => {
    };

    return (
-        <motion.div className="cursor-pointer" whileTap={{ rotate: -10 }} variants={transitions} animate={playing && bpm > 0 ? "playing" : "idle"} onClick={clickAction}>
+        <motion.div id="bsm-logo" className="cursor-pointer" whileTap={{ rotate: -10 }} variants={transitions} animate={playing && bpm > 0 ? "playing" : "idle"} onClick={clickAction}>
            <svg className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
                <g fill={firstColor}>
                    <path d="M626.75,485.91l20.82,351.94a35.21,35.21,0,0,1-15.49,31.36L487.37,965.35l-.06,0A35.56,35.56,0,0,1,476,970.12a34.85,34.85,0,0,1-23.51-2.87L136.58,809.9a115.45,115.45,0,0,1-63.75-96.49L52,361.46a35.26,35.26,0,0,1,15.23-31.21l145.05-96.36a35.72,35.72,0,0,1,11.27-4.7,34.87,34.87,0,0,1,23.51,2.87L563,389.42a115.41,115.41,0,0,1,63.75,96.49Z" />
@@ -7,13 +7,14 @@ type Props = {
    progress?: number;
    isActive?: boolean;
    onCancel?: (e: React.MouseEvent) => void;
+    id?: string;
 };

-export function NavBarItem({ progress, isDownloading, children, isActive, onCancel }: Props) {
+export function NavBarItem({ progress, isDownloading, children, isActive, onCancel, id }: Props) {
    const { firstColor, secondColor } = useThemeColor();

    return (
-        <li className={`outline-none relative p-[1px] overflow-hidden rounded-xl flex justify-center items-center mb-1 ${isDownloading && "nav-item-download"} active:translate-y-[1px]`}>
+        <li id={id} className={`outline-none relative p-[1px] overflow-hidden rounded-xl flex justify-center items-center mb-1 ${isDownloading && "nav-item-download"} active:translate-y-[1px]`}>
            {isDownloading && <div className="download-progress absolute top-0 w-full h-full" style={{ transform: `translate(${-(100 - progress)}%, 0)`, background: `linear-gradient(90deg, ${firstColor}, ${secondColor}, ${firstColor}, ${secondColor})` }} />}
            <div className={`wrapper z-[1] px-1 py-[3px] w-full rounded-xl ${isDownloading && "bg-white dark:bg-black"} ${!isDownloading && "hover:bg-light-main-color-3 dark:hover:bg-main-color-3"} ${isActive && !isDownloading && "bg-light-main-color-3 dark:bg-main-color-3"}`}>
                {children}
@@ -12,11 +12,11 @@ export function SharedNavBarItem() {
    const pageState = useService(PageStateService);

    const t = useTranslation();
-    const route = useObservable(pageState.route$);
+    const route = useObservable(() => pageState.route$);
    const color = useThemeColor("first-color");

    return (
-        <NavBarItem isActive={route === "/shared"}>
+        <NavBarItem id="shared-contents-btn" isActive={route === "/shared"}>
            <Tippy content={t("nav-bar.shared.tooltip")} className="font-bold !bg-neutral-900" placement="right-end" arrow={false} duration={[100, 0]} animation="shift-away-subtle">
                <Link to="shared" className="w-full flex items-center justify-start content-center max-w-full h-[30px]">
                    <BsmIcon className="w-[19px] h-[19px] mr-[5px] shrink-0 brightness-125" icon="link" style={{ color }} />
@@ -19,8 +19,8 @@ export function NavBar() {
    const versionManager = useService(BSVersionManagerService);
    const versionDownloader = useService(BsDownloaderService);

-    const downloadingVersion = useObservable(versionDownloader.downloadingVersion$.pipe(distinctUntilChanged(equal)));
-    const installedVersions = useObservable(versionManager.installedVersions$);
+    const downloadingVersion = useObservable(() => versionDownloader.downloadingVersion$.pipe(distinctUntilChanged(equal)));
+    const installedVersions = useObservable(() => versionManager.installedVersions$);

    const color = useThemeColor("first-color");
    const t = useTranslation();
@@ -48,12 +48,12 @@ export function NavBar() {
            <NavBarSpliter />
            <div className="w-full pb-2 flex flex-col items-center content-center justify-start gap-1">
                <Tippy placement="right" content={t("nav-bar.add-version")} className="!bg-neutral-900" arrow={false}>
-                    <Link className="rounded-md w-9 h-9 flex justify-center items-center hover:bg-light-main-color-3 dark:hover:bg-main-color-3" to="blah">
+                    <Link id="add-version-btn" className="rounded-md w-9 h-9 flex justify-center items-center hover:bg-light-main-color-3 dark:hover:bg-main-color-3" to="blah">
                        <BsmIcon icon="add" className="text-blue-500 h-[34px]" style={{ color }} />
                    </Link>
                </Tippy>
                <Tippy placement="right" content={t("nav-bar.settings")} className="!bg-neutral-900" arrow={false}>
-                    <Link className="rounded-md w-9 h-9 flex justify-center items-center hover:bg-light-main-color-3 dark:hover:bg-main-color-3" to="settings">
+                    <Link id="settings-btn" className="rounded-md w-9 h-9 flex justify-center items-center hover:bg-light-main-color-3 dark:hover:bg-main-color-3" to="settings">
                        <BsmIcon icon="settings" className="text-blue-500 h-7" style={{ color }} />
                    </Link>
                </Tippy>
@@ -7,7 +7,7 @@ import { useService } from "renderer/hooks/use-service.hook";
 export function NotificationOverlay() {
    const notificationService = useService(NotificationService);

-    const notifications = useObservable(notificationService.notifications$);
+    const notifications = useObservable(() => notificationService.notifications$);

    return (
        <ul className="absolute h-full w-0 top-0 right-0 z-[100] pt-10">
@@ -9,9 +9,9 @@ import { useService } from "renderer/hooks/use-service.hook";
 export function BsmProgressBar() {
    const progressBarService = useService(ProgressBarService);

-    const progressData = useObservable(progressBarService.progressData$);
-    const visible = useObservable(progressBarService.visible$);
-    const style = useObservable(progressBarService.style$);
+    const progressData = useObservable(() => progressBarService.progressData$);
+    const visible = useObservable(() => progressBarService.visible$);
+    const style = useObservable(() => progressBarService.style$);

    const progressLabel = (() => {
        if (!progressData) {
@@ -9,7 +9,7 @@ type Props = {
 };

 export default function TextProgressBar({ value$, className, style }: Props) {
-    const value = useObservable(value$);
+    const value = useObservable(() => value$);

    const prefix = typeof value === "number" ? "%" : "";

@@ -21,7 +21,7 @@ export function SettingRadioArray<T>({ id, items, selectedItemId, selectedItemVa
    return (
        <div id={id} className="w-full flex gap-1.5" style={{flexDirection: direction}}>
            {items.map(i => (
-                <div onClick={() => onItemSelected(i)} key={i.id} className={`py-3 w-full flex cursor-pointer justify-between items-center rounded-md px-2 transition-colors duration-200 ${isSelected(i) ? "bg-light-main-color-3 dark:bg-main-color-3" : "bg-light-main-color-1 dark:bg-main-color-1"} ${i.className}`}>
+                <div onClick={() => onItemSelected(i)} key={i.id} className={`py-3 w-full flex cursor-pointer justify-between items-center rounded-md px-2 transition-colors duration-300 ${isSelected(i) ? "bg-light-main-color-3 dark:bg-main-color-3" : "bg-light-main-color-1 dark:bg-main-color-1"} ${i.className}`}>
                    <div className="flex items-center">
                        <div className="h-5 rounded-full aspect-square border-2 border-gray-800 dark:border-white p-[3px] mr-2">
                            <motion.span initial={{ scale: 0 }} animate={{ scale: isSelected(i) ? 1 : 0 }} className="h-full w-full block bg-gray-800 dark:bg-white rounded-full" />
@@ -1,30 +0,0 @@
-import { DetailedHTMLProps, Fragment } from "react";
-import { BsmIconType } from "../svgs/bsm-icon.component";
-
-type Props<T> = {
-    className?: string;
-    tabIndex: number;
-    tabs: BsContentNavBarTab<T>[];
-    renderTab: (props: DetailedHTMLProps<React.HTMLAttributes<any>, any>, tab?: BsContentNavBarTab<T>, activeTab?: BsContentNavBarTab<T>) => JSX.Element;
-    onTabChange?: (index: number, tab?: BsContentNavBarTab<T>) => void;
-};
-
-export type BsContentNavBarTab<T = unknown> = {
-    text: string;
-    icon?: BsmIconType;
-    extra?: T;
-};
-
-export function BsContentNavBar<T>({ className, tabIndex, tabs, renderTab, onTabChange }: Props<T>) {
-    const handleTabClick = (index: number) => {
-        onTabChange?.(index, tabs[index]);
-    };
-
-    return (
-        <nav className={`h-full grid grid-flow-row ${className ?? ""}`}>
-            {tabs.map((tab, i) => (
-                <Fragment key={JSON.stringify(tab)}>{renderTab({ onClick: () => handleTabClick(i) }, tab, tabs[tabIndex])}</Fragment>
-            ))}
-        </nav>
-    );
-}
@@ -0,0 +1,44 @@
+import { LinkBtnProps, LinkButton } from "renderer/components/maps-mangement-components/link-button.component";
+import { SvgIcon } from "renderer/components/svgs/svg-icon.type";
+import { useTranslation } from "renderer/hooks/use-translation.hook";
+
+export type BsContentTabItemProps<T = unknown> = {
+    text: string;
+    icon: SvgIcon;
+    active?: boolean;
+    value?: T;
+    linkProps?: LinkBtnProps;
+    onClick: (value?: T) => void;
+};
+
+type BsContentTabItemComponent<T = unknown> = ({text, icon, active, value, linkProps, onClick}: BsContentTabItemProps<T>) => JSX.Element;
+
+export const BsContentTabItem: BsContentTabItemComponent = ({ text, icon: Icon, active, value, linkProps, onClick }) => {
+
+    const t = useTranslation();
+
+    const handleClick = (e: React.MouseEvent<HTMLLIElement, MouseEvent>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClick(value);
+    }
+
+    return (
+        <li className={`relative w-full cursor-pointer flex-1 text-center text-lg font-bold flex justify-center items-center content-center px-7 bg-light-main-color-2 dark:bg-main-color-2 hover:bg-light-main-color-1 dark:hover:bg-main-color-1 ${active && "!bg-light-main-color-1 dark:!bg-main-color-1"}`} onClick={handleClick}>
+            <div className="flex flex-col gap-0.5 justify-start items-center text-main-color-1 dark:text-gray-200">
+                <Icon className="w-7 h-7"/>
+                <span className=" font-thin italic text-xs">{t(text)}</span>
+            </div>
+            {linkProps && (
+                <div className="flex items-center absolute top-1.5 left-1.5">
+                    <LinkButton
+                        state={linkProps.state} 
+                        className={linkProps.className ?? "block w-6 h-6 aspect-square blur-0 cursor-pointer hover:brightness-75"} 
+                        title={linkProps.title} 
+                        onClick={linkProps.onClick} 
+                    />
+                </div>
+            )}
+        </li>
+    );
+}
@@ -0,0 +1,35 @@
+import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
+import { LaserSlider } from "../laser-slider.component";
+import { BsContentTabItem, BsContentTabItemProps } from "./bs-content-tab-item.component";
+
+type Props<T = unknown> = Readonly<{
+    className?: string;
+    tabs: BsContentTabItemProps<T>[];
+    tabIndex: number;
+    onTabChange: (index: number, tab: BsContentTabItemProps<T>) => void;
+    children: JSX.Element;
+}>;
+
+export function BsContentTabPanel({className, tabIndex, tabs, onTabChange, children}: Props) {
+
+    const sliderColor = useThemeColor("second-color");
+
+    return (
+        <div className={className ?? "w-full h-full flex flex-row bg-light-main-color-1 dark:bg-main-color-1 rounded-md shadow-black shadow-md overflow-hidden"}>
+            <nav className="h-full grid grid-flow-row !rounded-none shadow-sm flex-shrink-0">
+                {tabs.map((tab, i) => (
+                    <BsContentTabItem 
+                        key={`${tab.text}${tab.icon}`} 
+                        {...tab}
+                        active={tab.active ?? tabIndex === i} 
+                        onClick={value => {onTabChange(i, tab); tab.onClick(value);}} 
+                    />
+                ))}
+            </nav>
+            <LaserSlider className="h-full w-1 relative shrink-0" mode="vertical" color={sliderColor} nbSteps={tabs.length} step={tabIndex}/>
+            <div className="flex-grow h-full flex flex-col transition-all duration-300" style={{ translate: `0 ${0 - tabIndex * 100}%` }}>
+                {children}
+            </div>
+        </div>
+  )
+}
@@ -9,6 +9,7 @@ import { getCorrectTextColor } from "renderer/helpers/correct-text-color";
 type BsmButtonType = "primary" | "secondary" | "success" | "cancel" | "error";

 type Props = {
+    id?: string;
    className?: string;
    style?: CSSProperties;
    imgClassName?: string;
@@ -29,7 +30,7 @@ type Props = {
    textClassName?: string;
 };

-export function BsmButton({ className, style, imgClassName, iconClassName, icon, image, text, type, active, withBar = true, disabled, onClickOutside, onClick, typeColor, color, title, iconColor, textClassName }: Props) {
+export function BsmButton({ id, className, style, imgClassName, iconClassName, icon, image, text, type, active, withBar = true, disabled, onClickOutside, onClick, typeColor, color, title, iconColor, textClassName }: Props) {
    const t = useTranslation();
    const { firstColor, secondColor } = useThemeColor();
    const ref = useRef(null);
@@ -72,7 +73,7 @@ export function BsmButton({ className, style, imgClassName, iconClassName, icon,
    const handleClick = (e: MouseEvent<HTMLDivElement>) => !disabled && onClick?.(e);

    return (
-        <div ref={ref} onClick={handleClick} title={t(title)} className={`${className} overflow-hidden group ${!withBar && !disabled && (!!typeColor || !!color) && "hover:brightness-[1.15]"} ${disabled ? "brightness-75 cursor-not-allowed" : "cursor-pointer"} ${renderTypeColor}`} style={{ ...style, backgroundColor: primaryColor || color }}>
+        <div id={id} ref={ref} onClick={handleClick} title={t(title)} className={`${className} overflow-hidden group ${!withBar && !disabled && (!!typeColor || !!color) && "hover:brightness-[1.15]"} ${disabled ? "brightness-75 cursor-not-allowed" : "cursor-pointer"} ${renderTypeColor}`} style={{ ...style, backgroundColor: primaryColor || color }}>
            {image && <BsmImage image={image} className={imgClassName} />}
            {icon && <BsmIcon icon={icon} className={iconClassName ?? "h-full w-full text-gray-800 dark:text-white"} style={{ color: iconColor || textColor }} />}
            {text &&
@@ -8,7 +8,7 @@ import { LinkOpenerService } from "renderer/services/link-opener.service";
 export function BsmIframeView() {
    const linkService = useService(LinkOpenerService);

-    const iframeUrl = useObservable(linkService.iframeLink$);
+    const iframeUrl = useObservable(() => linkService.iframeLink$);
    const ref = useRef(null);
    useClickOutside(ref, () => linkService.closeIframe());

@@ -0,0 +1,35 @@
+import { CSSProperties } from "react";
+
+type Props = Readonly<{
+    mode: "horizontal" | "vertical";
+    color: string;
+    className?: string;
+    nbSteps: number;
+    step: number;
+}>
+
+export function LaserSlider({mode, color, className, nbSteps, step}: Props) {
+
+    const sliderStyle = ((): CSSProperties => {
+        if(mode === "vertical"){
+            return {
+                transform: `translate(0, ${step * 100}%)`,
+                height: `calc(100% / ${nbSteps})`,
+                width: "100%"
+            }
+        }
+
+        return {
+            transform: `translate(${step * 100}%, 0)`,
+            width: `calc(100% / ${nbSteps})`,
+            height: "100%"
+        }
+    })();
+
+    return (
+        <div className={className} style={{ color }}>
+            <span className="absolute h-full w-full bg-current brightness-50" />
+            <span className="absolute block bg-current transition-transform duration-300 shadow-center shadow-current" style={sliderStyle} />
+        </div>
+    )
+}
@@ -1,8 +1,10 @@
 import { DetailedHTMLProps, Fragment } from "react";
 import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
+import { LaserSlider } from "./laser-slider.component";

 type Props = {
+    id?: string,
    tabIndex: number;
    tabsText: string[];
    onTabChange: (index: number) => void;
@@ -21,11 +23,8 @@ export function TabNavBar(props: Props) {
    };

    return (
-        <nav className={`relative h-8 shrink-0 cursor-pointer rounded-md overflow-hidden shadow-md shadow-black bg-light-main-color-2 dark:bg-main-color-2 ${props.className}`}>
-            <div className="absolute w-full h-1 bottom-0" style={{ color: secondColor }}>
-                <span className="absolute h-full w-full bg-current brightness-50" />
-                <span className="absolute h-full block bg-current transition-transform duration-300 shadow-center shadow-current" style={{ transform: `translate(${currentIndex * 100}%, 0)`, width: `calc(100% / ${props.tabsText.length})` }} />
-            </div>
+        <nav id={props.id} className={`relative h-8 shrink-0 cursor-pointer rounded-md overflow-hidden shadow-md shadow-black bg-light-main-color-2 dark:bg-main-color-2 ${props.className}`}>
+            <LaserSlider className="absolute w-full h-1 bottom-0" mode="horizontal" color={secondColor} nbSteps={props.tabsText.length} step={currentIndex} />
            <ul className="grid" style={{ gridTemplateColumns: `repeat(${props.tabsText.length}, minmax(0, 1fr))` }}>
                {props.tabsText.map((text, index) =>
                    props.renderTab ? (
@@ -56,20 +56,16 @@ import { RussianIcon } from "./flags/russian-icon.component";
 import { ChineseIcon } from "./flags/chinese-icon.component";
 import { ChineseTraditionalIcon } from "./flags/chineseTraditional-icon.component";
 import { JapanIcon } from "./flags/japan-icon.component";
-import { MSModelType } from "shared/models/models/model-saber.model";
-import { ModelTypeAvatarIcon } from "./icons/model-type-avatar-icon.component";
-import { ModelTypeSaberIcon } from "./icons/model-type-saber-icon.component";
-import { ModelTypePlatformIcon } from "./icons/model-type-platform-icon.component";
-import { ModelTypeBloqIcon } from "./icons/model-type-bloq-icon.component";
 import { ChevronTopIcon } from "./icons/chevron-top-icon.component";
 import { EyeCrossIcon } from "./icons/eye-cross-icon.component";
 import { ShortcutIcon } from "./icons/shortcut-icon.component";
 import { BackupRestoreIcon } from "./icons/backup-restore-icon.component";

-export type BsmIconType = BsvMapCharacteristic | MSModelType | ("settings" | "trash" | "favorite" | "folder" | "bsNote" | "check" | "three-dots" | "twitch" | "eye" | "play" | "checkCircleIcon" | "discord" | "info" | "eye-cross" | "terminal" | "desktop" | "oculus" | "add" | "cross" | "task" | "github" | "close" | "thumbUpFill" | "timerFill" | "pause" | "twitter" | "sync" | "chevron-top" | "copy" | "steam" | "edit" | "export" | "patreon" | "search" | "bsMapDifficulty" | "link" | "unlink" | "download" | "filter" | "mee6" | "volume-up" | "volume-off" | "volume-down" | "shortcut" | "backup-restore" | "fr-FR-flag" | "es-ES-flag" | "en-US-flag" | "en-EN-flag" | "de-DE-flag" | "ru-RU-flag" | "zh-CN-flag" | "zh-TW-flag" | "ja-JP-flag");
+export type BsmIconType = BsvMapCharacteristic | ("settings" | "trash" | "favorite" | "folder" | "bsNote" | "check" | "three-dots" | "twitch" | "eye" | "play" | "checkCircleIcon" | "discord" | "info" | "eye-cross" | "terminal" | "desktop" | "oculus" | "add" | "cross" | "task" | "github" | "close" | "thumbUpFill" | "timerFill" | "pause" | "twitter" | "sync" | "chevron-top" | "copy" | "steam" | "edit" | "export" | "patreon" | "search" | "bsMapDifficulty" | "link" | "unlink" | "download" | "filter" | "mee6" | "volume-up" | "volume-off" | "volume-down" | "shortcut" | "backup-restore" | "fr-FR-flag" | "es-ES-flag" | "en-US-flag" | "en-EN-flag" | "de-DE-flag" | "ru-RU-flag" | "zh-CN-flag" | "zh-TW-flag" | "ja-JP-flag");

 export const BsmIcon = memo(({ className, icon, style }: { className?: string; icon: BsmIconType; style?: CSSProperties }) => {
    // TODO : Very ugly very messy, need to find a better way to do this
+    // the rework have started, see `svg-icon.type.ts`

    const renderIcon = () => {
        if (icon === "settings") {
@@ -254,19 +250,6 @@ export const BsmIcon = memo(({ className, icon, style }: { className?: string; i
        if (icon === "backup-restore") {
            return <BackupRestoreIcon className={className} style={style} />;
        }
-
-        if (icon === MSModelType.Avatar) {
-            return <ModelTypeAvatarIcon className={className} style={style} />;
-        }
-        if (icon === MSModelType.Saber) {
-            return <ModelTypeSaberIcon className={className} style={style} />;
-        }
-        if (icon === MSModelType.Platfrom) {
-            return <ModelTypePlatformIcon className={className} style={style} />;
-        }
-        if (icon === MSModelType.Bloq) {
-            return <ModelTypeBloqIcon className={className} style={style} />;
-        }
        return <TrashIcon className={className} style={style} />;
    };

@@ -0,0 +1,9 @@
+import { createSvgIcon } from "../svg-icon.type";
+
+export const MapIcon = createSvgIcon((props, ref) => {
+    return (
+        <svg ref={ref} {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
+            <path d="m574-129-214-75-186 72q-10 4-19.5 2.5T137-136q-8-5-12.5-13.5T120-169v-561q0-13 7.5-23t20.5-15l186-63q6-2 12.5-3t13.5-1q7 0 13.5 1t12.5 3l214 75 186-72q10-4 19.5-2.5T823-824q8 5 12.5 13.5T840-791v561q0 13-7.5 23T812-192l-186 63q-6 2-12.5 3t-13.5 1q-7 0-13.5-1t-12.5-3Zm-14-89v-468l-160-56v468l160 56Z"/>
+        </svg>
+    )
+});
@@ -1,9 +1,9 @@
-import { CSSProperties } from "react";
+import { createSvgIcon } from "../svg-icon.type";

-export function ModelTypeAvatarIcon(props: { className?: string; style?: CSSProperties }) {
+export const ModelTypeAvatarIcon = createSvgIcon((props, ref) => {
    return (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props} fill="currentColor">
+        <svg ref={ref} {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
            <path d="M64 416L168.6 180.7c15.3-34.4 40.3-63.5 72-83.7l146.9-94c3-1.9 6.5-2.9 10-2.9C407.7 0 416 8.3 416 18.6v1.6c0 2.6-.5 5.1-1.4 7.5L354.8 176.9c-1.9 4.7-2.8 9.7-2.8 14.7c0 5.5 1.2 11 3.4 16.1L448 416H240.9l11.8-35.4 40.4-13.5c6.5-2.2 10.9-8.3 10.9-15.2s-4.4-13-10.9-15.2l-40.4-13.5-13.5-40.4C237 276.4 230.9 272 224 272s-13 4.4-15.2 10.9l-13.5 40.4-40.4 13.5C148.4 339 144 345.1 144 352s4.4 13 10.9 15.2l40.4 13.5L207.1 416H64zM279.6 141.5c-1.1-3.3-4.1-5.5-7.6-5.5s-6.5 2.2-7.6 5.5l-6.7 20.2-20.2 6.7c-3.3 1.1-5.5 4.1-5.5 7.6s2.2 6.5 5.5 7.6l20.2 6.7 6.7 20.2c1.1 3.3 4.1 5.5 7.6 5.5s6.5-2.2 7.6-5.5l6.7-20.2 20.2-6.7c3.3-1.1 5.5-4.1 5.5-7.6s-2.2-6.5-5.5-7.6l-20.2-6.7-6.7-20.2zM32 448H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32z" />
        </svg>
-    );
-}
+    )
+});
@@ -1,9 +1,9 @@
-import { CSSProperties } from "react";
+import { createSvgIcon } from "../svg-icon.type";

-export function ModelTypeBloqIcon(props: { className?: string; style?: CSSProperties }) {
+export const ModelTypeBloqIcon = createSvgIcon((props, ref) => {
    return (
-        <svg xmlns="http://www.w3.org/2000/svg" id="Bloq" viewBox="0 0 300 300" {...props} fill="currentColor">
+        <svg ref={ref} {...props} xmlns="http://www.w3.org/2000/svg" id="Bloq" viewBox="0 0 300 300" fill="currentColor">
            <path d="M264,0H36.05A36,36,0,0,0,0,36.05V264A36,36,0,0,0,36.05,300H264A36,36,0,0,0,300,264V36.05A36,36,0,0,0,264,0Zm2.38,52.68a5.86,5.86,0,0,1-3.53,5.37L152.08,106a5.87,5.87,0,0,1-4.7,0L39.19,58.07a5.87,5.87,0,0,1-3.48-5.35V36.46a5.85,5.85,0,0,1,5.86-5.85H260.48a5.85,5.85,0,0,1,5.85,5.85Z" />
        </svg>
    );
-}
+});
@@ -1,9 +1,9 @@
-import { CSSProperties } from "react";
+import { createSvgIcon } from "../svg-icon.type";

-export function ModelTypePlatformIcon(props: { className?: string; style?: CSSProperties }) {
+export const ModelTypePlatformIcon = createSvgIcon((props, ref) => {
    return (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props} fill="currentColor">
+        <svg ref={ref} {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
            <path d="M0 80c0 26.5 21.5 48 48 48H64v64h64V128h96v64h64V128h96v64h64V128h16c26.5 0 48-21.5 48-48V13.4C512 6 506 0 498.6 0c-1.7 0-3.4 .3-5 1l-49 19.6C425.7 28.1 405.5 32 385.2 32H126.8c-20.4 0-40.5-3.9-59.4-11.4L18.4 1c-1.6-.6-3.3-1-5-1C6 0 0 6 0 13.4V80zM64 288V480c0 17.7 14.3 32 32 32s32-14.3 32-32V288H384V480c0 17.7 14.3 32 32 32s32-14.3 32-32V288h32c17.7 0 32-14.3 32-32s-14.3-32-32-32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H64z" />
        </svg>
    );
-}
+});
@@ -1,9 +1,9 @@
-import { CSSProperties } from "react";
+import { createSvgIcon } from "../svg-icon.type";

-export function ModelTypeSaberIcon(props: { className?: string; style?: CSSProperties }) {
+export const ModelTypeSaberIcon = createSvgIcon((props, ref) => {
    return (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" {...props} fill="currentColor">
+        <svg ref={ref} {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor">
            <path d="M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z" />
        </svg>
-    );
-}
+    )
+});
@@ -0,0 +1,9 @@
+import { createSvgIcon } from "../svg-icon.type";
+
+export const PlaylistIcon = createSvgIcon((props, ref) => {
+    return (
+        <svg ref={ref} {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
+            <path d="M500-360q42 0 71-29t29-71v-220h80q17 0 28.5-11.5T720-720q0-17-11.5-28.5T680-760h-80q-17 0-28.5 11.5T560-720v180q-13-10-28-15t-32-5q-42 0-71 29t-29 71q0 42 29 71t71 29ZM320-240q-33 0-56.5-23.5T240-320v-480q0-33 23.5-56.5T320-880h480q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H320ZM160-80q-33 0-56.5-23.5T80-160v-520q0-17 11.5-28.5T120-720q17 0 28.5 11.5T160-680v520h520q17 0 28.5 11.5T720-120q0 17-11.5 28.5T680-80H160Z"/>
+        </svg>
+    )
+})
@@ -0,0 +1,10 @@
+// These types and functions are meant replace the current clunky SVG system (the one with `bsm-icon.component.tsx`) 
+
+import { ForwardedRef, forwardRef } from "react"
+
+export type SvgIcon = React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export type SvgRenderFunction = (props: React.SVGProps<SVGSVGElement>, ref: ForwardedRef<SVGSVGElement>) => JSX.Element;
+
+export function createSvgIcon(render: SvgRenderFunction): SvgIcon {
+    return forwardRef(render);
+}
@@ -16,7 +16,7 @@ export default function TitleBar({ template = "index.html" }: { template: AppWin
    const ipcService = useService(IpcService);
    const audio = useService(AudioPlayerService);

-    const volume = useObservable(audio.volume$, audio.volume);
+    const volume = useObservable(() => audio.volume$, audio.volume);
    const color = useThemeColor("first-color");

    const [previewVersion, setPreviewVersion] = useState(null);
@@ -29,9 +29,9 @@ export function LaunchSlide({ version }: Props) {
    const [debugMode, setDebugMode] = useState(!!configService.get<boolean>(LaunchMods.DEBUG_MOD));
    const [advancedLaunch, setAdvancedLaunch] = useState(false);
    const [additionalArgsString, setAdditionalArgsString] = useState<string>(configService.get<string>("additionnal-args") || "");
-    const versionDownloading = useObservable(bsDownloader.downloadingVersion$);
+    const versionDownloading = useObservable(() => bsDownloader.downloadingVersion$);

-    const versionRunning = useObservable(bsLauncherService.versionRunning$);
+    const versionRunning = useObservable(() => bsLauncherService.versionRunning$);

    useEffect(() => {
        configService.set("additionnal-args", additionalArgsString);
@@ -17,7 +17,7 @@ export function ModItem({ className, mod, installedVersion, isDependency, isSele
    const pageState = useService(PageStateService);

    const themeColor = useThemeColor("second-color");
-    const uninstalling = useObservable(modsManager.isUninstalling$);
+    const uninstalling = useObservable(() => modsManager.isUninstalling$);
    const clickRef = useRef();

    useDoubleClick({
@@ -35,8 +35,8 @@ export function ModsSlide({ version, onDisclamerDecline }: { version: BSVersion;
    const [modsInstalled, setModsInstalled] = useState(null as Map<string, Mod[]>);
    const [modsSelected, setModsSelected] = useState([] as Mod[]);
    const [moreInfoMod, setMoreInfoMod] = useState(null as Mod);
-    const isOnline = useObservable(os.isOnline$);
-    const installing = useObservable(modsManager.isInstalling$);
+    const isOnline = useObservable(() => os.isOnline$);
+    const installing = useObservable(() => modsManager.isInstalling$);

    const downloadRef = useRef(null);
    const [downloadWith, setDownloadWidth] = useState(0);
@@ -4,7 +4,7 @@ import { useConstant } from "./use-constant.hook";

 export function useBehaviorSubject<T>(value: T): [T, BehaviorSubject<T>] {
    const subject$ = useConstant(() => new BehaviorSubject(value));
-    const subjectValue = useObservable(subject$, value);
+    const subjectValue = useObservable(() => subject$, value);

    return [subjectValue, subject$];
 }
@@ -1,13 +1,13 @@
 import { Observable } from "rxjs";
 import { useState, useEffect } from "react";

-export function useObservable<T>(observable: Observable<T>, defaultValue?: T): T {
-    const [obsValue, setObsValue] = useState(defaultValue ?? (null as T));
+export function useObservable<T>(factory: () => Observable<T>, initValue?: T, deps?: unknown[]): T {
+    const [obsValue, setObsValue] = useState<T>(initValue);

    useEffect(() => {
-        const sub = observable.subscribe(val => setObsValue(() => val));
+        const sub = factory().subscribe(val => setObsValue(() => val));
        return () => sub.unsubscribe();
-    }, []);
+    }, deps ?? []);

    return obsValue;
 }
@@ -9,8 +9,8 @@ export function useThemeColor(themeColor: ThemeColor): string;
 export function useThemeColor(themeColor?: ThemeColor): string | { firstColor: string; secondColor: string } {
    const configService = useService(ConfigurationService);

-    const firstColor = useObservable(!themeColor ? configService.watch<string>("first-color" as DefaultConfigKey).pipe(throttleTime(16)) : configService.watch<string>(themeColor).pipe(throttleTime(16)));
-    const secondColor = useObservable(!themeColor ? configService.watch<string>("second-color" as DefaultConfigKey).pipe(throttleTime(16)) : of(""));
+    const firstColor = useObservable(() => !themeColor ? configService.watch<string>("first-color" as DefaultConfigKey).pipe(throttleTime(16)) : configService.watch<string>(themeColor).pipe(throttleTime(16)));
+    const secondColor = useObservable(() => !themeColor ? configService.watch<string>("second-color" as DefaultConfigKey).pipe(throttleTime(16)) : of(""));

    if (themeColor) {
        return firstColor;
@@ -6,7 +6,7 @@ export function useTranslation(): (translationKey: string, args?: Record<string,
    
    const i18nService = useService(I18nService);

-    useObservable(i18nService.currentLanguage$);
+    useObservable(() => i18nService.currentLanguage$);

    return (key: string, args?: Record<string, string>) => {
        if (!key) {
@@ -78,6 +78,24 @@
    background: rgba(0, 0, 0, 0.25);
 }

+.tippy-box[data-theme~='default'] {
+    @apply bg-neutral-900;
+    @apply text-white;
+}
+
+.tippy-box[data-theme~='default'][data-placement^='top'] > .tippy-arrow::before {
+    @apply border-t-neutral-900
+}
+.tippy-box[data-theme~='default'][data-placement^='bottom'] > .tippy-arrow::before {
+    @apply border-b-neutral-900
+}
+.tippy-box[data-theme~='default'][data-placement^='left'] > .tippy-arrow::before {
+    @apply border-l-neutral-900
+}
+.tippy-box[data-theme~='default'][data-placement^='right'] > .tippy-arrow::before {
+    @apply border-r-neutral-900
+}
+
@keyframes glowing {
    0% {
        background-position: 0 0;
@@ -22,7 +22,7 @@ export function AvailableVersionsList() {
    const [selectedVersion, setSelectedVersion] = useState<BSVersion>(null);
    const contextValue = useMemo(() => ({ selectedVersion, setSelectedVersion }), [selectedVersion]);

-    const downloading = useObservable(bsDownloader.downloadingVersion$.pipe(map(v => !!v)));
+    const downloading = useObservable(() => bsDownloader.downloadingVersion$.pipe(map(v => !!v)));
    const t = useTranslation();

    const startDownload = async () => {
@@ -56,7 +56,7 @@ export function AvailableVersionsList() {
            <AnimatePresence>
                {selectedVersion && !downloading && (
                    <motion.div initial={{ y: "150%" }} animate={{ y: "0%" }} exit={{ y: "150%" }} className="absolute bottom-5" onClick={startDownload}>
-                        <BsmButton text="misc.download" className="relative text-gray-800 dark:text-gray-100 rounded-md text-3xl font-bold italic tracking-wide px-3 pb-2 pt-1 shadow-md shadow-black" />
+                        <BsmButton id="download-version-btn" text="misc.download" className="relative text-gray-800 dark:text-gray-100 rounded-md text-3xl font-bold italic tracking-wide px-3 pb-2 pt-1 shadow-md shadow-black" />
                    </motion.div>
                )}
            </AnimatePresence>
@@ -77,9 +77,9 @@ export function SettingsPage() {
    const nav = useNavigate();
    const t = useTranslation();

-    const themeSelected = useObservable(themeService.theme$, "os");
-    const languageSelected = useObservable(i18nService.currentLanguage$, i18nService.getFallbackLanguage());
-    const downloadStore = useObservable(bsDownloader.defaultStore$);
+    const themeSelected = useObservable(() => themeService.theme$, "os");
+    const languageSelected = useObservable(() => i18nService.currentLanguage$, i18nService.getFallbackLanguage());
+    const downloadStore = useObservable(() => bsDownloader.defaultStore$);

    const [installationFolder, setInstallationFolder] = useState(null);
    const [showSupporters, setShowSupporters] = useState(false);
@@ -87,7 +87,7 @@ export function SettingsPage() {
    const [playlistsDeepLinkEnabled, setPlaylistsDeepLinkEnabled] = useState(false);
    const [modelsDeepLinkEnabled, setModelsDeepLinkEnabled] = useState(false);
    const [hasDownloaderSession, setHasDownloaderSession] = useState(false);
-    const appVersion = useObservable(ipcService.sendV2<string>("current-version"));
+    const appVersion = useObservable(() => ipcService.sendV2<string>("current-version"));

    useEffect(() => {
        loadInstallationFolder();
@@ -252,7 +252,7 @@ export function SettingsPage() {
                        </div>
                    </div>
                    <SettingContainer minorTitle="pages.settings.appearance.sub-title" className="mt-3">
-                        <SettingRadioArray items={themeItem} selectedItemValue={themeSelected} onItemSelected={handleChangeTheme} />
+                        <SettingRadioArray items={themeItem} selectedItemValue={themeSelected as ThemeConfig} onItemSelected={handleChangeTheme} />
                    </SettingContainer>
                </SettingContainer>

@@ -13,7 +13,7 @@ import { ConfigurationService } from "./configuration.service";
 import { ArchiveProgress } from "shared/models/archive.interface";
 import { map, last, catchError } from "rxjs/operators";
 import { ProgressionInterface } from "shared/models/progress-bar";
-import { VersionFolderLinkerService, VersionLinkerActionType } from "./version-folder-linker.service";
+import { FolderLinkState, VersionFolderLinkerService, VersionLinkerActionType } from "./version-folder-linker.service";

 export class MapsManagerService {
    private static instance: MapsManagerService;
@@ -176,6 +176,10 @@ export class MapsManagerService {
    }

    public $mapsLinkingPending(version: BSVersion): Observable<boolean> {
-        return this.linker.$isVersionFolderPending(version, MapsManagerService.RELATIVE_MAPS_FOLDER);
+        return this.linker.$isPending(version, MapsManagerService.RELATIVE_MAPS_FOLDER);
+    }
+
+    public $mapsFolderLinkState(version: BSVersion): Observable<FolderLinkState> {
+        return this.linker.$folderLinkedState(version, MapsManagerService.RELATIVE_MAPS_FOLDER);
    }
 }
@@ -1,6 +1,6 @@
 import { MSModelType } from "shared/models/models/model-saber.model";
 import { IpcService } from "../ipc.service";
-import { VersionFolderLinkerService, VersionLinkerActionListener, VersionLinkerActionType } from "../version-folder-linker.service";
+import { FolderLinkState, VersionFolderLinkerService, VersionLinkerActionListener, VersionLinkerActionType } from "../version-folder-linker.service";
 import { MODEL_TYPE_FOLDERS } from "shared/models/models/constants";
 import { Observable, lastValueFrom, map } from "rxjs";
 import { BSVersion } from "shared/bs-version.interface";
@@ -49,7 +49,11 @@ export class ModelsManagerService {
    }

    public $modelsLinkingPending(version: BSVersion, type: MSModelType): Observable<boolean> {
-        return this.versionFolderLinked.$isVersionFolderPending(version, MODEL_TYPE_FOLDERS[type]);
+        return this.versionFolderLinked.$isPending(version, MODEL_TYPE_FOLDERS[type]);
+    }
+
+    public $modelsLinkingState(version: BSVersion, type: MSModelType): Observable<FolderLinkState> {
+        return this.versionFolderLinked.$folderLinkedState(version, MODEL_TYPE_FOLDERS[type]);
    }

    public onModelsFolderLinked(callback: VersionLinkerActionListener): void {
@@ -1,6 +1,6 @@
 import { LinkOptions, UnlinkOptions } from "main/services/folder-linker.service";
 import { map, distinctUntilChanged, filter, mergeMap, shareReplay } from "rxjs/operators";
-import { BehaviorSubject, Observable } from "rxjs";
+import { BehaviorSubject, Observable, of } from "rxjs";
 import { BSVersion } from "shared/bs-version.interface";
 import { IpcService } from "./ipc.service";
 import { ProgressBarService } from "./progress-bar.service";
@@ -62,6 +62,13 @@ export class VersionFolderLinkerService {
        return this.ipcService.sendV2<boolean, VersionLinkerAction>("link-version-folder-action", { args: action });
    }

+    private get currentAction$(): Observable<VersionLinkerAction> {
+        return this._queue$.pipe(
+            map(actions => actions.at(0)),
+            distinctUntilChanged()
+        );
+    }
+
    public linkVersionFolder(action: VersionLinkFolderAction): Promise<boolean> {
        const promise = new Promise<boolean>(resolve => {
            const callBack: VersionLinkerActionListener = (performedAction, linked) => {
@@ -122,12 +129,33 @@ export class VersionFolderLinkerService {
        return this.ipcService.sendV2("is-version-folder-linked", { args: { version, relativeFolder } });
    }

-    public isPending(version: BSVersion, relativeFolder: string): Observable<boolean> {
-        return this.queue$.pipe(map(queue => queue.length > 0 && queue.some(action => action.version === version && action.relativeFolder === relativeFolder), distinctUntilChanged()));
+    public $folderLinkedState(version: BSVersion, relativeFolder: string): Observable<FolderLinkState> {
+        return this._queue$.pipe(
+            mergeMap(queue => {
+                const currentAction = queue.at(0);
+                if(currentAction && equal(currentAction.version, version) && currentAction.relativeFolder === relativeFolder) {
+                    return of(FolderLinkState.Processing)
+                }
+                
+                if(queue.some(action => equal(action.version, version) && action.relativeFolder === relativeFolder)) {
+                    return of(FolderLinkState.Pending);
+                }
+
+                return this.isVersionFolderLinked(version, relativeFolder).pipe(
+                    map(linked => linked ? FolderLinkState.Linked : FolderLinkState.Unlinked)
+                );
+            }),
+            distinctUntilChanged(),
+            shareReplay(1)    
+        );
    }

-    public isProcessing(version: BSVersion, relativeFolder: string): Observable<boolean> {
-        return this.currentAction$.pipe(map(action => action && action.version === version && action.relativeFolder === relativeFolder));
+    public $isPending(version: BSVersion, relativeFolder: string): Observable<boolean> {
+        return this.$folderLinkedState(version, relativeFolder).pipe(map(state => state === FolderLinkState.Pending));
+    }
+
+    public $isProcessing(version: BSVersion, relativeFolder: string): Observable<boolean> {
+        return this.$folderLinkedState(version, relativeFolder).pipe(map(state => state === FolderLinkState.Processing));
    }

    public getLinkedFolders(version: BSVersion, options?: { relative?: boolean }): Observable<string[]> {
@@ -137,27 +165,6 @@ export class VersionFolderLinkerService {
    public relinkAllVersionsFolders(): Observable<void> {
        return this.ipcService.sendV2("relink-all-versions-folders");
    }
-
-    public $isVersionFolderPending(version: BSVersion, relativeFolder: string): Observable<boolean> {
-        return this.queue$.pipe(
-            mergeMap(async queue => {
-                return queue.some(q => q.relativeFolder.includes(relativeFolder) && equal(q.version, version));
-            }),
-            distinctUntilChanged(),
-            shareReplay(1)
-        );
-    }
-
-    public get currentAction$(): Observable<VersionLinkerAction> {
-        return this._queue$.pipe(
-            map(actions => actions.at(0)),
-            distinctUntilChanged()
-        );
-    }
-
-    public get queue$(): Observable<VersionLinkerAction[]> {
-        return this._queue$.asObservable();
-    }
 }

 export const enum VersionLinkerActionType {
@@ -182,3 +189,10 @@ export interface VersionUnlinkFolderAction extends VersionLinkerAction {
 }

 export type VersionLinkerActionListener = (action: VersionLinkerAction, linked: boolean) => void;
+
+export enum FolderLinkState {
+    Linked,
+    Unlinked,
+    Pending,
+    Processing
+}
@@ -24,8 +24,8 @@ export default function OneClickDownloadPlaylist() {
    const mapsContainer = useRef<HTMLDivElement>(null);
    const playlistUrl = useConstant(() => new URLSearchParams(window.location.search).get("playlistUrl"));
    const download$ = useConstant(() => playlistDownloader.oneClickInstallPlaylist(playlistUrl));
-    const playlistInfos = useObservable<BPList>(download$.pipe(filter(progress => !!progress.data?.playlistInfos), map(progress => progress.data.playlistInfos), take(1)));
-    const downloadedMaps = useObservable(download$.pipe(filter(progress => !!progress.data?.downloadedMaps), map(progress => progress.data.downloadedMaps)));
+    const playlistInfos = useObservable<BPList>(() => download$.pipe(filter(progress => !!progress.data?.playlistInfos), map(progress => progress.data.playlistInfos), take(1)));
+    const downloadedMaps = useObservable(() => download$.pipe(filter(progress => !!progress.data?.downloadedMaps), map(progress => progress.data.downloadedMaps)));

    useEffect(() => {

@@ -26,7 +26,7 @@ export default function ShortcutLaunch() {

    const t = useTranslation();
    const color = useThemeColor("second-color");
-    const launchOptions = useObservable(ipc.sendV2<LaunchOption>("shortcut-launch-options").pipe(take(1)), null)
+    const launchOptions = useObservable(() => ipc.sendV2<LaunchOption>("shortcut-launch-options").pipe(take(1)), null)
    const [rotation, setRotation] = useState(0);
    const [status, setStatus] = useState<BSLaunchEventType>();

@@ -19,3 +19,9 @@ export async function allSettled<T>(promises: Promise<T>[], options?: AllSettled
        return acc;
    }, []);
 }
+
+export async function pause(ms: number): Promise<void>{
+    return new Promise((resolve) => {
+        setTimeout(() => resolve(), ms);
+    });
+}
Author	SHA1	Message	Date
MathieuG-P	c140d30e90	[chore] npm i	2024-01-12 22:10:18 +01:00
MathieuG-P	a6826cc899	[chore] add missing scripts and asar package	2024-01-07 20:23:15 +01:00
MathieuG-P	1266da74d8	Merge branch 'master' into chore/e2e-tests	2024-01-07 20:18:20 +01:00
Shidorien	f908acefd6	Merge pull request #397 from Zagrios/feature/maps-tooltips/392 Feature/maps tooltips/392	2024-01-07 19:10:29 +01:00
shidorien	7dc63fa775	Fix tippy-box styles in index.css	2024-01-07 18:27:42 +01:00
MathieuG-P	08e1b46e06	Merge pull request #399 from Zagrios/chore/update-maps-ui-for-coherence Chore/update maps UI for coherence	2024-01-07 17:23:14 +01:00
shidorien	9d613d5a7f	Merge branch 'master' into feature/maps-tooltips/392	2024-01-07 17:21:26 +01:00
shidorien	6e2dfa26b7	Add modification after review	2024-01-07 17:21:08 +01:00
MathieuG-P	86017e65c0	[chore] component props readonly	2024-01-07 17:06:32 +01:00
MathieuG-P	d6e51f0d11	[chore] fix sonarcloud bug	2024-01-07 17:01:20 +01:00
MathieuG-P	c095469214	Merge pull request #398 from Zagrios/bugfix/handle-oculus-library-doesnt-have-originalpath Bugfix/handle oculus library doesnt have originalpath	2024-01-07 16:46:36 +01:00
MathieuG-P	fcf391db55	add info log	2024-01-07 16:40:03 +01:00
MathieuG-P	68b105dd63	[bugfix] remove test logs + add tryit in resolveGUID function	2024-01-07 16:33:06 +01:00
MathieuG-P	c54185b348	[chore] rework useObservable hook to properly re-subsrive when the state change	2024-01-07 16:22:51 +01:00
MathieuG-P	cc42f0a978	[chore] add map and playlist icon + init the new svg system	2024-01-07 14:36:01 +01:00
MathieuG-P	073061c8e5	[chore] update maps and playlists panel UI for coherence	2024-01-07 03:00:53 +01:00
shidorien	e071d792ad	Remove unnecessary empty lines and whitespace	2024-01-07 01:32:05 +01:00
shidorien	072e2991ba	Update filter panel component layout	2024-01-07 01:28:47 +01:00
shidorien	8c9597ab0e	Remove unnecessary code in zh.json	2024-01-07 01:27:16 +01:00
shidorien	a7dbe61535	Remove unnecessary whitespace in zh-tw.json	2024-01-07 01:26:44 +01:00
shidorien	a51bf1ab15	Update French translations	2024-01-07 01:22:30 +01:00
shidorien	1ed71c61ef	Remove unnecessary line in es.json	2024-01-07 01:18:04 +01:00
shidorien	40ecf536d0	Remove unused translation	2024-01-07 01:17:29 +01:00
shidorien	32cab3d4eb	Update translations for de.json, es.json, and fr.json	2024-01-07 01:06:25 +01:00
shidorien	4c7a61ecd0	Update translation for delete button in Spanish	2024-01-07 00:57:26 +01:00
shidorien	0b1f36cc96	Add translations	2024-01-07 00:44:17 +01:00
shidorien	902ca819c5	Remove unused abbreviation for NPS	2024-01-07 00:27:52 +01:00
shidorien	fcad40ec66	Update filter panel component	2024-01-07 00:26:10 +01:00
shidorien	f448f023f8	Remove unused import statement	2024-01-06 20:44:52 +01:00
shidorien	05a3a383ee	Remove unused map characteristics translations	2024-01-06 20:44:23 +01:00
MathieuG-P	54f24d93a3	[bugfix] Handle oculus library doesnt have OriginaPath value Added a method to resolve GUID path to resolve Path value in oculus library reg	2024-01-06 14:49:07 +01:00
shidorien	395b6704fd	add tippy	2024-01-05 22:54:41 +01:00
shidorien	79be8a8173	Add styles for tooltips	2024-01-05 22:53:54 +01:00
shidorien	7f3a55cee4	Add translations for map characteristics and map item actions	2024-01-05 22:53:47 +01:00
MathieuG-P	c2d722d5fe	Merge branch 'master' of https://github.com/Zagrios/bs-manager	2024-01-02 19:15:12 +01:00
MathieuG-P	91d71b295b	npx update-browserslist-db@latest	2024-01-02 19:15:08 +01:00
MathieuG-P	c1afa24d7a	[chore] fix array empty error	2024-01-02 19:14:38 +01:00
MathieuG-P	081e4e4fa7	Update CHANGELOG.md	2023-12-29 02:09:09 +01:00
MathieuG-P	bb05b14236	[chore] bypass udate properly + tweak first test	2023-10-08 17:12:55 +02:00
MathieuG-P	4f475d4224	[chore] tweak first test	2023-10-08 16:48:04 +02:00
MathieuG-P	e55c146824	[chore] add install playwright deps	2023-10-08 16:27:40 +02:00
MathieuG-P	696eec5f2b	[chore] test bypass auto update	2023-09-25 13:54:03 +02:00
MathieuG-P	2699b4a7cd	[chore] nb retries to 1	2023-09-25 13:27:20 +02:00
MathieuG-P	36749a39cc	[chore] update package-locks	2023-09-25 13:27:02 +02:00
MathieuG-P	e13c641ba3	Merge branch 'master' into chore/e2e-tests	2023-09-25 13:06:54 +02:00
MathieuG-P	5385797e06	[chore] replace checkout by upload-artifact	2023-09-25 12:53:55 +02:00
MathieuG-P	b13ee858b6	[chore] restaure auto updater	2023-09-24 19:11:42 +02:00
MathieuG-P	7c792d6520	[chore] try e2e tests with no auto-update	2023-09-24 18:13:09 +02:00
MathieuG-P	d03ae069ca	Update e2e-tests.yaml	2023-09-24 17:45:36 +02:00
MathieuG-P	3bf2d8814f	Update e2e-tests.yaml	2023-09-24 17:33:07 +02:00
MathieuG-P	0e9f1fc8a1	[chore] reduce nb retries	2023-09-24 17:31:38 +02:00
MathieuG-P	d3e65f9f92	[chore] fix "a step cannot have both the `uses` and `run` keys"	2023-09-24 17:10:06 +02:00
MathieuG-P	5909ac4373	[chore] add simple windows e2e tests	2023-09-24 16:49:29 +02:00