Remove jQuery

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();
+    }
+  }
+}

assets/controllers/annotations_controller.js

@@ -0,0 +1,57 @@
+import { Controller } from '@hotwired/stimulus';
+import annotator from 'annotator';
+
+export default class extends Controller {
+  static values = {
+    entryId: Number,
+    createUrl: String,
+    updateUrl: String,
+    destroyUrl: String,
+    searchUrl: String,
+  };
+
+  connect() {
+    this.app = new annotator.App();
+
+    this.app.include(annotator.ui.main, {
+      element: this.element,
+    });
+
+    const authorization = {
+      permits() { return true; },
+    };
+    this.app.registry.registerUtility(authorization, 'authorizationPolicy');
+
+    this.app.include(annotator.storage.http, {
+      prefix: '',
+      urls: {
+        create: this.createUrlValue,
+        update: this.updateUrlValue,
+        destroy: this.destroyUrlValue,
+        search: this.searchUrlValue,
+      },
+      entryId: this.entryIdValue,
+      onError(msg, xhr) {
+        if (!Object.prototype.hasOwnProperty.call(xhr, 'responseJSON')) {
+          annotator.notification.banner('An error occurred', 'error');
+          return;
+        }
+        Object.values(xhr.responseJSON.children).forEach((v) => {
+          if (v.errors) {
+            Object.values(v.errors).forEach((errorText) => {
+              annotator.notification.banner(errorText, 'error');
+            });
+          }
+        });
+      },
+    });
+
+    this.app.start().then(() => {
+      this.app.annotations.load({ entry: this.entryIdValue });
+    });
+  }
+
+  disconnect() {
+    this.app.destroy();
+  }
+}

assets/controllers/batch_edit_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ['item', 'tagAction'];
+
+  toggleSelection(e) {
+    this.itemTargets.forEach((item) => {
+      item.checked = e.currentTarget.checked; // eslint-disable-line no-param-reassign
+    });
+  }
+
+  tagSelection() {
+    this.element.requestSubmit(this.tagActionTarget);
+  }
+}

assets/controllers/clipboard_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from '@hotwired/stimulus';
+import ClipboardJS from 'clipboard';
+
+export default class extends Controller {
+  connect() {
+    this.clipboard = new ClipboardJS(this.element);
+
+    this.clipboard.on('success', (e) => {
+      e.clearSelection();
+    });
+  }
+
+  disconnect() {
+    this.clipboard.destroy();
+  }
+}

assets/controllers/config_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ['previewArticle', 'previewContent', 'font', 'fontSize', 'lineHeight', 'maxWidth'];
+
+  connect() {
+    this.updatePreview();
+  }
+
+  updatePreview() {
+    this.previewArticleTarget.style.maxWidth = `${this.maxWidthTarget.value}em`;
+    this.previewContentTarget.style.fontFamily = this.fontTarget.value;
+    this.previewContentTarget.style.fontSize = `${this.fontSizeTarget.value}em`;
+    this.previewContentTarget.style.lineHeight = `${this.lineHeightTarget.value}em`;
+  }
+}

assets/controllers/dark_theme_controller.js

@@ -0,0 +1,39 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  connect() {
+    this.#choose();
+
+    this.mql = window.matchMedia('(prefers-color-scheme: dark)');
+    this.mql.addEventListener('change', this.#choose.bind(this));
+  }
+
+  useLight() {
+    this.element.classList.remove('dark-theme');
+    document.cookie = 'theme=light;samesite=Lax;path=/;max-age=31536000';
+  }
+
+  useDark() {
+    this.element.classList.add('dark-theme');
+    document.cookie = 'theme=dark;samesite=Lax;path=/;max-age=31536000';
+  }
+
+  useAuto() {
+    document.cookie = 'theme=auto;samesite=Lax;path=/;max-age=0';
+    this.choose();
+  }
+
+  #choose() {
+    const themeCookieExists = document.cookie.split(';').some((cookie) => cookie.trim().startsWith('theme='));
+
+    if (themeCookieExists) {
+      return;
+    }
+
+    if (this.mql.matches) {
+      this.element.classList.add('dark-theme');
+    } else {
+      this.element.classList.remove('dark-theme');
+    }
+  }
+}

assets/controllers/entries_navigation_controller.js

@@ -0,0 +1,58 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ['card', 'paginationWrapper'];
+
+  connect() {
+    this.pagination = this.paginationWrapperTarget.querySelector('.pagination');
+
+    this.cardIndex = 0;
+    this.lastCardIndex = this.cardTargets.length - 1;
+
+    /* If we come from next page */
+    if (window.location.hash === '#prev') {
+      this.cardIndex = this.lastCardIndex;
+    }
+
+    this.currentCard = this.cardTargets[this.cardIndex];
+
+    this.currentCard.classList.add('z-depth-4');
+  }
+
+  selectRightCard() {
+    if (this.cardIndex >= 0 && this.cardIndex < this.lastCardIndex) {
+      this.currentCard.classList.remove('z-depth-4');
+      this.cardIndex += 1;
+      this.currentCard = this.cardTargets[this.cardIndex];
+      this.currentCard.classList.add('z-depth-4');
+
+      return;
+    }
+
+    if (this.pagination && this.pagination.querySelector('a[rel="next"]')) {
+      window.location.href = this.pagination.querySelector('a[rel="next"]').href;
+    }
+  }
+
+  selectLeftCard() {
+    if (this.cardIndex > 0 && this.cardIndex <= this.lastCardIndex) {
+      this.currentCard.classList.remove('z-depth-4');
+      this.cardIndex -= 1;
+      this.currentCard = this.cardTargets[this.cardIndex];
+      this.currentCard.classList.add('z-depth-4');
+
+      return;
+    }
+
+    if (this.pagination && this.pagination.querySelector('a[rel="prev"]')) {
+      window.location.href = `${this.pagination.querySelector('a[rel="prev"]').href}#prev`;
+    }
+  }
+
+  selectCurrentCard() {
+    const url = this.currentCard.querySelector('a.card-title').href;
+    if (url) {
+      window.location.href = url;
+    }
+  }
+}

assets/controllers/fake_radio_controller.js

@@ -0,0 +1,13 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ['emailTwoFactor', 'googleTwoFactor'];
+
+  uncheckGoogle() {
+    this.googleTwoFactorTarget.checked = false;
+  }
+
+  uncheckEmail() {
+    this.emailTwoFactorTarget.checked = false;
+  }
+}

assets/controllers/leftbar_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  toggleAddTagForm() {
+    this.dispatch('toggleAddTagForm');
+  }
+}

assets/controllers/materialize/fab_controller.js

@@ -22,6 +22,10 @@ export default class extends Controller {
     }
   }
 
+  click() {
+    this.dispatch('click');
+  }
+
   disconnect() {
     this.instance.destroy();
   }

assets/controllers/shortcuts_controller.js

