From cbd58fd2dc3301b02cbe673835a1701e42fba06c Mon Sep 17 00:00:00 2001
From: Stephan Kerkman <stephan@kerkman.io>
Date: Mon, 1 Jun 2026 17:26:14 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20restyle=20plant=5Flist=20with=20Tailwin?=
 =?UTF-8?q?d=20=E2=80=94=20search,=20filter=20chips,=20plant=20cards?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../plants/partials/plant_list_results.html   | 41 ++++++-----
 plants/templates/plants/plant_list.html       | 72 ++++++++++++-------
 plants/views/plants.py                        |  1 +
 3 files changed, 71 insertions(+), 43 deletions(-)

diff --git a/plants/templates/plants/partials/plant_list_results.html b/plants/templates/plants/partials/plant_list_results.html
index 898e049..7ef6375 100644
--- a/plants/templates/plants/partials/plant_list_results.html
+++ b/plants/templates/plants/partials/plant_list_results.html
@@ -1,23 +1,26 @@
+{# plants/templates/plants/partials/plant_list_results.html #}
 {% for plant in plants %}
-<a href="{% url 'plant_detail' plant.pk %}" class="text-decoration-none">
-    <div class="card mb-2">
-        <div class="card-body d-flex align-items-center gap-3 py-2">
-            {% if plant.species and plant.species.api_image_url %}
-            <img src="{{ plant.species.api_image_url }}" width="48" height="48" class="rounded" style="object-fit:cover; flex-shrink:0;">
-            {% elif plant.thumbnail_url %}
-            <img src="{{ plant.thumbnail_url }}" width="48" height="48" class="rounded" style="object-fit:cover; flex-shrink:0;">
-            {% else %}
-            <div style="width:48px; height:48px; background:#d8f3dc; border-radius:.375rem; flex-shrink:0; display:flex; align-items:center; justify-content:center;">🌿</div>
-            {% endif %}
-            <div>
-                <div class="fw-semibold" style="color:#1b4332;">{{ plant.name }}</div>
-                <small class="text-muted">
-                    {{ plant.location }}
-                </small>
-            </div>
-        </div>
-    </div>
+<a href="{% url 'plant_detail' plant.pk %}"
+   class="flex items-center gap-3 bg-white rounded-2xl px-3 py-2.5 shadow-sm mb-2.5 no-underline block">
+  {% if plant.species and plant.species.api_image_url %}
+  <img src="{{ plant.species.api_image_url }}" width="52" height="52"
+       class="rounded-xl flex-shrink-0" style="object-fit:cover;">
+  {% elif plant.thumbnail_url %}
+  <img src="{{ plant.thumbnail_url }}" width="52" height="52"
+       class="rounded-xl flex-shrink-0" style="object-fit:cover;">
+  {% else %}
+  <div class="w-[52px] h-[52px] bg-[#D8F3DC] rounded-xl flex-shrink-0 flex items-center justify-center text-2xl">🌿</div>
+  {% endif %}
+  <div class="flex-1 min-w-0">
+    <div class="font-nunito font-extrabold text-[14px] text-[#1A1208] truncate">{{ plant.name }}</div>
+    {% if plant.location %}
+    <span class="inline-block font-nunito text-[10px] font-bold px-2 py-0.5 rounded-full bg-[#FFF3E8] text-[#F07040] mt-0.5">
+      {{ plant.location.name }}
+    </span>
+    {% endif %}
+  </div>
+  <span class="text-[#D0C0B0] font-bold text-lg">›</span>
 </a>
 {% empty %}
-<p class="text-muted text-center mt-4">No plants found.</p>
+<p class="font-nunito text-sm text-[#B0A090] text-center py-8">No plants found.</p>
 {% endfor %}
diff --git a/plants/templates/plants/plant_list.html b/plants/templates/plants/plant_list.html
index 7bd399e..599a058 100644
--- a/plants/templates/plants/plant_list.html
+++ b/plants/templates/plants/plant_list.html
@@ -1,34 +1,58 @@
+{# plants/templates/plants/plant_list.html #}
 {% extends "plants/base.html" %}
 {% block title %}Plants — BloomBase{% endblock %}
 {% block content %}
-<div class="d-grid mb-3">
-    <a href="{% url 'plant_add' %}" class="btn btn-success">+ Add a plant</a>
-</div>
-<div class="mb-3">
+
+<div class="px-4 pt-6">
+
+  <!-- Header -->
+  <div class="flex justify-between items-center mb-4">
+    <h1 class="font-nunito font-black text-[22px] text-[#1A1208]">All Plants</h1>
+    <a href="{% url 'plant_add' %}"
+       class="bb-fab w-10 h-10 flex items-center justify-center rounded-full no-underline text-xl font-light">+</a>
+  </div>
+
+  <!-- Search -->
+  <div class="flex items-center gap-2 bg-[#F5F0EA] rounded-full px-4 py-2.5 mb-3">
+    <svg width="16" height="16" fill="none" stroke="#B0A090" stroke-width="2" viewBox="0 0 24 24">
+      <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
+    </svg>
     <input
-        type="search"
-        name="q"
-        value="{{ q }}"
-        class="form-control"
-        placeholder="🔍 Search plants..."
-        hx-get="{% url 'plant_list' %}"
-        hx-trigger="input changed delay:300ms"
-        hx-target="#plant-list"
-        hx-swap="innerHTML"
+      type="search"
+      name="q"
+      value="{{ q }}"
+      placeholder="Search plants…"
+      class="flex-1 bg-transparent font-nunito text-sm font-semibold text-[#1A1208]
+             placeholder-[#C0B0A0] outline-none"
+      hx-get="{% url 'plant_list' %}"
+      hx-trigger="input changed delay:300ms"
+      hx-target="#plant-list"
+      hx-swap="innerHTML"
     >
-</div>
+  </div>
 
-<div class="d-flex align-items-center gap-2 mb-3">
-    <div class="btn-group flex-wrap flex-grow-1" role="group">
-        <a href="{% url 'plant_list' %}" class="btn btn-sm {% if not location_filter %}btn-success{% else %}btn-outline-success{% endif %}">All</a>
-        {% for loc in locations %}
-        <a href="{% url 'plant_list' %}?location={{ loc.pk }}" class="btn btn-sm {% if location_filter == loc.pk|stringformat:'s' %}btn-success{% else %}btn-outline-success{% endif %}">{{ loc.name }}</a>
-        {% endfor %}
-    </div>
-    <a href="{% url 'location_list' %}" class="btn btn-sm btn-outline-secondary flex-shrink-0" title="Manage areas">⚙️</a>
-</div>
+  <!-- Location filter chips -->
+  <div class="flex gap-2 overflow-x-auto pb-2 mb-4 scrollbar-hide">
+    <a href="{% url 'plant_list' %}"
+       class="flex-shrink-0 px-4 py-1.5 rounded-full font-nunito font-bold text-[12px]
+              {% if not location_filter %}bg-[#F07040] text-white{% else %}bg-white text-[#B0A090] border border-[#F0E4D4]{% endif %}
+              no-underline">
+      All
+    </a>
+    {% for loc in locations %}
+    <a href="{% url 'plant_list' %}?location={{ loc.pk }}"
+       class="flex-shrink-0 px-4 py-1.5 rounded-full font-nunito font-bold text-[12px]
+              {% if location_filter == loc.pk|stringformat:'s' %}bg-[#F07040] text-white{% else %}bg-white text-[#B0A090] border border-[#F0E4D4]{% endif %}
+              no-underline">
+      {{ loc.name }}
+    </a>
+    {% endfor %}
+  </div>
 
-<div id="plant-list">
+  <!-- Plant list -->
+  <div id="plant-list">
     {% include "plants/partials/plant_list_results.html" %}
+  </div>
+
 </div>
 {% endblock %}
diff --git a/plants/views/plants.py b/plants/views/plants.py
index 8569e3f..1931250 100644
--- a/plants/views/plants.py
+++ b/plants/views/plants.py
@@ -27,6 +27,7 @@ def plant_list(request):
         'plants': qs, 'q': q,
         'location_filter': location_filter,
         'locations': locations,
+        'active_tab': 'garden',
     })