switch hto monorepo structure

quickshell/Modules/Plugins/BasePill.qml

@@ -0,0 +1,88 @@
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Item {
+    id: root
+
+    property var axis: null
+    property string section: "center"
+    property var popoutTarget: null
+    property var parentScreen: null
+    property real widgetThickness: 30
+    property real barThickness: 48
+    property alias content: contentLoader.sourceComponent
+    property bool isVerticalOrientation: axis?.isVertical ?? false
+    property bool isFirst: false
+    property bool isLast: false
+    property real sectionSpacing: 0
+    property bool isLeftBarEdge: false
+    property bool isRightBarEdge: false
+    property bool isTopBarEdge: false
+    property bool isBottomBarEdge: false
+    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))
+    readonly property real visualWidth: isVerticalOrientation ? widgetThickness : (contentLoader.item ? (contentLoader.item.implicitWidth + horizontalPadding * 2) : 0)
+    readonly property real visualHeight: isVerticalOrientation ? (contentLoader.item ? (contentLoader.item.implicitHeight + horizontalPadding * 2) : 0) : widgetThickness
+    readonly property alias visualContent: visualContent
+    readonly property real barEdgeExtension: 1000
+    readonly property real gapExtension: sectionSpacing
+    readonly property real leftMargin: !isVerticalOrientation ? (isLeftBarEdge && isFirst ? barEdgeExtension : (isFirst ? gapExtension : gapExtension / 2)) : 0
+    readonly property real rightMargin: !isVerticalOrientation ? (isRightBarEdge && isLast ? barEdgeExtension : (isLast ? gapExtension : gapExtension / 2)) : 0
+    readonly property real topMargin: isVerticalOrientation ? (isTopBarEdge && isFirst ? barEdgeExtension : (isFirst ? gapExtension : gapExtension / 2)) : 0
+    readonly property real bottomMargin: isVerticalOrientation ? (isBottomBarEdge && isLast ? barEdgeExtension : (isLast ? gapExtension : gapExtension / 2)) : 0
+
+    signal clicked()
+    signal rightClicked()
+
+    width: isVerticalOrientation ? barThickness : visualWidth
+    height: isVerticalOrientation ? visualHeight : barThickness
+
+    Rectangle {
+        id: visualContent
+        width: root.visualWidth
+        height: root.visualHeight
+        anchors.centerIn: parent
+        radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
+        color: {
+            if (SettingsData.dankBarNoBackground) {
+                return "transparent"
+            }
+
+            const isHovered = mouseArea.containsMouse || (root.isHovered ?? false)
+            const baseColor = isHovered ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor
+            return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency)
+        }
+
+        Loader {
+            id: contentLoader
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+        z: -1
+        x: -root.leftMargin
+        y: -root.topMargin
+        width: root.width + root.leftMargin + root.rightMargin
+        height: root.height + root.topMargin + root.bottomMargin
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
+        onPressed: function (mouse) {
+            if (mouse.button === Qt.RightButton) {
+                root.rightClicked()
+                return
+            }
+            if (popoutTarget && popoutTarget.setTriggerPosition) {
+                const globalPos = root.visualContent.mapToGlobal(0, 0)
+                const currentScreen = parentScreen || Screen
+                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, root.visualWidth)
+                popoutTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen)
+            }
+            root.clicked()
+        }
+    }
+}

quickshell/Modules/Plugins/ColorSetting.qml

@@ -0,0 +1,103 @@
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Column {
+    id: root
+
+    required property string settingKey
+    required property string label
+    property string description: ""
+    property color defaultValue: Theme.primary
+    property color value: defaultValue
+
+    width: parent.width
+    spacing: Theme.spacingS
+
+    property bool isInitialized: false
+
+    function loadValue() {
+        const settings = findSettings()
+        if (settings && settings.pluginService) {
+            const loadedValue = settings.loadValue(settingKey, defaultValue)
+            value = loadedValue
+            isInitialized = true
+        }
+    }
+
+    Component.onCompleted: {
+        Qt.callLater(loadValue)
+    }
+
+    onValueChanged: {
+        if (!isInitialized) return
+        const settings = findSettings()
+        if (settings) {
+            settings.saveValue(settingKey, value)
+        }
+    }
+
+    function findSettings() {
+        let item = parent
+        while (item) {
+            if (item.saveValue !== undefined && item.loadValue !== undefined) {
+                return item
+            }
+            item = item.parent
+        }
+        return null
+    }
+
+    StyledText {
+        text: root.label
+        font.pixelSize: Theme.fontSizeMedium
+        font.weight: Font.Medium
+        color: Theme.surfaceText
+    }
+
+    StyledText {
+        text: root.description
+        font.pixelSize: Theme.fontSizeSmall
+        color: Theme.surfaceVariantText
+        width: parent.width
+        wrapMode: Text.WordWrap
+        visible: root.description !== ""
+    }
+
+    Row {
+        width: parent.width
+        spacing: Theme.spacingS
+
+        Rectangle {
+            width: 100
+            height: 36
+            radius: Theme.cornerRadius
+            color: root.value
+            border.color: Theme.outlineStrong
+            border.width: 2
+
+            MouseArea {
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+                onClicked: {
+                    if (PopoutService && PopoutService.colorPickerModal) {
+                        PopoutService.colorPickerModal.selectedColor = root.value
+                        PopoutService.colorPickerModal.pickerTitle = root.label
+                        PopoutService.colorPickerModal.onColorSelectedCallback = function(selectedColor) {
+                            root.value = selectedColor
+                        }
+                        PopoutService.colorPickerModal.show()
+                    }
+                }
+            }
+        }
+
+        StyledText {
+            text: root.value.toString()
+            font.pixelSize: Theme.fontSizeMedium
+            color: Theme.surfaceText
+            anchors.verticalCenter: parent.verticalCenter
+        }
+    }
+}