@@ -0,0 +1,141 @@
+import { Controller } from '@hotwired/stimulus';
+import Mousetrap from 'mousetrap';
+
+export default class extends Controller {
+  static targets = ['openOriginal', 'markAsFavorite', 'markAsRead', 'deleteEntry', 'showAddUrl', 'showSearch', 'showActions'];
+
+  static outlets = ['entries-navigation'];
+
+  connect() {
+    /* Go to */
+    Mousetrap.bind('g u', () => {
+      window.location.href = Routing.generate('homepage');
+    });
+    Mousetrap.bind('g s', () => {
+      window.location.href = Routing.generate('starred');
+    });
+    Mousetrap.bind('g r', () => {
+      window.location.href = Routing.generate('archive');
+    });
+    Mousetrap.bind('g a', () => {
+      window.location.href = Routing.generate('all');
+    });
+    Mousetrap.bind('g t', () => {
+      window.location.href = Routing.generate('tag');
+    });
+    Mousetrap.bind('g c', () => {
+      window.location.href = Routing.generate('config');
+    });
+    Mousetrap.bind('g i', () => {
+      window.location.href = Routing.generate('import');
+    });
+    Mousetrap.bind('g d', () => {
+      window.location.href = Routing.generate('developer');
+    });
+    Mousetrap.bind('?', () => {
+      window.location.href = Routing.generate('howto');
+    });
+    Mousetrap.bind('g l', () => {
+      window.location.href = Routing.generate('fos_user_security_logout');
+    });
+
+    /* open original article */
+    Mousetrap.bind('o', () => {
+      if (!this.hasOpenOriginalTarget) {
+        return;
+      }
+
+      this.openOriginalTarget.click();
+    });
+
+    /* mark as favorite */
+    Mousetrap.bind('f', () => {
+      if (!this.hasMarkAsFavoriteTarget) {
+        return;
+      }
+
+      this.markAsFavoriteTarget.click();
+    });
+
+    /* mark as read */
+    Mousetrap.bind('a', () => {
+      if (!this.hasMarkAsReadTarget) {
+        return;
+      }
+
+      this.markAsReadTarget.click();
+    });
+
+    /* delete */
+    Mousetrap.bind('del', () => {
+      if (!this.hasDeleteEntryTarget) {
+        return;
+      }
+
+      this.deleteEntryTarget.click();
+    });
+
+    /* Actions */
+    Mousetrap.bind('g n', (e) => {
+      if (!this.hasShowAddUrlTarget) {
+        return;
+      }
+
+      e.preventDefault();
+      this.showAddUrlTarget.click();
+    });
+
+    Mousetrap.bind('s', (e) => {
+      if (!this.hasShowSearchTarget) {
+        return;
+      }
+
+      e.preventDefault();
+      this.showSearchTarget.click();
+    });
+
+    Mousetrap.bind('esc', (e) => {
+      if (!this.hasShowActionsTarget) {
+        return;
+      }
+
+      e.preventDefault();
+      this.showActionsTarget.click();
+    });
+
+    const originalStopCallback = Mousetrap.prototype.stopCallback;
+
+    Mousetrap.prototype.stopCallback = (e, element, combo) => {
+      // allow esc key to be used in input fields of topbar
+      if (combo === 'esc' && element.dataset.topbarTarget !== undefined) {
+        return false;
+      }
+
+      return originalStopCallback(e, element);
+    };
+
+    Mousetrap.bind('right', () => {
+      if (!this.hasEntriesNavigationOutlet) {
+        return;
+      }
+
+      this.entriesNavigationOutlet.selectRightCard();
+    });
+
+    Mousetrap.bind('left', () => {
+      if (!this.hasEntriesNavigationOutlet) {
+        return;
+      }
+
+      this.entriesNavigationOutlet.selectLeftCard();
+    });
+
+    Mousetrap.bind('enter', () => {
+      if (!this.hasEntriesNavigationOutlet) {
+        return;
+      }
+
+      this.entriesNavigationOutlet.selectCurrentCard();
+    });
+  }
+}

assets/controllers/sticky_nav_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  toggle() {
+    this.element.classList.toggle('entry-nav-top--sticky');
+  }
+}

assets/controllers/tag_controller.js

@@ -0,0 +1,12 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ['link', 'edit', 'form', 'input'];
+
+  showForm() {
+    this.formTarget.classList.remove('hidden');
+    this.editTarget.classList.add('hidden');
+    this.linkTarget.classList.add('hidden');
+    this.inputTarget.focus();
+  }
+}

assets/controllers/topbar_controller.js

@@ -0,0 +1,31 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static targets = ['addUrl', 'addUrlInput', 'search', 'searchInput', 'actions'];
+
+  showAddUrl() {
+    this.actionsTarget.style.display = 'none';
+    this.addUrlTarget.style.display = 'flex';
+    this.searchTarget.style.display = 'none';
+    this.addUrlInputTarget.focus();
+  }
+
+  submittingUrl(e) {
+    e.currentTarget.disabled = true;
+    this.addUrlInputTarget.readOnly = true;
+    this.addUrlInputTarget.blur();
+  }
+
+  showSearch() {
+    this.actionsTarget.style.display = 'none';
+    this.addUrlTarget.style.display = 'none';
+    this.searchTarget.style.display = 'flex';
+    this.searchInputTarget.focus();
+  }
+
+  showActions() {
+    this.actionsTarget.style.display = 'flex';
+    this.addUrlTarget.style.display = 'none';
+    this.searchTarget.style.display = 'none';
+  }
+}

assets/index.js

@@ -1,15 +1,9 @@
 import './bootstrap';
 
-import $ from 'jquery';
-
 /* Materialize imports */
 import '@materializecss/materialize/dist/css/materialize.css';
 import '@materializecss/materialize/dist/js/materialize';
 
-/* Annotations */
-import annotator from 'annotator';
-
-import ClipboardJS from 'clipboard';
 import 'mathjax/es5/tex-svg';
 
 /* Fonts */
@@ -21,291 +15,5 @@ import '@fontsource/eb-garamond';
 import '@fontsource/montserrat';
 import '@fontsource/oswald';
 
-/* Tools */
-import {
-  initPreviewText,
-} from './js/tools';
-
-/* Import shortcuts */
-import './js/shortcuts/main';
-import './js/shortcuts/entry';
-
 /* Theme style */
 import './scss/index.scss';
