Move UI logic to Stimulus: toolbar only

js/controllers/tabs_controller.js

@@ -0,0 +1,42 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+    static targets = ['active', 'tab', 'content'];
+
+    connect() {
+        console.log('#tabs controller connected');
+    }
+    /**
+     * 
+     * @param {Event} event 
+     */
+    activate(event) {
+        event.preventDefault();
+        this.deactivate();
+        const activeId = event.currentTarget.dataset.id;
+
+        event.currentTarget.parentElement.classList.add('active');
+        this.contentTargets.find(c => c.dataset.id === activeId)
+            .classList.remove('d-hide');
+    }
+
+    reset() {
+        this.deactivate();
+        const activeId = this.activeTarget.dataset.id;
+
+        this.activeTarget.classList.add('active');
+        this.contentTargets.find(c => c.dataset.id === activeId)
+            .classList.remove('d-hide');
+    }
+
+    deactivate() {
+        this.tabTargets.forEach(tab => {
+            tab.classList.remove('active');
+        });
+
+        this.contentTargets.forEach(content => {
+            content.classList.add('d-hide');
+        });
+    }
+}
+