fix(agora): clean up translation controls (#1136)

Shorten translated-content labels across locales and localize source language names in project content controls.

Use the global display language as the single frontend source of truth for project language selection, removing duplicated selected-language watch state on project routes.

Prevent stale conversation display-content query data from making the translation toggle appear stuck when switching between original and translated content.

Normalize nullish source-language values to undefined internally by broadening toUnionUndefined, while preserving backend DTO boundaries.

Tighten project conversation mobile layout to match the battle-tested normal conversation width when the sidebar is hidden.

Deploy: agora

Author: nicobao

services/agora/src/components/project/ProjectActivityCard.vue

@@ -96,11 +96,16 @@ import { storeToRefs } from "pinia";
 import ContentTranslationControl from "src/components/translation/ContentTranslationControl.vue";
 import SpaLink from "src/components/ui-library/SpaLink.vue";
 import ZKPlainTextContent from "src/components/ui-library/ZKPlainTextContent.vue";
-import type { LanguageTextDirection } from "src/shared/languages";
+import type {
+  LanguageTextDirection,
+  SupportedDisplayLanguageCodes,
+} from "src/shared/languages";
+import { toUnionUndefined } from "src/shared/shared";
 import type { LocalizedContentTranslationStatus } from "src/shared/types/zod";
 import { useLanguageStore } from "src/stores/language";
 import {
   type ContentTranslationDisplayMode,
+  getContentTranslationSourceLanguageLabel,
   resolveContentTranslationState,
 } from "src/utils/translation/contentTranslation";
 import { computed, ref, watch } from "vue";
@@ -118,7 +123,7 @@ import type {
 const props = defineProps<{
   activity: ProjectActivity;
   projectSlug: string;
-  languageCode: string;
+  languageCode: SupportedDisplayLanguageCodes;
   textDirection: LanguageTextDirection;
 }>();
 
@@ -177,7 +182,7 @@ const activityTranslationInitialMode = computed<ContentTranslationDisplayMode>(
 
     return resolveContentTranslationState({
       dynamicTranslationEnabled: true,
-      sourceLanguageCode: machineTranslation.sourceLanguageCode,
+      sourceLanguageCode: toUnionUndefined(machineTranslation.sourceLanguageCode),
       displayLanguage: machineTranslation.targetLanguageCode,
       spokenLanguages: spokenLanguages.value,
       supportedTargetLanguageCodes: [machineTranslation.targetLanguageCode],
@@ -215,7 +220,12 @@ const activityTranslationControl = computed<
   }
 
   return {
-    sourceLanguageLabel: machineTranslation.sourceLanguageLabel,
+    sourceLanguageLabel: getContentTranslationSourceLanguageLabel({
+      sourceLanguage: undefined,
+      fallbackLanguageCode: machineTranslation.sourceLanguageCode,
+      fallbackLabel: machineTranslation.sourceLanguageLabel,
+      displayLanguage: machineTranslation.targetLanguageCode,
+    }),
     status: machineTranslation.status,
   };
 });

services/agora/src/components/project/ProjectConversationView.vue

@@ -249,17 +249,17 @@
               <ProjectAttributionSection
                 :title="t('sponsorsTitle')"
                 :entries="sponsorAttributions"
-                :language-code="selectedLanguageValue"
+                :language-code="selectedLanguage"
               />
               <ProjectAttributionSection
                 :title="t('projectOwnersTitle')"
                 :entries="projectOwnerAttributions"
-                :language-code="selectedLanguageValue"
+                :language-code="selectedLanguage"
               />
               <ProjectAttributionSection
                 :title="t('partnersTitle')"
                 :entries="partnerAttributions"
-                :language-code="selectedLanguageValue"
+                :language-code="selectedLanguage"
               />
             </section>
 
@@ -272,14 +272,14 @@
               </h2>
               <ProjectContactCard
                 :contact="project.contact"
-                :language-code="selectedLanguageValue"
+                :language-code="selectedLanguage"
               />
             </section>
           </aside>
 
           <ProjectPageFooter
             class="project-conversation-view__footer"
-            :language-code="selectedLanguageValue"
+            :language-code="selectedLanguage"
           />
         </div>
       </div>
@@ -290,17 +290,17 @@
         <ProjectAttributionSection
           :title="t('sponsorsTitle')"
           :entries="sponsorAttributions"
-          :language-code="selectedLanguageValue"
+          :language-code="selectedLanguage"
         />
         <ProjectAttributionSection
           :title="t('projectOwnersTitle')"
           :entries="projectOwnerAttributions"
-          :language-code="selectedLanguageValue"
+          :language-code="selectedLanguage"
         />
         <ProjectAttributionSection
           :title="t('partnersTitle')"
           :entries="partnerAttributions"
-          :language-code="selectedLanguageValue"
+          :language-code="selectedLanguage"
         />
       </ZKBottomDialogContainer>
     </q-dialog>
@@ -328,6 +328,7 @@ import ZKLiveStatusDot from "src/components/ui-library/ZKLiveStatusDot.vue";
 import {
   getLanguageTextDirection,
   parseSupportedDisplayLanguageOrUndefined,
+  type SupportedDisplayLanguageCodes,
 } from "src/shared/languages";
 import type {
   ExtendedConversation,
@@ -362,7 +363,6 @@ const props = defineProps<{
   project: ProjectPageData;
   conversationData: ExtendedConversation;
   languageOptions: readonly ProjectLanguageOption[];
-  initialLanguage: string;
   bannerImageUrl?: string;
   reportLayout?: boolean;
 }>();
@@ -371,26 +371,17 @@ const emit = defineEmits<{
   conversationDeleted: [];
 }>();
 
-const selectedLanguage = defineModel<string | readonly string[]>(
+const selectedLanguage = defineModel<SupportedDisplayLanguageCodes>(
   "selectedLanguage",
-  {
-    required: true,
-  }
+  { required: true }
 );
 const showMobileAttributions = ref(false);
 
-const selectedLanguageValue = computed(() => {
-  if (Array.isArray(selectedLanguage.value)) {
-    return selectedLanguage.value.at(0) ?? props.initialLanguage;
-  }
-
-  return selectedLanguage.value;
-});
 const projectTextDirection = computed(() =>
-  getLanguageTextDirection(selectedLanguageValue.value)
+  getLanguageTextDirection(selectedLanguage.value)
 );
 const selectedSupportedLanguage = computed(
-  () => parseSupportedDisplayLanguageOrUndefined(selectedLanguageValue.value) ?? "en"
+  () => parseSupportedDisplayLanguageOrUndefined(selectedLanguage.value) ?? "en"
 );
 const conversationTitleText = computed<ConversationTitleTranslations>(
   () => conversationTitleTranslations[selectedSupportedLanguage.value]
@@ -535,7 +526,7 @@ function t(
   params?: Readonly<Record<string, string | number>>
 ): string {
   return translateProjectPageText({
-    languageCode: selectedLanguageValue.value,
+    languageCode: selectedLanguage.value,
     key,
     params,
   });
@@ -952,12 +943,17 @@ main {
 }
 
 @media (max-width: 860px) {
+  .project-conversation-view__shell {
+    width: min(35.9375rem, 100%);
+  }
+
   .project-conversation-view__content-grid {
     grid-template-columns: 1fr;
     grid-template-areas:
       "title"
       "stream"
       "footer";
+    padding-inline: 1rem;
   }
 
   .project-conversation-view__aside {
@@ -1001,10 +997,6 @@ main {
     font-size: 0.78rem;
   }
 
-  .project-conversation-view__shell {
-    width: calc(100% - 1rem);
-  }
-
   .project-conversation-view__conversation-card {
     margin-top: -1.65rem;
     border-radius: 20px;

services/agora/src/components/project/ProjectLanguageSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <ZKSearchableBottomSheetSelect
-    v-model="selectedLanguage"
+    :model-value="selectedLanguage"
     variant="pill"
     :label="t('languageLabel')"
     :dialog-title="t('languageDialogTitle')"
@@ -9,12 +9,16 @@
     search-mode="always"
     :options="displayLanguageOptions"
     :text-direction="textDirection"
+    @update:model-value="updateSelectedLanguage"
   />
 </template>
 
 <script setup lang="ts">
 import ZKSearchableBottomSheetSelect from "src/components/ui-library/ZKSearchableBottomSheetSelect.vue";
-import type { LanguageTextDirection } from "src/shared/languages";
+import type {
+  LanguageTextDirection,
+  SupportedDisplayLanguageCodes,
+} from "src/shared/languages";
 import { computed } from "vue";
 
 import {
@@ -28,20 +32,14 @@ const props = defineProps<{
   textDirection: LanguageTextDirection;
 }>();
 
-const selectedLanguage = defineModel<string | readonly string[]>(
+const selectedLanguage = defineModel<SupportedDisplayLanguageCodes>(
   "selectedLanguage",
-  {
-    required: true,
-  }
+  { required: true }
 );
 
-const selectedLanguageValue = computed(() => {
-  if (Array.isArray(selectedLanguage.value)) {
-    return selectedLanguage.value.at(0) ?? "en";
-  }
-
-  return selectedLanguage.value;
-});
+type SelectLanguageModelValue =
+  | SupportedDisplayLanguageCodes
+  | readonly SupportedDisplayLanguageCodes[];
 
 const displayLanguageOptions = computed<readonly ProjectLanguageOption[]>(
   () => {
@@ -76,8 +74,14 @@ function toDisplayLanguageOption(
 
 function t(key: keyof ProjectPageTranslations): string {
   return translateProjectPageText({
-    languageCode: selectedLanguageValue.value,
+    languageCode: selectedLanguage.value,
     key,
   });
 }
+
+function updateSelectedLanguage(value: SelectLanguageModelValue): void {
+  selectedLanguage.value = Array.isArray(value)
+    ? value.at(0) ?? selectedLanguage.value
+    : value;
+}
 </script>