-
-/* ==========================================================================
- Annotations
- ========================================================================== */
-
-$(document).ready(() => {
-  if ($('#article').length) {
-    const app = new annotator.App();
-
-    app.include(annotator.ui.main, {
-      element: document.querySelector('article'),
-    });
-
-    const authorization = {
-      permits() { return true; },
-    };
-    app.registry.registerUtility(authorization, 'authorizationPolicy');
-
-    const x = JSON.parse($('#annotationroutes').html());
-    app.include(annotator.storage.http, $.extend({}, x, {
-      onError(msg, xhr) {
-        if (!Object.prototype.hasOwnProperty.call(xhr, 'responseJSON')) {
-          annotator.notification.banner('An error occurred', 'error');
-          return;
-        }
-        $.each(xhr.responseJSON.children, (k, v) => {
-          if (v.errors) {
-            $.each(v.errors, (n, errorText) => {
-              annotator.notification.banner(errorText, 'error');
-            });
-          }
-        });
-      },
-    }));
-
-    app.start().then(() => {
-      app.annotations.load({ entry: x.entryId });
-    });
-  }
-
-  document.querySelectorAll('[data-handler=tag-rename]').forEach((item) => {
-    const current = item;
-    current.wallabag_edit_mode = false;
-    current.onclick = (event) => {
-      const target = event.currentTarget;
-
-      if (target.wallabag_edit_mode === false) {
-        $(target.parentNode.querySelector('[data-handle=tag-link]')).addClass('hidden');
-        $(target.parentNode.querySelector('[data-handle=tag-rename-form]')).removeClass('hidden');
-        target.parentNode.querySelector('[data-handle=tag-rename-form] input').focus();
-        target.querySelector('.material-icons').innerHTML = 'done';
-
-        target.wallabag_edit_mode = true;
-      } else {
-        target.parentNode.querySelector('[data-handle=tag-rename-form]').submit();
-      }
-    };
-  });
-
-  // mimic radio button because emailTwoFactor is a boolean
-  $('#update_user_googleTwoFactor').on('change', () => {
-    $('#update_user_emailTwoFactor').prop('checked', false);
-  });
-
-  $('#update_user_emailTwoFactor').on('change', () => {
-    $('#update_user_googleTwoFactor').prop('checked', false);
-  });
-
-  // same mimic for super admin
-  $('#user_googleTwoFactor').on('change', () => {
-    $('#user_emailTwoFactor').prop('checked', false);
-  });
-
-  $('#user_emailTwoFactor').on('change', () => {
-    $('#user_googleTwoFactor').prop('checked', false);
-  });
-
-  // handle copy to clipboard for developer stuff
-  const clipboard = new ClipboardJS('.btn');
-  clipboard.on('success', (e) => {
-    e.clearSelection();
-  });
-});
-
-(function darkTheme() {
-  const rootEl = document.querySelector('html');
-  const themeDom = {
-    darkClass: 'dark-theme',
-
-    toggleClass(el) {
-      return el.classList.toggle(this.darkClass);
-    },
-
-    addClass(el) {
-      return el.classList.add(this.darkClass);
-    },
-
-    removeClass(el) {
-      return el.classList.remove(this.darkClass);
-    },
-  };
-  const themeCookie = {
-    values: {
-      light: 'light',
-      dark: 'dark',
-    },
-
-    name: 'theme',
-
-    getValue(isDarkTheme) {
-      return isDarkTheme ? this.values.dark : this.values.light;
-    },
-
-    setCookie(isDarkTheme) {
-      const value = this.getValue(isDarkTheme);
-      document.cookie = `${this.name}=${value};samesite=Lax;path=/;max-age=31536000`;
-    },
-
-    removeCookie() {
-      document.cookie = `${this.name}=auto;samesite=Lax;path=/;max-age=0`;
-    },
-
-    exists() {
-      return document.cookie.split(';').some((cookie) => cookie.trim().startsWith(`${this.name}=`));
-    },
-  };
-  const preferedColorScheme = {
-    choose() {
-      const themeCookieExists = themeCookie.exists();
-      if (this.isAvailable() && !themeCookieExists) {
-        const isPreferedColorSchemeDark = window.matchMedia('(prefers-color-scheme: dark)').matches === true;
-        if (!themeCookieExists) {
-          themeDom[isPreferedColorSchemeDark ? 'addClass' : 'removeClass'](rootEl);
-        }
-      }
-    },
-
-    isAvailable() {
-      return typeof window.matchMedia === 'function';
-    },
-
-    init() {
-      if (!this.isAvailable()) {
-        return false;
-      }
-      this.choose();
-      window.matchMedia('(prefers-color-scheme: dark)').addListener(() => {
-        this.choose();
-      });
-      return true;
-    },
-  };
-
-  const addDarkThemeListeners = () => {
-    $(document).ready(() => {
-      const lightThemeButtons = document.querySelectorAll('.js-theme-toggle[data-theme="light"]');
-      [...lightThemeButtons].map((lightThemeButton) => {
-        lightThemeButton.addEventListener('click', (e) => {
-          e.preventDefault();
-          themeDom.removeClass(rootEl);
-          themeCookie.setCookie(false);
-        });
-        return true;
-      });
-      const darkThemeButtons = document.querySelectorAll('.js-theme-toggle[data-theme="dark"]');
-      [...darkThemeButtons].map((darkThemeButton) => {
-        darkThemeButton.addEventListener('click', (e) => {
-          e.preventDefault();
-          themeDom.addClass(rootEl);
-          themeCookie.setCookie(true);
-        });
-        return true;
-      });
-      const autoThemeButtons = document.querySelectorAll('.js-theme-toggle[data-theme="auto"]');
-      [...autoThemeButtons].map((autoThemeButton) => {
-        autoThemeButton.addEventListener('click', (e) => {
-          e.preventDefault();
-          themeCookie.removeCookie();
-          preferedColorScheme.choose();
-        });
-        return true;
-      });
-    });
-  };
-
-  preferedColorScheme.init();
-  addDarkThemeListeners();
-}());
-
-const stickyNav = () => {
-  const nav = $('.js-entry-nav-top');
-  $('[data-toggle="actions"]').click(() => {
-    nav.toggleClass('entry-nav-top--sticky');
-  });
-};
-
-$(document).ready(() => {
-  stickyNav();
-  initPreviewText();
-
-  const toggleNav = (toShow, toFocus) => {
-    $('.nav-panel-actions').hide();
-    $(toShow).show();
-    $(toFocus).focus();
-  };
-
-  $('#nav-btn-add-tag').on('click', () => {
-    $('.nav-panel-add-tag').toggle();
-    $('.nav-panel-menu').addClass('hidden');
-    $('#tag_label').focus();
-    return false;
-  });
-
-  $('#nav-btn-add').on('click', () => {
-    toggleNav('.nav-panel-add', '#entry_url');
-    return false;
-  });
-
-  $('#config_fontsize').on('input', () => {
-    const value = $('#config_fontsize').val();
-    const css = `${value}em`;
-    $('#preview-content').css('font-size', css);
-  });
-
-  $('#config_font').on('change', () => {
-    const value = $('#config_font').val();
-    $('#preview-content').css('font-family', value);
-  });
-
-  $('#config_lineHeight').on('input', () => {
-    const value = $('#config_lineHeight').val();
-    const css = `${value}em`;
-    $('#preview-content').css('line-height', css);
-  });
-
-  $('#config_maxWidth').on('input', () => {
-    const value = $('#config_maxWidth').val();
-    const css = `${value}em`;
-    $('#preview-article').css('max-width', css);
-  });
-
-  const materialAddForm = $('.nav-panel-add');
-  materialAddForm.on('submit', () => {
-    materialAddForm.addClass('disabled');
-    $('input#entry_url', materialAddForm).prop('readonly', true).trigger('blur');
-  });
-
-  $('#nav-btn-search').on('click', () => {
-    toggleNav('.nav-panel-search', '#search_entry_term');
-    return false;
-  });
-
-  $('.close').on('click', (e) => {
-    $(e.target).parent('.nav-panel-item').hide();
-    $('.nav-panel-actions').show();
-    return false;
-  });
-
-  const mainCheckboxes = document.querySelectorAll('[data-js="checkboxes-toggle"]');
-  if (mainCheckboxes.length) {
-    [...mainCheckboxes].forEach((el) => {
-      el.addEventListener('click', () => {
-        const checkboxes = document.querySelectorAll(el.dataset.toggle);
-        [...checkboxes].forEach((checkbox) => {
-          const checkboxClone = checkbox;
-          checkboxClone.checked = el.checked;
-        });
-      });
-    });
-  }
-  $('form[name="form_mass_action"] input[name="tags"]').on('keydown', (e) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      $('form[name="form_mass_action"] button[name="tag"]').trigger('click');
-    }
-  });
-});

