✨ add language switch, add german

next-i18next.config.js

@@ -4,6 +4,7 @@ module.exports = {
   i18n: {
     defaultLocale: 'en',
     locales: ['en', 'de'],
+    localeDetection: true,
   },
   reloadOnPrerender: process.env.NODE_ENV === 'development',
 };

public/locales/de/common.json

@@ -1,385 +1,6 @@
 {
-  "settings": {
+  "actions": {
-    "title": "Einstellungen",
+    "save": "Speichern"
-    "tooltip": "Einstellungen",
-    "tabs": {
-      "common": {
-        "title": "Allgemein",
-        "settings": {
-          "searchEngine": {
-            "title": "Suchmaschine",
-            "tips": {
-              "generalTip": "Benutze die Prefixe !yt und !t vor deiner Suchanfrage um auf Youtube oder nach einem Torrent zu suchen.",
-              "placeholderTip": "%s can be used as a placeholder for the query."
-            },
-            "customEngine": {
-              "label": "Suchadresse",
-              "placeholder": "Benutzerdefinierte Adresse"
-            }
-          },
-          "colorScheme": {
-            "label": "Wechseln zu {{scheme}} Modus"
-          },
-          "widgetsPositionSwitch": {
-            "label": "Positionieren von Widgets auf linker Seite"
-          },
-          "moduleEnabler": {
-            "title": "Modul Enabler"
-          },
-          "language": {
-            "title": "Sprache"
-          },
-          "configChanger": {
-            "configSelect": {
-              "label": "Konfigurations Lader"
-            },
-            "modal": {
-              "title": "Choose the name of your new config",
-              "form": {
-                "configName": {
-                  "label": "Config name",
-                  "placeholder": "Your new config name"
-                },
-                "buttons:": {
-                  "submit": "Confirm"
-                }
-              }
-            },
-            "buttons": {
-              "download": "Konfiguration herunterladen",
-              "delete": {
-                "text": "Konfiguration löschen",
-                "notifications": {
-                  "deleted": {
-                    "title": "Config deleted",
-                    "message": "Config deleted"
-                  },
-                  "deleteFailed": {
-                    "title": "Config delete failed",
-                    "message": "Config delete failed"
-                  }
-                }
-              },
-              "saveCopy": "Kopie speichern"
-            }
-          },
-          "configTip": "Lade deine Konfiguration hoch, indem du sie per drag-and-drop auf die Seite ziehst."
-        }
-      },
-      "customizations": {
-        "title": "Anpassungen",
-        "settings": {
-          "opacitySelector": {
-            "label": "App Opacity"
-          },
-          "colorSelector": {
-            "suffix": "{{color}} color"
-          },
-          "shadeSelector": {
-            "label": "Shade"
-          },
-          "pageTitle": {
-            "label": "Page Title",
-            "placeholder": "Homarr 🦞"
-          },
-          "logo": {
-            "label": "Logo",
-            "placeholder": "/img/logo.png"
-          },
-          "favicon": {
-            "label": "Favicon",
-            "placeholder": "/favicon.png"
-          },
-          "background": {
-            "label": "Background",
-            "placeholder": "/img/background.png"
-          },
-          "buttons": {
-            "submit": "Save"
-          }
-        }
-      }
-    },
-    "credits": {
-      "madeWithLove": "Gemacht mit ❤️ von @"
-    }
   },
-  "layout": {
+  "tip": "Tipp: "
-    "header": {
-      "search": {
-        "input": {
-          "placeholder": "Das Internet durchsuchen..."
-        }
-      },
-      "docker": {
-        "errors": {
-          "integrationFailed": {
-            "title": "Docker Integration ist gescheitert",
-            "message": "Hast du vergessen, den Docker Socket zu verbinden?"
-          }
-        },
-        "actionIcon": {
-          "tooltip": "Docker"
-        }
-      },
-      "addService": {
-        "actionIcon": {
-          "tooltip": "Einen Service hinzufügen"
-        },
-        "modal": {
-          "title": "Service hinzufügen",
-          "form": {
-            "validation": {
-              "invalidUrl": "Bitte gebe eine gültige Addresse ein",
-              "noStatusCodeSelected": "Bitte wähle einen gültigen Status Code aus"
-            }
-          },
-          "tabs": {
-            "options": {
-              "title": "Optionen",
-              "form": {
-                "serviceName": {
-                  "label": "Service Namen",
-                  "placeholder": "Plex"
-                },
-                "iconUrl": {
-                  "label": "Icon URL"
-                },
-                "serviceUrl": {
-                  "label": "Service URL"
-                },
-                "onClickUrl": {
-                  "label": "URL beim Klicken"
-                },
-                "serviceType": {
-                  "label": "Service Typ",
-                  "defaultValue": "Andere",
-                  "placeholder": "Wähle einen aus..."
-                },
-                "category": {
-                  "label": "Kategorie",
-                  "placeholder": "Wähle eine Kategorie oder erstelle eine neue...",
-                  "nothingFound": "Keine Übereinstimmungen gefunden",
-                  "createLabel": "+ Erstellen {{query}}"
-                },
-                "integrations": {
-                  "apiKey": {
-                    "label": "API Schlüssel",
-                    "placeholder": "Dein API Schlüssel",
-                    "validation": {
-                      "noKey": "Invalider Schlüssel"
-                    },
-                    "tip": {
-                      "text": "Hole deinen API Schlüssel",
-                      "link": "hier."
-                    }
-                  },
-                  "qBittorrent": {
-                    "username": {
-                      "label": "Benutzername",
-                      "placeholder": "admin",
-                      "validation": {
-                        "invalidUsername": "Invalider Benutzername"
-                      }
-                    },
-                    "password": {
-                      "label": "Passwort",
-                      "placeholder": "adminadmin",
-                      "validation": {
-                        "invalidPassword": "Invalides Passwort"
-                      }
-                    }
-                  },
-                  "deluge": {
-                    "password": {
-                      "label": "Passwort",
-                      "placeholder": "password",
-                      "validation": {
-                        "invalidPassword": "Invalides PassworT"
-                      }
-                    }
-                  },
-                  "transmission": {
-                    "username": {
-                      "label": "Benutzername",
-                      "placeholder": "admin",
-                      "validation": {
-                        "invalidUsername": "Invalid username"
-                      }
-                    },
-                    "password": {
-                      "label": "Password",
-                      "placeholder": "adminadmin",
-                      "validation": {
-                        "invalidPassword": "Invalid password"
-                      }
-                    }
-                  }
-                }
-              }
-            },
-            "advancedOptions": {
-              "title": "Advanced options",
-              "form": {
-                "httpStatusCodes": {
-                  "label": "HTTP Status Codes",
-                  "placeholder": "Select valid status codes",
-                  "clearButtonLabel": "Clear selection",
-                  "nothingFound": "Nothing found"
-                },
-                "openServiceInNewTab": {
-                  "label": "Open service in new tab"
-                },
-                "buttons": {
-                  "submit": {
-                    "content": "Add service"
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  },
-  "modules": {
-    "common": {
-      "mediaCard": {
-        "buttons": {
-          "play": "Play",
-          "request": "Request"
-        }
-      }
-    },
-    "calendar": {
-      "title": "Calendar",
-      "description": "A calendar module for displaying upcoming releases. It interacts with the Sonarr and Radarr API.",
-      "options": {
-        "sundayStart": "Start the week on Sunday"
-      }
-    },
-    "dashDot": {
-      "card": {
-        "title": "Dash.",
-        "errors": {
-          "noService": "No dash. service found. Please add one to your Homarr dashboard or set a dashdot URL in the module options",
-          "noInformation": "Cannot acquire information from dash. - are you running the latest version?"
-        },
-        "graphs": {
-          "storage": {
-            "title": "Storage",
-            "label": "Storage:"
-          },
-          "network": {
-            "title": "Network",
-            "label": "Network:",
-            "metrics": {
-              "download": "Down",
-              "upload": "Up"
-            }
-          },
-          "cpu": {
-            "title": "CPU"
-          },
-          "memory": {
-            "title": "RAM"
-          },
-          "gpu": {
-            "title": "GPU"
-          }
-        }
-      }
-    },
-    "torrent": {
-      "card": {
-        "title": "Your Downloads"
-      }
-    },
-    "downloads": {
-      "card": {
-        "table": {
-          "header": {
-            "name": "Name",
-            "size": "Size",
-            "download": "Down",
-            "upload": "Up",
-            "estimatedTimeOfArrival": "ETA",
-            "progress": "Progress"
-          },
-          "body": {
-            "nothingFound": "No torrents found"
-          }
-        }
-      }
-    },
-    "weather": {
-      "card": {
-        "weatherDescriptions": {
-          "clear": "Clear",
-          "mainlyClear": "Mainly clear",
-          "fog": "Fog",
-          "drizzle": "Drizzle",
-          "freezingDrizzle": "Freezing drizzle",
-          "rain": "Rain",
-          "freezingRain": "Freezing rain",
-          "snowFall": "Snow fall",
-          "snowGrains": "Snow grains",
-          "rainShowers": "Rain showers",
-          "snowShowers": "Snow showers",
-          "thunderstorm": "Thunderstorm",
-          "thunderstormWithHail": "Thunderstorm with hail",
-          "unknown": "Unknown"
-        }
-      }
-    },
-    "overseerr": {
-      "popup": {
-        "item": {
-          "buttons": {
-            "askFor": "Ask for {{title}}",
-            "cancel": "Cancel",
-            "request": "Request"
-          },
-          "alerts": {
-            "automaticApproval": {
-              "title": "Using API key",
-              "text": "This request will be automatically approved"
-            }
-          }
-        },
-        "seasonSelector": {
-          "caption": "Tick the seasons that you want to be downloaded",
-          "table": {
-            "header": {
-              "season": "Season",
-              "numberOfEpisodes": "Number of episodes"
-            }
-          }
-        }
-      }
-    },
-    "ping": {
-      "states": {
-        "online": "Online {{response}}",
-        "offline": "Offline {{response}}",
-        "loading": "Loading..."
-      }
-    },
-    "docker": {
-      "search": {
-        "placeholder": "Search by container or image name"
-      },
-      "table": {
-        "header": {
-          "name": "Name",
-          "image": "Image",
-          "ports": "Ports",
-          "state": "State"
-        },
-        "body": {
-          "portCollapse": "{{ports}} more"
-        }
-      }
-    }
-  }
 }

public/locales/de/layout/add-service-app-shelf.json

@@ -0,0 +1,118 @@
+{
+        "actionIcon": {
+          "tooltip": "Einen Service hinzufügen"
+        },
+        "modal": {
+          "title": "Service hinzufügen",
+          "form": {
+            "validation": {
+              "invalidUrl": "Please enter a valid URL",
+              "noStatusCodeSelected": "Please select a status code"
+            }
+          },
+          "tabs": {
+            "options": {
+              "title": "Optionen",
+              "form": {
+                "serviceName": {
+                  "label": "Service Namen",
+                  "placeholder": "Plex"
+                },
+                "iconUrl": {
+                  "label": "Icon URL"
+                },
+                "serviceUrl": {
+                  "label": "Service URL"
+                },
+                "onClickUrl": {
+                  "label": "URL bei einem Klick"
+                },
+                "serviceType": {
+                  "label": "Service Typ",
+                  "defaultValue": "Andere",
+                  "placeholder": "Wähle einen Typ aus"
+                },
+                "category": {
+                  "label": "Kategorie",
+                  "placeholder": "Whle eine Kategorie oder erstelle eine neue",
+                  "nothingFound": "Nichts gefunden",
+                  "createLabel": "+ Erstelle {{query}}"
+                },
+                "integrations": {
+                  "apiKey": {
+                    "label": "API Schlüssel",
+                    "placeholder": "Dein API Schlüssel",
+                    "validation": {
+                      "noKey": "Invalider Schlüssel"
+                    },
+                    "tip": {
+                      "text": "Erhalte deinen API Schlüssel",
+                      "link": "hier."
+                    }
+                  },
+                  "qBittorrent": {
+                    "username": {
+                      "label": "Benutzernamen",
+                      "placeholder": "admin",
+                      "validation": {
+                        "invalidUsername": "Invalider Benutzername"
+                      }
+                    },
+                    "password": {
+                      "label": "Passwort",
+                      "placeholder": "adminadmin",
+                      "validation": {
+                        "invalidPassword": "Invalides Passwort"
+                      }
+                    }
+                  },
+                  "deluge": {
+                    "password": {
+                      "label": "Passwort",
+                      "placeholder": "password",
+                      "validation": {
+                        "invalidPassword": "Invalides Passwort"
+                      }
+                    }
+                  },
+                  "transmission": {
+                    "username": {
+                      "label": "Benutzername",
+                      "placeholder": "admin",
+                      "validation": {
+                        "invalidUsername": "Invalider Benutzername"
+                      }
+                    },
+                    "password": {
+                      "label": "Passwort",
+                      "placeholder": "adminadmin",
+                      "validation": {
+                        "invalidPassword": "Invalides Passwort"
+                      }
+                    }
+                  }
+                }
+              }
+            },
+            "advancedOptions": {
+              "title": "Weitere Optionen",
+              "form": {
+                "httpStatusCodes": {
+                  "label": "HTTP Status Nummern",
+                  "placeholder": "Wähle eine valide Status Nummer",
+                  "clearButtonLabel": "Auswahl löschen",
+                  "nothingFound": "Nichts gefunden"
+                },
+                "openServiceInNewTab": {
+                  "label": "Serivce in einem neuen Tab öffnen"
+                },
+                "buttons": {
+                  "submit": {
+                    "content": "Service hinzufügen"
+                  }
+                }
+              }
+            }
+          }
+        }
+      }

public/locales/de/layout/app-shelf-menu.json

@@ -0,0 +1,18 @@
+{
+  "modal": {
+    "title": "Einen Service bearbeiten",
+    "buttons": {
+      "save": "Service speichern"
+    }
+  },
+  "menu": {
+    "labels": {
+      "settings": "Einstellungen",
+      "dangerZone": "Gefahrenzone"
+    },
+    "actions": {
+      "edit": "Bearbeiten",
+      "delete": "Löschen"
+    }
+  }
+}

public/locales/de/layout/app-shelf.json

@@ -0,0 +1,10 @@
+{
+  "accordions": {
+    "downloads": {
+      "text": "Deine Downloads"
+    },
+    "others": {
+      "text": "Andere"
+    }
+  }
+}

public/locales/de/modules/common-media-cards-module.json

@@ -0,0 +1,6 @@
+{
+  "buttons": {
+          "play": "Abspielen",
+          "request": "Anfragen"
+        }
+}

public/locales/de/modules/dashdot-module.json

@@ -0,0 +1,32 @@
+{
+  "card": {
+        "title": "Dash.",
+        "errors": {
+          "noService": "Kein Dash. Service gefunden. Bitte füge einen zu deinem Homarr Dashboard hinzu oder setze eine Dash. URL in den Modul-Optionen.",
+          "noInformation": "Informationen konnten  nicht von Dash. geladen werden. Betriebst du die neuste Version?"
+        },
+        "graphs": {
+          "storage": {
+            "title": "Speicher",
+            "label": "Speicher:"
+          },
+          "network": {
+            "title": "Netzwerk",
+            "label": "Netzwerk:",
+            "metrics": {
+              "download": "Eingehend",
+              "upload": "Ausgehend"
+            }
+          },
+          "cpu": {
+            "title": "CPU"
+          },
+          "memory": {
+            "title": "RAM"
+          },
+          "gpu": {
+            "title": "GPU"
+          }
+        }
+      }
+}

public/locales/de/modules/docker-module.json

@@ -0,0 +1,65 @@
+{
+  "search": {
+    "placeholder": "Suche nach Conainer oder Image Namen"
+  },
+  "table": {
+    "header": {
+      "name": "Name",
+      "image": "Image",
+      "ports": "Ports",
+      "state": "Status"
+    },
+    "body": {
+      "portCollapse": "{{ports}} weitere"
+    },
+    "states": {
+      "running": "Läuft",
+      "created": "Erstellt",
+      "stopped": "Gestopped",
+      "unknown": "Unbekannt"
+    }
+  },
+  "actionBar": {
+    "addService": {
+      "title": "Service hinzufügen",
+      "message": "Service zu Homarr hinzufügen"
+    },
+    "restart": {
+      "title": "Neustarten"
+    },
+    "stop": {
+      "title": "Stoppen"
+    },
+    "start": {
+      "title": "Starten"
+    },
+    "refreshData": "Daten aktualisieren",
+    "addToHomarr": {
+      "title": "Zu Homarr hinzufügen"
+    },
+    "remove": {
+      "title": "Entfernen"
+    }
+  },
+  "messages": {
+    "successfullyExecuted": {
+      "title": "Container {{containerName}} {{action}}ed",
+      "message": "Your container was successfully {{action}}ed"
+    }
+  },
+  "errors": {
+    "integrationFailed": {
+      "title": "Docker Integration schlug fehl",
+      "message": "Hast du vergessen, den Docker Socket zu verbinden?"
+    },
+    "unknownError": {
+      "title": "Es ist ein Fehler aufgetreten"
+    },
+    "oneServiceAtATime": {
+      "title": "Bitte füge nur einen Service zur Zeit hinzu."
+    }
+  },
+  "actionIcon": {
+    "tooltip": "Docker"
+  }
+}

public/locales/de/modules/downloads-module.json

@@ -0,0 +1,23 @@
+{
+  "card": {
+    "table": {
+      "header": {
+        "name": "Name",
+        "size": "Grösse",
+        "download": "Eingehend",
+        "upload": "Ausgehend",
+        "estimatedTimeOfArrival": "Vorraussichtlicher Abschluss",
+        "progress": "Fortschritt"
+      },
+      "body": {
+        "nothingFound": "Keine Torrents gefunden"
+      }
+    },
+    "errors": {
+      "noDownloadClients": {
+        "title": "Keine unterstützten Download Clients gefunden",
+        "text": "Füge einen Download Service hinzu, um deine derzeitigen Downloads zu sehen"
+      }
+    }
+  }
+}

public/locales/de/modules/overseerr-module.json

@@ -0,0 +1,26 @@
+{
+  "popup": {
+        "item": {
+          "buttons": {
+            "askFor": "Fragen für {{title}}",
+            "cancel": "Abbrechen",
+            "request": "Anfragen"
+          },
+          "alerts": {
+            "automaticApproval": {
+              "title": "Einen API Schlüssel benutzen",
+              "text": "Diese Anfrage wird automatisch genehmigt"
+            }
+          }
+        },
+        "seasonSelector": {
+          "caption": "Kreuze die Staffeln an, die heruntergeladen werden sollen.",
+          "table": {
+            "header": {
+              "season": "Staffel",
+              "numberOfEpisodes": "Anzahl von Episoden"
+            }
+          }
+        }
+      }
+}

public/locales/de/modules/ping-module.json

@@ -0,0 +1,7 @@
+{
+  "states": {
+        "online": "Online {{response}}",
+        "offline": "Offline {{response}}",
+        "loading": "Laden..."
+      }
+}

public/locales/de/modules/search-module.json

@@ -0,0 +1,5 @@
+{
+  "input": {
+          "placeholder": "Das Internet durchsuchen..."
+        }
+}

public/locales/de/modules/weather-module.json

@@ -0,0 +1,20 @@
+{
+  "card": {
+        "weatherDescriptions": {
+          "clear": "Klar",
+          "mainlyClear": "Überwiegend klar",
+          "fog": "Nebel",
+          "drizzle": "Niesel",
+          "freezingDrizzle": "Eisiger Nieselregen",
+          "rain": "Regen",
+          "freezingRain": "Eisiger Regen",
+          "snowFall": "Schneefall",
+          "snowGrains": "Schneekörner",
+          "rainShowers": "Regenschauer",
+          "snowShowers": "Schneeschauer",
+          "thunderstorm": "Gewitter",
+          "thunderstormWithHail": "Gewitter mit Hagel",
+          "unknown": "Unbekannt"
+        }
+      }
+}

public/locales/de/settings/common.json

@@ -0,0 +1,14 @@
+{
+  "title": "Einstellungen",
+  "tooltip": "Einstellungen",
+  "tabs": {
+    "common": "Gewöhnlich",
+    "customizations": "Anpassungen"
+  },
+  "tips": {
+    "configTip": "Lade eine neue Konfiguration hoch, indem du eine neue auf die Seite ziehst!"
+  },
+  "credits": {
+    "madeWithLove": "Gemacht mit ❤️ von @"
+  }
+}

public/locales/de/settings/customization/app-width.json

@@ -0,0 +1,3 @@
+{
+  "label": "Applikations Breite"
+}

public/locales/de/settings/customization/color-selector.json

@@ -0,0 +1,3 @@
+{
+  "suffix": "{{color}} Farbe"
+}

public/locales/de/settings/customization/opacity-selector.json

@@ -0,0 +1,3 @@
+{
+  "label": "Applikation Deckkraft"
+}

public/locales/de/settings/customization/page-appearance.json

@@ -0,0 +1,21 @@
+{
+  "pageTitle": {
+    "label": "Seiten Titel",
+    "placeholder": "Homarr 🦞"
+  },
+  "logo": {
+    "label": "Logo",
+    "placeholder": "/img/logo.png"
+  },
+  "favicon": {
+    "label": "Favicon",
+    "placeholder": "/favicon.png"
+  },
+  "background": {
+    "label": "Hintergrund",
+    "placeholder": "/img/background.png"
+  },
+  "buttons": {
+    "submit": "Absenden"
+  }
+}

public/locales/de/settings/customization/shade-selector.json

@@ -0,0 +1,3 @@
+{
+  "label": "Shatten"
+}

public/locales/de/settings/general/color-schema.json

@@ -0,0 +1,3 @@
+{
+  "label": "Wechseln zu {{scheme}} Modus"
+}

public/locales/de/settings/general/config-changer.json

@@ -0,0 +1,34 @@
+{
+  "configSelect": {
+    "label": "Konfigurations Lader"
+  },
+  "modal": {
+    "title": "Wähle einen Namen für deine neue Konfiguration",
+    "form": {
+      "configName": {
+        "label": "Konfigurations Name",
+        "placeholder": "Dein neuer Konfigurtionsname"
+      },
+      "buttons:": {
+        "submit": "Bestätigen"
+      }
+    }
+  },
+  "buttons": {
+    "download": "Konfiguration herunterladen",
+    "delete": {
+      "text": "Konfiguration löschen",
+      "notifications": {
+        "deleted": {
+          "title": "Konfiguration gelöscht",
+          "message": "Konfiguration wurde gelöscht"
+        },
+        "deleteFailed": {
+          "title": "Config delete failed",
+          "message": "Config delete failed"
+        }
+      }
+    },
+    "saveCopy": "Eine Kopie speichern"
+  }
+}

public/locales/de/settings/general/internationalization.json

@@ -0,0 +1,3 @@
+{
+  "label": "Sprache"
+}

public/locales/de/settings/general/module-enabler.json

@@ -0,0 +1,3 @@
+{
+  "title": "Modul-Enabler"
+}

public/locales/de/settings/general/search-engine.json

@@ -0,0 +1,11 @@
+{
+  "title": "Suchmaschine",
+            "tips": {
+"generalTip": "Verwenden die Präfixe !yt und !t vor deiner Suchanfrage, um auf YouTube bzw. nach einem Torrent zu suchen.",
+            "placeholderTip": "%s kann als Platzhalter für deine Suchanfrage verwendet werden."
+            },
+            "customEngine": {
+              "label": "Suchanfrage URL",
+              "placeholder": "Benutzerdefinierte Adresse"
+            }
+}

public/locales/de/settings/general/theme-selector.json

@@ -0,0 +1,3 @@
+{
+  "label": "Wechsel zu {{theme}} Modus"
+}

public/locales/de/settings/general/widget-positions.json

@@ -0,0 +1,3 @@
+{
+  "label": "Widgets auf der linken Seite"
+}

public/locales/en/common.json

@@ -1,5 +1,6 @@
 {
   "actions": {
     "save": "Save"
-  }
+  },
+  "tip": "Tip: "
 }

public/locales/en/layout/app-shelf-menu.json

@@ -0,0 +1,18 @@
+{
+  "modal": {
+    "title": "Modify a service",
+    "buttons": {
+      "save": "Save service"
+    }
+  },
+  "menu": {
+    "labels": {
+      "settings": "Settings",
+      "dangerZone": "Danger zone"
+    },
+    "actions": {
+      "edit": "Edit",
+      "delete": "Delete"
+    }
+  }
+}

public/locales/en/modules/downloads-module.json

@@ -12,6 +12,12 @@
       "body": {
         "nothingFound": "No torrents found"
       }
+    },
+    "errors": {
+      "noDownloadClients": {
+        "title": "No supported download clients found!",
+        "text": "Add a download service to view your current downloads"
+      }
     }
   }
 }

public/locales/en/settings/common.json

@@ -5,6 +5,9 @@
     "common": "Common",
     "customizations": "Customizations"
   },
+  "tips": {
+    "configTip": "Upload your config file by dragging and dropping it onto the page!"
+  },
   "credits": {
     "madeWithLove": "Made with ❤️ by @"
   }

public/locales/en/settings/customization/app-width.json

@@ -0,0 +1,3 @@
+{
+  "label": "App Width"
+}

public/locales/en/settings/customization/page-appearance.json

@@ -14,5 +14,8 @@
   "background": {
     "label": "Background",
     "placeholder": "/img/background.png"
+  },
+  "buttons": {
+    "submit": "Submit"
   }
 }

public/locales/en/settings/general/config-changer.json

@@ -30,6 +30,5 @@
       }
     },
     "saveCopy": "Save a copy"
-  },
+  }
-  "configTip": "Upload your config file by dragging and dropping it onto the page!"
 }

