From 97833ab2bb93d7a022f1b9deaf59263aa6f30337 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Thu, 23 Jul 2026 14:46:44 +0000
Subject: [PATCH] Remove product thumbnails from the order list, keep them on
 the detail page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bestellübersicht rows now show only text (Bestellnummer, Datum, Artikel-Anzahl, Status, Gesamtbetrag) — no product images. The order detail page (app/konto/bestellungen/[orderNumber]/page.tsx) is untouched and still shows a thumbnail per item, which is the only place they should appear.
---
 app/konto/bestellungen/page.tsx | 32 ++------------------------------
 1 file changed, 2 insertions(+), 30 deletions(-)

diff --git a/app/konto/bestellungen/page.tsx b/app/konto/bestellungen/page.tsx
index ffa9672..6bc41dc 100644
--- a/app/konto/bestellungen/page.tsx
+++ b/app/konto/bestellungen/page.tsx
@@ -1,20 +1,13 @@
 import type { Metadata } from "next";
 import { redirect } from "next/navigation";
 import Link from "next/link";
-import Image from "next/image";
 import { Reveal } from "../../components/Reveal";
 import { Footer } from "../../components/Footer";
 import { formatPrice, formatDate } from "../../lib/format";
 import { getSessionCustomer, getCustomerOrders } from "../../lib/customerAuth";
-import { getProductImagesByIds } from "../../lib/payload";
 import { OrderStatusBadge } from "../components/OrderStatusBadge";
 import { LogoutButton } from "../components/LogoutButton";
 
-// Caps how many of an order's items get a thumbnail before folding the
-// rest into a "+N" pill — a row here is one line in a list, not a full
-// receipt (that's the detail page), so it stays a glance-able preview.
-const MAX_THUMBNAILS = 4;
-
 // robots: noindex — account area, same reasoning as /checkout.
 export const metadata: Metadata = {
   title: "Meine Bestellungen",
@@ -30,7 +23,6 @@ export default async function KontoBestellungenPage() {
   if (!session) redirect("/konto/login");
 
   const orders = await getCustomerOrders(session.token, session.customer.id);
-  const imagesByProductId = await getProductImagesByIds(orders.flatMap((order) => order.productIds));
 
   return (
     <>
@@ -47,31 +39,12 @@ export default async function KontoBestellungenPage() {
             <p className="text-body text-text-muted">Du hast noch keine Bestellung aufgegeben.</p>
           ) : (
             <div className="flex flex-col gap-4 w-full">
-              {orders.map((order) => {
-                const thumbnails = order.productIds.slice(0, MAX_THUMBNAILS).map((id) => imagesByProductId.get(id));
-                const overflow = order.productIds.length - MAX_THUMBNAILS;
-                return (
+              {orders.map((order) => (
                 <Link
                   key={order.orderNumber}
                   href={`/konto/bestellungen/${encodeURIComponent(order.orderNumber)}`}
                   className="flex flex-wrap items-center gap-4 w-full bg-bg-base border border-border rounded-md p-6 hover:border-brand transition-colors"
                 >
-                  <div className="flex -space-x-2 shrink-0">
-                    {thumbnails.map((url, i) =>
-                      url ? (
-                        <div key={i} className="relative size-11 rounded-sm overflow-hidden border-2 border-bg-base">
-                          <Image src={url} alt="" fill sizes="44px" className="object-cover" />
-                        </div>
-                      ) : (
-                        <div key={i} className="size-11 rounded-sm bg-bg-muted border-2 border-bg-base" />
-                      ),
-                    )}
-                    {overflow > 0 && (
-                      <div className="relative size-11 rounded-sm border-2 border-bg-base bg-bg-muted flex items-center justify-center">
-                        <span className="text-label font-bold text-text-muted">+{overflow}</span>
-                      </div>
-                    )}
-                  </div>
                   <div className="flex flex-col gap-1">
                     <p className="text-label text-text-muted">Bestellnummer</p>
                     <p className="font-bold text-body-sm text-text-primary">{order.orderNumber}</p>
@@ -93,8 +66,7 @@ export default async function KontoBestellungenPage() {
                     <p className="font-bold text-body-sm text-text-primary">{formatPrice(order.total)}</p>
                   </div>
                 </Link>
-                );
-              })}
+              ))}
             </div>
           )}