assets/js/shortcuts/entry.js

@@ -1,26 +0,0 @@
-import Mousetrap from 'mousetrap';
-import $ from 'jquery';
-
-$(document).ready(() => {
-  if ($('#article').length > 0) {
-    /* open original article */
-    Mousetrap.bind('o', () => {
-      $('ul.sidenav a.original i')[0].click();
-    });
-
-    /* mark as favorite */
-    Mousetrap.bind('f', () => {
-      $('ul.sidenav a.favorite i')[0].click();
-    });
-
-    /* mark as read */
-    Mousetrap.bind('a', () => {
-      $('ul.sidenav a.markasread i')[0].click();
-    });
-
-    /* delete */
-    Mousetrap.bind('del', () => {
-      $('ul.sidenav a.delete i')[0].click();
-    });
-  }
-});

assets/js/shortcuts/main.js

@@ -1,104 +0,0 @@
-import Mousetrap from 'mousetrap';
-import $ from 'jquery';
-
-/* Go to */
-Mousetrap.bind('g u', () => { window.location.href = Routing.generate('homepage'); });
-Mousetrap.bind('g s', () => { window.location.href = Routing.generate('starred'); });
-Mousetrap.bind('g r', () => { window.location.href = Routing.generate('archive'); });
-Mousetrap.bind('g a', () => { window.location.href = Routing.generate('all'); });
-Mousetrap.bind('g t', () => { window.location.href = Routing.generate('tag'); });
-Mousetrap.bind('g c', () => { window.location.href = Routing.generate('config'); });
-Mousetrap.bind('g i', () => { window.location.href = Routing.generate('import'); });
-Mousetrap.bind('g d', () => { window.location.href = Routing.generate('developer'); });
-Mousetrap.bind('?', () => { window.location.href = Routing.generate('howto'); });
-Mousetrap.bind('g l', () => { window.location.href = Routing.generate('fos_user_security_logout'); });
-
-function toggleFocus(cardToToogleFocus) {
-  if (cardToToogleFocus) {
-    $(cardToToogleFocus).toggleClass('z-depth-4');
-  }
-}
-
-$(document).ready(() => {
-  const cards = $('#content').find('.card');
-  const cardNumber = cards.length;
-  let cardIndex = 0;
-  /* If we come from next page */
-  if (window.location.hash === '#prev') {
-    cardIndex = cardNumber - 1;
-  }
-  let card = cards[cardIndex];
-  const pagination = $('.pagination');
-
-  /* Show nothing on quickstart */
-  if ($('#content > div.quickstart').length > 0) {
-    return;
-  }
-
-  /* Show nothing on login/register page */
-  if ($('#username').length > 0 || $('#fos_user_registration_form_username').length > 0) {
-    return;
-  }
-
-  /* Show nothing on login/register page */
-  if ($('#username').length > 0 || $('#fos_user_registration_form_username').length > 0) {
-    return;
-  }
-
-  /* Focus current card */
-  toggleFocus(card);
-
-  /* Actions */
-  Mousetrap.bind('g n', () => {
-    $('#nav-btn-add').trigger('click');
-    return false;
-  });
-
-  Mousetrap.bind('s', () => {
-    $('#nav-btn-search').trigger('click');
-    return false;
-  });
-
-  Mousetrap.bind('esc', () => {
-    $('.close').trigger('click');
-  });
-
-  /* Select right card. If there's a next page, go to next page */
-  Mousetrap.bind('right', () => {
-    if (cardIndex >= 0 && cardIndex < cardNumber - 1) {
-      toggleFocus(card);
-      cardIndex += 1;
-      card = cards[cardIndex];
-      toggleFocus(card);
-      return;
-    }
-    if (pagination.length > 0 && pagination.find('li.next:not(.disabled)').length > 0 && cardIndex === cardNumber - 1) {
-      window.location.href = window.location.origin + $(pagination).find('li.next a').attr('href');
-    }
-  });
-
-  /* Select previous card. If there's a previous page, go to next page */
-  Mousetrap.bind('left', () => {
-    if (cardIndex > 0 && cardIndex < cardNumber) {
-      toggleFocus(card);
-      cardIndex -= 1;
-      card = cards[cardIndex];
-      toggleFocus(card);
-      return;
-    }
-    if (pagination.length > 0 && $(pagination).find('li.prev:not(.disabled)').length > 0 && cardIndex === 0) {
-      window.location.href = `${window.location.origin + $(pagination).find('li.prev a').attr('href')}#prev`;
-    }
-  });
-
-  Mousetrap.bind('enter', () => {
-    if (typeof card !== 'object') {
-      return;
-    }
-
-    const url = $(card).find('.card-title a').attr('href');
-    if (typeof url === 'string' && url.length > 0) {
-      window.location.href = window.location.origin + url;
-    }
-  });
-});

assets/js/tools.js

@@ -1,21 +0,0 @@
-import $ from 'jquery';
-
-function initPreviewText() {
-  // no display if preview_text not available
-  if ($('div').is('#preview-article')) {
-    const defaultFontFamily = $('#config_font').val();
-    const defaultFontSize = $('#config_fontsize').val();
-    const defaultLineHeight = $('#config_lineHeight').val();
-    const defaultMaxWidth = $('#config_maxWidth').val();
-    const previewContent = $('#preview-content');
-
-    previewContent.css('font-family', defaultFontFamily);
-    previewContent.css('font-size', `${defaultFontSize}em`);
-    previewContent.css('line-height', `${defaultLineHeight}em`);
-    $('#preview-article').css('max-width', `${defaultMaxWidth}em`);
-  }
-}
-
-export {
-  initPreviewText,
-};

assets/scss/_cards.scss

@@ -186,6 +186,14 @@ a.original:not(.waves-effect) {
   color: #fff;
 }
 
