feat: smaller bug and testfixes

2026-04-17 10:19:09 +02:00
parent ef0f407600
commit 4c168af9d1
7 changed files with 34 additions and 78 deletions
--- a/src/components/AnnotationViews/AnnotationInfoView.tsx
+++ b/src/components/AnnotationViews/AnnotationInfoView.tsx
@@ -57,25 +57,25 @@ export default function AnnotationInfoView({
                <span className="flex-shrink-0 w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-semibold">
                  1
                </span>
-                <span>Du hörst eine synthetische Audioaufnahme</span>
+                <span>Du hörst eine synthetische Audioaufnahme.</span>
              </li>
              <li className="flex gap-3">
                <span className="flex-shrink-0 w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-semibold">
                  2
                </span>
-                <span>Du bewertest, wie authentisch die Aufnahme nach dem angegebenen Dialekt klingt</span>
+                <span>Du bewertest, wie überzeugend die Aufnahme nach dem angegebenen Dialekt klingt.</span>
              </li>
              <li className="flex gap-3">
                <span className="flex-shrink-0 w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-semibold">
                  3
                </span>
-                <span>Du gibst an, wie sicher du dir bei deiner Wahl bist</span>
+                <span>Du gibst an, wie sicher du dir bei deiner Wahl bist.</span>
              </li>
              <li className="flex gap-3">
                <span className="flex-shrink-0 w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-semibold">
                  4
                </span>
-                <span>Dies wiederholst du für weitere Aufnahmen</span>
+                <span>Dies wiederholst du für weitere Aufnahmen.</span>
              </li>
            </ol>
          </div>
--- a/src/components/AnnotationViews/AnnotationPageView.tsx
+++ b/src/components/AnnotationViews/AnnotationPageView.tsx
@@ -137,7 +137,6 @@ export default function AnnotationPageView({
  const [sidebarOpen, setSidebarOpen] = useState(false);

  const currentEntry = entries[currentIndex];
-  const isComplete = entries.every((e) => e.annotation !== null);
  
  // Smooth scroll to top when current entry changes
  useEffect(() => {
@@ -210,53 +209,6 @@ export default function AnnotationPageView({
    );
  }

-  if (isComplete) {
-    return (
-      <div className="flex flex-col h-full bg-white">
-        <div className="flex flex-1 overflow-hidden">
-          {/* Sidebar with transition */}
-          <div className={`${sidebarOpen ? 'w-68' : 'w-0'} transition-all duration-300 ease-in-out overflow-hidden`}>
-            <AnnotationSidebarNavigation
-              entries={entries}
-              currentIndex={currentIndex}
-              onSelectEntry={setCurrentIndex}
-              annotatedCount={annotatedCount}
-            />
-          </div>
-          
-          {/* Main content area */}
-          <div className="flex-1 flex flex-col overflow-hidden">
-            {/* Toggle button */}
-            <div className="sticky top-0 z-50 bg-white border-b border-gray-200 px-4 py-2">
-              <button
-                onClick={() => setSidebarOpen(!sidebarOpen)}
-                className="hidden md:block text-sm px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-md transition-colors"
-                title={sidebarOpen ? 'Sidebar ausblenden' : 'Sidebar anzeigen'}
-              >
-                {sidebarOpen ? '✕' : '☰'}
-              </button>
-            </div>
-            <div className="flex-1 overflow-y-auto">
-              <div className="max-w-3xl mx-auto text-center py-20">
-                <div className="text-5xl mb-4">✓</div>
-                <h1 className="text-3xl font-bold text-green-600 mb-3">Fertig!</h1>
-                <p className="text-gray-600 mb-8">
-                  Alle Samples wurden erfolgreich bewertet. Vielen Dank!
-                </p>
-                <Link
-                  href="/"
-                  className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors"
-                >
-                  Zurück zur Startseite
-                </Link>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
  return (
    <div className="flex flex-col h-full bg-white">
      <div className="flex flex-1 overflow-hidden">
@@ -306,21 +258,11 @@ export default function AnnotationPageView({
                {onShowIntro && (
                  <button
                    onClick={onShowIntro}
-                    className="text-sm px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-md transition-colors"
+                    className="text-sm px-3 py-1.5  bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-md transition-colors"
                  >
                    ← Einführung
                  </button>
                )}
-
-                {Object.keys(dialectScores).length > 0 && (
-                  <button
-                    onClick={() => setIsCalibrationModalOpen(true)}
-                    className="text-sm px-3 py-1.5 bg-purple-100 hover:bg-purple-200 text-purple-700 rounded-md transition-colors"
-                    title="Kalibrierungsergebnisse anzeigen"
-                  >
-                    📊 Kalibrierung
-                  </button>
-                )}
              </div>
              <div className="flex gap-3">
                <button
--- a/src/components/AnnotationViews/SingleChoiceEntryView.tsx
+++ b/src/components/AnnotationViews/SingleChoiceEntryView.tsx
@@ -87,7 +87,7 @@ export default function SingleChoiceEntryView({
      {/* Questions container */}
      <div className="mt-6 flex flex-col lg:flex-row gap-6">
        {/* Rating question */}
-        <div className="flex-1">
+        <div className="flex-3">
          <div className="text-sm font-semibold text-gray-700 mb-3">
            {question}
          </div>
--- a/src/components/CalibrationScoresDisplay.tsx
+++ b/src/components/CalibrationScoresDisplay.tsx
@@ -39,7 +39,7 @@ export default function CalibrationScoresDisplay({
        })}
      </div>
      <p className="text-sm text-gray-500 mt-6">
-        Die Ergebnisse basieren auf deiner Erkennungsgenauigkeit und Sicherheit. Dialekte die du gut erkennst, werden bei der Bewertungsphase häufiger angezeigt.
+        Dialekte die du gut erkennst, werden bei der Bewertungsphase häufiger angezeigt.
      </p>
    </div>
  );
--- a/src/components/CalibrationViews/CalibrationInfoView.tsx
+++ b/src/components/CalibrationViews/CalibrationInfoView.tsx
@@ -47,37 +47,51 @@ export default function CalibrationInfoView({
                <span className="flex-shrink-0 w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-semibold">
                  1
                </span>
-                <span>Du hörst eine Audioaufnahme</span>
+                <span>Du hörst eine Audioaufnahme.</span>
              </li>
              <li className="flex gap-3">
                <span className="flex-shrink-0 w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-semibold">
                  2
                </span>
-                <span>Du wählst den Dialekt aus, den du gehört hast</span>
+                <span>Du wählst den Dialekt aus, den du gehört hast.</span>
              </li>
              <li className="flex gap-3">
                <span className="flex-shrink-0 w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-semibold">
                  3
                </span>
-                <span>Du gibst an, wie sicher du dir bei deiner Wahl bist</span>
+                <span>Du gibst an, wie sicher du dir bei deiner Wahl bist.</span>
              </li>
              <li className="flex gap-3">
                <span className="flex-shrink-0 w-6 h-6 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-semibold">
                  4
                </span>
-                <span>Dies wiederholst du für alle Aufnahmen</span>
+                <span>Dies wiederholst du für alle Aufnahmen.</span>
              </li>
            </ol>
          </div>

          
          {/* Participation Section */}
-          <div className="mb-12">
+          <div className="mb-8">
            <p className="text-gray-700 mb-4">
              Die Kalibrierung umfasst 28 Aufnahmen und dauert etwa 5–10 Minuten.
            </p>
          </div>

+          {/* Hints Section */}
+          <div className="mb-12">
+            <ul className="space-y-2 text-sm text-gray-500">
+              <li className="flex gap-2">
+                <span className="flex-shrink-0">•</span>
+                <span>Diese Aufnahmen gehören nicht zur eigentlichen Bewertung.</span>
+              </li>
+              <li className="flex gap-2">
+                <span className="flex-shrink-0">•</span>
+                <span>Du kannst die Kalibrierung jederzeit unterbrechen und später dort weitermachen, wo du aufgehört hast.</span>
+              </li>
+            </ul>
+          </div>
+

          {/* Status */}
          {hasExistingAnswers && (
--- a/src/components/CalibrationViews/CalibrationPageView.tsx
+++ b/src/components/CalibrationViews/CalibrationPageView.tsx
@@ -175,7 +175,7 @@ export default function CalibrationPageView({
                  Kalibrierung abgeschlossen!
                </h1>
                <p className="text-gray-600 mb-8">
-                  Du hast alle Aufnahmen bewertet. Vielen Dank! Du kannst jetzt mit der Bewertung beginnen.
+                  Vielen Dank! Du kannst jetzt mit der Bewertung beginnen.
                </p>
              </div>

@@ -246,7 +246,7 @@ export default function CalibrationPageView({
            disabled={currentIndex === 0 || isPending}
            className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
          >
-            ← Vorherige
+            ← Zurück
          </button>
          <button
            onClick={handleNext}
@@ -254,7 +254,7 @@ export default function CalibrationPageView({
            title={!currentEntryComplete ? 'Bitte beantworten Sie beide Fragen, bevor Sie fortfahren' : ''}
            className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
          >
-            {currentIndex === entries.length - 1 ? 'Fertig' : 'Nächste →'}
+            {currentIndex === entries.length - 1 ? 'Abschliessen' : 'Weiter →'}
          </button>
        </div>
      </div>
--- a/src/components/OnboardingViews/OnboardingFormView.tsx
+++ b/src/components/OnboardingViews/OnboardingFormView.tsx
@@ -126,7 +126,7 @@ export default function OnboardingFormView({ experimentId, onBack, userEmail }:
    switch (step) {
      case 1:
        if (!formData.age) {
-          setError('Bitte wählen deine Altersgruppe aus.');
+          setError('Bitte wähle deine Altersgruppe aus.');
          return false;
        }
        break;
@@ -136,7 +136,7 @@ export default function OnboardingFormView({ experimentId, onBack, userEmail }:
          return r.canton && r.years && years >= 1 && years <= 100;
        });
        if (!allResidencesValid) {
-          setError('Bitte füllen alle deine Aufenthaltsorte vollständig aus und stelle sicher, dass die Jahres-Angaben zwischen 1 und 100 liegen.');
+          setError('Bitte füllen alle deine Aufenthaltsorte vollständig aus und stelle sicher, dass die Jahresangaben zwischen 1 und 100 liegen.');
          return false;
        }
        break;
@@ -242,7 +242,7 @@ export default function OnboardingFormView({ experimentId, onBack, userEmail }:
              <div className="space-y-6">
                <div>
                  <label htmlFor="age" className="block text-s font-medium text-gray-900 mb-2">
-                    Meine Altersgruppe <span className="text-red-600">*</span>
+                    Deine Altersgruppe <span className="text-red-600">*</span>
                  </label>
                  <select
                    id="age"
@@ -295,7 +295,7 @@ export default function OnboardingFormView({ experimentId, onBack, userEmail }:
                {/* Residence Entries */}
                <div>
                  <label className="block text-s font-medium text-gray-900 mb-4">
-                    Aufenthaltsorte (mind. 1 Jahr) <span className="text-red-600">*</span>
+                    Deine Aufenthaltsorte (mind. 1 Jahr) <span className="text-red-600">*</span>
                  </label>

                  <div className="space-y-4">
@@ -312,7 +312,7 @@ export default function OnboardingFormView({ experimentId, onBack, userEmail }:
                            }
                            className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
                          >
-                            <option value="">-- Wählen --</option>
+                            <option value="">-- Bitte wählen --</option>
                            {Object.entries(AVAILABLE_CANTONS).map(
                              ([key, label]) => {
                                // Hide cantons already selected in other residence entries