Add per-language translation support for custom nav links

Author: akanora

javascripts/discourse/initializers/init-nav-bar-additions.js

@@ -1,4 +1,25 @@
 import { withPluginApi } from "discourse/lib/plugin-api";
+import { i18n } from "discourse-i18n";
+import { themePrefix } from "virtual:theme";
+
+/**
+ * Resolve a localized field for a nav link.
+ * Looks up a translation key based on the link's display_name (e.g.
+ * "Latest" -> themePrefix("nav_links.latest.display_name")).
+ * Falls back to the raw settings value if no translation key exists.
+ */
+function getLocalizedField(link, fieldName) {
+  const key = link.display_name.replace(/\s+/g, "_").toLowerCase();
+  const translationKey = themePrefix(`nav_links.${key}.${fieldName}`);
+  const translated = i18n(translationKey);
+
+  // i18n returns the key path when no translation is found
+  if (translated !== translationKey) {
+    return translated;
+  }
+
+  return link[fieldName];
+}
 
 // Built-in Discourse filter routes that have associated topic counts
 const COUNTED_FILTERS = {
@@ -39,15 +60,14 @@ export default {
         "service:topic-tracking-state"
       );
 
-      for (const {
-        display_name: displayName,
-        title,
-        url,
-      } of settings.nav_links) {
+      for (const link of settings.nav_links) {
+        const { display_name: displayName, url } = link;
+        const localizedDisplayName = getLocalizedField(link, "display_name");
+        const localizedTitle = getLocalizedField(link, "title");
         const filterType = COUNTED_FILTERS[url];
         const itemConfig = {
           name: `custom_${displayName.replace(/\s+/g, "-").toLowerCase()}`,
-          title,
+          title: localizedTitle,
           href: url,
           forceActive: (category, args, router) =>
             router.currentURL?.split("?")[0] === url,
@@ -58,10 +78,12 @@ export default {
           // reactively, picking up count changes from TopicTrackingState
           itemConfig.displayName = () => {
             const count = getCountForFilter(topicTrackingState, filterType);
-            return count > 0 ? `${displayName} (${count})` : displayName;
+            return count > 0
+              ? `${localizedDisplayName} (${count})`
+              : localizedDisplayName;
           };
         } else {
-          itemConfig.displayName = displayName;
+          itemConfig.displayName = localizedDisplayName;
         }
 
         api.addNavigationBarItem(itemConfig);

locales/en.yml

@@ -14,3 +14,13 @@ en:
             url:
               label: URL
               description: The link (e.g., /latest or https://discourse.org)
+  nav_links:
+    latest:
+      display_name: Latest
+      title: topics with recent posts
+    categories:
+      display_name: Categories
+      title: all topics grouped by category
+    top:
+      display_name: Top
+      title: the most active topics in the last year, month, week or day