quickshell/Modules/Plugins/ListSetting.qml

@@ -0,0 +1,132 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Column {
+    id: root
+
+    required property string settingKey
+    required property string label
+    property string description: ""
+    property var defaultValue: []
+    property var items: defaultValue
+    property Component delegate: null
+
+    width: parent.width
+    spacing: Theme.spacingM
+
+    Component.onCompleted: {
+        const settings = findSettings()
+        if (settings) {
+            items = settings.loadValue(settingKey, defaultValue)
+        }
+    }
+
+    onItemsChanged: {
+        const settings = findSettings()
+        if (settings) {
+            settings.saveValue(settingKey, items)
+        }
+    }
+
+    function findSettings() {
+        let item = parent
+        while (item) {
+            if (item.saveValue !== undefined && item.loadValue !== undefined) {
+                return item
+            }
+            item = item.parent
+        }
+        return null
+    }
+
+    function addItem(item) {
+        items = items.concat([item])
+    }
+
+    function removeItem(index) {
+        const newItems = items.slice()
+        newItems.splice(index, 1)
+        items = newItems
+    }
+
+    StyledText {
+        text: root.label
+        font.pixelSize: Theme.fontSizeMedium
+        font.weight: Font.Medium
+        color: Theme.surfaceText
+    }
+
+    StyledText {
+        text: root.description
+        font.pixelSize: Theme.fontSizeSmall
+        color: Theme.surfaceVariantText
+        width: parent.width
+        wrapMode: Text.WordWrap
+        visible: root.description !== ""
+    }
+
+    Column {
+        width: parent.width
+        spacing: Theme.spacingS
+
+        Repeater {
+            model: root.items
+            delegate: root.delegate ? root.delegate : defaultDelegate
+        }
+
+        StyledText {
+            text: I18n.tr("No items added yet")
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.surfaceVariantText
+            visible: root.items.length === 0
+        }
+    }
+
+    Component {
+        id: defaultDelegate
+        StyledRect {
+            width: parent.width
+            height: 40
+            radius: Theme.cornerRadius
+            color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+            border.width: 0
+
+            StyledText {
+                anchors.left: parent.left
+                anchors.leftMargin: Theme.spacingM
+                anchors.verticalCenter: parent.verticalCenter
+                text: modelData
+                color: Theme.surfaceText
+            }
+
+            Rectangle {
+                anchors.right: parent.right
+                anchors.rightMargin: Theme.spacingM
+                anchors.verticalCenter: parent.verticalCenter
+                width: 60
+                height: 28
+                color: removeArea.containsMouse ? Theme.errorHover : Theme.error
+                radius: Theme.cornerRadius
+
+                StyledText {
+                    anchors.centerIn: parent
+                    text: I18n.tr("Remove")
+                    color: Theme.errorText
+                    font.pixelSize: Theme.fontSizeSmall
+                    font.weight: Font.Medium
+                }
+
+                MouseArea {
+                    id: removeArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                    onClicked: {
+                        root.removeItem(index)
+                    }
+                }
+            }
+        }
+    }
+}

quickshell/Modules/Plugins/ListSettingWithInput.qml

