Upgrade dependencies

.devcontainer/devcontainer.json

@@ -3,7 +3,7 @@
 {
     "name": "PHP",
     // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
-    "image": "mcr.microsoft.com/devcontainers/php:3.0.3-8.4-trixie",
+    "image": "mcr.microsoft.com/devcontainers/php:3-8.5-trixie",
 
     // Features to add to the dev container. More info: https://containers.dev/features.
     "features": {

assets/controllers/collapsable_controller.js

@@ -1,5 +1,5 @@
 import { Controller } from '@hotwired/stimulus';
-import debounce from '../utils/debounce';
+import debounce from '@app/utils/debounce';
 
 // use some buffer-space so that the expand-button won't be included if just a couple of lines would be hidden
 const MAX_COLLAPSED_HEIGHT_REM = 25;

assets/controllers/comment_collapse_controller.js

@@ -1,5 +1,5 @@
 import { Controller } from '@hotwired/stimulus';
-import { getLevel } from '../utils/mbin';
+import { getLevel } from '@app/utils/mbin';
 
 const COMMENT_ELEMENT_TAG = 'BLOCKQUOTE';
 const COLLAPSIBLE_CLASS = 'collapsible';

assets/controllers/entry_link_create_controller.js

@@ -1,6 +1,6 @@
 import { ApplicationController, useThrottle } from 'stimulus-use';
-import { fetch, ok } from '../utils/http';
-import router from '../utils/routing';
+import { fetch, ok } from '@app/utils/http';
+import router from '@app/utils/routing';
 
 /* stimulusFetch: 'lazy' */
 export default class extends ApplicationController {

assets/controllers/html_refresh_controller.js

@@ -1,4 +1,4 @@
-import { fetch, ok } from '../utils/http';
+import { fetch, ok } from '@app/utils/http';
 import { Controller } from '@hotwired/stimulus';
 
 /* stimulusFetch: 'lazy' */

assets/controllers/infinite_scroll_controller.js

@@ -1,4 +1,4 @@
-import { fetch, ok } from '../utils/http';
+import { fetch, ok } from '@app/utils/http';
 import { Controller } from '@hotwired/stimulus';
 import { useIntersection } from 'stimulus-use';
 

assets/controllers/mentions_controller.js

@@ -1,6 +1,7 @@
-import { fetch, ok } from '../utils/http';
+import { fetch, ok } from '@app/utils/http';
 import { Controller } from '@hotwired/stimulus';
-import router from '../utils/routing';
+import { defaultPopover } from '@app/utils/popover.js';
+import router from '@app/utils/routing';
 
 /* stimulusFetch: 'lazy' */
 export default class extends Controller {
@@ -61,6 +62,7 @@ export default class extends Controller {
 
             document.querySelector('.popover').innerHTML = response.html;
 
+            const popover = defaultPopover();
             popover.trigger = event.target;
             popover.selectedTrigger = event.target;
             popover.element.dispatchEvent(new Event('openPopover'));

assets/controllers/notifications_controller.js

@@ -1,6 +1,6 @@
-import { ThrowResponseIfNotOk, fetch } from '../utils/http';
+import { ThrowResponseIfNotOk, fetch } from '@app/utils/http';
 import { Controller } from '@hotwired/stimulus';
-import Subscribe from '../utils/event-source';
+import Subscribe from '@app/utils/event-source';
 
 /* stimulusFetch: 'lazy' */
 export default class extends Controller {

assets/controllers/post_controller.js

@@ -1,7 +1,7 @@
-import { fetch, ok } from '../utils/http';
+import { fetch, ok } from '@app/utils/http';
 import { Controller } from '@hotwired/stimulus';
-import getIntIdFromElement from '../utils/mbin';
-import router from '../utils/routing';
+import getIntIdFromElement from '@app/utils/mbin';
+import router from '@app/utils/routing';
 
 /* stimulusFetch: 'lazy' */
 export default class extends Controller {

assets/controllers/preview_controller.js

@@ -1,6 +1,6 @@
-import { fetch, ok } from '../utils/http';
+import { fetch, ok } from '@app/utils/http';
 import { Controller } from '@hotwired/stimulus';
-import router from '../utils/routing';
+import router from '@app/utils/routing';
 import { useThrottle } from 'stimulus-use';
 
 /* stimulusFetch: 'lazy' */

assets/controllers/push_controller.js

@@ -1,4 +1,4 @@
-import { ThrowResponseIfNotOk, fetch } from '../utils/http';
+import { ThrowResponseIfNotOk, fetch } from '@app/utils/http';
 import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {

assets/controllers/rich_textarea_controller.js

@@ -1,5 +1,5 @@
 import { Controller } from '@hotwired/stimulus';
-import { fetch } from '../utils/http';
+import { fetch } from '@app/utils/http';
 
 /* stimulusFetch: 'lazy' */
 export default class extends Controller {
@@ -17,7 +17,7 @@ export default class extends Controller {
     emojiAutocompleteActive = false;
     mentionAutocompleteActive = false;
 
-    abortController;
+    abortController = null;
     requestActive = false;
 
     selectedSuggestionIndex = 0;
@@ -114,7 +114,9 @@ export default class extends Controller {
         this.selectedSuggestionIndex = 0;
         this.emojiAutocompleteActive = false;
         this.mentionAutocompleteActive = false;
-        this.abortController.abort();
+        if (null !== this.abortController) {
+            this.abortController.abort();
+        }
         this.requestActive = false;
         document.getElementById('user-suggestions')?.remove();
         document.getElementById('emoji-suggestions')?.remove();

assets/controllers/subject_controller.js

@@ -1,7 +1,8 @@
-import { fetch, ok } from '../utils/http';
-import getIntIdFromElement, { getDepth, getLevel, getTypeFromNotification } from '../utils/mbin';
+import { fetch, ok } from '@app/utils/http';
+import getIntIdFromElement, { getDepth, getLevel, getTypeFromNotification } from '@app/utils/mbin';
 import { Controller } from '@hotwired/stimulus';
-import router from '../utils/routing';
+import { defaultPopover } from '@app/utils/popover.js';
+import router from '@app/utils/routing';
 import { useIntersection } from 'stimulus-use';
 
 /* stimulusFetch: 'lazy' */
@@ -66,7 +67,7 @@ export default class extends Controller {
             window.location.href = event.target.href;
         } finally {
             this.loadingValue = false;
-            popover.togglePopover(false);
+            defaultPopover().togglePopover(false);
         }
     }
 

assets/controllers/subject_list_controller.js

@@ -1,7 +1,7 @@
-import { fetch, ok } from '../utils/http';
-import { getDepth, getLevel, getTypeFromNotification } from '../utils/mbin';
+import { fetch, ok } from '@app/utils/http';
+import { getDepth, getLevel, getTypeFromNotification } from '@app/utils/mbin';
 import { Controller } from '@hotwired/stimulus';
-import router from '../utils/routing';
+import router from '@app/utils/routing';
 
 /* stimulusFetch: 'lazy' */
 export default class extends Controller {

assets/controllers/subs_controller.js

@@ -1,4 +1,4 @@
-import { fetch, ok } from '../utils/http';
+import { fetch, ok } from '@app/utils/http';
 import { Controller } from '@hotwired/stimulus';
 
 /* stimulusFetch: 'lazy' */

assets/controllers/subs_panel_controller.js

@@ -1,5 +1,5 @@
 import { Controller } from '@hotwired/stimulus';
-import router from '../utils/routing';
+import router from '@app/utils/routing';
 
 const KBIN_SUBSCRIPTIONS_IN_SEPARATE_SIDEBAR = 'kbin_subscriptions_in_separate_sidebar';
 const KBIN_SUBSCRIPTIONS_SIDEBARS_SAME_SIDE = 'kbin_subscriptions_sidebars_same_side';

assets/controllers/timeago_controller.js

@@ -2,23 +2,23 @@ import { Controller } from '@hotwired/stimulus';
 /* eslint-disable camelcase -- zh_TW is a specific identifier */
 // eslint-disable-next-line -- grouping timeago imports here is more readable than properly sorting
 import * as timeago from 'timeago.js';
-import bg from 'timeago.js/lib/lang/bg';
-import da from 'timeago.js/lib/lang/da';
-import de from 'timeago.js/lib/lang/de';
-import el from 'timeago.js/lib/lang/el';
-import en from 'timeago.js/lib/lang/en_US';
-import es from 'timeago.js/lib/lang/es';
-import fr from 'timeago.js/lib/lang/fr';
-import gl from 'timeago.js/lib/lang/gl';
-import it from 'timeago.js/lib/lang/it';
-import ja from 'timeago.js/lib/lang/ja';
-import nl from 'timeago.js/lib/lang/nl';
-import pl from 'timeago.js/lib/lang/pl';
-import pt_BR from 'timeago.js/lib/lang/pt_BR';
-import ru from 'timeago.js/lib/lang/ru';
-import tr from 'timeago.js/lib/lang/tr';
-import uk from 'timeago.js/lib/lang/uk';
-import zh_TW from 'timeago.js/lib/lang/zh_TW';
+import bg from 'timeago.js/lib/lang/bg.js';
+import da from 'timeago.js/lib/lang/da.js';
+import de from 'timeago.js/lib/lang/de.js';
+import el from 'timeago.js/lib/lang/el.js';
+import en from 'timeago.js/lib/lang/en_US.js';
+import es from 'timeago.js/lib/lang/es.js';
+import fr from 'timeago.js/lib/lang/fr.js';
+import gl from 'timeago.js/lib/lang/gl.js';
+import it from 'timeago.js/lib/lang/it.js';
+import ja from 'timeago.js/lib/lang/ja.js';
+import nl from 'timeago.js/lib/lang/nl.js';
+import pl from 'timeago.js/lib/lang/pl.js';
+import pt_BR from 'timeago.js/lib/lang/pt_BR.js';
+import ru from 'timeago.js/lib/lang/ru.js';
+import tr from 'timeago.js/lib/lang/tr.js';
+import uk from 'timeago.js/lib/lang/uk.js';
+import zh_TW from 'timeago.js/lib/lang/zh_TW.js';
 
 /* stimulusFetch: 'lazy' */
 export default class extends Controller {
@@ -30,13 +30,26 @@ export default class extends Controller {
         }
 
         const lang = document.documentElement.lang;
-        const languages = { bg, da, de, el, en, es, fr, gl, it, ja, nl, pl, pt_BR, ru, tr, uk, zh_TW };
-
-        if (languages[lang]) {
-            timeago.register(lang, languages[lang]);
-            timeago.render(elems, lang);
-        } else {
-            timeago.render(elems);
-        }
+        const languages = {
+            bg: bg.default,
+            da: da.default,
+            de: de.default,
+            el: el.default,
+            en: en.default,
+            es: es.default,
+            fr: fr.default,
+            gl: gl.default,
+            it: it.default,
+            ja: ja.default,
+            nl: nl.default,
+            pl: pl.default,
+            pt_BR: pt_BR.default,
+            ru: ru.default,
+            tr: tr.default,
+            uk: uk.default,
+            zh_TW: zh_TW.default,
+        };
+        timeago.register(lang, languages[lang]);
+        timeago.render(elems, lang);
     }
 }

assets/controllers/tomselect_clear_on_load_controller.js

@@ -0,0 +1,45 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+
+    _orgLoad = null;
+    _tomselect = null;
+
+    initialize() {
+        this._onPreConnect = this._onPreConnect.bind(this);
+        this._onConnect = this._onConnect.bind(this);
+        this._onSearchLoad = this._onSearchLoad.bind(this);
+    }
+
+    connect() {
+        this.element.addEventListener('autocomplete:pre-connect', this._onPreConnect);
+        this.element.addEventListener('autocomplete:connect', this._onConnect);
+    }
+
+    disconnect() {
+        this.element.removeEventListener('autocomplete:connect', this._onConnect);
+        this.element.removeEventListener('autocomplete:pre-connect', this._onPreConnect);
+    }
+
+    _onPreConnect(event) {
+        this._orgLoad = event.detail.options.load;
+        event.detail.options.load = this._onSearchLoad;
+    }
+
+    _onConnect(event) {
+        this._tomselect = event.detail.tomSelect;
+        this._orgLoad = this._orgLoad.bind(this._tomselect);
+    }
+
+    _onSearchLoad(query, callback) {
+        this._tomselect.clear();
+        this._tomselect.clearActiveItems();
+        this._tomselect.clearActiveOption();
+        this._tomselect.clearFilter();
+        this._tomselect.clearOptions();
+        this._tomselect.clearPagination();
+        this._tomselect.clearCache();
+
+        this._orgLoad(query, callback);
+    }
+}

assets/stimulus_bootstrap.js

@@ -1,10 +1,7 @@
-// register any custom, 3rd party controllers here
-// app.register('some_controller_name', SomeImportedController);
 import { startStimulusApp } from '@symfony/stimulus-bridge';
 
 // Registers Stimulus controllers from controllers.json and in the controllers/ directory
-export const app = startStimulusApp(require.context(
-    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
-    true,
-    /\.[jt]sx?$/,
-));
+export const app = startStimulusApp(import.meta.webpackContext('@symfony/stimulus-bridge/lazy-controller-loader!./controllers', {
+    recursive: true,
+    regExp: /\.[jt]sx?$/,
+}));

assets/styles/_variables.scss

@@ -179,4 +179,9 @@ $aspect-ratios: (
 
   --mbin-details-detail-label: "Details";
   --mbin-details-spoiler-label: "Spoiler";
+
+  // ---------------------------------------------------------------------------
+  // Overwrites for libraries
+  // ---------------------------------------------------------------------------
+  --fa-width: auto;
 }

assets/styles/layout/_breakpoints.scss

@@ -24,6 +24,9 @@
     @if not $n {
         @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
     }
+    //TODO migrate all SCSS if to official CSS if once it supported by all major browsers
+    // https://sass-lang.com/documentation/breaking-changes/if-function/
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/if
     @return if($n < list.length($breakpoint-names), list.nth($breakpoint-names, $n + 1), null);
 }
 

assets/styles/layout/_forms.scss

@@ -1,6 +1,7 @@
 @use 'breakpoints' as b;
 @use '../mixins/mbin';
-@use '@fortawesome/fontawesome-free/scss/fontawesome' as fa;
+@use '@fortawesome/fontawesome-free/scss/fa' as fa;
+@use '@fortawesome/fontawesome-free/scss/solid' as faSolid;
 // needed for the checkmark do render correctly even though it is not directly used
 @use '@fortawesome/fontawesome-free/scss/solid' as faS;
 
@@ -138,16 +139,16 @@ input[type=radio] {
   -webkit-appearance: none;
   appearance: none;
   font-size: 0.9rem;
-  display: grid;
+  display: grid !important;
   margin: 0px;
-  width: 1.5rem;
+  width: 1.5rem !important;
   height: 1.5rem;
   justify-content: center;
   align-items: center;
   align-content: center;
   cursor: pointer;
 
-  @include fa.fa-icon-solid(fa.$fa-var-check);
+  @include faSolid.icon(fa.$var-check);
 
   &::before {
     transform: scale(0);