Merge pull request #7 from BennyGK15/dev

Update tour overlay and reformat code for VerseOrderList

Author: BennyGK15

app/datenschutz/page.tsx

@@ -7,8 +7,7 @@ import { legalConfig } from "@/lib/legal";
 
 export const metadata: Metadata = {
     title: "Datenschutzerklärung – SongBeamer Song-Editor",
-    description:
-        "Datenschutzerklärung des SongBeamer Song-Editors gemäß DSGVO und BDSG.",
+    description: "Datenschutzerklärung des SongBeamer Song-Editors gemäß DSGVO und BDSG.",
 };
 
 export default function DatenschutzPage() {
@@ -69,7 +68,8 @@ export default function DatenschutzPage() {
                                 className="text-foreground underline underline-offset-4 hover:no-underline"
                             >
                                 Impressum
-                            </Link>.
+                            </Link>
+                            .
                         </p>
                     </CardContent>
                 </Card>
@@ -106,8 +106,8 @@ export default function DatenschutzPage() {
                         <p>
                             Diese Website wird auf Servern eines externen Hosting-Anbieters
                             betrieben. Beim Abrufen der Seiten werden durch den Hosting-Anbieter
-                            automatisch Zugriffsdaten in Server-Protokolldateien gespeichert.
-                            Dazu können gehören:
+                            automatisch Zugriffsdaten in Server-Protokolldateien gespeichert. Dazu
+                            können gehören:
                         </p>
                         <ul className="list-disc space-y-1 pl-5">
                             <li>IP-Adresse des anfragenden Geräts</li>
@@ -119,10 +119,10 @@ export default function DatenschutzPage() {
                         <p>
                             Rechtsgrundlage für diese Verarbeitung ist Art. 6 Abs. 1 lit. f DSGVO
                             (berechtigtes Interesse an dem sicheren und fehlerfreien Betrieb der
-                            Website). Die Protokolldaten werden nicht mit anderen
-                            personenbezogenen Daten zusammengeführt und nach spätestens
-                            {" "}{legalConfig.hostingRetentionDays} Tagen gelöscht, sofern keine gesetzliche Aufbewahrungspflicht
-                            besteht.
+                            Website). Die Protokolldaten werden nicht mit anderen personenbezogenen
+                            Daten zusammengeführt und nach spätestens{" "}
+                            {legalConfig.hostingRetentionDays} Tagen gelöscht, sofern keine
+                            gesetzliche Aufbewahrungspflicht besteht.
                         </p>
                         <p>Aktuell eingesetzter Hosting-Anbieter: {legalConfig.hostingProvider}.</p>
                     </CardContent>
@@ -182,10 +182,10 @@ export default function DatenschutzPage() {
                             >
                                 {legalConfig.websiteLabel}
                             </a>
-                            . Für die Inhalte und Datenschutzpraktiken dieser externen Seiten
-                            ist der jeweilige Anbieter verantwortlich. Beim Anklicken eines
-                            externen Links kann Ihre IP-Adresse an den jeweiligen Anbieter
-                            übermittelt werden.
+                            . Für die Inhalte und Datenschutzpraktiken dieser externen Seiten ist
+                            der jeweilige Anbieter verantwortlich. Beim Anklicken eines externen
+                            Links kann Ihre IP-Adresse an den jeweiligen Anbieter übermittelt
+                            werden.
                         </p>
                     </CardContent>
                 </Card>
@@ -202,8 +202,8 @@ export default function DatenschutzPage() {
                         </p>
                         <ul className="list-disc space-y-1 pl-5">
                             <li>
-                                <strong className="text-foreground">Auskunftsrecht</strong> über
-                                die zu Ihrer Person gespeicherten Daten (Art. 15 DSGVO)
+                                <strong className="text-foreground">Auskunftsrecht</strong> über die
+                                zu Ihrer Person gespeicherten Daten (Art. 15 DSGVO)
                             </li>
                             <li>
                                 <strong className="text-foreground">Recht auf Berichtigung</strong>{" "}
@@ -226,8 +226,8 @@ export default function DatenschutzPage() {
                                 (Art. 20 DSGVO)
                             </li>
                             <li>
-                                <strong className="text-foreground">Widerspruchsrecht</strong>{" "}
-                                gegen die Verarbeitung (Art. 21 DSGVO)
+                                <strong className="text-foreground">Widerspruchsrecht</strong> gegen
+                                die Verarbeitung (Art. 21 DSGVO)
                             </li>
                         </ul>
                         <p>
@@ -251,9 +251,9 @@ export default function DatenschutzPage() {
                     <CardContent className="text-muted-foreground space-y-3 text-sm leading-relaxed">
                         <p>
                             Sie haben das Recht, sich bei einer Datenschutz-Aufsichtsbehörde über
-                            die Verarbeitung Ihrer personenbezogenen Daten zu beschweren
-                            (Art. 77 DSGVO). Die zuständige Aufsichtsbehörde richtet sich nach
-                            Ihrem gewöhnlichen Aufenthaltsort, Ihrem Arbeitsort oder dem Ort des
+                            die Verarbeitung Ihrer personenbezogenen Daten zu beschweren (Art. 77
+                            DSGVO). Die zuständige Aufsichtsbehörde richtet sich nach Ihrem
+                            gewöhnlichen Aufenthaltsort, Ihrem Arbeitsort oder dem Ort des
                             mutmaßlichen Verstoßes.
                         </p>
                     </CardContent>
@@ -266,10 +266,11 @@ export default function DatenschutzPage() {
                     </CardHeader>
                     <CardContent className="text-muted-foreground space-y-3 text-sm leading-relaxed">
                         <p>
-                            Diese Datenschutzerklärung hat den Stand {legalConfig.effectiveDateLabel}. Durch die
-                            Weiterentwicklung der Anwendung oder geänderte gesetzliche Vorgaben
-                            kann eine Anpassung erforderlich werden. Die jeweils aktuelle Fassung
-                            ist stets unter dieser URL abrufbar.
+                            Diese Datenschutzerklärung hat den Stand{" "}
+                            {legalConfig.effectiveDateLabel}. Durch die Weiterentwicklung der
+                            Anwendung oder geänderte gesetzliche Vorgaben kann eine Anpassung
+                            erforderlich werden. Die jeweils aktuelle Fassung ist stets unter dieser
+                            URL abrufbar.
                         </p>
                     </CardContent>
                 </Card>

app/impressum/page.tsx

@@ -58,7 +58,7 @@ export default function ImpressumPage() {
                         </p>
                         {legalConfig.websiteUrl !== "https://example.com" && (
                             <p>
-                                Website: {" "}
+                                Website:{" "}
                                 <a
                                     href={legalConfig.websiteUrl}
                                     target="_blank"
@@ -91,7 +91,8 @@ export default function ImpressumPage() {
                             )}
                             {legalConfig.churchSupervisoryAuthority && (
                                 <p>
-                                    Zuständige kirchliche Aufsicht: {legalConfig.churchSupervisoryAuthority}
+                                    Zuständige kirchliche Aufsicht:{" "}
+                                    {legalConfig.churchSupervisoryAuthority}
                                 </p>
                             )}
                         </CardContent>
@@ -133,7 +134,8 @@ export default function ImpressumPage() {
                     </CardHeader>
                     <CardContent className="text-muted-foreground text-sm leading-relaxed">
                         <p>
-                            Die grundlegende technische Anwendung wurde entwickelt von {legalConfig.appDeveloper}.
+                            Die grundlegende technische Anwendung wurde entwickelt von{" "}
+                            {legalConfig.appDeveloper}.
                         </p>
                     </CardContent>
                 </Card>

app/layout.tsx

@@ -4,34 +4,34 @@ import "./globals.css";
 import { SiteFooter } from "@/components/site-footer";
 
 const inter = Inter({
-  variable: "--font-inter",
-  subsets: ["latin"],
-  display: "swap",
+    variable: "--font-inter",
+    subsets: ["latin"],
+    display: "swap",
 });
 
 export const metadata: Metadata = {
-  title: "SongBeamer Song-Editor",
-  description:
-    "Erstelle SongBeamer .sng-Dateien einfach im Browser – inkl. Metadaten, mehrsprachigen Texten und Export.",
+    title: "SongBeamer Song-Editor",
+    description:
+        "Erstelle SongBeamer .sng-Dateien einfach im Browser – inkl. Metadaten, mehrsprachigen Texten und Export.",
 };
 
 export default function RootLayout({
-  children,
+    children,
 }: Readonly<{
-  children: React.ReactNode;
+    children: React.ReactNode;
 }>) {
-  return (
-    <html lang="de" className={inter.variable}>
-      <body className="antialiased">
-        <a
-          href="#main-content"
-          className="focus:bg-background sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-100 focus:rounded-md focus:px-3 focus:py-2 focus:text-sm focus:shadow"
-        >
-          Zum Hauptinhalt springen
-        </a>
-        {children}
-        <SiteFooter />
-      </body>
-    </html>
-  );
+    return (
+        <html lang="de" className={inter.variable}>
+            <body className="antialiased">
+                <a
+                    href="#main-content"
+                    className="focus:bg-background sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-100 focus:rounded-md focus:px-3 focus:py-2 focus:text-sm focus:shadow"
+                >
+                    Zum Hauptinhalt springen
+                </a>
+                {children}
+                <SiteFooter />
+            </body>
+        </html>
+    );
 }

app/page.tsx

@@ -7,33 +7,33 @@ import { SongForm } from "@/components/song-form";
 import { Button } from "@/components/ui/button";
 
 export default function Home() {
-  const [tourStartSignal, setTourStartSignal] = useState(0);
+    const [tourStartSignal, setTourStartSignal] = useState(0);
 
-  return (
-    <main id="main-content" className="bg-background flex min-h-screen flex-col pt-8 pb-28">
-      <div className="mx-auto w-full max-w-4xl space-y-6 px-4">
-        <div className="flex flex-wrap items-start justify-between gap-4">
-          <div>
-            <h1 className="text-2xl font-bold tracking-tight sm:text-3xl">
-              SongBeamer Song-Editor
-            </h1>
-            <p className="text-muted-foreground mt-1">
-              Erstelle .sng-Dateien für SongBeamer ohne Formatkenntnisse.
-            </p>
-          </div>
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            onClick={() => setTourStartSignal((prev) => prev + 1)}
-            className="shrink-0"
-          >
-            <Compass className="mr-2 h-4 w-4" />
-            Produkttour starten
-          </Button>
-        </div>
-        <SongForm tourStartSignal={tourStartSignal} />
-      </div>
-    </main>
-  );
+    return (
+        <main id="main-content" className="bg-background flex min-h-screen flex-col pt-8 pb-28">
+            <div className="mx-auto w-full max-w-4xl space-y-6 px-4">
+                <div className="flex flex-wrap items-start justify-between gap-4">
+                    <div>
+                        <h1 className="text-2xl font-bold tracking-tight sm:text-3xl">
+                            SongBeamer Song-Editor
+                        </h1>
+                        <p className="text-muted-foreground mt-1">
+                            Erstelle .sng-Dateien für SongBeamer ohne Formatkenntnisse.
+                        </p>
+                    </div>
+                    <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setTourStartSignal((prev) => prev + 1)}
+                        className="shrink-0"
+                    >
+                        <Compass className="mr-2 h-4 w-4" />
+                        Produkttour starten
+                    </Button>
+                </div>
+                <SongForm tourStartSignal={tourStartSignal} />
+            </div>
+        </main>
+    );
 }

components/export-dialog/ExportDialog.tsx

@@ -80,7 +80,7 @@ export function ExportDialog({
                 <div className="min-h-0 flex-1 overflow-auto">
                     <pre
                         aria-label="Vorschau des generierten SNG-Inhalts"
-                        className="text-foreground/90 p-4 font-mono text-xs leading-relaxed whitespace-pre select-all overflow-x-auto"
+                        className="text-foreground/90 overflow-x-auto p-4 font-mono text-xs leading-relaxed whitespace-pre select-all"
                     >
                         {sngContent}
                     </pre>

components/section-editor.tsx

@@ -188,8 +188,8 @@ export function SectionEditor({
                             Number(langCount) === 3
                                 ? "grid gap-3 sm:grid-cols-3"
                                 : Number(langCount) === 2
-                                    ? "grid gap-3 sm:grid-cols-2"
-                                    : ""
+                                  ? "grid gap-3 sm:grid-cols-2"
+                                  : ""
                         }
                     >
                         {Array.from({ length: Math.max(Number(langCount), 1) }, (_, l) => (

components/site-footer.tsx

@@ -6,7 +6,10 @@ export function SiteFooter() {
             <div className="mx-auto flex w-full max-w-4xl flex-col gap-2 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:py-4">
                 <span>© Benjamin Esenwein · v{process.env.NEXT_PUBLIC_APP_VERSION}</span>
                 <nav aria-label="Rechtliches" className="flex flex-wrap gap-x-4 gap-y-2">
-                    <Link href="/ki-hinweis" className="hover:text-foreground underline-offset-4 hover:underline">
+                    <Link
+                        href="/ki-hinweis"
+                        className="hover:text-foreground underline-offset-4 hover:underline"
+                    >
                         KI-Hinweis
                     </Link>
                     <Link
@@ -27,4 +30,4 @@ export function SiteFooter() {
             </div>
         </footer>
     );
-}
+}

components/slide-preview-dialog/SlidePreviewDialog.tsx

@@ -75,7 +75,8 @@ export function SlidePreviewDialog({ open, onOpenChange, data }: SlidePreviewDia
 
                 <div className="flex flex-col gap-2 px-5 py-4 sm:flex-row sm:items-center sm:justify-between">
                     <p className="text-muted-foreground text-xs">
-                        Grundlage: Abschnittsreihenfolge, Abspielreihenfolge und Sprach-Interleaving.
+                        Grundlage: Abschnittsreihenfolge, Abspielreihenfolge und
+                        Sprach-Interleaving.
                     </p>
                     <div className="flex items-center gap-2">
                         <Button

components/song-form/SongForm.tsx

@@ -2,13 +2,7 @@
 
 import type { ChangeEvent } from "react";
 import { useEffect, useRef, useState } from "react";
-import {
-    FormProvider,
-    useFieldArray,
-    useForm,
-    useWatch,
-    type Resolver,
-} from "react-hook-form";
+import { FormProvider, useFieldArray, useForm, useWatch, type Resolver } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
     KeyboardSensor,
@@ -265,7 +259,10 @@ export function SongForm({ tourStartSignal = 0 }: { tourStartSignal?: number })
         const sections = getValues("sections");
         sections.forEach((section, index) => {
             const currentTexts = section.texts ?? [];
-            const updated = Array.from({ length: count }, (_, textIndex) => currentTexts[textIndex] ?? "");
+            const updated = Array.from(
+                { length: count },
+                (_, textIndex) => currentTexts[textIndex] ?? ""
+            );
             setValue(`sections.${index}.texts`, updated, { shouldDirty: true });
         });
     }
@@ -303,7 +300,9 @@ export function SongForm({ tourStartSignal = 0 }: { tourStartSignal?: number })
 
     useEffect(() => {
         const sections = getValues("sections");
-        const signature = sections.map((section) => `${section.id}|${section.type}|${section.number}`).join("||");
+        const signature = sections
+            .map((section) => `${section.id}|${section.type}|${section.number}`)
+            .join("||");
 
         if (prevStructureSignatureRef.current === null) {
             prevStructureSignatureRef.current = signature;