From 9a060c14dd57bf2c391fd9147b6354350fcb1b84 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 7 Nov 2025 12:30:22 +0000
Subject: [PATCH] UI: Move sharing controls to DaisyUI modal

- Add Share Trip button under trip dates
- Button displays 'Share Trip' or 'Manage Sharing' based on state
- Convert sharing partial to use DaisyUI 4 modal dialog
- Modal can be closed via X button, backdrop click, or ESC key
- All sharing functionality remains intact within modal
---
 app/views/trips/_sharing.html.erb | 18 +++++++++++++-----
 app/views/trips/show.html.erb     | 15 +++++++++++++--
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/app/views/trips/_sharing.html.erb b/app/views/trips/_sharing.html.erb
index 69437e5a..da6f0ccc 100644
--- a/app/views/trips/_sharing.html.erb
+++ b/app/views/trips/_sharing.html.erb
@@ -1,6 +1,10 @@
-<div class="card bg-base-100 shadow-lg mt-6">
-  <div class="card-body">
-    <h3 class="card-title">Share This Trip</h3>
+<dialog id="sharing_modal_<%= trip.id %>" class="modal">
+  <div class="modal-box max-w-2xl">
+    <form method="dialog">
+      <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+    </form>
+
+    <h3 class="font-bold text-lg mb-4">Share This Trip</h3>
     <p class="text-sm text-base-content/70 mb-4">
       Generate a public link to share this trip with others.
     </p>
@@ -35,6 +39,7 @@
                 class="input input-bordered flex-1"
                 id="sharing-url-<%= trip.id %>">
               <button
+                type="button"
                 class="btn btn-square"
                 onclick="navigator.clipboard.writeText(document.getElementById('sharing-url-<%= trip.id %>').value).then(() => {
                   const btn = this;
@@ -95,7 +100,7 @@
                            ['Never (permanent)', 'permanent']
                          ], '24h'),
                          {},
-                         class: 'select select-bordered' %>
+                         class: 'select select-bordered w-full' %>
           </div>
 
           <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -123,4 +128,7 @@
       <% end %>
     <% end %>
   </div>
-</div>
+  <form method="dialog" class="modal-backdrop">
+    <button>close</button>
+  </form>
+</dialog>
diff --git a/app/views/trips/show.html.erb b/app/views/trips/show.html.erb
index 07f45639..80aae143 100644
--- a/app/views/trips/show.html.erb
+++ b/app/views/trips/show.html.erb
@@ -11,10 +11,21 @@
       <div class="w-full">
         <div class="text-center mb-8">
           <h1 class="text-4xl font-bold mb-2"><%= @trip.name %></h1>
-          <p class="text-md text-base-content/60 mb-4">
+          <p class="text-md text-base-content/60 mb-2">
             <%= human_date(@trip.started_at) %> - <%= human_date(@trip.ended_at) %>
           </p>
 
+          <button onclick="sharing_modal_<%= @trip.id %>.showModal()" class="btn btn-sm btn-ghost gap-2 mb-4">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
+            </svg>
+            <% if @trip.sharing_enabled? %>
+              <span>Manage Sharing</span>
+            <% else %>
+              <span>Share Trip</span>
+            <% end %>
+          </button>
+
           <%= render "trips/countries", trip: @trip, current_user: current_user, distance_unit: current_user.safe_settings.distance_unit %>
         </div>
 
@@ -65,6 +76,6 @@
     </div>
   </div>
 
-  <!-- Sharing Section -->
+  <!-- Sharing Modal -->
   <%= render "trips/sharing", trip: @trip %>
 </div>