+.card-tag-labels button {
+  background: transparent;
+  border: none;
+  font-weight: normal;
+  color: #fff;
+  cursor: pointer;
+}
+
 .card-tag-link {
   width: calc(100% - 24px);
   line-height: 1.3;
@@ -196,6 +204,7 @@ a.original:not(.waves-effect) {
 
 .card-tag-form {
   display: flex;
+  align-items: center;
   min-width: 100px;
   flex-grow: 1;
 }

package.json

@@ -88,8 +88,6 @@
     "hammerjs": "^2.0.8",
     "highlight.js": "^11.11.1",
     "icomoon-free-npm": "^0.0.0",
-    "jquery": "^3.7.1",
-    "jquery.cookie": "^1.4.1",
     "jr-qrcode": "^1.2.1",
     "material-design-icons-iconfont": "^6.7.0",
     "mathjax": "^3.2.2",
@@ -102,7 +100,7 @@
     "build:dev": "encore dev",
     "watch": "encore dev --watch",
     "build:prod": "encore production --progress",
-    "lint:js": "eslint assets/*.js assets/js/*.js assets/js/**/*.js assets/controllers/*.js",
+    "lint:js": "eslint assets/*.js assets/controllers/*.js",
     "lint:scss": "stylelint assets/scss/*.scss assets/scss/**/*.scss"
   }
 }

templates/Config/index.html.twig

@@ -21,7 +21,7 @@
                         </ul>
                     </div>
 
-                    <div id="set1" class="col s12">
+                    <div id="set1" class="col s12" data-controller="config">
                         {{ form_start(form.config) }}
                             {{ form_errors(form.config) }}
 
@@ -119,7 +119,7 @@
                             <div class="row">
                                 <div class="input-field col s5" data-controller="materialize--form-select">
                                     {{ form_errors(form.config.font) }}
-                                    {{ form_widget(form.config.font) }}
+                                    {{ form_widget(form.config.font, {attr: {'data-config-target': 'font', 'data-action': 'config#updatePreview'}}) }}
                                     {{ form_label(form.config.font) }}
                                 </div>
                                 <div class="input-field col s1">
@@ -130,7 +130,7 @@
 
                                 <div class="input-field col s5">
                                     {{ form_errors(form.config.lineHeight) }}
-                                    {{ form_widget(form.config.lineHeight) }}
+                                    {{ form_widget(form.config.lineHeight, {attr: {'data-config-target': 'lineHeight', 'data-action': 'config#updatePreview'}}) }}
                                     {{ form_label(form.config.lineHeight, null, {'label_attr': {'class': 'settings-range-label'}}) }}
                                 </div>
                                 <div class="input-field col s1">
@@ -143,7 +143,7 @@
                             <div class="row">
                                 <div class="input-field col s5">
                                     {{ form_errors(form.config.fontsize) }}
-                                    {{ form_widget(form.config.fontsize) }}
+                                    {{ form_widget(form.config.fontsize, {attr: {'data-config-target': 'fontSize', 'data-action': 'config#updatePreview'}}) }}
                                     {{ form_label(form.config.fontsize, null, {'label_attr': {'class': 'settings-range-label'}}) }}
                                 </div>
                                 <div class="input-field col s1">
@@ -154,7 +154,7 @@
 
                                 <div class="input-field col s5">
                                     {{ form_errors(form.config.maxWidth) }}
-                                    {{ form_widget(form.config.maxWidth) }}
+                                    {{ form_widget(form.config.maxWidth, {attr: {'data-config-target': 'maxWidth', 'data-action': 'config#updatePreview'}}) }}
                                     {{ form_label(form.config.maxWidth, null, {'label_attr': {'class': 'settings-range-label'}}) }}
                                 </div>
                                 <div class="input-field col s1">
@@ -166,8 +166,8 @@
 
                             <div class="row">
                                 <div class="input-field col s12">
-                                    <div id="preview-article">
-                                        <article id="preview-content">
+                                    <div id="preview-article" data-config-target="previewArticle">
+                                        <article id="preview-content" data-config-target="previewContent">
                                             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                         </article>
                                     </div>

templates/Developer/client_parameters.html.twig

@@ -18,14 +18,14 @@
                         <td>{{ 'developer.client_parameter.field_id'|trans }}</td>
                         <td>
                             <strong><code>{{ client_id }}</code></strong>
-                            <button class="btn" data-clipboard-text="{{ client_id }}">{{ 'developer.client.copy_to_clipboard'|trans }}</button>
+                            <button class="btn" data-controller="clipboard" data-clipboard-text="{{ client_id }}">{{ 'developer.client.copy_to_clipboard'|trans }}</button>
                         </td>
                     </tr>
                     <tr>
                         <td>{{ 'developer.client_parameter.field_secret'|trans }}</td>
                         <td>
                             <strong><code>{{ client_secret }}</code></strong>
-                            <button class="btn" data-clipboard-text="{{ client_secret }}">{{ 'developer.client.copy_to_clipboard'|trans }}</button>
+                            <button class="btn" data-controller="clipboard" data-clipboard-text="{{ client_secret }}">{{ 'developer.client.copy_to_clipboard'|trans }}</button>
                         </td>
                     </tr>
                 </table>

templates/Developer/index.html.twig

@@ -35,14 +35,14 @@
                                             <td>{{ 'developer.existing_clients.field_id'|trans }}</td>
                                             <td>
                                                 <strong><code>{{ client.clientId }}</code></strong>
-                                                <button class="btn" data-clipboard-text="{{ client.clientId }}">{{ 'developer.client.copy_to_clipboard'|trans }}</button>
+                                                <button class="btn" data-controller="clipboard" data-clipboard-text="{{ client.clientId }}">{{ 'developer.client.copy_to_clipboard'|trans }}</button>
                                             </td>
                                         </tr>
                                         <tr>
                                             <td>{{ 'developer.existing_clients.field_secret'|trans }}</td>
                                             <td>
                                                 <strong><code>{{ client.secret }}</code></strong>
-                                                <button class="btn" data-clipboard-text="{{ client.secret }}">{{ 'developer.client.copy_to_clipboard'|trans }}</button>
+                                                <button class="btn" data-controller="clipboard" data-clipboard-text="{{ client.secret }}">{{ 'developer.client.copy_to_clipboard'|trans }}</button>
                                             </td>
                                         </tr>
                                         <tr>

templates/Entry/Card/_mass_checkbox.html.twig

@@ -1,3 +1,3 @@
 <label class="entry-checkbox">
-    <input type="checkbox" class="entry-checkbox-input" data-js="entry-checkbox" name="entry-checkbox[]" value="{{ entry.id }}" />
+    <input type="checkbox" class="entry-checkbox-input" name="entry-checkbox[]" value="{{ entry.id }}" data-batch-edit-target="item" />
 </label>

templates/Entry/entries.html.twig

@@ -53,8 +53,8 @@
     {% if current_route == 'homepage' %}
         {% set current_route = 'unread' %}
     {% endif %}
-    <form name="form_mass_action" action="{{ path('mass_action', {redirect: current_path}) }}" method="post">
-    <div class="results">
+    <form name="form_mass_action" action="{{ path('mass_action', {redirect: current_path}) }}" method="post" data-controller="batch-edit entries-navigation">
+    <div class="results" data-entries-navigation-target="paginationWrapper">
         <div class="nb-results">
             {{ 'entry.list.number_on_the_page'|trans({'%count%': entries.count}) }}
             {% if entries.count > 0 %}
@@ -77,22 +77,22 @@
         <input id="mass-action-inputs-displayed" class="toggle-checkbox" type="checkbox" />
         <div class="mass-action">
             <div class="mass-action-group">
