feat: add "tags" or "keyword" support for settings (#5585)

this allows us to search for both "ffz" and "frankerfacez" when searching for FrankerFaceZ settings, without trying to force add both into the setting name

CHANGELOG.md

@@ -90,6 +90,7 @@
 - Dev: Refactor and document `Scrollbar`. (#5334, #5393)
 - Dev: Refactor `TwitchIrcServer`, making it abstracted. (#5421, #5435)
 - Dev: Reduced the amount of scale events. (#5404, #5406)
+- Dev: Refactored settings widget creation. (#5585)
 - Dev: Removed unused timegate settings. (#5361)
 - Dev: Add `Channel::addSystemMessage` helper function, allowing us to avoid the common `channel->addMessage(makeSystemMessage(...));` pattern. (#5500)
 - Dev: Unsingletonize `Resources2`. (#5460)

resources/qss/settings.qss

@@ -61,6 +61,11 @@ chatterino--DescriptionLabel {
     color: #999;
 }
 
+QLabel#description {
+    color: #999;
+    padding-left: 10px;
+}
+
 chatterino--NavigationLabel {
     font-family: "Segoe UI light";
     font-size: 15px;

src/CMakeLists.txt

@@ -723,6 +723,8 @@ set(SOURCE_FILES
         widgets/settingspages/PluginsPage.hpp
         widgets/settingspages/SettingsPage.cpp
         widgets/settingspages/SettingsPage.hpp
+        widgets/settingspages/SettingWidget.cpp
+        widgets/settingspages/SettingWidget.hpp
 
         widgets/splits/ClosedSplits.cpp
         widgets/splits/ClosedSplits.hpp

src/widgets/settingspages/GeneralPage.cpp

@@ -20,6 +20,7 @@
 #include "util/IncognitoBrowser.hpp"
 #include "widgets/BaseWindow.hpp"
 #include "widgets/settingspages/GeneralPageView.hpp"
+#include "widgets/settingspages/SettingWidget.hpp"
 
 #include <magic_enum/magic_enum.hpp>
 #include <QDesktopServices>
@@ -265,10 +266,13 @@ void GeneralPage::initLayout(GeneralPageView &layout)
         },
         false, "Choose which tabs are visible in the notebook");
 
-    layout.addCheckbox(
+    SettingWidget::inverseCheckbox("Show message reply context",
-        "Show message reply context", s.hideReplyContext, true,
+                                   s.hideReplyContext)
-        "This setting will only affect how messages are shown. You can reply "
+        ->setTooltip(
-        "to a message regardless of this setting.");
+            "This setting will only affect how messages are shown. You can "
+            "reply to a message regardless of this setting.")
+        ->addTo(layout);
+
     layout.addCheckbox("Show message reply button", s.showReplyButton, false,
                        "Show a reply button next to every chat message");
 
@@ -571,7 +575,10 @@ void GeneralPage::initLayout(GeneralPageView &layout)
                        s.removeSpacesBetweenEmotes, false,
                        "When enabled, adjacent emotes will no longer have an "
                        "added space seperating them.");
-    layout.addCheckbox("Show unlisted 7TV emotes", s.showUnlistedSevenTVEmotes);
+    SettingWidget::checkbox("Show unlisted 7TV emotes",
+                            s.showUnlistedSevenTVEmotes)
+        ->addKeywords({"seventv"})
+        ->addTo(layout);
     // TODO: Add a tooltip explaining what an unlisted 7TV emote is
     // but wait until https://github.com/Chatterino/wiki/pull/255 is resolved,
     // as an official description from 7TV devs is best
@@ -622,25 +629,48 @@ void GeneralPage::initLayout(GeneralPageView &layout)
                            "Google",
                        },
                        s.emojiSet);
-    layout.addCheckbox("Show BetterTTV global emotes",
+    SettingWidget::checkbox("Show BetterTTV global emotes",
-                       s.enableBTTVGlobalEmotes);
+                            s.enableBTTVGlobalEmotes)
-    layout.addCheckbox("Show BetterTTV channel emotes",
+        ->addKeywords({"bttv"})
-                       s.enableBTTVChannelEmotes);
+        ->addTo(layout);
-    layout.addCheckbox("Enable BetterTTV live emote updates (requires restart)",
+    SettingWidget::checkbox("Show BetterTTV channel emotes",
-                       s.enableBTTVLiveUpdates);
+                            s.enableBTTVChannelEmotes)
-    layout.addCheckbox("Show FrankerFaceZ global emotes",
+        ->addKeywords({"bttv"})
-                       s.enableFFZGlobalEmotes);
+        ->addTo(layout);
-    layout.addCheckbox("Show FrankerFaceZ channel emotes",
+    SettingWidget::checkbox(
-                       s.enableFFZChannelEmotes);
+        "Enable BetterTTV live emote updates (requires restart)",
-    layout.addCheckbox("Show 7TV global emotes", s.enableSevenTVGlobalEmotes);
+        s.enableBTTVLiveUpdates)
-    layout.addCheckbox("Show 7TV channel emotes", s.enableSevenTVChannelEmotes);
+        ->addKeywords({"bttv"})
-    layout.addCheckbox("Enable 7TV live emote updates (requires restart)",
+        ->addTo(layout);
-                       s.enableSevenTVEventAPI);
+
-    layout.addCheckbox("Send activity to 7TV", s.sendSevenTVActivity, false,
+    SettingWidget::checkbox("Show FrankerFaceZ global emotes",
-                       "When enabled, Chatterino will signal an activity to "
+                            s.enableFFZGlobalEmotes)
-                       "7TV when you send a chat mesage. This is used for "
+        ->addKeywords({"ffz"})
-                       "badges, paints, and personal emotes. When disabled, no "
+        ->addTo(layout);
-                       "activity is sent and others won't see your cosmetics.");
+    SettingWidget::checkbox("Show FrankerFaceZ channel emotes",
+                            s.enableFFZChannelEmotes)
+        ->addKeywords({"ffz"})
+        ->addTo(layout);
+
+    SettingWidget::checkbox("Show 7TV global emotes",
+                            s.enableSevenTVGlobalEmotes)
+        ->addKeywords({"seventv"})
+        ->addTo(layout);
+    SettingWidget::checkbox("Show 7TV channel emotes",
+                            s.enableSevenTVChannelEmotes)
+        ->addKeywords({"seventv"})
+        ->addTo(layout);
+    SettingWidget::checkbox("Enable 7TV live emote updates (requires restart)",
+                            s.enableSevenTVEventAPI)
+        ->addKeywords({"seventv"})
+        ->addTo(layout);
+    SettingWidget::checkbox("Send activity to 7TV", s.sendSevenTVActivity)
+        ->setTooltip("When enabled, Chatterino will signal an activity to 7TV "
+                     "when you send a chat mesage. This is used for badges, "
+                     "paints, and personal emotes. When disabled, no activity "
+                     "is sent and others won't see your cosmetics.")
+        ->addKeywords({"seventv"})
+        ->addTo(layout);
 
     layout.addTitle("Streamer Mode");
     layout.addDescription(
@@ -976,15 +1006,23 @@ void GeneralPage::initLayout(GeneralPageView &layout)
                        "e.g. prime, bits, sub gifter");
     layout.addCheckbox("Chatterino", s.showBadgesChatterino, false,
                        "e.g. Chatterino Supporter/Contributor/Developer");
-    layout.addCheckbox("FrankerFaceZ", s.showBadgesFfz, false,
+    SettingWidget::checkbox("FrankerFaceZ", s.showBadgesFfz)
-                       "e.g. Bot, FFZ supporter, FFZ developer");
+        ->addKeywords({"ffz"})
-    layout.addCheckbox("7TV", s.showBadgesSevenTV, false,
+        ->setTooltip("e.g. Bot, FrankerFaceZ supporter, FrankerFaceZ developer")
-                       "Badges for 7TV admins, developers, and supporters");
+        ->addTo(layout);
+    SettingWidget::checkbox("7TV", s.showBadgesSevenTV)
+        ->addKeywords({"seventv"})
+        ->setTooltip("Badges for 7TV admins, developers, and supporters")
+        ->addTo(layout);
     layout.addSeperator();
-    layout.addCheckbox("Use custom FrankerFaceZ moderator badges",
+    SettingWidget::checkbox("Use custom FrankerFaceZ moderator badges",
-                       s.useCustomFfzModeratorBadges);
+                            s.useCustomFfzModeratorBadges)
-    layout.addCheckbox("Use custom FrankerFaceZ VIP badges",
+        ->addKeywords({"ffz"})
-                       s.useCustomFfzVipBadges);
+        ->addTo(layout);
+    SettingWidget::checkbox("Use custom FrankerFaceZ VIP badges",
+                            s.useCustomFfzVipBadges)
+        ->addKeywords({"ffz"})
+        ->addTo(layout);
 
     layout.addSubtitle("Overlay");
     layout.addIntInput(
@@ -1080,10 +1118,11 @@ void GeneralPage::initLayout(GeneralPageView &layout)
                        false,
                        "Make all clickable links lowercase to deter "
                        "phishing attempts.");
-    layout.addCheckbox(
+    SettingWidget::checkbox("Show user's pronouns in user card", s.showPronouns)
-        "Show user's pronouns in user card", s.showPronouns, false,
+        ->setDescription(
-        "Shows users' pronouns in their user card. "
+            R"(Pronouns are retrieved from <a href="https://pr.alejo.io">pr.alejo.io</a> when a user card is opened.)")
-        "Pronouns are retrieved from alejo.io when the user card is opened.");
+        ->addTo(layout);
+
     layout.addCheckbox("Bold @usernames", s.boldUsernames, false,
                        "Bold @mentions to make them more noticable.");
     layout.addCheckbox("Color @usernames", s.colorUsernames, false,
@@ -1184,13 +1223,11 @@ void GeneralPage::initLayout(GeneralPageView &layout)
     layout.addIntInput("Usercard scrollback limit (requires restart)",
                        s.scrollbackUsercardLimit, 100, 100000, 100);
 
-    layout.addDropdownEnumClass<ShowModerationState>(
+    SettingWidget::dropdown("Show blocked term automod messages",
-        "Show blocked term automod messages",
+                            s.showBlockedTermAutomodMessages)
-        qmagicenum::enumNames<ShowModerationState>(),
+        ->setTooltip("Show messages that are blocked by AutoMod for containing "
-        s.showBlockedTermAutomodMessages,
+                     "a public blocked term in the current channel.")
-        "Show messages that are blocked by AutoMod for containing a public "
+        ->addTo(layout);
-        "blocked term in the current channel.",
-        {});
 
     layout.addDropdown<int>(
         "Stack timeouts", {"Stack", "Stack until timeout", "Don't stack"},
@@ -1216,25 +1253,20 @@ void GeneralPage::initLayout(GeneralPageView &layout)
         "@mention for the related thread. If the reply context is hidden, "
         "these mentions will never be stripped.");
 
-    layout.addDropdownEnumClass<ChatSendProtocol>(
+    SettingWidget::dropdown("Chat send protocol", s.chatSendProtocol)
-        "Chat send protocol", qmagicenum::enumNames<ChatSendProtocol>(),
+        ->setTooltip("'Helix' will use Twitch's Helix API to send message. "
-        s.chatSendProtocol,
+                     "'IRC' will use IRC to send messages.")
-        "'Helix' will use Twitch's Helix API to send message. 'IRC' will use "
+        ->addTo(layout);
-        "IRC to send messages.",
-        {});
 
-    layout.addCheckbox(
+    SettingWidget::checkbox("Show send message button", s.showSendButton)
-        "Show send message button", s.showSendButton, false,
+        ->setTooltip("Show a Send button next to each split input that can be "
-        "Show a Send button next to each split input that can be "
+                     "clicked to send the message")
-        "clicked to send the message");
+        ->addTo(layout);
 
-    auto *soundBackend = layout.addDropdownEnumClass<SoundBackend>(
+    SettingWidget::dropdown("Sound backend (requires restart)", s.soundBackend)
-        "Sound backend (requires restart)",
+        ->setTooltip("Change this only if you're noticing issues "
-        qmagicenum::enumNames<SoundBackend>(), s.soundBackend,
+                     "with sound playback on your system")
-        "Change this only if you're noticing issues with sound playback on "
+        ->addTo(layout);
-        "your system",
-        {});
-    soundBackend->setMinimumWidth(soundBackend->minimumSizeHint().width());
 
     layout.addStretch();
 

src/widgets/settingspages/GeneralPageView.cpp

@@ -6,6 +6,7 @@
 #include "widgets/dialogs/ColorPickerDialog.hpp"
 #include "widgets/helper/color/ColorButton.hpp"
 #include "widgets/helper/Line.hpp"
+#include "widgets/settingspages/SettingWidget.hpp"
 
 #include <QRegularExpression>
 #include <QScrollArea>
@@ -44,9 +45,16 @@ GeneralPageView::GeneralPageView(QWidget *parent)
                      });
 }
 
-void GeneralPageView::addWidget(QWidget *widget)
+void GeneralPageView::addWidget(QWidget *widget, QStringList keywords)
 {
     this->contentLayout_->addWidget(widget);
+    if (!keywords.isEmpty())
+    {
+        this->groups_.back().widgets.push_back({
+            .element = widget,
+            .keywords = keywords,
+        });
+    }
 }
 
 void GeneralPageView::addLayout(QLayout *layout)
@@ -376,11 +384,10 @@ bool GeneralPageView::filterElements(const QString &query)
                         currentSubtitleVisible = true;
                         widget.element->show();
                         groupAny = true;
+                        break;
                     }
-                    else
+
-                    {
+                    widget.element->hide();
-                        widget.element->hide();
-                    }
                 }
             }
 

