From 475ee3fa160568b9772e1074df588b4e3b6108a8 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Thu, 30 Jul 2026 22:11:12 +0000
Subject: [PATCH] Replace order-filter chip wall with 3 compact selects;
 subgrid-align trust badges
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

OrderFilters.tsx: filter chips (7 status + 5 payment-status + N year
options as pills) read as cluttered and ate a lot of vertical space.
Replaced with 3 native <select>s in a row (a small Client Component
just for the onChange→router.push navigation) — same URL-search-param
filtering underneath, just a much more compact control.

TrustRow.tsx: replaced the hardcoded min-h-[3.2rem] title reservation
(a guess, and it visibly over-reserved space for single-line titles)
with a real CSS Grid + `grid-template-rows: subgrid` — every badge's
icon+title box shares the same row-track height (auto-sized to
whichever title actually needs 2 lines), so descriptions align
without any hardcoded value. The two structurally different layouts
(icon-above-title below lg vs. icon-beside-a-title/description-stack
at lg) now render as two separate blocks instead of fighting one
shared shape.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/components/TrustRow.tsx                   | 76 ++++++++++-------
 .../bestellungen/components/OrderFilters.tsx  | 82 ++++++++++++++++++
 app/konto/bestellungen/page.tsx               | 84 ++-----------------
 3 files changed, 133 insertions(+), 109 deletions(-)
 create mode 100644 app/konto/bestellungen/components/OrderFilters.tsx

