tracebook 0.1.1 → 1.0.0

data/app/assets/javascripts/tracebook/application.js

@@ -4,14 +4,7 @@
 
   function warnStimulusMissing() {
     if (booted) return;
-
-    console.warn("TraceBook: Stimulus failed to load; keyboard shortcuts disabled.");
-    if (document.body) {
-      const banner = document.createElement("div");
-      banner.className = "tb-alert";
-      banner.textContent = "Keyboard navigation is unavailable because Stimulus failed to load.";
-      document.body.prepend(banner);
-    }
+    console.warn("TraceBook: Stimulus failed to load.");
   }
 
   function startApplication() {
@@ -23,56 +16,120 @@
     booted = true;
     const application = window.Stimulus.Application.start();
 
-    class KeyboardController extends window.Stimulus.Controller {
+    class BulkSelectController extends window.Stimulus.Controller {
+      static get targets() {
+        return ["toggleAll", "checkbox", "submitButton"];
+      }
+
+      connect() {
+        this.updateButtonState();
+      }
+
+      toggleAll() {
+        const checked = this.toggleAllTarget.checked;
+        this.checkboxTargets.forEach((checkbox) => {
+          checkbox.checked = checked;
+        });
+        this.updateButtonState();
+      }
+
+      checkboxChanged() {
+        this.updateButtonState();
+      }
+
+      updateButtonState() {
+        const hasSelectedCheckboxes = this.checkboxTargets.some((checkbox) => checkbox.checked);
+        this.submitButtonTarget.disabled = !hasSelectedCheckboxes;
+      }
+    }
+
+    class JsonViewerController extends window.Stimulus.Controller {
       static get targets() {
-        return ["table", "row", "checkbox", "toggleAll", "reviewState"];
+        return ["content", "icon", "copyBtn", "copyText"];
+      }
+
+      static get values() {
+        return { collapsed: Boolean };
       }
 
       connect() {
-        this.index = 0;
-        this.updateSelection();
-        this.element.addEventListener("keydown", this.handleKeydown.bind(this));
+        if (this.collapsedValue) {
+          this.collapse();
+        } else {
+          this.expand();
+        }
       }
 
-      handleKeydown(event) {
-        if (["j", "J"].includes(event.key)) {
-          event.preventDefault();
-          this.index = Math.min(this.rowTargets.length - 1, this.index + 1);
-          this.updateSelection();
+      toggle(event) {
+        // Don't toggle if clicking the copy button
+        if (event.target.closest('.tb-copy-btn')) return;
+
+        if (this.element.classList.contains("tb-collapsed")) {
+          this.expand();
+        } else {
+          this.collapse();
         }
-        if (["k", "K"].includes(event.key)) {
-          event.preventDefault();
-          this.index = Math.max(0, this.index - 1);
-          this.updateSelection();
+      }
+
+      collapse() {
+        this.element.classList.add("tb-collapsed");
+        this.element.classList.remove("tb-expanded");
+        if (this.hasContentTarget) {
+          this.contentTarget.style.display = "none";
         }
-        if ([" ", "Enter"].includes(event.key)) {
-          event.preventDefault();
-          const checkbox = this.checkboxTargets[this.index];
-          if (checkbox) {
-            checkbox.checked = !checkbox.checked;
-          }
+        if (this.hasIconTarget) {
+          this.iconTarget.textContent = "▶";
         }
       }
 
-      updateSelection() {
-        this.rowTargets.forEach((row, idx) => {
-          row.classList.toggle("tb-selected", idx === this.index);
+      expand() {
+        this.element.classList.remove("tb-collapsed");
+        this.element.classList.add("tb-expanded");
+        if (this.hasContentTarget) {
+          this.contentTarget.style.display = "block";
+        }
+        if (this.hasIconTarget) {
+          this.iconTarget.textContent = "▼";
+        }
+      }
+
+      copy(event) {
+        event.stopPropagation();
+        const btn = event.currentTarget;
+        const payload = btn.dataset.payload;
+
+        navigator.clipboard.writeText(payload).then(() => {
+          if (this.hasCopyTextTarget) {
+            const originalText = this.copyTextTarget.textContent;
+            this.copyTextTarget.textContent = "Copied!";
+            setTimeout(() => { this.copyTextTarget.textContent = originalText; }, 2000);
+          }
+        }).catch(() => {
+          console.error("Failed to copy to clipboard");
         });
       }
     }
 
-    class JsonViewerController extends window.Stimulus.Controller {
+    class MessageToggleController extends window.Stimulus.Controller {
       static get targets() {
-        return ["content"];
+        return ["content", "icon"];
       }
 
       toggle() {
-        this.element.classList.toggle("tb-collapsed");
+        const isHidden = this.contentTarget.classList.contains("hidden");
+        if (isHidden) {
+          this.contentTarget.classList.remove("hidden");
+          this.iconTarget.textContent = "▼";
+        } else {
+          this.contentTarget.classList.add("hidden");
+          this.iconTarget.textContent = "▶";
+        }
       }
     }
 
-    application.register("keyboard", KeyboardController);
+    application.register("bulk-select", BulkSelectController);
     application.register("json-viewer", JsonViewerController);
+    application.register("message-toggle", MessageToggleController);
   }
 
   if (window.Stimulus) {