src/widgets/settingspages/GeneralPageView.hpp

@@ -95,7 +95,7 @@ class GeneralPageView : public QWidget
 public:
     GeneralPageView(QWidget *parent = nullptr);
 
-    void addWidget(QWidget *widget);
+    void addWidget(QWidget *widget, QStringList keywords = {});
     void addLayout(QLayout *layout);
     void addStretch();
 
@@ -274,50 +274,6 @@ public:
         return combo;
     }
 
-    template <typename T, std::size_t N>
-    ComboBox *addDropdownEnumClass(const QString &text,
-                                   const std::array<QStringView, N> &items,
-                                   EnumStringSetting<T> &setting,
-                                   QString toolTipText,
-                                   const QString &defaultValueText)
-    {
-        auto *combo = this->addDropdown(text, {}, std::move(toolTipText));
-
-        for (const auto &item : items)
-        {
-            combo->addItem(item.toString());
-        }
-
-        if (!defaultValueText.isEmpty())
-        {
-            combo->setCurrentText(defaultValueText);
-        }
-
-        setting.connect(
-            [&setting, combo](const QString &value) {
-                auto enumValue =
-                    qmagicenum::enumCast<T>(value, qmagicenum::CASE_INSENSITIVE)
-                        .value_or(setting.defaultValue);
-
-                auto i = magic_enum::enum_integer(enumValue);
-
-                combo->setCurrentIndex(i);
-            },
-            this->managedConnections_);
-
-        QObject::connect(
-            combo, &QComboBox::currentTextChanged,
-            [&setting](const auto &newText) {
-                // The setter for EnumStringSetting does not check that this value is valid
-                // Instead, it's up to the getters to make sure that the setting is legic - see the enum_cast above
-                // You could also use the settings `getEnum` function
-                setting = newText;
-                getApp()->getWindows()->forceLayoutChannelViews();
-            });
-
-        return combo;
-    }
-
     void enableIf(QComboBox *widget, auto &setting, auto cb)
     {
         auto updateVisibility = [cb = std::move(cb), &setting, widget]() {

src/widgets/settingspages/SettingWidget.cpp

@@ -0,0 +1,144 @@
+#include "widgets/settingspages/SettingWidget.hpp"
+
+#include "widgets/settingspages/GeneralPageView.hpp"
+
+#include <QBoxLayout>
+#include <QCheckBox>
+#include <QLabel>
+
+namespace {
+
+constexpr int MAX_TOOLTIP_LINE_LENGTH = 50;
+const auto MAX_TOOLTIP_LINE_LENGTH_PATTERN =
+    QStringLiteral(R"(.{%1}\S*\K(\s+))").arg(MAX_TOOLTIP_LINE_LENGTH);
+const QRegularExpression MAX_TOOLTIP_LINE_LENGTH_REGEX(
+    MAX_TOOLTIP_LINE_LENGTH_PATTERN);
+
+}  // namespace
+
+namespace chatterino {
+
+SettingWidget::SettingWidget(const QString &mainKeyword)
+    : vLayout(new QVBoxLayout(this))
+    , hLayout(new QHBoxLayout)
+{
+    this->vLayout->setContentsMargins(0, 0, 0, 0);
+
+    this->hLayout->setContentsMargins(0, 0, 0, 0);
+    this->vLayout->addLayout(hLayout);
+
+    this->keywords.append(mainKeyword);
+}
+
+SettingWidget *SettingWidget::checkbox(const QString &label,
+                                       BoolSetting &setting)
+{
+    auto *widget = new SettingWidget(label);
+
+    auto *check = new QCheckBox(label);
+
+    widget->hLayout->addWidget(check);
+
+    // update when setting changes
+    setting.connect(
+        [check](const bool &value, auto) {
+            check->setChecked(value);
+        },
+        widget->managedConnections);
+
+    // update setting on toggle
+    QObject::connect(check, &QCheckBox::toggled, widget,
+                     [&setting](bool state) {
+                         setting = state;
+                     });
+
+    widget->actionWidget = check;
+    widget->label = check;
+
+    return widget;
+}
+
+SettingWidget *SettingWidget::inverseCheckbox(const QString &label,
+                                              BoolSetting &setting)
+{
+    auto *widget = new SettingWidget(label);
+
+    auto *check = new QCheckBox(label);
+
+    widget->hLayout->addWidget(check);
+
+    // update when setting changes
+    setting.connect(
+        [check](const bool &value, auto) {
+            check->setChecked(!value);
+        },
+        widget->managedConnections);
+
+    // update setting on toggle
+    QObject::connect(check, &QCheckBox::toggled, widget,
+                     [&setting](bool state) {
+                         setting = !state;
+                     });
+
+    widget->actionWidget = check;
+    widget->label = check;
+
+    return widget;
+}
+
+SettingWidget *SettingWidget::setTooltip(QString tooltip)
+{
+    assert(!tooltip.isEmpty());
+
+    if (tooltip.length() > MAX_TOOLTIP_LINE_LENGTH)
+    {
+        // match MAX_TOOLTIP_LINE_LENGTH characters, any remaining
+        // non-space, and then capture the following space for
+        // replacement with newline
+        tooltip.replace(MAX_TOOLTIP_LINE_LENGTH_REGEX, "\n");
+    }
+
+    if (this->label != nullptr)
+    {
+        this->label->setToolTip(tooltip);
+    }
+
+    if (this->actionWidget != nullptr)
+    {
+        this->actionWidget->setToolTip(tooltip);
+    }
+
+    this->keywords.append(tooltip);
+
+    return this;
+}
+
+SettingWidget *SettingWidget::setDescription(const QString &text)
+{
+    auto *lbl = new QLabel(text);
+    lbl->setTextInteractionFlags(Qt::TextBrowserInteraction |
+                                 Qt::LinksAccessibleByKeyboard);
+    lbl->setOpenExternalLinks(true);
+    lbl->setWordWrap(true);
+    lbl->setObjectName("description");
+
+    this->vLayout->insertWidget(0, lbl);
+
+    this->keywords.append(text);
+
+    return this;
+}
+
+SettingWidget *SettingWidget::addKeywords(const QStringList &newKeywords)
+{
+    this->keywords.append(newKeywords);
+
+    return this;
+}
+
+void SettingWidget::addTo(GeneralPageView &view)
+{
+    view.addWidget(this, this->keywords);
+}
+
+}  // namespace chatterino

src/widgets/settingspages/SettingWidget.hpp

@@ -0,0 +1,107 @@
+#pragma once
+
+#include "common/ChatterinoSetting.hpp"
+#include "util/QMagicEnum.hpp"
+#include "widgets/settingspages/GeneralPageView.hpp"
+
+#include <pajlada/signals/signalholder.hpp>
+#include <QBoxLayout>
+#include <QComboBox>
+#include <QLabel>
+#include <QObject>
+#include <QString>
+#include <QStringBuilder>
+#include <QStringList>
+#include <QtContainerFwd>
+#include <QWidget>
+
+namespace chatterino {
+
+class GeneralPageView;
+
+class SettingWidget : QWidget
+{
+    Q_OBJECT
+
+    explicit SettingWidget(const QString &mainKeyword);
+
+public:
+    ~SettingWidget() override = default;
+    SettingWidget &operator=(const SettingWidget &) = delete;
+    SettingWidget &operator=(SettingWidget &&) = delete;
+    SettingWidget(const SettingWidget &other) = delete;
+    SettingWidget(SettingWidget &&other) = delete;
+
+    static SettingWidget *checkbox(const QString &label, BoolSetting &setting);
+    static SettingWidget *inverseCheckbox(const QString &label,
+                                          BoolSetting &setting);
+    template <typename T>
+    static SettingWidget *dropdown(const QString &label,
+                                   EnumStringSetting<T> &setting)
+    {
+        auto *widget = new SettingWidget(label);
+
+        auto *lbl = new QLabel(label % ":");
+        auto *combo = new ComboBox;
+        combo->setFocusPolicy(Qt::StrongFocus);
+        for (const auto &item : qmagicenum::enumNames<T>())
+        {
+            combo->addItem(item.toString());
+        }
+        // TODO: this can probably use some other size hint/size strategy
+        combo->setMinimumWidth(combo->minimumSizeHint().width());
+
+        widget->actionWidget = combo;
+        widget->label = lbl;
+
+        widget->hLayout->addWidget(lbl);
+        widget->hLayout->addStretch(1);
+        widget->hLayout->addWidget(combo);
+
+        setting.connect(
+            [&setting, combo](const QString &value) {
+                auto enumValue =
+                    qmagicenum::enumCast<T>(value, qmagicenum::CASE_INSENSITIVE)
+                        .value_or(setting.defaultValue);
+
+                auto i = magic_enum::enum_integer(enumValue);
+
+                combo->setCurrentIndex(i);
+            },
+            widget->managedConnections);
+
+        QObject::connect(
+            combo, &QComboBox::currentTextChanged,
+            [&setting](const auto &newText) {
+                // The setter for EnumStringSetting does not check that this value is valid
+                // Instead, it's up to the getters to make sure that the setting is legic - see the enum_cast above
+                // You could also use the settings `getEnum` function
+                setting = newText;
+            });
+
+        return widget;
+    }
+
+    SettingWidget *setTooltip(QString tooltip);
+    SettingWidget *setDescription(const QString &text);
+
+    /// Add extra keywords to the widget
+    ///
+    /// All text from the tooltip, description, and label are already keywords
+    SettingWidget *addKeywords(const QStringList &newKeywords);
+
+    void addTo(GeneralPageView &view);
+
+private:
+    QWidget *label = nullptr;
+    QWidget *actionWidget = nullptr;
+
+    QVBoxLayout *vLayout;
+    QHBoxLayout *hLayout;
+
+    pajlada::Signals::SignalHolder managedConnections;
+
+    QStringList keywords;
+};
+
+}  // namespace chatterino