added sidemenu in annotation for quicknavigation, fixed some responsive issues

2026-03-20 14:11:19 +01:00
parent 392e54d1e6
commit 20e251710a
10 changed files with 306 additions and 74 deletions
--- a/src/app/admin/experiments/page.tsx
+++ b/src/app/admin/experiments/page.tsx
@@ -16,7 +16,7 @@ export default async function ExperimentsAdminPage() {
  }

  return (
-    <div className="px-4 sm:px-6 lg:px-8 py-8">
+    <div>
      <Link
        href="/admin"
        className="text-blue-500 hover:text-blue-600 mb-6 inline-block"
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -10,10 +10,10 @@ export default function RootLayout({
 }) {
  return (
    <html>
-      <body className="flex flex-col min-h-screen">
+      <body className="flex flex-col min-h-screen md:h-screen">
        <AudioProvider>
          <Header />
-          <main className="flex-grow">
+          <main className="flex-1 overflow-hidden">
            {children}
          </main>
          <Footer />
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -46,7 +46,7 @@ export default async function HomePage() {
  );

  return (
-    <div className="max-w-2xl mx-auto py-8">
+    <div className="max-w-2xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
      <h1 className="text-2xl font-bold text-gray-800 mb-2">Experimente</h1>
      <p className="text-gray-500 mb-8">
        Wählen Sie ein Experiment aus, um mit der Annotation zu beginnen oder fortzufahren.
--- a/src/components/AnnotationViews/AnnotationPageView.tsx
+++ b/src/components/AnnotationViews/AnnotationPageView.tsx
@@ -6,6 +6,7 @@ import { saveAnnotations } from '@/app/actions/annotations';
 import { DIALECT_LABELS, type DatasetEntryForAnnotation } from '@/lib/dialects';
 import SingleChoiceEntryView from './SingleChoiceEntryView';
 import SingleChoiceBinaryEntryView from './SingleChoiceBinaryEntryView';
+import AnnotationSidebarNavigation from './AnnotationSidebarNavigation';

 export interface EntryViewProps {
  entry: DatasetEntryForAnnotation;
@@ -95,6 +96,7 @@ export default function AnnotationPageView({
  }, [entries]);

  const [currentIndex, setCurrentIndex] = useState(startingIndex);
+  const [sidebarOpen, setSidebarOpen] = useState(false);

  const currentEntry = entries[currentIndex];
  const isComplete = entries.every((e) => e.annotation !== null);
@@ -127,79 +129,153 @@ export default function AnnotationPageView({
  const viewElement = getViewComponent();
  if (!viewElement) {
    return (
-      <div className="max-w-xl mx-auto py-16 text-center">
-        <p className="text-gray-600">Unbekannter Annotation-Typ: {viewType}</p>
-        <Link href="/" className="text-blue-600 hover:underline mt-4 inline-block">
-          ← Startseite
-        </Link>
+      <div className="flex flex-col h-full bg-white">
+        <div className="flex flex-1 overflow-hidden">
+          {/* Sidebar with transition */}
+          <div className={`${sidebarOpen ? 'w-64' : 'w-0'} transition-all duration-300 ease-in-out overflow-hidden`}>
+            <AnnotationSidebarNavigation
+              entries={entries}
+              currentIndex={currentIndex}
+              onSelectEntry={setCurrentIndex}
+              annotatedCount={annotatedCount}
+            />
+          </div>
+          <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 flex items-center justify-center">
+              <div className="text-center">
+                <p className="text-gray-600">Unbekannter Annotation-Typ: {viewType}</p>
+                <Link href="/" className="text-blue-600 hover:underline mt-4 inline-block">
+                  ← Startseite
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
      </div>
    );
  }

  if (isComplete) {
    return (
-      <div className="max-w-xl 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 className="flex flex-col h-full bg-white">
+        <div className="flex flex-1 overflow-hidden">
+          {/* Sidebar with transition */}
+          <div className={`${sidebarOpen ? 'w-64' : '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="max-w-3xl mx-auto">
-      {/* ── Top bar ─────────────────────────────────────────── */}
-      <div className="sticky top-[72px] z-40 bg-white border-b border-gray-200 pt-4 pb-3 mb-6">
-        <div className="flex items-center justify-between mb-2">
-            <Link
-              href="/"
-              className="text-sm px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-md transition-colors"
-            >
-              ← Startseite
-            </Link>
-          <div className="flex gap-2">
-            <button
-              onClick={handlePrevious}
-              disabled={currentIndex === 0 || isPending}
-              className="text-sm px-3 py-1.5 bg-gray-100 hover:bg-gray-200 disabled:opacity-40 disabled:cursor-not-allowed text-gray-700 rounded-md transition-colors"
-            >
-              ← Zurück
-            </button>
-            <button
-              onClick={handleNext}
-              disabled={currentIndex >= entries.length - 1 || isPending}
-              className="text-sm px-3 py-1.5 bg-blue-100 hover:bg-blue-200 disabled:opacity-40 disabled:cursor-not-allowed text-blue-700 rounded-md transition-colors"
-            >
-              Weiter →
-            </button>
-
-          </div>
-        </div>
-        {/* Progress bar */}
-        <div className="w-full bg-gray-200 rounded-full h-2.5">
-          <div
-            className="bg-blue-500 h-2.5 rounded-full transition-all duration-500"
-            style={{ width: `${progressPct}%` }}
+    <div className="flex flex-col h-full bg-white">
+      <div className="flex flex-1 overflow-hidden">
+        {/* Sidebar with transition */}
+        <div className={`${sidebarOpen ? 'w-64' : 'w-0'} transition-all duration-300 ease-in-out overflow-hidden`}>
+          <AnnotationSidebarNavigation
+            entries={entries}
+            currentIndex={currentIndex}
+            onSelectEntry={setCurrentIndex}
+            annotatedCount={annotatedCount}
          />
        </div>
-        <div className="flex justify-between">
-        <div className="text-xs text-gray-400 mt-1 text-left">{annotatedCount}/{entries.length} annotiert</div>
-        <div className="text-xs text-gray-400 mt-1 text-right">{progressPct}% abgeschlossen</div>
-        </div>
-      </div>

-      {/* ── Sample entry ────────────────────────────────────── */}
-      <div className="flex flex-col gap-6">
-        {viewElement}
+        {/* Main content area */}
+        <div className="flex-1 flex flex-col overflow-hidden">
+          {/* Top bar */}
+          <div className="sticky top-0 z-40 bg-white border-b border-gray-200 p-4">
+            <div className="flex items-center justify-between max-w-4xl mx-auto">
+              {/* Toggle and Home buttons */}
+              <div className="flex gap-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>
+                <Link
+                  href="/"
+                  className="text-sm px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-md transition-colors"
+                >
+                  ← Startseite
+                </Link>
+              </div>
+              <div className="flex gap-2">
+                <button
+                  onClick={handlePrevious}
+                  disabled={currentIndex === 0 || isPending}
+                  className="text-sm px-3 py-1.5 bg-gray-100 hover:bg-gray-200 disabled:opacity-40 disabled:cursor-not-allowed text-gray-700 rounded-md transition-colors"
+                >
+                  ← Zurück
+                </button>
+                <button
+                  onClick={handleNext}
+                  disabled={currentIndex >= entries.length - 1 || isPending}
+                  className="text-sm px-3 py-1.5 bg-blue-100 hover:bg-blue-200 disabled:opacity-40 disabled:cursor-not-allowed text-blue-700 rounded-md transition-colors"
+                >
+                  Weiter →
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Sample content - scrollable */}
+          <div className="flex-1 overflow-y-auto m-4">
+            <div className="max-w-4xl mx-auto">
+              <div className="flex flex-col gap-4">
+                {viewElement}
+              </div>
+            </div>
+          </div>
+        </div>
      </div>
    </div>
  );
 }
+
--- a/src/components/AnnotationViews/AnnotationSidebarNavigation.tsx
+++ b/src/components/AnnotationViews/AnnotationSidebarNavigation.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import { DatasetEntryForAnnotation } from '@/lib/dialects';
+import { useEffect, useRef } from 'react';
+
+interface AnnotationSidebarNavigationProps {
+  entries: DatasetEntryForAnnotation[];
+  currentIndex: number;
+  onSelectEntry: (index: number) => void;
+  annotatedCount: number;
+}
+
+export default function AnnotationSidebarNavigation({
+  entries,
+  currentIndex,
+  onSelectEntry,
+  annotatedCount
+}: AnnotationSidebarNavigationProps) {
+  const progressPct = Math.round((annotatedCount / entries.length) * 100);
+  const activeButtonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    activeButtonRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  }, [currentIndex]);
+
+  return (
+    <aside className="hidden md:flex md:flex-col w-64 h-full bg-gray-50 border-r border-gray-200 p-4 overflow-hidden">
+      {/* Header - fixed at top */}
+      <div className="mb-6 flex-shrink-0">
+        <h2 className="font-semibold text-gray-900 mb-2">Fortschritt</h2>
+        <div className="space-y-2">
+          <div className="w-full bg-gray-200 rounded-full h-2.5">
+            <div
+              className="bg-blue-500 h-2.5 rounded-full transition-all duration-500"
+              style={{ width: `${progressPct}%` }}
+            />
+          </div>
+          <p className="text-xs text-gray-600">
+            {annotatedCount}/{entries.length} annotiert ({progressPct}%)
+          </p>
+        </div>
+      </div>
+
+      {/* Divider */}
+      <div className="border-b border-gray-200 mb-4 flex-shrink-0" />
+
+      {/* Entries List - scrollable middle section with max height */}
+      <div className="space-y-1 flex-1 min-h-0 overflow-hidden flex flex-col">
+        <h3 className="text-xs font-semibold text-gray-700 uppercase tracking-wide mb-3 px-2 flex-shrink-0">
+          Samples
+        </h3>
+        <div className="space-y-1 overflow-y-auto max-h-96">
+          {entries.map((entry, index) => (
+            <button
+              ref={index === currentIndex ? activeButtonRef : null}
+              key={entry.id}
+              onClick={() => onSelectEntry(index)}
+              className={`w-full text-left px-3 py-2 rounded-md text-sm transition-colors ${
+                index === currentIndex
+                  ? 'bg-blue-100 text-blue-900 border-l-4 border-blue-500 font-medium'
+                  : entry.annotation !== null
+                    ? 'bg-green-50 text-gray-700 hover:bg-green-100'
+                    : 'bg-white text-gray-700 hover:bg-gray-100'
+              }`}
+              title={`Entry ${index + 1}`}
+            >
+              <div className="flex items-center gap-2">
+                {/* Status indicator */}
+                <span
+                  className={`inline-block w-2 h-2 rounded-full flex-shrink-0 ${
+                    index === currentIndex
+                      ? 'bg-blue-600'
+                      : entry.annotation !== null
+                        ? 'bg-green-500'
+                        : 'bg-gray-300'
+                  }`}
+                />
+                {/* Entry number and filename */}
+                <span className="truncate">
+                  {index + 1}. {`Sample ${index + 1}`}
+                </span>
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+    </aside>
+  );
+}
--- a/src/components/AnnotationViews/SingleChoiceBinaryEntryView.tsx
+++ b/src/components/AnnotationViews/SingleChoiceBinaryEntryView.tsx
@@ -71,9 +71,9 @@ export default function SingleChoiceBinaryEntryView({

      {/* Dialect + question */}
      <div className="mt-4 mb-3">
-        <p className="text-sm font-semibold text-gray-700">
+        <div className="text-sm font-semibold text-gray-700">
          {question}
-        </p>
+        </div>
      </div>

      {/* Radio Select */}
--- a/src/components/AnnotationViews/SingleChoiceEntryView.tsx
+++ b/src/components/AnnotationViews/SingleChoiceEntryView.tsx
@@ -72,9 +72,9 @@ export default function SingleChoiceEntryView({

      {/* Dialect + question */}
      <div className="mt-4 mb-3">
-        <p className="text-sm font-semibold text-gray-700">
+        <div className="text-sm font-semibold text-gray-700">
          {question}
-        </p>
+        </div>
      </div>

      {/* Rating buttons */}
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -2,7 +2,7 @@ export function Footer() {
  const currentYear = new Date().getFullYear();

  return (
-    <footer className="bg-gray-800 text-gray-300 mt-12">
+    <footer className="bg-gray-800 text-gray-300">
      <div className="px-4 sm:px-6 lg:px-8 py-8">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
          <div>
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -2,9 +2,11 @@

 import { authClient } from '@/lib/auth-client';
 import Link from 'next/link';
+import { useState } from 'react';

 export function Header() {
  const { data: session, isPending: loading } = authClient.useSession();
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  const handleSignOut = async () => {
    try {
@@ -18,11 +20,14 @@ export function Header() {
    <header className="sticky top-0 z-50 bg-gradient-to-r from-blue-600 to-blue-700 text-white shadow-lg">
      <div className="px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center py-5">
-          <Link href="/" className="text-2xl font-bold hover:text-blue-100 transition-colors">
-            TTS Dialektannotations-Plattform
+          {/* Logo */}
+          <Link href="/" className="font-bold hover:text-blue-100 transition-colors text-lg sm:text-2xl">
+            <span className="hidden sm:inline">TTS Dialektannotations-Plattform</span>
+            <span className="sm:hidden">Dialektannotation</span>
          </Link>

-          <nav className="flex items-center gap-6">
+          {/* Desktop Navigation */}
+          <nav className="hidden md:flex items-center gap-6">
            {loading ? (
              <span className="text-sm text-blue-100">Laden...</span>
            ) : session ? (
@@ -55,8 +60,65 @@ export function Header() {
              </Link>
            )}
          </nav>
+
+          {/* Mobile Menu Button */}
+          <button
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+            className="md:hidden p-2"
+            title={mobileMenuOpen ? 'Menü schließen' : 'Menü öffnen'}
+          >
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              {mobileMenuOpen ? (
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              ) : (
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+              )}
+            </svg>
+          </button>
        </div>
      </div>
+
+      {/* Mobile Fullscreen Menu */}
+      {mobileMenuOpen && (
+        <div className="md:hidden fixed inset-0 top-16 bg-blue-700 z-40 flex flex-col p-4 space-y-4">
+          {loading ? (
+            <span className="text-sm text-blue-100">Laden...</span>
+          ) : session ? (
+            <>
+              <div className="text-center py-4 border-b border-blue-600">
+                <p className="text-xs text-blue-100 uppercase tracking-wide">Willkommen zurück</p>
+                <p className="text-sm font-semibold">{session.user?.email}</p>
+              </div>
+              {(session.user as any)?.admin && (
+                <Link
+                  href="/admin"
+                  onClick={() => setMobileMenuOpen(false)}
+                  className="px-4 py-3 bg-yellow-500 hover:bg-yellow-600 text-white font-semibold rounded-lg transition-colors text-center"
+                >
+                  Admin
+                </Link>
+              )}
+              <button
+                onClick={() => {
+                  handleSignOut();
+                  setMobileMenuOpen(false);
+                }}
+                className="px-4 py-3 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg transition-colors"
+              >
+                Abmelden
+              </button>
+            </>
+          ) : (
+            <Link
+              href="/user/sign-in"
+              onClick={() => setMobileMenuOpen(false)}
+              className="px-4 py-3 bg-green-500 hover:bg-green-600 text-white font-semibold rounded-lg transition-colors text-center"
+            >
+              Anmelden
+            </Link>
+          )}
+        </div>
+      )}
    </header>
  );
 }
--- a/src/components/WaveformPlayer.tsx
+++ b/src/components/WaveformPlayer.tsx
@@ -188,17 +188,22 @@ export default function WaveformPlayer({
          )}
        </button>

-        {/* Waveform canvas */}
+        {/* Waveform canvas - hidden on small screens */}
        <canvas
          ref={canvasRef}
          width={480}
          height={48}
-          className="flex-1 rounded"
+          className="hidden sm:flex flex-1 rounded"
          style={{ imageRendering: 'pixelated' }}
        />

-        {/* Duration */}
-        <span className="flex-shrink-0 text-sm text-gray-500 w-10 text-right tabular-nums">
+        {/* Time display - shown on small screens instead of waveform */}
+        <div className="sm:hidden text-sm text-gray-500 tabular-nums">
+          {fmt(currentTime)}/{fmt(duration)}
+        </div>
+
+        {/* Duration - hidden on small screens */}
+        <span className="hidden sm:flex flex-shrink-0 text-sm text-gray-500 w-10 text-right tabular-nums">
          {fmt(duration)}
        </span>
      </div>