Shorten meal edit headers

nouri/main.py

@@ -875,10 +875,14 @@ def group_items_by_availability(items: list[dict]) -> list[dict]:
     return result
 
 
-def extract_item_form_data(existing: dict | None = None) -> dict:
+def extract_item_form_data(kind: str, existing: dict | None = None) -> dict:
     form_data = existing or {}
     daypart_ids = [int(value) for value in request.form.getlist("daypart_ids") if value.isdigit()]
     meal_type_default = form_data.get("meal_type") or meal_type_for_daypart(daypart_ids[0] if daypart_ids else None)
+    meal_type = normalize_meal_type(request.form.get("meal_type"), meal_type_default)
+    if kind == "meal":
+        daypart_ids = daypart_ids_for_meal_type(meal_type)
+    component_ids = list(dict.fromkeys(int(value) for value in request.form.getlist("component_ids") if value.isdigit()))
     form_data.update(
         {
             "name": request.form.get("name", "").strip(),
@@ -891,7 +895,7 @@ def extract_item_form_data(existing: dict | None = None) -> dict:
                 form_data.get("suggestion_priority", "normal"),
             ),
             "can_be_meal_core": request.form.get("can_be_meal_core", "0") == "1",
-            "meal_type": normalize_meal_type(request.form.get("meal_type"), meal_type_default),
+            "meal_type": meal_type,
             "meal_tags": normalize_meal_tags(request.form.getlist("meal_tags")),
             "energy_density": normalize_energy_density(request.form.get("energy_density"), form_data.get("energy_density", "neutral")),
             "note": request.form.get("note", "").strip(),
@@ -900,7 +904,7 @@ def extract_item_form_data(existing: dict | None = None) -> dict:
             "target_user_raw": request.form.get("target_user_id", TARGET_USER_OPTIONS_DEFAULT),
             "food_search": request.form.get("food_search", "").strip(),
             "daypart_ids": daypart_ids,
-            "component_ids": [int(value) for value in request.form.getlist("component_ids") if value.isdigit()],
+            "component_ids": component_ids,
             "quick_food_name": request.form.get("quick_food_name", "").strip(),
             "quick_food_category": request.form.get("quick_food_category", "").strip(),
             "quick_food_base_type": normalize_base_type(
@@ -1240,6 +1244,35 @@ def sync_meal_components(meal_id: int, food_ids: list[int]) -> None:
             )
 
 
+def fetch_items_by_ids(item_ids: list[int]) -> list[dict]:
+    normalized_ids = list(dict.fromkeys(int(item_id) for item_id in item_ids if int(item_id) > 0))
+    if not normalized_ids:
+        return []
+
+    placeholders = ", ".join("?" for _ in normalized_ids)
+    rows = get_db().execute(
+        f"""
+        SELECT items.*,
+               owner.display_name AS owner_display_name,
+               owner.username AS owner_username,
+               target.display_name AS target_display_name,
+               target.username AS target_username,
+               EXISTS(
+                   SELECT 1
+                   FROM shopping_entries
+                   WHERE shopping_entries.item_id = items.id AND shopping_entries.is_checked = 0
+               ) AS is_on_shopping_list
+        FROM items
+        LEFT JOIN users AS owner ON owner.id = items.owner_user_id
+        LEFT JOIN users AS target ON target.id = items.target_user_id
+        WHERE items.id IN ({placeholders}) AND {visible_clause('items')}
+        """,
+        [*normalized_ids, *visible_params()],
+    ).fetchall()
+    items_by_id = {item["id"]: item for item in decorate_items(rows)}
+    return [items_by_id[item_id] for item_id in normalized_ids if item_id in items_by_id]
+
+
 def fetch_shopping_entries():
     rows = get_db().execute(
         f"""
@@ -1478,6 +1511,15 @@ def meal_type_for_daypart(daypart_id: int | None) -> str:
     return DAYPART_SLUG_TO_MEAL_TYPE.get(daypart["slug"], "snack")
 
 
+def daypart_ids_for_meal_type(meal_type: str | None) -> list[int]:
+    normalized_type = normalize_meal_type(meal_type, "snack")
+    return [
+        int(daypart["id"])
+        for daypart in get_dayparts()
+        if DAYPART_SLUG_TO_MEAL_TYPE.get(daypart["slug"], "snack") == normalized_type
+    ]
+
+
 def meal_tags_for_generated_meal(daypart_id: int, foods: list[dict]) -> list[str]:
     daypart = get_daypart_by_id(daypart_id)
     slug = daypart["slug"] if daypart else ""
@@ -2883,6 +2925,7 @@ def render_item_form(kind: str, *, item: dict | None, form_data: dict):
         item=item,
         dayparts=get_dayparts(),
         food_groups=group_items_by_availability(foods),
+        selected_components=fetch_items_by_ids(form_data.get("component_ids", [])) if kind == "meal" else [],
         categories=get_category_options(
             form_data.get("category") or form_data.get("quick_food_category")
         ),
@@ -3750,7 +3793,16 @@ def item_create(kind: str):
 
     if request.method == "POST":
         form_action = request.form.get("form_action", "save_item")
-        form_data = extract_item_form_data(form_data)
+        form_data = extract_item_form_data(kind, form_data)
+
+        if kind == "meal" and request.form.get("remove_component_id", "").isdigit():
+            remove_component_id = int(request.form.get("remove_component_id", "0"))
+            form_data["component_ids"] = [
+                component_id
+                for component_id in form_data["component_ids"]
+                if component_id != remove_component_id
+            ]
+            return render_item_form(kind, item=None, form_data=form_data)
 
         if kind == "meal" and form_action == "filter_foods":
             return render_item_form(kind, item=None, form_data=form_data)
@@ -3840,7 +3892,7 @@ def item_edit(item_id: int):
         "suggestion_priority": item.get("suggestion_priority") or "normal",
         "can_be_meal_core": bool(item.get("can_be_meal_core")),
         "meal_type": item.get("meal_type") or meal_type_for_daypart(item.get("primary_daypart_id")),
-        "meal_tags": decode_tag_list(item.get("meal_tags")),
+        "meal_tags": normalize_meal_tags(item.get("meal_tags")),
         "energy_density": item.get("energy_density") or "neutral",
         "note": item["note"] or "",
         "visibility": item["visibility"],
@@ -3862,7 +3914,16 @@ def item_edit(item_id: int):
 
     if request.method == "POST":
         form_action = request.form.get("form_action", "save_item")
-        form_data = extract_item_form_data(form_data)
+        form_data = extract_item_form_data(item["kind"], form_data)
+
+        if item["kind"] == "meal" and request.form.get("remove_component_id", "").isdigit():
+            remove_component_id = int(request.form.get("remove_component_id", "0"))
+            form_data["component_ids"] = [
+                component_id
+                for component_id in form_data["component_ids"]
+                if component_id != remove_component_id
+            ]
+            return render_item_form(item["kind"], item=item, form_data=form_data)
 
         if item["kind"] == "meal" and form_action == "filter_foods":
             return render_item_form(item["kind"], item=item, form_data=form_data)

nouri/static/css/styles.css

@@ -653,6 +653,58 @@ h3 {
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
 }
 
+.selected-component-stack {
+    display: grid;
+    gap: 0.7rem;
+    margin: 0 0 1rem;
+}
+
+.selected-components-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 0.75rem;
+}
+
+.selected-component-card {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 0.85rem;
+    padding: 0.9rem 1rem;
+    border-radius: 18px;
+    border: 1px solid var(--line);
+    background: color-mix(in srgb, var(--accent-soft) 18%, var(--surface-strong) 82%);
+}
+
+.selected-component-main {
+    display: grid;
+    gap: 0.2rem;
+    min-width: 0;
+}
+
+.selected-component-main strong,
+.selected-component-main small {
+    min-width: 0;
+    overflow-wrap: anywhere;
+}
+
+.selected-component-main small {
+    color: var(--muted);
+}
+
+.selected-component-remove {
+    white-space: nowrap;
+}
+
+[data-theme="dark"] .selected-component-card {
+    background: linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--surface-soft) 82%, #4d413d 18%),
+        color-mix(in srgb, var(--surface) 96%, #2c2523 4%)
+    );
+    border-color: color-mix(in srgb, rgba(243, 177, 125, 0.36) 48%, var(--line) 52%);
+}
+
 .quick-food-grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));

nouri/templates/items/form.html

@@ -4,7 +4,15 @@
 <section class="page-intro">
     <div>
         <p class="eyebrow">{{ item_kind_labels[kind] }}</p>
-        <h1>{% if item %}{{ item.name }} bearbeiten{% else %}Neue{% endif %} {{ item_kind_singular_labels[kind] }}</h1>
+        <h1>
+            {% if item and kind == 'meal' %}
+                {{ item.name }}
+            {% elif item %}
+                {{ item.name }} bearbeiten
+            {% else %}
+                Neue {{ item_kind_singular_labels[kind] }}
+            {% endif %}
+        </h1>
         <p class="lead">
             {% if kind == 'food' %}
                 Name, Sichtbarkeit und ein paar ruhige Hinweise dazu, wie ein Lebensmittel in Vorschlägen gut passt.
@@ -174,27 +182,48 @@
             </div>
         {% endif %}
 
-        <fieldset>
+        {% if kind == 'food' %}
-            <legend>Passende Tageszeiten</legend>
+            <fieldset>
-            <div class="checkbox-grid daypart-option-grid">
+                <legend>Passende Tageszeiten</legend>
-                {% for daypart in dayparts %}
+                <div class="checkbox-grid daypart-option-grid">
-                    <label class="daypart-option">
+                    {% for daypart in dayparts %}
-                        <input type="checkbox" name="daypart_ids" value="{{ daypart.id }}" {% if daypart.id in form_data.daypart_ids %}checked{% endif %}>
+                        <label class="daypart-option">
-                        <span class="daypart-option-card">
+                            <input type="checkbox" name="daypart_ids" value="{{ daypart.id }}" {% if daypart.id in form_data.daypart_ids %}checked{% endif %}>
-                            <span class="daypart-option-icon">
+                            <span class="daypart-option-card">
-                                <span class="ui-icon {{ daypart_icon_class(daypart.slug) }}"></span>
+                                <span class="daypart-option-icon">
+                                    <span class="ui-icon {{ daypart_icon_class(daypart.slug) }}"></span>
+                                </span>
+                                <span class="daypart-option-label">{{ daypart.name }}</span>
                             </span>
-                            <span class="daypart-option-label">{{ daypart.name }}</span>
+                        </label>
-                        </span>
+                    {% endfor %}
-                    </label>
+                </div>
-                {% endfor %}
+            </fieldset>
-            </div>
+        {% endif %}
-        </fieldset>
 
         {% if kind == 'meal' %}
             <fieldset>
                 <legend>Bestandteile der Mahlzeitenidee</legend>
                 <p class="muted">Du kannst eine Mahlzeitenidee frei benennen oder aus sichtbaren Lebensmitteln zusammensetzen. Nouri nutzt dabei später Grundtyp, Rolle und Tageszeit der Lebensmittel für ruhigere Vorschläge.</p>
+                {% if selected_components %}
+                    <div class="selected-component-stack">
+                        <p class="helper-text">Schon ausgewählt</p>
+                        <div class="selected-components-grid">
+                            {% for component in selected_components %}
+                                <article class="selected-component-card">
+                                    <input type="hidden" name="component_ids" value="{{ component.id }}">
+                                    <div class="selected-component-main">
+                                        <strong>{{ component.name }}</strong>
+                                        <small>{{ component.base_type_label }} · {{ component.visibility_label }}</small>
+                                    </div>
+                                    <button class="ghost-button selected-component-remove" type="submit" name="remove_component_id" value="{{ component.id }}">
+                                        Entfernen
+                                    </button>
+                                </article>
+                            {% endfor %}
+                        </div>
+                    </div>
+                {% endif %}
                 <div class="inline-form">
                     <label class="wide">
                         Lebensmittel suchen