From 0589066ed172af58df1b67016599c02e31eecf0a Mon Sep 17 00:00:00 2001
From: Yassine Guedidi <yassine@guedidi.com>
Date: Sat, 1 Mar 2025 00:10:16 +0100
Subject: [PATCH] Extract Materialize Tabs controller

---
 assets/controllers/materialize/tabs_controller.js    | 12 ++++++++++++
 assets/index.js                                      |  1 -
 templates/Config/index.html.twig                     |  2 +-
 templates/Static/about.html.twig                     |  2 +-
 templates/Static/howto.html.twig                     |  2 +-
 .../CraueConfigBundle/Settings/modify.html.twig      |  2 +-
 6 files changed, 16 insertions(+), 5 deletions(-)
 create mode 100644 assets/controllers/materialize/tabs_controller.js

diff --git a/assets/controllers/materialize/tabs_controller.js b/assets/controllers/materialize/tabs_controller.js
new file mode 100644
index 000000000..312b486d4
--- /dev/null
+++ b/assets/controllers/materialize/tabs_controller.js
@@ -0,0 +1,12 @@
+import { Controller } from '@hotwired/stimulus';
+import M from '@materializecss/materialize';
+
+export default class extends Controller {
+  connect() {
+    this.instance = M.Tabs.init(this.element);
+  }
+
+  disconnect() {
+    this.instance.destroy();
+  }
+}
diff --git a/assets/index.js b/assets/index.js
index a5351033a..a40231542 100755
--- a/assets/index.js
+++ b/assets/index.js
@@ -285,7 +285,6 @@ $(document).ready(() => {
     constrainWidth: false,
   });
 
-  $('.tabs').tabs();
   $('.tooltipped').tooltip();
   $('.fixed-action-btn').floatingActionButton();
 
diff --git a/templates/Config/index.html.twig b/templates/Config/index.html.twig
index add3d3577..1b4a6a055 100644
--- a/templates/Config/index.html.twig
+++ b/templates/Config/index.html.twig
@@ -10,7 +10,7 @@
 
                 <div class="row">
                     <div class="tabs-container col s12">
-                        <ul class="tabs">
+                        <ul class="tabs" data-controller="materialize--tabs">
                             <li class="tab col s12 m6 l3"><a class="active" href="#set1">{{ 'config.tab_menu.settings'|trans }}</a></li>
                             <li class="tab col s12 m6 l3"><a href="#set2">{{ 'config.tab_menu.feed'|trans }}</a></li>
                             <li class="tab col s12 m6 l3"><a href="#set3">{{ 'config.tab_menu.user_info'|trans }}</a></li>
diff --git a/templates/Static/about.html.twig b/templates/Static/about.html.twig
index 02805405b..c01b2edbe 100644
--- a/templates/Static/about.html.twig
+++ b/templates/Static/about.html.twig
@@ -10,7 +10,7 @@
 
                 <div class="row">
                     <div class="tabs-container col s12">
-                        <ul class="tabs">
+                        <ul class="tabs" data-controller="materialize--tabs">
                         <li class="tab col s12 m6 l3"><a class="active" href="#set1">{{ 'about.top_menu.who_behind_wallabag'|trans }}</a></li>
                         <li class="tab col s12 m6 l3"><a href="#set2">{{ 'about.top_menu.getting_help'|trans }}</a></li>
                         <li class="tab col s12 m6 l3"><a href="#set3">{{ 'about.top_menu.helping'|trans }}</a></li>
diff --git a/templates/Static/howto.html.twig b/templates/Static/howto.html.twig
index 493961294..6b9412595 100644
--- a/templates/Static/howto.html.twig
+++ b/templates/Static/howto.html.twig
@@ -10,7 +10,7 @@
 
                 <div class="row">
                     <div class="tabs-container col s12">
-                        <ul class="tabs">
+                        <ul class="tabs" data-controller="materialize--tabs">
                             <li class="tab col s12 m6 l3"><a class="active" href="#set1">{{ 'howto.tab_menu.add_link'|trans }}</a></li>
                             <li class="tab col s12 m6 l3"><a href="#set2">{{ 'howto.tab_menu.shortcuts'|trans }}</a></li>
                         </ul>
diff --git a/templates/bundles/CraueConfigBundle/Settings/modify.html.twig b/templates/bundles/CraueConfigBundle/Settings/modify.html.twig
index 438b36e03..83d9a6fa6 100644
--- a/templates/bundles/CraueConfigBundle/Settings/modify.html.twig
+++ b/templates/bundles/CraueConfigBundle/Settings/modify.html.twig
@@ -11,7 +11,7 @@
 
                     <div class="row">
                         <div class="div_tabs col s12">
-                            <ul class="tabs">
+                            <ul class="tabs" data-controller="materialize--tabs">
                                 {% for section in sections|craue_sortSections %}
                                     <li class="tab col s12 m6 l3"><a href="#set-{{ section }}">{{ section|trans({}, 'CraueConfigBundle') }}</a></li>
                                 {% endfor %}