Char Count, Sticky Header, Language Switcher, and a secret feature!!

apps/frontend/src/App.tsx

@@ -1,16 +1,19 @@
 import { Routes, Route } from 'react-router-dom';
+import { LanguageProvider } from './contexts/LanguageContext';
 import SurveyPage from './pages/SurveyPage';
 import ThankYouPage from './pages/ThankYouPage';
 import AdminDashboardPage from './pages/AdminDashboardPage';
 
 function App() {
   return (
-    <Routes>
-      <Route path="/" element={<SurveyPage />} />
-      <Route path="/survey" element={<SurveyPage />} />
-      <Route path="/thanks" element={<ThankYouPage />} />
-      <Route path="/admin" element={<AdminDashboardPage />} />
-    </Routes>
+    <LanguageProvider>
+      <Routes>
+        <Route path="/" element={<SurveyPage />} />
+        <Route path="/survey" element={<SurveyPage />} />
+        <Route path="/thanks" element={<ThankYouPage />} />
+        <Route path="/admin" element={<AdminDashboardPage />} />
+      </Routes>
+    </LanguageProvider>
   );
 }
 

apps/frontend/src/components/LanguageToggle.tsx

@@ -0,0 +1,29 @@
+import { Button, Group } from '@mantine/core';
+import { useLanguage } from '../contexts/LanguageContext';
+import { uiTranslations } from '../translations/ui';
+
+export function LanguageToggle() {
+  const { language, setLanguage } = useLanguage();
+  const t = uiTranslations[language];
+
+  return (
+    <Group gap="xs">
+      <Button
+        variant={language === 'en' ? 'filled' : 'subtle'}
+        size="xs"
+        onClick={() => setLanguage('en')}
+        color="equalBlue"
+      >
+        {t.languageSwitch.english}
+      </Button>
+      <Button
+        variant={language === 'es' ? 'filled' : 'subtle'}
+        size="xs"
+        onClick={() => setLanguage('es')}
+        color="equalBlue"
+      >
+        {t.languageSwitch.spanish}
+      </Button>
+    </Group>
+  );
+}

apps/frontend/src/components/ProgressIndicator.tsx

@@ -1,21 +1,25 @@
 import { Progress, Text, Group, Stack } from '@mantine/core';
