feat: add audio clip annotation view for dialect rating

src/app/actions/annotations.ts

@@ -0,0 +1,135 @@
+'use server';
+
+import db from '@/lib/db';
+import { dataset_entry } from '@/lib/model/dataset_entry';
+import { dataset } from '@/lib/model/dataset';
+import { annotation } from '@/lib/model/annotation';
+import { eq, and } from 'drizzle-orm';
+import { auth } from '@/lib/auth';
+import { headers } from 'next/headers';
+import type { AnnotationEntry } from '@/lib/dialects';
+
+/**
+ * Returns shuffled unannotated entries for the given dataset and authenticated user.
+ * Consecutive entries will never share the same externalId.
+ */
+export async function getAnnotationEntries(datasetId: number): Promise<AnnotationEntry[]> {
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (!session) throw new Error('Nicht angemeldet');
+
+  const allEntries = await db
+    .select()
+    .from(dataset_entry)
+    .where(eq(dataset_entry.datasetId, datasetId));
+
+  if (allEntries.length === 0) return [];
+
+  // Find entries already annotated by this user in this dataset (via join)
+  const annotated = await db
+    .select({ entryId: annotation.datasetEntryId })
+    .from(annotation)
+    .innerJoin(dataset_entry, eq(annotation.datasetEntryId, dataset_entry.id))
+    .where(
+      and(
+        eq(annotation.userId, session.user.id),
+        eq(dataset_entry.datasetId, datasetId)
+      )
+    );
+
+  const annotatedIds = new Set(annotated.map((a) => a.entryId));
+  const remaining = allEntries.filter((e) => !annotatedIds.has(e.id));
+
+  const mapped: AnnotationEntry[] = remaining.map((e) => ({
+    id: e.id,
+    externalId: e.externalId,
+    fileName: e.fileName,
+    dialect: e.dialect,
+    durationMs: e.durationMs,
+    datasetId: e.datasetId,
+  }));
+
+  return shuffleWithConstraint(mapped);
+}
+
+/**
+ * Persists a batch of ratings for the authenticated user.
+ * Silently ignores duplicates (onConflictDoNothing).
+ */
+export async function saveAnnotations(
+  ratings: { entryId: number; rating: number; dialectLabel: string }[]
+): Promise<void> {
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (!session) throw new Error('Nicht angemeldet');
+
+  if (ratings.length === 0) return;
+
+  for (const { entryId, rating, dialectLabel } of ratings) {
+    await db
+      .insert(annotation)
+      .values({ datasetEntryId: entryId, userId: session.user.id, rating, dialectLabel })
+      .onConflictDoNothing();
+  }
+}
+
+/** Returns all datasets (for the home page). */
+export async function getAllDatasets() {
+  return db.select().from(dataset).orderBy(dataset.name);
+}
+
+/** Returns annotation progress for the current user in a dataset. */
+export async function getAnnotationProgress(
+  datasetId: number
+): Promise<{ total: number; done: number }> {
+  const session = await auth.api.getSession({ headers: await headers() });
+
+  const allEntries = await db
+    .select({ id: dataset_entry.id })
+    .from(dataset_entry)
+    .where(eq(dataset_entry.datasetId, datasetId));
+
+  if (!session || allEntries.length === 0) {
+    return { total: allEntries.length, done: 0 };
+  }
+
+  const annotated = await db
+    .select({ entryId: annotation.datasetEntryId })
+    .from(annotation)
+    .innerJoin(dataset_entry, eq(annotation.datasetEntryId, dataset_entry.id))
+    .where(
+      and(
+        eq(annotation.userId, session.user.id),
+        eq(dataset_entry.datasetId, datasetId)
+      )
+    );
+
+  return { total: allEntries.length, done: annotated.length };
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** Fisher-Yates shuffle with a greedy fix for consecutive same externalId. */
+function shuffleWithConstraint(entries: AnnotationEntry[]): AnnotationEntry[] {
+  if (entries.length <= 1) return entries;
+
+  const arr = [...entries];
+  for (let i = arr.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [arr[i], arr[j]] = [arr[j], arr[i]];
+  }
+
+  // Single-pass greedy fix
+  for (let i = 1; i < arr.length; i++) {
+    if (arr[i].externalId === arr[i - 1].externalId) {
+      for (let j = i + 1; j < arr.length; j++) {
+        if (arr[j].externalId !== arr[i - 1].externalId) {
+          [arr[i], arr[j]] = [arr[j], arr[i]];
+          break;
+        }
+      }
+    }
+  }
+
+  return arr;
+}

src/app/annotate/[datasetId]/page.tsx

@@ -0,0 +1,53 @@
+import { redirect } from 'next/navigation';
+import { headers } from 'next/headers';
+import Link from 'next/link';
+import { auth } from '@/lib/auth';
+import { getAnnotationEntries } from '@/app/actions/annotations';
+import AnnotationView from '@/components/AnnotationView';
+
+interface Props {
+  params: Promise<{ datasetId: string }>;
+}
+
+export default async function AnnotatePage({ params }: Props) {
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (!session) redirect('/user/sign-in');
+
+  const { datasetId: datasetIdStr } = await params;
+  const datasetId = parseInt(datasetIdStr, 10);
+
+  if (isNaN(datasetId)) {
+    return (
+      <div className="max-w-xl mx-auto py-16 text-center">
+        <p className="text-gray-600">Ungültige Dataset-ID.</p>
+        <Link href="/" className="text-blue-600 hover:underline mt-4 inline-block">
+          ← Startseite
+        </Link>
+      </div>
+    );
+  }
+
+  const entries = await getAnnotationEntries(datasetId);
+
+  if (entries.length === 0) {
+    return (
+      <div className="max-w-xl mx-auto py-20 text-center">
+        <div className="text-5xl mb-4">✓</div>
+        <h1 className="text-2xl font-bold text-green-600 mb-3">
+          Alle Samples bewertet!
+        </h1>
+        <p className="text-gray-600 mb-8">
+          Sie haben alle Samples in diesem Dataset bereits bewertet. Danke für Ihre Mitarbeit!
+        </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>
+    );
+  }
+
+  return <AnnotationView entries={entries} datasetId={datasetId} />;
+}

src/app/page.tsx

@@ -1,5 +1,109 @@
-"use client";
+import Link from 'next/link';
+import { headers } from 'next/headers';
+import { auth } from '@/lib/auth';
+import { getAllDatasets, getAnnotationProgress } from '@/app/actions/annotations';
 
-export default function Page() {
-  return <h1>Hello Next.js!</h1>
-}
+export default async function HomePage() {
+  const session = await auth.api.getSession({ headers: await headers() });
+
+  if (!session) {
+    return (
+      <div className="max-w-xl mx-auto text-center py-20">
+        <h1 className="text-3xl font-bold text-gray-800 mb-4">
+          Willkommen zur Dialektannotation
+        </h1>
+        <p className="text-gray-600 mb-8">
+          Bitte melden Sie sich an, um mit der Annotation zu beginnen.
+        </p>
+        <Link
+          href="/user/sign-in"
+          className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors"
+        >
+          Anmelden
+        </Link>
+      </div>
+    );
+  }
+
+  const datasets = await getAllDatasets();
+
+  if (datasets.length === 0) {
+    return (
+      <div className="max-w-xl mx-auto text-center py-20">
+        <h1 className="text-2xl font-bold text-gray-800 mb-3">
+          Keine Datasets verfügbar
+        </h1>
+        <p className="text-gray-500">
+          Es wurden noch keine Datasets angelegt. Wenden Sie sich an einen Administrator.
+        </p>
+      </div>
+    );
+  }
+
+  // Fetch progress for all datasets in parallel
+  const progressData = await Promise.all(
+    datasets.map((ds) => getAnnotationProgress(ds.id))
+  );
+
+  return (
+    <div className="max-w-2xl mx-auto py-8">
+      <h1 className="text-2xl font-bold text-gray-800 mb-2">Datasets</h1>
+      <p className="text-gray-500 mb-8">
+        Wählen Sie ein Dataset aus, um mit der Annotation zu beginnen oder fortzufahren.
+      </p>
+
+      <div className="flex flex-col gap-4">
+        {datasets.map((ds, i) => {
+          const { total, done } = progressData[i];
+          const pct = total > 0 ? Math.round((done / total) * 100) : 0;
+          const isFinished = total > 0 && done >= total;
+
+          return (
+            <div
+              key={ds.id}
+              className="bg-white border border-gray-200 rounded-xl p-5 shadow-sm"
+            >
+              <div className="flex items-start justify-between gap-4">
+                <div className="flex-1 min-w-0">
+                  <h2 className="font-semibold text-gray-800 truncate">{ds.name}</h2>
+                  {ds.description && (
+                    <p className="text-sm text-gray-500 mt-0.5">{ds.description}</p>
+                  )}
+
+                  {/* Progress */}
+                  <div className="mt-3">
+                    <div className="flex justify-between text-xs text-gray-400 mb-1">
+                      <span>{done} / {total} bewertet</span>
+                      <span>{pct}%</span>
+                    </div>
+                    <div className="w-full bg-gray-200 rounded-full h-2">
+                      <div
+                        className={`h-2 rounded-full transition-all ${
+                          isFinished ? 'bg-green-500' : 'bg-blue-500'
+                        }`}
+                        style={{ width: `${pct}%` }}
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                <Link
+                  href={`/annotate/${ds.id}`}
+                  className={`flex-shrink-0 px-4 py-2 rounded-lg font-medium text-sm transition-colors ${
+                    isFinished
+                      ? 'bg-green-100 text-green-700 hover:bg-green-200'
+                      : done > 0
+                      ? 'bg-blue-600 hover:bg-blue-700 text-white'
+                      : 'bg-blue-600 hover:bg-blue-700 text-white'
+                  }`}
+                >
+                  {isFinished ? '✓ Fertig' : done > 0 ? 'Fortsetzen' : 'Starten'}
+                </Link>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

src/components/AnnotationView.tsx

@@ -0,0 +1,227 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+import Link from 'next/link';
+import WaveformPlayer from './WaveformPlayer';
+import { saveAnnotations } from '@/app/actions/annotations';
+import { type AnnotationEntry, DIALECT_LABELS } from '@/lib/dialects';
+
+const PAGE_SIZE = 5;
+
+const RATING_OPTIONS = (dialectLabel: string) => [
+  { value: 1, label: `Klingt überhaupt nicht nach ${dialectLabel}` },
+  { value: 2, label: `Klingt eher nicht nach ${dialectLabel}` },
+  { value: 3, label: 'Schwer zu beurteilen' },
+  { value: 4, label: `Klingt eher nach ${dialectLabel}` },
+  { value: 5, label: `Klingt eindeutig nach ${dialectLabel}` },
+];
+
+interface AnnotationViewProps {
+  entries: AnnotationEntry[];
+  datasetId: number;
+}
+
+export default function AnnotationView({ entries, datasetId }: AnnotationViewProps) {
+
+  const [isPending, startTransition] = useTransition();
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const [answers, setAnswers] = useState<Record<number, number>>({});
+  const [fullyPlayed, setFullyPlayed] = useState<Set<number>>(new Set());
+  const [activePlayerId, setActivePlayerId] = useState<number | null>(null);
+  const [showHint, setShowHint] = useState(false);
+  const [isComplete, setIsComplete] = useState(false);
+
+  const totalPages = Math.ceil(entries.length / PAGE_SIZE);
+  const pageEntries = entries.slice(currentPage * PAGE_SIZE, (currentPage + 1) * PAGE_SIZE);
+  const progressPct = Math.round((currentPage / totalPages) * 100);
+
+  const allCurrentDone =
+    pageEntries.length > 0 &&
+    pageEntries.every((e) => fullyPlayed.has(e.id) && answers[e.id] !== undefined);
+
+  const handleWeiter = () => {
+    if (!allCurrentDone) {
+      setShowHint(true);
+      return;
+    }
+    setShowHint(false);
+
+    const batch = pageEntries.map((e) => ({ entryId: e.id, rating: answers[e.id], dialectLabel: e.dialect }));
+    startTransition(async () => {
+      await saveAnnotations(batch);
+      if (currentPage + 1 >= totalPages) {
+        setIsComplete(true);
+      } else {
+        setCurrentPage((p) => p + 1);
+        setActivePlayerId(null);
+      }
+    });
+  };
+
+  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>
+    );
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto">
+      {/* ── Top bar ─────────────────────────────────────────── */}
+      <div className="sticky top-[72px] z-40 bg-white border-b border-gray-200 pb-3 mb-6">
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-sm text-gray-500">
+            Seite {currentPage + 1} von {totalPages}
+          </span>
+          <Link
+            href="/"
+            className="text-sm px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-md transition-colors"
+          >
+            ← Zurück zur Startseite
+          </Link>
+        </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>
+        <div className="text-xs text-gray-400 mt-1 text-right">{progressPct}% abgeschlossen</div>
+      </div>
+
+      {/* ── Sample cards ────────────────────────────────────── */}
+      <div className="flex flex-col gap-6">
+        {pageEntries.map((entry, idx) => {
+          const dialectLabel = DIALECT_LABELS[entry.dialect] ?? entry.dialect;
+          const fileExt = entry.fileName.substring(entry.fileName.lastIndexOf('.'));
+          const audioSrc = `/public/datasets/${datasetId}/${entry.externalId}${fileExt}`;
+          const isListened = fullyPlayed.has(entry.id);
+          const currentRating = answers[entry.id] ?? null;
+
+          return (
+            <div
+              key={entry.id}
+              className={`border rounded-xl p-5 bg-white shadow-sm transition-colors ${
+                isListened && currentRating !== null
+                  ? 'border-green-300'
+                  : 'border-gray-200'
+              }`}
+            >
+              {/* Sample header */}
+              <div className="flex items-center justify-between mb-3">
+                <span className="text-xs font-medium text-gray-400 uppercase tracking-wide">
+                  Sample {currentPage * PAGE_SIZE + idx + 1}
+                </span>
+                {isListened && (
+                  <span className="text-xs text-green-600 font-medium">
+                    ✓ Gehört
+                  </span>
+                )}
+              </div>
+
+              {/* Waveform player */}
+              <WaveformPlayer
+                src={audioSrc}
+                durationMs={entry.durationMs}
+                isActive={activePlayerId === entry.id}
+                onPlay={() => setActivePlayerId(entry.id)}
+                onFullyPlayed={() =>
+                  setFullyPlayed((prev) => {
+                    const next = new Set(prev);
+                    next.add(entry.id);
+                    return next;
+                  })
+                }
+              />
+
+              {/* Must-listen hint */}
+              {!isListened && (
+                <p className="text-xs text-amber-600 mt-2">
+                  Bitte das Sample vollständig anhören, bevor Sie eine Bewertung abgeben.
+                </p>
+              )}
+
+              {/* Dialect + question */}
+              <div className="mt-4 mb-3">
+                <p className="text-sm font-semibold text-gray-700">
+                  Wie authentisch klingt dieses Sample nach dem Dialekt der Region{' '}
+                  <span className="text-blue-600">{dialectLabel}</span>?
+                </p>
+              </div>
+
+              {/* Rating buttons */}
+              <div className="flex flex-col gap-2">
+                {RATING_OPTIONS(dialectLabel).map(({ value, label }) => {
+                  const selected = currentRating === value;
+                  const disabled = !isListened;
+                  return (
+                    <button
+                      key={value}
+                      disabled={disabled}
+                      onClick={() =>
+                        setAnswers((prev) => ({ ...prev, [entry.id]: value }))
+                      }
+                      className={`flex items-center gap-3 w-full text-left px-4 py-2.5 rounded-lg border text-sm transition-colors ${
+                        disabled
+                          ? 'opacity-40 cursor-not-allowed border-gray-200 bg-gray-50 text-gray-500'
+                          : selected
+                          ? 'border-blue-500 bg-blue-50 text-blue-800 font-medium'
+                          : 'border-gray-200 hover:border-blue-300 hover:bg-blue-50 text-gray-700'
+                      }`}
+                    >
+                      <span
+                        className={`flex-shrink-0 w-6 h-6 rounded-full border-2 flex items-center justify-center text-xs font-bold ${
+                          selected
+                            ? 'border-blue-500 bg-blue-500 text-white'
+                            : 'border-gray-300 text-gray-400'
+                        }`}
+                      >
+                        {value}
+                      </span>
+                      {label}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* ── Navigation ──────────────────────────────────────── */}
+      <div className="mt-8 mb-12 flex flex-col items-end gap-2">
+        {showHint && !allCurrentDone && (
+          <p className="text-sm text-red-600">
+            Bitte alle{' '}
+            {pageEntries.length < PAGE_SIZE ? pageEntries.length : PAGE_SIZE}{' '}
+            Samples vollständig anhören und bewerten, bevor Sie fortfahren.
+          </p>
+        )}
+        <button
+          onClick={handleWeiter}
+          disabled={isPending}
+          className={`px-8 py-3 rounded-lg font-semibold text-white transition-colors ${
+            allCurrentDone && !isPending
+              ? 'bg-blue-600 hover:bg-blue-700 cursor-pointer'
+              : 'bg-gray-300 cursor-not-allowed'
+          }`}
+        >
+          {isPending ? 'Speichern…' : currentPage + 1 >= totalPages ? 'Abschließen' : 'Weiter →'}
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/WaveformPlayer.tsx

@@ -0,0 +1,187 @@
+'use client';
+
+import { useEffect, useRef, useState, useCallback } from 'react';
+
+interface WaveformPlayerProps {
+  src: string;
+  durationMs?: number | null;
+  /** When false the player should stop if it was playing */
+  isActive: boolean;
+  onPlay: () => void;
+  onFullyPlayed: () => void;
+}
+
+const BAR_COUNT = 120;
+
+export default function WaveformPlayer({
+  src,
+  durationMs,
+  isActive,
+  onPlay,
+  onFullyPlayed,
+}: WaveformPlayerProps) {
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const rafRef = useRef<number>(0);
+
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState<number>(durationMs ? durationMs / 1000 : 0);
+  const [peaks, setPeaks] = useState<number[]>([]);
+  const fullyPlayedRef = useRef(false);
+
+  // Stop if another player became active
+  useEffect(() => {
+    if (!isActive && isPlaying) {
+      audioRef.current?.pause();
+      cancelAnimationFrame(rafRef.current);
+      setIsPlaying(false);
+    }
+  }, [isActive, isPlaying]);
+
+  // Decode audio and generate waveform peaks
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const res = await fetch(src);
+        const buf = await res.arrayBuffer();
+        const actx = new AudioContext();
+        const decoded = await actx.decodeAudioData(buf);
+        if (cancelled) return;
+
+        const data = decoded.getChannelData(0);
+        const blockSize = Math.floor(data.length / BAR_COUNT);
+        const raw: number[] = [];
+        for (let i = 0; i < BAR_COUNT; i++) {
+          let sum = 0;
+          for (let j = 0; j < blockSize; j++) {
+            sum += Math.abs(data[i * blockSize + j]);
+          }
+          raw.push(sum / blockSize);
+        }
+        const max = Math.max(...raw, 0.001);
+        if (!cancelled) setPeaks(raw.map((v) => v / max));
+        await actx.close();
+      } catch {
+        if (!cancelled) setPeaks(Array(BAR_COUNT).fill(0.5));
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [src]);
+
+  // Draw waveform on canvas whenever peaks or playback position change
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || peaks.length === 0) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    const { width, height } = canvas;
+    ctx.clearRect(0, 0, width, height);
+    const progress = duration > 0 ? Math.min(currentTime / duration, 1) : 0;
+    const barW = Math.max(1, width / BAR_COUNT - 1);
+
+    peaks.forEach((peak, i) => {
+      const x = (i / BAR_COUNT) * width;
+      const barH = Math.max(2, peak * height * 0.85);
+      const y = (height - barH) / 2;
+      const played = i / BAR_COUNT < progress;
+      ctx.fillStyle = played ? '#3b82f6' : '#d1d5db';
+      ctx.beginPath();
+      ctx.roundRect(x, y, barW, barH, 2);
+      ctx.fill();
+    });
+  }, [peaks, currentTime, duration]);
+
+  const tick = useCallback(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    setCurrentTime(audio.currentTime);
+    rafRef.current = requestAnimationFrame(tick);
+  }, []);
+
+  const handlePlay = () => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    onPlay();
+    audio.play();
+    setIsPlaying(true);
+    rafRef.current = requestAnimationFrame(tick);
+  };
+
+  const handlePause = () => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    audio.pause();
+    setIsPlaying(false);
+    cancelAnimationFrame(rafRef.current);
+  };
+
+  const handleEnded = () => {
+    setIsPlaying(false);
+    cancelAnimationFrame(rafRef.current);
+    if (!fullyPlayedRef.current) {
+      fullyPlayedRef.current = true;
+      onFullyPlayed();
+    }
+  };
+
+  const handleLoadedMetadata = () => {
+    if (audioRef.current) setDuration(audioRef.current.duration);
+  };
+
+  const fmt = (s: number) => {
+    const m = Math.floor(s / 60);
+    const sec = Math.floor(s % 60);
+    return `${m}:${sec.toString().padStart(2, '0')}`;
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      <audio
+        ref={audioRef}
+        src={src}
+        onEnded={handleEnded}
+        onLoadedMetadata={handleLoadedMetadata}
+        preload="metadata"
+      />
+      <div className="flex items-center gap-3">
+        {/* Play / Pause button */}
+        <button
+          onClick={isPlaying ? handlePause : handlePlay}
+          className={`flex-shrink-0 inline-flex items-center justify-center w-9 h-9 rounded-full transition-colors ${
+            isPlaying
+              ? 'bg-red-500 hover:bg-red-600 text-white'
+              : 'bg-blue-500 hover:bg-blue-600 text-white'
+          }`}
+          title={isPlaying ? 'Pause' : 'Abspielen'}
+        >
+          {isPlaying ? (
+            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+              <rect x="5" y="4" width="3" height="12" rx="1" />
+              <rect x="12" y="4" width="3" height="12" rx="1" />
+            </svg>
+          ) : (
+            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+              <path d="M6.3 2.841A1.5 1.5 0 004 4.11v11.78a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
+            </svg>
+          )}
+        </button>
+
+        {/* Waveform canvas */}
+        <canvas
+          ref={canvasRef}
+          width={480}
+          height={48}
+          className="flex-1 rounded"
+          style={{ imageRendering: 'pixelated' }}
+        />
+
+        {/* Duration */}
+        <span className="flex-shrink-0 text-sm text-gray-500 w-10 text-right tabular-nums">
+          {fmt(duration)}
+        </span>
+      </div>
+    </div>
+  );
+}

src/lib/dialects.ts

@@ -0,0 +1,19 @@
+export const DIALECT_LABELS: Record<string, string> = {
+  ch_be: 'Bern',
+  ch_bs: 'Basel',
+  ch_gr: 'Graubünden',
+  ch_in: 'Innerschweiz',
+  ch_os: 'Ostschweiz',
+  ch_vs: 'Wallis',
+  ch_zh: 'Zürich',
+  de: 'Deutsch',
+};
+
+export type AnnotationEntry = {
+  id: number;
+  externalId: string;
+  fileName: string;
+  dialect: string;
+  durationMs: number | null;
+  datasetId: number;
+};

src/lib/model/annotation.ts

@@ -0,0 +1,36 @@
+import { sqliteTable, text, integer, uniqueIndex } from 'drizzle-orm/sqlite-core';
+import { relations, sql } from 'drizzle-orm';
+import { dataset_entry } from './dataset_entry';
+
+export const annotation = sqliteTable(
+  'annotation',
+  {
+    id: integer('id').primaryKey({ autoIncrement: true }),
+    datasetEntryId: integer('dataset_entry_id')
+      .notNull()
+      .references(() => dataset_entry.id),
+    userId: text('user_id').notNull(),
+    rating: integer('rating').notNull(), // 1–5
+    dialectLabel: text('dialect_label').notNull(), // e.g. 'ch_be', 'ch_zh', …
+    createdAt: integer('created_at', { mode: 'timestamp' })
+      .notNull()
+      .default(sql`(unixepoch())`),
+  },
+  (table) => [
+    uniqueIndex('annotation_user_entry_dialect_idx').on(
+      table.userId,
+      table.datasetEntryId,
+      table.dialectLabel
+    ),
+  ]
+);
+
+export const annotationRelations = relations(annotation, ({ one }) => ({
+  datasetEntry: one(dataset_entry, {
+    fields: [annotation.datasetEntryId],
+    references: [dataset_entry.id],
+  }),
+}));
+
+export type Annotation = typeof annotation.$inferSelect;
+export type NewAnnotation = typeof annotation.$inferInsert;