From 33be521deebe38d0eb45ace6c66b0c4b94d3285e Mon Sep 17 00:00:00 2001
From: Joseph Myers <wjosephmyers@gmail.com>
Date: Thu, 19 Dec 2024 10:20:34 +0700
Subject: [PATCH] Move localization button into the user menu

---
 .../ClientApp/src/app/app.component.html      | 35 ++++++++++---------
 .../ClientApp/src/app/app.component.spec.ts   |  1 +
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/app.component.html b/src/SIL.XForge.Scripture/ClientApp/src/app/app.component.html
index 8a2fd4ac729..0415350ee7d 100644
--- a/src/SIL.XForge.Scripture/ClientApp/src/app/app.component.html
+++ b/src/SIL.XForge.Scripture/ClientApp/src/app/app.component.html
@@ -32,23 +32,6 @@
           </span>
         }
         <span class="toolbar-spacer"></span>
-        @if (isAppOnline) {
-          <button mat-icon-button [title]="t('language')" [matMenuTriggerFor]="localeMenu">
-            <mat-icon>translate</mat-icon>
-          </button>
-        }
-        <mat-menu #localeMenu="matMenu" class="locale-menu">
-          @for (locale of i18n.locales; track locale.canonicalTag) {
-            <button
-              mat-menu-item
-              [class.active-locale]="locale.canonicalTag === i18n.localeCode"
-              (click)="setLocale(locale.canonicalTag)"
-            >
-              <mat-icon>check</mat-icon>
-              <span [class.locale-disabled]="!locale.production">{{ locale.localName }}</span>
-            </button>
-          }
-        </mat-menu>
 
         <button mat-icon-button [title]="t('help')" [matMenuTriggerFor]="helpMenu">
           <mat-icon class="mirror-rtl">help</mat-icon>
@@ -157,6 +140,11 @@
               <div class="install-button"><mat-icon>install_mobile</mat-icon> {{ t("install_on_device") }}</div>
             </button>
           }
+          @if (isAppOnline) {
+            <button mat-menu-item [matMenuTriggerFor]="localeMenu">
+              <mat-icon>translate</mat-icon> {{ i18n.locale.localName }}
+            </button>
+          }
           <button mat-menu-item (click)="logOut()" id="log-out-link">
             <mat-icon>logout</mat-icon> {{ t("log_out") }}
           </button>
@@ -171,6 +159,19 @@
             }
           </div>
         </mat-menu>
+
+        <mat-menu #localeMenu="matMenu" class="locale-menu">
+          @for (locale of i18n.locales; track locale.canonicalTag) {
+            <button
+              mat-menu-item
+              [class.active-locale]="locale.canonicalTag === i18n.localeCode"
+              (click)="setLocale(locale.canonicalTag)"
+            >
+              <mat-icon>check</mat-icon>
+              <span [class.locale-disabled]="!locale.production">{{ locale.localName }}</span>
+            </button>
+          }
+        </mat-menu>
       </mat-toolbar-row>
       @if (hasUpdate) {
         <mat-toolbar-row class="update-banner">
diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/app.component.spec.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/app.component.spec.ts
index bb91b11d071..59ce4257353 100644
--- a/src/SIL.XForge.Scripture/ClientApp/src/app/app.component.spec.ts
+++ b/src/SIL.XForge.Scripture/ClientApp/src/app/app.component.spec.ts
@@ -699,6 +699,7 @@ class TestEnvironment {
     when(mockedNmtDraftAuthGuard.allowTransition(anything())).thenReturn(this.canSeeGenerateDraft$);
     when(mockedUsersAuthGuard.allowTransition(anything())).thenReturn(this.canSeeUsers$);
     when(mockedI18nService.localeCode).thenReturn('en');
+    when(mockedI18nService.locale).thenReturn({} as any);
     when(mockedUrlService.helps).thenReturn('helps');
     when(mockedUrlService.announcementPage).thenReturn('community-announcements');
     when(mockedUrlService.communitySupport).thenReturn('community-support');