feat: make index pretty

lib/putzplan_web/live/task_live/index.ex

@@ -13,45 +13,57 @@ defmodule PutzplanWeb.TaskLive.Index do
       </:actions>
     </.header>
 
-    <.table
+    <div id="tasks" class="grid grid-cols-1 gap-4 sm:grid-cols-1 lg:grid-cols-2" phx-update="stream">
-      id="tasks"
+      <%= for {id, task} <- @streams.tasks do %>
-      rows={@streams.tasks}
+        <div
-      row_click={fn {_id, task} -> JS.navigate(~p"/tasks/#{task}") end}
+          id={"task-#{id}"}
+          class="flex flex-col p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 cursor-pointer"
+          phx-click={JS.navigate(~p"/tasks/#{task}")}
+        >
+          <div class="flex justify-between items-center mb-3">
+            <div class="font-medium text-gray-800 text-lg">{task.description}</div>
+            <div class="flex space-x-2">
+              <.link
+                phx-click={JS.push("complete", value: %{id: task.id})}
+                class="text-green-600 hover:text-green-800 p-1 rounded-full hover:bg-green-100"
               >
-      <:col :let={{id, task}}>
-          <.link phx-click={JS.push("complete", value: %{id: task.id})}>
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke-width="1.5"
                   stroke="currentColor"
-              class="size-6"
+                  class="w-6 h-6"
                 >
                   <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                 </svg>
               </.link>
-      </:col>
+            </div>
+          </div>
 
-      <:col :let={{_id, task}} label="Description">{task.description}</:col>
+          <div class="mb-3">
+            <div class="text-sm text-gray-500">Due</div>
+            <div class="text-gray-700">{format_date(task.due)}</div>
+          </div>
 
-      <:col :let={{_id, task}} label="Due">{format_date(task.due)}</:col>
+          <div class="mt-auto pt-3 border-t border-gray-100 flex justify-between items-center">
-
-      <:action :let={{_id, task}}>
             <div class="sr-only">
               <.link navigate={~p"/tasks/#{task}"}>Show</.link>
             </div>
-      </:action>
 
-      <:col :let={{id, task}}>
+            <div class="flex space-x-2">
-          <.link patch={~p"/tasks/#{task}/edit"}>
+              <.link
+                patch={~p"/tasks/#{task}/edit"}
+                class="text-blue-600 hover:text-blue-800 p-1 rounded-full hover:bg-blue-100"
+                phx-click-stop-propagation="true"
+              >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke-width="1.5"
                   stroke="currentColor"
-              class="size-6"
+                  class="w-6 h-6"
                 >
                   <path
                     stroke-linecap="round"
@@ -60,12 +72,12 @@ defmodule PutzplanWeb.TaskLive.Index do
                   />
                 </svg>
               </.link>
-      </:col>
 
-      <:col :let={{id, task}}>
               <.link
-            phx-click={JS.push("delete", value: %{id: task.id}) |> hide("##{id}")}
+                phx-click={JS.push("delete", value: %{id: task.id}) |> hide("#task-#{id}")}
                 data-confirm="Are you sure?"
+                class="text-red-600 hover:text-red-800 p-1 rounded-full hover:bg-red-100"
+                phx-click-stop-propagation="true"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -73,7 +85,7 @@ defmodule PutzplanWeb.TaskLive.Index do
                   viewBox="0 0 24 24"
                   stroke-width="1.5"
                   stroke="currentColor"
-              class="size-6"
+                  class="w-6 h-6"
                 >
                   <path
                     stroke-linecap="round"
@@ -82,8 +94,11 @@ defmodule PutzplanWeb.TaskLive.Index do
                   />
                 </svg>
               </.link>
-      </:col>
+            </div>
-    </.table>
+          </div>
+        </div>
+      <% end %>
+    </div>
 
     <.modal :if={@live_action in [:new, :edit]} id="task-modal" show on_cancel={JS.patch(~p"/tasks")}>
       <.live_component