support comment translations

Author: ballPointPenguin

client-participation-alpha/TODO.md

@@ -11,7 +11,8 @@
 - [x] Extract svg markup into components
 - [x] Break up PCA visualization into smaller components
 - [x] Validate a11y
-- [ ] Validate translations
+- [ ] Validate custom translations
+- [ ] Validate 3rd party translations
 - [ ] Validate mobile layout
 - [ ] Validate Embeds
 - [ ] Unit tests

client-participation-alpha/src/api/comments.ts

@@ -1,3 +1,4 @@
+import { uiLanguage } from '../lib/lang'
 import PolisNet from '../lib/net'
 import type { Comment, NextCommentResponse } from './types'
 
@@ -27,8 +28,10 @@ export async function fetchNextComment(
     conversation_id: conversationId
   }
 
-  if (lang !== undefined) {
-    params.lang = lang
+  // Auto-detect language only if not provided (undefined)
+  const detectedLang = lang !== undefined ? lang : uiLanguage()
+  if (detectedLang) {
+    params.lang = detectedLang
   }
 
   return await PolisNet.polisGet<NextCommentResponse>('/nextComment', params)
@@ -38,7 +41,6 @@ export async function submitComment(payload: {
   conversation_id: string
   txt: string
   pid: number
-  lang?: string
   is_seed?: boolean
   vote?: number
   agid?: number

client-participation-alpha/src/api/participation.ts

@@ -1,18 +1,23 @@
+import { uiLanguage } from '../lib/lang'
 import PolisNet from '../lib/net'
 import type { ParticipationInitData } from './types'
 
 export async function fetchParticipationInit(
   conversationId: string,
   options: {
     includePCA?: boolean
+    lang?: string
     xid?: string
     x_name?: string
     x_profile_image_url?: string
   } = {}
 ): Promise<ParticipationInitData> {
+  // Auto-detect language only if not provided (undefined)
+  const lang = options.lang !== undefined ? options.lang : uiLanguage()
   const params: Record<string, string | boolean | undefined> = {
     conversation_id: conversationId,
     includePCA: options.includePCA,
+    ...(lang && { lang }),
     xid: options.xid,
     x_name: options.x_name,
     x_profile_image_url: options.x_profile_image_url

client-participation-alpha/src/api/types.ts

@@ -124,10 +124,21 @@ export interface ParticipationInitData {
     tid: number
     txt: string
     remaining?: number
+    lang?: string
+    translations?: {
+      zid: number
+      tid: number
+      src: number
+      txt: string
+      lang: string
+      created: string
+      modified: string
+    }[]
   }
   auth?: {
     token?: string
   }
+  acceptLanguage?: string
   [key: string]: unknown
 }
 

client-participation-alpha/src/api/votes.ts

@@ -1,14 +1,22 @@
 import type { VoteResponse } from '../components/types'
+import { uiLanguage } from '../lib/lang'
 import PolisNet from '../lib/net'
 
 export async function submitVote(payload: {
   agid: number
   conversation_id: string
   high_priority?: boolean
-  lang: string
+  lang?: string
   pid: number
   tid: number | string
   vote: number
 }): Promise<VoteResponse> {
-  return await PolisNet.polisPost<VoteResponse>('/votes', payload)
+  // Auto-detect language only if not provided (undefined)
+  // If lang is null or blank, don't auto-detect
+  const lang = payload.lang !== undefined ? payload.lang : uiLanguage()
+  const finalPayload = {
+    ...payload,
+    ...(lang && { lang })
+  }
+  return await PolisNet.polisPost<VoteResponse>('/votes', finalPayload)
 }

client-participation-alpha/src/components/Statement.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import { uiLanguage } from '../lib/lang'
 import type { Translations } from '../strings/types'
 import InfoIcon from './icons/InfoIcon'
 import type { StatementData } from './types'
@@ -23,6 +24,59 @@ export function Statement({
   voteError
 }: StatementProps) {
   const [showImportanceDesc, setShowImportanceDesc] = useState<boolean>(false)
+  const [translationsEnabled, setTranslationsEnabled] = useState<boolean>(false)
+
+  // Get current user language
+  const currentLang = uiLanguage()
+  const statementLang = statement.lang
+  const langMismatch = statementLang && currentLang && statementLang !== currentLang
+
+  // Find matching translation if translations array exists
+  const matchingTranslation = statement.translations?.find((t) => t.lang === currentLang)
+
+  // Determine if we have an official translation (src > 0)
+  const hasOfficialTranslation = langMismatch && matchingTranslation && matchingTranslation.src > 0
+
+  // Determine if we have a non-official translation (src <= 0)
+  const hasNonOfficialTranslation =
+    langMismatch && matchingTranslation && matchingTranslation.src <= 0
+
+  // Show translation button only if:
+  // - Translations not enabled
+  // - Language mismatch exists
+  // - NOT official translation
+  // - AND (no translation exists OR translation is non-official)
+  const shouldShowTranslationButton =
+    !translationsEnabled &&
+    langMismatch &&
+    !hasOfficialTranslation &&
+    (!matchingTranslation || hasNonOfficialTranslation)
+
+  // Show hide button only if:
+  // - Translations enabled
+  // - AND (we have a non-official translation OR no translations array)
+  const shouldShowHideButton =
+    translationsEnabled && (hasNonOfficialTranslation || !statement.translations)
+
+  // Debug logging
+  if (
+    typeof window !== 'undefined' &&
+    statement.translations &&
+    statement.translations.length > 0
+  ) {
+    console.log('[Translation Debug]', {
+      currentLang,
+      statementLang,
+      langMismatch,
+      matchingTranslation,
+      hasOfficialTranslation,
+      hasNonOfficialTranslation,
+      shouldShowTranslationButton,
+      shouldShowHideButton,
+      translationsEnabled,
+      translations: statement.translations
+    })
+  }
 
   const handleVoteClick = (voteType: number) => {
     if (isVoting) return
@@ -54,7 +108,72 @@ export function Statement({
           </span>
         )}
       </div>
-      <p className="statement-text">{statement.txt}</p>
+
+      {/* Show official translation (replaces original) or original text */}
+      {hasOfficialTranslation ? (
+        <p className="statement-text">{matchingTranslation.txt}</p>
+      ) : (
+        <p className="statement-text">{statement.txt}</p>
+      )}
+
+      {/* Show translation buttons only if not using official translation */}
+      {!hasOfficialTranslation && shouldShowTranslationButton && (
+        <button
+          className="translation-button"
+          onClick={() => {
+            // No-op for now
+            setTranslationsEnabled(true)
+          }}
+          style={{
+            marginTop: '0.5rem',
+            padding: '0.5rem 1rem',
+            fontSize: '0.875rem',
+            backgroundColor: 'transparent',
+            border: '1px solid var(--color-border, #ccc)',
+            borderRadius: '4px',
+            cursor: 'pointer',
+            color: 'var(--color-text, #333)'
+          }}
+        >
+          {s.showTranslationButton}
+        </button>
+      )}
+
+      {!hasOfficialTranslation && shouldShowHideButton && (
+        <button
+          className="translation-button"
+          onClick={() => {
+            // No-op for now
+            setTranslationsEnabled(false)
+          }}
+          style={{
+            marginTop: '0.5rem',
+            padding: '0.5rem 1rem',
+            fontSize: '0.875rem',
+            backgroundColor: 'transparent',
+            border: '1px solid var(--color-border, #ccc)',
+            borderRadius: '4px',
+            cursor: 'pointer',
+            color: 'var(--color-text, #333)'
+          }}
+        >
+          {s.hideTranslationButton}
+        </button>
+      )}
+
+      {/* Show non-official translation below original text when enabled */}
+      {hasNonOfficialTranslation && translationsEnabled && (
+        <p
+          className="statement-text"
+          style={{
+            marginTop: '0.5rem',
+            fontStyle: 'italic',
+            color: 'var(--color-text-secondary, #666)'
+          }}
+        >
+          {matchingTranslation.txt}
+        </p>
+      )}
 
       <div className="importance-container">
         <label htmlFor="important">{s.importantCheckbox}</label>

client-participation-alpha/src/components/Survey.tsx

@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react'
 import { fetchNextComment } from '../api/comments'
 import { submitVote } from '../api/votes'
 import { getConversationToken } from '../lib/auth'
-import { getPreferredLanguages } from '../strings/strings'
 import type { Translations } from '../strings/types'
 import EmailSubscribeForm from './EmailSubscribeForm'
 import InviteCodeSubmissionForm from './InviteCodeSubmissionForm'
@@ -27,7 +26,6 @@ const submitVoteAndGetNextCommentAPI = async (
     agid: 1,
     conversation_id,
     high_priority,
-    lang: getPreferredLanguages()[0],
     pid: decodedToken?.pid || -1,
     tid: vote.tid,
     vote: vote.vote
@@ -63,15 +61,16 @@ export default function Survey({
     const loadPersonalizedFirst = async () => {
       try {
         getConversationToken(conversation_id)
-        const lang = getPreferredLanguages()[0]
-        const resp = await fetchNextComment(conversation_id, lang)
+        const resp = await fetchNextComment(conversation_id)
 
         if (!cancelled) {
           if (resp && typeof resp.tid !== 'undefined') {
             const mapped: StatementData = {
               tid: resp.tid,
               txt: resp.txt,
-              remaining: resp.remaining
+              remaining: resp.remaining,
+              lang: resp.lang,
+              translations: resp.translations
             }
             setStatement((prev) => {
               if (!prev || mapped.tid !== prev.tid) {

client-participation-alpha/src/components/TreeviteInvites.tsx

@@ -37,8 +37,8 @@ export default function TreeviteInvites({ conversation_id, s }: TreeviteInvitesP
 
   const formatDate = (iso: string) => {
     try {
-      const d = new Date(iso)
-      return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
+      const date = new Date(iso)
+      return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
     } catch {
       return iso
     }

client-participation-alpha/src/components/topicAgenda/TopicAgenda.tsx

@@ -54,7 +54,7 @@ const TopicAgenda = ({
   }, [conversation_id])
 
   useEffect(() => {
-    const f = async () => {
+    const checkTopicPrioritize = async () => {
       // Check if topic prioritization is available for this conversation
       try {
         const topicPrioritizeResponse = await fetchTopicPrioritize(conversation_id)
@@ -95,7 +95,7 @@ const TopicAgenda = ({
       }
     }
     if (loadWidget) {
-      f()
+      checkTopicPrioritize()
     }
   }, [loadWidget, conversation_id])
 

client-participation-alpha/src/components/types.ts

@@ -2,6 +2,16 @@ export interface StatementData {
   tid: number | string
   txt: string
   remaining?: number
+  lang?: string
+  translations?: {
+    zid: number
+    tid: number
+    src: number
+    txt: string
+    lang: string
+    created: string
+    modified: string
+  }[]
 }
 
 export interface VoteData {