chore: add i18n

polylan_submitter/src/components/SubmissionForm.vue

@@ -3,7 +3,7 @@
     <div class="card-body">
       <h2 class="card-title text-xl mb-6">
         <i class="mdi mdi-check-circle text-2xl text-primary"></i>
-        Submit Solution
+        {{ t("common.submitSolution") }}
       </h2>
 
       <form @submit.prevent="handleSubmit" class="space-y-6">
@@ -15,7 +15,7 @@
           <i class="mdi mdi-information-outline text-xl"></i>
           <div class="flex-1">
             <h4 class="font-bold">
-              Detected Puzzles ({{ Object.keys(responsesByPuzzle).length }})
+              {{ t("components.submissionForm.detectedPuzzles", { n: Object.keys(responsesByPuzzle).length }) }}
             </h4>
             <div class="text-sm space-y-1 mt-1">
               <div
@@ -25,7 +25,7 @@
               >
                 <span>{{ puzzleName }}</span>
                 <span class="badge badge-ghost badge-sm ml-2"
-                  >{{ data.files.length }} file(s)</span
+                  >{{ t("common.fileCount", data.files.length) }}</span
                 >
               </div>
             </div>
@@ -42,11 +42,9 @@
         >
           <i class="mdi mdi-alert-circle text-xl"></i>
           <div class="flex-1">
-            <div class="font-bold">Manual Puzzle Selection Required</div>
+            <div class="font-bold">{{ t("components.submissionForm.manualSelectionRequired") }}</div>
             <div class="text-sm">
-              {{ submissionFilesNeedingManualSelection.length }} file(s) have
-              low OCR confidence for puzzle names. Please select the correct
-              puzzle for each file before submitting.
+              {{ t("components.submissionForm.manualSelectionBody", { n: submissionFilesNeedingManualSelection.length }) }}
             </div>
 
             <button
@@ -54,7 +52,7 @@
               @click="processLowConfidenceOCRFiles"
             >
               <span class="mdi mdi-reload text-2xl"></span>
-              Retry OCR on low confidence puzzle
+              {{ t("components.submissionForm.retryOcr") }}
             </button>
           </div>
         </div>
@@ -63,13 +61,13 @@
         <div class="form-control">
           <div class="flex-1">
             <label class="flex label">
-              <span class="label-text font-medium">Notes (Optional)</span>
+              <span class="label-text font-medium">{{ t("common.notesOptional") }}</span>
               <span class="label-text-alt">{{ notesLength }}/500</span>
             </label>
             <textarea
               v-model="notes"
               class="flex textarea textarea-bordered h-24 w-full resize-none"
-              placeholder="Add any notes about your solution, approach, or interesting findings..."
+              :placeholder="t('components.submissionForm.notesPlaceholder')"
               maxlength="500"
             ></textarea>
           </div>
@@ -86,16 +84,12 @@
             />
             <div class="flex-1">
               <span class="label-text font-medium"
-                >Request manual validation</span
+                >{{ t("components.submissionForm.requestManualValidation") }}</span
               >
               <div class="label-text-alt text-xs opacity-70 mt-1">
-                Check this if you want an admin to manually review your
-                submission, even if OCR confidence is high.
+                {{ t("components.submissionForm.manualValidationHint") }}
                 <br />
-                <em
-                  >Note: This will be automatically checked if any OCR
-                  confidence is below 80%.</em
-                >
+                <em>{{ t("components.submissionForm.manualValidationNote") }}</em>
               </div>
             </div>
           </label>
@@ -108,12 +102,11 @@
               v-if="isSubmitting"
               class="loading loading-spinner loading-sm"
             ></span>
-            <span v-if="isSubmitting">Submitting...</span>
+            <span v-if="isSubmitting">{{ t("common.submitting") }}</span>
             <span v-else-if="submissionFilesNeedingManualSelection.length > 0">
-              Select Puzzles ({{ submissionFilesNeedingManualSelection.length }}
-              remaining)
+              {{ t("components.submissionForm.selectPuzzlesRemaining", { n: submissionFilesNeedingManualSelection.length }) }}
             </span>
-            <span v-else>Submit Solution</span>
+            <span v-else>{{ t("common.submitSolution") }}</span>
           </button>
         </div>
       </form>
@@ -123,6 +116,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import FileUpload from "@/components/FileUpload.vue";
 import type { SteamCollectionItem, SubmissionFile } from "@/types";
 import { useUploadsStore } from "@/stores/uploads";
@@ -136,6 +130,7 @@ interface Props {
 
 const props = defineProps<Props>();
 
+const { t } = useI18n();
 const uploadsStore = useUploadsStore();
 const {
   submissionFiles,