Add hovercard for private/public saved sceanrios

app/components/hovercard/component.html.erb

@@ -0,0 +1,20 @@
+
+<div
+  data-controller="hovercard"
+  data-hovercard-url-value="<%= @path %>"
+  data-action="mouseenter->hovercard#show mouseleave->hovercard#hide"
+>
+  <%= content %>
+
+  <%# static card %>
+  <%# should make text optional and setup the @path with turbo see: https://boringrails.com/articles/hovercards-stimulus/ %>
+  <div class="relative hidden" data-hovercard-target="card">
+    <div data-tooltip-arrow class="absolute top-0 left-0 z-50 shadow-lg rounded-lg p-3 min-w-max-content bg-midnight-300 text-midnight-800">
+      <div class="flex space-x-3 items-center w-64 text-sm">
+        <%= @text %>
+      </div>
+    </div>
+  </div>
+</div>
+
+

app/components/hovercard/component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Hovercard
+  class Component < ApplicationComponent
+    option :path
+    option :text, default: proc { "" }
+  end
+end

app/javascript/controllers/hovercard_controller.js

@@ -0,0 +1,35 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["card"];
+  static values = { url: String };
+
+  show() {
+    if (this.hasCardTarget) {
+      this.cardTarget.classList.remove("hidden");
+    } else {
+      fetch(this.urlValue)
+        .then((r) => r.text())
+        .then((html) => {
+          const fragment = document
+            .createRange()
+            .createContextualFragment(html);
+
+          this.element.appendChild(fragment);
+        });
+    }
+  }
+
+  hide() {
+    if (this.hasCardTarget) {
+      this.cardTarget.classList.add("hidden");
+    }
+  }
+
+  disconnect() {
+    if (this.hasCardTarget) {
+      this.cardTarget.remove();
+    }
+  }
+}
+

app/views/saved_scenarios/_block_right_menu.html.erb

@@ -19,14 +19,16 @@
 
 <div class="border-t border-solid border-gray-200 my-10"></div>
 
-<%= render(PublishSavedScenario::Component.new(
-  path_on: publish_saved_scenario_path(saved_scenario),
-  path_off: unpublish_saved_scenario_path(saved_scenario),
-  status: saved_scenario.private,
-  title: t("scenario_bar.private.#{saved_scenario.private}"),
-  icon_on:'eye-slash',
-  icon_off: 'eye',
-))%>
+<%= render(Hovercard::Component.new(path: '', text: t("scenario_bar.private.description.#{saved_scenario.private}"))) do %>
+  <%= render(PublishSavedScenario::Component.new(
+    path_on: publish_saved_scenario_path(saved_scenario),
+    path_off: unpublish_saved_scenario_path(saved_scenario),
+    status: saved_scenario.private,
+    title: t("scenario_bar.private.#{saved_scenario.private}"),
+    icon_on:'eye-slash',
+    icon_off: 'eye',
+  ))%>
+<% end %>
 <%= render(SavedScenarioNavItem::Component.new(
   path: saved_scenario_path(saved_scenario),
   title: t("scenario_bar.featured.#{saved_scenario.featured?}"),

config/locales/en.yml

@@ -38,6 +38,10 @@ en:
     private:
       true: Private
       false: Public
+      description:
+        true: Only you can view or copy this scenario
+        false: |
+          Anyone can view or copy this scenario, but only you can make changes
     featured:
       true: Featured
       false: Make this featured