v0.2 planning and ux improvements

nouri/templates/home/list.html

@@ -5,20 +5,42 @@
     <div>
         <p class="eyebrow">Zuhause</p>
         <h1>Was aktuell da ist</h1>
-        <p class="lead">Sichtbar, ruhig und nach Tageszeiten sortiert. Wenn etwas aufgebraucht ist, wandert es nicht weg, sondern ins Archiv.</p>
+        <p class="lead">Sichtbar, ruhig und besser nach Tageszeiten sortiert. Wenn etwas aufgebraucht ist, wandert es nicht weg, sondern ins Archiv.</p>
     </div>
 </section>
 
-{% if grouped %}
+<section class="panel compact-form-panel">
+    <form method="get" class="filter-form">
+        <label class="wide">
+            Suche
+            <input type="text" name="q" value="{{ query }}" placeholder="Nach Namen suchen">
+        </label>
+        <label>
+            Tageszeit
+            <select name="daypart_id">
+                <option value="">Alle Tageszeiten</option>
+                {% for daypart in dayparts %}
+                    <option value="{{ daypart.id }}" {% if selected_daypart_id == daypart.id %}selected{% endif %}>{{ daypart.name }}</option>
+                {% endfor %}
+            </select>
+        </label>
+        <div class="filter-actions">
+            <button type="submit">Filtern</button>
+            <a class="ghost-button" href="{{ url_for('main.home_view') }}">Zurücksetzen</a>
+        </div>
+    </form>
+</section>
+
+{% if sections %}
     <section class="stack-sections">
-        {% for title, items in grouped.items() %}
+        {% for section in sections if section["items"] %}
             <article class="panel">
                 <div class="panel-head">
-                    <h2>{{ title }}</h2>
-                    <span>{{ items|length }} Eintraege</span>
+                    <h2>{{ section["title"] }}</h2>
+                    <span>{{ section["items"]|length }} Einträge</span>
                 </div>
                 <div class="card-grid">
-                    {% for item in items %}
+                    {% for item in section["items"] %}
                         <article class="item-card compact">
                             <div class="item-media">
                                 {% if item.photo_filename %}
@@ -35,6 +57,7 @@
                                 {% endif %}
                             </div>
                             <div class="item-actions">
+                                <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_archive', item_id=item.id) }}">
                                     {{ csrf_input() }}
                                     <button class="ghost-button" type="submit">Verbraucht / nicht mehr da</button>