@@ -0,0 +1,256 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Column {
+    id: root
+
+    required property string settingKey
+    required property string label
+    property string description: ""
+    property var fields: []
+    property var defaultValue: []
+    property var items: defaultValue
+
+    width: parent.width
+    spacing: Theme.spacingM
+
+    property bool isLoading: false
+
+    Component.onCompleted: {
+        loadValue()
+    }
+
+    function loadValue() {
+        const settings = findSettings()
+        if (settings) {
+            isLoading = true
+            items = settings.loadValue(settingKey, defaultValue)
+            isLoading = false
+        }
+    }
+
+    onItemsChanged: {
+        if (isLoading) {
+            return
+        }
+        const settings = findSettings()
+        if (settings) {
+            settings.saveValue(settingKey, items)
+        }
+    }
+
+    function findSettings() {
+        let item = parent
+        while (item) {
+            if (item.saveValue !== undefined && item.loadValue !== undefined) {
+                return item
+            }
+            item = item.parent
+        }
+        return null
+    }
+
+    function addItem(item) {
+        items = items.concat([item])
+    }
+
+    function removeItem(index) {
+        const newItems = items.slice()
+        newItems.splice(index, 1)
+        items = newItems
+    }
+
+    StyledText {
+        text: root.label
+        font.pixelSize: Theme.fontSizeMedium
+        font.weight: Font.Medium
+        color: Theme.surfaceText
+    }
+
+    StyledText {
+        text: root.description
+        font.pixelSize: Theme.fontSizeSmall
+        color: Theme.surfaceVariantText
+        width: parent.width
+        wrapMode: Text.WordWrap
+        visible: root.description !== ""
+    }
+
+    Flow {
+        width: parent.width
+        spacing: Theme.spacingS
+
+        Repeater {
+            model: root.fields
+
+            StyledText {
+                text: modelData.label
+                font.pixelSize: Theme.fontSizeSmall
+                font.weight: Font.Medium
+                color: Theme.surfaceText
+                width: modelData.width || 200
+            }
+        }
+    }
+
+    Flow {
+        id: inputRow
+        width: parent.width
+        spacing: Theme.spacingS
+
+        property var inputFields: []
+
+        Repeater {
+            id: inputRepeater
+            model: root.fields
+
+            DankTextField {
+                width: modelData.width || 200
+                placeholderText: modelData.placeholder || ""
+
+                Component.onCompleted: {
+                    inputRow.inputFields.push(this)
+                }
+
+                Keys.onReturnPressed: {
+                    addButton.clicked()
+                }
+            }
+        }
+
+        DankButton {
+            id: addButton
+            width: 50
+            height: 36
+            text: I18n.tr("Add")
+
+            onClicked: {
+                let newItem = {}
+                let hasValue = false
+
+                for (let i = 0; i < root.fields.length; i++) {
+                    const field = root.fields[i]
+                    const input = inputRow.inputFields[i]
+                    const value = input.text.trim()
+
+                    if (value !== "") {
+                        hasValue = true
+                    }
+
+                    if (field.required && value === "") {
+                        return
+                    }
+
+                    newItem[field.id] = value || (field.default || "")
+                }
+
+                if (hasValue) {
+                    root.addItem(newItem)
+                    for (let i = 0; i < inputRow.inputFields.length; i++) {
+                        inputRow.inputFields[i].text = ""
+                    }
+                    if (inputRow.inputFields.length > 0) {
+                        inputRow.inputFields[0].forceActiveFocus()
+                    }
+                }
+            }
+        }
+    }
+
+    StyledText {
+        text: I18n.tr("Current Items")
+        font.pixelSize: Theme.fontSizeMedium
+        font.weight: Font.Medium
+        color: Theme.surfaceText
+        visible: root.items.length > 0
+    }
+
+    Column {
+        width: parent.width
+        spacing: Theme.spacingS
+
+        Repeater {
+            model: root.items
+
+            StyledRect {
+                width: parent.width
+                height: 40
+                radius: Theme.cornerRadius
+                color: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
+                border.width: 0
+
+                required property int index
+                required property var modelData
+
+                Row {
+                    id: itemRow
+                    anchors.left: parent.left
+                    anchors.leftMargin: Theme.spacingM
+                    anchors.verticalCenter: parent.verticalCenter
+                    spacing: Theme.spacingM
+
+                    property var itemData: parent.modelData
+
+                    Repeater {
+                        model: root.fields
+
+                        StyledText {
+                            required property int index
+                            required property var modelData
+
+                            text: {
+                                const field = modelData
+                                const item = itemRow.itemData
+                                if (!field || !field.id || !item) {
+                                    return ""
+                                }
+                                const value = item[field.id]
+                                return value || ""
+                            }
+                            color: Theme.surfaceText
+                            font.pixelSize: Theme.fontSizeMedium
+                            width: modelData ? (modelData.width || 200) : 200
+                            elide: Text.ElideRight
+                        }
+                    }
+                }
+
+                Rectangle {
+                    anchors.right: parent.right
+                    anchors.rightMargin: Theme.spacingM
+                    anchors.verticalCenter: parent.verticalCenter
+                    width: 60
+                    height: 28
+                    color: removeArea.containsMouse ? Theme.errorHover : Theme.error
+                    radius: Theme.cornerRadius
+
+                    StyledText {
+                        anchors.centerIn: parent
+                        text: I18n.tr("Remove")
+                        color: Theme.onError
+                        font.pixelSize: Theme.fontSizeSmall
+                        font.weight: Font.Medium
+                    }
+
+                    MouseArea {
+                        id: removeArea
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: {
+                            root.removeItem(index)
+                        }
+                    }
+                }
+            }
+        }
+
+        StyledText {
+            text: I18n.tr("No items added yet")
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.surfaceVariantText
+            visible: root.items.length === 0
+        }
+    }
+}

quickshell/Modules/Plugins/PluginComponent.qml