diff --git a/app/components/TrustRow.tsx b/app/components/TrustRow.tsx
index c97198a..6646db1 100644
--- a/app/components/TrustRow.tsx
+++ b/app/components/TrustRow.tsx
@@ -11,41 +11,53 @@ export async function TrustRow() {
   if (items.length === 0) return null;
 
   return (
-    // Below lg (1024px): badges sit side by side as one row (never wrap,
-    // never stack to one-per-row) with icon ABOVE text, centered — icon
-    // beside text (the lg: layout below) is what made a full row of 3
-    // badges too wide below ~1024px in the first place (see git history:
-    // originally lg:-gated for exactly this, then briefly tried flex-wrap,
-    // which put an odd 3rd item alone on its own wrapped line and read as
-    // disorganized). Putting the icon above the text instead shrinks each
-    // badge down to just its text column's width, and — combined with
-    // dropping whitespace-nowrap on the title/description below lg: so
-    // long copy wraps within its own narrow column instead of forcing
-    // overflow — a real row of 3 now fits without wrapping at all, so
-    // there's no odd-item-out case to worry about. lg:+ reverts to the
-    // original icon-beside-text row-with-dividers layout unchanged.
-    <div className="w-full bg-bg-base flex justify-center py-8 px-[var(--layout-padding-x)]">
-      <div className="flex flex-row justify-center gap-6 lg:gap-12 items-start lg:items-center w-full lg:w-auto">
-        {items.map((item, i) => (
-          <div key={item.id} className="flex flex-1 lg:flex-none items-center gap-6 lg:gap-12 min-w-0">
-            {i > 0 && <div className="hidden lg:block h-10 w-px bg-border" />}
-            <div className="flex flex-col items-center text-center gap-2 w-full min-w-0 lg:flex-row lg:items-center lg:text-left lg:gap-4 lg:w-auto">
+    <div className="w-full bg-bg-base py-8 px-[var(--layout-padding-x)]">
+      {/* Below lg (1024px): a CSS Grid with `grid-template-rows: subgrid` —
+          not a fixed min-height guess — so every badge's "icon+title" box
+          shares the SAME row track height (auto-sized to whichever
+          badge's title actually needs 2 lines), and every description
+          starts exactly at that row's bottom edge regardless of how many
+          lines its own title happens to wrap to. Icon beside text (the
+          lg: layout below) is what made a full row of 3 badges too wide
+          below ~1024px in the first place (see git history: originally
+          lg:-gated for exactly this, then briefly tried flex-wrap, which
+          put an odd 3rd item alone on its own wrapped line and read as
+          disorganized) — icon above text instead shrinks each badge down
+          to just its text column's width, letting a real row of 3 fit
+          without wrapping at all. Two structurally different layouts
+          (icon-above-title here vs. icon-beside-a-title/description-
+          stack at lg:) don't share one flexible markup shape cleanly, so
+          this renders as two separate blocks (lg:hidden / hidden lg:flex)
+          rather than fighting one shape across both breakpoints. */}
+      <div
+        className="lg:hidden grid justify-center gap-x-6 gap-y-1"
+        style={{ gridTemplateColumns: `repeat(${items.length}, auto)`, gridTemplateRows: "repeat(2, auto)" }}
+      >
+        {items.map((item) => (
+          <div key={item.id} className="grid row-span-2 justify-items-center" style={{ gridTemplateRows: "subgrid" }}>
+            <div className="flex flex-col items-center gap-2">
               <div className="relative size-8 shrink-0">
                 <Image alt="" src={item.icon} fill sizes="32px" className="object-contain" />
               </div>
-              <div className="flex flex-col gap-0.5 items-center min-w-0 lg:items-start">
-                {/* min-h reserves 2 lines worth of height (text-body's
-                    line-height is 1.6rem) below lg: — titles are short
-                    enough that some wrap to 2 lines in their narrow
-                    stacked column and some don't, and without a reserved
-                    height the description below started at a different
-                    y-position from one badge to the next depending on
-                    whether its own title happened to wrap. Reset to
-                    min-h-0 at lg: (whitespace-nowrap there forces a
-                    single line anyway, so the reservation would just add
-                    unwanted empty space). */}
-                <p className="font-semibold text-body text-text-primary min-h-[3.2rem] lg:min-h-0 lg:whitespace-nowrap">{item.title}</p>
-                <p className="text-body-sm text-text-muted lg:whitespace-nowrap">{item.description}</p>
+              <p className="font-semibold text-body text-text-primary text-center">{item.title}</p>
+            </div>
+            <p className="text-body-sm text-text-muted text-center">{item.description}</p>
+          </div>
+        ))}
+      </div>
+
+      {/* lg+: original icon-beside-text row with dividers, unchanged. */}
+      <div className="hidden lg:flex justify-center gap-12 items-center">
+        {items.map((item, i) => (
+          <div key={item.id} className="flex items-center gap-12">
+            {i > 0 && <div className="h-10 w-px bg-border" />}
+            <div className="flex items-center gap-4">
+              <div className="relative size-8 shrink-0">
+                <Image alt="" src={item.icon} fill sizes="32px" className="object-contain" />
+              </div>
+              <div className="flex flex-col gap-0.5 items-start">
+                <p className="font-semibold text-body text-text-primary whitespace-nowrap">{item.title}</p>
+                <p className="text-body-sm text-text-muted whitespace-nowrap">{item.description}</p>
               </div>
             </div>
           </div>
diff --git a/app/konto/bestellungen/components/OrderFilters.tsx b/app/konto/bestellungen/components/OrderFilters.tsx
new file mode 100644
index 0000000..f04cbc9
--- /dev/null
+++ b/app/konto/bestellungen/components/OrderFilters.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+
+// Three native <select>s in a row instead of a wall of filter chips (tried
+// first, reverted 2026-07-30 — with 7 status options + 5 payment-status
+// options + N years, a chip per option read as cluttered and ate a lot of
+// vertical space). Client Component only for the onChange→navigate wiring;
+// the actual filtering still happens server-side in page.tsx via the same
+// URL search params, so this stays a plain GET-style filter (shareable/
+// bookmarkable/back-button-safe), not client-side state.
+export function OrderFilters({
+  statusOptions,
+  paymentStatusOptions,
+  years,
+}: {
+  statusOptions: { value: string; label: string }[];
+  paymentStatusOptions: { value: string; label: string }[];
+  years: string[];
+}) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const status = searchParams.get("status") ?? "";
+  const paymentStatus = searchParams.get("paymentStatus") ?? "";
+  const year = searchParams.get("year") ?? "";
+  const hasAnyFilter = Boolean(status || paymentStatus || year);
+
+  function setParam(key: string, value: string) {
+    const params = new URLSearchParams(searchParams.toString());
+    if (value) params.set(key, value);
+    else params.delete(key);
+    const qs = params.toString();
+    router.push(qs ? `/konto/bestellungen?${qs}` : "/konto/bestellungen");
+  }
+
+  const selectClass =
+    "w-full sm:w-auto min-w-0 border border-border rounded-sm px-3 py-2 text-body-sm text-text-primary bg-bg-base outline-none focus:border-brand transition-colors";
+
+  return (
+    <div className="flex flex-col sm:flex-row sm:items-center gap-3 w-full">
+      <select aria-label="Nach Fulfillment-Status filtern" className={selectClass} value={status} onChange={(e) => setParam("status", e.target.value)}>
+        <option value="">Alle Status</option>
+        {statusOptions.map((o) => (
+          <option key={o.value} value={o.value}>
+            {o.label}
+          </option>
+        ))}
+      </select>
+      <select
+        aria-label="Nach Zahlungsstatus filtern"
+        className={selectClass}
+        value={paymentStatus}
+        onChange={(e) => setParam("paymentStatus", e.target.value)}
+      >
+        <option value="">Alle Zahlungsstatus</option>
+        {paymentStatusOptions.map((o) => (
+          <option key={o.value} value={o.value}>
+            {o.label}
+          </option>
+        ))}
+      </select>
+      <select aria-label="Nach Jahr filtern" className={selectClass} value={year} onChange={(e) => setParam("year", e.target.value)}>
+        <option value="">Alle Jahre</option>
+        {years.map((y) => (
+          <option key={y} value={y}>
+            {y}
+          </option>
+        ))}
+      </select>
+      {hasAnyFilter && (
+        <button
+          type="button"
+          onClick={() => router.push("/konto/bestellungen")}
+          className="text-body-sm font-semibold text-text-muted underline hover:text-brand transition-colors self-start sm:self-auto"
+        >
+          Zurücksetzen
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/app/konto/bestellungen/page.tsx b/app/konto/bestellungen/page.tsx
index e6d00ad..73f6388 100644
--- a/app/konto/bestellungen/page.tsx
+++ b/app/konto/bestellungen/page.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { Suspense } from "react";
 import { redirect } from "next/navigation";
 import Link from "next/link";
 import { Reveal } from "../../components/Reveal";
@@ -13,6 +14,7 @@ import {
 import { OrderStatusBadge } from "../components/OrderStatusBadge";
 import { PaymentStatusBadge } from "../components/PaymentStatusBadge";
 import { LogoutButton } from "../components/LogoutButton";
+import { OrderFilters } from "./components/OrderFilters";
 
 // robots: noindex — account area, same reasoning as /checkout.
 export const metadata: Metadata = {
@@ -34,45 +36,8 @@ const PAYMENT_STATUS_FILTER_LABEL: Record<string, string> = {
   partially_refunded: "Teilweise erstattet",
 };
 
-function FilterChip({
-  href,
-  active,
-  children,
-}: {
-  href: string;
-  active: boolean;
-  children: React.ReactNode;
-}) {
-  return (
-    <Link
-      href={href}
-      className={`inline-flex items-center px-3 py-1.5 rounded-full text-body-sm font-semibold whitespace-nowrap border transition-colors ${
-        active
-          ? "bg-brand border-brand text-text-primary"
-          : "bg-bg-base border-border text-text-muted hover:border-brand hover:text-brand"
-      }`}
-    >
-      {children}
-    </Link>
-  );
-}
-
-// Every filter is expressed as plain URL search params (?status=…&paymentStatus=…&year=…)
-// rather than client-side state — this page stays a Server Component, each
-// chip is just a <Link> to the same route with one param changed/removed,
-// and the filtered result is shareable/bookmarkable/back-button-safe for
-// free. buildFilterHref() only ever changes ONE param at a time, keeping
-// the other active filters intact (a status filter + a year filter can
-// both be active together).
-function buildFilterHref(current: Record<string, string | undefined>, key: string, value: string | undefined): string {
-  const params = new URLSearchParams();
-  const next = { ...current, [key]: value };
-  for (const [k, v] of Object.entries(next)) {
-    if (v) params.set(k, v);
-  }
-  const qs = params.toString();
-  return qs ? `/konto/bestellungen?${qs}` : "/konto/bestellungen";
-}
+const STATUS_OPTIONS = Object.entries(ORDER_STATUS_LABEL).map(([value, label]) => ({ value, label }));
+const PAYMENT_STATUS_OPTIONS = Object.entries(PAYMENT_STATUS_FILTER_LABEL).map(([value, label]) => ({ value, label }));
 
 export default async function KontoBestellungenPage({
   searchParams,
@@ -83,13 +48,11 @@ export default async function KontoBestellungenPage({
   if (!session) redirect("/konto/login");
 
   const { status, paymentStatus, year } = await searchParams;
-  const activeFilters = { status, paymentStatus, year };
 
   const [orders, availableYears] = await Promise.all([
     getCustomerOrders(session.token, session.customer.id, true, { status, paymentStatus, year }),
     getCustomerOrderYears(session.token, session.customer.id),
   ]);
-  const hasAnyFilter = Boolean(status || paymentStatus || year);
 
   return (
     <>
@@ -103,42 +66,9 @@ export default async function KontoBestellungenPage({
           </p>
 
           {availableYears.length > 0 && (
-            <div className="flex flex-wrap gap-2 w-full">
-              <FilterChip href={buildFilterHref(activeFilters, "status", undefined)} active={!status}>
-                Alle Status
-              </FilterChip>
-              {Object.entries(ORDER_STATUS_LABEL).map(([value, label]) => (
-                <FilterChip key={value} href={buildFilterHref(activeFilters, "status", value)} active={status === value}>
-                  {label}
-                </FilterChip>
-              ))}
-              <div className="hidden sm:block w-px h-6 self-center bg-border" />
-              <FilterChip href={buildFilterHref(activeFilters, "paymentStatus", undefined)} active={!paymentStatus}>
-                Alle Zahlungsstatus
-              </FilterChip>
-              {Object.entries(PAYMENT_STATUS_FILTER_LABEL).map(([value, label]) => (
-                <FilterChip key={value} href={buildFilterHref(activeFilters, "paymentStatus", value)} active={paymentStatus === value}>
-                  {label}
-                </FilterChip>
-              ))}
-              <div className="hidden sm:block w-px h-6 self-center bg-border" />
-              <FilterChip href={buildFilterHref(activeFilters, "year", undefined)} active={!year}>
-                Alle Jahre
-              </FilterChip>
-              {availableYears.map((y) => (
-                <FilterChip key={y} href={buildFilterHref(activeFilters, "year", y)} active={year === y}>
-                  {y}
-                </FilterChip>
-              ))}
-              {hasAnyFilter && (
-                <Link
-                  href="/konto/bestellungen"
-                  className="inline-flex items-center px-3 py-1.5 text-body-sm font-semibold text-text-muted underline hover:text-brand transition-colors"
-                >
-                  Filter zurücksetzen
-                </Link>
-              )}
-            </div>
+            <Suspense fallback={null}>
+              <OrderFilters statusOptions={STATUS_OPTIONS} paymentStatusOptions={PAYMENT_STATUS_OPTIONS} years={availableYears} />
+            </Suspense>
           )}
 
           {availableYears.length === 0 ? (