Merge pull request #223 from Zagrios/hotfix/double-click-on-model-to-download

[hotfix] add double click to download model

assets/jsons/bs-versions.json

@@ -533,5 +533,13 @@
 		"ReleaseImg": "https://cdn.akamai.steamstatic.com/steamcommunity/public/images/clans/32055887/c328e407367e9914abaf92f609501877ee5abb63.png",
 		"ReleaseDate": "1680623885",
 		"year": "2023"
+	},
+	{
+		"BSVersion": "1.29.4",
+		"BSManifest": "6291266771922375922",
+		"ReleaseURL": "https://steamcommunity.com/games/620980/announcements/detail/3708194993422325380",
+		"ReleaseImg": "https://cdn.akamai.steamstatic.com/steamcommunity/public/images/clans/32055887/9c3d476c03e4a2ac72ca5df016b7c94d242b41cb.png",
+		"ReleaseDate": "1683644991",
+		"year": "2023"
 	}
 ]

assets/jsons/patreons.json

@@ -1,7 +1,10 @@
 [
     {"username": "Shidorien"},
-    {"username": "Doloro", "type": "gold"},
     {"username": "iPixelGalaxy", "type": "diamond", "link": "https://twitch.tv/ipixelgalaxy"},
     {"username": "Emyte", "type": "gold"},
-    {"username": "GoodOldNervy"}
+    {"username": "GoodOldNervy"},
+    {"username": "Carbon", "type": "gold"},
+    {"username": "Naysy"},
+    {"username": "Falmil"},
+    {"username": "K1Lc4m"}
 ]

assets/jsons/translations/de.json

@@ -1,6 +1,7 @@
 {
     "misc": {
         "download": "Laden",
+        "add": "Hinzufügen",
         "verify": "Prüfen",
         "launch": "Starten",
         "mods": "Mods",
@@ -11,11 +12,17 @@
         "delete": "Löschen",
         "accept": "Akzeptieren",
         "refuse": "Ablehnen",
-        "apply": "Übernehmen"
+        "apply": "Übernehmen",
+        "copy": "Kopieren",
+        "copied": "Kopiert!"
     },
     "nav-bar":{
         "add-version": "Version Hinzufügen",
-        "settings": "Einstellungen"
+        "settings": "Einstellungen",
+        "shared": {
+            "text": "Geteilt",
+            "tooltip": "Geteilte Inhalte"
+        }
     },
     "pages": {
         "shared-maps":{
@@ -672,6 +679,169 @@
             "mapped-by": "Gemapped von"
         }
     },
+    "models":{
+        "types": {
+            "singular": {
+                "avatar": "Avatar",
+                "saber": "Säbel",
+                "platform": "Plattform",
+                "bloq": "Block"
+            },
+            "plural": {
+                "avatar": "Avatare",
+                "saber": "Säbel",
+                "platform": "Plattformen",
+                "bloq": "Blöcke"
+            }
+        },
+        "sorts": {
+            "name": "Name",
+            "date": "Datum",
+            "author": "Autor"
+        },
+        "panel": {
+            "actions": {
+                "search": "Ein Modell suchen",
+                "drop-down": {
+                    "delete": "Modelle löschen",
+                    "export": "Modelle exportieren"
+                },
+                "link-models": "Modelle verlinken",
+                "unlink-models": "Modelle trennen"
+            },
+            "grid":{
+                "loading": "Modelle laden...",
+                "no-models": "Keine Modelle",
+                "download-models": "Modelle herunterladen"
+            }
+        },
+        "modals": {
+            "delete-model" :{
+                "title": "Das Modell löschen",
+                "desc": "Sind Sie sicher, dass Sie das Modell {modelName} löschen möchten?",
+                "linked-annotation": "Dieses Modell wird aus allen verlinkten Versionen entfernt."
+            },
+            "delete-models": {
+                "title": "Modelle löschen",
+                "desc": "Sind Sie sicher, dass Sie die {nb} Modelle löschen möchten?",
+                "linked-annotation": "Diese Modelle werden aus allen verlinkten Versionen entfernt."
+            },
+            "download-models": {
+                "search-btn": "Suche",
+                "search-placeholder": "Ein Modell suchen",
+                "search-tips": {
+                    "header": {
+                        "tag": "Tag",
+                        "desc": "Beschreibung"
+                    },
+                    "author-desc": "Nur Modelle vom angegebenen Autor anzeigen.",
+                    "hash-desc": "Nur Modelle mit dem angegebenen Hash anzeigen.",
+                    "tag-desc": "Nur Modelle mit dem angegebenen Tag anzeigen.",
+                    "name-desc": "Nur Modelle mit dem angegebenen Namen anzeigen.",
+                    "discordid-desc": "Nur Modelle vom angegebenen Discord-Benutzer anzeigen.",
+                    "status-desc": "Nur Modelle mit dem angegebenen Status anzeigen. (nur Profil, und nur für den Autor)"
+                },
+                "no-models": "Keine Modelle gefunden.",
+                "no-internet": "Keine Internetverbindung.",
+                "error-occured": "Ein Fehler ist aufgetreten, versuche es später erneut."
+            },
+            "link-models": {
+                "avatar": {
+                    "title": "Avatare verbinden",
+                    "desc": "Das Verbinden von Avataren ermöglicht das Teilen von Avataren zwischen allen Versionen. Sobald verbunden, wird diese Version von den geteilten Avataren profitieren",
+                    "info": "Das Hinzufügen und Entfernen von Avataren wird ebenfalls geteilt",
+                    "keep-models": {
+                        "label": "Avatare behalten",
+                        "title": "Das Behalten der Avatare wird die Avatare der aktuellen Version in den Ordner der geteilten Avatare verschieben. Andernfalls gehen sie verloren"
+                    },
+                    "valid-btn": "Avatare verbinden"
+                },
+                "saber": {
+                    "title": "Säbel verbinden",
+                    "desc": "Das Verbinden von Säbeln ermöglicht das Teilen von Säbeln zwischen allen Versionen. Sobald verbunden, wird diese Version von den geteilten Säbeln profitieren",
+                    "info": "Das Hinzufügen und Entfernen von Säbeln wird ebenfalls geteilt",
+                    "keep-models": {
+                        "label": "Säbel behalten",
+                        "title": "Das Behalten der Säbel wird die Säbel der aktuellen Version in den Ordner der geteilten Säbel verschieben. Andernfalls gehen sie verloren"
+                    },
+                    "valid-btn": "Säbel verbinden"
+                },
+                "platform": {
+                    "title": "Plattformen verbinden",
+                    "desc": "Das Verbinden von Plattformen ermöglicht das Teilen von Plattformen zwischen allen Versionen. Sobald verbunden, wird diese Version von den geteilten Plattformen profitieren",
+                    "info": "Das Hinzufügen und Entfernen von Plattformen wird ebenfalls geteilt",
+                    "keep-models": {
+                        "label": "Plattformen behalten",
+                        "title": "Das Behalten der Plattformen wird die Plattformen der aktuellen Version in den Ordner der geteilten Plattformen verschieben. Andernfalls gehen sie verloren"
+                    },
+                    "valid-btn": "Plattformen verbinden"
+                },
+                "bloq": {
+                    "title": "Bloqs verbinden",
+                    "desc": "Das Verbinden von Bloqs ermöglicht das Teilen von Bloqs zwischen allen Versionen. Sobald verbunden, wird diese Version von den geteilten Bloqs profitieren",
+                    "info": "Das Hinzufügen und Entfernen von Bloqs wird ebenfalls geteilt",
+                    "keep-models": {
+                        "label": "Bloqs behalten",
+                        "title": "Das Behalten der Bloqs wird die Bloqs der aktuellen Version in den Ordner der geteilten Bloqs verschieben. Andernfalls gehen sie verloren"
+                    },
+                    "valid-btn": "Bloqs verbinden"
+                }
+            },
+            "unlink-models": {
+                "avatar": {
+                    "title": "Avatare trennen",
+                    "desc": "Achtung, das Trennen der Avatare wird die Nutzung der geteilten Avatare für diese Version nicht mehr ermöglichen.",
+                    "keep-models": {
+                        "label": "Avatare behalten",
+                        "title": "Das Behalten der Avatare wird eine Kopie der geteilten Avatare für die aktuelle Version erstellen. Andernfalls wird kein Avatar für diese Version aufbewahrt."
+                    },
+                    "valid-btn": "Avatare trennen"
+                },
+                "saber": {
+                    "title": "Säbel trennen",
+                    "desc": "Achtung, das Trennen der Säbel wird die Nutzung der geteilten Säbel für diese Version nicht mehr ermöglichen.",
+                    "keep-models": {
+                        "label": "Säbel behalten",
+                        "title": "Das Behalten der Säbel wird eine Kopie der geteilten Säbel für die aktuelle Version erstellen. Andernfalls wird kein Säbel für diese Version aufbewahrt."
+                    },
+                    "valid-btn": "Säbel trennen"
+                },
+                "platform": {
+                    "title": "Plattformen trennen",
+                    "desc": "Achtung, das Trennen der Plattformen wird die Nutzung der geteilten Plattformen für diese Version nicht mehr ermöglichen.",
+                    "keep-models": {
+                        "label": "Plattformen behalten",
+                        "title": "Das Behalten der Plattformen wird eine Kopie der geteilten Plattformen für die aktuelle Version erstellen. Andernfalls wird keine Plattform für diese Version aufbewahrt."
+                    },
+                    "valid-btn": "Plattformen trennen"
+                },
+                "bloq": {
+                    "title": "Bloqs trennen",
+                    "desc": "Achtung, das Trennen der Bloqs wird die Nutzung der geteilten Bloqs für diese Version nicht mehr ermöglichen.",
+                    "keep-models": {
+                        "label": "Bloqs behalten",
+                        "title": "Das Behalten der Bloqs wird eine Kopie der geteilten Bloqs für die aktuelle Version erstellen. Andernfalls wird kein Bloq für diese Version aufbewahrt."
+                    },
+                    "valid-btn": "Bloqs trennen"
+                }
+            }
+        },
+        "notifications": {
+            "prevent-for-mods": {
+                "title": "Erforderliche Mods",
+                "desc": "Stellen Sie sicher, dass Sie die notwendigen Mods installiert haben, um Modelle in BeatSaber zu verwenden",
+                "go-to-mods": "Gehe zu Mods",
+                "not-remind": "Erinnere mich nicht"
+            },
+            "prevent-for-models-breaks": {
+                "title": "Gebrochene Modelle",
+                "desc": "Seit dem Update des BeatSaber-Motors sind Modelle für diese Version nicht mehr funktional."
+            },
+            "export-success": {
+                "title": "Export abgeschlossen 🎉"
+            }
+        }
+    },
     "beat-saver": {
         "maps-sorts": {
             "Latest": "Neueste",

assets/jsons/translations/en.json

@@ -1,6 +1,7 @@
 {
     "misc": {
         "download": "Download",
+        "add": "Add",
         "verify": "Verify",
         "launch": "Launch",
         "mods": "Mods",
@@ -11,11 +12,17 @@
         "delete": "Delete",
         "accept": "Accept",
         "refuse": "Refuse",
-        "apply": "Apply"
+        "apply": "Apply",
+        "copy": "Copy",
+        "copied": "Copied!"
     },
     "nav-bar":{
         "add-version": "Add a version",
-        "settings": "Settings"
+        "settings": "Settings",
+        "shared": {
+            "text": "Shared",
+            "tooltip": "Shared contents"
+        }
     },
     "pages": {
         "shared-maps":{
@@ -672,6 +679,169 @@
             "mapped-by": "mapped by"
         }
     },
+    "models":{
+        "types": {
+            "singular": {
+                "avatar": "avatar",
+                "saber": "saber",
+                "platform": "platform",
+                "bloq": "block"
+            },
+            "plural": {
+                "avatar": "avatars",
+                "saber": "sabers",
+                "platform": "platforms",
+                "bloq": "blocks"
+            }
+        },
+        "sorts": {
+            "name": "Name",
+            "date": "Date",
+            "author": "Author"
+        },
+        "panel": {
+            "actions": {
+                "search": "Search a model",
+                "drop-down": {
+                    "delete": "Delete models",
+                    "export": "Export models"
+                },
+                "link-models": "Link models",
+                "unlink-models": "Unlink models"
+            },
+            "grid":{
+                "loading": "Loading models...",
+                "no-models": "No models",
+                "download-models": "Download models"
+            }
+        },
+        "modals": {
+            "delete-model" :{
+                "title": "Delete the model",
+                "desc": "Are you sure you want to delete the model {modelName}?",
+                "linked-annotation": "This model will be removed from all linked versions."
+            },
+            "delete-models": {
+                "title": "Delete models",
+                "desc": "Are you sure you want to delete the {nb} models?",
+                "linked-annotation": "These models will be removed from all linked versions."
+            },
+            "download-models": {
+                "search-btn": "Search",
+                "search-placeholder": "Search a model",
+                "search-tips": {
+                    "header": {
+                        "tag": "Tag",
+                        "desc": "Description"
+                    },
+                    "author-desc": "Show only models from the specified author.",
+                    "hash-desc": "Show only models with the specified hash.",
+                    "tag-desc": "Show only models with the specified tag.",
+                    "name-desc": "Show only models with the specified name.",
+                    "discordid-desc": "Show only models from the specified discord user.",
+                    "status-desc": "Show only models with the specified status. (profile only, and only for the author)"
+                },
+                "no-models": "No models found.",
+                "no-internet": "No internet connection.",
+                "error-occured": "An error occurred, try again later."
+            },
+            "link-models": {
+                "avatar": {
+                    "title": "Link Avatars",
+                    "desc": "Linking avatars allows sharing avatars between all versions. Once linked, this version will benefit from the shared avatars",
+                    "info": "Adding and deleting avatars will also be shared",
+                    "keep-models": {
+                        "label": "Keep Avatars",
+                        "title": "Keeping the avatars will move the avatars from the current version to the shared avatars folder. Otherwise, they will be lost"
+                    },
+                    "valid-btn": "Link Avatars"
+                },
+                "saber": {
+                    "title": "Link Sabers",
+                    "desc": "Linking sabers allows sharing sabers between all versions. Once linked, this version will benefit from the shared sabers",
+                    "info": "Adding and deleting sabers will also be shared",
+                    "keep-models": {
+                        "label": "Keep Sabers",
+                        "title": "Keeping the sabers will move the sabers from the current version to the shared sabers folder. Otherwise, they will be lost"
+                    },
+                    "valid-btn": "Link Sabers"
+                },
+                "platform": {
+                    "title": "Link Platforms",
+                    "desc": "Linking platforms allows sharing platforms between all versions. Once linked, this version will benefit from the shared platforms",
+                    "info": "Adding and deleting platforms will also be shared",
+                    "keep-models": {
+                        "label": "Keep Platforms",
+                        "title": "Keeping the platforms will move the platforms from the current version to the shared platforms folder. Otherwise, they will be lost"
+                    },
+                    "valid-btn": "Link Platforms"
+                },
+                "bloq": {
+                    "title": "Link Bloqs",
+                    "desc": "Linking bloqs allows sharing bloqs between all versions. Once linked, this version will benefit from the shared bloqs",
+                    "info": "Adding and deleting bloqs will also be shared",
+                    "keep-models": {
+                        "label": "Keep Bloqs",
+                        "title": "Keeping the bloqs will move the bloqs from the current version to the shared bloqs folder. Otherwise, they will be lost"
+                    },
+                    "valid-btn": "Link Bloqs"
+                }
+            },
+            "unlink-models": {
+                "avatar": {
+                    "title": "Unlink Avatars",
+                    "desc": "Be careful, unlinking avatars will no longer allow the use of shared avatars for this version.",
+                    "keep-models": {
+                        "label": "Keep Avatars",
+                        "title": "Keeping the avatars will create a copy of the shared avatars for the current version. Otherwise, no avatars will be kept for this version."
+                    },
+                    "valid-btn": "Unlink Avatars"
+                },
+                "saber": {
+                    "title": "Unlink Sabers",
+                    "desc": "Be careful, unlinking sabers will no longer allow the use of shared sabers for this version.",
+                    "keep-models": {
+                        "label": "Keep Sabers",
+                        "title": "Keeping the sabers will create a copy of the shared sabers for the current version. Otherwise, no sabers will be kept for this version."
+                    },
+                    "valid-btn": "Unlink Sabers"
+                },
+                "platform": {
+                    "title": "Unlink Platforms",
+                    "desc": "Be careful, unlinking platforms will no longer allow the use of shared platforms for this version.",
+                    "keep-models": {
+                        "label": "Keep Platforms",
+                        "title": "Keeping the platforms will create a copy of the shared platforms for the current version. Otherwise, no platforms will be kept for this version."
+                    },
+                    "valid-btn": "Unlink Platforms"
+                },
+                "bloq": {
+                    "title": "Unlink Bloqs",
+                    "desc": "Be careful, unlinking bloqs will no longer allow the use of shared bloqs for this version.",
+                    "keep-models": {
+                        "label": "Keep Bloqs",
+                        "title": "Keeping the bloqs will create a copy of the shared bloqs for the current version. Otherwise, no bloqs will be kept for this version."
+                    },
+                    "valid-btn": "Unlink Bloqs"
+                }
+            }
+        },
+        "notifications": {
+            "prevent-for-mods": {
+                "title": "Required mods",
+                "desc": "Make sure you've installed the necessary mods to use models in BeatSaber",
+                "go-to-mods": "Go to mods",
+                "not-remind": "Do not remind me"
+            },
+            "prevent-for-models-breaks": {
+                "title": "Broken models",
+                "desc": "Since the BeatSaber engine update, models are no longer functional for this version."
+            },
+            "export-success": {
+                "title": "Export completed 🎉"
+            }
+        }
+    },
     "beat-saver": {
         "maps-sorts": {
             "Latest": "Latest",

assets/jsons/translations/es.json

@@ -1,6 +1,7 @@
 {
     "misc": {
         "download": "Descargar",
+        "add": "Añadir",
         "verify": "Verificar",
         "launch": "Lanzar",
         "mods": "Mods",
@@ -11,11 +12,17 @@
         "delete": "Borrar",
         "accept": "Aceptar",
         "refuse": "Rechazar",
-        "apply": "Aplicar"
+        "apply": "Aplicar",
+        "copy": "Copiar",
+        "copied": "¡Copiado!"
     },
     "nav-bar":{
         "add-version": "Agregar una versión",
-        "settings": "Ajustes"
+        "settings": "Ajustes",
+        "shared": {
+            "text": "Compartidos",
+            "tooltip": "Contenidos compartidos"
+        }
     },
     "pages": {
         "shared-maps":{
@@ -671,6 +678,169 @@
             "mapped-by": "mapeado por"
         }
     },
+    "models":{
+        "types": {
+            "singular": {
+                "avatar": "avatar",
+                "saber": "sable",
+                "platform": "plataforma",
+                "bloq": "bloque"
+            },
+            "plural": {
+                "avatar": "avatares",
+                "saber": "sables",
+                "platform": "plataformas",
+                "bloq": "bloques"
+            }
+        },
+        "sorts": {
+            "name": "Nombre",
+            "date": "Fecha",
+            "author": "Autor"
+        },
+        "panel": {
+            "actions": {
+                "search": "Buscar un modelo",
+                "drop-down": {
+                    "delete": "Eliminar modelos",
+                    "export": "Exportar modelos"
+                },
+                "link-models": "Vincular modelos",
+                "unlink-models": "Desvincular los modelos"
+            },
+            "grid":{
+                "loading": "Cargando modelos...",
+                "no-models": "No hay modelos",
+                "download-models": "Descargar modelos"
+            }
+        },
+        "modals": {
+            "delete-model" :{
+                "title": "Eliminar el modelo",
+                "desc": "¿Estás seguro de que quieres eliminar el modelo {modelName}?",
+                "linked-annotation": "Este modelo será eliminado de todas las versiones vinculadas."
+            },
+            "delete-models": {
+                "title": "Eliminar modelos",
+                "desc": "¿Estás seguro de que quieres eliminar los {nb} modelos?",
+                "linked-annotation": "Estos modelos serán eliminados de todas las versiones vinculadas."
+            },
+            "download-models": {
+                "search-btn": "Buscar",
+                "search-placeholder": "Buscar un modelo",
+                "search-tips": {
+                    "header": {
+                        "tag": "Etiqueta",
+                        "desc": "Descripción"
+                    },
+                    "author-desc": "Mostrar solo modelos del autor especificado.",
+                    "hash-desc": "Mostrar solo modelos con el hash especificado.",
+                    "tag-desc": "Mostrar solo modelos con la etiqueta especificada.",
+                    "name-desc": "Mostrar solo modelos con el nombre especificado.",
+                    "discordid-desc": "Mostrar solo modelos del usuario de discord especificado.",
+                    "status-desc": "Mostrar solo modelos con el estado especificado. (solo perfil, y solo para el autor)"
+                },
+                "no-models": "No se encontraron modelos.",
+                "no-internet": "Sin conexión a Internet.",
+                "error-occured": "Ocurrió un error, inténtalo de nuevo más tarde."
+            },
+            "link-models": {
+                "avatar": {
+                    "title": "Vincular avatares",
+                    "desc": "La vinculación de avatares permite compartir avatares entre todas las versiones. Una vez vinculada, esta versión se beneficiará de los avatares compartidos",
+                    "info": "La adición y eliminación de avatares también se compartirá",
+                    "keep-models": {
+                        "label": "Conservar los avatares",
+                        "title": "Conservar los avatares moverá los avatares de la versión actual a la carpeta de avatares compartidos. De lo contrario, se perderán"
+                    },
+                    "valid-btn": "Vincular avatares"
+                },
+                "saber": {
+                    "title": "Vincular sables",
+                    "desc": "La vinculación de sables permite compartir sables entre todas las versiones. Una vez vinculada, esta versión se beneficiará de los sables compartidos",
+                    "info": "La adición y eliminación de sables también se compartirá",
+                    "keep-models": {
+                        "label": "Conservar los sables",
+                        "title": "Conservar los sables moverá los sables de la versión actual a la carpeta de sables compartidos. De lo contrario, se perderán"
+                    },
+                    "valid-btn": "Vincular sables"
+                },
+                "platform": {
+                    "title": "Vincular plataformas",
+                    "desc": "La vinculación de plataformas permite compartir plataformas entre todas las versiones. Una vez vinculada, esta versión se beneficiará de las plataformas compartidas",
+                    "info": "La adición y eliminación de plataformas también se compartirá",
+                    "keep-models": {
+                        "label": "Conservar las plataformas",
+                        "title": "Conservar las plataformas moverá las plataformas de la versión actual a la carpeta de plataformas compartidas. De lo contrario, se perderán"
+                    },
+                    "valid-btn": "Vincular plataformas"
+                },
+                "bloq": {
+                    "title": "Vincular bloqs",
+                    "desc": "La vinculación de bloqs permite compartir bloqs entre todas las versiones. Una vez vinculada, esta versión se beneficiará de los bloqs compartidos",
+                    "info": "La adición y eliminación de bloqs también se compartirá",
+                    "keep-models": {
+                        "label": "Conservar los bloqs",
+                        "title": "Conservar los bloqs moverá los bloqs de la versión actual a la carpeta de bloqs compartidos. De lo contrario, se perderán"
+                    },
+                    "valid-btn": "Vincular bloqs"
+                }
+            },
+            "unlink-models": {
+                "avatar": {
+                    "title": "Desvincular avatares",
+                    "desc": "Atención, desvincular los avatares ya no permitirá el uso de avatares compartidos para esta versión.",
+                    "keep-models": {
+                        "label": "Conservar los avatares",
+                        "title": "Conservar los avatares creará una copia de los avatares compartidos para la versión actual. En caso contrario, ningún avatar se conservará para esta versión."
+                    },
+                    "valid-btn": "Desvincular avatares"
+                },
+                "saber": {
+                    "title": "Desvincular sables",
+                    "desc": "Atención, desvincular los sables ya no permitirá el uso de sables compartidos para esta versión.",
+                    "keep-models": {
+                        "label": "Conservar los sables",
+                        "title": "Conservar los sables creará una copia de los sables compartidos para la versión actual. En caso contrario, ningún sable se conservará para esta versión."
+                    },
+                    "valid-btn": "Desvincular sables"
+                },
+                "platform": {
+                    "title": "Desvincular plataformas",
+                    "desc": "Atención, desvincular las plataformas ya no permitirá el uso de plataformas compartidas para esta versión.",
+                    "keep-models": {
+                        "label": "Conservar las plataformas",
+                        "title": "Conservar las plataformas creará una copia de las plataformas compartidas para la versión actual. En caso contrario, ninguna plataforma se conservará para esta versión."
+                    },
+                    "valid-btn": "Desvincular plataformas"
+                },
+                "bloq": {
+                    "title": "Desvincular bloqs",
+                    "desc": "Atención, desvincular los bloqs ya no permitirá el uso de bloqs compartidos para esta versión.",
+                    "keep-models": {
+                        "label": "Conservar los bloqs",
+                        "title": "Conservar los bloqs creará una copia de los bloqs compartidos para la versión actual. En caso contrario, ningún bloq se conservará para esta versión."
+                    },
+                    "valid-btn": "Desvincular bloqs"
+                }
+            }
+        },
+        "notifications": {
+            "prevent-for-mods": {
+                "title": "Mods necesarios",
+                "desc": "Asegúrate de haber instalado los mods necesarios para usar modelos en BeatSaber",
+                "go-to-mods": "Ir a mods",
+                "not-remind": "No volver a recordarme"
+            },
+            "prevent-for-models-breaks": {
+                "title": "Modelos rotos",
+                "desc": "Desde la actualización del motor de BeatSaber, los modelos ya no son funcionales para esta versión."
+            },
+            "export-success": {
+                "title": "Exportación completada 🎉"
+            }
+        }
+    },
     "beat-saver": {
         "maps-sorts": {
             "Latest": "Última",

assets/jsons/translations/fr.json

@@ -1,6 +1,7 @@
 {
     "misc": {
         "download": "Télécharger",
+        "add": "Ajouter",
         "verify": "Vérifier",
         "launch": "Lancer",
         "mods": "Mods",
@@ -11,11 +12,17 @@
         "delete": "Supprimer",
         "accept": "Accepter",
         "refuse": "Refuser",
-        "apply": "Appliquer"
+        "apply": "Appliquer",
+        "copy": "Copier",
+        "copied": "Copié !"
     },
     "nav-bar":{
         "add-version": "Ajouter une version",
-        "settings": "Paramètres"
+        "settings": "Paramètres",
+        "shared": {
+            "text": "Partagés",
+            "tooltip": "Contenus partagés"
+        }
     },
     "pages": {
         "shared-maps":{
@@ -671,6 +678,169 @@
             "mapped-by": "mappée par"
         }
     },
+    "models":{
+        "types": {
+            "singular": {
+                "avatar": "avatar",
+                "saber": "sabre",
+                "platform": "plateforme",
+                "bloq": "bloc"
+            },
+            "plural": {
+                "avatar": "avatars",
+                "saber": "sabres",
+                "platform": "plateformes",
+                "bloq": "blocs"
+            }
+        },
+        "sorts": {
+            "name": "nom",
+            "date": "date",
+            "author": "auteur"
+        },
+        "panel": {
+            "actions": {
+                "search": "Rechercher un modèle",
+                "drop-down": {
+                    "delete": "Supprimer les modèles",
+                    "export": "Exporter les modèles"
+                },
+                "link-models": "Lier les modèles",
+                "unlink-models": "Délier les modèles"
+            },
+            "grid":{
+                "loading": "Chargement des modèles...",
+                "no-models": "Aucun modèle",
+                "download-models": "Télécharger des modèles"
+            }
+        },
+        "modals": {
+            "delete-model" :{
+                "title": "Supprimer le modèle",
+                "desc": "Est-tu sûr de vouloir supprimer le modèle {modelName} ?",
+                "linked-annotation": "Ce modèle sera supprimé de toutes les versions liées."
+            },
+            "delete-models": {
+                "title": "Supprimer les modèles",
+                "desc": "Est-tu sûr de vouloir supprimer les {nb} modèles ?",
+                "linked-annotation": "Ces modèles seront supprimés de toutes les versions liées."
+            },
+            "download-models": {
+                "search-btn": "Rechercher",
+                "search-placeholder": "Rechercher un modèle",
+                "search-tips": {
+                    "header": {
+                        "tag": "Tag",
+                        "desc": "Description"
+                    },
+                    "author-desc": "Afficher seulement les modèles de l'auteur spécifié.",
+                    "hash-desc": "Afficher seulement les modèles avec le hash spécifié.",
+                    "tag-desc": "Afficher seulement les modèles avec le tag spécifié.",
+                    "name-desc": "Afficher seulement les modèles avec le nom spécifié.",
+                    "discordid-desc": "Afficher seulement les modèles de l'utilisateur discord spécifié.",
+                    "status-desc": "Afficher seulement les modèles avec le status spécifié. (profil seulement, et seulement pour l'auteur)"
+                },
+                "no-models": "Aucun modèles trouvés.",
+                "no-internet": "Pas de connexion internet.",
+                "error-occured": "Une erreur est survenue, réessaye plus tard."
+            },
+            "link-models":{
+                "avatar": {
+                    "title": "Lier les avatars",
+                    "desc": "La liaison des avatars permet de partager les avatars entre toute les version. Une fois liée, cette version profitera des avatars partagés",
+                    "info": "L'ajout et la suppression d'avatars sera également partagé",
+                    "keep-models": {
+                        "label": "Conserver les avatars",
+                        "title": "Conserver les avatars déplacera les avatars de la version actuelle dans le dossier des avatars partagés. Dans le cas contraire ils seront perdus"
+                    },
+                    "valid-btn": "Lier les avatars"
+                },
+                "saber": {
+                    "title": "Lier les sabres",
+                    "desc": "La liaison des sabres permet de partager les sabres entre toute les version. Une fois liée, cette version profitera des sabres partagés",
+                    "info": "L'ajout et la suppression de sabres sera également partagé",
+                    "keep-models": {
+                        "label": "Conserver les sabres",
+                        "title": "Conserver les sabres déplacera les sabres de la version actuelle dans le dossier des sabres partagés. Dans le cas contraire ils seront perdus"
+                    },
+                    "valid-btn": "Lier les sabres"
+                },
+                "platform": {
+                    "title": "Lier les plateformes",
+                    "desc": "La liaison des plateformes permet de partager les plateformes entre toute les version. Une fois liée, cette version profitera des plateformes partagées",
+                    "info": "L'ajout et la suppression de plateformes sera également partagé",
+                    "keep-models": {
+                        "label": "Conserver les plateformes",
+                        "title": "Conserver les plateformes déplacera les plateformes de la version actuelle dans le dossier des plateformes partagées. Dans le cas contraire ils seront perdus"
+                    },
+                    "valid-btn": "Lier les plateformes"
+                },
+                "bloq": {
+                    "title": "Lier les bloqs",
+                    "desc": "La liaison des bloqs permet de partager les bloqs entre toute les version. Une fois liée, cette version profitera des bloqs partagés",
+                    "info": "L'ajout et la suppression de bloqs sera également partagé",
+                    "keep-models": {
+                        "label": "Conserver les bloqs",
+                        "title": "Conserver les bloqs déplacera les bloqs de la version actuelle dans le dossier des bloqs partagés. Dans le cas contraire ils seront perdus"
+                    },
+                    "valid-btn": "Lier les bloqs"
+                }
+            },
+            "unlink-models":{
+                "avatar": {
+                    "title": "Délier les avatars",
+                    "desc": "Attention, délier les avatars ne permettra plus l'utilisation des avatars paratagés pour cette version.",
+                    "keep-models": {
+                        "label": "Conserver les avatars",
+                        "title": "Conserver les avatars créera une copie des avatars partagés pour la version actuelle. Dans le cas contraire, aucun avatar ne sera conservé pour cette version."
+                    },
+                    "valid-btn": "Délier les avatars"
+                },
+                "saber": {
+                    "title": "Délier les sabres",
+                    "desc": "Attention, délier les sabres ne permettra plus l'utilisation des sabres paratagés pour cette version.",
+                    "keep-models": {
+                        "label": "Conserver les sabres",
+                        "title": "Conserver les sabres créera une copie des sabres partagés pour la version actuelle. Dans le cas contraire, aucun sabre ne sera conservé pour cette version."
+                    },
+                    "valid-btn": "Délier les sabres"
+                },
+                "platform": {
+                    "title": "Délier les plateformes",
+                    "desc": "Attention, délier les plateformes ne permettra plus l'utilisation des plateformes paratagées pour cette version.",
+                    "keep-models": {
+                        "label": "Conserver les plateformes",
+                        "title": "Conserver les plateformes créera une copie des plateformes partagées pour la version actuelle. Dans le cas contraire, aucune plateforme ne sera conservée pour cette version."
+                    },
+                    "valid-btn": "Délier les plateformes"
+                },
+                "bloq": {
+                    "title": "Délier les bloqs",
+                    "desc": "Attention, délier les bloqs ne permettra plus l'utilisation des bloqs paratagés pour cette version.",
+                    "keep-models": {
+                        "label": "Conserver les bloqs",
+                        "title": "Conserver les bloqs créera une copie des bloqs partagés pour la version actuelle. Dans le cas contraire, aucun bloq ne sera conservé pour cette version."
+                    },
+                    "valid-btn": "Délier les bloqs"
+                }
+            }
+        },
+        "notifications": {
+            "prevent-for-mods": {
+                "title": "Mods nécessaires",
+                "desc": "Assurez-toi d'avoir installé les mods nécessaires pour utiliser des modèles dans BeatSaber",
+                "go-to-mods": "Aller aux mods",
+                "not-remind": "Ne plus me rappeler"
+            },
+            "prevent-for-models-breaks":{
+                "title": "Modèles cassés",
+                "desc": "Depuis la mise à jour du moteur de BeatSaber, les modèles ne sont plus fonctionnels pour cette version."
+            },
+            "export-success": {
+                "title": "Export terminé 🎉"
+            }
+        }
+    },
     "beat-saver": {
         "maps-sorts": {
             "Latest": "Dernière",

package-lock.json

@@ -10,9 +10,11 @@
       "dependencies": {
         "@node-steam/vdf": "^2.2.0",
         "@tippyjs/react": "^4.2.6",
+        "@types/color": "^3.0.3",
         "archiver": "^5.3.1",
+        "color": "^4.2.3",
         "dateformat": "^5.0.3",
-        "dot-prop": "^7.2.0",
+        "dot-prop": "^8.0.0",
         "electron-debug": "^3.2.0",
         "electron-log": "^4.4.8",
         "electron-store": "^8.1.0",
@@ -22,8 +24,9 @@
         "fs-extra": "^11.1.1",
         "history": "^5.3.0",
         "is-online": "^9.0.1",
+        "jszip": "^3.10.1",
         "md5-file": "^5.0.0",
-        "node-fetch": "^3.3.0",
+        "node-fetch": "^2.6.7",
         "node-stream-zip": "^1.15.0",
         "react": "^18.2.0",
         "react-colorful": "^5.6.1",
@@ -37,9 +40,11 @@
         "rfdc": "^1.3.0",
         "rxjs": "^7.8.0",
         "sanitize-filename": "^1.6.3",
-        "semver": "^7.3.8",
+        "semver": "^7.5.1",
+        "striptags": "^4.0.0-alpha.4",
         "tailwind-scrollbar-hide": "^1.1.7",
         "tailwindcss-scoped-groups": "^2.0.0",
+        "tippy.js": "^6.3.7",
         "use-double-click": "^1.0.5",
         "use-fit-text": "^2.4.0"
       },
@@ -52,6 +57,7 @@
         "@types/dateformat": "^5.0.0",
         "@types/jest": "^27.5.2",
         "@types/node": "17.0.23",
+        "@types/node-fetch": "^2.6.3",
         "@types/react": "^18.0.33",
         "@types/react-dom": "^18.0.11",
         "@types/react-outside-click-handler": "^1.3.1",
@@ -74,7 +80,7 @@
         "css-loader": "^6.7.1",
         "css-minimizer-webpack-plugin": "^4.1.0",
         "detect-port": "^1.3.0",
-        "electron": "^24.0.0",
+        "electron": "^24.3.1",
         "electron-builder": "^23.6.0",
         "electron-devtools-installer": "^3.2.0",
         "electron-notarize": "^1.2.1",
@@ -1934,9 +1940,9 @@
       "dev": true
     },
     "node_modules/@popperjs/core": {
-      "version": "2.11.6",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
-      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
+      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -2271,6 +2277,27 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
       "integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg=="
     },
+    "node_modules/@types/color": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/color/-/color-3.0.3.tgz",
+      "integrity": "sha512-X//qzJ3d3Zj82J9sC/C18ZY5f43utPbAJ6PhYt/M7uG6etcF6MRpKdN880KBy43B0BMzSfeT96MzrsNjFI3GbA==",
+      "dependencies": {
+        "@types/color-convert": "*"
+      }
+    },
+    "node_modules/@types/color-convert": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/color-convert/-/color-convert-2.0.0.tgz",
+      "integrity": "sha512-m7GG7IKKGuJUXvkZ1qqG3ChccdIM/qBBo913z+Xft0nKCX4hAU/IxKwZBU4cpRZ7GS5kV4vOblUkILtSShCPXQ==",
+      "dependencies": {
+        "@types/color-name": "*"
+      }
+    },
+    "node_modules/@types/color-name": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
+      "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ=="
+    },
     "node_modules/@types/connect": {
       "version": "3.4.35",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
@@ -2485,6 +2512,30 @@
       "integrity": "sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw==",
       "devOptional": true
     },
+    "node_modules/@types/node-fetch": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.3.tgz",
+      "integrity": "sha512-ETTL1mOEdq/sxUtgtOhKjyB2Irra4cjxksvcMUR5Zr4n+PxVhsCD9WS46oPbHL3et9Zde7CNRr+WUNlcHvsX+w==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "form-data": "^3.0.0"
+      }
+    },
+    "node_modules/@types/node-fetch/node_modules/form-data": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz",
+      "integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==",
+      "dev": true,
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -4896,7 +4947,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
       "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1",
         "color-string": "^1.9.0"
@@ -4909,7 +4959,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -4926,7 +4975,6 @@
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
       "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
-      "dev": true,
       "dependencies": {
         "color-name": "^1.0.0",
         "simple-swizzle": "^0.2.2"
@@ -5744,14 +5792,6 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
       "dev": true
     },
-    "node_modules/data-uri-to-buffer": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz",
-      "integrity": "sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA==",
-      "engines": {
-        "node": ">= 12"
-      }
-    },
     "node_modules/data-urls": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
@@ -6334,19 +6374,33 @@
       }
     },
     "node_modules/dot-prop": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-7.2.0.tgz",
-      "integrity": "sha512-Ol/IPXUARn9CSbkrdV4VJo7uCy1I3VuSiWCaFSg+8BdUOzF9n3jefIpcgAydvUZbTdEBZs2vEiTiS9m61ssiDA==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-8.0.0.tgz",
+      "integrity": "sha512-XHcoBL9YPvqIz6K9m9TLf9+6Iyf2ix6yYN+sZ4AI8JPg+8XQpm05V6qzPFZYzyuHfr496TqKlhzHuEvW4ME7Pw==",
       "dependencies": {
-        "type-fest": "^2.11.2"
+        "type-fest": "^3.8.0"
       },
       "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+        "node": ">=16"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/dot-prop/node_modules/type-fest": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.10.0.tgz",
+      "integrity": "sha512-hmAPf1datm+gt3c2mvu0sJyhFy6lTkIGf0GzyaZWxRLnabQfPUqg6tF95RPg6sLxKI7nFLGdFxBcf2/7+GXI+A==",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.7.0"
+      }
+    },
     "node_modules/dotenv": {
       "version": "9.0.2",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-9.0.2.tgz",
@@ -6401,9 +6455,9 @@
       }
     },
     "node_modules/electron": {
-      "version": "24.0.0",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-24.0.0.tgz",
-      "integrity": "sha512-QmL8L53fQ+xOAp8m2mSGNewhDvJqQttCxrcesf0cqndKQDsIq4QvR35wGJqHg7MyPQKcBErLhZj9QvRheO5qnA==",
+      "version": "24.3.1",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-24.3.1.tgz",
+      "integrity": "sha512-lKfC0umie1k5LW48troHzpPKJrqPEW+5j14/CPTC41K9+dJA98oUPt/05G7QAe8OGD4fHjQQuulfRdZ9MjjXeQ==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
@@ -6816,7 +6870,6 @@
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
       "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "iconv-lite": "^0.6.2"
@@ -8681,28 +8734,6 @@
         "pend": "~1.2.0"
       }
     },
