Add browser tooltip to Copy Game (URL) button

Add "Copy URL to Clipboard" browser tooltip to the Game Number + Copy
button.

Also, DRY up this view code so the change can be made in just one place.
We do so by creating a layout partial in app/view/application so that
it is highly reusable.

app/views/application/_copy_button.html.erb

@@ -0,0 +1,20 @@
+<%# locals: (value:, title: "Copy to Clipboard") %>
+
+<span
+  data-controller="clipboard"
+  data-clipboard-source-value="<%= value %>"
+  data-clipboard-highlight-class="text-green-500 animate-ping-once origin-center"
+  class="flex gap-x-2 items-center"
+>
+  <%= yield %>
+
+  <%= inline_svg_tag(
+        "heroicons/clipboard-document.svg",
+        title:,
+        data: {
+          action:
+            "click->clipboard#copy "\
+            "animationend->clipboard#dehighlight",
+          },
+        class: "btn-basic") %>
+</span>

app/views/games/_title.html.erb

@@ -1,27 +1,14 @@
 <%# locals: (title:) %>
 
-<h3 class="flex justify-center gap-x-8">
-  <span
-    data-controller="clipboard"
-    data-clipboard-source-value="<%= title.game_absolute_url %>"
-    data-clipboard-highlight-class="
-      text-green-500 animate-ping-once origin-center
-    "
-    class="flex gap-x-2 items-center"
-  >
+<h3 class="flex justify-center items-baseline gap-x-8">
+  <%= render(
+        layout: "copy_button",
+        locals: { value: title.game_absolute_url, title: title.title_text }) do %>
     <%= link_to(
           title.game_number,
           title.game_url,
           data: { turbo_frame: :_top }) %>
-    <%= inline_svg_tag(
-          "heroicons/clipboard-document.svg",
-          class: "btn-basic",
-          data: {
-            action:
-              "click->clipboard#copy "\
-              "animationend->clipboard#dehighlight",
-          }) %>
-  </span>
+  <% end %>
 
   <span aria-label="Engagement Date">
     <%= title.engagement_date %>

app/views/games/just_ended/_title.html.erb

@@ -1,27 +1,14 @@
 <%# locals: (title:) %>
 
 <h3 class="flex justify-center items-baseline gap-x-8">
-  <span
-    data-controller="clipboard"
-    data-clipboard-source-value="<%= title.game_absolute_url %>"
-    data-clipboard-highlight-class="
-      text-green-500 animate-ping-once origin-center
-    "
-    class="flex gap-x-2 items-center"
-  >
+  <%= render(
+        layout: "copy_button",
+        locals: { value: title.game_absolute_url, title: title.title_text }) do %>
     <%= link_to(
           title.game_number,
           title.game_url,
           data: { turbo_frame: :_top }) %>
-    <%= inline_svg_tag(
-          "heroicons/clipboard-document.svg",
-          class: "btn-basic",
-          data: {
-            action:
-              "click->clipboard#copy "\
-              "animationend->clipboard#dehighlight",
-          }) %>
-  </span>
+  <% end %>
 
   <span aria-label="Engagement Date">
     <%= title.engagement_date %>

app/views/games/just_ended/title.rb

@@ -7,12 +7,14 @@ def initialize(game:)
     @game = game
   end
 
-  def game_number = game.display_id
-
   def game_absolute_url
     Router.game_url(game)
   end
 
+  def title_text = "Copy URL to Clipboard"
+
+  def game_number = game.display_id
+
   def game_url
     Router.game_path(game)
   end

app/views/games/title.rb

@@ -6,12 +6,14 @@ def initialize(game:)
     @game = game
   end
 
-  def game_number = game.display_id
-
   def game_absolute_url
     Router.game_url(game)
   end
 
+  def title_text = "Copy URL to Clipboard"
+
+  def game_number = game.display_id
+
   def game_url
     Router.game_path(game)
   end