From 6e638b8f20ff3fe50deea8e725c0a834d509dbb6 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Mon, 14 Oct 2024 09:50:30 +0100
Subject: [PATCH] Improve stats interface

- Remove unnecessary buttons - can click directly on cards
- Enable shortcuts to lists filtered by format
---
 .../controllers/stats_html/index.html.heex    | 32 +++++++------------
 1 file changed, 11 insertions(+), 21 deletions(-)

diff --git a/lib/music_library_web/controllers/stats_html/index.html.heex b/lib/music_library_web/controllers/stats_html/index.html.heex
index e3330341..1d7b1111 100644
--- a/lib/music_library_web/controllers/stats_html/index.html.heex
+++ b/lib/music_library_web/controllers/stats_html/index.html.heex
@@ -1,6 +1,9 @@
 <div>
   <dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
-    <div class="relative overflow-hidden rounded-lg bg-white px-4 pb-12 pt-5 shadow sm:px-6 sm:pt-6 sm:col-span-2">
+    <div
+      class="relative overflow-hidden rounded-lg bg-white px-4 pb-3 pt-5 shadow sm:px-6 sm:pt-6 sm:col-span-2 cursor-pointer"
+      phx-click={JS.navigate(~p"/records/#{@latest_record}")}
+    >
       <dt>
         <img
           class="absolute max-w-14 rounded-lg shadow"
@@ -20,31 +23,16 @@
             <%= @latest_record.title %>
           </span>
         </p>
-        <div class="absolute inset-x-0 bottom-0 bg-gray-50 px-4 py-4 sm:px-6">
-          <div class="text-sm">
-            <a
-              href={~p"/records/#{@latest_record.id}"}
-              class="font-medium text-zinc-600 hover:text-zinc-500"
-            >
-              View<span class="sr-only"> record</span>
-            </a>
-          </div>
-        </div>
       </dd>
     </div>
-    <div class="relative overflow-hidden rounded-lg bg-white px-4 pb-12 pt-5 shadow sm:px-6 sm:pt-6">
+    <div class="overflow-hidden rounded-lg bg-white px-4 pb-3 pt-5 shadow sm:px-6 sm:pt-6">
       <dt>
         <p class="truncate text-sm font-medium text-gray-500">Total Records</p>
       </dt>
       <dd class="flex items-baseline pb-6 sm:pb-7">
-        <p class="text-2xl font-semibold text-gray-900"><%= @records_count %></p>
-        <div class="absolute inset-x-0 bottom-0 bg-gray-50 px-4 py-4 sm:px-6">
-          <div class="text-sm">
-            <a href={~p"/records"} class="font-medium text-zinc-600 hover:text-zinc-500">
-              View all<span class="sr-only"> records</span>
-            </a>
-          </div>
-        </div>
+        <a href={~p"/records"} class="text-2xl font-semibold text-gray-900">
+          <%= @records_count %>
+        </a>
       </dd>
     </div>
   </dl>
@@ -58,7 +46,9 @@
       </dt>
       <dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
         <div class="flex items-baseline text-2xl font-semibold">
-          <%= count %>
+          <a href={~p"/records?query=format:#{format}"}>
+            <%= count %>
+          </a>
         </div>
       </dd>
     </div>