-    "node_modules/fetch-blob": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
-      "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/jimmywarting"
-        },
-        {
-          "type": "paypal",
-          "url": "https://paypal.me/jimmywarting"
-        }
-      ],
-      "dependencies": {
-        "node-domexception": "^1.0.0",
-        "web-streams-polyfill": "^3.0.3"
-      },
-      "engines": {
-        "node": "^12.20 || >= 14.13"
-      }
-    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -8888,17 +8919,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/formdata-polyfill": {
-      "version": "4.0.10",
-      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
-      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
-      "dependencies": {
-        "fetch-blob": "^3.1.2"
-      },
-      "engines": {
-        "node": ">=12.20.0"
-      }
-    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -9535,9 +9555,9 @@
       }
     },
     "node_modules/html-tags": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.2.0.tgz",
-      "integrity": "sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
+      "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
       "dev": true,
       "engines": {
         "node": ">=8"
@@ -9785,7 +9805,7 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
@@ -9853,8 +9873,7 @@
     "node_modules/immediate": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
-      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
-      "dev": true
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
     },
     "node_modules/immutable": {
       "version": "4.1.0",
@@ -12139,7 +12158,6 @@
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
       "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
-      "dev": true,
       "dependencies": {
         "lie": "~3.3.0",
         "pako": "~1.0.2",
@@ -12151,7 +12169,6 @@
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
       "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
-      "dev": true,
       "dependencies": {
         "core-util-is": "~1.0.0",
         "inherits": "~2.0.3",
@@ -12278,7 +12295,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
       "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
-      "dev": true,
       "dependencies": {
         "immediate": "~3.0.5"
       }
@@ -13218,24 +13234,6 @@
         "semver": "^7.3.5"
       }
     },
-    "node_modules/node-domexception": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
-      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/jimmywarting"
-        },
-        {
-          "type": "github",
-          "url": "https://paypal.me/jimmywarting"
-        }
-      ],
-      "engines": {
-        "node": ">=10.5.0"
-      }
-    },
     "node_modules/node-emoji": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.11.0.tgz",
@@ -13246,20 +13244,41 @@
       }
     },
     "node_modules/node-fetch": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.0.tgz",
-      "integrity": "sha512-BKwRP/O0UvoMKp7GNdwPlObhYGB5DQqwhEDQlNKuoqwVYSxkSZCSbHjnFFmUEtwSKRPU4kNK8PbDYYitwaE3QA==",
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
+      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
       "dependencies": {
-        "data-uri-to-buffer": "^4.0.0",
-        "fetch-blob": "^3.1.4",
-        "formdata-polyfill": "^4.0.10"
+        "whatwg-url": "^5.0.0"
       },
       "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+        "node": "4.x || >=6.0.0"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/node-fetch"
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/node-fetch/node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+    },
+    "node_modules/node-fetch/node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+    },
+    "node_modules/node-fetch/node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
       }
     },
     "node_modules/node-forge": {
@@ -13809,8 +13828,7 @@
     "node_modules/pako": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
-      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
-      "dev": true
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
     },
     "node_modules/param-case": {
       "version": "3.0.4",
@@ -15847,7 +15865,7 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/sanitize-filename": {
       "version": "1.6.3",
@@ -15974,9 +15992,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.3.8",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-      "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+      "version": "7.5.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
+      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -16090,9 +16108,9 @@
       }
     },
     "node_modules/serialize-javascript": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz",
-      "integrity": "sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
+      "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==",
       "dev": true,
       "dependencies": {
         "randombytes": "^2.1.0"
@@ -16191,8 +16209,7 @@
     "node_modules/setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
-      "dev": true
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
     },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
@@ -16266,7 +16283,6 @@
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
       "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
-      "dev": true,
       "dependencies": {
         "is-arrayish": "^0.3.1"
       }
@@ -16274,8 +16290,7 @@
     "node_modules/simple-swizzle/node_modules/is-arrayish": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
-      "dev": true
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
     },
     "node_modules/simple-update-notifier": {
       "version": "1.0.7",
@@ -16718,6 +16733,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/striptags": {
+      "version": "4.0.0-alpha.4",
+      "resolved": "https://registry.npmjs.org/striptags/-/striptags-4.0.0-alpha.4.tgz",
+      "integrity": "sha512-/0jWyVWhpg9ciRHfjKYBpMHXct/HrFRfsR2HU77nGPbc8SPcVSIHZlZR/0TG3MyPq2C+HiHuwx8BlbcdI/cNbw=="
+    },
     "node_modules/style-loader": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
@@ -17622,7 +17642,6 @@
       "version": "4.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.3.tgz",
       "integrity": "sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA==",
-      "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -18002,14 +18021,6 @@
         "defaults": "^1.0.3"
       }
     },
-    "node_modules/web-streams-polyfill": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz",
-      "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/webidl-conversions": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
@@ -20156,9 +20167,9 @@
       "dev": true
     },
     "@popperjs/core": {
-      "version": "2.11.6",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
-      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
+      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw=="
     },
     "@remix-run/router": {
       "version": "1.0.3",
@@ -20440,6 +20451,27 @@
         }
       }
     },
+    "@types/color": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/color/-/color-3.0.3.tgz",
+      "integrity": "sha512-X//qzJ3d3Zj82J9sC/C18ZY5f43utPbAJ6PhYt/M7uG6etcF6MRpKdN880KBy43B0BMzSfeT96MzrsNjFI3GbA==",
+      "requires": {
+        "@types/color-convert": "*"
+      }
+    },
+    "@types/color-convert": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/color-convert/-/color-convert-2.0.0.tgz",
+      "integrity": "sha512-m7GG7IKKGuJUXvkZ1qqG3ChccdIM/qBBo913z+Xft0nKCX4hAU/IxKwZBU4cpRZ7GS5kV4vOblUkILtSShCPXQ==",
+      "requires": {
+        "@types/color-name": "*"
+      }
+    },
+    "@types/color-name": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
+      "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ=="
+    },
     "@types/connect": {
       "version": "3.4.35",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
@@ -20656,6 +20688,29 @@
       "integrity": "sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw==",
       "devOptional": true
     },
+    "@types/node-fetch": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.3.tgz",
+      "integrity": "sha512-ETTL1mOEdq/sxUtgtOhKjyB2Irra4cjxksvcMUR5Zr4n+PxVhsCD9WS46oPbHL3et9Zde7CNRr+WUNlcHvsX+w==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "form-data": "^3.0.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz",
+          "integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==",
+          "dev": true,
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -22534,7 +22589,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
       "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
-      "dev": true,
       "requires": {
         "color-convert": "^2.0.1",
         "color-string": "^1.9.0"
@@ -22544,7 +22598,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "requires": {
         "color-name": "~1.1.4"
       }
@@ -22558,7 +22611,6 @@
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
       "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
-      "dev": true,
       "requires": {
         "color-name": "^1.0.0",
         "simple-swizzle": "^0.2.2"
@@ -23152,11 +23204,6 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
       "dev": true
     },
-    "data-uri-to-buffer": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz",
-      "integrity": "sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA=="
-    },
     "data-urls": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
@@ -23592,11 +23639,19 @@
       }
     },
     "dot-prop": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-7.2.0.tgz",