@@ -0,0 +1,189 @@
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Item {
+    id: root
+
+    property var axis: null
+    property string section: "center"
+    property var parentScreen: null
+    property real widgetThickness: 30
+    property real barThickness: 48
+    property string pluginId: ""
+    property var pluginService: null
+
+    property Component horizontalBarPill: null
+    property Component verticalBarPill: null
+    property Component popoutContent: null
+    property real popoutWidth: 400
+    property real popoutHeight: 0
+    property var pillClickAction: null
+    property var pillRightClickAction: null
+
+    property Component controlCenterWidget: null
+    property string ccWidgetIcon: ""
+    property string ccWidgetPrimaryText: ""
+    property string ccWidgetSecondaryText: ""
+    property bool ccWidgetIsActive: false
+    property bool ccWidgetIsToggle: true
+    property Component ccDetailContent: null
+    property real ccDetailHeight: 250
+
+    signal ccWidgetToggled()
+    signal ccWidgetExpanded()
+
+    property var pluginData: ({})
+    property var variants: []
+
+    readonly property bool isVertical: axis?.isVertical ?? false
+    readonly property bool hasHorizontalPill: horizontalBarPill !== null
+    readonly property bool hasVerticalPill: verticalBarPill !== null
+    readonly property bool hasPopout: popoutContent !== null
+
+    Component.onCompleted: {
+        loadPluginData()
+    }
+
+    onPluginServiceChanged: {
+        loadPluginData()
+    }
+
+    onPluginIdChanged: {
+        loadPluginData()
+    }
+
+    Connections {
+        target: pluginService
+        function onPluginDataChanged(changedPluginId) {
+            if (changedPluginId === pluginId) {
+                loadPluginData()
+            }
+        }
+    }
+
+    function loadPluginData() {
+        if (!pluginService || !pluginId) {
+            pluginData = {}
+            variants = []
+            return
+        }
+        pluginData = SettingsData.getPluginSettingsForPlugin(pluginId)
+        variants = pluginService.getPluginVariants(pluginId)
+    }
+
+    function createVariant(variantName, variantConfig) {
+        if (!pluginService || !pluginId) {
+            return null
+        }
+        return pluginService.createPluginVariant(pluginId, variantName, variantConfig)
+    }
+
+    function removeVariant(variantId) {
+        if (!pluginService || !pluginId) {
+            return
+        }
+        pluginService.removePluginVariant(pluginId, variantId)
+    }
+
+    function updateVariant(variantId, variantConfig) {
+        if (!pluginService || !pluginId) {
+            return
+        }
+        pluginService.updatePluginVariant(pluginId, variantId, variantConfig)
+    }
+
+    width: isVertical ? (hasVerticalPill ? verticalPill.width : 0) : (hasHorizontalPill ? horizontalPill.width : 0)
+    height: isVertical ? (hasVerticalPill ? verticalPill.height : 0) : (hasHorizontalPill ? horizontalPill.height : 0)
+
+    BasePill {
+        id: horizontalPill
+        visible: !isVertical && hasHorizontalPill
+        axis: root.axis
+        section: root.section
+        popoutTarget: hasPopout ? pluginPopout : null
+        parentScreen: root.parentScreen
+        widgetThickness: root.widgetThickness
+        barThickness: root.barThickness
+        content: root.horizontalBarPill
+        onClicked: {
+            if (pillClickAction) {
+                if (pillClickAction.length === 0) {
+                    pillClickAction()
+                } else {
+                    const globalPos = mapToGlobal(0, 0)
+                    const currentScreen = parentScreen || Screen
+                    const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width)
+                    pillClickAction(pos.x, pos.y, pos.width, section, currentScreen)
+                }
+            } else if (hasPopout) {
+                pluginPopout.toggle()
+            }
+        }
+        onRightClicked: {
+            if (pillRightClickAction) {
+                if (pillRightClickAction.length === 0) {
+                    pillRightClickAction()
+                } else {
+                    const globalPos = mapToGlobal(0, 0)
+                    const currentScreen = parentScreen || Screen
+                    const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width)
+                    pillRightClickAction(pos.x, pos.y, pos.width, section, currentScreen)
+                }
+            }
+        }
+    }
+
+    BasePill {
+        id: verticalPill
+        visible: isVertical && hasVerticalPill
+        axis: root.axis
+        section: root.section
+        popoutTarget: hasPopout ? pluginPopout : null
+        parentScreen: root.parentScreen
+        widgetThickness: root.widgetThickness
+        barThickness: root.barThickness
+        content: root.verticalBarPill
+        isVerticalOrientation: true
+        onClicked: {
+            if (pillClickAction) {
+                if (pillClickAction.length === 0) {
+                    pillClickAction()
+                } else {
+                    const globalPos = mapToGlobal(0, 0)
+                    const currentScreen = parentScreen || Screen
+                    const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width)
+                    pillClickAction(pos.x, pos.y, pos.width, section, currentScreen)
+                }
+            } else if (hasPopout) {
+                pluginPopout.toggle()
+            }
+        }
+        onRightClicked: {
+            if (pillRightClickAction) {
+                if (pillRightClickAction.length === 0) {
+                    pillRightClickAction()
+                } else {
+                    const globalPos = mapToGlobal(0, 0)
+                    const currentScreen = parentScreen || Screen
+                    const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width)
+                    pillRightClickAction(pos.x, pos.y, pos.width, section, currentScreen)
+                }
+            }
+        }
+    }
+
+    function closePopout() {
+        if (pluginPopout) {
+            pluginPopout.close()
+        }
+    }
+
+    PluginPopout {
+        id: pluginPopout
+        contentWidth: root.popoutWidth
+        contentHeight: root.popoutHeight
+        pluginContent: root.popoutContent
+    }
+}

