feat: add language selector component to homepage with dropdown functionality

Author: anshg1214

root/static/images/homepage/language-icon.svg

@@ -0,0 +1,93 @@
+/*
+ * @flow strict
+ * Copyright (C) 2025 MetaBrainz Foundation
+ *
+ * This file is part of MusicBrainz, the open internet music database,
+ * and is licensed under the GPL version 2, or (at your option) any
+ * later version: http://www.gnu.org/licenses/gpl-2.0.txt
+ */
+
+
+import * as React from "react";
+import languageIcon from '../../images/homepage/language-icon.svg';
+import { SanitizedCatalystContext } from '../../../context.mjs';
+import { returnToCurrentPage } from '../../../utility/returnUri.js';
+import { capitalize } from '../common/utility/strings.js';
+
+function languageName(
+  language: ?ServerLanguageT,
+  selected: boolean,
+) {
+  if (!language) {
+    return '';
+  }
+
+  const {
+    id,
+    native_language: nativeLanguage,
+    native_territory: nativeTerritory,
+  } = language;
+
+  let text = `[${id}]`;
+
+  if (nativeLanguage) {
+    text = capitalize(nativeLanguage);
+
+    if (nativeTerritory) {
+      text += ' (' + capitalize(nativeTerritory) + ')';
+    }
+  }
+
+  if (selected) {
+    text += ' \u25be';
+  }
+
+  return text;
+}
+
+component LanguageSelector() {
+  const $c = React.useContext(SanitizedCatalystContext);
+  const serverLanguages = $c.stash.server_languages;
+  const currentLanguage = $c.stash.current_language.replace('_', '-');
+
+  return (
+    <>
+      <a
+        className="dropdown-toggle align-items-center dropdown-toggle-no-caret"
+        href="#"
+        role="button"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+      >
+        <img src={languageIcon} alt="Language" width={40} height={40} />
+      </a>
+      <ul className="dropdown-menu">
+        {serverLanguages?.map((language) => {
+          const isSelected = language.name === currentLanguage;
+          return (
+            <li key={language.name}>
+              <a
+                href={`/set-language/${encodeURIComponent(language.name)}?${returnToCurrentPage($c)}`}
+                className={`dropdown-item ${isSelected ? 'active' : ''}`}
+              >
+                {languageName(language, isSelected)}
+              </a>
+            </li>
+          );
+        })}
+        <li>
+          <a href={`/set-language/unset?${returnToCurrentPage($c)}`} className="dropdown-item">{l('(reset language)')}</a>
+        </li>
+        <li className="dropdown-divider" />
+        <li>
+          <a href="https://translations.metabrainz.org/projects/musicbrainz/" className="dropdown-item">{l('Help translate')}</a>
+        </li>
+      </ul>
+    </>
+  )
+}
+
+export default (hydrate < React.PropsOf < LanguageSelector >> (
+  'div',
+  LanguageSelector,
+): component(...React.PropsOf < LanguageSelector >));

root/static/scripts/homepage/language.js

@@ -18,6 +18,7 @@ import magnifyingGlass from '../../images/icons/magnifying-glass.svg';
 import magnifyingGlassTheme from '../../images/icons/magnifying-glass-theme.svg';
 import advancedSearchIcon from '../../images/homepage/advanced_search.svg';
 import MobileSearchPopup from './mobile-search-popup.js';
+import LanguageSelector from './language.js';
 
 const aboutGroups = [
   [
@@ -106,7 +107,7 @@ component DropDownMenu(
   groups: DropdownMenuItem[][],
 ) {
   return (
-    <li className="nav-item dropdown">
+    <li className="nav-item dropdown d-flex align-items-center">
       <a
         className="nav-link dropdown-toggle"
         href="#"
@@ -252,7 +253,13 @@ component Navbar() {
               {Object.keys(dropdownSections).map((section) => (
                 <DropDownMenu key={section} label={section} groups={dropdownSections[section]} />
               ))}
+
+              {/* Language Selector */}
+              <li className="nav-item dropdown d-flex">
+                <LanguageSelector />
+              </li>
             </ul>
+
             <form className="d-none d-lg-flex mt-3 mt-lg-0" role="search" action="/search" method="get">
               <div className="input-group">
                 <input