Fix translation worker lock and project page (#1127)

* fix(content-translation-worker): lock work rows

Restrict the claim query's SKIP LOCKED row lock to content_translation_work so PostgreSQL does not try to lock the nullable conversation side of the outer join. This preserves concurrent worker claim behavior while avoiding the production FOR UPDATE outer-join error.

Add a regression test that compiles the claim query with the PostgreSQL dialect and asserts the generated SQL uses FOR UPDATE OF content_translation_work SKIP LOCKED.

Deploy: content-translation-worker

* fix(agora): hide project activity range

Remove the visible activity range label from project pages while keeping the existing infinite-scroll list and completion state intact.

Also remove the unused activityCount prop, list-progress styles, and obsolete project page translation entries so the component API matches the rendered UI.

Deploy: agora

* fix(agora): wait for auth on project page

Ensure the project page does not fetch until frontend authentication state has initialized. This lets the backend resolve the participant's stored project display language before returning localized project activity card content, instead of issuing an early unauthenticated request that can fall back to the wrong language. The conversation page flow is unchanged.\n\nDeploy: agora

* fix(agora): render plain text literally

ZKPlainTextContent was routing plain text through the rich HTML renderer by escaping it into HTML, then sanitizing and rendering it with v-html. That made the component behavior confusing and left linkification/newline handling available on something named plain text.

Render plain text directly through Vue interpolation instead. This keeps HTML markup as literal text, removes the unused enableLinks prop from the plain-text component API, updates the two project page callers, and deletes the now-dead plainTextToSafeHtml helper and its tests.

Deploy: agora

* fix(agora): show project participants

Always render the project header participant count so it matches the votes and activities stats.

Deploy: agora

Author: nicobao

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

@@ -33,7 +33,6 @@
         class="activity-card__body"
         :plain-text="activity.bodyPlainText"
         :compact-mode="true"
-        :enable-links="false"
         :compact-line-count="3"
       />
 

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

@@ -63,13 +63,12 @@
             class="project-page-view__body"
             :plain-text="project.bodyPlainText"
             :compact-mode="false"
-            :enable-links="true"
             :collapsed-line-count="4"
             :desktop-collapsed-line-count="4"
           />
 
           <div class="project-page-view__stats">
-            <span v-if="project.participantCount >= 2">
+            <span>
               <q-icon name="mdi-account-outline" size="1rem" />
               {{
                 t("participantsJoined", {
@@ -110,18 +109,6 @@
                   {{ t("activitiesTitle") }}
                 </h2>
               </div>
-
-              <span
-                v-if="activities.length > 0"
-                class="project-page-view__list-progress"
-              >
-                {{
-                  t("showingActivities", {
-                    visible: formatNumber(activities.length),
-                    total: formatNumber(activityCount),
-                  })
-                }}
-              </span>
             </div>
 
             <q-infinite-scroll
@@ -250,7 +237,6 @@ type ConsultationStatus = "none" | "live" | "closed";
 const props = defineProps<{
   project: ProjectPageData;
   activities: readonly ProjectActivity[];
-  activityCount: number;
   canLoadMoreActivities: boolean;
   isLoadingMoreActivities: boolean;
   languageOptions: readonly ProjectLanguageOption[];
@@ -560,20 +546,9 @@ h1 {
 }
 
 .project-page-view__section-heading {
-  display: flex;
-  align-items: end;
-  justify-content: space-between;
-  gap: 1rem;
   margin-bottom: 1rem;
 }
 
-.project-page-view__list-progress {
-  color: $ink-light;
-  font-size: 0.85rem;
-  font-weight: var(--font-weight-semibold);
-  white-space: nowrap;
-}
-
 h2 {
   margin: 0.25rem 0 0;
   color: $ink-darkest;

services/agora/src/components/project/projectPageI18n.ts

@@ -15,7 +15,6 @@ export interface ProjectPageTranslations {
   activitiesCount: string;
   votesCount: string;
   activitiesTitle: string;
-  showingActivities: string;
   emptyActivities: string;
   allActivitiesLoaded: string;
   projectDetailsAriaLabel: string;
@@ -62,7 +61,6 @@ export const projectPageTranslations: Readonly<
     activitiesCount: "{count} activities",
     votesCount: "{count} votes",
     activitiesTitle: "Activities",
-    showingActivities: "Showing {visible} of {total}",
     emptyActivities: "No activities have been published yet.",
     allActivitiesLoaded: "All activities loaded",
     projectDetailsAriaLabel: "Project details",
@@ -104,7 +102,6 @@ export const projectPageTranslations: Readonly<
     activitiesCount: "{count} иш-чара",
     votesCount: "{count} добуш",
     activitiesTitle: "Иш-чаралар",
-    showingActivities: "{visible} / {total} көрсөтүлүүдө",
     emptyActivities: "Азырынча иш-чаралар жарыялана элек.",
     allActivitiesLoaded: "Бардык иш-чаралар жүктөлдү",
     projectDetailsAriaLabel: "Долбоор тууралуу маалымат",
@@ -145,7 +142,6 @@ export const projectPageTranslations: Readonly<
     activitiesCount: "{count} активности",
     votesCount: "{count} голосов",
     activitiesTitle: "Активности",
-    showingActivities: "Показано {visible} из {total}",
     emptyActivities: "Активности пока не опубликованы.",
     allActivitiesLoaded: "Все активности загружены",
     projectDetailsAriaLabel: "Информация о проекте",

services/agora/src/components/ui-library/ZKPlainTextContent.vue

@@ -1,29 +1,27 @@
 <template>
-  <ZKHtmlContent
-    :html-body="htmlBody"
+  <ZKContentDisclosure
     :compact-mode="compactMode"
-    :enable-links="enableLinks"
-    :content-role="contentRole"
-    :collapsible="collapsible"
+    :disclosure-enabled="isDisclosureEnabled"
     :collapsed-line-count="collapsedLineCount"
     :desktop-collapsed-line-count="desktopCollapsedLineCount"
     :compact-line-count="compactLineCount"
-  />
+    :refresh-key="plainText"
+  >
+    {{ plainText }}
+  </ZKContentDisclosure>
 </template>
 
 <script setup lang="ts">
-import { plainTextToSafeHtml } from "src/utils/html/plainText";
 import { computed } from "vue";
 
-import ZKHtmlContent from "./ZKHtmlContent.vue";
+import ZKContentDisclosure from "./ZKContentDisclosure.vue";
 
 type PlainTextContentRole = "body" | "title";
 
 const props = withDefaults(
   defineProps<{
     plainText: string;
     compactMode: boolean;
-    enableLinks: boolean;
     contentRole?: PlainTextContentRole;
     collapsible?: boolean;
     collapsedLineCount?: number;
@@ -39,7 +37,7 @@ const props = withDefaults(
   }
 );
 
-const htmlBody = computed(() =>
-  plainTextToSafeHtml({ plainText: props.plainText })
+const isDisclosureEnabled = computed(
+  () => props.collapsible && props.contentRole === "body" && !props.compactMode
 );
 </script>

services/agora/src/pages/dev/project-page.vue

@@ -77,7 +77,6 @@
       v-model:selected-language="selectedLanguage"
       :project="project"
       :activities="activities"
-      :activity-count="activities.length"
       :can-load-more-activities="false"
       :is-loading-more-activities="false"
       :language-options="languageOptions"

services/agora/src/pages/project/[projectSlug].vue

@@ -13,7 +13,6 @@
     v-model:selected-language="selectedLanguage"
     :project="projectPageData.project"
     :activities="activities"
-    :activity-count="projectPageData.project.activityCount"
     :can-load-more-activities="nextActivityCursor !== undefined"
     :is-loading-more-activities="isLoadingMoreActivities"
     :language-options="projectPageData.languageOptions"
@@ -47,7 +46,9 @@ const activityPageSize = 12;
 const route = useRoute();
 const { fetchProjectPage, fetchProjectPageActivities, updateProjectPageDisplayLanguage } =
   useBackendProjectPageApi();
-const { isGuestOrLoggedIn } = storeToRefs(useAuthenticationStore());
+const { isAuthInitialized, isGuestOrLoggedIn } = storeToRefs(
+  useAuthenticationStore()
+);
 
 const projectSlug = computed(() => getSingleRouteParam(route.params.projectSlug));
 const selectedLanguage = ref<string | readonly string[]>("");
@@ -85,7 +86,7 @@ const projectPageQuery = useQuery({
       },
       authenticated: isGuestOrLoggedIn.value,
     }),
-  enabled: computed(() => projectSlug.value !== ""),
+  enabled: computed(() => projectSlug.value !== "" && isAuthInitialized.value),
   retry: false,
 });
 const projectPageData = computed(() => projectPageQuery.data.value);

services/agora/src/utils/html/plainText.test.ts

@@ -442,7 +442,7 @@ def claim_content_translation_work_batch(
             ContentTranslationWork.id.asc(),
         )
         .limit(batch_size)
-        .with_for_update(skip_locked=True)
+        .with_for_update(of=ContentTranslationWork, skip_locked=True)
     )
 
     claims: list[ClaimedContentTranslationWork] = []

services/agora/src/utils/html/plainText.ts

@@ -0,0 +1,26 @@
+from __future__ import annotations
+
+from unittest.mock import create_autospec
+
+from sqlalchemy.dialects.postgresql import dialect as postgresql_dialect
+from sqlalchemy.orm import Session
+
+from content_translation_worker.db import claim_content_translation_work_batch
+
+
+def test_claim_query_locks_only_content_translation_work() -> None:
+    session = create_autospec(Session, instance=True)
+    session.execute.return_value = []
+
+    claim_content_translation_work_batch(
+        session,
+        worker_id="worker-1",
+        work_ids=None,
+        batch_size=10,
+        lease_ttl_seconds=30,
+    )
+
+    statement = session.execute.call_args.args[0]
+    sql = str(statement.compile(dialect=postgresql_dialect()))
+
+    assert "FOR UPDATE OF content_translation_work SKIP LOCKED" in sql