Fix cache behaviour for visited links

.env.test

@@ -11,5 +11,6 @@ ZwIDAQAB
 ACTIVE_RECORD_ENCRYPTION_PRIMARY_KEY=1
 ACTIVE_RECORD_ENCRYPTION_DETERMINISTIC_KEY=2
 ACTIVE_RECORD_ENCRYPTION_KEY_DERIVATION_SALT=3
+
 GROVER_NO_SANDBOX=true  # must be true for running chromium as root in Docker container
 PDF_DISPLAY_URL=

app/components/message_threads_table_component.html.erb

@@ -2,7 +2,7 @@
   <div class="flex flex-col justify-stretch items-stretch sm:rounded-md bg-white sm:border sm:border-gray-200" data-controller="form all-checkboxes">
     <%= render MessageThreadsBulkActionsComponent.new(ids: [], filter: @filter, filter_subscription: @filter_subscription, signable: Current.user.signer?) %>
     <%= form_with url: bulk_actions_message_threads_path, data: { "form-target": "form", "all-checkboxes-target": "form" } do %>
-      <ul role="list" id="message_threads" class="divide-y divide-gray-100">
+      <ul role="list" id="message_threads" data-controller="visited-links" class="divide-y divide-gray-100">
         <% message_threads.each do |message_thread| %>
           <%= message_thread %>
         <% end %>

app/components/message_threads_table_row_component.html.erb

@@ -2,11 +2,11 @@
   <div class="hidden sm:flex pr-2 md:gap-4 md:pr-4 items-center justify-start mb-auto h-8">
     <%= check_box_tag("message_thread_ids[]", @message_thread.id, false, { id: "message_thread_#{@message_thread.id}", class: "h-4 w-4 rounded border-gray-300 text-blue-500 focus:ring-0 hidden sm:block my-auto", type: "checkbox", data: { action: "form#send" } }) %>
   </div>
-  <%= link_to @message_thread, class: "flex flex-col md:flex-row md:flex-nowrap justify-between grow gap-2" do %>
+  <%= link_to @message_thread, class: class_names("flex flex-col md:flex-row md:flex-nowrap justify-between grow gap-2", :group, visited: @message_thread.all_read), data: {action: 'visited-links#visit'} do %>
     <div class="flex flex-col gap-2">
       <div class="flex flex-wrap grow gap-x-4 gap-y-1">
         <div class="flex items-center sm:min-h-[32px]">
-          <span title="<%= @message_thread.title %>" class="inline text-sm sm:text-lg text-gray-900 <%= "font-semibold" unless @message_thread.all_read %> [word-break:break-word]">
+          <span title="<%= @message_thread.title %>" class="inline text-sm sm:text-lg text-gray-900 group-[:not(.visited)]:font-semibold [word-break:break-word]">
               <%= @message_thread.title %>
           </span>
         </div>
@@ -52,7 +52,7 @@
     </div>
     <div class="hidden md:flex gap-x-4 items-center">
       <div class="flex flex-col gap-y-1 text-right whitespace-nowrap">
-        <time class="text-lg text-gray-900 <%= "font-semibold" unless @message_thread.all_read %>" datetime="<%= @message_thread.last_message_delivered_at %>">
+        <time class="text-lg text-gray-900 group-[:not(.visited)]:font-semibold" datetime="<%= @message_thread.last_message_delivered_at %>">
           <%= helpers.nice_datetime(@message_thread.last_message_delivered_at) %>
         </time>
         <%#= render Common::TagComponent.new("2 nové správy") %>

app/javascript/controllers/index.js

@@ -39,3 +39,6 @@ application.register("turbo-content", TurboContentController)
 
 import ContentWithSeparator from "./content_with_separator"
 application.register("content-with-separator", ContentWithSeparator)
+
+import VisitedLinks from "./visited_links_controller"
+application.register("visited-links", VisitedLinks)

app/javascript/controllers/visited_links_controller.js

@@ -0,0 +1,8 @@
+import {Controller} from "@hotwired/stimulus"
+
+// Connects to data-controller="visited-links"
+export default class extends Controller {
+    visit(event) {
+        event.target.closest("a").classList.add("visited");
+    }
+}