Release Nouri 1.3.2 with mobile selection improvements

nouri/templates/shopping/list.html

@@ -17,9 +17,12 @@
             <input
                 type="text"
                 name="item_search"
-                list="shopping-food-options"
                 placeholder="Nach Lebensmitteln suchen"
                 autocomplete="off"
+                data-filter-input
+                data-filter-target="#shopping-food-options"
+                data-filter-limit="8"
+                data-filter-hide-empty
             >
         </label>
         <label>
@@ -31,11 +34,46 @@
                 placeholder="z. B. TK, Dose, frisch"
             >
         </label>
-        <datalist id="shopping-food-options">
+        <div class="shopping-add-grid shopping-add-results" id="shopping-food-options">
             {% for item in addable_items %}
-                <option value="{{ item.name }}"></option>
+                {% 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') %}
+                <button
+                    class="shopping-add-card"
+                    type="submit"
+                    name="item_id"
+                    value="{{ item.id }}"
+                    data-filter-label="{{ item.name|lower }} {{ item.category|default('', true)|lower }} {{ item.base_type_label|lower }} {{ item.availability_label|lower }}"
+                >
+                    <span class="shopping-add-card-visual">
+                        {% if item.photo_filename %}
+                            <img
+                                src="{{ image_url(item.photo_filename, 'md') }}"
+                                srcset="{{ image_srcset(item.photo_filename) }}"
+                                sizes="{{ image_sizes('grid') }}"
+                                alt=""
+                                loading="lazy">
+                        {% else %}
+                            <span class="shopping-add-card-fallback">
+                                <span class="ui-icon {{ item_icon_class }}"></span>
+                            </span>
+                        {% endif %}
+                    </span>
+                    <span class="shopping-add-card-copy">
+                        <strong>{{ item.name }}</strong>
+                        <small>{{ item.availability_label }}</small>
+                    </span>
+                </button>
             {% endfor %}
-        </datalist>
+        </div>
         <button type="submit">Auf die Liste</button>
     </form>
 </section>