-                <input type="checkbox" class="entry-checkbox-input" data-toggle="[data-js='entry-checkbox']" data-js="checkboxes-toggle" />
+                <input type="checkbox" class="entry-checkbox-input" data-action="batch-edit#toggleSelection" />
                 <button class="mass-action-button btn cyan darken-1" type="submit" name="toggle-read" title="{{ 'entry.list.toogle_as_read'|trans }}"><i class="material-icons">done</i></button>
                 <button class="mass-action-button btn cyan darken-1" type="submit" name="toggle-star" title="{{ 'entry.list.toogle_as_star'|trans }}" ><i class="material-icons">star</i></button>
                 <button class="mass-action-button btn cyan darken-1" type="submit" name="delete" onclick="return confirm('{{ 'entry.confirm.delete_entries'|trans|escape('js') }}')" title="{{ 'entry.list.delete'|trans }}"><i class="material-icons">delete</i></button>
             </div>
 
             <div class="mass-action-tags">
-                <button class="btn cyan darken-1 mass-action-button mass-action-button--tags" type="submit" name="tag" title="{{ 'entry.list.add_tags'|trans }}"><i class="material-icons">label</i></button>
-                <input type="text" class="mass-action-tags-input" name="tags" placeholder="{{ 'entry.list.mass_action_tags_input_placeholder'|trans }}" />
+                <button class="btn cyan darken-1 mass-action-button mass-action-button--tags" type="submit" name="tag" title="{{ 'entry.list.add_tags'|trans }}" data-batch-edit-target="tagAction"><i class="material-icons">label</i></button>
+                <input type="text" class="mass-action-tags-input" name="tags" placeholder="{{ 'entry.list.mass_action_tags_input_placeholder'|trans }}" data-action="keydown.enter->batch-edit#tagSelection:prevent:stop" />
             </div>
         </div>
 
         <ol class="entries {% if list_mode == 1 %}collection{% else %}row entries-row data{% endif %}">
 
             {% for entry in entries %}
-                <li id="entry-{{ entry.id|e }}" class="{% if list_mode != 0 %}col collection-item{% endif %} s12" data-entry-id="{{ entry.id|e }}" data-test="entry">
+                <li id="entry-{{ entry.id|e }}" class="{% if list_mode != 0 %}col collection-item{% endif %} s12" data-entry-id="{{ entry.id|e }}" data-test="entry" data-entries-navigation-target="card">
                     {% if list_mode == 1 %}
                         {% include "Entry/_card_list.html.twig" with {'entry': entry, 'currentRoute': current_route, 'routes': entries_with_archived_class_routes} only %}
                     {% elseif not entry.previewPicture is null and entry.mimetype starts with 'image/' %}

templates/Entry/entry.html.twig

@@ -10,7 +10,7 @@
     <div class="progress">
         <div class="determinate" data-controller="scroll-indicator" data-action="scroll@window->scroll-indicator#updateWidth"></div>
     </div>
-    <nav class="hide-on-large-only js-entry-nav-top">
+    <nav class="hide-on-large-only" data-controller="sticky-nav" data-action="materialize--fab:click@window->sticky-nav#toggle">
         <div class="nav-panel-item cyan darken-1">
             <ul>
                 <li>
@@ -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>
@@ -52,7 +52,7 @@
         </li>
 
         <li class="bold border-bottom hide-on-med-and-down">
-            <a class="waves-effect collapsible-header original" href="{{ entry.url|e }}" target="_blank" rel="noopener">
+            <a class="waves-effect collapsible-header original" href="{{ entry.url|e }}" target="_blank" rel="noopener" data-shortcuts-target="openOriginal">
                 <i class="material-icons small">link</i>
                 <span>{{ 'entry.view.left_menu.view_original_article'|trans }}</span>
             </a>
@@ -76,7 +76,7 @@
 
         {% if is_granted('ARCHIVE', entry) %}
             <li class="bold hide-on-med-and-down">
-                <a class="waves-effect collapsible-header markasread" title="{{ mark_as_read_label|trans }}" href="{{ path('archive_entry', {'id': entry.id, redirect: current_path}) }}" id="markAsRead">
+                <a class="waves-effect collapsible-header markasread" title="{{ mark_as_read_label|trans }}" href="{{ path('archive_entry', {'id': entry.id, redirect: current_path}) }}" id="markAsRead" data-shortcuts-target="markAsRead">
                     <i class="material-icons small">{% if entry.isArchived == 0 %}done{% else %}unarchive{% endif %}</i>
                     <span>{{ mark_as_read_label|trans }}</span>
                 </a>
@@ -86,7 +86,7 @@
 
         {% if is_granted('STAR', entry) %}
             <li class="bold hide-on-med-and-down">
-                <a class="waves-effect collapsible-header favorite" title="{{ 'entry.view.left_menu.set_as_starred'|trans }}" href="{{ path('star_entry', {'id': entry.id, redirect: current_path}) }}" id="setFav">
+                <a class="waves-effect collapsible-header favorite" title="{{ 'entry.view.left_menu.set_as_starred'|trans }}" href="{{ path('star_entry', {'id': entry.id, redirect: current_path}) }}" id="setFav" data-shortcuts-target="markAsFavorite">
                     <i class="material-icons small">{% if entry.isStarred == 0 %}star_outline{% else %}star{% endif %}</i>
                     <span>{{ 'entry.view.left_menu.set_as_starred'|trans }}</span>
                 </a>
@@ -96,7 +96,7 @@
 
         {% if is_granted('DELETE', entry) %}
             <li class="bold border-bottom">
-                <a class="waves-effect collapsible-header delete" onclick="return confirm('{{ 'entry.confirm.delete'|trans|escape('js') }}')" title="{{ 'entry.view.left_menu.delete'|trans }}" href="{{ path('delete_entry', {'id': entry.id, redirect: current_path}) }}">
+                <a class="waves-effect collapsible-header delete" onclick="return confirm('{{ 'entry.confirm.delete'|trans|escape('js') }}')" title="{{ 'entry.view.left_menu.delete'|trans }}" href="{{ path('delete_entry', {'id': entry.id, redirect: current_path}) }}" data-shortcuts-target="deleteEntry">
                     <i class="material-icons small">delete</i>
                     <span>{{ 'entry.view.left_menu.delete'|trans }}</span>
                 </a>
@@ -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>
@@ -119,19 +119,19 @@
             </a>
             <ul class="collapsible-body">
                 <li>
-                    <a href="#" class="js-theme-toggle" data-theme="light">
+                    <a href="#" data-action="click->dark-theme#useLight:prevent">
                         <i class="theme-toggle-icon material-icons tiny">brightness_high</i>
                         <span>{{ 'entry.view.left_menu.theme_toggle_light'|trans }}</span>
                     </a>
                 </li>
                 <li>
-                    <a href="#" class="js-theme-toggle" data-theme="dark">
+                    <a href="#" data-action="click->dark-theme#useDark:prevent">
                         <i class="theme-toggle-icon material-icons tiny">brightness_low</i>
                         <span>{{ 'entry.view.left_menu.theme_toggle_dark'|trans }}</span>
                     </a>
                 </li>
                 <li>