-      "integrity": "sha512-Ol/IPXUARn9CSbkrdV4VJo7uCy1I3VuSiWCaFSg+8BdUOzF9n3jefIpcgAydvUZbTdEBZs2vEiTiS9m61ssiDA==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-8.0.0.tgz",
+      "integrity": "sha512-XHcoBL9YPvqIz6K9m9TLf9+6Iyf2ix6yYN+sZ4AI8JPg+8XQpm05V6qzPFZYzyuHfr496TqKlhzHuEvW4ME7Pw==",
       "requires": {
-        "type-fest": "^2.11.2"
+        "type-fest": "^3.8.0"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "3.10.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.10.0.tgz",
+          "integrity": "sha512-hmAPf1datm+gt3c2mvu0sJyhFy6lTkIGf0GzyaZWxRLnabQfPUqg6tF95RPg6sLxKI7nFLGdFxBcf2/7+GXI+A==",
+          "requires": {}
+        }
       }
     },
     "dotenv": {
@@ -23644,9 +23699,9 @@
       }
     },
     "electron": {
-      "version": "24.0.0",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-24.0.0.tgz",
-      "integrity": "sha512-QmL8L53fQ+xOAp8m2mSGNewhDvJqQttCxrcesf0cqndKQDsIq4QvR35wGJqHg7MyPQKcBErLhZj9QvRheO5qnA==",
+      "version": "24.3.1",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-24.3.1.tgz",
+      "integrity": "sha512-lKfC0umie1k5LW48troHzpPKJrqPEW+5j14/CPTC41K9+dJA98oUPt/05G7QAe8OGD4fHjQQuulfRdZ9MjjXeQ==",
       "dev": true,
       "requires": {
         "@electron/get": "^2.0.0",
@@ -23981,7 +24036,6 @@
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
       "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
-      "dev": true,
       "optional": true,
       "requires": {
         "iconv-lite": "^0.6.2"
@@ -25335,15 +25389,6 @@
         "pend": "~1.2.0"
       }
     },
-    "fetch-blob": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
-      "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
-      "requires": {
-        "node-domexception": "^1.0.0",
-        "web-streams-polyfill": "^3.0.3"
-      }
-    },
     "file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -25488,14 +25533,6 @@
         "mime-types": "^2.1.12"
       }
     },
-    "formdata-polyfill": {
-      "version": "4.0.10",
-      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
-      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
-      "requires": {
-        "fetch-blob": "^3.1.2"
-      }
-    },
     "forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -25969,9 +26006,9 @@
       }
     },
     "html-tags": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.2.0.tgz",
-      "integrity": "sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
+      "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
       "dev": true
     },
     "html-webpack-plugin": {
@@ -26153,7 +26190,7 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       }
@@ -26193,8 +26230,7 @@
     "immediate": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
-      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
-      "dev": true
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
     },
     "immutable": {
       "version": "4.1.0",
@@ -28011,7 +28047,6 @@
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
       "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
-      "dev": true,
       "requires": {
         "lie": "~3.3.0",
         "pako": "~1.0.2",
@@ -28023,7 +28058,6 @@
           "version": "2.3.7",
           "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
           "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
-          "dev": true,
           "requires": {
             "core-util-is": "~1.0.0",
             "inherits": "~2.0.3",
@@ -28136,7 +28170,6 @@
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
       "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
-      "dev": true,
       "requires": {
         "immediate": "~3.0.5"
       }
@@ -28848,11 +28881,6 @@
         "semver": "^7.3.5"
       }
     },
-    "node-domexception": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
-      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ=="
-    },
     "node-emoji": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.11.0.tgz",
@@ -28863,13 +28891,32 @@
       }
     },
     "node-fetch": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.0.tgz",
-      "integrity": "sha512-BKwRP/O0UvoMKp7GNdwPlObhYGB5DQqwhEDQlNKuoqwVYSxkSZCSbHjnFFmUEtwSKRPU4kNK8PbDYYitwaE3QA==",
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
+      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
       "requires": {
-        "data-uri-to-buffer": "^4.0.0",
-        "fetch-blob": "^3.1.4",
-        "formdata-polyfill": "^4.0.10"
+        "whatwg-url": "^5.0.0"
+      },
+      "dependencies": {
+        "tr46": {
+          "version": "0.0.3",
+          "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+          "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
+        },
+        "webidl-conversions": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+          "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
+        },
+        "whatwg-url": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+          "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+          "requires": {
+            "tr46": "~0.0.3",
+            "webidl-conversions": "^3.0.0"
+          }
+        }
       }
     },
     "node-forge": {
@@ -29252,8 +29299,7 @@
     "pako": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
-      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
-      "dev": true
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
     },
     "param-case": {
       "version": "3.0.4",
@@ -30695,7 +30741,7 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "devOptional": true
     },
     "sanitize-filename": {
       "version": "1.6.3",
@@ -30775,9 +30821,9 @@
       }
     },
     "semver": {
-      "version": "7.3.8",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-      "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+      "version": "7.5.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
+      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
       "requires": {
         "lru-cache": "^6.0.0"
       }
@@ -30867,9 +30913,9 @@
       }
     },
     "serialize-javascript": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz",
-      "integrity": "sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz",
+      "integrity": "sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==",
       "dev": true,
       "requires": {
         "randombytes": "^2.1.0"
@@ -30958,8 +31004,7 @@
     "setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
-      "dev": true
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
     },
     "setprototypeof": {
       "version": "1.2.0",
@@ -31018,7 +31063,6 @@
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
       "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
-      "dev": true,
       "requires": {
         "is-arrayish": "^0.3.1"
       },
@@ -31026,8 +31070,7 @@
         "is-arrayish": {
           "version": "0.3.2",
           "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
-          "dev": true
+          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
         }
       }
     },
@@ -31374,6 +31417,11 @@
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true
     },
+    "striptags": {
+      "version": "4.0.0-alpha.4",
+      "resolved": "https://registry.npmjs.org/striptags/-/striptags-4.0.0-alpha.4.tgz",
+      "integrity": "sha512-/0jWyVWhpg9ciRHfjKYBpMHXct/HrFRfsR2HU77nGPbc8SPcVSIHZlZR/0TG3MyPq2C+HiHuwx8BlbcdI/cNbw=="
+    },
     "style-loader": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
@@ -32039,8 +32087,7 @@
     "typescript": {
       "version": "4.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.3.tgz",
-      "integrity": "sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA==",
-      "devOptional": true
+      "integrity": "sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA=="
     },
     "unbox-primitive": {
       "version": "1.0.2",
@@ -32327,11 +32374,6 @@
         "defaults": "^1.0.3"
       }
     },
-    "web-streams-polyfill": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz",
-      "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q=="
-    },
     "webidl-conversions": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",

package.json

@@ -154,6 +154,7 @@
     "@types/dateformat": "^5.0.0",
     "@types/jest": "^27.5.2",
     "@types/node": "17.0.23",
+    "@types/node-fetch": "^2.6.3",
     "@types/react": "^18.0.33",
     "@types/react-dom": "^18.0.11",
     "@types/react-outside-click-handler": "^1.3.1",
@@ -176,7 +177,7 @@
     "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^4.1.0",
     "detect-port": "^1.3.0",
-    "electron": "^24.0.0",
+    "electron": "^24.3.1",
     "electron-builder": "^23.6.0",
     "electron-devtools-installer": "^3.2.0",
     "electron-notarize": "^1.2.1",
@@ -229,9 +230,11 @@
   "dependencies": {
     "@node-steam/vdf": "^2.2.0",
     "@tippyjs/react": "^4.2.6",
+    "@types/color": "^3.0.3",
     "archiver": "^5.3.1",
+    "color": "^4.2.3",
     "dateformat": "^5.0.3",
-    "dot-prop": "^7.2.0",
+    "dot-prop": "^8.0.0",
     "electron-debug": "^3.2.0",
     "electron-log": "^4.4.8",
     "electron-store": "^8.1.0",
@@ -241,8 +244,9 @@
     "fs-extra": "^11.1.1",
     "history": "^5.3.0",
     "is-online": "^9.0.1",
+    "jszip": "^3.10.1",
     "md5-file": "^5.0.0",
-    "node-fetch": "^3.3.0",
+    "node-fetch": "^2.6.7",
     "node-stream-zip": "^1.15.0",
     "react": "^18.2.0",
     "react-colorful": "^5.6.1",
@@ -256,9 +260,11 @@
     "rfdc": "^1.3.0",
     "rxjs": "^7.8.0",
     "sanitize-filename": "^1.6.3",
-    "semver": "^7.3.8",
+    "semver": "^7.5.1",
+    "striptags": "^4.0.0-alpha.4",
     "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss-scoped-groups": "^2.0.0",
+    "tippy.js": "^6.3.7",
     "use-double-click": "^1.0.5",
     "use-fit-text": "^2.4.0"
   },

release/app/package.json

@@ -1,11 +1,11 @@
 {
   "name": "bs-manager",
-  "version": "1.1.1",
+  "version": "1.2.0-alpha.1",
   "description": "A foundation for scalable desktop apps",
   "main": "./dist/main/main.js",
   "author": {
     "name": "Zagrios",
-    "email": "electronreactboilerplate@gmail.com",
+    "email": "admin@bsmanager.io",
     "url": "https://github.com/Zagrios/bs-manager"
   },
   "scripts": {
@@ -14,7 +14,7 @@
     "postinstall": "npm run electron-rebuild && npm run link-modules"
   },
   "dependencies": {
-    "ctrlc-windows": "^2.0.0"
+    "ctrlc-windows": "^2.1.0"
   },
   "license": "MIT"
 }

src/main/helpers/fs.helpers.ts

