From 1b0a0087c7b5a71340775a91053741ed43208cd2 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 1/3] 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 a3ea19ff71..7e51bcb277 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 |
 
@@ -306,6 +306,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%">

From 4930cdc14bb804ab9e59b96f219c58882bb2341c Mon Sep 17 00:00:00 2001
From: maebeale <maebeale@users.noreply.github.com>
Date: Wed, 15 Jul 2026 08:38:08 -0400
Subject: [PATCH 2/3] Reuse the dropdown controller for the footer help button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Per review feedback, drop the new fab controller and drive the floating
help menu with the existing dropdown controller instead — it already
toggles class strings on elements by id via a payload param, which is
exactly the menu-hidden / button-rotate toggle the FAB needs (and it adds
click-outside / escape-to-close for free). Reverts the AGENTS.md controller
count and index.js registration for the removed controller.

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             | 12 +++++++-----
 4 files changed, 8 insertions(+), 25 deletions(-)
 delete mode 100644 app/frontend/javascript/controllers/fab_controller.js

diff --git a/AGENTS.md b/AGENTS.md
index 7e51bcb277..a3ea19ff71 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 (76) |
+| `app/frontend/javascript/controllers/` | Stimulus controllers (75) |
 | `app/frontend/javascript/rhino/` | Rich text editor customizations (mentions, grid) |
 | `app/frontend/stylesheets/` | Tailwind CSS and component styles |
 
@@ -306,7 +306,6 @@ 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
deleted file mode 100644
index e0a8ee4d2e..0000000000
--- a/app/frontend/javascript/controllers/fab_controller.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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 a23ad81090..346eda3b17 100644
--- a/app/frontend/javascript/controllers/index.js
+++ b/app/frontend/javascript/controllers/index.js
@@ -75,9 +75,6 @@ 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 490389eaf1..81657b6891 100644
--- a/app/views/shared/_footer_nav.html.erb
+++ b/app/views/shared/_footer_nav.html.erb
@@ -1,9 +1,10 @@
 <!-- Floating Help Button -->
 <div class="fixed bottom-6 right-6 z-50 flex flex-col items-end"
-     data-controller="fab">
+     data-controller="dropdown">
 
   <!-- Hidden menu items -->
-  <div data-fab-target="menu"
+  <div id="fab-menu"
+       data-dropdown-target="content"
      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,9 +32,10 @@
 
 
   <!-- Main round button -->
-  <button type="button"
-          data-fab-target="button"
-          data-action="fab#toggle"
+  <button id="fab-button"
+          type="button"
+          data-action="dropdown#toggle"
+          data-dropdown-payload-param='[{"fab-menu":"hidden"}, {"fab-button":"rotate-45"}]'
           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">
     ?

From a62e3d709a67ccc3d29bcf734c02621e3842aeeb Mon Sep 17 00:00:00 2001
From: maebeale <maebeale@users.noreply.github.com>
Date: Wed, 15 Jul 2026 08:40:53 -0400
Subject: [PATCH 3/3] Add system spec covering the footer help button toggle

Verifies the shared dropdown controller opens/closes the floating help
menu, guarding the CSP refactor that removed the inline script.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 spec/system/footer_help_button_spec.rb | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 spec/system/footer_help_button_spec.rb

diff --git a/spec/system/footer_help_button_spec.rb b/spec/system/footer_help_button_spec.rb
new file mode 100644
index 0000000000..cbbcbb4a74
--- /dev/null
+++ b/spec/system/footer_help_button_spec.rb
@@ -0,0 +1,19 @@
+require "rails_helper"
+
+# The footer's floating help button is driven by the shared `dropdown`
+# controller (no bespoke controller). Clicking it should reveal the help menu
+# and clicking again should hide it.
+RSpec.describe "Footer help button", type: :system do
+  it "toggles the help menu open and closed" do
+    visit faqs_path
+
+    expect(page).to have_css("#fab-menu.hidden", visible: :all)
+
+    find("#fab-button").click
+    expect(page).to have_css("#fab-menu:not(.hidden)")
+    expect(page).to have_link("FAQs")
+
+    find("#fab-button").click
+    expect(page).to have_css("#fab-menu.hidden", visible: :all)
+  end
+end