-                    <a href="#" class="js-theme-toggle" data-theme="auto">
+                    <a href="#" data-action="click->dark-theme#useAuto:prevent">
                         <i class="theme-toggle-icon material-icons tiny">brightness_auto</i>
                         <span>{{ 'entry.view.left_menu.theme_toggle_auto'|trans }}</span>
                     </a>
@@ -317,16 +317,24 @@
                 {% include "Entry/_tags.html.twig" with {'tags': entry.tags, 'entryId': entry.id, 'withRemove': true} only %}
             </div>
 
-            <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>
 
         </aside>
-        <article{% if entry.language is defined and entry.language is not null %} lang="{{ entry.getHTMLLanguage() }}"{% endif %} data-controller="highlight">
+        <article
+            {% if entry.language is defined and entry.language is not null %} lang="{{ entry.getHTMLLanguage() }}"{% endif %}
+            data-controller="highlight annotations"
+            data-annotations-entry-id-value="{{ entry.id }}"
+            data-annotations-create-url-value="{{ path('annotations_post_annotation', {'entry': entry.id}) }}"
+            data-annotations-update-url-value="{{ path('annotations_put_annotation', {'annotation': 'idAnnotation'}) }}"
+            data-annotations-destroy-url-value="{{ path('annotations_delete_annotation', {'annotation': 'idAnnotation'}) }}"
+            data-annotations-search-url-value="{{ path('annotations_get_annotations', {'entry': entry.id}) }}"
+        >
             {{ entry.content|raw }}
         </article>
 
-        <div class="fixed-action-btn horizontal click-to-toggle hide-on-large-only" data-controller="materialize--fab" data-action="scroll@window->materialize--fab#autoDisplay">
+        <div class="fixed-action-btn horizontal click-to-toggle hide-on-large-only" data-controller="materialize--fab" data-action="scroll@window->materialize--fab#autoDisplay click->materialize--fab#click">
             <a class="btn-floating btn-large" data-toggle="actions">
               <i class="material-icons">menu</i>
             </a>
@@ -343,19 +351,6 @@
             </ul>
         </div>
     </div>
-
-<script id="annotationroutes" type="application/json">
-{
-    "prefix": "",
-    "urls": {
-        "create": "{{ path('annotations_post_annotation', {'entry': entry.id}) }}",
-        "update": "{{ path('annotations_put_annotation', {'annotation': 'idAnnotation'}) }}",
-        "destroy": "{{ path('annotations_delete_annotation', {'annotation': 'idAnnotation'}) }}",
-        "search": "{{ path('annotations_get_annotations', {'entry': entry.id}) }}"
-    },
-    "entryId": "{{ entry.id }}"
-}</script>
-
 {% endblock %}
 
 {% block footer %}

templates/Entry/new_form.html.twig

@@ -1,4 +1,4 @@
-<form class="input-field nav-panel-item nav-panel-add" style="display: none" name="entry" method="post" action="{{ path('new_entry') }}">
+<form class="input-field nav-panel-item nav-panel-add" style="display: none" name="entry" method="post" action="{{ path('new_entry') }}" data-topbar-target="addUrl" data-action="topbar#submittingUrl">
     {% if form_errors(form) %}
         <span class="black-text">{{ form_errors(form) }}</span>
     {% endif %}
@@ -8,8 +8,8 @@
         <span class="black-text">{{ form_errors(form.url) }}</span>
     {% endif %}
 
-    {{ form_widget(form.url, {'attr': {'autocomplete': 'off', 'placeholder': 'entry.new.placeholder'}}) }}
-    <i class="material-icons close" aria-label="clear" role="button"></i>
+    {{ form_widget(form.url, {'attr': {'autocomplete': 'off', 'placeholder': 'entry.new.placeholder', 'data-topbar-target': 'addUrlInput'}}) }}
+    <i class="material-icons close" aria-label="clear" role="button" data-action="click->topbar#showActions" data-shortcuts-target="showActions"></i>
 
     {{ form_rest(form) }}
 </form>

templates/Entry/search_form.html.twig

@@ -1,4 +1,4 @@
-<form class="input-field nav-panel-item nav-panel-search" style="display: none" name="search" method="GET" action="{{ path('search') }}">
+<form class="input-field nav-panel-item nav-panel-search" style="display: none" name="search" method="GET" action="{{ path('search') }}" data-topbar-target="search">
     {% if form_errors(form) %}
         <span class="black-text">{{ form_errors(form) }}</span>
     {% endif %}
@@ -10,8 +10,8 @@
 
     <input type="hidden" name="currentRoute" value="{{ currentRoute }}" />
 
-    {{ form_widget(form.term, {'attr': {'autocomplete': 'off', 'placeholder': 'entry.search.placeholder'}}) }}
-    <i class="material-icons close" aria-label="clear" role="button"></i>
+    {{ form_widget(form.term, {'attr': {'autocomplete': 'off', 'placeholder': 'entry.search.placeholder', 'data-topbar-target': 'searchInput'}}) }}
+    <i class="material-icons close" aria-label="clear" role="button" data-action="click->topbar#showActions" data-shortcuts-target="showActions"></i>
 
     {{ form_rest(form) }}
 </form>

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) }}

templates/Tag/tags.html.twig

@@ -17,18 +17,19 @@
                 </li>
             {% endif %}
             {% for tag in tags %}
-                <li title="{{ tag.label }} ({{ tag.nbEntries }})" id="tag-{{ tag.id }}" class="chip">
-                    <a href="{{ path('tag_entries', {'slug': tag.slug}) }}" class="card-tag-link" data-handle="tag-link">
+                <li title="{{ tag.label }} ({{ tag.nbEntries }})" id="tag-{{ tag.id }}" class="chip" data-controller="tag">
+                    <a href="{{ path('tag_entries', {'slug': tag.slug}) }}" class="card-tag-link" data-tag-target="link">
                         {{ tag.label }}&nbsp;({{ tag.nbEntries }})
                     </a>
                     {% if renameForms is defined and renameForms[tag.id] is defined %}
-                    <form class="card-tag-form hidden" data-handle="tag-rename-form" action="{{ path('tag_rename', {'slug': tag.slug, redirect: current_path}) }}" method="POST">
-                        {{ form_widget(renameForms[tag.id].label, {'attr': {'value': tag.label}}) }}
+                    <form class="card-tag-form hidden" data-tag-target="form" action="{{ path('tag_rename', {'slug': tag.slug, redirect: current_path}) }}" method="POST">
+                        {{ form_widget(renameForms[tag.id].label, {'attr': {'value': tag.label, 'data-tag-target': 'input'}}) }}
                         {{ form_rest(renameForms[tag.id]) }}
+                        <button type="submit"><i class="material-icons">done</i></button>
                     </form>
-                    <a class="card-tag-icon card-tag-rename" data-handler="tag-rename" href="javascript:void(0);">
+                    <button type="button" data-tag-target="edit" data-action="tag#showForm">
                         <i class="material-icons">mode_edit</i>
