Vereinfache Lebensmittelkarten und behebe Template-Fehler

nouri/static/css/styles.css

@@ -941,11 +941,21 @@ h3 {
     color: #ece8e4;
 }
 
+.status-unsorted {
+    background: rgba(184, 161, 108, 0.18);
+}
+
+[data-theme="dark"] .status-unsorted {
+    background: rgba(177, 148, 97, 0.2);
+    color: #f1e7d8;
+}
+
 .status-soft {
     background: var(--lilac-soft);
 }
 
 .item-card {
+    position: relative;
     display: grid;
     grid-template-columns: 112px 1fr;
     gap: 1rem;
@@ -979,6 +989,20 @@ h3 {
     color: var(--accent-strong);
 }
 
+.placeholder-icon-tile {
+    width: 100%;
+    height: 100%;
+    display: grid;
+    place-items: center;
+    background: color-mix(in srgb, var(--surface-soft) 84%, transparent 16%);
+}
+
+.placeholder-icon-tile .ui-icon {
+    width: 2.1rem;
+    height: 2.1rem;
+    opacity: 0.9;
+}
+
 .item-body {
     min-width: 0;
     display: grid;
@@ -1057,13 +1081,382 @@ h3 {
     border-color: color-mix(in srgb, var(--line) 58%, rgba(243, 177, 125, 0.16) 42%);
 }
 
+.item-card-food {
+    grid-template-columns: 1fr;
+    gap: 0.9rem;
+    align-content: start;
+    min-height: 260px;
+    padding: 1.15rem 1.15rem 1.2rem;
+}
+
+.item-card-food-muted {
+    opacity: 0.72;
+}
+
+.item-card-food .item-media-food {
+    width: min(100%, 170px);
+    justify-self: center;
+    aspect-ratio: 1;
+    border-radius: 24px;
+}
+
+.item-card-food .item-body-food {
+    justify-items: center;
+    text-align: center;
+    gap: 0.25rem;
+}
+
+.item-card-food .item-body-food h2 {
+    margin: 0;
+    font-size: 1.9rem;
+    line-height: 1.08;
+}
+
+.item-card-cover-link {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    border-radius: inherit;
+}
+
+.item-card-archive-form {
+    position: absolute;
+    top: 0.85rem;
+    right: 0.85rem;
+    z-index: 3;
+}
+
+.item-card-archive-button {
+    width: 2.2rem;
+    height: 2.2rem;
+    padding: 0;
+    border-radius: 999px;
+    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent 18%);
+    background: color-mix(in srgb, var(--surface-soft) 88%, transparent 12%);
+    color: var(--muted);
+    font-size: 1.35rem;
+    line-height: 1;
+    display: grid;
+    place-items: center;
+    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
+}
+
+.item-card-archive-button:hover {
+    background: color-mix(in srgb, var(--accent-soft) 26%, var(--surface-soft) 74%);
+    border-color: color-mix(in srgb, var(--accent) 34%, var(--line) 66%);
+    color: var(--text);
+    transform: translateY(-1px);
+}
+
+.item-card-hover-meta {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    display: grid;
+    align-content: end;
+    gap: 0.75rem;
+    padding: 1rem;
+    border-radius: inherit;
+    background: color-mix(in srgb, var(--surface) 68%, rgba(48, 39, 35, 0.86) 32%);
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(8px);
+    pointer-events: none;
+    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
+}
+
+.item-card-hover-meta p {
+    margin: 0;
+    font-size: 0.95rem;
+    line-height: 1.45;
+    color: var(--text);
+}
+
+.item-card-food:hover .item-card-hover-meta,
+.item-card-food:focus-within .item-card-hover-meta {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+[data-theme="dark"] .item-card-archive-button {
+    background: color-mix(in srgb, var(--surface-soft) 62%, rgba(26, 22, 21, 0.84) 38%);
+    border-color: color-mix(in srgb, var(--line) 58%, rgba(243, 177, 125, 0.16) 42%);
+}
+
+[data-theme="dark"] .item-card-hover-meta {
+    background: linear-gradient(
+        180deg,
+        rgba(36, 29, 27, 0.16),
+        rgba(31, 25, 23, 0.92)
+    );
+}
+
 .item-actions {
     grid-column: 1 / -1;
-    display: flex;
+    display: grid;
-    flex-wrap: wrap;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 0.65rem;
 }
 
+.item-actions > * {
+    min-width: 0;
+}
+
+.item-actions form,
+.item-actions a {
+    width: 100%;
+}
+
+.item-actions form button,
+.item-actions a.ghost-button,
+.item-actions a.button {
+    width: 100%;
+    justify-content: center;
+}
+
+.item-actions > .primary-action {
+    grid-column: 1 / -1;
+}
+
+.shopping-add-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+    gap: 0.8rem;
+}
+
+.shopping-add-grid > form {
+    min-width: 0;
+}
+
+.shopping-add-empty {
+    margin: 0;
+    padding: 0.35rem 0.1rem;
+}
+
+.shopping-add-card {
+    width: 100%;
+    min-height: 88px;
+    display: grid;
+    grid-template-columns: 58px minmax(0, 1fr);
+    gap: 0.9rem;
+    align-items: center;
+    padding: 0.85rem 0.95rem;
+    border-radius: 22px;
+    text-align: left;
+}
+
+.shopping-add-card-visual,
+.shopping-add-card-fallback,
+.shopping-entry-visual,
+.shopping-entry-fallback {
+    width: 58px;
+    height: 58px;
+    border-radius: 18px;
+    overflow: hidden;
+    display: grid;
+    place-items: center;
+    background: color-mix(in srgb, var(--surface-soft) 84%, transparent 16%);
+    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent 20%);
+}
+
+.shopping-add-card-visual img,
+.shopping-entry-visual img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.shopping-add-card-fallback .ui-icon,
+.shopping-entry-fallback .ui-icon {
+    font-size: 1.2rem;
+}
+
+.shopping-add-card-copy,
+.shopping-entry-copy {
+    min-width: 0;
+    display: grid;
+    gap: 0.28rem;
+}
+
+.shopping-add-card-copy strong,
+.shopping-entry-copy strong {
+    display: block;
+    font-size: 1.1rem;
+    line-height: 1.2;
+}
+
+.shopping-add-card-copy small {
+    color: var(--muted);
+    font-size: 0.92rem;
+}
+
+.shopping-entry-card {
+    position: relative;
+    display: grid;
+    gap: 1rem;
+    padding: 1rem;
+    border-radius: 24px;
+    border: 1px solid var(--line);
+    background: linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--surface-strong) 90%, transparent 10%),
+        color-mix(in srgb, var(--surface) 94%, transparent 6%)
+    );
+}
+
+.shopping-entry-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.9rem;
+}
+
+.shopping-entry-open {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 0;
+    border-radius: 18px;
+    background: transparent;
+    color: inherit;
+    text-align: left;
+    cursor: pointer;
+}
+
+.shopping-entry-open:hover .shopping-entry-main,
+.shopping-entry-open:focus-visible .shopping-entry-main {
+    transform: translateY(-1px);
+}
+
+.shopping-entry-main {
+    display: grid;
+    grid-template-columns: 58px minmax(0, 1fr);
+    gap: 0.95rem;
+    align-items: center;
+    min-width: 0;
+    flex: 1 1 auto;
+    transition: transform 140ms ease;
+}
+
+.shopping-entry-copy .muted {
+    margin: 0;
+}
+
+.shopping-entry-actions {
+    display: flex;
+    align-items: center;
+    flex: 0 0 auto;
+}
+
+.shopping-entry-actions form {
+    width: auto;
+}
+
+.shopping-entry-actions button {
+    white-space: nowrap;
+}
+
+.shopping-entry-close-form {
+    flex: 0 0 auto;
+    margin: 0;
+}
+
+.shopping-entry-close {
+    width: 2.1rem;
+    height: 2.1rem;
+    min-width: 2.1rem;
+    padding: 0;
+    border-radius: 999px;
+    display: grid;
+    place-items: center;
+    background: color-mix(in srgb, var(--surface-soft) 34%, transparent 66%);
+}
+
+.shopping-entry-close span[aria-hidden="true"] {
+    font-size: 1.4rem;
+    line-height: 1;
+    transform: translateY(-1px);
+}
+
+.shopping-entry-dialog {
+    padding: 0;
+    border: 0;
+    background: transparent;
+    max-width: min(30rem, calc(100vw - 2rem));
+    width: min(30rem, calc(100vw - 2rem));
+}
+
+.shopping-entry-dialog::backdrop {
+    background: rgba(29, 22, 19, 0.54);
+    backdrop-filter: blur(6px);
+}
+
+.shopping-entry-dialog-card {
+    gap: 1rem;
+}
+
+.shopping-entry-dialog-actions {
+    display: grid;
+    gap: 0.7rem;
+}
+
+.shopping-entry-dialog-actions form,
+.shopping-entry-dialog-actions a {
+    width: 100%;
+}
+
+.shopping-entry-dialog-actions a {
+    text-align: center;
+}
+
+[data-theme="dark"] .shopping-entry-close {
+    background: color-mix(in srgb, var(--surface-soft) 46%, rgba(34, 29, 27, 0.54) 54%);
+}
+
+@media (max-width: 680px) {
+    .shopping-entry-row {
+        align-items: stretch;
+        flex-direction: column;
+    }
+
+    .shopping-entry-open {
+        width: 100%;
+    }
+
+    .shopping-entry-actions,
+    .shopping-entry-actions form,
+    .shopping-entry-actions button,
+    .shopping-entry-close-form {
+        width: 100%;
+    }
+
+    .shopping-entry-close {
+        width: 100%;
+        border-radius: 18px;
+    }
+}
+
+[data-theme="dark"] .shopping-add-card-fallback,
+[data-theme="dark"] .shopping-entry-fallback,
+[data-theme="dark"] .shopping-add-card-visual,
+[data-theme="dark"] .shopping-entry-visual {
+    background: linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--surface-soft) 60%, #453a37 40%),
+        color-mix(in srgb, var(--surface) 90%, #2b2523 10%)
+    );
+    border-color: color-mix(in srgb, var(--line) 58%, rgba(243, 177, 125, 0.18) 42%);
+}
+
+[data-theme="dark"] .shopping-entry-card {
+    background: linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--surface-soft) 56%, #433834 44%),
+        color-mix(in srgb, var(--surface) 94%, #26201e 6%)
+    );
+    border-color: color-mix(in srgb, var(--line) 58%, rgba(243, 177, 125, 0.14) 42%);
+}
+
 .auth-shell {
     min-height: calc(100vh - 10rem);
     display: grid;
@@ -2755,12 +3148,23 @@ legend {
         grid-template-columns: 1fr;
     }
 
+    .item-card-food {
+        min-height: 0;
+    }
+
+    .item-card-food .item-media-food {
+        width: min(100%, 156px);
+    }
+
+    .item-card-hover-meta {
+        display: none;
+    }
+
     .simple-list li,
     .list-row,
     .planner-entry-top,
     .week-nav,
     .row-actions,
-    .item-actions,
     .hero-actions,
     .more-actions,
     .filter-actions {
@@ -2770,12 +3174,19 @@ legend {
     }
 
     .row-actions > *,
-    .item-actions > *,
     .hero-actions > *,
     .more-actions > * {
         flex: 1 1 auto;
     }
 
+    .item-actions {
+        grid-template-columns: 1fr;
+    }
+
+    .item-actions > .primary-action {
+        grid-column: auto;
+    }
+
     .quick-add-row {
         display: grid;
         gap: 0.75rem;

nouri/templates/items/list.html

@@ -5,9 +5,18 @@
     <div>
         <p class="eyebrow">{{ item_kind_labels[kind] }}</p>
         <h1>{{ item_kind_labels[kind] }}</h1>
+        {% if kind == 'food' %}
+            <p class="lead">Hier stehen alle aktiven Lebensmittel, egal ob sie gerade zuhause sind oder im Moment fehlen. Archiviertes bleibt bewusst außen vor.</p>
+        {% else %}
             <p class="lead">Gemeinsame und persönliche Ideen bleiben hier ruhig sortiert, mit einem klaren Blick darauf, für wen etwas gedacht ist.</p>
+        {% endif %}
     </div>
+    <div class="hero-actions">
+        {% if kind == 'food' %}
+            <a class="ghost-button" href="{{ url_for('main.item_quick_add') }}">Schnell anlegen</a>
+        {% endif %}
         <a class="button" href="{{ url_for('main.item_create', kind=kind) }}">Neu anlegen</a>
+    </div>
 </section>
 
 <section class="panel compact-form-panel">
@@ -51,6 +60,78 @@
 {% if items %}
     <section class="card-grid">
         {% for item in items %}
+            {% if item.kind == 'food' %}
+                {% set item_icon_class = {
+                    'protein': 'icon-component-protein',
+                    'carb': 'icon-component-carb',
+                    'veg': 'icon-component-veg',
+                    'fruit': 'icon-component-fruit',
+                    'dairy': 'icon-component-dairy',
+                    'nuts': 'icon-component-nuts',
+                    'seeds': 'icon-component-seeds',
+                    'neutral': 'icon-component-neutral',
+                }.get(item.primary_builder_key or item.base_type, 'icon-component-neutral') %}
+                <article class="item-card item-card-food{% if not item.is_home %} item-card-food-muted{% endif %}">
+                    {% if item.can_edit %}
+                        <a class="item-card-cover-link" href="{{ url_for('main.item_edit', item_id=item.id) }}">
+                            <span class="sr-only">{{ item.name }} bearbeiten</span>
+                        </a>
+                        <form
+                            class="item-card-archive-form"
+                            method="post"
+                            action="{{ url_for('main.item_archive', item_id=item.id) }}"
+                            onsubmit="return confirm('Willst du dieses Lebensmittel wirklich archivieren?');"
+                        >
+                            {{ csrf_input() }}
+                            <button class="item-card-archive-button" type="submit" aria-label="{{ item.name }} archivieren">×</button>
+                        </form>
+                    {% endif %}
+
+                    <div class="item-media item-media-food">
+                        {% if item.photo_filename %}
+                            <img
+                                src="{{ image_url(item.photo_filename, 'md') }}"
+                                srcset="{{ image_srcset(item.photo_filename) }}"
+                                sizes="{{ image_sizes('grid') }}"
+                                alt="{{ item.name }}"
+                                loading="lazy">
+                        {% else %}
+                            <div class="placeholder-icon-tile">
+                                <span class="ui-icon {{ item_icon_class }}"></span>
+                            </div>
+                        {% endif %}
+                    </div>
+
+                    <div class="item-body item-body-food">
+                        <h2>{{ item.name }}</h2>
+                    </div>
+
+                    <div class="item-card-hover-meta" aria-hidden="true">
+                        <div class="chip-row">
+                            <span class="chip">{{ item.for_label }}</span>
+                            <span class="chip">{{ item.visibility_label }}</span>
+                            <span class="chip status-soft">{{ item.owner_label }}</span>
+                            <span class="chip">{{ item.base_type_label }}</span>
+                            <span class="chip">{{ item.suggestion_role_label }}</span>
+                            <span class="chip">{{ item.suggestion_priority_label }}</span>
+                            {% if item.can_be_meal_core %}
+                                <span class="chip status-okay">Trägt gut eine Mahlzeit</span>
+                            {% endif %}
+                            {% if item.is_on_shopping_list %}
+                                <span class="chip status-idea">Auf Einkaufsliste</span>
+                            {% endif %}
+                            {% if item.dayparts %}
+                                {% for daypart in item.dayparts %}
+                                    <span class="chip">{{ daypart }}</span>
+                                {% endfor %}
+                            {% endif %}
+                        </div>
+                        {% if item.note %}
+                            <p>{{ item.note }}</p>
+                        {% endif %}
+                    </div>
+                </article>
+            {% else %}
                 <article class="item-card">
                     <div class="item-media">
                         {% if item.photo_filename %}
@@ -65,44 +146,6 @@
                         {% endif %}
                     </div>
                     <div class="item-body">
-                    <div class="item-topline">
-                        <h2>{{ item.name }}</h2>
-                        <span class="status-pill status-{{ item.availability_state }}">{{ availability_labels[item.availability_state] }}</span>
-                    </div>
-                    {% if item.kind == 'food' %}
-                        <div class="chip-row">
-                            <span class="chip">{{ item.for_label }}</span>
-                            {% if item.is_on_shopping_list %}
-                                <span class="chip status-idea">Auf Einkaufsliste</span>
-                            {% endif %}
-                        </div>
-                        <details class="item-meta-disclosure">
-                            <summary>Mehr zeigen</summary>
-                            <div class="item-meta-panel">
-                                <div class="chip-row">
-                                    <span class="chip">{{ item.visibility_label }}</span>
-                                    <span class="chip status-soft">{{ item.owner_label }}</span>
-                                    <span class="chip">{{ item.base_type_label }}</span>
-                                    <span class="chip">{{ item.suggestion_role_label }}</span>
-                                    <span class="chip">{{ item.suggestion_priority_label }}</span>
-                                    {% if item.can_be_meal_core %}
-                                        <span class="chip status-okay">Trägt gut eine Mahlzeit</span>
-                                    {% endif %}
-                                    <span class="chip">{{ item_kind_labels[item.kind] }}</span>
-                                </div>
-                                {% if item.dayparts %}
-                                    <div class="chip-row">
-                                        {% for daypart in item.dayparts %}
-                                            <span class="chip">{{ daypart }}</span>
-                                        {% endfor %}
-                                    </div>
-                                {% endif %}
-                                {% if item.note %}
-                                    <p>{{ item.note }}</p>
-                                {% endif %}
-                            </div>
-                        </details>
-                    {% else %}
                         <div class="chip-row">
                             <span class="chip">{{ item.visibility_label }}</span>
                             <span class="chip status-soft">{{ item.owner_label }}</span>
@@ -115,7 +158,6 @@
                                 <span class="chip">{{ tag }}</span>
                             {% endfor %}
                         </div>
-                    {% endif %}
                     {% if item.kind != 'food' and item.dayparts %}
                         <div class="chip-row">
                             {% for daypart in item.dayparts %}
@@ -135,24 +177,19 @@
                             <a class="ghost-button" href="{{ url_for('main.item_edit', item_id=item.id) }}">Bearbeiten</a>
                         {% endif %}
                         <a class="ghost-button" href="{{ url_for('main.planner_day', date=today.isoformat(), item_id=item.id, daypart_id=item.primary_daypart_id) }}">Im Tagesplan öffnen</a>
-                    <form method="post" action="{{ url_for('main.item_add_to_shopping', item_id=item.id) }}">
+                        <form class="primary-action" method="post" action="{{ url_for('main.item_add_to_shopping', item_id=item.id) }}">
                             {{ csrf_input() }}
                             <button type="submit">Auf Einkaufsliste</button>
                         </form>
-                    {% if item.availability_state != 'home' and item.can_edit %}
+                        {% if item.can_edit %}
-                        <form method="post" action="{{ url_for('main.item_set_home', item_id=item.id) }}">
-                            {{ csrf_input() }}
-                            <button class="secondary" type="submit">Als Zuhause markieren</button>
-                        </form>
-                    {% endif %}
-                    {% if item.availability_state != 'archived' and item.can_edit %}
                             <form method="post" action="{{ url_for('main.item_archive', item_id=item.id) }}">
                                 {{ csrf_input() }}
-                            <button class="ghost-button" type="submit">Ins Archiv</button>
+                                <button class="ghost-button" type="submit">Archivieren</button>
                             </form>
                         {% endif %}
                     </div>
                 </article>
+            {% endif %}
         {% endfor %}
     </section>
 {% else %}