[CMS] Discord Widget

[jannes-io]

What problem would you like to solve?
Add a Discord button that gives a preview of the server, like showing online users etc.

Make sure it is lazy loaded when the modal opens, and not before, and the server ID is configurable.

Additional context
Here is some twig:

                    {% embed '@Forumify/components/modal.html.twig' %}
                        {% block modalOpenButton %}
                            <a id="discord_btn">
                                <i class="ph ph-discord-logo"></i>
                            </a>
                        {% endblock %}
                        {% block modalContent %}
                            <div class="box">
                                <iframe id="discord_iframe" src="" width="100%" height="600" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
                            </div>
                        {% endblock %}
                    {% endembed %}

Here is some vanillaJS that would have to be converted to a stimulus controller:

function lazyLoadDiscord() {
  const body = document.getElementsByTagName('body')[0];
  const theme = body.classList.contains('dark') ? 'dark' : 'light';
  lazyLoadIFrame('discord_btn', 'discord_iframe', 'https://discord.com/widget?id=826797366455566346&theme=' + theme);
}

function lazyLoadIFrame(triggerId, frameId, frameSrc) {
  const button = document.getElementById(triggerId);
  const frame = document.getElementById(frameId);

  button.addEventListener('click', function () {
    if (frame.getAttribute('src') === '') {
      frame.setAttribute('src', frameSrc);
    }
  });
}