Show visited countries in a modal window on the Trip page

CHANGELOG.md

@@ -6,12 +6,19 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 # [UNRELEASED]
 
+## Changed
+
+- On the Trip page, instead of list of visited countries, a number of them is being shown. Clicking on it opens a modal with a list of countries visited during the trip. #1731
+
 ## Fixed
 
 - `GET /api/v1/stats` endpoint now returns correct 0 instead of null if no points were tracked in the requested period.
 - User import data now being streamed instead of loaded into memory all at once. This should prevent large imports from exhausting memory or hitting IO limits while reading export archives.
 - Popup for manual visit creation now looks better in both light and dark modes. #1835
 - Fixed a bug where visit circles were not interactive on the map page. #1833
+- Fixed a bug with stats sharing settings being not filled. #1826
+- Fixed a bug where user could not be deleted due to counter cache on points. #1818
+- Introduce apt-get upgrade before installing new packages in the docker image to prevent vulnerabilities. #1793
 
 # [0.33.0] - 2025-09-29
 

app/views/trips/_countries.html.erb

@@ -11,12 +11,13 @@
       <div class="stat-value text-lg"><%= trip_duration(trip) %></div>
     </div>
   </div>
-  <div class="card bg-base-200 shadow-lg">
+  <div class="card bg-base-200 shadow-lg cursor-pointer hover:bg-base-300 transition-colors"
+       onclick="countries_modal_<%= trip.id %>.showModal()">
     <div class="card-body p-4">
       <div class="stat-title text-xs">Countries</div>
       <div class="stat-value text-lg">
         <% if trip.visited_countries.any? %>
-          <%= trip.visited_countries.join(', ') %>
+          <%= trip.visited_countries.count %>
         <% else %>
           <span class="loading loading-dots loading-sm"></span>
         <% end %>
@@ -24,3 +25,27 @@
     </div>
   </div>
 </div>
+
+<!-- Countries Modal -->
+<dialog id="countries_modal_<%= trip.id %>" class="modal">
+  <div class="modal-box">
+    <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">Visited Countries</h3>
+    <% if trip.visited_countries.any? %>
+      <div class="space-y-2">
+        <% trip.visited_countries.sort.each do |country| %>
+          <div class="p-3 bg-base-200 rounded-lg">
+            <%= country %>
+          </div>
+        <% end %>
+      </div>
+    <% else %>
+      <p class="text-base-content/70">No countries data available yet.</p>
+    <% end %>
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button>close</button>
+  </form>
+</dialog>