@@ -130,6 +130,6 @@ export async function copyDirectoryWithJunctions(src: string, dest: string, opti
 export interface Progression<T = unknown>{
     total: number;
     current: number;
-    extra?: T;
+    data?: T;
 }
 

src/main/helpers/zip.helpers.ts

@@ -0,0 +1,24 @@
+import JSZip from 'jszip';
+import { pathExist } from './fs.helpers';
+import path from 'path';
+import { mkdir, writeFile } from 'fs/promises';
+
+export async function extractZip(zip: JSZip, dest: string): Promise<string[]>{
+    if(!await pathExist(dest)){ throw new Error(`Path ${dest} does not exist`); }
+    const files: string[] = [];
+
+    for(const [relativePath, entry] of Object.entries(zip.files)){
+        if(entry.dir){ continue; }
+
+        const content = await entry.async("nodebuffer");
+        const outPath = path.join(dest, relativePath);
+        const outDir = path.dirname(outPath);
+
+        await mkdir(outDir, { recursive: true });
+        await writeFile(outPath, content);
+
+        files.push(outPath);
+    }
+
+    return files;
+}

src/main/ipcs/bs-model-ipcs.ts

@@ -1,8 +1,16 @@
 import { ipcMain } from "electron";
 import { UtilsService } from "../services/utils.service";
 import { IpcRequest } from "shared/models/ipc";
-import { MSModel } from "shared/models/model-saber/model-saber.model";
+import { MSModel, MSModelType } from "shared/models/models/model-saber.model";
 import { LocalModelsManagerService } from "../services/additional-content/local-models-manager.service";
+import { IpcService } from "../services/ipc.service";
+import { BSVersion } from "shared/bs-version.interface";
+import { BsmLocalMap } from "shared/models/maps/bsm-local-map.interface";
+import { from } from "rxjs";
+import { BsmLocalModel } from "shared/models/models/bsm-local-model.interface";
+import { ModelDownload } from "renderer/services/models-management/models-downloader.service";
+
+const ipc = IpcService.getInstance();
 
 ipcMain.on("one-click-install-model", async (event, request: IpcRequest<MSModel>) => {
     const utils = UtilsService.getInstance();
@@ -58,4 +66,25 @@ ipcMain.on("is-models-deep-links-enabled", async (event, request: IpcRequest<voi
         utils.ipcSend(request.responceChannel, {success: false});
     }
 
+});
+
+ipc.on<ModelDownload>("download-model", async (req, reply) => {
+    const models = LocalModelsManagerService.getInstance();
+    reply(models.downloadModel(req.args.model, req.args.version));
+});
+
+ipc.on<{version: BSVersion, type: MSModelType}>("get-version-models", async (req, reply) => {
+    const models = LocalModelsManagerService.getInstance();
+    const res = await models.getModels(req.args.type, req.args.version);
+    reply(res);
+});
+
+ipc.on<{version: BSVersion, models: BsmLocalModel[], outPath: string}>("export-models", async (req, reply) => {
+    const models = LocalModelsManagerService.getInstance();
+    reply(models.exportModels(req.args.outPath, req.args.version, req.args.models));
+});
+
+ipc.on<BsmLocalModel[]>("delete-models", async (req, reply) => {
+    const models = LocalModelsManagerService.getInstance();
+    reply(models.deleteModels(req.args));
 });

src/main/ipcs/model-saber.ipcs.ts

@@ -2,6 +2,10 @@ import { ipcMain } from "electron";
 import { IpcRequest } from "shared/models/ipc";
 import { ModelSaberService } from "../services/thrid-party/model-saber/model-saber.service";
 import { UtilsService } from "../services/utils.service";
+import { IpcService } from "../services/ipc.service";
+import { MSGetQuery } from "shared/models/models/model-saber.model";
+
+const ipc = IpcService.getInstance();
 
 ipcMain.on("ms-get-model-by-id", async (event, request: IpcRequest<string|number>) => {
     const utils = UtilsService.getInstance();
@@ -12,4 +16,9 @@ ipcMain.on("ms-get-model-by-id", async (event, request: IpcRequest<string|number
     }).catch(e => {
         utils.ipcSend(request.responceChannel, {success: false, error: e});
     })
+});
+
+ipc.on<MSGetQuery>("search-models", async (req, reply) => {
+    const ms = ModelSaberService.getInstance();
+    reply(ms.searchModels(req.args));
 });

src/main/main.ts

@@ -12,7 +12,6 @@ import path from 'path';
 import { app, ipcMain, protocol } from 'electron';
 import log from 'electron-log';
 import './ipcs';
-import { UtilsService } from './services/utils.service';
 import { WindowManagerService } from './services/window-manager.service';
 import { DeepLinkService } from './services/deep-link.service';
 import { AppWindow } from 'shared/models/window-manager/app-window.model';
@@ -22,6 +21,7 @@ import { LocalModelsManagerService } from './services/additional-content/local-m
 import { APP_NAME } from './constants';
 import { BSLauncherService } from './services/bs-launcher.service';
 import { IpcRequest } from 'shared/models/ipc';
+import { MSModelType } from '../shared/models/models/model-saber.model';
 
 const isDebug = process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true';
 

src/main/models/archive.class.ts

@@ -5,6 +5,7 @@ import recursive from "recursive-readdir";
 import { lstatSync } from "fs";
 import * as _path from "path";
 import { ArchiveProgress } from "shared/models/archive.interface";
+import { Progression } from "main/helpers/fs.helpers";
 
 export class Archive{
 
@@ -49,21 +50,21 @@ export class Archive{
     }
 
 
-    public finalize(): Observable<ArchiveProgress>{
+    public finalize(): Observable<Progression>{
 
-        const progress: ArchiveProgress = {
-            totalFiles: 0,
-            prossesedFiles: 0
+        const progress: Progression = {
+            total: 0,
+            current: 0
         };
         
-        return new Observable<ArchiveProgress>(observer => {
+        return new Observable<Progression>(observer => {
             (async () => {
 
-                progress.totalFiles = await this.loadTotalFiles();
+                progress.total = await this.loadTotalFiles();
 
                 this.archive.on("entry", e => {
                     if(e.stats.isDirectory()){ return; }
-                    progress.prossesedFiles++;
+                    progress.current++;
                     observer.next(progress);
                 });
 

src/main/services/additional-content/local-maps-manager.service.ts

@@ -16,12 +16,12 @@ import log from 'electron-log';
 import { WindowManagerService } from "../window-manager.service";
 import { ipcMain } from "electron";
 import { IpcRequest } from 'shared/models/ipc';
-import { Observable } from "rxjs";
+import { Observable, lastValueFrom } from "rxjs";
 import { Archive } from "../../models/archive.class";
 import { deleteFolder, ensureFolderExist, getFoldersInFolder, pathExist } from "../../helpers/fs.helpers";
 import { readFile } from "fs/promises";
 import { FolderLinkerService } from "../folder-linker.service";
-import { allSettled } from "../../helpers/promise.helpers";
+import { allSettled } from "../../../shared/helpers/promise.helpers";
 
 export class LocalMapsManagerService {
 
@@ -116,7 +116,7 @@ export class LocalMapsManagerService {
         await ensureFolderExist(this.utils.getTempPath());
         const dest = path.join(tempPath, fileName);
 
-        const zipPath = await this.reqService.downloadFile(zipUrl, dest);
+        const zipPath = (await lastValueFrom(this.reqService.downloadFile(zipUrl, dest))).data;
         const zip = new StreamZip.async({file : zipPath});
 
         return {zip, zipPath};

src/main/services/additional-content/local-models-manager.service.ts

@@ -4,14 +4,24 @@ import { ipcMain } from "electron";
 import { IpcRequest } from "shared/models/ipc";
 import { UtilsService } from "../utils.service";
 import { WindowManagerService } from "../window-manager.service";
-import { MSModel, MSModelType } from "shared/models/model-saber/model-saber.model";
+import { MSModel, MSModelType } from "../../../shared/models/models/model-saber.model";
 import { BSVersion } from "shared/bs-version.interface";
 import { BSLocalVersionService } from "../bs-local-version.service";
 import path from "path";
 import { RequestService } from "../request.service";
 import { copyFileSync } from "fs-extra";
 import sanitize from "sanitize-filename";
-import { ensureFolderExist } from "../../helpers/fs.helpers";
+import { Progression, ensureFolderExist, unlinkPath } from "../../helpers/fs.helpers";
+import { MODEL_FILE_EXTENSIONS, MODEL_TYPES, MODEL_TYPE_FOLDERS } from "../../../shared/models/models/constants";
+import { InstallationLocationService } from "../installation-location.service";
+import { Observable, Subscription, lastValueFrom, map } from "rxjs";
+import { readdir } from "fs/promises";
+import md5File from "md5-file";
+import { allSettled } from "../../../shared/helpers/promise.helpers";
+import { ModelSaberService } from "../thrid-party/model-saber/model-saber.service";
+import { BsmLocalModel } from "shared/models/models/bsm-local-model.interface";
+import { ArchiveProgress } from "shared/models/archive.interface";
+import { Archive } from "../../models/archive.class";
 
 export class LocalModelsManagerService {
 
@@ -26,18 +36,13 @@ export class LocalModelsManagerService {
         ModelSaber: "modelsaber",
     };
 
-    private readonly MODEL_TYPE_FOLDER: Record<Exclude<MSModelType, "misc">, string>  = {
-        avatar: "CustomAvatars",
-        bloq: "CustomNotes",
-        platform: "CustomPlatforms",
-        saber: "CustomSabers"
-    }
-
     private readonly deepLink: DeepLinkService;
     private readonly utils: UtilsService;
     private readonly windows: WindowManagerService;
     private readonly localVersion: BSLocalVersionService;
+    private readonly installPaths: InstallationLocationService;
     private readonly request: RequestService;
+    private readonly modelSaber: ModelSaberService;
 
     private constructor(){
         this.deepLink = DeepLinkService.getInstance();
@@ -45,6 +50,8 @@ export class LocalModelsManagerService {
         this.windows = WindowManagerService.getInstance();
         this.localVersion = BSLocalVersionService.getInstance();
         this.request = RequestService.getInstance();
+        this.installPaths = InstallationLocationService.getInstance();
+        this.modelSaber = ModelSaberService.getInstance();
 
         this.deepLink.addLinkOpenedListener(this.DEEP_LINKS.ModelSaber, (link) => {
             log.info("DEEP-LINK RECEIVED FROM", this.DEEP_LINKS.ModelSaber, link);
@@ -69,11 +76,8 @@ export class LocalModelsManagerService {
 
     private async getModelFolderPath(type: MSModelType, version?: BSVersion): Promise<string>{
 
-        if(!version){ throw "will be implemented whith models management" }
-        if(type === "misc"){ throw "model type not supported"; }
-
-        const versionPath = await this.localVersion.getVersionPath(version);
-        const modelFolderPath = path.join(versionPath, this.MODEL_TYPE_FOLDER[type]);
+        const rootPath = !!version ? await this.localVersion.getVersionPath(version) : this.installPaths.sharedContentPath;
+        const modelFolderPath = path.join(rootPath, MODEL_TYPE_FOLDERS[type]);
 
         await ensureFolderExist(modelFolderPath);
 
@@ -81,13 +85,42 @@ export class LocalModelsManagerService {
 
     }
 
-    public async downloadModel(model: MSModel, version: BSVersion): Promise<string>{
-        
-        const modelFolder = await this.getModelFolderPath(model.type, version);
-        const modelDest = path.join(modelFolder, sanitize(path.basename(model.download)));
+    public downloadModel(model: MSModel, version: BSVersion): Observable<Progression<BsmLocalModel>>{
+        return new Observable<Progression<BsmLocalModel>>(subscriber => {
 
-        return this.request.downloadFile(model.download, modelDest);
+            const subs: Subscription[] = [];
 
+            (async () => {
+
+                const modelFolder = await this.getModelFolderPath(model.type, version);
+                const modelDest = path.join(modelFolder, sanitize(path.basename(model.download)));
+
+                let url = model.download.split("/");
+                url[url.length - 1] = encodeURIComponent(url[url.length - 1]);
+
+                const download$ = this.request.downloadFile(url.join("/"), modelDest);
+
+                subs.push(download$.subscribe({ next: value => subscriber.next({...value, data: undefined}), error: e => subscriber.error(e) }));
+
+                const downloaded = await lastValueFrom(download$);
+
+                const res: BsmLocalModel = {
+                    path: downloaded.data,
+                    fileName: path.basename(downloaded.data),
+                    hash: await md5File(downloaded.data),
+                    type: model.type,
+                    model,
+                    version
+                }
+
+                subscriber.next({...downloaded, data: res});
+
+            })().catch(err => subscriber.error(err)).then(() => subscriber.complete());
+
+            return () => {
+                subs.forEach(sub => sub.unsubscribe());
+            }
+        });
     }
 
     public async oneClickDownloadModel(model: MSModel): Promise<void>{
@@ -100,18 +133,114 @@ export class LocalModelsManagerService {
 
         const fisrtVersion = versions.shift();
 
-        const downloaded = await this.downloadModel(model, fisrtVersion);
+        const downloaded = await lastValueFrom(this.downloadModel(model, fisrtVersion));
 
         for(const version of versions){
 
-            const modelDest = path.join(await this.getModelFolderPath(model.type, version), path.basename(downloaded));
+            const modelDest = path.join(await this.getModelFolderPath(model.type, version), path.basename(downloaded.data.path));
 
-            copyFileSync(downloaded, modelDest);
+            copyFileSync(downloaded.data.path, modelDest);
 
         }
 
     }
 
+    private async getModelsPaths(type: MSModelType, version?: BSVersion): Promise<string[]>{
+        const modelsPath = await this.getModelFolderPath(type, version);
+        const files = await readdir(modelsPath, {withFileTypes: true});
+
+        //return files.filter(file => file.isFile() && path.extname(file.name) === MODEL_FILE_EXTENSIONS[type]).map(file => path.join(modelsPath, file.name));
+        return files.reduce((acc, file) => {
+            if(!file.isFile() || path.extname(file.name) !== MODEL_FILE_EXTENSIONS[type]){ return acc; }
+            acc.push(path.join(modelsPath, file.name));
+            return acc;
+        }, []);
+    }
+
+    public getModels(type: MSModelType, version?: BSVersion): Observable<Progression<BsmLocalModel[]>>{
+
+        const progression: Progression<BsmLocalModel[]> = {
+            total: 0,
+            current: 0,
+            data: null
+        };
+
+        return new Observable<Progression<BsmLocalModel[]>>(subscriber => {
+            (async () => {
+                const modelsPaths = await this.getModelsPaths(type, version);
+                progression.total = modelsPaths.length;
+
+                const models = await allSettled(modelsPaths.map(async modelPath => {
+                    
+                    const hash = await md5File(modelPath)
+                    
+                    const localModel: BsmLocalModel = {
+                        path: modelPath,
+                        fileName: path.basename(modelPath, MODEL_FILE_EXTENSIONS[type]),
+                        model: await this.modelSaber.getModelByHash(hash),
+                        type, hash, version
+                    }
+
+                    progression.current++;
+
+                    subscriber.next(progression);
+
+                    return localModel;
+                }));
+
+                progression.data = models;
+                subscriber.next(progression);
+
+            })().catch(e => subscriber.error(e)).finally(() => subscriber.complete());
+        });
+
+    }
+
+    public exportModels(output: string, version?: BSVersion, models?: BsmLocalModel[]): Observable<Progression>{
+
+        return new Observable<Progression>(subscriber => {
+
+            const archive = new Archive(output);
+
+            (async () => {
+                
+                if(models?.length){
+                    models.forEach(model => archive.addFile(model.path, path.join(MODEL_TYPE_FOLDERS[model.type], path.basename(model.path))));
+                }
+                else{
+                    for(const type of MODEL_TYPES){
+                        archive.addDirectory(await this.getModelFolderPath(type, version));
+                    }
+                }
+
+            })().catch(e => subscriber.error(e)).then(() => (
+                archive.finalize().subscribe(subscriber)
+            ));
+
+        });
+    }
+
+    public deleteModels(models: BsmLocalModel[]): Observable<Progression<BsmLocalModel[]>>{
+        return new Observable<Progression<BsmLocalModel[]>>(subscriber => {
+            (async () => {
+
+                const progression: Progression<BsmLocalModel[]> = {
+                    total: models.length,
+                    current: 0,
+                    data: []
+                };
+
+                for(const model of models){
+                    await unlinkPath(model.path);
+                    progression.data.push(model);
+                    progression.current = progression.data.length;
+                    subscriber.next(progression);
+                }
+
+            })().catch(e => subscriber.error(e)).finally(() => subscriber.complete());
+        });
+    }
+
     public enableDeepLinks(): boolean{
         return Array.from(Object.values(this.DEEP_LINKS)).every(link => this.deepLink.registerDeepLink(link));
     }
@@ -124,4 +253,10 @@ export class LocalModelsManagerService {
         return Array.from(Object.values(this.DEEP_LINKS)).every(link => this.deepLink.isDeepLinkRegistred(link));
     }
 
+}
+
+export interface BsmLocalModelsProgress {
+    total: number;
+    loaded: number;
+    models: MSModel[];
 }

src/main/services/additional-content/local-playlists-manager.service.ts

@@ -1,5 +1,5 @@
 import path from "path";
-import { BehaviorSubject, Observable } from "rxjs";
+import { BehaviorSubject, Observable, lastValueFrom } from "rxjs";
 import { BSVersion } from "shared/bs-version.interface";
 import { BSLocalVersionService } from "../bs-local-version.service";
 import { DeepLinkService } from "../deep-link.service";
@@ -7,7 +7,7 @@ import { RequestService } from "../request.service";
 import { UtilsService } from "../utils.service";
 import { LocalMapsManagerService } from "./local-maps-manager.service";
 import log from "electron-log"
-import { isValidUrl } from "../../helpers/url.helpers";
+import { isValidUrl } from "../../../shared/helpers/url.helpers";
 import { ipcMain } from "electron";
 import { WindowManagerService } from "../window-manager.service";
 import { IpcRequest } from "shared/models/ipc";
@@ -97,7 +97,7 @@ export class LocalPlaylistsManagerService {
             copyFileSync(bpListUrlOrPath, bpListDest);
         }
         else{
-            await this.request.downloadFile(bpListUrlOrPath, bpListDest);
+            await lastValueFrom(this.request.downloadFile(bpListUrlOrPath, bpListDest));
         }
 
         return bpListDest;

src/main/services/bs-version-lib.service.ts

@@ -4,7 +4,7 @@ import { writeFileSync } from 'fs';
 import { BSVersion } from 'shared/bs-version.interface';
 import { RequestService } from "./request.service"
 import { readJSON } from 'fs-extra';
-import { allSettled } from '../helpers/promise.helpers';
+import { allSettled } from '../../shared/helpers/promise.helpers';
 
 export class BSVersionLibService{
 

src/main/services/mods/bs-mods-manager.service.ts

@@ -6,12 +6,15 @@ import path from "path";
 import { UtilsService } from "../utils.service";
 import md5File from "md5-file";
 import fs from "fs"
-import StreamZip from "node-stream-zip";
 import { RequestService } from "../request.service";
 import { spawn } from "child_process";
 import { BS_EXECUTABLE } from "../../constants";
 import log from "electron-log";
-import { deleteFolder, ensureFolderExist, pathExist, unlinkPath } from "../../helpers/fs.helpers";
+import { deleteFolder, pathExist, unlinkPath } from "../../helpers/fs.helpers";
+import { lastValueFrom } from "rxjs";
+import JSZip from "jszip"
+import { extractZip } from "../../helpers/zip.helpers";
+import { ensureFolderExist } from "../../helpers/fs.helpers";
 
 export class BsModsManagerService {
 
@@ -95,17 +98,20 @@ export class BsModsManagerService {
         return this.getIpaFromHash(injectorMd5);
     }
 
-    private async downloadZip(zipUrl: string): Promise<{zip: StreamZip.StreamZipAsync, zipPath: string}>{
+    private async downloadZip(zipUrl: string): Promise<JSZip>{
         zipUrl = path.join(this.beatModsApi.BEAT_MODS_URL, zipUrl);
-        const fileName = path.basename(zipUrl);
-        const tempPath = this.utilsService.getTempPath();
-        await ensureFolderExist(this.utilsService.getTempPath());
-        const dest = path.join(tempPath, fileName);
 
-        const zipPath = await this.requestService.downloadFile(zipUrl, dest);
-        const zip = new StreamZip.async({file : zipPath});
+        const buffer = await lastValueFrom(this.requestService.downloadBuffer(zipUrl)).then(progress => progress.data).catch(e => {
+            log.error("ZIP", "Error while downloading zip", e);
+            return undefined
+        });
 
-        return {zip, zipPath};
+        if(!buffer){ return null; }
+
+        return JSZip.loadAsync(buffer).catch(e => {
+            log.error("ZIP", "Error while loading zip", e);
+            return null
+        });
     }
 
     private async executeBSIPA(version: BSVersion, args: string[]): Promise<boolean>{
@@ -134,23 +140,22 @@ export class BsModsManagerService {
     }
 
     private async installMod(mod: Mod, version: BSVersion): Promise<boolean>{
-    
+
         this.utilsService.ipcSend<ModInstallProgression>("mod-installed", {success: true, data: {name: mod.name, progression: ((this.nbInstalledMods + 1) / this.nbModsToInstall) * 100}}) 
 
         const download = this.getModDownload(mod, version);
 
         if(!download){ return false; }
 
-        const {zip, zipPath} = await this.downloadZip(download.url);
+        const zip = await this.downloadZip(download.url);
 
         if(!zip){ return false; }
 
         const crypto = require('crypto');
-        const entries = await zip.entries();
+        const files = await zip.files;
 
-        const checkedEntries = (await Promise.all(Object.values(entries).map(async (entry) => {
-            if(!entry.isFile){ return undefined; }
-            const data = await zip.entryData(entry);
+        const checkedEntries = (await Promise.all(Object.values(files).map(async (entry) => {
+            const data = await entry.async("nodebuffer");
             const entryMd5 = crypto.createHash('md5').update(data).digest('hex')
             return download.hashMd5.some(md5 => md5.hash === entryMd5) ? entry : undefined;
         }))).filter(entry => !!entry);
@@ -161,12 +166,16 @@ export class BsModsManagerService {
         const isBSIPA = mod.name.toLowerCase() === "bsipa";
         const destDir = isBSIPA ? verionPath : path.join(verionPath, ModsInstallFolder.PENDING);
 
-        const extracted = await zip.extract(null, destDir).then(() => true).catch(err => {log.error(err); return false});
+        await ensureFolderExist(destDir);
+        const extracted = await extractZip(zip, destDir).then(() => true).catch(e => {
+            log.error("EXTRACT MOD ZIP", e);
+            return false;
+        })
 
-        await zip.close();
-        await unlinkPath(zipPath);
-
-        const res = isBSIPA ? (extracted && (await this.executeBSIPA(version, ["-n"]))) : extracted;
+        const res = isBSIPA ? (extracted && (await this.executeBSIPA(version, ["-n"]).catch(e => {
+            log.error(e);
+            return false;
+        }))) : extracted;
 
         res && this.nbInstalledMods++;
 

src/main/services/request.service.ts

@@ -1,5 +1,8 @@
-import { get } from "https";
+import { RequestOptions, get } from "https";
 import { createWriteStream, unlink } from "fs";
+import { Progression, unlinkPath } from "main/helpers/fs.helpers";
+import { Observable, buffer, shareReplay, tap } from "rxjs";
+import log from "electron-log";
 
 export class RequestService {
 
@@ -12,10 +15,11 @@ export class RequestService {
 
     private constructor(){}
 
-    public get<T = any>(url: string): Promise<T>{
+    public get<T = any>(options: string|RequestOptions): Promise<T>{
+
         return new Promise((resolve, reject) => {
             let body = ''
-            get(url, (res) => {
+            get(options, (res) => {
                 res.on('data', chunk => body += chunk);
                 res.on('end', () => {
                     resolve(JSON.parse(body));
@@ -25,21 +29,70 @@ export class RequestService {
         });
     }
     
-    public downloadFile(url: string, dest: string): Promise<string>{
-        return new Promise((resolve, reject) => {
+    public downloadFile(url: string, dest: string): Observable<Progression<string>>{
+
+        return new Observable<Progression<string>>(subscriber => {
+            const progress: Progression<string> = { current: 0, total: 0 };
 
             const file = createWriteStream(dest);
-            get(url, res => {
-                res.pipe(file);
-                file.on("close", () => {
-                    file.close(() => resolve(dest))
-                }).on("error", err => {
-                    unlink(dest, () => reject(err));
-                });
-            }).on("error", err => {
-                unlink(dest, () => reject(err));
+
+            file.on("close", () => { 
+                progress["data"] = dest;
+                subscriber.next(progress); subscriber.complete(); 
             });
-        });
+            file.on("error", err => unlink(dest, () => subscriber.error(err)));
+
+            const req = get(url, res => {
+
+                progress.total = parseInt(res.headers?.["content-length"] || "0", 10);
+
+                res.on("data", chunk => {
+                    progress.current += chunk.length;
+                    subscriber.next(progress);
+                });
+
+                res.pipe(file);
+
+            });
+
+            req.on("error", err => { subscriber.error(err); });
+
+        }).pipe(tap({error: e => log.error(e)}), shareReplay(1));
+        
+    }
+
+    public downloadBuffer(url: string): Observable<Progression<Buffer>>{
+
+        return new Observable<Progression<Buffer>>(subscriber => {
+            
+            const progress: Progression<Buffer> = {
+                current: 0,
+                total: 0,
+                data: null
+            };
+
+            const allChunks: Buffer[] = [];
+
+            const req = get(url, res => {
+
+                progress.total = parseInt(res.headers?.["content-length"] || "0", 10);
+
+                res.on("data", chunk => {
+                    allChunks.push(chunk);
+                    progress.current += chunk.length;
+                    subscriber.next(progress);
+                });
+                res.on('end', () => {
+                    progress.data = Buffer.concat(allChunks);
+                    subscriber.next(progress);
+                    subscriber.complete();
+                });
+                res.on('error', (err) => subscriber.error(err))
+            });
+
+            req.on("error", err => { subscriber.error(err); });
+
+        }).pipe(tap({error: e => log.error(e)}), shareReplay(1));
     }
 
 }

src/main/services/thrid-party/beat-saver/beat-saver.service.ts

@@ -1,4 +1,4 @@
-import { splitIntoChunk } from "../../../helpers/array.helpers";
+import { splitIntoChunk } from "../../../../shared/helpers/array.helpers";
 import { BsvMapDetail } from "shared/models/maps";
 import { BsvPlaylist, SearchParams } from "shared/models/maps/beat-saver.model";
 import { BeatSaverApiService } from "./beat-saver-api.service";

src/main/services/thrid-party/model-saber/model-saber-api.service.ts

@@ -1,6 +1,6 @@
 import fetch from "node-fetch";
 import { ApiResult } from "renderer/models/api/api.model";
-import { MSGetQuery, MSGetQueryFilter, MSGetResponse } from "shared/models/model-saber/model-saber.model";
+import { MSGetQuery, MSGetQueryFilter, MSGetResponse } from "../../../../shared/models/models/model-saber.model";
 
 export class ModelSaberApiService {
 

src/main/services/thrid-party/model-saber/model-saber.service.ts

@@ -1,5 +1,8 @@
-import { MSGetQuery, MSGetQueryFilter, MSModel } from "shared/models/model-saber/model-saber.model";
+import { Observable } from "rxjs";
+import { MSGetQuery, MSGetQueryFilterType, MSModel, MSModelPlatform } from "../../../../shared/models/models/model-saber.model";
 import { ModelSaberApiService } from "./model-saber-api.service";
+import log from "electron-log";
+import striptags from "striptags"
 
 export class ModelSaberService {
 
@@ -10,6 +13,8 @@ export class ModelSaberService {
         return ModelSaberService.instance;
     }
 
+    private readonly modelsHashCache: Map<string, MSModel> = new Map(); // key: hash, value: model
+
     private readonly modelSaberApi: ModelSaberApiService;
 
     private constructor(){
@@ -21,8 +26,8 @@ export class ModelSaberService {
         const query: MSGetQuery = {
             start: 0,
             end: 1,
-            platform: "pc",
-            filter: [{type: "id", value: id}]
+            platform: MSModelPlatform.PC,
+            filter: [{type: MSGetQueryFilterType.ID, value: id}]
         }
 
         try{
@@ -37,9 +42,61 @@ export class ModelSaberService {
             return res.data[`${id}`];
         }
         catch(e){
+            log.error(e);
             return null;
         }
 
     }
 
+    public async getModelByHash(hash: string): Promise<MSModel>{
+
+        if(this.modelsHashCache.has(hash)){
+            return this.modelsHashCache.get(hash);
+        }
+        
+        const query: MSGetQuery = {
+            start: 0,
+            end: 1,
+            platform: MSModelPlatform.PC,
+            filter: [{type: MSGetQueryFilterType.Hash, value: hash}]
+        }
+
+        try{
+            const res = await this.modelSaberApi.searchModel(query);
+
+            if(res.status !== 200){ return null;}
+
+            if(Object.keys(res.data).length === 0){
+                return null;
+            }
+
+            const model = Array.from(Object.values(res.data)).at(0);
+
+            model.name = striptags(model.name ?? "");
+
+            this.modelsHashCache.set(hash, model);
+
+            return model
+        }
+        catch(e){
+            log.error(e);
+            return null;
+        }
+
+    }
+
+    public searchModels(query: MSGetQuery): Observable<MSModel[]>{
+        return new Observable<MSModel[]>(observer => {
+            (async () => {
+                const res = await this.modelSaberApi.searchModel(query);
+                if(res.status !== 200){ observer.error(res.status); }
+                observer.next(Object.values(res.data).map(model => {
+                    if(!model || !model.name){ return model; }
+                    (model as MSModel).name = striptags(model.name);
+                    return model;
+                }));
+            })().catch(e => observer.error(e)).then(() => observer.complete());
+        });
+    }
+
 }

src/main/services/version-folder-linker.service.ts

@@ -5,7 +5,7 @@ import { BSVersion } from "shared/bs-version.interface";
 import { LocalMapsManagerService } from "./additional-content/local-maps-manager.service";
 import { BSLocalVersionService } from "./bs-local-version.service";
 import { FolderLinkerService, LinkOptions } from "./folder-linker.service";
-import { allSettled } from "../helpers/promise.helpers";
+import { allSettled } from "../../shared/helpers/promise.helpers";
 
 export class VersionFolderLinkerService {
 
@@ -80,6 +80,7 @@ export class VersionFolderLinkerService {
     }
 
     public async isFolderLinked(version: BSVersion, relativeFolder: string): Promise<boolean>{
+        if(!version){ return Promise.reject("no version provided") }
         const versionPath = await this.localVersion.getVersionPath(version);
         const folderPath = this.relativeToFullPath(versionPath, relativeFolder);
         return this.folderLinker.isFolderSymlink(folderPath);

src/renderer/components/maps-mangement-components/link-button.component.tsx

@@ -2,6 +2,7 @@ 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"
 
 type Props = {
     className?: string,
@@ -13,6 +14,7 @@ type Props = {
 
 export const LinkButton = motion(forwardRef((props: Props, ref) => {
 
+    const t = useTranslation()
     const color = useThemeColor("first-color");
 
     const linkedColor = (() => {
@@ -22,7 +24,7 @@ export const LinkButton = motion(forwardRef((props: Props, ref) => {
     })()
 
     return (
-        <div ref={ref} className={props.className} title={props.title} onClick={e => {e.preventDefault(); !props.disabled && props.onClick?.()}} style={{pointerEvents: props.disabled ? "none" : "auto"}}>
+        <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"}}>
             <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>

src/renderer/components/maps-mangement-components/local-maps-list-panel.component.tsx

@@ -9,7 +9,7 @@ import { MapsDownloaderService } from "renderer/services/maps-downloader.service
 import { VariableSizeList } from "react-window"
 import { MapsRow } from "./maps-row.component"
 import { BehaviorSubject } from "rxjs"
-import { debounceTime, last, map, mergeMap } from "rxjs/operators"
+import { debounceTime, last, mergeMap, tap } from "rxjs/operators"
 import { BeatSaverService } from "renderer/services/thrird-partys/beat-saver.service"
 import { OsDiagnosticService } from "renderer/services/os-diagnostic.service"
 import { useTranslation } from "renderer/hooks/use-translation.hook"
@@ -115,11 +115,8 @@ export const LocalMapsListPanel = forwardRef(({version, className, filter, searc
 
         const loadMapsObs$ = mapsManager.getMaps(version);
 
-        loadMapsObs$.pipe(map(progess => {
-            return Math.floor(((progess.loaded / progess.total) * 100));
-        })).subscribe(percent => loadPercent$.next(percent));
-
         subs.push(loadMapsObs$.pipe(
+            tap(progress => loadPercent$.next(Math.floor(((progress.loaded / progress.total) * 100)))),
             last(),
             mergeMap(async progress => {
                 if(os.isOffline){ return progress.maps; }

src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx

@@ -43,6 +43,8 @@ export function MapsPlaylistsPanel({version}: Props) {
     const mapsRef = useRef<any>();
 
     useEffect(() => {
+        if(!version){ return; }
+        
         loadMapIsLinked();
 
         const sub = mapsService.$mapsLinkingPending(version).pipe(debounceTime(50)).subscribe(setLinkingPending);
@@ -108,7 +110,7 @@ export function MapsPlaylistsPanel({version}: Props) {
                                 <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("pages.version-viewer.maps.tabs.maps.actions.add-maps.text")}</span>
+                                <span className="text-sm brightness-150">{t("misc.add")}</span>
                             </motion.div>
                         )}
                         {(!!version) && (
@@ -120,7 +122,7 @@ export function MapsPlaylistsPanel({version}: Props) {
                                 initial={{rotate: 0}} 
                                 className="block p-0.5 h-[calc(100%-5px)] aspect-square blur-0 hover:brightness-75" 
                                 linked={mapsLinked} 
-                                title={t(mapsLinked ? "pages.version-viewer.maps.tabs.maps.actions.link-maps.tooltips.unlink" : "pages.version-viewer.maps.tabs.maps.actions.link-maps.tooltips.link")} 
+                                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)}
                             />
                         )}
@@ -145,8 +147,8 @@ export function MapsPlaylistsPanel({version}: Props) {
     })()
 
     return (
-        <div className="w-full h-full flex flex-col items-center justify-center">
-            <nav className="w-full shrink-0 flex h-9 justify-center px-40 gap-2 mb-3 text-main-color-1 dark:text-white">
+        <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">
                 <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>

src/renderer/components/modal/modal-types/download-maps-modal.component.tsx

@@ -48,7 +48,7 @@ export const DownloadMapsModal: ModalComponent<void, {version: BSVersion, ownedM
 
     const loaderRef = useRef(null);
 
-    const sortOptions: BsmSelectOption[] = (() => {
+    const sortOptions: BsmSelectOption<SearchOrder>[] = (() => {
         return BSV_SORT_ORDER.map(sort => ({text: `beat-saver.maps-sorts.${sort}`, value: sort}));
     })();
     
@@ -135,10 +135,10 @@ export const DownloadMapsModal: ModalComponent<void, {version: BSVersion, ownedM
         mapsDownloader.removeMapToDownload({map, version});
     }, []);
 
-    const handleSortChange = (newSort: string) => {
-        setSortOrder(() => newSort as SearchOrder);
+    const handleSortChange = (newSort: SearchOrder) => {
+        setSortOrder(() => newSort);
         setMaps(() => []);
-        setSearchParams(() => ({...searchParams, sortOrder: (newSort as SearchOrder)}));
+        setSearchParams(() => ({...searchParams, sortOrder: (newSort)}));
     }
 
     const handleSearch = () => {
@@ -167,7 +167,7 @@ export const DownloadMapsModal: ModalComponent<void, {version: BSVersion, ownedM
                 </BsmDropdownButton>
                 <input className="h-full bg-light-main-color-1 dark:bg-main-color-1 rounded-full px-2 grow pb-0.5" type="text" name="" id="" placeholder={t("pages.version-viewer.maps.search-bar.search-placeholder")} value={query} onChange={e => setQuery(e.target.value)}/>
                 <BsmButton className="shrink-0 rounded-full py-1 px-3 !bg-light-main-color-1 dark:!bg-main-color-1 flex justify-center items-center capitalize" icon="search" text="modals.download-maps.search-btn" withBar={false} onClick={e => {e.preventDefault(); handleSearch()}}/>
-                <BsmSelect className="bg-light-main-color-1 dark:bg-main-color-1 rounded-full px-1 pb-0.5 text-center" options={sortOptions} onChange={handleSortChange}/>
+                <BsmSelect className="bg-light-main-color-1 dark:bg-main-color-1 rounded-full px-1 pb-0.5 text-center" options={sortOptions} onChange={sort => handleSortChange(sort)}/>
             </div>
             <ul className="w-full grow flex content-start flex-wrap gap-2 pt-1.5 px-2 overflow-y-scroll overflow-x-hidden scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900 z-0" >
                 {maps.length === 0 ? (

src/renderer/components/modal/modal-types/models/delete-models-modal.component.tsx

@@ -0,0 +1,48 @@
+import { useState } from 'react'
+import { ModalComponent, ModalExitCode } from 'renderer/services/modale.service'
+import { BsmLocalModel } from 'shared/models/models/bsm-local-model.interface'
+import BeatConflict from '../../../../../../assets/images/apngs/beat-conflict.png'
+import { BsmImage } from 'renderer/components/shared/bsm-image.component'
+import { BsmCheckbox } from 'renderer/components/shared/bsm-checkbox.component'
+import { BsmButton } from 'renderer/components/shared/bsm-button.component'
+import { useTranslation } from 'renderer/hooks/use-translation.hook'
+import { useOnUpdate } from 'renderer/hooks/use-on-update.hook'
+import { useConstant } from 'renderer/hooks/use-constant.hook'
+import { ConfigurationService } from 'renderer/services/configuration.service'
+import { ModelsManagerService } from 'renderer/services/models-management/models-manager.service'
+
+export const DeleteModelsModal: ModalComponent<void, {models: BsmLocalModel[], linked: boolean}> = ({resolver, data}) => {
+
+    const config = useConstant(() => ConfigurationService.getInstance());
+    const t = useTranslation();
+    const [remember, setRemember] = useState(config.get<boolean>(ModelsManagerService.REMEMBER_CHOICE_DELETE_MODEL_KEY) || false);
+
+    useOnUpdate(() => {
+        config.set(ModelsManagerService.REMEMBER_CHOICE_DELETE_MODEL_KEY, remember);
+    }, [remember]);
+
+    const isMultiple = data.models.length > 1;
+
+    const title = useConstant(() => isMultiple ? t("models.modals.delete-models.title") : t("models.modals.delete-model.title"));
+    const desc = useConstant(() => isMultiple ? t("models.modals.delete-models.desc", {nb: `${data.models.length}`}) : t("models.modals.delete-model.desc", {modelName: data.models[0].model?.name ?? data.models[0].fileName}));
+    const linkedAnnotation = useConstant(() => data.linked ? (isMultiple ? t("models.modals.delete-models.linked-annotation") : t("models.modals.delete-model.linked-annotation")) : undefined);
+
+    return (
+        <form className="text-gray-800 dark:text-gray-200">
+            <h1 className="text-3xl uppercase tracking-wide w-full text-center">{title}</h1>
+            <BsmImage className="mx-auto h-24" image={BeatConflict}/>
+            <p className="max-w-sm w-full">{desc}</p>
+            {data.linked && <p className="text-sm italic mt-2 w-fit">{linkedAnnotation}</p>}
+            {!isMultiple && (
+                <div className="flex items-center relative py-2 gap-1 mt-1">
+                    <BsmCheckbox className="h-5 relative z-[1]" checked={remember} onChange={(val) => setRemember(val)}/>
+                    <span className="italic">{t("modals.misc.remember-my-choice")}</span>
+                </div>
+            )}
+            <div className="grid grid-flow-col grid-cols-2 gap-4 mt-2">
+                <BsmButton typeColor="cancel" className="rounded-md text-center transition-all" onClick={() => resolver({exitCode: ModalExitCode.CANCELED})} withBar={false} text="misc.cancel"/>
+                <BsmButton typeColor="primary" className="rounded-md text-center transition-all" onClick={() => resolver({exitCode: ModalExitCode.COMPLETED})} withBar={false} text="misc.delete"/>
+            </div>
+        </form>
+    )
+}

src/renderer/components/modal/modal-types/models/download-models-modal.component.tsx

@@ -0,0 +1,195 @@
+import { motion } from "framer-motion";
+import { BsmButton } from "renderer/components/shared/bsm-button.component";
+import { BsmSelect, BsmSelectOption } from "renderer/components/shared/bsm-select.component";
+import { ModalComponent } from "renderer/services/modale.service";
+import { BSVersion } from "shared/bs-version.interface";
+import BeatWaitingImg from "../../../../../../assets/images/apngs/beat-waiting.png";
+import BeatConflictImg from "../../../../../../assets/images/apngs/beat-conflict.png";
+import { MSGetQuery, MSGetSort, MSGetSortDirection, MSModel, MSModelPlatform, MSModelType } from "shared/models/models/model-saber.model";
+import { useCallback, useState } from "react";
+import { ModelItem } from "renderer/components/models-management/model-item.component";
+import { useService } from "renderer/hooks/use-service.hook";
+import { ModelDownload, ModelsDownloaderService } from "renderer/services/models-management/models-downloader.service";
+import { ModelSaberService } from "renderer/services/thrird-partys/model-saber.service";
+import { useBehaviorSubject } from "renderer/hooks/use-behavior-subject.hook";
+import { useTranslation } from "renderer/hooks/use-translation.hook";
+import { OsDiagnosticService } from "renderer/services/os-diagnostic.service";
+import { useObservable } from "renderer/hooks/use-observable.hook";
+import { useConstant } from "renderer/hooks/use-constant.hook";
+import { MODEL_TYPES, MS_GET_QUERY_SORTS } from "shared/models/models/constants";
+import { useOnUpdate } from "renderer/hooks/use-on-update.hook";
+import equal from "fast-deep-equal";
+import { catchError, of } from "rxjs";
+import Tippy from "@tippyjs/react";
+import { BsmLocalModel } from "shared/models/models/bsm-local-model.interface";
+
+export const DownloadModelsModal: ModalComponent<void, {version: BSVersion, type: MSModelType, owned: BsmLocalModel[]}> = ({resolver, data: { version, type, owned }}) => {
+
+    const modelsDownloader = useService(ModelsDownloaderService);
+    const modelSaber = useService(ModelSaberService);
+    const os = useService(OsDiagnosticService);
+
+    const t = useTranslation();
+
+    const modelTypesOptions = useConstant<BsmSelectOption<MSModelType>[]>(() => MODEL_TYPES.map(type => ({
+        text: `models.types.plural.${type}`,
+        value: type
+    })));
+
+    const querySortsOptions = useConstant<BsmSelectOption<MSGetSort>[]>(() => MS_GET_QUERY_SORTS.map(sort => ({
+        text:  `models.sorts.${sort}`,
+        value: sort
+    })));
+
+    const currentDownload = useObservable(modelsDownloader.currentDownload$(), null);
+    const downloadQueue = useObservable(modelsDownloader.getQueue$(), []);
+    const [msModels, msModels$] = useBehaviorSubject<MSModel[]>([]);
+    const isOnline = useObservable(os.isOnline$, true);
+    const [error, error$] = useBehaviorSubject(false);
+    const [isLoading, isLoading$] = useBehaviorSubject(false);
+    const [ownedModels, setOwnedModels] = useState<BsmLocalModel[]>(owned ?? []);
+    
+    const [currentType, currentType$] = useBehaviorSubject<MSModelType>(type);
+    const [currentSort, currentSort$] = useBehaviorSubject<MSGetSort>(MSGetSort.Date);
+    const [searhInput, searhInput$] = useBehaviorSubject("");
+    const [getQuery, getQuery$] = useBehaviorSubject<MSGetQuery>({ type: currentType, platform: MSModelPlatform.PC, start: 0, end: 25, sort: currentSort, sortDirection: MSGetSortDirection.Descending });
+
+    useOnUpdate(() => {
+        const sub = modelsDownloader.onModelsDownloaded((model => {
+            if(!equal(model.version, version)) { return; }
+            setOwnedModels(prev => [...prev ?? [], model]);
+        }));
+
+        return () => sub.unsubscribe();
+    });
+
+    useOnUpdate(() => {
+        error$.next(false);
+        isLoading$.next(true);
+
+        const sub = modelSaber.searchModels(getQuery).pipe(catchError(() => {
+            error$.next(true);
+            return of([]);
+        })).subscribe(models => {
+            msModels$.next([...msModels, ...models]);
+            isLoading$.next(false);
+        });
+
+        return () => sub.unsubscribe();
+    }, [getQuery])
+
+    useOnUpdate(() => {
+        msModels$.next([]);
+
+        getQuery$.next({
+            ...getQuery$.value,
+            start: 0,
+            end: 25,
+            type: currentType,
+            sort: currentSort
+        });
+
+    }, [currentType, currentSort]);
+
+    const loadMore = () => {
+        const currentQuery = getQuery;
+        currentQuery.start += 25;
+        currentQuery.end += 25;
+        getQuery$.next({...currentQuery});
+    }
+
+    const search = () => {
+
+        const getQuery: MSGetQuery = {
+            start: 0, end: 25,
+            type: currentType,
+            sort: currentSort,
+            filter: modelSaber.parseFilter(searhInput)
+        };
+
+        msModels$.next([]);
+        getQuery$.next(getQuery);
+
+    }
+
+    const handleDownloadModel = useCallback((model: MSModel) => {
+        modelsDownloader.addModelToDownload({model, version});
+    }, []);
+
+    const handleCancelDownload = useCallback((model: MSModel) => {
+        modelsDownloader.removeFromDownloadQueue({model, version});
+    }, []);
+
+    const modelPendingDownload = (model: MSModel) => {
+        return downloadQueue.some(download => download.model.id === model.id && equal(download.version, version));
+    }
+
+    const isModelOwned = (model: MSModel) => {
+        return !!ownedModels.some(owned => owned.hash === model.hash);
+    }
+
+    const renderFilterTips = useConstant(() => (
+        <div className="w-fit flex">
+            <table className="w-fit whitespace-nowrap grow shrink-0 text-sm">
+                <tbody>
+                    <tr className="font-bold"><td className="mr-3 block">{t("models.modals.download-models.search-tips.header.tag")}</td><td>{t("models.modals.download-models.search-tips.header.desc")}</td></tr>
+                    <tr><td className="mr-3 block">author:</td><td>{t("models.modals.download-models.search-tips.author-desc")}</td></tr>
+                    <tr><td className="mr-3 block">tag:</td><td>{t("models.modals.download-models.search-tips.tag-desc")}</td></tr>
+                    <tr><td className="mr-3 block">hash:</td><td>{t("models.modals.download-models.search-tips.hash-desc")}</td></tr>
+                    <tr><td className="mr-3 block">name:</td><td>{t("models.modals.download-models.search-tips.name-desc")}</td></tr>
+                    <tr><td className="mr-3 block">discordid:</td><td>{t("models.modals.download-models.search-tips.discordid-desc")}</td></tr>
+                    <tr><td className="mr-3 block">status:</td><td>{t("models.modals.download-models.search-tips.status-desc")}</td></tr>
+                </tbody>
+            </table>
+        </div>
+    ));
+
+    const renderLoadingStatus = () => {
+        if(isLoading) { return <span className="text-lg">{t("models.panel.grid.loading")}</span> }
+        if(isOnline) { return <span className="text-lg">{t("models.modals.download-models.no-models")}</span> }
+        if(!isOnline) { return <span className="text-lg">{t("models.modals.download-models.no-internet")}</span> }
+        return <span className="text-lg">{t("models.modals.download-models.error-occured")}</span>
+    }
+
+    return (
+        <form className="text-gray-800 dark:text-gray-200 flex flex-col max-w-[95vw] w-[970px] h-[85vh] gap-3" onSubmit={e => {e.preventDefault(); search()}}>
+            <div className="flex h-9 gap-2 shrink-0">
+                <BsmSelect className="bg-light-main-color-1 dark:bg-main-color-1 rounded-full px-1 pb-0.5 text-center capitalize" options={modelTypesOptions} selected={currentType} onChange={(value) => currentType$.next(value)}/>
+                <div className="h-ful grow relative flex justify-center items-center">
+                    <input className="h-full w-full bg-light-main-color-1 dark:bg-main-color-1 rounded-full px-2 pb-0.5" type="text" name="" id="" placeholder={t("models.modals.download-models.search-placeholder")} value={searhInput} onChange={e => searhInput$.next(e.target.value)}/>
+                    <Tippy placement="bottom" content={renderFilterTips} allowHTML={true} maxWidth={Infinity}>
+                        <div className="absolute right-0 h-full w-fit p-1 cursor-pointer">
+                            <BsmButton className="h-full rounded-full p-1 aspect-square" typeColor="primary" icon="info" withBar={false}/>
+                        </div>
+                    </Tippy>
+                    
+                </div>
+                <BsmButton className="shrink-0 rounded-full py-1 px-3 !bg-light-main-color-1 dark:!bg-main-color-1 flex justify-center items-center capitalize" icon="search" type="submit" text="models.modals.download-models.search-btn" withBar={false} onClick={e => {e.preventDefault(); search()}}/>
+                <BsmSelect className="bg-light-main-color-1 dark:bg-main-color-1 rounded-full px-1 pb-0.5 text-center capitalize" options={querySortsOptions} onChange={(value) => currentSort$.next(value)}/>
+            </div>
+            <ul className="w-full grow flex content-start flex-wrap gap-4 pt-1.5 px-2 overflow-y-scroll overflow-x-hidden scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900 z-0" >
+                {msModels.length === 0 ? (
+                    <div className="w-full h-full flex flex-col items-center justify-center">
+                        <img className={`w-32 h-32 ${isLoading && "spin-loading"}`} src={(isLoading && !error) ? BeatWaitingImg : BeatConflictImg} alt=" "/>
+                        {renderLoadingStatus()}
+                    </div>
+                ) : (
+                    <>
+                        {msModels.map(model => (
+                            <ModelItem 
+                                key={model.id} 
+                                {...model}
+                                callbackValue={model}
+                                isDownloading={equal(currentDownload, {model, version} as ModelDownload)}
+                                onDownload={!isModelOwned(model) ? handleDownloadModel: undefined}
+                                onDoubleClick={(!isModelOwned(model)) ? handleDownloadModel: undefined}
+                                onCancelDownload={modelPendingDownload(model) ? handleCancelDownload : undefined}
+                            />
+                        ))}
+                        <motion.span onViewportEnter={loadMore} className="block w-full h-8"/>
+                    </>
+                )}
+            </ul>
+        </form>
+    )
+}

src/renderer/components/modal/modal-types/models/link-models-modal.component.tsx

@@ -0,0 +1,32 @@
+import { useState } from "react"
+import { BsmButton } from "renderer/components/shared/bsm-button.component"
+import { BsmCheckbox } from "renderer/components/shared/bsm-checkbox.component"
+import { BsmImage } from "renderer/components/shared/bsm-image.component"
+import { useTranslation } from "renderer/hooks/use-translation.hook"
+import { ModalComponent, ModalExitCode } from "renderer/services/modale.service"
+import { MSModelType } from "shared/models/models/model-saber.model"
+import BeatRunning from '../../../../../../assets/images/apngs/beat-running.png'
+
+export const LinkModelsModal: ModalComponent<boolean, MSModelType> = ({resolver, data}) => {
+
+    const t = useTranslation();
+
+    const [keepMaps, setKeepMaps] = useState(true)
+
+    return (
+        <form className="text-gray-800 dark:text-gray-200">
+            <h1 className="text-3xl uppercase tracking-wide w-full text-center">{t(`models.modals.link-models.${data}.title`)}</h1>
+            <BsmImage className="mx-auto h-24" image={BeatRunning} />
+            <p className="max-w-sm w-full">{t(`models.modals.link-models.${data}.desc`)}</p>
+            <p className="max-w-sm w-full text-sm italic mt-2">{t(`models.modals.link-models.${data}.info`)}</p>
+            <div className="relative h-5 flex my-3 items-center">
+                <BsmCheckbox className="h-full aspect-square relative bg-inherit mr-1.5 z-[1]" checked={keepMaps} onChange={setKeepMaps}/>
+                <span className="text-sm mb-0.5 cursor-help" title={t(`models.modals.link-models.${data}.keep-models.title`)}>{t(`models.modals.link-models.${data}.keep-models.label`)}</span>
+            </div>
+            <div className="grid grid-flow-col grid-cols-2 gap-4 mt-4">
+                <BsmButton typeColor="cancel" className="rounded-md text-center transition-all" onClick={() => resolver({exitCode: ModalExitCode.CANCELED})} withBar={false} text="misc.cancel"/>
+                <BsmButton typeColor="primary" className="rounded-md text-center transition-all" onClick={() => resolver({exitCode: ModalExitCode.COMPLETED, data: keepMaps})} withBar={false} text={`models.modals.link-models.${data}.valid-btn`}/>
+            </div>
+        </form>
+    )
+}

src/renderer/components/modal/modal-types/models/unlink-models-modal.component.tsx

@@ -0,0 +1,30 @@
+import { useState } from "react";
+import { BsmButton } from "renderer/components/shared/bsm-button.component";
+import { BsmCheckbox } from "renderer/components/shared/bsm-checkbox.component";
+import { BsmImage } from "renderer/components/shared/bsm-image.component";
+import { useTranslation } from "renderer/hooks/use-translation.hook";
+import { ModalComponent, ModalExitCode } from "renderer/services/modale.service";
+import BeatConflict from '../../../../../../assets/images/apngs/beat-conflict.png'
+import { MSModelType } from "shared/models/models/model-saber.model";
+
+export const UnlinkModelsModal: ModalComponent<boolean, MSModelType> = ({resolver, data}) => {
+
+    const t = useTranslation();
+    const [keepMaps, setKeepMaps] = useState(true);
+
+    return (
+        <form className="text-gray-800 dark:text-gray-200">
+            <h1 className="text-3xl uppercase tracking-wide w-full text-center">{t(`models.modals.unlink-models.${data}.title`)}</h1>
+            <BsmImage className="mx-auto h-24" image={BeatConflict} />
+            <p className="max-w-sm w-full">{t(`models.modals.unlink-models.${data}.desc`)}</p>
+            <div className="relative h-5 flex my-3 items-center">
+                <BsmCheckbox className="h-full aspect-square relative bg-inherit mr-1.5 z-[1]" checked={keepMaps} onChange={setKeepMaps}/>
+                <span className="text-sm mb-0.5 cursor-help" title={t(`models.modals.unlink-models.${data}.keep-models.title`)}>{t(`models.modals.unlink-models.${data}.keep-models.label`)}</span>
+            </div>
+            <div className="grid grid-flow-col grid-cols-2 gap-4 mt-4">
+                <BsmButton typeColor="cancel" className="rounded-md text-center transition-all" onClick={() => resolver({exitCode: ModalExitCode.CANCELED})} withBar={false} text="misc.cancel"/>
+                <BsmButton typeColor="error" className="rounded-md text-center transition-all" onClick={() => resolver({exitCode: ModalExitCode.COMPLETED, data: keepMaps})} withBar={false} text={`models.modals.unlink-models.${data}.valid-btn`}/>
+            </div>
+        </form>
+    )
+}

src/renderer/components/modal/modal-types/share-folders-modal.component.tsx

@@ -1,11 +1,9 @@
 import Tippy from "@tippyjs/react";
 import { Variants } from "framer-motion";
-import { version } from "os";
 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";
 import { BsmButton } from "renderer/components/shared/bsm-button.component";
-import { BsmIcon } from "renderer/components/svgs/bsm-icon.component";
 import { useObservable } from "renderer/hooks/use-observable.hook";
 import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
 import { useTranslation } from "renderer/hooks/use-translation.hook";

src/renderer/components/models-management/model-item.component.tsx

@@ -0,0 +1,150 @@
+import equal from "fast-deep-equal";
+import { memo, useRef, useState } from "react";
+import { MSModel, MSModelType } from "shared/models/models/model-saber.model";
+import { BsmImage } from "../shared/bsm-image.component";
+import { motion } from "framer-motion";
+import { GlowEffect } from "../shared/glow-effect.component";
+import { MODELS_TYPE_MS_PAGE_ROOT, MODEL_SABER_URL } from "shared/models/models/constants";
+import { BsmLink } from "../shared/bsm-link.component";
+import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
+import Tippy from "@tippyjs/react";
+import { followCursor } from "tippy.js"
+import defaultImage from '../../../../assets/images/default-version-img.jpg'
+import { BsmLocalModel } from "shared/models/models/bsm-local-model.interface";
+import { BsmIcon, BsmIconType } from "../svgs/bsm-icon.component";
+import { BsmButton } from "../shared/bsm-button.component";
+import { BsmBasicSpinner } from "../shared/bsm-basic-spinner/bsm-basic-spinner.component";
+import { isValidUrl } from "shared/helpers/url.helpers";
+import { useTranslation } from "renderer/hooks/use-translation.hook";
+import useDoubleClick from "use-double-click";
+
+type Props<T> = {
+    selected?: boolean,
+    hash: string,
+    id?: number,
+    isDownloading?: boolean,
+    callbackValue?: T
+    onDelete?: (value: T) => void,
+    onDownload?: (value: T) => void,
+    onCancelDownload?: (value: T) => void
+    onDoubleClick?: (value: T) => void
+} & Partial<MSModel> & Partial<BsmLocalModel> & Omit<React.ComponentProps<"li">, "id" | "onDoubleClick">
+
+function modelItem<T = unknown>(props: Props<T>) {
+
+    const t = useTranslation();
+    const color = useThemeColor("first-color");
+    const [hovered, setHovered] = useState(false);
+    const [idContentCopied, setIdContentCopied] = useState<string>(null);
+    const ref = useRef();
+
+    useDoubleClick({
+        ref,
+        latency: props.onDoubleClick ? 200 : 0,
+        onSingleClick: (e) => props?.onClick?.(e as unknown as React.MouseEvent<HTMLLIElement>),
+        onDoubleClick: () => props?.onDoubleClick?.(props.callbackValue)
+    });
+
+    const modelPageUrl = (() => {
+        if(!props.id){ return null; }
+        const url = new URL(MODELS_TYPE_MS_PAGE_ROOT[props.type], MODEL_SABER_URL);
+        url.searchParams.set("id", props.id.toString());
+        return url.toString();
+    })();
+
+    const authorPageUrl = (() => {
+        if(!props.discord){ return null; }
+        const url = new URL("Profile", MODEL_SABER_URL);
+        url.searchParams.set("user", props.discord.toString());
+        return url.toString();
+    })();
+
+    const thumbnailUrl = (() => {
+        if(!props.thumbnail){ return null; }
+        if(isValidUrl(props.thumbnail)){ return props.thumbnail; }
+        const [file, ext] = props.thumbnail.split(".");
+        return props.download.split("/").slice(0, -1).join("/") + `/${file}.${ext.toLowerCase()}`;
+    })();
+
+    const modelTags = (() => {
+        if(!props.tags){ return null; }
+        return [...new Set(props.tags)];
+    })();
+
+    const actionButtons = (): {icon: BsmIconType, action: () => void, iconColor?: string}[] => {
+        const buttons: {icon: BsmIconType, action: () => void, iconColor?: string}[]  = [];
+        
+        if(props.onDownload && !props.onCancelDownload){
+            buttons.push({ icon: "download", action: () => props.onDownload(props.callbackValue) });
+        }
+
+        if(props.onDelete){
+            buttons.push({ icon: "trash", action: () => props.onDelete(props.callbackValue) });
+        }
+
+        if(props.onCancelDownload){
+            buttons.push({ icon: "cross", action: () => props.onCancelDownload(props.callbackValue), iconColor: "red" });
+        }
+
+        return buttons;
+    }
+
+    const copyContent = (value: string, id?: string) => {
+        navigator.clipboard.writeText(value);
+        setIdContentCopied(() => id);
+        setTimeout(() => {
+            setIdContentCopied(() => null);
+        }, 700);
+    }
+
+    return (
+        <motion.li className={`relative flex-grow min-w-[16rem] h-64 cursor-pointer ${props.className ?? ""}`} onHoverStart={() => setHovered(() => true)} onHoverEnd={() => setHovered(() => false)}>
+            <GlowEffect visible={props.selected || hovered}/>
+            <div className="absolute top-0 left-0 w-full h-full rounded-lg overflow-hidden blur-none bg-black shadow-sm shadow-black">
+                <div ref={ref} className="contents">
+                    <BsmImage className={`absolute top-0 left-0 w-full h-full object-cover ${props.type === MSModelType.Avatar ? "object-top" : ""}`} image={thumbnailUrl} placeholder={defaultImage} loading="lazy"/>
+                    <div className="absolute top-0 right-0 h-full w-0 flex flex-col items-end gap-1 pt-1.5 pr-1.5">
+                        {!props.isDownloading ? (
+                            actionButtons().map((button, index) => (
+                                <BsmButton key={index} className="w-8 h-8 p-1 rounded-md transition-transform duration-150 shadow-black shadow-sm" style={{transitionDelay: `${index * 50}ms`, transform: hovered ? "translate(0%)" : "translate(150%)"}} icon={button.icon} iconColor={button.iconColor} onClick={e => {e.stopPropagation(); e.preventDefault(); button.action();}} withBar={false}/>
+                            ))
+                        ): (
+                            <BsmBasicSpinner className="w-7 h-7 p-1 rounded-md bg-main-color-2 flex items-center justify-center shadow-black shadow-sm" spinnerClassName="brightness-200" thikness="3.5px" style={{color}}/>
+                        )}
+                    </div>
+                </div>
+                <motion.div className="absolute top-[83%] left-0 w-full h-full px-2 flex flex-col gap-1.5 bg-main-color-3 bg-opacity-60 backdrop-blur-md transition-all delay-150 hover:top-0 group" onClick={e =>{e.stopPropagation(); e.preventDefault()}}>
+                    <div className="w-full flex justify-center items-center mt-1.5">
+                        <BsmLink className={`block grow overflow-hidden font-bold whitespace-nowrap text-ellipsis ${props.id ? "cursor-pointer hover:underline" : ""}`} href={modelPageUrl}>{props.name}</BsmLink>
+                        <BsmIcon className="shrink-0 h-8 group-hover:rotate-180 transition-transform w-fit" icon="chevron-top"/>
+                    </div>
+                    <BsmLink className={`block w-fit max-w-full overflow-hidden whitespace-nowrap text-ellipsis brightness-200 ${authorPageUrl ? "cursor-pointer hover:underline" : ""}`} style={{color}} href={authorPageUrl}>{props.author ?? ''}</BsmLink>
+                    <ul className="flex flex-row flex-wrap gap-1">
+                        {modelTags?.map(tag => (
+                            <li key={tag} className="inline-block mr-1 text-xs bg-white text-black px-1 rounded-full p-0.5">{tag}</li>
+                        ))}
+                    </ul>
+                    <Tippy placement="top" content={idContentCopied === "hash" ? t("misc.copied") : t("misc.copy")} followCursor="horizontal" plugins={[followCursor]} hideOnClick={false}>
+                        <span className="mt-0.5 cursor-copy block w-full max-w-fit overflow-hidden whitespace-nowrap text-ellipsis bg-main-color-1 rounded-md p-1 uppercase text-xs" onClick={() => copyContent(`${props.hash}`, 'hash')}>{props.hash}</span>
+                    </Tippy>
+                        <div className="flex gap-1">
+                            {props.id && (
+                                <Tippy placement="top" content={idContentCopied === "id" ? t("misc.copied") : t("misc.copy")} followCursor="horizontal" plugins={[followCursor]} hideOnClick={false}>
+                                    <span className="cursor-copy w-fit shrink-0 max-w-full overflow-hidden whitespace-nowrap text-ellipsis bg-main-color-1 rounded-md p-1 uppercase text-xs" onClick={() => copyContent(`${props.id}`, 'id')}>{props.id}</span>
+                                </Tippy>
+                            )}
+                            {props.path && (
+                                <Tippy placement="top" content={idContentCopied === "path" ? t("misc.copied") : t("misc.copy")} followCursor="horizontal" plugins={[followCursor]} hideOnClick={false}>
+                                    <span className="cursor-copy w-fit max-w-full overflow-hidden whitespace-nowrap text-ellipsis bg-main-color-1 rounded-md p-1 text-xs" onClick={() => copyContent(`${props.path}`, 'path')}>{props.path}</span>
+                                </Tippy>
+                            )}
+                        </div>
+                </motion.div>
+            </div>
+        </motion.li>
+    )
+};
+
+const typedMemo: <T, P>(c: T, propsAreEqual?: (prevProps: Readonly<P>, nextProps: Readonly<P>) => boolean) => T = memo;
+
+export const ModelItem = typedMemo(modelItem, equal);

src/renderer/components/models-management/models-grid.component.tsx

@@ -0,0 +1,208 @@
+import { useInView } from "framer-motion";
+import { BSVersion } from "shared/bs-version.interface";
+import { useRef, forwardRef, useImperativeHandle, useState } from "react";
+import { MSModelType } from "shared/models/models/model-saber.model";
+import { useOnUpdate } from "renderer/hooks/use-on-update.hook";
+import { useConstant } from "renderer/hooks/use-constant.hook";
+import { ModelsManagerService } from "renderer/services/models-management/models-manager.service";
+import { useSwitchableObservable } from "renderer/hooks/use-switchable-observable.hook";
+import { BsmLocalModel } from "shared/models/models/bsm-local-model.interface";
+import { ModelItem } from "./model-item.component";
+import { useBehaviorSubject } from "renderer/hooks/use-behavior-subject.hook";
+import { BsmImage } from "../shared/bsm-image.component";
+import BeatWaitingImg from "../../../../assets/images/apngs/beat-waiting.png"
+import BeatConflict from "../../../../assets/images/apngs/beat-conflict.png"
+import TextProgressBar from "../progress-bar/text-progress-bar.component";
+import { BehaviorSubject, distinctUntilChanged, map, startWith } from "rxjs";
+import { BsmButton } from "../shared/bsm-button.component";
+import equal from "fast-deep-equal";
+import { VersionLinkerAction } from "renderer/services/version-folder-linker.service";
+import { MODEL_TYPE_FOLDERS } from "shared/models/models/constants";
+import { useService } from "renderer/hooks/use-service.hook";
+import { ModelsDownloaderService } from "renderer/services/models-management/models-downloader.service";
+import { useTranslation } from "renderer/hooks/use-translation.hook";
+
+type Props = {
+    className?: string,
+    version?: BSVersion,
+    type: MSModelType
+    search?: string,
+    active: boolean,
+    downloadModels?: () => void
+}
+
+export const ModelsGrid = forwardRef(({className, version, type, search, active, downloadModels}: Props, forwardRef) => {
+
+    const modelsManager = useService(ModelsManagerService);
+    const modelsDownloader = useService(ModelsDownloaderService);
+
+    const t = useTranslation();
+
+    const ref = useRef();
+
+    const [models, setModelsLoadObservable,, setModels] = useSwitchableObservable<BsmLocalModel[]>();
+    const progress$ = useConstant(() => new BehaviorSubject(0));
+    const [modelsSelected, modelsSelected$] = useBehaviorSubject<BsmLocalModel[]>([]);
+
+    const isLoading = !models;
+    const hasModels = !!models?.length;
+
+    useImperativeHandle(forwardRef, () => ({
+        getModels: () => {
+            return models ?? [];
+        },
+        getSelectedModels: () => {
+            return modelsSelected;
+        },
+        reloadModels: () => {
+            loadModels();
+        },
+        deleteSelectedModels: () => {
+            modelsManager.deleteModels(!modelsSelected?.length ? models : modelsSelected, version).then(deletedModels => {
+                if(!deletedModels?.length){ return; }
+                const newModels = models.filter(m => !deletedModels.some(d => d.hash === m.hash));
+                setModels(() => newModels);
+                modelsSelected$.next([]);
+            });
+        }
+    }), [modelsSelected, models]);
+
+    useOnUpdate(() => {
+        if(!active){ return; }
+        if(models && models.length){ return; }
+        loadModels();
+    }, [active]);
+
+    useOnUpdate(() => {
+        if(!active){ 
+            setModels(() => null); 
+        }
+        else { 
+            loadModels(); 
+        }
+    }, [version, type]);
+
+    useOnUpdate(() => {
+
+        if(!active && !models){ return; }
+
+        const onLinkStateChangeCb = (action: VersionLinkerAction) => {
+            if(!equal(version, action.version) || !action.relativeFolder.includes(MODEL_TYPE_FOLDERS[type])){ return; }
+            loadModels();
+        }
+
+        const sub = modelsDownloader.onModelsDownloaded(localModel => {
+            if(localModel.type !== type || !equal(localModel.version, version)){ return; }
+            setModels(models => [localModel, ...models ?? []]);
+        });
+
+        modelsManager.onModelsFolderLinked(onLinkStateChangeCb);
+        modelsManager.onModelsFolderUnlinked(onLinkStateChangeCb);
+
+        return () => {
+            modelsManager.removeModelsFolderLinkedListener(onLinkStateChangeCb);
+            modelsManager.removeModelsFolderUnlinkedListener(onLinkStateChangeCb);
+            sub.unsubscribe();
+        }
+
+    }, [version, type, active]);
+
+    const loadModels = () => {
+        const modelsObs$ = modelsManager.$getModels(type, version);
+        setModels(() => null);
+        setModelsLoadObservable(() => modelsObs$.pipe(map(models => models?.data), distinctUntilChanged()));
+        modelsObs$.pipe(map(models => Math.floor((models.current / models.total) * 100)), startWith(0), distinctUntilChanged()).subscribe({next: v => progress$.next(v)});
+    }
+
+    const handleModelClick = (model: BsmLocalModel) => {
+        const prunedArray = Array.from(new Set(modelsSelected));
+        if(prunedArray.some(m => m.hash === model.hash)){
+            prunedArray.splice(prunedArray.findIndex(m => m.hash === model.hash), 1);
+        } 
+        else {
+            prunedArray.push(model);
+        }
+        modelsSelected$.next(prunedArray);
+    }
+
+    const filtredModels = () => {
+        if(!active){ return models; }
+        
+        const lowerSearch = search?.toLowerCase();
+
+        return models?.filter(model => {
+            const findedInRawValues = Object.values(model).some(value => {
+                if(typeof value !== "string" && typeof value !== "number"){ return false; }
+                return value.toString().toLowerCase().includes(lowerSearch);
+            });
+
+            if(findedInRawValues) { return true; }
+
+            if(!model.model){ return false; }
+
+            return Object.values(model.model).some(value => {
+                if(typeof value !== "string" && typeof value !== "number" && !Array.isArray(value)){ return false; }
+
+                if(Array.isArray(value)){
+                    return value.some(v => v.toString().toLowerCase().includes(lowerSearch));
+                }
+
+                return value.toString().toLowerCase().includes(lowerSearch);
+            });
+        })
+    }
+
+    const handleDelete = (model: BsmLocalModel) => {
+        modelsManager.deleteModels([model], version).then(deleted => {
+            if(!deleted?.length){ return; }
+            setModels(prev => prev.filter(m => m.hash !== model.hash));
+            modelsSelected$.next(modelsSelected.filter(m => m.hash !== model.hash));
+        });
+    }
+ 
+    const renderContent = () => {
+        if(isLoading){
+            return (
+                <div className="h-full flex flex-col items-center justify-center flex-wrap gap-1 text-gray-800 dark:text-gray-200">
+                    <BsmImage className="w-32 h-32 spin-loading" image={BeatWaitingImg}/>
+                    <span className="font-bold">{t("models.panel.grid.loading")}</span>
+                    <TextProgressBar value$={progress$}/>
+                </div>
+            )
+        }
+
+        if(!hasModels){
+            return (
+                <div className="h-full flex flex-col items-center justify-center flex-wrap gap-1 text-gray-800 dark:text-gray-200">
+                    <BsmImage className="h-32" image={BeatConflict}/>
+                    <span className="font-bold">{t("models.panel.grid.no-models")}</span>
+                    <BsmButton className="font-bold rounded-md p-2" text="models.panel.grid.download-models" typeColor="primary" withBar={false} onClick={e => {e.preventDefault(); downloadModels?.()}}/>
+                </div>
+            )
+        }
+
+        return (
+            <ul className="flex flex-wrap shrink-0 justify-start content-start w-full h-full overflow-y-scroll overflow-x-hidden p-4 gap-4 scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900">
+                    {filtredModels().map(localModel => (
+                        <ModelItem 
+                            {...localModel?.model}
+                            key={localModel.path}
+                            hash={localModel.model?.hash ?? localModel.hash}
+                            path={localModel.path}
+                            type={localModel.type}
+                            name={localModel.model?.name ?? localModel.fileName}
+                            selected={modelsSelected.some(m => m.hash === localModel.hash)}
+                            onClick={() => handleModelClick(localModel)}
+                            onDelete={() => handleDelete(localModel)}
+                        />
+                    ))}
+                </ul>
+        )
+    }
+
+    return (
+        <div ref={ref} className={`w-full h-full flex-shrink-0 ${className ?? ""}`}>
+            {renderContent()}
+        </div>
+    )
+});

src/renderer/components/models-management/models-panel.component.tsx

@@ -0,0 +1,99 @@
+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";
+import { ModelsManagerService } from "renderer/services/models-management/models-manager.service";
+import { BsmLocalModel } from "shared/models/models/bsm-local-model.interface";
+import { BsmButton } from "../shared/bsm-button.component";
+import { useService } from "renderer/hooks/use-service.hook";
+import { ModelsDownloaderService } from "renderer/services/models-management/models-downloader.service";
+import { useOnUpdate } from "renderer/hooks/use-on-update.hook";
+import { NotificationService } from "renderer/services/notification.service";
+import { ConfigurationService } from "renderer/services/configuration.service";
+import { useTranslation } from "renderer/hooks/use-translation.hook";
+import { gte, lt } from "semver";
+
+export function ModelsPanel({version, isActive, goToMods}: {version?: BSVersion, isActive: boolean, goToMods?: () => void}) {
+    
+    const modelsManager = useService(ModelsManagerService);
+    const modelDownloader = useService(ModelsDownloaderService);
+    const notification = useService(NotificationService);
+    const config = useService(ConfigurationService);
+
+    const t = useTranslation();
+
+    const ref = useRef();
+
+    const modelsGridRefs = [useRef(null), useRef(null), useRef(null), useRef(null)];
+
+    const [modelTypeTab, setModelTypeTab] = useState<MSModelType>(MSModelType.Avatar);
+    const [currentTabIndex, setCurrentTabIndex] = useState<number>(0);
+
+    const [search, setSearch] = useState<string>("");
+
+    useOnUpdate(() => {
+        if(!isActive || !goToMods){ return; }
+        if(config.get("not-remind-mods-models")){ return; }
+        notification.notifyWarning({ title: "models.notifications.prevent-for-mods.title", desc: "models.notifications.prevent-for-mods.desc", actions: [
+            {id: "0", title: "models.notifications.prevent-for-mods.go-to-mods"},
+            {id: "1", title: "models.notifications.prevent-for-mods.not-remind", cancel: true}
+        ], duration: 12_000 }).then(res => {
+            if(res === "0"){ return goToMods(); }
+            if(res === "1"){ config.set("not-remind-mods-models", true); }
+        });
+    }, [isActive]);
+
+    useOnUpdate(() => {
+        if(!isActive || !version || lt(version.BSVersion, "1.29.4")){ return; }
+        if(config.get("not-remind-models-breaks")){ return; }
+        notification.notifyWarning({ title: "models.notifications.prevent-for-models-breaks.title", desc: "models.notifications.prevent-for-models-breaks.desc", actions: [
+            {id: "0", title: "models.notifications.prevent-for-mods.not-remind", cancel: true}
+        ], duration: 12_000 }).then(res => {
+            if(res === "0"){ config.set("not-remind-models-breaks", true); }
+        });
+    }, [isActive, version])
+
+    const exportModels = () => {
+        const selectedModels = modelsGridRefs.map(ref =>(ref.current?.getSelectedModels() as BsmLocalModel[])).flat()
+        modelsManager.exportModels(selectedModels, version);
+    }
+
+    const deleteModels = () => {
+        const activeTab = modelsGridRefs[currentTabIndex];
+        activeTab.current?.deleteSelectedModels();
+    }
+
+    const openDownloadModal = () => {
+        const allLoadedModels = modelsGridRefs.map(ref =>(ref.current?.getModels() as BsmLocalModel[])).flat();
+        modelDownloader.openDownloadModelsModal(version, modelTypeTab, allLoadedModels);
+    }
+
+    const threeDotsItems: DropDownItem[] = [
+        {text: "models.panel.actions.drop-down.export", onClick: exportModels, icon: "export"},
+        {text: "models.panel.actions.drop-down.delete", onClick: deleteModels, icon: "trash"},
+    ];
+
+    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">
+                <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} onClick={e => {e.preventDefault(); openDownloadModal()}}/>
+                <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("models.panel.actions.search")} onChange={e => setSearch(e.target.value)}  tabIndex={-1}/>
+                </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}%`}}>
+                    <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>
+        </div>
+    )
+}

src/renderer/components/models-management/models-tabs-navbar.component.tsx

@@ -0,0 +1,100 @@
+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 { DetailedHTMLProps, 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>
+    )
+
+}

src/renderer/components/nav-bar/nav-bar-items/bs-version-item.component.tsx

@@ -98,7 +98,7 @@ export function BsVersionItem(props: {version: BSVersion}) {
     return (
         <NavBarItem onCancel={cancel} progress={downloading ? downloadPercent : 0} isActive={isActive() && !downloading} isDownloading={downloading}>
             {props.version.name ? (
-                <Tippy content={props.version.BSVersion} placement="right-end" arrow={false} className="font-bold !bg-main-color-3" duration={[100, 0]} animation="shift-away-subtle">
+                <Tippy content={props.version.BSVersion} placement="right-end" arrow={false} className="font-bold !bg-neutral-900" duration={[100, 0]} animation="shift-away-subtle">
                     <Link onDoubleClick={handleDoubleClick} to={`/bs-version/${props.version.BSVersion}`} state={props.version} className="w-full flex items-center justify-start content-center max-w-full">
                         {renderIcon()}
                         {renderVersionText()}

src/renderer/components/nav-bar/nav-bar-items/maps-nav-bar-item.component.tsx

@@ -1,24 +0,0 @@
-import { Link } from "react-router-dom";
-import { BsmIcon } from "renderer/components/svgs/bsm-icon.component";
-import { useObservable } from "renderer/hooks/use-observable.hook";
-import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
-import { PageStateService } from "renderer/services/page-state.service";
-import { NavBarItem } from "./nav-bar-item.component";
-
-export function MapsNavBarItem() {
-
-    const pageState = PageStateService.getInstance();
-
-    const route = useObservable(pageState.route$);
-
-    const color = useThemeColor("first-color");
-
-    return (
-        <NavBarItem isActive={route === "/maps"}>
-            <Link to="maps" 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="bsMapDifficulty" style={{color}}/>
-                <span className="dark:text-gray-200 text-gray-800 font-bold tracking-wide">Maps</span>
-            </Link>
-        </NavBarItem>
-    )
-}

src/renderer/components/nav-bar/nav-bar-items/shared-nav-bar-item.component.tsx

@@ -0,0 +1,29 @@
+import { Link } from "react-router-dom";
+import { BsmIcon } from "renderer/components/svgs/bsm-icon.component";
+import { useObservable } from "renderer/hooks/use-observable.hook";
+import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
+import { PageStateService } from "renderer/services/page-state.service";
+import { NavBarItem } from "./nav-bar-item.component";
+import { useService } from "renderer/hooks/use-service.hook";
+import Tippy from "@tippyjs/react";
+import { useTranslation } from "renderer/hooks/use-translation.hook";
+
+export function SharedNavBarItem() {
+
+    const pageState = useService(PageStateService);
+
+    const t = useTranslation();
+    const route = useObservable(pageState.route$);
+    const color = useThemeColor("first-color");
+
+    return (
+        <NavBarItem 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}}/>
+                    <span className="dark:text-gray-200 text-gray-800 font-bold tracking-wide">{t("nav-bar.shared.text")}</span>
+                </Link>
+            </Tippy>
+        </NavBarItem>
+    )
+}

src/renderer/components/nav-bar/nav-bar.component.tsx

@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 import { BsmIcon } from '../svgs/bsm-icon.component';
 import { useObservable } from 'renderer/hooks/use-observable.hook';
 import { BsManagerIcon } from './bsmanager-icon.component';
-import { MapsNavBarItem } from './nav-bar-items/maps-nav-bar-item.component';
+import { SharedNavBarItem } from './nav-bar-items/shared-nav-bar-item.component';
 import { NavBarSpliter } from './nav-bar-spliter.component';
 import { useThemeColor } from 'renderer/hooks/use-theme-color.hook';
 import Tippy from '@tippyjs/react';
@@ -23,21 +23,21 @@ export function NavBar() {
     useObservable(I18nService.getInstance().currentLanguage$)
 
   return (
-    <nav id='nav-bar' className='z-10 flex flex-col h-full max-h-full items-center p-1 bg-light-main-color-1 dark:bg-main-color-1'>
+    <nav id='nav-bar' className='z-10 flex flex-col h-full max-h-full items-center p-1'>
       <BsManagerIcon className='relative aspect-square w-16 h-16 mb-3'/>
       <ol id='versions' className='w-fit max-w-[120px] relative left-[2px] grow overflow-y-hidden scrollbar-track-transparent scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-neutral-900 hover:overflow-y-scroll'>
-        <MapsNavBarItem/>
+        <SharedNavBarItem/>
         <NavBarSpliter/>
          {installedVersions && installedVersions.map((version) => <BsVersionItem key={JSON.stringify(version)} version={version}/>)}
       </ol>
       <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")}>
+        <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">
                 <BsmIcon icon='add' className='text-blue-500 h-[34px]' style={{color}}/>
             </Link>
         </Tippy>
-        <Tippy placement="right" content={t("nav-bar.settings")}>
+        <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">
                 <BsmIcon icon='settings' className='text-blue-500 h-7' style={{color}}/>
             </Link>

src/renderer/components/shared/bs-content-nav-bar.component.tsx

@@ -0,0 +1,33 @@
+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={i}>
+                    { renderTab({onClick: () => handleTabClick(i)}, tab, tabs[tabIndex]) }
+                </Fragment>
+            ))}
+        </nav>
+    )
+}

src/renderer/components/shared/bsm-checkbox.component.tsx

@@ -11,7 +11,7 @@ export function BsmCheckbox({className, checked, onChange, disabled} : Props) {
 
     const [hovered, setHovered] = useState(false);
     const checkedColor = useThemeColor("first-color");
-    const iconColor = getCorrectTextColor(checkedColor);
+    const iconColor = checkedColor && getCorrectTextColor(checkedColor);
 
     const handleClick = () => {
         if(disabled){ return; }

src/renderer/components/shared/bsm-range.component.tsx

@@ -17,7 +17,7 @@ type Props = {
 export function BsmRange({colorType = "first-color", values, onChange, onFinalChange, min, max, renderLabel, step = 1, colors} : Props) {
 
     const color = useThemeColor(colorType);
-    const labelTextColor = getCorrectTextColor(color);
+    const labelTextColor = color && getCorrectTextColor(color);
 
     return (
         <Range 

src/renderer/components/shared/bsm-select.component.tsx

@@ -1,31 +1,32 @@
-import { ChangeEvent, CSSProperties } from "react"
+import equal from "fast-deep-equal";
+import { ComponentProps } from "react"
 import { useTranslation } from "renderer/hooks/use-translation.hook"
 
-type Props = {
-    className?: string,
-    style?: CSSProperties,
-    options?: BsmSelectOption[],
-    onChange?: (value: string) => void
+type Props<T> = Omit<ComponentProps<"select">, "onChange"> & {
+    options?: BsmSelectOption<T>[],
+    selected?: T,
+    onChange?: (value: T) => void,
 }
 
-export function BsmSelect({className, style, options, onChange}: Props) {
+export function BsmSelect<T = unknown>(props: Props<T>) {
 
     const t = useTranslation();
 
-    const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
-        onChange?.(event.target.value);
+    const handleChange: ComponentProps<"select">["onChange"] = (e) => {
+        e.preventDefault();
+        props.onChange?.(props.options?.[parseInt(e.target.value)]?.value);
     }
 
     return (
-        <select className={className} style={style} onChange={handleChange}>
-            {options && options.map(option => (
-                <option key={option.value} value={option.value}>{t(option.text)}</option>
+        <select {...props} onChange={handleChange} defaultValue={props.options?.findIndex(opt => equal(opt.value, props.selected))}>
+            {props.options && props.options.map((option, index) => (
+                <option key={index} value={index}>{t(option.text)}</option>
             ))}
         </select>
   )
 }
 
-export interface BsmSelectOption{
+export interface BsmSelectOption<T>{
     text: string,
-    value: string
+    value: T
 }

src/renderer/components/svgs/bsm-icon.component.tsx

@@ -52,16 +52,24 @@ import { VolumeUpIcon } from "./icons/volume-up-icon.component";
 import { VolumeOffIcon } from "./icons/volume-off-icon.component";
 import { VolumeDownIcon } from "./icons/volume-down-icon.component";
 import { GermanIcon } from "./flags/german-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";
 
-export type BsmIconType = BsvMapCharacteristic | (
+export type BsmIconType = BsvMapCharacteristic | MSModelType | (
    "settings"|"trash"|"favorite"|"folder"|"bsNote"|"check"|"three-dots"|"twitch"|"eye"|"play"|"checkCircleIcon"|"discord"|"info"|
-   "terminal"|"desktop"|"oculus"|"add"|"cross"|"task"|"github"|"close"|"thumbUpFill"|"timerFill"|"pause"|"twitter"|"sync"|
+   "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"|
    "fr-FR-flag"|"es-ES-flag"|"en-US-flag"|"en-EN-flag"|"de-DE-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
+
     const renderIcon = () => {
         if(icon === "settings"){ return <SettingIcon className={className} style={style}/> }
         if(icon === "trash"){ return <TrashIcon className={className} style={style}/> }
@@ -115,6 +123,12 @@ export const BsmIcon = memo(({className, icon, style}: {className?: string, icon
         if(icon === "volume-up"){ return <VolumeUpIcon className={className} style={style}/> }
         if(icon === "volume-down"){ return <VolumeDownIcon className={className} style={style}/> }
         if(icon === "volume-off"){ return <VolumeOffIcon className={className} style={style}/> }
+        if(icon === "chevron-top"){ return <ChevronTopIcon 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}/>
     }
 

src/renderer/components/svgs/flags/german-icon.component.tsx

@@ -4,8 +4,8 @@ export function GermanIcon(props: {className?: string, style?: CSSProperties}) {
     return (
         <svg xmlns="http://www.w3.org/2000/svg"  width="71px" height="48px" viewBox="0 0 71 48" version="1.1" className={props.className} style={props.style}>
             <defs/>
-            <g id="Flags" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-239.000000, -805.000000)">
-                <g transform="translate(70.000000, 70.000000)" fill-rule="nonzero" id="Germany">
+            <g id="Flags" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" transform="translate(-239.000000, -805.000000)">
+                <g transform="translate(70.000000, 70.000000)" fillRule="nonzero" id="Germany">
                     <g transform="translate(169.000000, 735.000000)">
                         <g id="Bolivia-9">
                             <path d="M0.52,7 L0.52,16 L70.52,16 L70.52,7 C70.52,3.33282926 67.5471707,0.36 63.88,0.36 L7.17,0.36 C5.40723053,0.357345224 3.71575038,1.05574249 2.46834517,2.3012719 C1.22093997,3.54680131 0.519998001,5.23722853 0.52,7 Z" id="Shape" fill="#434A54"/>

src/renderer/components/svgs/icons/chevron-top-icon.component.tsx

@@ -0,0 +1,9 @@
+import { CSSProperties } from "react";
+
+export function ChevronTopIcon(props: {className?: string, style?: CSSProperties}) {
+  return (
+    <svg className={props.className} style={props.style} fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+        <path d="M260.811-366.051q-11.021-11.021-11.355-26.521-.333-15.5 10.689-26.522l193.333-193.333q5.892-5.892 12.475-8.457 6.583-2.565 14.047-2.565t14.047 2.565q6.583 2.565 12.475 8.457l193.667 193q11.021 10.514 10.981 26.054-.039 15.54-11.315 26.656-11.021 11.021-26.855 11.021-15.833 0-26.855-11.021L480-532.196 313.521-365.051q-10.355 11.022-25.894 10.649-15.54-.373-26.816-11.649Z"/>
+    </svg>
+  )
+}

src/renderer/components/svgs/icons/model-type-avatar-icon.component.tsx

@@ -0,0 +1,12 @@
+import { CSSProperties } from "react";
+
+export function ModelTypeAvatarIcon(props: {className?: string, style?: CSSProperties}) {
+
+
+
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props} 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>
+    )
+}

src/renderer/components/svgs/icons/model-type-bloq-icon.component.tsx

@@ -0,0 +1,9 @@
+import { CSSProperties } from "react";
+
+export function ModelTypeBloqIcon(props: {className?: string, style?: CSSProperties}) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" id="Bloq" viewBox="0 0 300 300" {...props} 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"></path>
+        </svg>
+    )
+}

src/renderer/components/svgs/icons/model-type-platform-icon.component.tsx

@@ -0,0 +1,9 @@
+import { CSSProperties } from "react";
+
+export function ModelTypePlatformIcon(props: {className?: string, style?: CSSProperties}) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" {...props} 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>
+    )
+}

src/renderer/components/svgs/icons/model-type-saber-icon.component.tsx

@@ -0,0 +1,9 @@
+import { CSSProperties } from "react";
+
+export function ModelTypeSaberIcon(props: {className?: string, style?: CSSProperties}) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" {...props} 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>
+    )
+}

src/renderer/components/title-bar/title-bar.component.tsx

@@ -61,7 +61,7 @@ export default function TitleBar({template = "index.html"} : {template: AppWindo
     if(template === "index.html"){
 
         return (
-            <header id="titlebar" className="min-h-[22px] bg-light-main-color-1 shrink-0 dark:bg-main-color-1 w-screen h-[22px] flex content-center items-center justify-start z-10">
+            <header id="titlebar" className="min-h-[22px] w-screen h-[22px] flex content-center items-center justify-start z-10 shrink-0">
                 <div id="drag-region" className='grow basis-0 h-full'>
                     <div id="window-title" className='pl-1'>
                         <span className='text-gray-800 dark:text-gray-100 font-bold text-xs italic'>BSManager</span>

src/renderer/components/version-viewer/slides/launch/launch-slide.component.tsx

@@ -7,6 +7,8 @@ import { BSLauncherService, LaunchMods } from "renderer/services/bs-launcher.ser
 import { ConfigurationService } from "renderer/services/configuration.service";
 import { BSVersion } from "shared/bs-version.interface"
 import { LaunchModToogle } from "./launch-mod-toogle.component";
+import BSLogo from '../../../../../../assets/images/apngs/bs-logo.png';
+import { BsmImage } from "renderer/components/shared/bsm-image.component";
 
 type Props = {version: BSVersion};
 
@@ -51,6 +53,10 @@ export function LaunchSlide({version}: Props) {
 
     return (
         <div className="w-full shrink-0 items-center relative flex flex-col justify-start">
+            <div className="flex flex-col gap-3 justify-center items-center mb-5">
+                <BsmImage className='relative object-cover h-28' image={BSLogo}/>
+                <h1 className='relative text-4xl font-bold italic -top-3'>{version.name ? `${version.BSVersion} - ${version.name}` : version.BSVersion}</h1>
+            </div>
             <div className='grid grid-flow-col gap-6'>
               {!version.oculus && <LaunchModToogle infoText="pages.version-viewer.launch-mods.oculus-description" icon='oculus' onClick={() => setMode(LaunchMods.OCULUS_MOD, !oculusMode)} active={oculusMode} text="pages.version-viewer.launch-mods.oculus"/>}
               <LaunchModToogle infoText="pages.version-viewer.launch-mods.desktop-description" icon='desktop' onClick={() => setMode(LaunchMods.DESKTOP_MOD, !desktopMode)} active={desktopMode} text="pages.version-viewer.launch-mods.desktop"/>

src/renderer/helpers/correct-text-color.ts

@@ -1,15 +1,12 @@
+import Color from "color";
+
 /**
  * Return text color for best constrast with background color
  * @param {string} bgHex 
  * @returns {string}
  */
 export function getCorrectTextColor(bgHex: string): string{
-    const hex = bgHex.replaceAll("#", "");
-    const uicolors = [parseInt(hex.substring(0, 2), 16) / 255, parseInt(hex.substring(0, 2), 16) / 255, parseInt(hex.substring(0, 2), 16) / 255];
-    const c = uicolors.map(col => {
-        if (col <= 0.03928) { return col / 12.92; }
-        return (col + 0.055) / 1.055 ** 2.4;
-    });
-    const L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2]);
-    return (L > 0.128) ? "#000" : "fff";
+    if(!bgHex){ return "#000"; }
+    const color = Color(bgHex);
+    return color.isLight() ? "#000" : "fff";
 }

src/renderer/hooks/use-behavior-subject.hook.ts

@@ -1,10 +1,10 @@
-import { useState } from "react";
 import { BehaviorSubject } from "rxjs";
 import { useObservable } from "./use-observable.hook";
+import { useConstant } from "./use-constant.hook";
 
 export function useBehaviorSubject<T>(value: T): [T, BehaviorSubject<T>]{
-    const [subject] = useState(new BehaviorSubject(value));
-    const subjectValue = useObservable(subject);
+    const subject$ = useConstant(() => new BehaviorSubject(value));
+    const subjectValue = useObservable(subject$, value);
     
-    return [subjectValue, subject];
+    return [subjectValue, subject$];
 }

src/renderer/hooks/use-constant.hook.ts

@@ -0,0 +1,13 @@
+import { useRef } from "react"
+
+type ResultBox<T> = { v: T }
+
+export function useConstant<T>(fn: () => T): T {
+    const ref = useRef<ResultBox<T>>()
+
+    if (!ref.current) {
+        ref.current = { v: fn() }
+    }
+
+    return ref.current.v
+}

src/renderer/hooks/use-observable.hook.ts

@@ -5,8 +5,8 @@ export function useObservable<T>(observable: Observable<T>, defaultValue?: T): T
     const [obsValue, setObsValue] = useState(defaultValue ?? null as T);
 
     useEffect(() => {
-      const sub = observable.subscribe(val => setObsValue(() => val));
-      return () => sub.unsubscribe();
+        const sub = observable.subscribe(val => setObsValue(() => val));
+        return () => sub.unsubscribe();
     }, [])
     
     return obsValue;

src/renderer/hooks/use-on-update.hook.ts

@@ -0,0 +1,7 @@
+import { useEffect, EffectCallback, DependencyList } from "react";
+
+export function useOnUpdate(func: EffectCallback, deps: DependencyList = []) {
+    useEffect(() => {
+        return func();
+    }, deps);
+}

src/renderer/hooks/use-service.hook.ts

@@ -0,0 +1,7 @@
+import { useConstant } from "./use-constant.hook";
+import { Service } from "shared/models/service.interface";
+
+export function useService<T>(s: Service<T>): T {
+    const service = useConstant(() => s.getInstance());
+    return service;
+}

src/renderer/hooks/use-switchable-observable.hook.ts

@@ -0,0 +1,19 @@
+import { Observable } from "rxjs";
+import { useState, useEffect, Dispatch, SetStateAction } from "react";
+
+export function useSwitchableObservable<T>(observable?: Observable<T>, clearOnSwitch = true): [T, React.Dispatch<React.SetStateAction<Observable<T>>>, Observable<T>, Dispatch<SetStateAction<T>>]{
+    
+    const [currentObs, setCurrentObs] = useState(observable);
+    const [obsValue, setObsValue] = useState<T>();
+
+    useEffect(() => {
+        if(!currentObs){ return };
+        if(clearOnSwitch){ setObsValue(() => null); };
+        const sub = currentObs.subscribe(val => setObsValue(() => val));
+        return () => {
+            sub.unsubscribe()
+        }
+    }, [currentObs])
+    
+    return [obsValue, setCurrentObs, currentObs, setObsValue];
+}

src/renderer/index.css

@@ -52,6 +52,28 @@
     animation: glowing 20s linear infinite;
 }
 
+.dim > * { z-index: 1; }
+.dim::before{
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.25);
+}
+
+.dim-on-hover:hover > * { z-index: 1; }
+.dim-on-hover:hover:before{
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.25);
+}
+
 @keyframes glowing {
     0% { background-position: 0 0; }
     50% { background-position: 400% 0; }

src/renderer/pages/maps-page.component.tsx

@@ -1,18 +0,0 @@
-import { MapsPlaylistsPanel } from "renderer/components/maps-mangement-components/maps-playlists-panel.component";
-import { Slideshow } from "renderer/components/slideshow/slideshow.component";
-import { useTranslation } from "renderer/hooks/use-translation.hook";
-
-export function MapsPage() {
-
-    const t = useTranslation();
-
-    return (
-        <div className="w-full h-full flex items-center flex-col pt-2">
-            <Slideshow className="absolute w-full h-full top-0"/>
-            <h1 className="text-gray-100 text-2xl z-[1]">{t("pages.shared-maps.title")}</h1>
-            <div className="w-full min-h-0 grow p-10 flex flex-col items-center justify-start text-white relative">
-                <MapsPlaylistsPanel/>
-            </div>
-        </div>
-    )
-}

src/renderer/pages/settings-page.component.tsx

@@ -28,7 +28,7 @@ import beatleaderIcon from "../../../assets/images/third-party-icons/beat-leader
 import Tippy from '@tippyjs/react';
 import { MapsManagerService } from "renderer/services/maps-manager.service";
 import { PlaylistsManagerService } from "renderer/services/playlists-manager.service";
-import { ModelsManagerService } from "renderer/services/models-manager.service";
+import { ModelsManagerService } from "renderer/services/models-management/models-manager.service";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
 import { VersionFolderLinkerService } from "renderer/services/version-folder-linker.service";
 

src/renderer/pages/shared-contents-page.component.tsx

@@ -0,0 +1,28 @@
+import { useState } from "react";
+import { MapsPlaylistsPanel } from "renderer/components/maps-mangement-components/maps-playlists-panel.component";
+import { ModelsPanel } from "renderer/components/models-management/models-panel.component";
+import { TabNavBar } from "renderer/components/shared/tab-nav-bar.component";
+import { Slideshow } from "renderer/components/slideshow/slideshow.component";
+import { useTranslation } from "renderer/hooks/use-translation.hook";
+
+export function SharedContentsPage() {
+
+    const t = useTranslation();
+
+    const [tabIndex, setTabIndex] = useState(0);
+
+    return (
+        <div className="relative flex items-center flex-col w-full h-full text-gray-200 backdrop-blur-lg">
+            <Slideshow className="absolute w-full h-full top-0"/>
+            <TabNavBar className='my-4' tabIndex={tabIndex} tabsText={["misc.maps", "misc.models"]} onTabChange={setTabIndex}/>
+            <div className='w-full min-h-0 grow flex transition-transform duration-300' style={{transform: `translate(${-(tabIndex * 100)}%, 0)`}}>
+                <div className="w-full shrink-0 px-3 pb-3 flex flex-col items-center">
+                    <MapsPlaylistsPanel/>
+                </div>
+                <div className="w-full shrink-0 px-3 pb-3 flex flex-col items-center">
+                    <ModelsPanel isActive={tabIndex === 1}/>
+                </div>
+            </div>
+        </div>
+    )
+}

src/renderer/pages/version-viewer.component.tsx

@@ -1,7 +1,6 @@
 import { BSVersion } from 'shared/bs-version.interface';
 import { useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import BSLogo from '../../../assets/images/apngs/bs-logo.png';
 import { TabNavBar } from 'renderer/components/shared/tab-nav-bar.component';
 import { BsmDropdownButton } from 'renderer/components/shared/bsm-dropdown-button.component';
 import { BsmImage } from 'renderer/components/shared/bsm-image.component';
@@ -16,6 +15,7 @@ import { ModsSlide } from 'renderer/components/version-viewer/slides/mods/mods-s
 import { UninstallModal } from 'renderer/components/modal/modal-types/uninstall-modal.component';
 import { MapsPlaylistsPanel } from 'renderer/components/maps-mangement-components/maps-playlists-panel.component';
 import { ShareFoldersModal } from 'renderer/components/modal/modal-types/share-folders-modal.component';
+import { ModelsPanel } from 'renderer/components/models-management/models-panel.component';
 
 export function VersionViewer() {
 
@@ -76,18 +76,19 @@ export function VersionViewer() {
     <>
       <BsmImage className="absolute w-full h-full top-0 left-0 object-cover" image={state.ReleaseImg || DefautVersionImage} errorImage={DefautVersionImage}/>
       <div className="relative flex items-center flex-col w-full h-full text-gray-200 backdrop-blur-lg">
-        <BsmImage className='relative object-cover h-28' image={BSLogo}/>
-        <h1 className='relative text-4xl font-bold italic -top-3'>{state.name ? `${state.BSVersion} - ${state.name}` : state.BSVersion}</h1>
-        <TabNavBar className='my-3' tabIndex={currentTabIndex} tabsText={["misc.launch", "misc.maps", "misc.mods"]} onTabChange={(i : number) => setCurrentTabIndex(i)}/>
-        <div className='mt-2 w-full min-h-0 grow flex transition-transform duration-300' style={{transform: `translate(${-(currentTabIndex * 100)}%, 0)`}}>
+        <TabNavBar className='my-4' tabIndex={currentTabIndex} tabsText={["misc.launch", "misc.maps", "misc.models", "misc.mods"]} onTabChange={(i : number) => setCurrentTabIndex(i)}/>
+        <div className='w-full min-h-0 grow flex transition-transform duration-300' style={{transform: `translate(${-(currentTabIndex * 100)}%, 0)`}}>
           <LaunchSlide version={state}/>
           <div className="w-full shrink-0 px-3 pb-3 flex flex-col items-center">
             <MapsPlaylistsPanel version={state}/>
           </div>
+          <div className="w-full shrink-0 px-3 pb-3 flex flex-col items-center">
+            <ModelsPanel version={state} isActive={currentTabIndex === 2} goToMods={() => setCurrentTabIndex(() => 3)}/>
+          </div>
           <ModsSlide version={state} onDisclamerDecline={handleModsDisclaimerDecline}/>
         </div>
       </div>
-      <BsmDropdownButton className='absolute top-5 right-5 h-9 w-9 bg-light-main-color-2 dark:bg-main-color-2 rounded-md' items={[
+      <BsmDropdownButton className='absolute top-3 right-4 h-9 w-9 bg-light-main-color-2 dark:bg-main-color-2 rounded-md' items={[
           {text: "pages.version-viewer.dropdown.open-folder", icon: "folder", onClick: openFolder},
           ((!state.steam && !state.oculus) && {text: "pages.version-viewer.dropdown.verify-files", icon: "task", onClick: verifyFiles}),
           ((!state.steam && !state.oculus) && {text: "pages.version-viewer.dropdown.edit", icon: "edit", onClick: edit}),

src/renderer/services/configuration.service.ts

@@ -1,4 +1,4 @@
-import { BehaviorSubject } from "rxjs";
+import { BehaviorSubject, Observable, shareReplay } from "rxjs";
 import { DefaultConfigKey, defaultConfiguration } from "renderer/config/default-configuration.config";
 
 export class ConfigurationService {
@@ -40,9 +40,9 @@ export class ConfigurationService {
         this.emitChange(key);
     }
 
-    public watch<T>(key: DefaultConfigKey | string): BehaviorSubject<T>{
+    public watch<T>(key: DefaultConfigKey | string): Observable<T>{
         if(this.observers.has(key)){ return this.observers.get(key); }
         this.observers.set(key, new BehaviorSubject(this.get(key)));
-        return this.observers.get(key);
+        return this.observers.get(key).asObservable();
     }
 }

src/renderer/services/ipc.service.ts

@@ -1,9 +1,9 @@
-import { defaultIfEmpty } from "rxjs/operators";
+import { defaultIfEmpty, share, shareReplay } from "rxjs/operators";
 import { Observable } from "rxjs";
 import { IpcRequest, IpcResponse } from "shared/models/ipc";
 import { identity } from "rxjs";
 
-export class IpcService {
+export class IpcService{
 
     private static instance: IpcService;
 
@@ -62,7 +62,7 @@ export class IpcService {
             window.electron.ipcRenderer.on(request.responceChannel, (res: T) => observer.next(res));
             window.electron.ipcRenderer.on(errorChannel, (err: Error) => observer.error(err));
             window.electron.ipcRenderer.on(completeChannel, () => observer.complete());
-        }).pipe(defaultValue ? defaultIfEmpty(defaultValue) : identity);
+        }).pipe(defaultValue ? defaultIfEmpty(defaultValue) : identity, shareReplay(1));
 
         window.electron.ipcRenderer.once(completeChannel, () => {
             window.electron.ipcRenderer.removeAllListeners(request.responceChannel);

src/renderer/services/maps-downloader.service.ts

@@ -51,7 +51,7 @@ export class MapsDownloaderService {
         while(this.mapsQueue$.value.at(0)){
             const toDownload = this.mapsQueue$.value.at(0);
             this.currentDownload$.next(toDownload);
-            const downloaded = await this.downloadMap(toDownload.map, toDownload.version).toPromise();
+            const downloaded = await this.downloadMap(toDownload.map, toDownload.version)?.toPromise();
 
             if(downloaded){
                 this.downloadedListerners.forEach(func => func(downloaded, toDownload.version));

src/renderer/services/maps-manager.service.ts

@@ -11,10 +11,9 @@ import { OpenSaveDialogOption } from "shared/models/ipc";
 import { NotificationService } from "./notification.service";
 import { ConfigurationService } from "./configuration.service";
 import { ArchiveProgress } from "shared/models/archive.interface";
-import { map, last, catchError, distinctUntilChanged, mergeMap } from "rxjs/operators";
+import { map, last, catchError } from "rxjs/operators";
 import { ProgressionInterface } from "shared/models/progress-bar";
 import { VersionFolderLinkerService, VersionLinkerActionType } from "./version-folder-linker.service";
-import equal from "fast-deep-equal";
 
 export class MapsManagerService {
 
@@ -117,7 +116,7 @@ export class MapsManagerService {
 
         if(!resFile.success){ return; }
 
-        const exportProgress$: Observable<ProgressionInterface> = await this.ipcService.sendV2<ArchiveProgress, {version: BSVersion, maps: BsmLocalMap[], outPath: string}>("export-maps", {args: {version, maps, outPath: resFile.data}}).pipe(
+        const exportProgress$: Observable<ProgressionInterface> = this.ipcService.sendV2<ArchiveProgress, {version: BSVersion, maps: BsmLocalMap[], outPath: string}>("export-maps", {args: {version, maps, outPath: resFile.data}}).pipe(
             map(p => {
                 return { progression: (p.prossesedFiles / p.totalFiles) * 100, label: `${p.prossesedFiles} / ${p.totalFiles}` } as ProgressionInterface
             })
@@ -128,6 +127,7 @@ export class MapsManagerService {
         await exportProgress$.toPromise().catch(e => {
             this.notifications.notifyError({title: "notifications.types.error", desc: e.message});
         }).then(() => {
+            // TODO TRANSLATE
             this.notifications.notifySuccess({title: "Export terminé 🎉", duration: 3000});
             this.progressBar.complete();
             this.progressBar.hide(true);
@@ -159,9 +159,7 @@ export class MapsManagerService {
     }
 
     public $mapsLinkingPending(version: BSVersion): Observable<boolean>{
-        return this.linker.queue$.pipe(mergeMap(async queue => {
-            return queue.some(q => q.relativeFolder.includes(MapsManagerService.RELATIVE_MAPS_FOLDER) && equal(q.version, version));
-        }), distinctUntilChanged());
+        return this.linker.$isVersionFolderPending(version, MapsManagerService.RELATIVE_MAPS_FOLDER);
     }
 
 }

src/renderer/services/model-downloader.service.ts

@@ -1,39 +0,0 @@
-import { timer } from "rxjs";
-import { MSModel } from "shared/models/model-saber/model-saber.model";
-import { IpcService } from "./ipc.service";
-import { ProgressBarService } from "./progress-bar.service";
-
-export class ModelDownloaderService {
-
-    private static instance: ModelDownloaderService;
-
-    public static getInstance(): ModelDownloaderService{
-        if(!ModelDownloaderService.instance){ ModelDownloaderService.instance = new ModelDownloaderService(); }
-        return ModelDownloaderService.instance;
-    }
-
-    private readonly ipc: IpcService;
-    private readonly progress: ProgressBarService;
-
-    private constructor(){
-        this.ipc = IpcService.getInstance();
-        this.progress = ProgressBarService.getInstance();
-    }
-
-
-    public async oneClickInstallModel(model: MSModel): Promise<boolean>{
-
-        this.progress.showFake(0.04);
-
-        const res = await this.ipc.send("one-click-install-model", {args: model});
-
-        this.progress.complete();
-        await timer(500).toPromise();
-        this.progress.hide(true);
-
-        return res.success;
-
-    }
-
-
-}

src/renderer/services/models-management/models-downloader.service.ts

@@ -0,0 +1,126 @@
+import { BehaviorSubject, Observable, Subscription, distinctUntilChanged, filter, lastValueFrom, map, shareReplay, startWith, timer } from "rxjs";
+import { BSVersion } from "shared/bs-version.interface";
+import { BsmLocalModel } from "shared/models/models/bsm-local-model.interface";
+import { MSModel, MSModelType } from "shared/models/models/model-saber.model";
+import { ModalResponse, ModalService } from "../modale.service";
+import { IpcService } from "../ipc.service";
+import { DownloadModelsModal } from "renderer/components/modal/modal-types/models/download-models-modal.component";
+import { ProgressBarService } from "../progress-bar.service";
+import { Progression } from "main/helpers/fs.helpers";
+import { ProgressionInterface } from "shared/models/progress-bar";
+import equal from "fast-deep-equal";
+
+export class ModelsDownloaderService {
+
+    private static instance: ModelsDownloaderService;
+
+    public static getInstance(): ModelsDownloaderService{
+        if(!ModelsDownloaderService.instance){ ModelsDownloaderService.instance = new ModelsDownloaderService(); }
+        return ModelsDownloaderService.instance;
+    }
+
+    private readonly ipc: IpcService;
+    private readonly modal: ModalService;
+    private readonly progress: ProgressBarService;
+
+    private readonly lastDownload$ = new BehaviorSubject<BsmLocalModel>(null);
+    private readonly queue$ = new BehaviorSubject<ModelDownload[]>([]);
+    private readonly _currentDownload$ = this.queue$.pipe(map(queue => queue.at(0)), distinctUntilChanged(), shareReplay(1));
+
+    private constructor(){
+
+        this.ipc = IpcService.getInstance();
+        this.modal = ModalService.getInsance();
+        this.progress = ProgressBarService.getInstance();
+
+        this._currentDownload$.pipe(filter(v => !!v)).subscribe(model => this.downloadModel(model));
+        this._currentDownload$.pipe(filter(v => !v)).subscribe(() => this.lastDownload$.next(null));
+    }
+
+    private async downloadModel(download: ModelDownload){
+
+        const download$ = this.ipc.sendV2<Progression<BsmLocalModel>>("download-model", {args: download});
+
+        if(!this.progress.isVisible){
+            const progress$: Observable<ProgressionInterface> = download$.pipe(map(progress => {
+                return {
+                    progression: progress.total ? (progress.current / progress.total) * 100 : 0,
+                    label: download.model.name
+                }
+            }), startWith({progression: .1, label: download.model.name}));
+            this.progress.show(progress$, true);
+        }
+
+        const downloaded = await lastValueFrom(download$);
+        this.lastDownload$.next(downloaded.data);
+
+        this.progress.hide(true);
+
+        this.queue$.next(this.queue$.value.filter(m => m.model.hash !== download.model.hash));
+
+    }
+
+    public addModelToDownload(model: ModelDownload): void{
+        if(this.queue$.value.some(m => equal(m, model))){ return null; }
+        const queue = this.queue$.value;
+        queue.push(model);
+        this.queue$.next([...queue]);
+    }
+
+    public removeFromDownloadQueue(download: ModelDownload){
+        const queue = this.queue$.value;
+        const index = queue.findIndex(m => m.model.hash === download.model.hash);
+        
+        if(index === -1){ return; }
+        
+        queue.splice(index, 1);
+        this.queue$.next([...queue]);
+    }
+
+    public onModelsDownloaded(cb: (model: BsmLocalModel) => void): Subscription{
+        return this.lastDownload$.pipe(filter(download => !!download)).subscribe(cb);
+    }
+
+    public isDownloading$(download: ModelDownload): Observable<boolean>{
+        return this._currentDownload$.pipe(map(current => {
+            if(!current){ return false; }
+            return current.model.hash === download.model.hash && current.version === download.version
+        }), distinctUntilChanged());
+    }
+
+    public currentDownload$(): Observable<ModelDownload>{
+        return this._currentDownload$;
+    }
+
+    public isPending$(download: ModelDownload): Observable<boolean>{
+        return this.queue$.pipe(map(queue => queue.at(0).model.hash !== download.model.hash && queue.at(0).version !== download.version && queue.some(d => d.model.hash === download.model.hash && d.version === download.version)), distinctUntilChanged());
+    }
+
+    public getQueue$(): Observable<ModelDownload[]>{
+        return this.queue$.asObservable();
+    }
+
+    public openDownloadModelsModal(version: BSVersion, type?: MSModelType, owned?: BsmLocalModel[]): Promise<ModalResponse<void>>{
+        return this.modal.openModal(DownloadModelsModal, {version, type, owned});
+    }
+
+    public async oneClickInstallModel(model: MSModel): Promise<boolean>{
+
+        this.progress.showFake(0.04);
+
+        const res = await this.ipc.send("one-click-install-model", {args: model});
+
+        this.progress.complete();
+        await timer(500).toPromise();
+        this.progress.hide(true);
+
+        return res.success;
+
+    }
+
+}
+
+export type ModelDownload = {
+    model: MSModel,
+    version: BSVersion
+}

src/renderer/services/models-management/models-manager.service.ts

@@ -0,0 +1,188 @@
+import { MSModelType } from "shared/models/models/model-saber.model";
+import { IpcService } from "../ipc.service";
+import { VersionFolderLinkerService, VersionLinkerActionListener, VersionLinkerActionType } from "../version-folder-linker.service";
+import { MODEL_TYPE_FOLDERS } from "shared/models/models/constants";
+import { Observable, distinctUntilChanged, lastValueFrom, map, mergeMap, share } from "rxjs";
+import { BSVersion } from "shared/bs-version.interface";
+import { ModalExitCode, ModalService } from "../modale.service";
+import { LinkModelsModal } from "renderer/components/modal/modal-types/models/link-models-modal.component";
+import { UnlinkModelsModal } from "renderer/components/modal/modal-types/models/unlink-models-modal.component";
+import { Progression } from "main/helpers/fs.helpers";
+import { BsmLocalModel } from "shared/models/models/bsm-local-model.interface";
+import { ProgressBarService } from "../progress-bar.service";
+import { OpenSaveDialogOption } from "shared/models/os/dialog.model";
+import { ProgressionInterface } from "shared/models/progress-bar";
+import { ArchiveProgress } from "shared/models/archive.interface";
+import { NotificationService } from "../notification.service";
+import { ConfigurationService } from "../configuration.service";
+import { DeleteModelsModal } from "renderer/components/modal/modal-types/models/delete-models-modal.component";
+
+export class ModelsManagerService {
+
+    private static instance: ModelsManagerService;
+
+    public static readonly REMEMBER_CHOICE_DELETE_MODEL_KEY = "not-confirm-delete-model"
+
+    public static getInstance(): ModelsManagerService{
+        if(!ModelsManagerService.instance){ ModelsManagerService.instance = new ModelsManagerService(); }
+        return ModelsManagerService.instance;
+    }
+
+    private readonly ipc: IpcService;
+    private readonly versionFolderLinked: VersionFolderLinkerService;
+    private readonly modalService: ModalService;
+    private readonly progressBar: ProgressBarService;
+    private readonly notifications: NotificationService;
+    private readonly config: ConfigurationService;
+
+    private constructor(){
+        this.ipc = IpcService.getInstance();
+        this.versionFolderLinked = VersionFolderLinkerService.getInstance();
+        this.modalService = ModalService.getInsance();
+        this.progressBar = ProgressBarService.getInstance();
+        this.notifications = NotificationService.getInstance();
+        this.config = ConfigurationService.getInstance();
+    }
+
+    public isModelsLinked(version: BSVersion, type: MSModelType): Promise<boolean>{
+        return lastValueFrom(this.versionFolderLinked.isVersionFolderLinked(version, MODEL_TYPE_FOLDERS[type]));
+    }
+
+    public $modelsLinkingPending(version: BSVersion, type: MSModelType): Observable<boolean>{
+        return this.versionFolderLinked.$isVersionFolderPending(version, MODEL_TYPE_FOLDERS[type]);
+    }
+
+    public onModelsFolderLinked(callback: VersionLinkerActionListener): void{
+        return this.versionFolderLinked.onVersionFolderLinked(callback);
+    }
+
+    public onModelsFolderUnlinked(callback: VersionLinkerActionListener): void{
+        return this.versionFolderLinked.onVersionFolderUnlinked(callback);
+    }
+
+    public removeModelsFolderLinkedListener(callback: VersionLinkerActionListener): void{
+        return this.versionFolderLinked.removeVersionFolderLinkedListener(callback);
+    }
+
+    public removeModelsFolderUnlinkedListener(callback: VersionLinkerActionListener): void{
+        return this.versionFolderLinked.removeVersionFolderUnlinkedListener(callback);
+    }
+
+    public async linkModels(type: MSModelType, version?: BSVersion): Promise<boolean>{
+
+        const res = await this.modalService.openModal(LinkModelsModal, type);
+
+        if(res.exitCode !== ModalExitCode.COMPLETED){ return null; }
+
+        return this.versionFolderLinked.linkVersionFolder({
+            version,
+            relativeFolder: MODEL_TYPE_FOLDERS[type],
+            type: VersionLinkerActionType.Link,
+            options: { keepContents: res.data !== false }
+        });
+    }
+
+    public async unlinkModels(type: MSModelType, version?: BSVersion): Promise<boolean>{
+
+        const res = await this.modalService.openModal(UnlinkModelsModal, type);
+
+        if(res.exitCode !== ModalExitCode.COMPLETED){ return null; }
+
+        return this.versionFolderLinked.unlinkVersionFolder({
+            version,
+            relativeFolder: MODEL_TYPE_FOLDERS[type],
+            type: VersionLinkerActionType.Unlink,
+            options: { keepContents: res.data !== false }
+        });
+    }
+
+    public $getModels(type: MSModelType, version?: BSVersion): Observable<Progression<BsmLocalModel[]>>{
+        return this.ipc.sendV2<Progression<BsmLocalModel[]>>("get-version-models", { args: { version, type } });
+    }
+
+    public async exportModels(models: BsmLocalModel[], version?: BSVersion){
+        if(!this.progressBar.require()){ return; }
+
+        const resFile = await this.ipc.send<string, OpenSaveDialogOption>("save-file", {args: {
+            filename: version ? `${version.name ?? version.BSVersion} Models` : "Models",
+            filters: [{name: "zip", extensions: ["zip"]}]
+        }});
+
+        if(!resFile.success){ return; }
+
+        const exportProgress$: Observable<ProgressionInterface> = this.ipc.sendV2<Progression, {version: BSVersion, models: BsmLocalModel[], outPath: string}>("export-models", {args: {version, models, outPath: resFile.data}}).pipe(
+            map(p => {
+                return { progression: (p.current / p.total) * 100, label: `${p.current} / ${p.total}` } as ProgressionInterface
+            })
+        );
+
+        this.progressBar.show(exportProgress$, true);
+
+        lastValueFrom(exportProgress$).then(() => {
+            this.notifications.notifySuccess({title: "models.notifications.export-success.title", duration: 3000});
+        }).catch(e => {
+            this.notifications.notifyError({title: "notifications.types.error", desc: "notifications.common.msg.error-occurred", duration: 3000});
+        }).finally(() => {
+            this.progressBar.hide(true);
+        })
+
+    }
+
+    public async deleteModels(models: BsmLocalModel[], version?: BSVersion): Promise<BsmLocalModel[]>{
+
+        if(!models?.length){ return Promise.resolve([]); }
+
+        const askModal = models.length > 1 || !this.config.get<boolean>(ModelsManagerService.REMEMBER_CHOICE_DELETE_MODEL_KEY);
+
+        if(askModal){
+
+            const types = Array.from(new Set(models.map(m => m.type)));
+
+            const linked = await (async () => {
+                if(!version){ return true; }
+                for(const type of types){
+                    if(!(await this.isModelsLinked(version, type))){ continue; }
+                    return true;
+                }
+                return false;
+            })();
+
+            const res = await this.modalService.openModal(DeleteModelsModal, { models, linked });
+            if(res.exitCode !== ModalExitCode.COMPLETED){ return Promise.resolve([]); }
+        }
+
+        const showProgressBar = this.progressBar.require(); 
+
+        const obs$ = this.ipc.sendV2<Progression<BsmLocalModel[]>>("delete-models", {args: models});
+
+        const progress$ =obs$.pipe(map(progress => (progress.current / progress.total) * 100));
+
+        if(showProgressBar){ this.progressBar.show(progress$); }
+
+        return lastValueFrom(obs$)
+            .then(({data}) => data ?? [])
+            .catch(() => {
+                this.notifications.notifyError({title: "notifications.types.error", desc: "notifications.common.msg.error-occurred", duration: 3000});
+                return []; 
+            })
+            .finally(() => this.progressBar.hide(true));
+
+    }
+
+    public isDeepLinksEnabled(): Promise<boolean>{
+        return this.ipc.send<boolean>("is-models-deep-links-enabled").then(res => (
+            res.success ? res.data : false
+        ));
+    }
+
+    public async enableDeepLink(): Promise<boolean>{
+        const res = await this.ipc.send<boolean>("register-models-deep-link");
+        return res.success ? res.data : false;
+    }
+
+    public async disableDeepLink(): Promise<boolean>{
+        const res = await this.ipc.send<boolean>("unregister-models-deep-link");
+        return res.success ? res.data : false;
+    }
+
+}

src/renderer/services/models-manager.service.ts

@@ -1,34 +0,0 @@
-import { IpcService } from "./ipc.service";
-
-export class ModelsManagerService {
-
-    private static instance: ModelsManagerService;
-
-    public static getInstance(): ModelsManagerService{
-        if(!ModelsManagerService.instance){ ModelsManagerService.instance = new ModelsManagerService(); }
-        return ModelsManagerService.instance;
-    }
-
-    private readonly ipc: IpcService;
-
-    private constructor(){
-        this.ipc = IpcService.getInstance();
-    }
-
-    public isDeepLinksEnabled(): Promise<boolean>{
-        return this.ipc.send<boolean>("is-models-deep-links-enabled").then(res => (
-            res.success ? res.data : false
-        ));
-    }
-
-    public async enableDeepLink(): Promise<boolean>{
-        const res = await this.ipc.send<boolean>("register-models-deep-link");
-        return res.success ? res.data : false;
-    }
-
-    public async disableDeepLink(): Promise<boolean>{
-        const res = await this.ipc.send<boolean>("unregister-models-deep-link");
-        return res.success ? res.data : false;
-    }
-
-}

src/renderer/services/thrird-partys/model-saber.service.ts

@@ -1,5 +1,7 @@
-import { MSModel } from "shared/models/model-saber/model-saber.model";
+import { MSGetQuery, MSGetQueryFilter, MSGetQueryFilterType, MSModel } from "shared/models/models/model-saber.model";
 import { IpcService } from "../ipc.service";
+import { Observable } from "rxjs";
+import { MS_QUERY_FILTER_TYPES } from "shared/models/models/constants";
 
 export class ModelSaberService {
 
@@ -22,4 +24,33 @@ export class ModelSaberService {
         return res.data;
     }
 
+    public searchModels(query: MSGetQuery): Observable<MSModel[]>{
+        return this.ipc.sendV2("search-models", {args: query});
+    }
+
+    public parseFilter(stringFilters: string): MSGetQueryFilter[]{
+        return stringFilters.split(" ").map(value => {
+
+            let trimed = value.trim();
+            const isNegative = trimed.at(0) === "-";
+
+            if(isNegative){
+                trimed = trimed.substring(0);
+            }
+
+            if(!trimed.includes(":")){
+                return {type: MSGetQueryFilterType.SearchName, value: trimed, isNegative}
+            }
+
+            const [filterType, filterValue] = trimed.split(":");
+
+            if(MS_QUERY_FILTER_TYPES.includes(filterType as MSGetQueryFilterType)){
+                return {type: filterType as MSGetQueryFilterType, value: filterValue, isNegative}
+            }
+
+            return {type: MSGetQueryFilterType.SearchName, value: trimed, isNegative};
+            
+        });
+    }
+
 }

src/renderer/services/version-folder-linker.service.ts

@@ -1,9 +1,10 @@
 import { LinkOptions, UnlinkOptions } from "main/services/folder-linker.service";
-import { map, distinctUntilChanged, filter } from "rxjs/operators";
+import { map, distinctUntilChanged, filter, mergeMap, share, shareReplay } from "rxjs/operators";
 import { BehaviorSubject, Observable } from "rxjs";
 import { BSVersion } from "shared/bs-version.interface";
 import { IpcService } from "./ipc.service";
 import { ProgressBarService } from "./progress-bar.service";
+import equal from "fast-deep-equal";
 
 export class VersionFolderLinkerService{
 
@@ -137,6 +138,12 @@ export class VersionFolderLinkerService{
         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());
     }

src/renderer/windows/App.tsx

@@ -10,29 +10,30 @@ import { useEffect } from "react";
 import { ThemeService } from "../services/theme.service";
 import { NotificationOverlay } from "../components/notification/notification-overlay.component";
 import { PageStateService } from "../services/page-state.service";
-import { MapsPage } from "../pages/maps-page.component";
+import { SharedContentsPage } from "../pages/shared-contents-page.component";
 import "tailwindcss/tailwind.css";
 import { BsmIframeView } from "../components/shared/iframe-view.component";
 import 'tippy.js/dist/tippy.css';
 import 'tippy.js/animations/shift-away-subtle.css';
 import { MapsManagerService } from "renderer/services/maps-manager.service";
 import { PlaylistsManagerService } from "renderer/services/playlists-manager.service";
-import { ModelsManagerService } from "renderer/services/models-manager.service";
+import { ModelsManagerService } from "renderer/services/models-management/models-manager.service";
 import { NotificationService } from "renderer/services/notification.service";
 import { timer } from "rxjs";
 import { ConfigurationService } from "renderer/services/configuration.service";
 import { OsDiagnosticService } from "renderer/services/os-diagnostic.service";
+import { useService } from "renderer/hooks/use-service.hook";
 
 export default function App() {
 
-    const themeService = ThemeService.getInstance();
-    const pageState = PageStateService.getInstance();
-    const maps = MapsManagerService.getInstance();
-    const playlists = PlaylistsManagerService.getInstance();
-    const models = ModelsManagerService.getInstance();
-    const notification = NotificationService.getInstance();
-    const config = ConfigurationService.getInstance();
-    const os = OsDiagnosticService.getInstance();
+    useService(OsDiagnosticService);
+    const themeService = useService(ThemeService);
+    const pageState = useService(PageStateService);
+    const maps = useService(MapsManagerService);
+    const playlists = useService(PlaylistsManagerService);
+    const models = useService(ModelsManagerService);
+    const notification = useService(NotificationService);
+    const config = useService(ConfigurationService);
 
     const location = useLocation();
     const navigate = useNavigate();
@@ -108,7 +109,7 @@ export default function App() {
         <div className="bg-light-main-color-2 dark:bg-main-color-2 relative rounded-tl-lg grow overflow-hidden max-w-full">
           <Routes>
             <Route path="/bs-version/:versionNumber" element={<VersionViewer/>}/>
-            <Route path="/maps" element={<MapsPage/>}/>
+            <Route path="/shared" element={<SharedContentsPage/>}/>
             <Route path="/settings" element={<SettingsPage/>}/>
             <Route path="*" element={<AvailableVersionsList/>}/>
           </Routes>

src/renderer/windows/OneClick/OneClickDownloadModel.tsx

@@ -4,24 +4,25 @@ import { BsmImage } from "renderer/components/shared/bsm-image.component";
 import TitleBar from "renderer/components/title-bar/title-bar.component";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
 import { IpcService } from "renderer/services/ipc.service";
-import { ModelDownloaderService } from "renderer/services/model-downloader.service";
 import { NotificationService } from "renderer/services/notification.service";
 import { ProgressBarService } from "renderer/services/progress-bar.service";
 import { ThemeService } from "renderer/services/theme.service";
 import { ModelSaberService } from "renderer/services/thrird-partys/model-saber.service";
 import { WindowManagerService } from "renderer/services/window-manager.service";
-import { MSModel } from "shared/models/model-saber/model-saber.model";
+import { MSModel } from "shared/models/models/model-saber.model";
 import defaultImage from '../../../../assets/images/default-version-img.jpg'
+import { ModelsDownloaderService } from "renderer/services/models-management/models-downloader.service";
+import { useService } from "renderer/hooks/use-service.hook";
 
 export default function OneClickDownloadModel() {
 
-    const ipc = IpcService.getInstance();
-    const themeService = ThemeService.getInstance();
-    const modelSaber = ModelSaberService.getInstance();
-    const progress = ProgressBarService.getInstance();
-    const modelDownloader = ModelDownloaderService.getInstance();
-    const windows = WindowManagerService.getInstance();
-    const notification = NotificationService.getInstance();
+    const ipc = useService(IpcService)
+    const themeService = useService(ThemeService);
+    const modelSaber = useService(ModelSaberService)
+    const progress = useService(ProgressBarService)
+    const modelDownloader = useService(ModelsDownloaderService)
+    const windows = useService(WindowManagerService)
+    const notification = useService(NotificationService)
 
     const [model, setModel] = useState<MSModel>(null);
     const t = useTranslation();

src/shared/models/models/bsm-local-model.interface.ts

@@ -0,0 +1,11 @@
+import { BSVersion } from "shared/bs-version.interface";
+import { MSModel, MSModelType } from "./model-saber.model";
+
+export interface BsmLocalModel{
+    readonly path: string;
+    readonly fileName: string;
+    readonly hash: string;
+    readonly type: MSModelType;
+    readonly model?: MSModel
+    readonly version?: BSVersion;
+}

src/shared/models/models/constants.ts

@@ -0,0 +1,29 @@
+import { MSGetQueryFilterType, MSGetSort, MSModelType } from "./model-saber.model";
+
+export const MODEL_SABER_URL = "https://modelsaber.com";
+
+export const MODEL_TYPE_FOLDERS = {
+    [MSModelType.Avatar]: "CustomAvatars",
+    [MSModelType.Bloq]: "CustomNotes",
+    [MSModelType.Platfrom]: "CustomPlatforms",
+    [MSModelType.Saber]: "CustomSabers"
+}
+
+export const MODELS_TYPE_MS_PAGE_ROOT = {
+    [MSModelType.Avatar]: "Avatars",
+    [MSModelType.Bloq]: "Bloqs",
+    [MSModelType.Platfrom]: "Platforms",
+    [MSModelType.Saber]: "Sabers"
+}
+
+export const MODEL_FILE_EXTENSIONS = {
+    [MSModelType.Avatar]: ".avatar",
+    [MSModelType.Bloq]: ".bloq",
+    [MSModelType.Platfrom]: ".plat",
+    [MSModelType.Saber]: ".saber"
+}
+
+export const MODEL_TYPES = Array.from(Object.values(MSModelType));
+export const MS_GET_QUERY_SORTS = Array.from(Object.values(MSGetSort));
+
+export const MS_QUERY_FILTER_TYPES = Array.from(Object.values(MSGetQueryFilterType));

src/shared/models/models/model-saber.model.ts

@@ -12,13 +12,25 @@ export interface MSModel {
     discord?: string,
     variationid?: number,
     platform: MSModelPlatform,
-    download: string,
+    download: ModelDownloadURL,
     install_link: string,
     date: string
 }
 
-export type MSModelType = "saber"|"platform"|"bloq"|"misc"|"avatar";
-export type MSModelPlatform = "pc"|"quest"|"all";
+export type ModelDownloadURL = string;
+
+export enum MSModelType {
+    Avatar = "avatar",
+    Saber = "saber",
+    Platfrom = "platform",
+    Bloq = "bloq"
+};
+
+export enum MSModelPlatform {
+    PC = "pc",
+    QUEST = "quest",
+    ALL = "all"
+};
 
 export interface MSGetQuery {
     type?: MSModelType;
@@ -37,6 +49,24 @@ export interface MSGetQueryFilter {
 }
 
 export type MSGetResponse<T extends string = string> = Record<T, MSModel>;
-export type MSGetSort = "date"|"name"|"author"
-export type MSGetSortDirection = "asc"|"desc"
-export type MSGetQueryFilterType = "author"|"name"|"tag"|"hash"|"discordid"|"id"|"searchName"
+
+export enum MSGetSort {
+    Date = "date",
+    Name = "name",
+    Author = "author"
+}
+export enum MSGetSortDirection {
+    Ascending = "asc",
+    Descending = "desc"
+}
+
+export enum MSGetQueryFilterType {
+    Author = "author",
+    Name = "name",
+    Tag = "tag",
+    Hash = "hash",
+    DiscordID = "discordid",
+    ID = "id",
+    SearchName = "searchName"
+}
+

src/shared/models/optionnal/optionnal.class.ts

@@ -0,0 +1,44 @@
+export class Optionnal<T = unknown>{
+
+    private static readonly EMPTY = new Optionnal<null>(null);
+
+    public static empty(): Optionnal<null>{
+        return Optionnal.EMPTY;
+    }
+
+    public static of<T>(value: T): Optionnal<T>{
+        if(value == null){
+            throw new Error("Value cannot be null");
+        }
+        return new Optionnal<T>(value);
+    }
+
+    public static ofNullable<T>(value: T): Optionnal<T>{
+        return value == null ? Optionnal.empty() : new Optionnal<T>(value);
+    }
+
+    private readonly value: T;
+
+    constructor(value: T){
+        this.value = value;
+    }
+
+    public get(): T{
+        if(this.isEmpty()){
+            throw new Error("No value present");
+        }
+        return this.value;
+    }
+
+    public isPresent(): boolean{ return this.value != null; }
+    public isEmpty(): boolean{ return this.value == null; }
+
+    public map<U>(mapper: (value: T) => U): Optionnal<U>{
+        if(this.isEmpty()){ return Optionnal.empty(); }
+        return Optionnal.ofNullable(mapper(this.value));
+    }
+
+    public orElse(other: T): T{
+        return this.isEmpty() ? other : this.value;
+    }
+}

src/shared/models/service.interface.ts

@@ -0,0 +1,3 @@
+export interface Service<T> {
+    getInstance: () => T;
+}