From a8cb9f4f7726d0120c73c4c2e87fff3d0ab3a1f4 Mon Sep 17 00:00:00 2001
From: Yassine Guedidi <yassine@guedidi.com>
Date: Sat, 8 Mar 2025 15:31:15 +0100
Subject: [PATCH] Extract Leftbar and Add Tag controllers

---
 assets/controllers/add_tag_controller.js | 13 +++++++++++++
 assets/controllers/leftbar_controller.js |  7 +++++++
 assets/index.js                          |  9 ---------
 templates/Entry/entry.html.twig          |  6 +++---
 templates/Tag/new_form.html.twig         |  2 +-
 5 files changed, 24 insertions(+), 13 deletions(-)
 create mode 100644 assets/controllers/add_tag_controller.js
 create mode 100644 assets/controllers/leftbar_controller.js

diff --git a/assets/controllers/add_tag_controller.js b/assets/controllers/add_tag_controller.js
new file mode 100644
index 000000000..2afe9c2b6
--- /dev/null
+++ b/assets/controllers/add_tag_controller.js
@@ -0,0 +1,13 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ['input'];
+
+  toggle() {
+    this.element.classList.toggle('hidden');
+
+    if (!this.element.classList.contains('hidden')) {
+      this.inputTarget.focus();
+    }
+  }
+}
diff --git a/assets/controllers/leftbar_controller.js b/assets/controllers/leftbar_controller.js
new file mode 100644
index 000000000..45728a6f0
--- /dev/null
+++ b/assets/controllers/leftbar_controller.js
@@ -0,0 +1,7 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  toggleAddTagForm() {
+    this.dispatch('toggleAddTagForm');
+  }
+}
diff --git a/assets/index.js b/assets/index.js
index 054c04cff..a87fdb7ef 100755
--- a/assets/index.js
+++ b/assets/index.js
@@ -128,12 +128,3 @@ import './scss/index.scss';
   preferedColorScheme.init();
   addDarkThemeListeners();
 }());
-
-$(document).ready(() => {
-  $('#nav-btn-add-tag').on('click', () => {
-    $('.nav-panel-add-tag').toggle();
-    $('.nav-panel-menu').addClass('hidden');
-    $('#tag_label').focus();
-    return false;
-  });
-});
diff --git a/templates/Entry/entry.html.twig b/templates/Entry/entry.html.twig
index 666871dec..189e4c336 100644
--- a/templates/Entry/entry.html.twig
+++ b/templates/Entry/entry.html.twig
@@ -42,7 +42,7 @@
             </ul>
         </div>
     </nav>
-    <ul id="slide-out" class="left-bar collapsible sidenav sidenav-fixed reader-mode" data-controller="materialize--sidenav materialize--collapsible">
+    <ul id="slide-out" class="left-bar collapsible sidenav sidenav-fixed reader-mode" data-controller="materialize--sidenav materialize--collapsible leftbar">
         <li class="bold border-bottom hide-on-med-and-down">
             <a class="waves-effect collapsible-header" href="{{ path('homepage') }}">
                 <i class="material-icons small">arrow_back</i>
@@ -105,7 +105,7 @@
         {% endif %}
 
         <li class="bold border-bottom">
-            <a class="waves-effect collapsible-header" id="nav-btn-add-tag" data-action="click->materialize--sidenav#close">
+            <a class="waves-effect collapsible-header" id="nav-btn-add-tag" data-action="click->materialize--sidenav#close click->leftbar#toggleAddTagForm">
                 <i class="material-icons small">label_outline</i>
                 <span>{{ 'entry.view.left_menu.add_a_tag'|trans }}</span>
             </a>
@@ -320,7 +320,7 @@
             </div>
 
             {% if is_granted('TAG', entry) %}
-                <div class="input-field nav-panel-add-tag" style="display: none">
+                <div class="input-field nav-panel-add-tag hidden" data-controller="add-tag" data-action="leftbar:toggleAddTagForm@window->add-tag#toggle">
                     {{ render(controller('Wallabag\\Controller\\TagController::addTagFormAction', {'id': entry.id})) }}
                 </div>
             {% endif %}
diff --git a/templates/Tag/new_form.html.twig b/templates/Tag/new_form.html.twig
index 033ea8722..175a2af34 100644
--- a/templates/Tag/new_form.html.twig
+++ b/templates/Tag/new_form.html.twig
@@ -7,7 +7,7 @@
         <span class="black-text">{{ form_errors(form.label) }}</span>
     {% endif %}
 
-    {{ form_widget(form.label, {'attr': {'autocomplete': 'off'}}) }}
+    {{ form_widget(form.label, {'attr': {'autocomplete': 'off', 'data-add-tag-target': 'input'}}) }}
 
     {{ form_widget(form.add, {'attr': {'class': 'btn waves-effect waves-light tags-add-form-submit'}}) }}
     {{ form_widget(form._token) }}