src/components/AppShelf/AppShelfMenu.tsx

@@ -2,6 +2,7 @@ import { ActionIcon, Menu, Modal, Text, useMantineTheme } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import { useState } from 'react';
 import { IconCheck as Check, IconEdit as Edit, IconMenu, IconTrash as Trash } from '@tabler/icons';
+import { useTranslation } from 'next-i18next';
 import { useConfig } from '../../tools/state';
 import { serviceItem } from '../../tools/types';
 import { AddAppShelfItemForm } from './AddAppShelfItem';
@@ -11,7 +12,7 @@ export default function AppShelfMenu(props: any) {
   const { service }: { service: serviceItem } = props;
   const { config, setConfig } = useConfig();
   const { secondaryColor } = useColorTheme();
-  const theme = useMantineTheme();
+  const { t } = useTranslation('layout/app-shelf-menu');
   const [opened, setOpened] = useState(false);
   return (
     <>
@@ -20,9 +21,9 @@ export default function AppShelfMenu(props: any) {
         radius="md"
         opened={props.opened || opened}
         onClose={() => setOpened(false)}
-        title="Modify a service"
+        title={t('modal.title')}
       >
-        <AddAppShelfItemForm setOpened={setOpened} {...service} message="Save service" />
+        <AddAppShelfItemForm setOpened={setOpened} {...service} message={t('modal.buttons.save')} />
       </Modal>
       <Menu
         withinPortal
@@ -44,11 +45,11 @@ export default function AppShelfMenu(props: any) {
           </ActionIcon>
         </Menu.Target>
         <Menu.Dropdown>
-          <Menu.Label>Settings</Menu.Label>
+          <Menu.Label>{t('menu.labels.settings')}</Menu.Label>
           <Menu.Item color={secondaryColor} icon={<Edit />} onClick={() => setOpened(true)}>
-            Edit
+            {t('menu.actions.edit')}
           </Menu.Item>
-          <Menu.Label>Danger zone</Menu.Label>
+          <Menu.Label>{t('menu.labels.dangerZone')}</Menu.Label>
           <Menu.Item
             color="red"
             onClick={(e: any) => {
@@ -70,7 +71,7 @@ export default function AppShelfMenu(props: any) {
             }}
             icon={<Trash />}
           >
-            Delete
+            {t('menu.actions.delete')}
           </Menu.Item>
         </Menu.Dropdown>
       </Menu>

src/components/Settings/AppCardWidthSelector.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import { Text, Slider, Stack } from '@mantine/core';
+import { useTranslation } from 'next-i18next';
 import { useConfig } from '../../tools/state';
 
 export function AppCardWidthSelector() {
   const { config, setConfig } = useConfig();
+  const { t } = useTranslation('settings/customization/app-width');
 
   const setappCardWidth = (appCardWidth: number) => {
     setConfig({
@@ -17,7 +19,7 @@ export function AppCardWidthSelector() {
 
   return (
     <Stack spacing="xs">
-      <Text>App Width</Text>
+      <Text>{t('label')}</Text>
       <Slider
         label={null}
         defaultValue={config.settings.appCardWidth}

src/components/Settings/CommonSettings.tsx

@@ -12,10 +12,7 @@ import LanguageSwitch from './LanguageSwitch';
 
 export default function CommonSettings(args: any) {
   const { config, setConfig } = useConfig();
-  const { t } = useTranslation([
+  const { t } = useTranslation(['settings/general/search-engine', 'settings/common']);
-    'settings/general/search-engine',
-    'settings/general/config-changer',
-  ]);
 
   const matches = [
     { label: 'Google', value: 'https://google.com/search?q=' },
@@ -84,7 +81,7 @@ export default function CommonSettings(args: any) {
       <LanguageSwitch />
       <ConfigChanger />
       <SaveConfigComponent />
-      <Tip>{t('configTip')}</Tip>
+      <Tip>{t('settings/common:tips.configTip')}</Tip>
     </Stack>
   );
 }

src/components/Settings/LanguageSwitch.tsx

@@ -4,29 +4,35 @@ import { IconLanguage } from '@tabler/icons';
 
 import { forwardRef, useState } from 'react';
 import { useTranslation } from 'next-i18next';
+import { useRouter } from 'next/router';
+import { getLanguageByCode, Language } from '../../languages/language';
 
 export default function LanguageSwitch() {
   const { t, i18n } = useTranslation('settings/general/internationalization');
-  /*const { language, languages, changeLanguage } = i18n;
+  const { changeLanguage } = i18n;
 
-  const [selectedLanguage, setSelectedLanguage] = useState<string | null>(language);
+  const { locale, locales } = useRouter();
+  const [selectedLanguage, setSelectedLanguage] = useState<string | null>(locale);
 
-  const data = languages.map((language) => ({
+  const data = locales
-    image: `https://countryflagsapi.com/png/${language.split('-').pop()}`,
+    ? locales.map((localeItem) => ({
-    label: 'JA',
+        value: localeItem,
-    value: language,
+        label: getLanguageByCode(localeItem).originalName,
-  }));*/
+        image: `imgs/flags/${localeItem}.png`,
+        language: getLanguageByCode(localeItem),
+      }))
+    : [];
 
   const onChangeSelect = (value: string) => {
-    //setSelectedLanguage(value);
+    setSelectedLanguage(value);
 
-    const languageName = 'JA IS HALZ SCHEISSE NE';
+    const newLanguage = getLanguageByCode(value);
 
-    /*changeLanguage(value)
+    changeLanguage(value)
       .then(() => {
         showNotification({
           title: 'Language changed',
-          message: `You changed the language to '${languageName}'`,
+          message: `You changed the language to '${newLanguage.originalName}'`,
           color: 'green',
           autoClose: 5000,
         });
@@ -34,31 +40,45 @@ export default function LanguageSwitch() {
       .catch((err) => {
         showNotification({
           title: 'Failed to change language',
-          message: `Failed to change to '${languageName}', Error:'${err}`,
+          message: `Failed to change to '${newLanguage.originalName}', Error:'${err}`,
           color: 'red',
           autoClose: 5000,
         });
-      });*/
+      });
   };
 
   return (
     <Stack>
       <Select
-        icon={<IconLanguage size={18} />}
+        icon={
+          <Image
+            width={30}
+            height={18}
+            src={`/imgs/flags/${selectedLanguage}.png`}
+            alt="country flag"
+            styles={{
+              root: {
+                borderRadius: 1.5,
+                overflow: 'hidden',
+              },
+            }}
+          />
+        }
         label={t('label')}
-        data={[
+        data={data}
-          {
-            value: 'uwu',
-            label: 'asdf',
-          },
-        ]}
         itemComponent={SelectItem}
         nothingFound="Nothing found"
         onChange={onChangeSelect}
-        /*
         value={selectedLanguage}
-        defaultValue={language}
+        defaultValue={locale}
-        */
+        styles={{
+          icon: {
+            width: 42,
+          },
+          input: {
+            paddingLeft: '45px !important',
+          },
+        }}
       />
     </Stack>
   );
@@ -66,17 +86,19 @@ export default function LanguageSwitch() {
 
 interface ItemProps extends React.ComponentPropsWithoutRef<'div'> {
   image: string;
-  label: string;
+  language: Language;
 }
 
 const SelectItem = forwardRef<HTMLDivElement, ItemProps>(
-  ({ image, label, ...others }: ItemProps, ref) => (
+  ({ language, image, ...others }: ItemProps, ref) => (
     <div ref={ref} {...others}>
       <Group noWrap>
         <Image src={image} width={30} height={20} radius="xs" />
 
         <div>
-          <Text size="sm">{label}</Text>
+          <Text size="sm">
+            {language.originalName} ({language.translatedName})
+          </Text>
         </div>
       </Group>
     </div>

src/components/layout/Tip.tsx

@@ -1,10 +1,13 @@
 import { Text } from '@mantine/core';
+import { useTranslation } from 'next-i18next';
 
 interface TipProps {
   children: React.ReactNode;
 }
 
 export default function Tip(props: TipProps) {
+  const { t } = useTranslation('common');
+
   return (
     <Text
       style={{
@@ -13,7 +16,8 @@ export default function Tip(props: TipProps) {
         marginBottom: '0.5rem',
       }}
     >
-      Tip: {props.children}
+      {t('tip')}
+      {props.children}
     </Text>
   );
 }

src/languages/language.ts

@@ -0,0 +1,27 @@
+export class Language {
+  shortName: string;
+  originalName: string;
+  translatedName: string;
+
+  constructor(shortName: string, originalName: string, translatedName: string) {
+    this.shortName = shortName;
+    this.originalName = originalName;
+    this.translatedName = translatedName;
+  }
+}
+
+const languages: Language[] = [
+  {
+    shortName: 'de',
+    originalName: 'Deutsch',
+    translatedName: 'German',
+  },
+  {
+    shortName: 'en',
+    originalName: 'English',
+    translatedName: 'English',
+  },
+];
+
+export const getLanguageByCode = (code: string | null) =>
+  languages.find((language) => language.shortName === code) ?? languages[-1];

src/modules/downloads/DownloadsModule.tsx

@@ -86,9 +86,9 @@ export default function DownloadComponent() {
   if (downloadServices.length === 0) {
     return (
       <Group>
-        <Title order={3}>No supported download clients found!</Title>
+        <Title order={3}>{t('card.errors.noDownloadClients.title')}</Title>
         <Group>
-          <Text>Add a download service to view your current downloads</Text>
+          <Text>{t('card.errors.noDownloadClients.text')}</Text>
           <AddItemShelfButton />
         </Group>
       </Group>

src/modules/downloads/TotalDownloadsModule.tsx

@@ -12,6 +12,7 @@ import { useConfig } from '../../tools/state';
 import { humanFileSize } from '../../tools/humanFileSize';
 import { IModule } from '../ModuleTypes';
 import { useSetSafeInterval } from '../../tools/hooks/useSetSafeInterval';
+import { useTranslation } from 'next-i18next';
 
 export const TotalDownloadsModule: IModule = {
   title: 'Download Speed',
@@ -36,6 +37,7 @@ export default function TotalDownloadsComponent() {
         service.type === 'Transmission' ||
         service.type === 'Deluge'
     ) ?? [];
+  const { t } = useTranslation('modules/downloads-module');
 
   const [torrentHistory, torrentHistoryHandlers] = useListState<torrentHistory>([]);
   const [torrents, setTorrents] = useState<NormalizedTorrent[]>([]);
@@ -80,14 +82,14 @@ export default function TotalDownloadsComponent() {
   if (downloadServices.length === 0) {
     return (
       <Group>
-        <Title order={4}>No supported download clients found!</Title>
+        <Title order={4}>{t('card.errors.noDownloadClients.title')}</Title>
         <div>
           <AddItemShelfButton
             style={{
               float: 'inline-end',
             }}
           />
-          Add a download service to view your current downloads
+          {t('card.errors.noDownloadClients.text')}
         </div>
       </Group>
     );

src/pages/index.tsx

@@ -32,6 +32,7 @@ export async function getServerSideProps({
     'common',
     'layout/app-shelf',
     'layout/add-service-app-shelf',
+    'layout/app-shelf-menu',
     'settings/common',
     'settings/general/theme-selector',
     'settings/general/config-changer',
@@ -42,6 +43,7 @@ export async function getServerSideProps({
     'settings/customization/color-selector',
     'settings/customization/page-appearance',
     'settings/customization/shade-selector',
+    'settings/customization/app-width',
     'modules/search-module',
     'modules/downloads-module',
     'modules/weather-module',