quickshell/Modules/Plugins/PluginControlCenterWrapper.qml

@@ -0,0 +1,51 @@
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Item {
+    id: root
+
+    property string pluginId: ""
+    property var pluginInstance: null
+    property bool isCompoundPill: false
+    property bool isSmallToggle: false
+
+    readonly property bool hasDetail: pluginInstance?.ccDetailContent !== null
+    readonly property string iconName: pluginInstance?.ccWidgetIcon || "extension"
+    readonly property string primaryText: pluginInstance?.ccWidgetPrimaryText || "Plugin"
+    readonly property string secondaryText: pluginInstance?.ccWidgetSecondaryText || ""
+    readonly property bool isActive: pluginInstance?.ccWidgetIsActive || false
+    readonly property Component detailContent: pluginInstance?.ccDetailContent || null
+    readonly property real detailHeight: pluginInstance?.ccDetailHeight || 250
+
+    signal toggled()
+    signal expanded()
+
+    Component.onCompleted: {
+        if (pluginInstance) {
+            pluginInstance.ccWidgetToggled.connect(handleToggled)
+            pluginInstance.ccWidgetExpanded.connect(handleExpanded)
+        }
+    }
+
+    function handleToggled() {
+        toggled()
+    }
+
+    function handleExpanded() {
+        expanded()
+    }
+
+    function invokeToggle() {
+        if (pluginInstance) {
+            pluginInstance.ccWidgetToggled()
+        }
+    }
+
+    function invokeExpand() {
+        if (pluginInstance) {
+            pluginInstance.ccWidgetExpanded()
+        }
+    }
+}

quickshell/Modules/Plugins/PluginPopout.qml

