feat: 🚧 first attempt at providing localization

Author: thkruz

package-lock.json

@@ -146,6 +146,8 @@
     "file-saver": "^2.0.5",
     "gl-matrix": "^3.4.3",
     "gremlins.js": "^2.2.0",
+    "i18next": "^23.14.0",
+    "i18next-browser-languagedetector": "^8.0.0",
     "jquery": "^3.7.1",
     "jquery-ui-bundle": "^1.12.1-migrate",
     "material-icons": "^1.13.12",

package.json

@@ -1048,24 +1048,36 @@ input:focus {
   /* backdrop-filter: blur(3px); */
 }
 
-#bottom-icons div {
-  cursor: pointer;
-}
-
 .bmenu-item {
-  height: var(--bottom-icon-height);
   padding: 5px;
   text-align: center;
   cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  height: 90px;
 }
 
-.bmenu-title {
+.bmenu-item-inner {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 5px;
+  padding-right: 15px;
+}
+
+.bmenu-item .status-icon {
+  width: 15px;
+  height: 15px;
+  top: -20px;
+  background-size: cover;
   position: relative;
-  display: inline-block;
-  font-size: 11px;
-  line-height: 20px;
-  vertical-align: top;
-  text-align: center;
+  z-index: 5;
+  left: 15px;
+  display: block;
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kTtIw1AUhv+mFUUqDmYQcchQnSyILxylikWwUNoKrTqY3PQFTRqSFBdHwbXg4GOx6uDirKuDqyAIPkBcXZwUXaTEc5NCixgvHO7Hf+//c+65gNCoMM0KjQOabpupeEzK5lal7leEIVJNIyQzy0ikFzPwXV/3CPD9Lsqz/O/9ufrUvMWAgEQ8xwzTJt4gntm0Dc77xCIrySrxOfGYSQ0SP3Jd8fiNc9FlgWeKZiY1TywSS8UOVjqYlUyNeIo4omo65QtZj1XOW5y1So21+uQvDOf1lTTXqYYRxxISSEKCghrKqMBGlHadFAspOo/5+Idcf5JcCrnKYORYQBUaZNcP/ge/Z2sVJie8pHAM6HpxnI8RoHsXaNYd5/vYcZonQPAZuNLb/moDmP0kvd7WIkdA/zZwcd3WlD3gcgcYfDJkU3alIJVQKADvZ/RNOWDgFuhd8+bWOsfpA5ChWS3fAAeHwGiRstd93t3TObd/77Tm9wOOiHKymlTPuAAAAAZiS0dEAM4AowCKeTVkwgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+cMFAw5A0OJiTcAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAB20lEQVRYw+2WvU4bURCFv7m2NpUlaiSngcLF2hLOG0BHYb9ACoqkg44+ovcjWIKCF7ALOvIGBuKlSBGaIFEjucoK30kRW4p8Z9e7xJKR4ml35tzZM2d+YGP/u0kZ5zjRuqR0BQ5RdlTYBhDlCeFB4UojBvdNeVxpAns3uj31nCl8Kgjarzi+3Lbl6Z8TaN1oRz2XQK0kuxNxfBy3ZZjn5PI+Nkd6rJ7BKx4HqKln0Bzp8asYmP35YCVCc3SzmJCsmr94vmf8+cRBTyoMtyJ+ADyn7OqUjofTrJiqo2FpomolMPWcWUAifPURR99Cld8Bd3Gi5y7lQpX9xXLMMD8vZSBOtC6/+Gk9Pv4gB0Uob4302kgCfcf7xRYNRCgpXYtCH3FUtOYz30kRbGdQcmg49coMl/umPDroFcRe5ImdILDCsLTyrRgDO0hgPl7/trnay5gVY2G7dS+jUANK0KvPKbtlga0YC9sZo+khoG5Kp2wCZoyBHWoAroK2gtM40XqZtT2bikuxwwQic/7XXMpF4br+8a0VwXZWDwv0g2BlvzXS6zwm4kTrWVNQoG/NkrUvo7Wv48w5MG7LEOFkBVfnSd5V9LZPsjkTVUfDEmbeUVp1NJY9/ibO8o1t7Ddz5991OpoAtwAAAABJRU5ErkJggg==');
 }
 
 .bmenu-item img {
@@ -1075,16 +1087,12 @@ input:focus {
   display: block;
 }
 
-.bmenu-item .status-icon {
-  width: 15px;
-  height: 15px;
-  background-size: cover;
+.bmenu-title {
   position: relative;
-  top: -62px;
-  z-index: 5;
-  left: 15px;
   display: block;
-  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kTtIw1AUhv+mFUUqDmYQcchQnSyILxylikWwUNoKrTqY3PQFTRqSFBdHwbXg4GOx6uDirKuDqyAIPkBcXZwUXaTEc5NCixgvHO7Hf+//c+65gNCoMM0KjQOabpupeEzK5lal7leEIVJNIyQzy0ikFzPwXV/3CPD9Lsqz/O/9ufrUvMWAgEQ8xwzTJt4gntm0Dc77xCIrySrxOfGYSQ0SP3Jd8fiNc9FlgWeKZiY1TywSS8UOVjqYlUyNeIo4omo65QtZj1XOW5y1So21+uQvDOf1lTTXqYYRxxISSEKCghrKqMBGlHadFAspOo/5+Idcf5JcCrnKYORYQBUaZNcP/ge/Z2sVJie8pHAM6HpxnI8RoHsXaNYd5/vYcZonQPAZuNLb/moDmP0kvd7WIkdA/zZwcd3WlD3gcgcYfDJkU3alIJVQKADvZ/RNOWDgFuhd8+bWOsfpA5ChWS3fAAeHwGiRstd93t3TObd/77Tm9wOOiHKymlTPuAAAAAZiS0dEAM4AowCKeTVkwgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+cMFAw5A0OJiTcAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAB20lEQVRYw+2WvU4bURCFv7m2NpUlaiSngcLF2hLOG0BHYb9ACoqkg44+ovcjWIKCF7ALOvIGBuKlSBGaIFEjucoK30kRW4p8Z9e7xJKR4ml35tzZM2d+YGP/u0kZ5zjRuqR0BQ5RdlTYBhDlCeFB4UojBvdNeVxpAns3uj31nCl8Kgjarzi+3Lbl6Z8TaN1oRz2XQK0kuxNxfBy3ZZjn5PI+Nkd6rJ7BKx4HqKln0Bzp8asYmP35YCVCc3SzmJCsmr94vmf8+cRBTyoMtyJ+ADyn7OqUjofTrJiqo2FpomolMPWcWUAifPURR99Cld8Bd3Gi5y7lQpX9xXLMMD8vZSBOtC6/+Gk9Pv4gB0Uob4302kgCfcf7xRYNRCgpXYtCH3FUtOYz30kRbGdQcmg49coMl/umPDroFcRe5ImdILDCsLTyrRgDO0hgPl7/trnay5gVY2G7dS+jUANK0KvPKbtlga0YC9sZo+khoG5Kp2wCZoyBHWoAroK2gtM40XqZtT2bikuxwwQic/7XXMpF4br+8a0VwXZWDwv0g2BlvzXS6zwm4kTrWVNQoG/NkrUvo7Wv48w5MG7LEOFkBVfnSd5V9LZPsjkTVUfDEmbeUVp1NJY9/ibO8o1t7Ddz5991OpoAtwAAAABJRU5ErkJggg==');
+  font-size: 11px;
+  height: 100%;
+  text-align: center;
 }
 
 .bmenu-item:not(.bmenu-item-disabled, .bmenu-item-selected, .bmenu-item-help):hover * {

public/css/style.css

@@ -1,4 +1,5 @@
 import { errorManagerInstance } from '@app/singletons/errorManager';
+import i18next from 'i18next';
 
 export interface SensorGroup {
   name: string;
@@ -14,7 +15,7 @@ export const fetchSensorGroups = async (): Promise<SensorGroup[]> => {
   let sensorGroupsApi = await fetch('https://api.keeptrack.space/v1/sensor-groups').then((response) => response.json());
 
   if (sensorGroupsApi.length === 0) {
-    errorManagerInstance.warn('No sensor groups found in the API, reverting to the included sensor groups database.');
+    errorManagerInstance.warn(i18next.t('errors.sensorGroupsApiEmpty'));
     sensorGroupsApi = sensorGroups;
   }