HOLD: Dynamic facilitator border and inactive button graying

app/frontend/javascript/controllers/inactive_toggle_controller.js

@@ -1,17 +1,43 @@
 import { Controller } from "@hotwired/stimulus";
 
+const COLORS = "sky|emerald|indigo|purple|teal|violet|orange|rose|blue|pink|cyan|lime|yellow|fuchsia|amber|green|slate|red";
+const COLOR_RE = new RegExp(`\\b(hover:)?(bg|text|border)-(${COLORS})-\\d+\\b`, "g");
+
+function grayOut(el) {
+  el.className = el.className.replace(COLOR_RE, (_, hover, prop) => {
+    if (hover) return "hover:bg-gray-200";
+    if (prop === "bg") return "bg-gray-100";
+    if (prop === "text") return "text-gray-400";
+    if (prop === "border") return "border-gray-300";
+    return _;
+  });
+}
+
 export default class extends Controller {
   connect() {
     this.endDateInput = this.element.querySelector("input[type='date'][name*='end_date']");
-    if (this.endDateInput) {
-      this.apply();
-    }
+    this.titleInput = this.element.querySelector("textarea[name*='title']");
+
+    // Save original classes for profile buttons and their styled children
+    this._savedClasses = [];
+    this.element.querySelectorAll("a.group, a.group span").forEach((el) => {
+      this._savedClasses.push({ el, className: el.className });
+    });
+
+    if (this.endDateInput) this.apply();
+    if (this.titleInput) this.updateBorder();
   }
 
   toggle() {
     this.apply();
   }
 
+  updateBorder() {
+    if (!this.titleInput) return;
+    const isFacilitator = this.titleInput.value.toLowerCase().includes("facilitator");
+    this.element.style.borderLeft = `4px solid ${isFacilitator ? "#e879f9" : "#d1d5db"}`;
+  }
+
   apply() {
     if (!this.endDateInput) return;
     const value = this.endDateInput.value;
@@ -20,9 +46,11 @@ export default class extends Controller {
     if (isPast) {
       this.element.classList.add("bg-gray-100", "border-gray-300", "opacity-60");
       this.element.classList.remove("bg-white", "border-gray-200");
+      this.element.querySelectorAll("a.group, a.group span").forEach((el) => grayOut(el));
     } else {
       this.element.classList.remove("bg-gray-100", "border-gray-300", "opacity-60");
       this.element.classList.add("bg-white", "border-gray-200");
+      this._savedClasses.forEach(({ el, className }) => { el.className = className; });
     }
   }
 }

app/views/organizations/_affiliation_fields.html.erb

@@ -32,7 +32,7 @@
                     rows: 1,
                     value: f.object&.title || f.object&.position || "Facilitator",
                     style: "height: 42px; min-height: 42px;",
-                    data: { action: "input->affiliation-dates#recalculate" }
+                    data: { action: "input->affiliation-dates#recalculate input->inactive-toggle#updateBorder" }
                   } %>
     </div>
 

app/views/people/_affiliation_fields.html.erb

@@ -33,7 +33,7 @@
                       rows: 1,
                       value: f.object.title || f.object.position || "Facilitator",
                       style: "height: 42px; min-height: 42px;",
-                      data: { action: "input->affiliation-dates#recalculate" }
+                      data: { action: "input->affiliation-dates#recalculate input->inactive-toggle#updateBorder" }
                     } %>
       </div>
     </div>