@@ -0,0 +1,92 @@
+import QtQuick
+import Quickshell.Wayland
+import qs.Common
+import qs.Widgets
+
+DankPopout {
+    id: root
+
+    WlrLayershell.keyboardFocus: shouldBeVisible ? WlrKeyboardFocus.Exclusive : WlrKeyboardFocus.None 
+
+    property var triggerScreen: null
+    property Component pluginContent: null
+    property real contentWidth: 400
+    property real contentHeight: 0
+
+    function setTriggerPosition(x, y, width, section, screen) {
+        triggerX = x
+        triggerY = y
+        triggerWidth = width
+        triggerSection = section
+        triggerScreen = screen
+    }
+
+    popupWidth: contentWidth
+    popupHeight: contentHeight
+    screen: triggerScreen
+    shouldBeVisible: false
+    visible: shouldBeVisible
+
+    content: Component {
+        Rectangle {
+            id: popoutContainer
+
+            implicitHeight: popoutColumn.implicitHeight + Theme.spacingL * 2
+            color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
+            radius: Theme.cornerRadius
+            border.width: 0
+            antialiasing: true
+            smooth: true
+            focus: true
+
+            Component.onCompleted: {
+                if (root.shouldBeVisible) {
+                    forceActiveFocus()
+                }
+            }
+
+            Keys.onPressed: event => {
+                if (event.key === Qt.Key_Escape) {
+                    root.close()
+                    event.accepted = true
+                }
+            }
+
+            Connections {
+                target: root
+                function onShouldBeVisibleChanged() {
+                    if (root.shouldBeVisible) {
+                        Qt.callLater(() => {
+                            popoutContainer.forceActiveFocus()
+                        })
+                    }
+                }
+            }
+
+            Column {
+                id: popoutColumn
+                width: parent.width - Theme.spacingS * 2
+                x: Theme.spacingS
+                y: Theme.spacingS
+                spacing: Theme.spacingS
+
+                Loader {
+                    id: popoutContentLoader
+                    width: parent.width
+                    sourceComponent: root.pluginContent
+
+                    onLoaded: {
+                        if (item && "closePopout" in item) {
+                            item.closePopout = function() {
+                                root.close()
+                            }
+                        }
+                        if (root.contentHeight === 0 && item) {
+                            root.contentHeight = item.implicitHeight + Theme.spacingS * 2
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

quickshell/Modules/Plugins/PluginSettings.qml

@@ -0,0 +1,184 @@
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Item {
+    id: root
+
+    required property string pluginId
+    property var pluginService: null
+    default property list<QtObject> content
+
+    signal settingChanged()
+
+    property var variants: []
+    property alias variantsModel: variantsListModel
+
+    implicitHeight: hasPermission ? settingsColumn.implicitHeight : errorText.implicitHeight
+    height: implicitHeight
+
+    readonly property bool hasPermission: {
+        if (!pluginService || !pluginId) return true
+        const allPlugins = pluginService.availablePlugins
+        const plugin = allPlugins[pluginId]
+        if (!plugin) return true
+        const permissions = Array.isArray(plugin.permissions) ? plugin.permissions : []
+        return permissions.indexOf("settings_write") !== -1
+    }
+
+    Component.onCompleted: {
+        loadVariants()
+    }
+
+    onPluginServiceChanged: {
+        if (pluginService) {
+            loadVariants()
+            for (let i = 0; i < content.length; i++) {
+                const child = content[i]
+                if (child.loadValue) {
+                    child.loadValue()
+                }
+            }
+        }
+    }
+
+    onContentChanged: {
+        for (let i = 0; i < content.length; i++) {
+            const item = content[i]
+            if (item instanceof Item) {
+                item.parent = settingsColumn
+            }
+        }
+    }
+
+    Connections {
+        target: pluginService
+        function onPluginDataChanged(changedPluginId) {
+            if (changedPluginId === pluginId) {
+                loadVariants()
+            }
+        }
+    }
+
+    function loadVariants() {
+        if (!pluginService || !pluginId) {
+            variants = []
+            return
+        }
+        variants = pluginService.getPluginVariants(pluginId)
+        syncVariantsToModel()
+    }
+
+    function syncVariantsToModel() {
+        variantsListModel.clear()
+        for (let i = 0; i < variants.length; i++) {
+            variantsListModel.append(variants[i])
+        }
+    }
+
+    onVariantsChanged: {
+        syncVariantsToModel()
+    }
+
+    ListModel {
+        id: variantsListModel
+    }
+
+    function createVariant(variantName, variantConfig) {
+        if (!pluginService || !pluginId) {
+            return null
+        }
+        return pluginService.createPluginVariant(pluginId, variantName, variantConfig)
+    }
+
+    function removeVariant(variantId) {
+        if (!pluginService || !pluginId) {
+            return
+        }
+        pluginService.removePluginVariant(pluginId, variantId)
+    }
+
+    function updateVariant(variantId, variantConfig) {
+        if (!pluginService || !pluginId) {
+            return
+        }
+        pluginService.updatePluginVariant(pluginId, variantId, variantConfig)
+    }
+
+    function saveValue(key, value) {
+        if (!pluginService) {
+            return
+        }
+        if (!hasPermission) {
+            console.warn("PluginSettings: Plugin", pluginId, "does not have settings_write permission")
+            return
+        }
+        if (pluginService.savePluginData) {
+            pluginService.savePluginData(pluginId, key, value)
+            settingChanged()
+        }
+    }
+
+    function loadValue(key, defaultValue) {
+        if (pluginService && pluginService.loadPluginData) {
+            return pluginService.loadPluginData(pluginId, key, defaultValue)
+        }
+        return defaultValue
+    }
+
+    function findFlickable(item) {
+        var current = item?.parent
+        while (current) {
+            if (current.contentY !== undefined && current.contentHeight !== undefined) {
+                return current
+            }
+            current = current.parent
+        }
+        return null
+    }
+
+    function ensureItemVisible(item) {
+        if (!item) return
+
+        var flickable = findFlickable(root)
+        if (!flickable) return
+
+        var itemGlobalY = item.mapToItem(null, 0, 0).y
+        var itemHeight = item.height
+        var flickableGlobalY = flickable.mapToItem(null, 0, 0).y
+        var viewportHeight = flickable.height
+
+        var itemRelativeY = itemGlobalY - flickableGlobalY
+        var viewportTop = 0
+        var viewportBottom = viewportHeight
+
+        if (itemRelativeY < viewportTop) {
+            flickable.contentY = Math.max(0, flickable.contentY - (viewportTop - itemRelativeY) - Theme.spacingL)
+        } else if (itemRelativeY + itemHeight > viewportBottom) {
+            flickable.contentY = Math.min(
+                flickable.contentHeight - viewportHeight,
+                flickable.contentY + (itemRelativeY + itemHeight - viewportBottom) + Theme.spacingL
+            )
+        }
+    }
+
+    StyledText {
+        id: errorText
+        visible: pluginService && !root.hasPermission
+        anchors.fill: parent
+        text: I18n.tr("This plugin does not have 'settings_write' permission.\n\nAdd \"permissions\": [\"settings_read\", \"settings_write\"] to plugin.json")
+        color: Theme.error
+        font.pixelSize: Theme.fontSizeMedium
+        wrapMode: Text.WordWrap
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    Column {
+        id: settingsColumn
+        visible: root.hasPermission
+        width: parent.width
+        spacing: Theme.spacingM
+    }
+}

quickshell/Modules/Plugins/PopoutComponent.qml

@@ -0,0 +1,76 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Column {
+    id: root
+
+    property string headerText: ""
+    property string detailsText: ""
+    property bool showCloseButton: false
+    property var closePopout: null
+
+    readonly property int headerHeight: popoutHeader.visible ? popoutHeader.height : 0
+    readonly property int detailsHeight: popoutDetails.visible ? popoutDetails.implicitHeight : 0
+
+    spacing: 0
+
+    Item {
+        id: popoutHeader
+        width: parent.width
+        height: 40
+        visible: headerText.length > 0
+
+        StyledText {
+            anchors.left: parent.left
+            anchors.leftMargin: Theme.spacingS
+            anchors.verticalCenter: parent.verticalCenter
+            text: root.headerText
+            font.pixelSize: Theme.fontSizeLarge + 4
+            font.weight: Font.Bold
+            color: Theme.surfaceText
+        }
+
+        Rectangle {
+            id: closeButton
+            width: 32
+            height: 32
+            radius: 16
+            anchors.right: parent.right
+            anchors.verticalCenter: parent.verticalCenter
+            color: closeArea.containsMouse ? Theme.errorHover : "transparent"
+            visible: root.showCloseButton
+
+            DankIcon {
+                anchors.centerIn: parent
+                name: "close"
+                size: Theme.iconSize - 4
+                color: closeArea.containsMouse ? Theme.error : Theme.surfaceText
+            }
+
+            MouseArea {
+                id: closeArea
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onPressed: {
+                    if (root.closePopout) {
+                        root.closePopout()
+                    }
+                }
+            }
+        }
+    }
+
+    StyledText {
+        id: popoutDetails
+        width: parent.width
+        leftPadding: Theme.spacingS
+        bottomPadding: Theme.spacingS
+        text: root.detailsText
+        font.pixelSize: Theme.fontSizeMedium
+        color: Theme.surfaceVariantText
+        visible: detailsText.length > 0
+        wrapMode: Text.WordWrap
+    }
+}

quickshell/Modules/Plugins/SelectionSetting.qml

@@ -0,0 +1,91 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Column {
+    id: root
+
+    required property string settingKey
+    required property string label
+    property string description: ""
+    required property var options
+    property string defaultValue: ""
+    property string value: defaultValue
+
+    width: parent.width
+    spacing: Theme.spacingS
+
+    function loadValue() {
+        const settings = findSettings()
+        if (settings && settings.pluginService) {
+            value = settings.loadValue(settingKey, defaultValue)
+        }
+    }
+
+    Component.onCompleted: {
+        loadValue()
+    }
+
+    readonly property var optionLabels: {
+        const labels = []
+        for (let i = 0; i < options.length; i++) {
+            labels.push(options[i].label || options[i])
+        }
+        return labels
+    }
+
+    readonly property var valueToLabel: {
+        const map = {}
+        for (let i = 0; i < options.length; i++) {
+            const opt = options[i]
+            if (typeof opt === 'object') {
+                map[opt.value] = opt.label
+            } else {
+                map[opt] = opt
+            }
+        }
+        return map
+    }
+
+    readonly property var labelToValue: {
+        const map = {}
+        for (let i = 0; i < options.length; i++) {
+            const opt = options[i]
+            if (typeof opt === 'object') {
+                map[opt.label] = opt.value
+            } else {
+                map[opt] = opt
+            }
+        }
+        return map
+    }
+
+    onValueChanged: {
+        const settings = findSettings()
+        if (settings) {
+            settings.saveValue(settingKey, value)
+        }
+    }
+
+    function findSettings() {
+        let item = parent
+        while (item) {
+            if (item.saveValue !== undefined && item.loadValue !== undefined) {
+                return item
+            }
+            item = item.parent
+        }
+        return null
+    }
+
+    DankDropdown {
+        width: parent.width
+        text: root.label
+        description: root.description
+        currentValue: root.valueToLabel[root.value] || root.value
+        options: root.optionLabels
+        onValueChanged: newValue => {
+            root.value = root.labelToValue[newValue] || newValue
+        }
+    }
+}

quickshell/Modules/Plugins/SliderSetting.qml

@@ -0,0 +1,81 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Column {
+    id: root
+
+    required property string settingKey
+    required property string label
+    property string description: ""
+    property int defaultValue: 0
+    property int value: defaultValue
+    property int minimum: 0
+    property int maximum: 100
+    property string leftIcon: ""
+    property string rightIcon: ""
+    property string unit: ""
+
+    width: parent.width
+    spacing: Theme.spacingS
+
+    function loadValue() {
+        const settings = findSettings()
+        if (settings && settings.pluginService) {
+            value = settings.loadValue(settingKey, defaultValue)
+        }
+    }
+
+    Component.onCompleted: {
+        loadValue()
+    }
+
+    onValueChanged: {
+        const settings = findSettings()
+        if (settings) {
+            settings.saveValue(settingKey, value)
+        }
+    }
+
+    function findSettings() {
+        let item = parent
+        while (item) {
+            if (item.saveValue !== undefined && item.loadValue !== undefined) {
+                return item
+            }
+            item = item.parent
+        }
+        return null
+    }
+
+    StyledText {
+        text: root.label
+        font.pixelSize: Theme.fontSizeMedium
+        font.weight: Font.Medium
+        color: Theme.surfaceText
+    }
+
+    StyledText {
+        text: root.description
+        font.pixelSize: Theme.fontSizeSmall
+        color: Theme.surfaceVariantText
+        width: parent.width
+        wrapMode: Text.WordWrap
+        visible: root.description !== ""
+    }
+
+    DankSlider {
+        width: parent.width
+        value: root.value
+        minimum: root.minimum
+        maximum: root.maximum
+        leftIcon: root.leftIcon
+        rightIcon: root.rightIcon
+        unit: root.unit
+        wheelEnabled: false
+        thumbOutlineColor: Theme.withAlpha(Theme.surfaceContainerHighest, Theme.popupTransparency)
+        onSliderValueChanged: newValue => {
+            root.value = newValue
+        }
+    }
+}

quickshell/Modules/Plugins/StringSetting.qml

@@ -0,0 +1,85 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Column {
+    id: root
+
+    required property string settingKey
+    required property string label
+    property string description: ""
+    property string placeholder: ""
+    property string defaultValue: ""
+    property string value: defaultValue
+
+    width: parent.width
+    spacing: Theme.spacingS
+
+    property bool isInitialized: false
+
+    function loadValue() {
+        const settings = findSettings()
+        if (settings && settings.pluginService) {
+            const loadedValue = settings.loadValue(settingKey, defaultValue)
+            value = loadedValue
+            textField.text = loadedValue
+            isInitialized = true
+        }
+    }
+
+    Component.onCompleted: {
+        Qt.callLater(loadValue)
+    }
+
+    onValueChanged: {
+        if (!isInitialized) return
+        const settings = findSettings()
+        if (settings) {
+            settings.saveValue(settingKey, value)
+        }
+    }
+
+    function findSettings() {
+        let item = parent
+        while (item) {
+            if (item.saveValue !== undefined && item.loadValue !== undefined) {
+                return item
+            }
+            item = item.parent
+        }
+        return null
+    }
+
+    StyledText {
+        text: root.label
+        font.pixelSize: Theme.fontSizeMedium
+        font.weight: Font.Medium
+        color: Theme.surfaceText
+    }
+
+    StyledText {
+        text: root.description
+        font.pixelSize: Theme.fontSizeSmall
+        color: Theme.surfaceVariantText
+        width: parent.width
+        wrapMode: Text.WordWrap
+        visible: root.description !== ""
+    }
+
+    DankTextField {
+        id: textField
+        width: parent.width
+        placeholderText: root.placeholder
+        onTextEdited: {
+            root.value = text
+        }
+        onEditingFinished: {
+            root.value = text
+        }
+        onActiveFocusChanged: {
+            if (!activeFocus) {
+                root.value = text
+            }
+        }
+    }
+}

quickshell/Modules/Plugins/ToggleSetting.qml

@@ -0,0 +1,81 @@
+import QtQuick
+import qs.Common
+import qs.Widgets
+
+Row {
+    id: root
+
+    required property string settingKey
+    required property string label
+    property string description: ""
+    property bool defaultValue: false
+    property bool value: defaultValue
+
+    width: parent.width
+    spacing: Theme.spacingM
+
+    property bool isInitialized: false
+
+    function loadValue() {
+        const settings = findSettings()
+        if (settings && settings.pluginService) {
+            const loadedValue = settings.loadValue(settingKey, defaultValue)
+            value = loadedValue
+            isInitialized = true
+        }
+    }
+
+    Component.onCompleted: {
+        Qt.callLater(loadValue)
+    }
+
+    onValueChanged: {
+        if (!isInitialized) return
+        const settings = findSettings()
+        if (settings) {
+            settings.saveValue(settingKey, value)
+        }
+    }
+
+    function findSettings() {
+        let item = parent
+        while (item) {
+            if (item.saveValue !== undefined && item.loadValue !== undefined) {
+                return item
+            }
+            item = item.parent
+        }
+        return null
+    }
+
+    Column {
+        width: parent.width - toggle.width - Theme.spacingM
+        spacing: Theme.spacingXS
+        anchors.verticalCenter: parent.verticalCenter
+
+        StyledText {
+            text: root.label
+            font.pixelSize: Theme.fontSizeLarge
+            font.weight: Font.Medium
+            color: Theme.surfaceText
+        }
+
+        StyledText {
+            text: root.description
+            font.pixelSize: Theme.fontSizeSmall
+            color: Theme.surfaceVariantText
+            width: parent.width
+            wrapMode: Text.WordWrap
+            visible: root.description !== ""
+        }
+    }
+
+    DankToggle {
+        id: toggle
+        anchors.verticalCenter: parent.verticalCenter
+        checked: root.value
+        onToggled: isChecked => {
+            root.value = isChecked
+        }
+    }
+}