From 8afb7d320008f129ea3f209ec05c330032ed39de Mon Sep 17 00:00:00 2001
From: maebeale <maebeale@users.noreply.github.com>
Date: Tue, 14 Jul 2026 11:36:31 -0400
Subject: [PATCH] Remove the footer's inline script and svg's inline style
 (CSP)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Every page (now including the resource-preview flow this PR reworks) logged two
report-only CSP violations from the global layout: the floating help button's
inline <script> (script-src) and the SVG sprite's inline style= (default-src).

Follow the #1948 precedent — fix the violating markup, keep the strict policy:
move the FAB toggle to a Stimulus controller (fab) and the sprite's positioning
to utility classes. The remaining console CSP entry is a <style> injected by a
JS library (Turbo's progress bar), which would need a CSP nonce to silence.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 AGENTS.md                                     |  3 ++-
 .../javascript/controllers/fab_controller.js  | 15 +++++++++++
 app/frontend/javascript/controllers/index.js  |  3 +++
 app/views/shared/_footer_nav.html.erb         | 26 +++++--------------
 app/views/shared/_svg_symbols.html.erb        |  2 +-
 5 files changed, 27 insertions(+), 22 deletions(-)
 create mode 100644 app/frontend/javascript/controllers/fab_controller.js

diff --git a/AGENTS.md b/AGENTS.md
index 4a3c97ddb8..cd932c2739 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -71,7 +71,7 @@ This codebase (Rails 8.1)
 | Directory | Purpose |
 |---|---|
 | `app/frontend/entrypoints/` | Vite entry points (application.js, application.css) |
-| `app/frontend/javascript/controllers/` | Stimulus controllers (75) |
+| `app/frontend/javascript/controllers/` | Stimulus controllers (76) |
 | `app/frontend/javascript/rhino/` | Rich text editor customizations (mentions, grid) |
 | `app/frontend/stylesheets/` | Tailwind CSS and component styles |
 
@@ -294,6 +294,7 @@ end
 - `dropdown` — Dropdown menus with keyboard/click-outside handling
 - `edit_toggle` — Inline view/edit toggle for the comments and communications boxes (configurable view/edit CSS classes)
 - `event_staff_bio` — Loads a selected person's read-only profile bio (with edit link) alongside the editable event-specific bio on the staff form
+- `fab` — Toggles the floating help menu (FAQs / contact / videos) in the footer open and closed
 - `file_preview` — File upload preview
 - `grant_details` — Swaps a grant's eligibility criteria + tasks when the grant picker changes
 - `grant_select` — Tom Select grant picker showing each grant's remaining-of-total funds
diff --git a/app/frontend/javascript/controllers/fab_controller.js b/app/frontend/javascript/controllers/fab_controller.js
new file mode 100644
index 0000000000..e0a8ee4d2e
--- /dev/null
+++ b/app/frontend/javascript/controllers/fab_controller.js
@@ -0,0 +1,15 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="fab"
+//
+// Toggles the floating help menu (FAQs / contact / videos) open and closed and
+// spins the round button. Replaces an inline <script> in the footer that
+// violated the CSP script-src policy (same pattern as scroll_to_top in #1948).
+export default class extends Controller {
+  static targets = ["menu", "button"]
+
+  toggle() {
+    this.menuTarget.classList.toggle("hidden")
+    this.buttonTarget.classList.toggle("rotate-45")
+  }
+}
diff --git a/app/frontend/javascript/controllers/index.js b/app/frontend/javascript/controllers/index.js
index 346eda3b17..a23ad81090 100644
--- a/app/frontend/javascript/controllers/index.js
+++ b/app/frontend/javascript/controllers/index.js
@@ -75,6 +75,9 @@ application.register("expandable-card", ExpandableCardController)
 import ExpandableCardsController from "./expandable_cards_controller"
 application.register("expandable-cards", ExpandableCardsController)
 
+import FabController from "./fab_controller"
+application.register("fab", FabController)
+
 import DropdownController from "./dropdown_controller"
 application.register("dropdown", DropdownController)
 
diff --git a/app/views/shared/_footer_nav.html.erb b/app/views/shared/_footer_nav.html.erb
index b8de09b3a3..490389eaf1 100644
--- a/app/views/shared/_footer_nav.html.erb
+++ b/app/views/shared/_footer_nav.html.erb
@@ -1,9 +1,9 @@
 <!-- Floating Help Button -->
-<div id="fab-container"
-     class="fixed bottom-6 right-6 z-50 flex flex-col items-end">
+<div class="fixed bottom-6 right-6 z-50 flex flex-col items-end"
+     data-controller="fab">
 
   <!-- Hidden menu items -->
-  <div id="fab-menu"
+  <div data-fab-target="menu"
      class="hidden flex flex-col items-start space-y-2 mb-2 p-4 bg-white border border-gray-300 rounded-lg shadow-md transition-all duration-300">
  
   <%= link_to faqs_path, class: "flex items-center space-x-2 text-gray-800 px-3 py-2 rounded hover:bg-gray-100 w-max" do %>
@@ -31,25 +31,11 @@
 
 
   <!-- Main round button -->
-  <button id="fab-button"
-          type="button"
+  <button type="button"
+          data-fab-target="button"
+          data-action="fab#toggle"
           class="bg-primary text-white w-10 h-10 rounded-full shadow-lg flex items-center
                  justify-center text-lg font-bold hover:bg-blue-700 transition">
     ?
   </button>
 </div>
-
-<script>
-    document.addEventListener("turbo:load", () => {
-        const fabButton = document.getElementById("fab-button");
-        const fabMenu = document.getElementById("fab-menu");
-
-        if (!fabButton || !fabMenu) return;
-
-        // Remove any previous event listener to prevent duplicates
-        fabButton.onclick = () => {
-            fabMenu.classList.toggle("hidden");
-            fabButton.classList.toggle("rotate-45");
-        };
-    });
-</script>
diff --git a/app/views/shared/_svg_symbols.html.erb b/app/views/shared/_svg_symbols.html.erb
index 99f9cb55f0..7c0318192b 100644
--- a/app/views/shared/_svg_symbols.html.erb
+++ b/app/views/shared/_svg_symbols.html.erb
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden">
+<svg xmlns="http://www.w3.org/2000/svg" class="absolute w-0 h-0 overflow-hidden">
   <symbol id="purple-star" viewBox="14 12 72 74">
     <defs>
       <radialGradient id="starGrad" cx="50%" cy="45%" r="55%">