feat: gemeinsames App-Design mit Seitenleiste, globalem Theme und neuem Login

app/settings/page.tsx

@@ -1,39 +1,50 @@
 import Link from "next/link";
+import Shell from "../components/shell";
 import { getDb } from "@/lib/db";
 import { DEFAULT_TAGE_VORHER } from "@/lib/settings";
 import { TestButtons } from "./test-buttons";
 
 export const dynamic = "force-dynamic";
 
+function Card({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <section className="rounded-card border border-line bg-white p-5">
+      <h2 className="text-[15px] font-semibold tracking-tight">{title}</h2>
+      <div className="mt-2 text-sm text-muted">{children}</div>
+    </section>
+  );
+}
+
 export default async function SettingsPage() {
   const db = getDb();
   const last = await db.notificationLog.findFirst({ orderBy: { sentAt: "desc" } });
   return (
-    <main className="mx-auto max-w-xl space-y-4 p-6">
-      <Link href="/" className="text-sm underline">← Zurück</Link>
-      <h1 className="text-xl font-bold">Einstellungen</h1>
-      <section className="rounded border p-4">
-        <h2 className="font-medium">Standard-Erinnerungstage</h2>
-        <p className="text-sm text-gray-600">Neue Gutscheine erhalten diese Erinnerungsregeln: {DEFAULT_TAGE_VORHER.join(", ")} Tage vorher.</p>
-      </section>
-      <TestButtons />
-      <section className="rounded border p-4 text-sm">
-        <h2 className="font-medium">Letzter Cron-Lauf</h2>
-        {last ? (
-          <p>
-            {last.sentAt.toLocaleString("de-DE")} · {last.kanal} an {last.empfaenger} · {last.status}
-            {last.fehler ? ` · Fehler: ${last.fehler}` : ""}
-          </p>
-        ) : (
-          <p>Noch keine Benachrichtigung versendet.</p>
-        )}
-      </section>
-      <section className="rounded border p-4 text-sm text-gray-600">
-        <h2 className="font-medium text-black">Konfiguration (.env)</h2>
-        <p>SMTP_HOST, SMTP_PORT, SMTP_USER, SMTP_PASS, MAIL_FROM, TELEGRAM_BOT_TOKEN, CRON_SECRET, APP_URL.</p>
-        <h2 className="mt-2 font-medium text-black">Backup</h2>
-        <p>SQLite-Datei sichern: Volume <code>gutschein-data</code> bzw. Datei <code>/data/gutscheine.db</code> regelmäßig kopieren.</p>
-      </section>
-    </main>
+    <Shell>
+      <Link href="/" className="text-sm font-medium text-muted hover:text-ink">
+        ← Zurück
+      </Link>
+      <h1 className="mt-2 text-2xl font-semibold tracking-tight">Einstellungen</h1>
+      <p className="mt-1 text-sm text-muted">Erinnerungen und Benachrichtigungen prüfen.</p>
+      <div className="mt-5 grid gap-4">
+        <Card title="Standard-Erinnerungstage">
+          <p>Neue Gutscheine erhalten diese Erinnerungsregeln: {DEFAULT_TAGE_VORHER.join(", ")} Tage vorher.</p>
+        </Card>
+        <TestButtons />
+        <Card title="Letzter Cron-Lauf">
+          {last ? (
+            <p>
+              {last.sentAt.toLocaleString("de-DE")} · {last.kanal} an {last.empfaenger} · {last.status}
+              {last.fehler ? ` · Fehler: ${last.fehler}` : ""}
+            </p>
+          ) : (
+            <p>Noch keine Benachrichtigung versendet.</p>
+          )}
+        </Card>
+        <Card title="Konfiguration und Backup">
+          <p>SMTP_HOST, SMTP_PORT, SMTP_USER, SMTP_PASS, MAIL_FROM, TELEGRAM_BOT_TOKEN, CRON_SECRET, APP_URL.</p>
+          <p className="mt-2">SQLite-Datei sichern: Volume <code>gutschein-data</code> bzw. Datei <code>/data/gutscheine.db</code> regelmäßig kopieren.</p>
+        </Card>
+      </div>
+    </Shell>
   );
 }