From a1d4c9da232028cebe795baf165a9c119d7d6557 Mon Sep 17 00:00:00 2001
From: Lizandro GD <lizandrogd@gmail.com>
Date: Wed, 22 Jul 2026 13:02:20 +0000
Subject: [PATCH] style: mejorar UI de tarjetas de instancias con iconos y
 jerarquia visual

---
 resources/views/coolify.html | 50 +++++++++++++++++++++++++-----------
 1 file changed, 35 insertions(+), 15 deletions(-)

diff --git a/resources/views/coolify.html b/resources/views/coolify.html
index 5f943f7..6b8a45e 100644
--- a/resources/views/coolify.html
+++ b/resources/views/coolify.html
@@ -534,35 +534,55 @@
         <div x-show="configs.length === 0" class="text-sm text-gray-400 py-8 text-center">
             No hay instancias configuradas. Haz clic en "+ Nueva instancia" para agregar la primera.
         </div>
-        <div class="space-y-3">
+        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
             <template x-for="cfg in configs" :key="cfg.ID || cfg.id">
-                <div class="flex items-center justify-between bg-gray-50 border rounded-xl px-4 py-3">
-                    <div class="flex items-center gap-3">
+                <div class="border rounded-xl p-4 flex flex-col gap-3 hover:shadow-md transition"
+                    :class="selectedConfigId === (cfg.ID || cfg.id) ? 'border-indigo-200 ring-1 ring-indigo-100' : 'border-gray-200'">
+                    <!-- Nombre + estado -->
+                    <div class="flex items-start justify-between gap-2">
+                        <div class="min-w-0">
+                            <p class="font-semibold text-sm truncate" x-text="cfg.Nombre || cfg.nombre || 'Sin nombre'"></p>
+                            <p class="text-xs text-gray-400 font-mono truncate" x-text="cfg.BaseURL || cfg.base_url"></p>
+                        </div>
                         <span :class="(cfg.Activo || cfg.activo) ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-400'"
-                            class="text-xs px-2 py-0.5 rounded-full font-medium"
+                            class="text-xs px-2 py-0.5 rounded-full font-medium shrink-0"
                             x-text="(cfg.Activo || cfg.activo) ? 'Activa' : 'Inactiva'">
                         </span>
-                        <div>
-                            <p class="text-sm font-semibold text-gray-800" x-text="cfg.Nombre || cfg.nombre || 'Sin nombre'"></p>
-                            <p class="text-xs text-gray-400 font-mono" x-text="cfg.BaseURL || cfg.base_url"></p>
-                        </div>
                     </div>
-                    <div class="flex items-center gap-2">
-                        <button @click="selectedConfigId = cfg.ID || cfg.id; flash('Instancia seleccionada: ' + (cfg.Nombre || cfg.nombre))"
-                            :class="selectedConfigId === (cfg.ID || cfg.id) ? 'bg-indigo-100 text-indigo-700 border-indigo-200' : 'bg-white text-gray-600 border-gray-200'"
-                            class="text-xs px-3 py-1.5 rounded-lg border font-medium hover:bg-indigo-50 transition">
+
+                    <!-- Indicador de instancia en uso -->
+                    <div x-show="selectedConfigId === (cfg.ID || cfg.id)" class="text-xs text-indigo-600 font-medium flex items-center gap-1">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 16 16">
+                            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
+                        </svg>
+                        En uso
+                    </div>
+
+                    <!-- Acciones -->
+                    <div class="flex flex-wrap gap-2 pt-1 border-t border-gray-100">
+                        <button x-show="selectedConfigId !== (cfg.ID || cfg.id)"
+                            @click="selectedConfigId = cfg.ID || cfg.id; flash('Instancia seleccionada: ' + (cfg.Nombre || cfg.nombre))"
+                            class="flex items-center gap-1 text-xs px-2.5 py-1 rounded-lg bg-indigo-100 text-indigo-700 hover:bg-indigo-200 transition font-medium">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="currentColor" viewBox="0 0 16 16"><path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/></svg>
                             Usar
                         </button>
                         <button @click="testInst(cfg.ID || cfg.id)"
-                            class="text-xs px-3 py-1.5 rounded-lg border border-gray-200 bg-white text-gray-600 hover:bg-gray-100 transition">
+                            class="flex items-center gap-1 text-xs px-2.5 py-1 rounded-lg bg-gray-100 text-gray-600 hover:bg-gray-200 transition font-medium">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="currentColor" viewBox="0 0 16 16"><path d="M5.52.359A.5.5 0 0 1 6 0h4a.5.5 0 0 1 .474.658L8.694 6H12.5a.5.5 0 0 1 .395.807l-7 9a.5.5 0 0 1-.873-.454L6.823 9.5H3.5a.5.5 0 0 1-.48-.641z"/></svg>
                             Probar
                         </button>
                         <button @click="openInstModal(cfg)"
-                            class="text-xs px-3 py-1.5 rounded-lg border border-gray-200 bg-white text-gray-600 hover:bg-gray-100 transition">
+                            class="flex items-center gap-1 text-xs px-2.5 py-1 rounded-lg bg-blue-50 text-blue-600 hover:bg-blue-100 transition font-medium">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487z"/>
+                            </svg>
                             Editar
                         </button>
                         <button @click="deleteInst(cfg.ID || cfg.id)"
-                            class="text-xs px-3 py-1.5 rounded-lg border border-red-100 bg-white text-red-500 hover:bg-red-50 transition">
+                            class="flex items-center gap-1 text-xs px-2.5 py-1 rounded-lg bg-red-50 text-red-600 hover:bg-red-100 transition font-medium ml-auto">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
+                            </svg>
                             Eliminar
                         </button>
                     </div>