-                    </a>
+                    </button>
                     {% endif %}
                     <a id="delete-{{ tag.slug }}" href="{{ path('tag_delete', {'slug': tag.slug, redirect: current_path}) }}" class="card-tag-icon card-tag-delete" onclick="return confirm('{{ 'tag.confirm.delete'|trans({'%name%': tag.label})|escape('js') }}')">
                         <i class="material-icons">delete</i>

templates/User/edit.html.twig

@@ -48,16 +48,16 @@
                                     </div>
                                 </div>
 
-                                <div class="row">
+                                <div class="row" data-controller="fake-radio">
                                     <div class="input-field col s12">
                                         <label for="{{ edit_form.emailTwoFactor.vars.id }}">
-                                            {{ form_widget(edit_form.emailTwoFactor) }}
+                                            {{ form_widget(edit_form.emailTwoFactor, {attr: {'data-fake-radio-target': 'emailTwoFactor', 'data-action': 'fake-radio#uncheckGoogle'}}) }}
                                             <span>{{ edit_form.emailTwoFactor.vars.label|trans }}</span>
                                         </label>
                                     </div>
                                     <div class="input-field col s12">
                                         <label for="{{ edit_form.googleTwoFactor.vars.id }}">
-                                            {{ form_widget(edit_form.googleTwoFactor) }}
+                                            {{ form_widget(edit_form.googleTwoFactor, {attr: {'data-fake-radio-target': 'googleTwoFactor', 'data-action': 'fake-radio#uncheckEmail'}}) }}
                                             <span>{{ edit_form.googleTwoFactor.vars.label|trans }}</span>
                                         </label>
                                     </div>

templates/base.html.twig

@@ -4,7 +4,7 @@
 <!--[if lte IE 7]><html class="no-js ie7 ie67 ie678"{% if lang is not empty %} lang="{{ lang }}"{% endif %}><![endif]-->
 <!--[if IE 8]><html class="no-js ie8 ie678"{% if lang is not empty %} lang="{{ lang }}"{% endif %}><![endif]-->
 <!--[if gt IE 8]><html class="no-js"{% if lang is not empty %} lang="{{ lang }}"{% endif %}><![endif]-->
-<html{% if lang is not empty %} class="{{ theme_class() }}" lang="{{ lang }}"{% endif %}>
+<html{% if lang is not empty %} lang="{{ lang }}"{% endif %} class="{{ theme_class() }}" data-controller="dark-theme shortcuts" data-shortcuts-entries-navigation-outlet="[data-controller~='entries-navigation']">
     <head>
         {% block head %}
             <meta name="viewport" content="initial-scale=1.0">

templates/layout.html.twig

@@ -77,8 +77,8 @@
                 <a class="waves-effect" href="{{ path('tag') }}">{{ 'menu.left.tags'|trans }} <span class="items-number grey-text">{{ count_tags() }}</span></a>
             </li>
         </ul>
-        <div class="nav-panels">
-            <div class="nav-panel-actions nav-panel-item">
+        <div class="nav-panels" data-controller="topbar">
+            <div class="nav-panel-actions nav-panel-item" data-topbar-target="actions">
                 <div class="nav-panel-top">
                     <a href="#" data-target="slide-out" class="nav-panel-menu sidenav-trigger"><i class="material-icons">menu</i></a>
                     <h1 class="left action">
@@ -88,12 +88,12 @@
                 </div>
                 <ul class="input-field nav-panel-buttom">
                     <li class="bold toggle-add-url-container">
-                        <a class="waves-effect toggle-add-url" data-controller="materialize--tooltip" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.add_new_entry'|trans }}" href="{{ path('new') }}" id="nav-btn-add">
+                        <a class="waves-effect toggle-add-url" data-controller="materialize--tooltip" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.add_new_entry'|trans }}" href="{{ path('new') }}" data-action="topbar#showAddUrl:prevent:stop" data-shortcuts-target="showAddUrl">
                             <i class="material-icons">add</i>
                         </a>
                     </li>
                     <li>
-                        <a class="waves-effect" data-controller="materialize--tooltip" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.search'|trans }}" href="javascript: void(null);" id="nav-btn-search">
+                        <a class="waves-effect" data-controller="materialize--tooltip" data-position="bottom" data-delay="50" data-tooltip="{{ 'menu.top.search'|trans }}" href="javascript: void(null);" data-action="topbar#showSearch:prevent:stop" data-shortcuts-target="showSearch">
                             <i class="material-icons">search</i>
                         </a>
                     </li>
@@ -128,19 +128,19 @@
                         <li class="divider"></li>
                     {% endif %}
                     <li>
-                        <a href="#" class="js-theme-toggle" data-theme="light">
+                        <a href="#" data-action="click->dark-theme#useLight:prevent">
                             <i class="theme-toggle-icon material-icons tiny">brightness_high</i>
                             <span>{{ 'menu.left.theme_toggle_light'|trans }}</span>
                         </a>
                     </li>
                     <li>
-                        <a href="#" class="js-theme-toggle" data-theme="dark">
+                        <a href="#" data-action="click->dark-theme#useDark:prevent">
                             <i class="theme-toggle-icon material-icons tiny">brightness_low</i>
                             <span>{{ 'menu.left.theme_toggle_dark'|trans }}</span>
                         </a>
                     </li>
                     <li>
-                        <a href="#" class="js-theme-toggle" data-theme="auto">
+                        <a href="#" data-action="click->dark-theme#useAuto:prevent">
                             <i class="theme-toggle-icon material-icons tiny">brightness_auto</i>
                             <span>{{ 'menu.left.theme_toggle_auto'|trans }}</span>
                         </a>

webpack.config.js

@@ -22,7 +22,6 @@ Encore
     config.corejs = '3.23';
   })
   .enableSassLoader()
-  .enablePostCssLoader()
-  .autoProvidejQuery();
+  .enablePostCssLoader();
 
 module.exports = Encore.getWebpackConfig();

yarn.lock

@@ -1404,7 +1404,6 @@ ajv@^8.0.0, ajv@^8.0.1, ajv@^8.9.0:
 
 annotator@wallabag/annotator#master:
   version "2.0.0-alpha.4"
-  uid "082069d777ed0fe5080392e85675ef3a519c7886"
   resolved "https://codeload.github.com/wallabag/annotator/tar.gz/082069d777ed0fe5080392e85675ef3a519c7886"
   dependencies:
     backbone-extend-standalone "^0.1.2"
@@ -3391,11 +3390,6 @@ jiti@^1.20.0:
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d"
   integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==
 
-jquery.cookie@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/jquery.cookie/-/jquery.cookie-1.4.1.tgz#d63dce209eab691fe63316db08ca9e47e0f9385b"
-  integrity sha512-c/hZOOL+8VSw/FkTVH637gS1/6YzMSCROpTZ2qBYwJ7s7sHajU7uBkSSiE5+GXWwrfCCyO+jsYjUQ7Hs2rIxAA==
-
 jquery@^3.7.1:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.7.1.tgz#083ef98927c9a6a74d05a6af02806566d16274de"