added preview window in questionnaire editor

website/js/pages/editor.js

@@ -16,6 +16,7 @@ import {
     mountConditionEditor,
     parseConditionForm,
 } from '../condition-editor.js';
+import { mountQuestionnairePreview } from '../questionnaire-preview.js';
 
 const LAYOUT_TYPES = [
     { value: 'radio_question',             label: 'Radio (Single Choice)' },
@@ -602,6 +603,7 @@ function renderEditor() {
         ${!isNew ? `
         <div class="tab-bar" id="editorTabs">
             <button class="active" data-tab="questions">Questions (${questions.length})</button>
+            <button data-tab="preview">Preview</button>
             <button data-tab="translations">Translations</button>
         </div>
         <div id="tabContent-questions">
@@ -619,6 +621,9 @@ function renderEditor() {
                 <div id="translationsContent"><div class="spinner"></div></div>
             </div>
         </div>
+        <div id="tabContent-preview" style="display:none">
+            <div id="previewContent"></div>
+        </div>
         ` : '<p style="color:var(--text-secondary);margin-top:12px">Save the questionnaire first, then add questions.</p>'}
     `;
 
@@ -648,11 +653,22 @@ function initTabs() {
             tabBar.querySelectorAll('button').forEach(b => b.classList.toggle('active', b.dataset.tab === tab));
             document.getElementById('tabContent-questions').style.display = tab === 'questions' ? '' : 'none';
             document.getElementById('tabContent-translations').style.display = tab === 'translations' ? '' : 'none';
+            document.getElementById('tabContent-preview').style.display = tab === 'preview' ? '' : 'none';
             if (tab === 'translations') loadTranslationsTab();
+            if (tab === 'preview') loadPreviewTab();
         });
     });
 }
 
+function loadPreviewTab() {
+    const mount = document.getElementById('previewContent');
+    if (!mount) return;
+    mountQuestionnairePreview(mount, {
+        questionnaireName: questionnaire?.name || '',
+        questions,
+    });
+}
+
 async function fetchAppStringGerman(messageKey) {
     if (!messageKey) return '';
     try {