Rende il CRM comodo da usare anche da cellulare.

Aggiunge navigazione mobile dedicata e trasforma le principali liste operative in layout più leggibili e facili da toccare.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/views/contacts/index.html.erb

@@ -1,31 +1,50 @@
 <div class="space-y-4">
-  <div class="flex items-center justify-between">
-    <h1 class="text-2xl font-semibold">Contatti</h1>
-    <div class="flex gap-2">
-      <%= link_to "Export CSV", contacts_path(format: :csv), class: btn_secondary %>
-      <%= link_to "Nuovo", new_contact_path, class: btn_primary %>
+  <div class="flex flex-wrap items-center justify-between gap-3">
+    <h1 class="text-xl font-semibold md:text-2xl">Contatti</h1>
+    <div class="flex w-full flex-wrap gap-2 sm:w-auto">
+      <%= link_to "Export CSV", contacts_path(format: :csv), class: "#{btn_secondary} flex-1 sm:flex-none" %>
+      <%= link_to "Nuovo", new_contact_path, class: "#{btn_primary} flex-1 sm:flex-none" %>
     </div>
   </div>
-  <%= form_with url: contacts_path, method: :get, class: "flex gap-2" do %>
+  <%= form_with url: contacts_path, method: :get, class: "flex flex-col gap-2 sm:flex-row" do %>
     <%= text_field_tag :q, params[:q], placeholder: "Cerca…", class: input_class %>
     <%= submit_tag "Cerca", class: btn_primary %>
   <% end %>
-  <div class="overflow-hidden rounded-xl border border-zinc-200 bg-white text-zinc-900 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100">
-    <table class="<%= table_class %>">
-      <thead class="bg-zinc-50 text-left text-xs uppercase text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
-        <tr><th class="px-4 py-3">Nome</th><th class="px-4 py-3">Organizzazione</th><th class="px-4 py-3">Email</th><th class="px-4 py-3">Telefono</th></tr>
-      </thead>
-      <tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
-        <% @contacts.each do |c| %>
-          <tr>
-            <td class="px-4 py-3 font-medium"><%= link_to c.full_name, c.organization, class: "hover:underline" %><% if c.primary_contact? %> ★<% end %></td>
-            <td class="px-4 py-3"><%= c.organization.name %></td>
-            <td class="px-4 py-3"><%= c.email %></td>
-            <td class="px-4 py-3"><%= c.phone.presence || c.mobile %></td>
-          </tr>
+
+  <div class="space-y-2 md:hidden">
+    <% @contacts.each do |c| %>
+      <%= link_to c.organization, class: "#{card_class} block p-4 active:bg-zinc-50 dark:active:bg-zinc-800" do %>
+        <div class="font-semibold"><%= c.full_name %><% if c.primary_contact? %> ★<% end %></div>
+        <div class="mt-0.5 text-sm text-zinc-500"><%= c.organization.name %></div>
+        <div class="mt-1 text-sm break-anywhere text-zinc-600 dark:text-zinc-300"><%= c.email %></div>
+        <% if c.phone.present? || c.mobile.present? %>
+          <div class="mt-0.5 text-sm text-zinc-500"><%= c.phone.presence || c.mobile %></div>
         <% end %>
-      </tbody>
-    </table>
+      <% end %>
+    <% end %>
+    <% if @contacts.blank? %>
+      <p class="<%= card_class %> p-6 text-sm text-zinc-500">Nessun contatto.</p>
+    <% end %>
+  </div>
+
+  <div class="hidden <%= card_class %> md:block">
+    <div class="<%= table_wrap_class %>">
+      <table class="<%= table_class %>">
+        <thead class="bg-zinc-50 text-left text-xs uppercase text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
+          <tr><th class="px-4 py-3">Nome</th><th class="px-4 py-3">Organizzazione</th><th class="px-4 py-3">Email</th><th class="px-4 py-3">Telefono</th></tr>
+        </thead>
+        <tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
+          <% @contacts.each do |c| %>
+            <tr>
+              <td class="px-4 py-3 font-medium"><%= link_to c.full_name, c.organization, class: "hover:underline" %><% if c.primary_contact? %> ★<% end %></td>
+              <td class="px-4 py-3"><%= c.organization.name %></td>
+              <td class="px-4 py-3"><%= c.email %></td>
+              <td class="px-4 py-3"><%= c.phone.presence || c.mobile %></td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
   </div>
   <%== pagy_nav(@pagy) if @pagy.pages > 1 %>
 </div>

app/views/contacts/show.html.erb

@@ -1,11 +1,30 @@
 <div class="space-y-4">
-  <h1 class="text-2xl font-semibold"><%= @contact.full_name %></h1>
-  <div class="rounded-xl border border-zinc-200 bg-white text-zinc-900 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100 p-5 text-sm">
-    <p><strong>Organizzazione:</strong> <%= link_to @contact.organization.name, @contact.organization %></p>
-    <p><strong>Ruolo:</strong> <%= @contact.role %></p>
-    <p><strong>Email:</strong> <%= @contact.email %></p>
-    <p><strong>Telefono:</strong> <%= @contact.phone %></p>
-    <p><strong>Cellulare:</strong> <%= @contact.mobile %></p>
-    <%= link_to "Modifica", edit_contact_path(@contact), class: "mt-4 inline-block text-emerald-700 dark:text-emerald-400" %>
+  <div class="flex flex-wrap items-center justify-between gap-3">
+    <div>
+      <h1 class="text-xl font-semibold md:text-2xl"><%= @contact.full_name %></h1>
+      <p class="text-sm text-zinc-500"><%= link_to @contact.organization.name, @contact.organization, class: "hover:underline" %></p>
+    </div>
+    <%= link_to "Modifica", edit_contact_path(@contact), class: "#{btn_secondary} w-full sm:w-auto" %>
+  </div>
+
+  <div class="rounded-xl border border-zinc-200 bg-white p-5 text-sm text-zinc-900 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100">
+    <dl class="space-y-4">
+      <div>
+        <dt class="text-xs font-medium uppercase tracking-wide text-zinc-500">Ruolo</dt>
+        <dd class="mt-1"><%= @contact.role.presence || "—" %></dd>
+      </div>
+      <div>
+        <dt class="text-xs font-medium uppercase tracking-wide text-zinc-500">Email</dt>
+        <dd class="mt-1 break-anywhere"><%= mailto_link(@contact.email, class: "text-sky-700 hover:underline dark:text-sky-400") %></dd>
+      </div>
+      <div>
+        <dt class="text-xs font-medium uppercase tracking-wide text-zinc-500">Telefono</dt>
+        <dd class="mt-1"><%= tel_link(@contact.phone, class: "text-sky-700 hover:underline dark:text-sky-400") %></dd>
+      </div>
+      <div>
+        <dt class="text-xs font-medium uppercase tracking-wide text-zinc-500">Cellulare</dt>
+        <dd class="mt-1"><%= tel_link(@contact.mobile, class: "text-sky-700 hover:underline dark:text-sky-400") %></dd>
+      </div>
+    </dl>
   </div>
 </div>