feat(PluginBrowser): add sorting and filtering options for plugins

- Introduced sorting and filtering by installed, default, category, name, and author

quickshell/Common/SessionData.qml

@@ -154,6 +154,8 @@ Singleton {
     property var trayItemOrder: []
     property var recentColors: []
     property bool showThirdPartyPlugins: false
+    property bool pluginBrowserInstalledFirst: false
+    property string pluginBrowserSortMode: "default"
     property string launchPrefix: ""
     property string lastBrightnessDevice: ""
     property var brightnessExponentialDevices: ({})
@@ -964,6 +966,20 @@ Singleton {
         saveSettings();
     }
 
+    function setPluginBrowserInstalledFirst(enabled) {
+        pluginBrowserInstalledFirst = enabled;
+        saveSettings();
+    }
+
+    function setPluginBrowserSortMode(mode) {
+        if (mode === "type" || mode === "contributor")
+            mode = "author";
+        if (mode !== "default" && mode !== "name" && mode !== "author" && mode !== "category")
+            mode = "default";
+        pluginBrowserSortMode = mode;
+        saveSettings();
+    }
+
     function setLaunchPrefix(prefix) {
         launchPrefix = prefix;
         saveSettings();

quickshell/Common/settings/SessionSpec.js

@@ -56,6 +56,8 @@ var SPEC = {
     trayItemOrder: { def: [] },
     recentColors: { def: [] },
     showThirdPartyPlugins: { def: false },
+    pluginBrowserInstalledFirst: { def: false },
+    pluginBrowserSortMode: { def: "default" },
     launchPrefix: { def: "" },
     lastBrightnessDevice: { def: "" },
 

quickshell/Modals/DankLauncherV2/Controller.qml

@@ -1721,11 +1721,15 @@ Item {
             return "";
         var idx = text.toLowerCase().indexOf(lowerQuery);
         if (idx === -1)
-            return text;
+            return _escapeRichText(text);
         var before = text.substring(0, idx);
         var match = text.substring(idx, idx + queryLen);
         var after = text.substring(idx + queryLen);
-        return '<span style="color:' + baseColor + '">' + before + '</span><span style="color:' + highlightColor + '; font-weight:600">' + match + '</span><span style="color:' + baseColor + '">' + after + '</span>';
+        return '<span style="color:' + baseColor + '">' + _escapeRichText(before) + '</span><span style="color:' + highlightColor + '; font-weight:600">' + _escapeRichText(match) + '</span><span style="color:' + baseColor + '">' + _escapeRichText(after) + '</span>';
+    }
+
+    function _escapeRichText(text) {
+        return String(text).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
     }
 
     function getCurrentSectionViewMode() {

quickshell/Modules/ControlCenter/Components/HeaderPane.qml

@@ -60,7 +60,7 @@ Rectangle {
             }
 
             Typography {
-                text: DgopService.uptime || I18n.tr("Unknown")
+                text: DgopService.uptime ? I18n.tr("up") + " " + DgopService.uptime.slice(3) : I18n.tr("Unknown")
                 style: Typography.Style.Caption
                 color: Theme.surfaceVariantText
             }

quickshell/Modules/DankDash/Overview/UserInfoCard.qml

@@ -99,7 +99,9 @@ Card {
                 }
 
                 StyledText {
-                    text: DgopService.shortUptime || I18n.tr("up")
+                    text: DgopService.shortUptime
+                        ? I18n.tr("up") + DgopService.shortUptime.slice(2)
+                        : I18n.tr("up")
                     font.pixelSize: Theme.fontSizeSmall
                     color: Qt.rgba(Theme.surfaceText.r, Theme.surfaceText.g, Theme.surfaceText.b, 0.7)
                     anchors.verticalCenter: parent.verticalCenter

quickshell/Modules/Notifications/Center/HistoryNotificationCard.qml

@@ -99,8 +99,9 @@ Rectangle {
         id: contentItem
 
         readonly property real expandedTextHeight: descriptionText.contentHeight
-        readonly property real twoLineHeight: descriptionText.font.pixelSize * 1.2 * 2
-        readonly property real extraHeight: (descriptionExpanded && expandedTextHeight > twoLineHeight + 2) ? (expandedTextHeight - twoLineHeight) : 0
+        readonly property real collapsedLineCount: compactMode ? 1 : 2
+        readonly property real collapsedLineHeight: descriptionText.font.pixelSize * 1.2 * collapsedLineCount
+        readonly property real extraHeight: (descriptionExpanded && expandedTextHeight > collapsedLineHeight + 2) ? (expandedTextHeight - collapsedLineHeight) : 0
 
         anchors.top: parent.top
         anchors.left: parent.left
@@ -229,6 +230,7 @@ Rectangle {
                     property bool hasMoreText: truncated
 
                     text: historyItem.htmlBody || historyItem.body || ""
+                    textFormat: Text.StyledText
                     color: Theme.surfaceVariantText
                     font.pixelSize: Theme.fontSizeSmall
                     width: parent.width

quickshell/Modules/Notifications/Center/NotificationCard.qml

@@ -395,6 +395,7 @@ Rectangle {
                     property bool hasMoreText: truncated
 
                     text: fullText
+                    textFormat: Text.StyledText
                     color: Theme.surfaceVariantText
                     font.pixelSize: Theme.fontSizeSmall
                     width: parent.width
@@ -560,9 +561,9 @@ Rectangle {
                         height: {
                             if (!messageExpanded)
                                 return expandedBaseHeight;
-                            const twoLineHeight = bodyText.font.pixelSize * 1.2 * 2;
-                            if (bodyText.implicitHeight > twoLineHeight + 2)
-                                return expandedBaseHeight + bodyText.implicitHeight - twoLineHeight;
+                            const collapsedBodyHeight = bodyText.collapsedLineHeight;
+                            if (bodyText.implicitHeight > collapsedBodyHeight + 2)
+                                return expandedBaseHeight + bodyText.implicitHeight - collapsedBodyHeight;
                             return expandedBaseHeight;
                         }
                         radius: Theme.cornerRadius
@@ -702,14 +703,17 @@ Rectangle {
 
                                     StyledText {
                                         id: bodyText
+                                        readonly property real collapsedLineCount: compactMode ? 1 : 2
+                                        readonly property real collapsedLineHeight: font.pixelSize * 1.2 * collapsedLineCount
                                         property bool hasMoreText: truncated
 
                                         text: modelData?.htmlBody || ""
+                                        textFormat: Text.StyledText
                                         color: Theme.surfaceVariantText
                                         font.pixelSize: Theme.fontSizeSmall
                                         width: parent.width
                                         elide: messageExpanded ? Text.ElideNone : Text.ElideRight
-                                        maximumLineCount: messageExpanded ? -1 : 2
+                                        maximumLineCount: messageExpanded ? -1 : collapsedLineCount
                                         wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                                         visible: text.length > 0
                                         linkColor: Theme.primary

quickshell/Modules/Notifications/Center/NotificationCenterPopout.qml

@@ -50,7 +50,7 @@ DankPopout {
         }
     }
 
-    popupWidth: 400
+    popupWidth: 400 + Theme.spacingL
     popupHeight: stablePopupHeight
     positioning: ""
     suspendShadowWhileResizing: false

quickshell/Modules/Notifications/Popup/NotificationPopup.qml

@@ -755,6 +755,7 @@ PanelWindow {
                 visible: false
                 width: Math.max(0, backgroundContainer.width - Theme.spacingL - (Theme.spacingL + Theme.notificationHoverRevealMargin) - popupIconSize - Theme.spacingM)
                 text: notificationData ? (notificationData.htmlBody || "") : ""
+                textFormat: Text.StyledText
                 font.pixelSize: Theme.fontSizeSmall
                 elide: Text.ElideNone
                 horizontalAlignment: Text.AlignLeft
@@ -912,6 +913,7 @@ PanelWindow {
                         property bool hasMoreText: truncated
 
                         text: notificationData ? (notificationData.htmlBody || "") : ""
+                        textFormat: Text.StyledText
                         color: Theme.surfaceVariantText
                         font.pixelSize: Theme.fontSizeSmall
                         width: parent.width

quickshell/Modules/Settings/PluginBrowser.qml

@@ -1,5 +1,6 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Layouts
 import Quickshell
 import qs.Common
 import qs.Modals.Common
@@ -20,9 +21,179 @@ FloatingWindow {
     parentWindow: parentModal
     property bool pendingInstallHandled: false
     property string typeFilter: ""
+    property string categoryFilter: "all"
+    property var categoryFilterOptions: []
+    property var availableLetters: []
+
+    readonly property bool activeCategorySort: normalizedSortMode(SessionData.pluginBrowserSortMode) === "category"
+    readonly property bool showCategoryFilters: activeCategorySort && categoryFilterOptions.length > 1
+    readonly property bool showLetterIndex: {
+        var mode = normalizedSortMode(SessionData.pluginBrowserSortMode);
+        return (mode === "name" || mode === "author") && availableLetters.length > 1;
+    }
+
+    readonly property var sortChipOptions: [
+        { id: "installed", label: I18n.tr("Installed", "plugin browser filter chip"), toggle: true },
+        { id: "default", label: I18n.tr("Default", "plugin browser sort option"), toggle: false },
+        { id: "name", label: I18n.tr("Name", "plugin browser sort option"), toggle: false },
+        { id: "author", label: I18n.tr("Contributor", "plugin browser sort option"), toggle: false },
+        { id: "category", label: I18n.tr("Category", "plugin browser sort option"), toggle: false }
+    ]
+
+    function normalizedSortMode(mode) {
+        if (mode === "type" || mode === "contributor")
+            return "author";
+        if (mode === "name" || mode === "author" || mode === "category")
+            return mode;
+        return "default";
+    }
+
+    function isSortChipSelected(chipId, toggle) {
+        if (toggle)
+            return SessionData.pluginBrowserInstalledFirst;
+        return normalizedSortMode(SessionData.pluginBrowserSortMode) === chipId;
+    }
+
+    function comparePluginName(a, b) {
+        var nameA = (a.name || "").toLowerCase();
+        var nameB = (b.name || "").toLowerCase();
+        if (nameA < nameB)
+            return -1;
+        if (nameA > nameB)
+            return 1;
+        return 0;
+    }
+
+    function comparePluginAuthor(a, b) {
+        var authorA = (a.author || "").toLowerCase() || "zzz";
+        var authorB = (b.author || "").toLowerCase() || "zzz";
+        if (authorA < authorB)
+            return -1;
+        if (authorA > authorB)
+            return 1;
+        return comparePluginName(a, b);
+    }
+
+    function comparePluginCategory(a, b) {
+        var catA = (a.category || "").toLowerCase() || "zzz";
+        var catB = (b.category || "").toLowerCase() || "zzz";
+        if (catA < catB)
+            return -1;
+        if (catA > catB)
+            return 1;
+        return comparePluginName(a, b);
+    }
+
+    function formatCategoryLabel(categoryKey) {
+        if (!categoryKey || categoryKey === "_uncategorized")
+            return I18n.tr("Uncategorized", "plugin browser category filter");
+        return categoryKey.charAt(0).toUpperCase() + categoryKey.slice(1);
+    }
+
+    function sortKeyForPlugin(plugin, mode) {
+        if (mode === "author")
+            return (plugin.author || "").trim();
+        if (mode === "category")
+            return formatCategoryLabel((plugin.category || "").toLowerCase() || "_uncategorized");
+        return (plugin.name || "").trim();
+    }
+
+    function buildCategoryFilterOptions(plugins) {
+        var counts = {};
+        for (var i = 0; i < plugins.length; i++) {
+            var cat = (plugins[i].category || "").toLowerCase();
+            if (!cat)
+                cat = "_uncategorized";
+            counts[cat] = (counts[cat] || 0) + 1;
+        }
+        var keys = Object.keys(counts).sort();
+        var options = [{
+            key: "all",
+            label: I18n.tr("All", "plugin browser category filter"),
+            count: plugins.length
+        }];
+        for (var j = 0; j < keys.length; j++) {
+            var key = keys[j];
+            options.push({
+                key: key,
+                label: formatCategoryLabel(key),
+                count: counts[key]
+            });
+        }
+        return options;
+    }
+
+    function categoryFilterDisplayLabel(option) {
+        return option.label + " (" + option.count + ")";
+    }
+
+    function categoryFilterLabelForKey(key) {
+        for (var i = 0; i < categoryFilterOptions.length; i++) {
+            if (categoryFilterOptions[i].key === key)
+                return categoryFilterDisplayLabel(categoryFilterOptions[i]);
+        }
+        return "";
+    }
+
+    function categoryFilterKeyForLabel(label) {
+        for (var i = 0; i < categoryFilterOptions.length; i++) {
+            if (categoryFilterDisplayLabel(categoryFilterOptions[i]) === label)
+                return categoryFilterOptions[i].key;
+        }
+        return "all";
+    }
+
+    function categoryFilterDropdownLabels() {
+        var labels = [];
+        for (var i = 0; i < categoryFilterOptions.length; i++)
+            labels.push(categoryFilterDisplayLabel(categoryFilterOptions[i]));
+        return labels;
+    }
+
+    function updateAvailableLetters(plugins) {
+        var mode = normalizedSortMode(SessionData.pluginBrowserSortMode);
+        if (mode !== "name" && mode !== "author") {
+            availableLetters = [];
+            return;
+        }
+        var letters = {};
+        for (var i = 0; i < plugins.length; i++) {
+            var key = sortKeyForPlugin(plugins[i], mode);
+            if (!key)
+                continue;
+            var letter = key.charAt(0).toUpperCase();
+            if (letter >= "A" && letter <= "Z")
+                letters[letter] = true;
+        }
+        availableLetters = Object.keys(letters).sort();
+    }
+
+    function refreshListLayout() {
+        if (!pluginBrowserList)
+            return;
+        pluginBrowserList.savedY = 0;
+        pluginBrowserList.cancelFlick();
+        pluginBrowserList.contentY = 0;
+        Qt.callLater(() => {
+            if (pluginBrowserList)
+                pluginBrowserList.forceLayout();
+        });
+    }
+
+    function scrollToLetter(letter) {
+        var mode = normalizedSortMode(SessionData.pluginBrowserSortMode);
+        for (var i = 0; i < filteredPlugins.length; i++) {
+            var key = sortKeyForPlugin(filteredPlugins[i], mode);
+            if (key && key.charAt(0).toUpperCase() === letter) {
+                pluginBrowserList.positionViewAtIndex(i, ListView.Beginning);
+                pluginBrowserList.savedY = pluginBrowserList.contentY;
+                return;
+            }
+        }
+    }
 
     function updateFilteredPlugins() {
-        var filtered = [];
+        var baseFiltered = [];
         var query = searchQuery ? searchQuery.toLowerCase() : "";
 
         for (var i = 0; i < allPlugins.length; i++) {
@@ -38,7 +209,7 @@ FloatingWindow {
             }
 
             if (query.length === 0) {
-                filtered.push(plugin);
+                baseFiltered.push(plugin);
                 continue;
             }
 
@@ -47,20 +218,58 @@ FloatingWindow {
             var author = plugin.author ? plugin.author.toLowerCase() : "";
 
             if (name.indexOf(query) !== -1 || description.indexOf(query) !== -1 || author.indexOf(query) !== -1)
-                filtered.push(plugin);
+                baseFiltered.push(plugin);
+        }
+
+        categoryFilterOptions = buildCategoryFilterOptions(baseFiltered);
+        if (categoryFilter !== "all") {
+            var filterStillValid = false;
+            for (var c = 0; c < categoryFilterOptions.length; c++) {
+                if (categoryFilterOptions[c].key === categoryFilter) {
+                    filterStillValid = true;
+                    break;
+                }
+            }
+            if (!filterStillValid)
+                categoryFilter = "all";
+        }
+
+        var filtered = baseFiltered.slice();
+        if (activeCategorySort && categoryFilter !== "all") {
+            filtered = filtered.filter(p => {
+                var cat = (p.category || "").toLowerCase();
+                if (!cat)
+                    cat = "_uncategorized";
+                return cat === categoryFilter;
+            });
         }
 
         filtered.sort((a, b) => {
+            if (SessionData.pluginBrowserInstalledFirst) {
+                var instA = a.installed || false;
+                var instB = b.installed || false;
+                if (instA !== instB)
+                    return instA ? -1 : 1;
+            }
+            var sortMode = normalizedSortMode(SessionData.pluginBrowserSortMode);
+            if (sortMode === "name")
+                return comparePluginName(a, b);
+            if (sortMode === "author")
+                return comparePluginAuthor(a, b);
+            if (sortMode === "category")
+                return comparePluginCategory(a, b);
             if (a.featured !== b.featured)
                 return a.featured ? -1 : 1;
             if (a.firstParty !== b.firstParty)
                 return a.firstParty ? -1 : 1;
-            return 0;
+            return comparePluginName(a, b);
         });
 
         filteredPlugins = filtered;
+        updateAvailableLetters(filtered);
         selectedIndex = -1;
         keyboardNavigationActive = false;
+        refreshListLayout();
     }
 
     function selectNext() {
@@ -355,11 +564,161 @@ FloatingWindow {
             }
 
             Item {
-                id: listArea
+                id: sortControlsRow
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.top: browserSearchField.bottom
                 anchors.topMargin: Theme.spacingM
+                height: sortControlsLayout.implicitHeight
+
+                RowLayout {
+                    id: sortControlsLayout
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    spacing: Theme.spacingS
+
+                    Repeater {
+                        model: root.sortChipOptions
+
+                        Rectangle {
+                            id: sortChip
+                            required property var modelData
+                            required property int index
+
+                            Layout.fillWidth: true
+                            Layout.preferredHeight: 32
+                            Layout.maximumHeight: 32
+                            property bool selected: root.isSortChipSelected(modelData.id, modelData.toggle)
+                            property bool hovered: chipMouseArea.containsMouse
+                            property bool pressed: chipMouseArea.pressed
+
+                            implicitWidth: chipContent.implicitWidth + Theme.spacingM * 2
+                            radius: height / 2
+                            color: selected ? Theme.primary : Theme.surfaceVariant
+
+                            Behavior on color {
+                                ColorAnimation {
+                                    duration: Theme.shortDuration
+                                    easing.type: Theme.standardEasing
+                                }
+                            }
+
+                            Rectangle {
+                                anchors.fill: parent
+                                radius: parent.radius
+                                color: {
+                                    if (pressed)
+                                        return sortChip.selected ? Theme.primaryPressed : Theme.surfaceTextHover;
+                                    if (hovered)
+                                        return sortChip.selected ? Theme.primaryHover : Theme.surfaceTextHover;
+                                    return "transparent";
+                                }
+
+                                Behavior on color {
+                                    ColorAnimation {
+                                        duration: Theme.shorterDuration
+                                        easing.type: Theme.standardEasing
+                                    }
+                                }
+                            }
+
+                            DankRipple {
+                                id: chipRipple
+                                cornerRadius: sortChip.radius
+                                rippleColor: sortChip.selected ? Theme.primaryText : Theme.surfaceVariantText
+                            }
+
+                            Row {
+                                id: chipContent
+                                anchors.centerIn: parent
+                                spacing: Theme.spacingXS
+
+                                DankIcon {
+                                    name: modelData.toggle ? "download_done" : "check"
+                                    size: 16
+                                    anchors.verticalCenter: parent.verticalCenter
+                                    color: Theme.primaryText
+                                    visible: sortChip.selected
+                                }
+
+                                StyledText {
+                                    text: modelData.label
+                                    font.pixelSize: Theme.fontSizeSmall
+                                    font.weight: sortChip.selected ? Font.Medium : Font.Normal
+                                    color: sortChip.selected ? Theme.primaryText : Theme.surfaceVariantText
+                                    anchors.verticalCenter: parent.verticalCenter
+                                }
+                            }
+
+                            MouseArea {
+                                id: chipMouseArea
+                                anchors.fill: parent
+                                hoverEnabled: true
+                                cursorShape: Qt.PointingHandCursor
+                                onPressed: mouse => chipRipple.trigger(mouse.x, mouse.y)
+                                onClicked: {
+                                    if (modelData.toggle) {
+                                        SessionData.setPluginBrowserInstalledFirst(!SessionData.pluginBrowserInstalledFirst);
+                                    } else {
+                                        if (modelData.id !== "category")
+                                            root.categoryFilter = "all";
+                                        SessionData.setPluginBrowserSortMode(modelData.id);
+                                    }
+                                    root.updateFilteredPlugins();
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            Item {
+                id: categoryFiltersRow
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.top: sortControlsRow.bottom
+                anchors.topMargin: root.showCategoryFilters ? Theme.spacingS : 0
+                height: root.showCategoryFilters ? 40 : 0
+                visible: root.showCategoryFilters
+                clip: true
+
+                RowLayout {
+                    anchors.fill: parent
+                    spacing: Theme.spacingS
+
+                    StyledText {
+                        id: categoryFilterLabel
+                        text: I18n.tr("Filter", "plugin browser category filter label")
+                        font.pixelSize: Theme.fontSizeSmall
+                        color: Theme.outline
+                        Layout.alignment: Qt.AlignVCenter
+                    }
+
+                    DankDropdown {
+                        id: categoryFilterDropdown
+                        Layout.fillWidth: true
+                        Layout.preferredHeight: 32
+                        compactMode: true
+                        dropdownWidth: Math.max(240, categoryFiltersRow.width - categoryFilterLabel.implicitWidth - Theme.spacingS * 3)
+                        currentValue: root.categoryFilterLabelForKey(root.categoryFilter)
+                        options: root.categoryFilterDropdownLabels()
+                        onValueChanged: value => {
+                            var nextKey = root.categoryFilterKeyForLabel(value);
+                            if (nextKey === root.categoryFilter)
+                                return;
+                            root.categoryFilter = nextKey;
+                            root.updateFilteredPlugins();
+                        }
+                    }
+                }
+            }
+
+            Item {
+                id: listArea
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.top: categoryFiltersRow.bottom
+                anchors.topMargin: Theme.spacingM
                 anchors.bottom: parent.bottom
                 anchors.bottomMargin: Theme.spacingM
 
@@ -401,17 +760,20 @@ FloatingWindow {
 
                     anchors.fill: parent
                     anchors.leftMargin: Theme.spacingM
-                    anchors.rightMargin: Theme.spacingM
+                    anchors.rightMargin: root.showLetterIndex ? Theme.spacingM + 18 : Theme.spacingM
                     anchors.topMargin: Theme.spacingS
                     anchors.bottomMargin: Theme.spacingS
                     spacing: Theme.spacingS
                     model: ScriptModel {
                         values: root.filteredPlugins
+                        objectProp: "id"
                     }
                     clip: true
                     visible: !root.isLoading
                     add: null
+                    remove: null
                     displaced: null
+                    move: null
 
                     ScrollBar.vertical: DankScrollbar {
                         id: browserScrollbar
@@ -675,13 +1037,13 @@ FloatingWindow {
                                 color: Theme.outline
                                 width: parent.width
                                 wrapMode: Text.WordWrap
-                                visible: modelData.description && modelData.description.length > 0
+                                visible: (modelData.description || "").length > 0
                             }
 
                             Flow {
                                 width: parent.width
                                 spacing: Theme.spacingXS
-                                visible: modelData.capabilities && modelData.capabilities.length > 0
+                                visible: (modelData.capabilities || []).length > 0
 
                                 Repeater {
                                     model: modelData.capabilities || []
@@ -708,6 +1070,43 @@ FloatingWindow {
                     }
                 }
 
+                Column {
+                    id: letterIndex
+                    anchors.right: parent.right
+                    anchors.top: pluginBrowserList.top
+                    anchors.bottom: pluginBrowserList.bottom
+                    anchors.rightMargin: Theme.spacingXS
+                    width: 16
+                    visible: root.showLetterIndex && !root.isLoading
+                    spacing: 0
+
+                    Repeater {
+                        model: root.availableLetters
+
+                        Item {
+                            required property string modelData
+                            width: letterIndex.width
+                            height: Math.max(12, letterIndex.height / Math.max(1, root.availableLetters.length))
+
+                            StyledText {
+                                anchors.centerIn: parent
+                                text: modelData
+                                font.pixelSize: 10
+                                font.weight: Font.Medium
+                                color: letterMouseArea.containsMouse ? Theme.primary : Theme.outline
+                            }
+
+                            MouseArea {
+                                id: letterMouseArea
+                                anchors.fill: parent
+                                hoverEnabled: true
+                                cursorShape: Qt.PointingHandCursor
+                                onClicked: root.scrollToLetter(modelData)
+                            }
+                        }
+                    }
+                }
+
                 StyledText {
                     anchors.centerIn: listArea
                     text: I18n.tr("No plugins found", "empty plugin list")

quickshell/Modules/Settings/TypographyMotionTab.qml

@@ -251,59 +251,59 @@ Item {
                     settingKey: "fontWeight"
                     text: I18n.tr("Font Weight")
                     description: I18n.tr("Select font weight for UI text")
-                    options: [I18n.tr("Thin"), I18n.tr("Extra Light"), I18n.tr("Light"), I18n.tr("Regular"), I18n.tr("Medium"), I18n.tr("Demi Bold"), I18n.tr("Bold"), I18n.tr("Extra Bold"), I18n.tr("Black")]
+                    options: [I18n.tr("Thin", "font weight"), I18n.tr("Extra Light", "font weight"), I18n.tr("Light", "font weight"), I18n.tr("Regular", "font weight"), I18n.tr("Medium", "font weight"), I18n.tr("Demi Bold", "font weight"), I18n.tr("Bold", "font weight"), I18n.tr("Extra Bold", "font weight"), I18n.tr("Black", "font weight")]
                     currentValue: {
                         switch (SettingsData.fontWeight) {
                         case Font.Thin:
-                            return I18n.tr("Thin");
+                            return I18n.tr("Thin", "font weight");
                         case Font.ExtraLight:
-                            return I18n.tr("Extra Light");
+                            return I18n.tr("Extra Light", "font weight");
                         case Font.Light:
-                            return I18n.tr("Light");
+                            return I18n.tr("Light", "font weight");
                         case Font.Normal:
-                            return I18n.tr("Regular");
+                            return I18n.tr("Regular", "font weight");
                         case Font.Medium:
-                            return I18n.tr("Medium");
+                            return I18n.tr("Medium", "font weight");
                         case Font.DemiBold:
-                            return I18n.tr("Demi Bold");
+                            return I18n.tr("Demi Bold", "font weight");
                         case Font.Bold:
-                            return I18n.tr("Bold");
+                            return I18n.tr("Bold", "font weight");
                         case Font.ExtraBold:
-                            return I18n.tr("Extra Bold");
+                            return I18n.tr("Extra Bold", "font weight");
                         case Font.Black:
-                            return I18n.tr("Black");
+                            return I18n.tr("Black", "font weight");
                         default:
-                            return I18n.tr("Regular");
+                            return I18n.tr("Regular", "font weight");
                         }
                     }
                     onValueChanged: value => {
                         var weight;
                         switch (value) {
-                        case I18n.tr("Thin"):
+                        case I18n.tr("Thin", "font weight"):
                             weight = Font.Thin;
                             break;
-                        case I18n.tr("Extra Light"):
+                        case I18n.tr("Extra Light", "font weight"):
                             weight = Font.ExtraLight;
                             break;
-                        case I18n.tr("Light"):
+                        case I18n.tr("Light", "font weight"):
                             weight = Font.Light;
                             break;
-                        case I18n.tr("Regular"):
+                        case I18n.tr("Regular", "font weight"):
                             weight = Font.Normal;
                             break;
-                        case I18n.tr("Medium"):
+                        case I18n.tr("Medium", "font weight"):
                             weight = Font.Medium;
                             break;
-                        case I18n.tr("Demi Bold"):
+                        case I18n.tr("Demi Bold", "font weight"):
                             weight = Font.DemiBold;
                             break;
-                        case I18n.tr("Bold"):
+                        case I18n.tr("Bold", "font weight"):
                             weight = Font.Bold;
                             break;
-                        case I18n.tr("Extra Bold"):
+                        case I18n.tr("Extra Bold", "font weight"):
                             weight = Font.ExtraBold;
                             break;
-                        case I18n.tr("Black"):
+                        case I18n.tr("Black", "font weight"):
                             weight = Font.Black;
                             break;
                         default:
@@ -347,7 +347,7 @@ Item {
                         buttonPadding: parent.width < 480 ? Theme.spacingS : Theme.spacingL
                         minButtonWidth: parent.width < 480 ? 64 : 96
                         textSize: parent.width < 480 ? Theme.fontSizeSmall : Theme.fontSizeMedium
-                        model: ["Native", "Qt", "Curve"]
+                        model: [I18n.tr("Native"), I18n.tr("Qt"), I18n.tr("Curve")]
                         selectionMode: "single"
                         currentIndex: {
                             switch (SettingsData.textRenderType) {
@@ -455,7 +455,7 @@ Item {
                         buttonPadding: parent.width < 480 ? Theme.spacingXS : Theme.spacingS
                         minButtonWidth: parent.width < 480 ? 40 : 56
                         textSize: parent.width < 480 ? Theme.fontSizeSmall : Theme.fontSizeMedium
-                        model: ["Default", "Low", "Normal", "High", "Very High"]
+                        model: [I18n.tr("Default"), I18n.tr("Low"), I18n.tr("Normal"), I18n.tr("High"), I18n.tr("Very High")]
                         selectionMode: "single"
                         currentIndex: SettingsData.textRenderQuality
                         onSelectionChanged: (index, selected) => {

quickshell/Modules/Settings/WidgetSelectionPopup.qml

@@ -22,6 +22,15 @@ FloatingWindow {
 
     signal widgetSelected(string widgetId, string targetSection)
 
+    function translateSection(section) {
+        switch (section.toLowerCase()) {
+        case "left":   return I18n.tr("Left Section");
+        case "center": return I18n.tr("Center Section");
+        case "right":  return I18n.tr("Right Section");
+        default:       return section;
+        }
+    }
+
     function updateFilteredWidgets() {
         if (!searchQuery || searchQuery.length === 0) {
             filteredWidgets = allWidgets.slice();
@@ -224,7 +233,7 @@ FloatingWindow {
                     }
 
                     StyledText {
-                        text: I18n.tr("Add Widget to %1 Section").arg(root.targetSection)
+                        text: I18n.tr("Add Widget to %1").arg(translateSection(root.targetSection))
                         font.pixelSize: Theme.fontSizeXLarge
                         color: Theme.surfaceText
                         font.weight: Font.Medium

quickshell/Widgets/StyledText.qml

@@ -59,6 +59,7 @@ Text {
     font.pixelSize: Appearance.fontSize.normal
     font.family: resolvedFontFamily
     font.weight: Theme.fontWeight
+    textFormat: Text.PlainText
     wrapMode: Text.WordWrap
     elide: Text.ElideRight
     verticalAlignment: Text.AlignVCenter