feat: Erinnerungs-Checkboxen, Anbieterlogos via Logo.dev, Kontakte in Einstellungen

app/page.tsx

@@ -1,6 +1,8 @@
 import Link from "next/link";
 import { Suspense } from "react";
 import Shell from "./components/shell";
+import LogoImg from "./components/logo-img";
+import { withLogoUrl } from "@/lib/logo";
 import { getDb } from "@/lib/db";
 import { getVoucherStatus, type VoucherStatus } from "@/lib/voucher-status";
 import { formatEuro, isExpiringSoon } from "@/lib/vouchers";
@@ -64,22 +66,27 @@ async function VoucherList({ filter }: { filter: string }) {
   }
   return (
     <ul className="grid gap-3">
-      {filtered.map((v) => {
+      {filtered.map(withLogoUrl).map((v) => {
         const s = getVoucherStatus(v);
         return (
           <li key={v.id} className="rounded-card border border-line bg-white p-5 transition-shadow hover:shadow-[0_8px_24px_rgba(32,55,39,0.08)]">
-            <div className="flex items-start justify-between gap-3">
-              <Link href={`/vouchers/${v.id}`} className="text-[15px] font-semibold tracking-tight hover:text-brand-700">
-                {v.name}
-              </Link>
-              <span className={`shrink-0 rounded-full px-2.5 py-1 text-xs font-semibold ${STATUS_STYLE[s]}`}>
-                {statusLabel(s)}
-              </span>
+            <div className="flex items-center gap-3">
+              <LogoImg logoUrl={v.logoUrl ?? null} name={v.anbieter} />
+              <div className="flex min-w-0 flex-1 items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <Link href={`/vouchers/${v.id}`} className="text-[15px] font-semibold tracking-tight hover:text-brand-700">
+                    {v.name}
+                  </Link>
+                  <p className="mt-1 text-sm text-muted">
+                    {v.anbieter} · {formatEuro(v.restCents)} von {formatEuro(v.wertCents)}
+                    {v.ablaufdatum ? ` · bis ${v.ablaufdatum.toLocaleDateString("de-DE")}` : ""}
+                  </p>
+                </div>
+                <span className={`shrink-0 rounded-full px-2.5 py-1 text-xs font-semibold ${STATUS_STYLE[s]}`}>
+                  {statusLabel(s)}
+                </span>
+              </div>
             </div>
-            <p className="mt-1.5 text-sm text-muted">
-              {v.anbieter} · {formatEuro(v.restCents)} von {formatEuro(v.wertCents)}
-              {v.ablaufdatum ? ` · bis ${v.ablaufdatum.toLocaleDateString("de-DE")}` : ""}
-            </p>
           </li>
         );
       })}