From b96d2fcd05cd0fe0d0c6b9b2a98fba140f249d21 Mon Sep 17 00:00:00 2001
From: Maaxxs <61059039+MaaxxsDev@users.noreply.github.com>
Date: Mon, 20 Jul 2026 06:43:49 +0200
Subject: [PATCH] Drop icon/slogan config from the package editor and unclip
 the featured badge

The public package tiles stopped showing per-package icons and taglines,
so their admin inputs were dead weight - the IconPicker alone dominated
the form. Both fields are gone from the batch editor and the overview
table; stored values stay untouched because the fields remain in the
save payload, they just can't be edited anymore.

The "Empfohlen" badge sat at -top-3, half outside a card that clips via
overflow-hidden (rounded corners + road artwork), cutting the badge in
half. It now sits at top-2 fully inside the tile, above the name.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 hifi-src/src/pages/admin/Packages.jsx   | 24 +++++-------------------
 hifi-src/src/pages/public/ModelPage.jsx |  4 +++-
 2 files changed, 8 insertions(+), 20 deletions(-)

diff --git a/hifi-src/src/pages/admin/Packages.jsx b/hifi-src/src/pages/admin/Packages.jsx
index 52ebfc9..233b2fa 100644
--- a/hifi-src/src/pages/admin/Packages.jsx
+++ b/hifi-src/src/pages/admin/Packages.jsx
@@ -1,8 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { api } from '../../api/client.js';
-import IconPicker from '../../components/IconPicker.jsx';
-import DynamicIcon from '../../components/DynamicIcon.jsx';
 import { PACKAGE_TIERS, tierSortOrder } from '../../constants/packageTiers.js';
 
 const inputCls =
@@ -338,7 +336,6 @@ export default function Packages() {
                 <td className="px-4 py-2">{pkg.brand_name} {pkg.model_name}</td>
                 <td className="px-4 py-2 font-medium text-neutral-800 dark:text-neutral-100">
                   <span className="inline-flex items-center gap-1.5">
-                    {pkg.icon_name && <DynamicIcon name={pkg.icon_name} className="h-4 w-4 text-brand-600 dark:text-brand-400" />}
                     {pkg.name}
                     {pkg.is_featured && (
                       <span className="rounded-full bg-brand-100 px-2 py-0.5 text-xs font-semibold text-brand-700 dark:bg-brand-900/40 dark:text-brand-400">
@@ -474,8 +471,7 @@ export default function Packages() {
                         onChange={(e) => toggleRow(row.key, e.target.checked)}
                         className="h-5 w-5 rounded border-neutral-300 text-brand-600 focus:ring-brand-500 disabled:opacity-60"
                       />
-                      <span className="inline-flex items-center gap-1.5 font-semibold text-neutral-900 dark:text-white">
-                        {row.form.icon_name && <DynamicIcon name={row.form.icon_name} className="h-4 w-4 text-brand-600 dark:text-brand-400" />}
+                      <span className="font-semibold text-neutral-900 dark:text-white">
                         {row.tierName ?? row.existing.name}
                       </span>
                     </label>
@@ -548,24 +544,14 @@ export default function Packages() {
                         </p>
                       </div>
 
+                      {/* icon_name/tagline bleiben im Form-State und Payload erhalten (Bestandsdaten
+                          nicht wegwischen), sind aber nicht mehr konfigurierbar - das Frontend
+                          zeigt beides auf den Kacheln nicht mehr an. */}
                       <details className="rounded-lg border border-neutral-200 dark:border-neutral-800">
                         <summary className="cursor-pointer select-none px-3 py-2 text-sm font-medium text-neutral-600 dark:text-neutral-300">
-                          Weitere Optionen (Icon, Slogan, Preis-Text, Sortierung)
+                          Weitere Optionen (Preis-Text, Empfohlen, Sortierung)
                         </summary>
                         <div className="space-y-4 border-t border-neutral-200 p-3 dark:border-neutral-800">
-                          <div>
-                            <label className="mb-1 block text-sm font-medium text-neutral-700 dark:text-neutral-300">Icon (optional)</label>
-                            <IconPicker value={row.form.icon_name} onChange={(name) => updateRowForm(row.key, { icon_name: name })} />
-                          </div>
-                          <div>
-                            <label className="mb-1 block text-sm font-medium text-neutral-700 dark:text-neutral-300">Kurzer Slogan (optional)</label>
-                            <input
-                              value={row.form.tagline}
-                              onChange={(e) => updateRowForm(row.key, { tagline: e.target.value })}
-                              placeholder="z. B. Perfekt für den Einstieg"
-                              className={inputCls}
-                            />
-                          </div>
                           <div>
                             <label className="mb-1 block text-sm font-medium text-neutral-700 dark:text-neutral-300">Preis-Text (optional)</label>
                             <input
diff --git a/hifi-src/src/pages/public/ModelPage.jsx b/hifi-src/src/pages/public/ModelPage.jsx
index 4d1480b..f18eed2 100644
--- a/hifi-src/src/pages/public/ModelPage.jsx
+++ b/hifi-src/src/pages/public/ModelPage.jsx
@@ -152,8 +152,10 @@ function PackageCard({ pkg, tier, tierT, layout, bullets, formatPrice, contactUr
         </>
       )}
 
+      {/* top-2 statt -top-3: die Karte hat overflow-hidden (runde Ecken + Straßenbild),
+          ein halb herausragender Badge wuerde oben abgeschnitten. */}
       {pkg.is_featured && (
-        <span className="absolute -top-3 left-1/2 z-10 -translate-x-1/2 rounded-full bg-brand-500 px-3 py-1 text-xs font-bold text-white shadow">
+        <span className="absolute top-2 left-1/2 z-10 -translate-x-1/2 rounded-full bg-brand-500 px-3 py-1 text-xs font-bold text-white shadow">
           {t('modelPage.featuredBadge')}
         </span>
       )}