From d77eb6ad1e4d0ff835b9ba9b551809241e4e5643 Mon Sep 17 00:00:00 2001
From: Thorsten Bus <thorsten@buss-labs.de>
Date: Mon, 11 May 2026 10:29:52 +0200
Subject: [PATCH] feat(translate): accept prefilled translation from CCLI
 pairing

---
 .../Controllers/TranslationController.php     |  1 +
 resources/js/Pages/Songs/Translate.vue        | 35 +++++++++++++++++--
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/app/Http/Controllers/TranslationController.php b/app/Http/Controllers/TranslationController.php
index c653826..787d049 100644
--- a/app/Http/Controllers/TranslationController.php
+++ b/app/Http/Controllers/TranslationController.php
@@ -57,6 +57,7 @@ public function page(Song $song): Response
                 'has_translation' => $song->has_translation,
                 'groups' => $groups,
             ],
+            'prefilledTranslation' => session()->pull('ccli_prefilled'),
         ]);
     }
 
diff --git a/resources/js/Pages/Songs/Translate.vue b/resources/js/Pages/Songs/Translate.vue
index 66b0472..2d30f39 100644
--- a/resources/js/Pages/Songs/Translate.vue
+++ b/resources/js/Pages/Songs/Translate.vue
@@ -1,21 +1,34 @@
 <script setup>
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
 import { Head, router } from '@inertiajs/vue3'
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
 const props = defineProps({
     song: {
         type: Object,
         required: true,
     },
+    prefilledTranslation: {
+        type: String,
+        default: null,
+    },
 })
 
 const sourceUrl = ref('')
-const sourceText = ref('')
+const sourceText = ref(props.prefilledTranslation ?? '')
 const isFetching = ref(false)
 const isSaving = ref(false)
 const infoMessage = ref('')
 const errorMessage = ref('')
+const showPrefillBanner = ref(props.prefilledTranslation !== null)
+
+// Auto-distribute prefilled translation on mount
+onMounted(() => {
+    if (props.prefilledTranslation) {
+        distributeTextToSlides(props.prefilledTranslation)
+        infoMessage.value = 'Vorausgefüllt aus CCLI — bitte überprüfen und speichern.'
+    }
+})
 
 const groups = ref(
     (props.song.groups ?? []).map((group) => ({
@@ -173,6 +186,24 @@ function rowsForSlide(slide) {
 
         <div class="py-8">
             <div class="mx-auto max-w-6xl space-y-6 px-4 sm:px-6 lg:px-8">
+
+                <!-- CCLI Prefill Banner -->
+                <div
+                    v-if="showPrefillBanner"
+                    data-testid="ccli-prefill-banner"
+                    class="flex items-center justify-between rounded-lg border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-800"
+                >
+                    <span>Vorausgefüllt aus CCLI — bitte überprüfen und speichern.</span>
+                    <button
+                        data-testid="ccli-prefill-discard-button"
+                        type="button"
+                        @click="showPrefillBanner = false; sourceText = ''; groups.forEach(g => g.slides.forEach(s => s.translated_text = ''))"
+                        class="ml-4 text-blue-600 underline hover:text-blue-800"
+                    >
+                        Verwerfen
+                    </button>
+                </div>
+
                 <section class="rounded-xl border border-gray-200 bg-white p-5 shadow-sm">
                     <h3 class="text-base font-semibold text-gray-900">Uebersetzungstext laden</h3>
                     <p class="mt-1 text-sm text-gray-500">