+import { useLanguage } from '../contexts/LanguageContext';
+import { uiTranslations } from '../translations/ui';
 
 interface ProgressIndicatorProps {
   answered: number;
   total: number;
 }
 
 export function ProgressIndicator({ answered, total }: ProgressIndicatorProps) {
+  const { language } = useLanguage();
+  const t = uiTranslations[language];
   const percentage = Math.round((answered / total) * 100);
 
   return (
     <Stack gap="xs">
       <Group justify="space-between">
         <Text size="sm" c="dimmed">
-          Questions answered: {answered} of {total}
+          {t.progress.questionsAnswered}: {answered} {t.progress.of} {total}
         </Text>
         <Text size="sm" c="dimmed" fw={500}>
-          {percentage}% complete
+          {percentage}% {t.progress.complete}
         </Text>
       </Group>
       <Progress value={percentage} size="sm" radius="xl" color="equalBlue" />

apps/frontend/src/components/QuestionRenderer.tsx

@@ -8,77 +8,106 @@ import { SingleChoiceQuestion } from './questions/SingleChoiceQuestion';
 import { TextFieldQuestion } from './questions/TextFieldQuestion';
 import { QuestionConfig } from '../config/question-types';
 import { SurveyFormState } from '../types/survey';
+import { useLanguage } from '../contexts/LanguageContext';
+import { questionTranslations } from '../translations/questions';
+import { uiTranslations } from '../translations/ui';
 
 interface QuestionRendererProps {
   config: QuestionConfig;
   formData: SurveyFormState;
   updateField: <K extends keyof SurveyFormState>(field: K, value: SurveyFormState[K]) => void;
+  questionNumber?: number;
+  totalQuestions?: number;
 }
 
-function QuestionRendererComponent({ config, formData, updateField }: QuestionRendererProps) {
+function QuestionRendererComponent({ config, formData, updateField, questionNumber, totalQuestions }: QuestionRendererProps) {
+  const { language } = useLanguage();
+  const qt = questionTranslations[language];
+  const t = uiTranslations[language];
+
+  // Get question-specific translations
+  const qKey = config.id as keyof typeof qt;
+  const qTrans = qt[qKey] as any;
+
   switch (config.type) {
     case 'likert':
       return (
         <LikertQuestion
           id={config.id}
-          question={config.question}
-          transparency={config.transparency}
-          options={config.options}
+          question={qTrans.question}
+          transparency={qTrans.transparency}
+          options={config.options.map((opt, idx) => ({
+            value: opt.value,
+            label: qTrans.options[idx],
+          }))}
           value={formData[config.field] as number | null}
           onChange={(value) => updateField(config.field, value)}
           comment={formData[config.commentField] as string}
           onCommentChange={(comment) => updateField(config.commentField, comment)}
-          commentPlaceholder={config.commentPlaceholder}
+          commentPlaceholder={qTrans.commentPlaceholder}
+          commentMaxLength={config.commentMaxLength}
+          questionNumber={questionNumber}
+          totalQuestions={totalQuestions}
         />
       );
 
     case 'likert-with-na':
       return (
         <LikertWithNAQuestion
           id={config.id}
-          question={config.question}
-          transparency={config.transparency}
-          options={config.options}
-          naLabel={config.naLabel}
+          question={qTrans.question}
+          transparency={qTrans.transparency}
+          options={config.options.map((opt, idx) => ({
+            value: opt.value,
+            label: qTrans.options[idx],
+          }))}
+          naLabel={qTrans.naLabel}
           value={formData[config.field] as string | null}
           onChange={(value) => updateField(config.field, value)}
           comment={formData[config.commentField] as string}
           onCommentChange={(comment) => updateField(config.commentField, comment)}
-          commentPlaceholder={config.commentPlaceholder}
-          commentLabel={config.commentLabel}
+          commentPlaceholder={qTrans.commentPlaceholder}
+          commentLabel={qTrans.commentLabel || t.additionalComments}
+          commentMaxLength={config.commentMaxLength}
+          questionNumber={questionNumber}
+          totalQuestions={totalQuestions}
         />
       );
 
     case 'multiple-select':
       return (
         <MultipleSelectQuestion
           id={config.id}
-          question={config.question}
-          transparency={config.transparency}
-          options={config.options}
+          question={qTrans.question}
+          transparency={qTrans.transparency}
+          options={qTrans.options}
           values={formData[config.field] as string[]}
           onChange={(values) => updateField(config.field, values)}
           otherValue={config.otherField ? (formData[config.otherField] as string) : undefined}
           onOtherChange={
             config.otherField ? (value) => updateField(config.otherField!, value) : undefined
           }
+          otherMaxLength={config.otherMaxLength}
           comment={config.commentField ? (formData[config.commentField] as string) : undefined}
           onCommentChange={
             config.commentField
               ? (comment) => updateField(config.commentField!, comment)
               : undefined
           }
-          commentPlaceholder={config.commentPlaceholder}
+          commentPlaceholder={qTrans.commentPlaceholder}
+          commentMaxLength={config.commentMaxLength}
+          questionNumber={questionNumber}
+          totalQuestions={totalQuestions}
         />
       );
 
     case 'single-choice':
       return (
         <SingleChoiceQuestion
           id={config.id}
-          question={config.question}
-          transparency={config.transparency}
-          options={config.options}
+          question={qTrans.question}
+          transparency={qTrans.transparency}
+          options={qTrans.options}
           value={formData[config.field] as string}
           onChange={(value) => updateField(config.field, value)}
           comment={config.commentField ? (formData[config.commentField] as string) : undefined}
@@ -87,46 +116,57 @@ function QuestionRendererComponent({ config, formData, updateField }: QuestionRe
               ? (comment) => updateField(config.commentField!, comment)
               : undefined
           }
+          commentMaxLength={config.commentMaxLength}
+          questionNumber={questionNumber}
+          totalQuestions={totalQuestions}
         />
       );
 
     case 'ranking':
       return (
         <RankingQuestion
           id={config.id}
-          question={config.question}
-          transparency={config.transparency}
-          options={config.options}
+          question={qTrans.question}
+          transparency={qTrans.transparency}
+          options={qTrans.options}
           rankings={formData[config.field] as Record<string, number>}
           onChange={(rankings) => updateField(config.field, rankings)}
+          questionNumber={questionNumber}
+          totalQuestions={totalQuestions}
         />
       );
 
     case 'open-ended':
       return (
         <OpenEndedQuestion
           id={config.id}
-          question={config.question}
-          transparency={config.transparency}
+          question={qTrans.question}
+          transparency={qTrans.transparency}
           value={formData[config.field] as string}
           onChange={(value) => updateField(config.field, value)}
-          placeholder={config.placeholder}
+          placeholder={qTrans.placeholder}
+          maxLength={config.maxLength}
+          questionNumber={questionNumber}
+          totalQuestions={totalQuestions}
         />
       );
 
     case 'text-field':
       return (
         <TextFieldQuestion
           id={config.id}
-          question={config.question}
-          transparency={config.transparency}
+          question={qTrans.question}
+          transparency={qTrans.transparency}
           fields={config.fields.map((fieldConfig) => ({
             id: fieldConfig.id,
-            label: fieldConfig.label,
+            label: qTrans.fields[fieldConfig.id].label,
             value: formData[fieldConfig.field] as string,
             onChange: (value) => updateField(fieldConfig.field, value),
-            placeholder: fieldConfig.placeholder,
+            placeholder: qTrans.fields[fieldConfig.id].placeholder,
+            maxLength: fieldConfig.maxLength,
           }))}
+          questionNumber={questionNumber}
+          totalQuestions={totalQuestions}
         />
       );
 

apps/frontend/src/components/questions/LikertQuestion.tsx

@@ -1,4 +1,5 @@
-import { Card, Title, Text, Radio, Stack, Textarea } from '@mantine/core';
+import { Card, Title, Text, Radio, Stack, Textarea, Group } from '@mantine/core';
+import { useMemo } from 'react';
 
 interface LikertOption {
   value: string;
@@ -15,6 +16,9 @@ interface LikertQuestionProps {
   comment?: string;
   onCommentChange?: (comment: string) => void;
   commentPlaceholder?: string;
+  commentMaxLength?: number;
+  questionNumber?: number;
+  totalQuestions?: number;
 }
 
 const DEFAULT_OPTIONS: LikertOption[] = [
@@ -35,10 +39,47 @@ export function LikertQuestion({
   comment,
   onCommentChange,
   commentPlaceholder = 'Share any additional thoughts...',
+  commentMaxLength,
+  questionNumber,
+  totalQuestions,
 }: LikertQuestionProps) {
+  const charCount = comment?.length || 0;
+  const remaining = commentMaxLength ? commentMaxLength - charCount : null;
+
+  // Determine visual state for character counter
+  const counterState = useMemo(() => {
+    if (!commentMaxLength || remaining === null) return null;
+
+    if (remaining < 0) {
+      return {
+        color: 'red.7',
+        message: 'error',
+      };
+    }
+
+    // Warning threshold at 90%
+    const warningThreshold = Math.floor(commentMaxLength * 0.9);
+    if (charCount >= warningThreshold) {
+      return {
+        color: 'yellow.7',
+        message: 'warning',
+      };
+    }
+
+    return {
+      color: 'dimmed',
+      message: 'normal',
+    };
+  }, [commentMaxLength, remaining, charCount]);
+
   return (
     <Card shadow="sm" padding="lg" radius="md" withBorder>
       <Stack gap="md">
+        {questionNumber && totalQuestions && (
+          <Text size="xs" c="dimmed" fw={500}>
+            Question {questionNumber} of {totalQuestions}
+          </Text>
+        )}
         <Title order={3} size="h4">
           {question}
         </Title>
@@ -60,14 +101,33 @@ export function LikertQuestion({
         </Radio.Group>
 
         {onCommentChange && (
-          <Textarea
-            label="Additional comments (optional)"
-            value={comment || ''}
-            onChange={(e) => onCommentChange(e.currentTarget.value)}
-            placeholder={commentPlaceholder}
-            minRows={2}
-            autosize
-          />
+          <>
+            <Textarea
+              label="Additional comments (optional)"
+              value={comment || ''}
+              onChange={(e) => onCommentChange(e.currentTarget.value)}
+              placeholder={commentPlaceholder}
+              minRows={2}
+              autosize
+              error={commentMaxLength && remaining !== null && remaining < 0 ?
+                `Please reduce your comment to ${commentMaxLength} characters or fewer` : undefined}
+            />
+            {commentMaxLength && (
+              <Group justify="space-between" gap="xs">
+                <Text
+                  size="sm"
+                  c={counterState?.color}
+                  fw={counterState?.message === 'error' ? 600 : 400}
+                  aria-live="polite"
+                  aria-atomic="true"
+                >
+                  {remaining !== null && remaining >= 0
+                    ? `${remaining} characters remaining (${charCount} / ${commentMaxLength})`
+                    : `${Math.abs(remaining!)} characters over limit (${charCount} / ${commentMaxLength})`}
+                </Text>
+              </Group>
+            )}
+          </>
         )}
       </Stack>
     </Card>