Fix reactivity, different settings structure, etc, etc.

PLUGINS/ExampleEmojiPlugin/EmojiWidget.qml

@@ -8,18 +8,13 @@ import qs.Modules.Plugins
 PluginComponent {
     id: root
 
-    property var pluginService: null
+    property var enabledEmojis: pluginData.emojis || ["😊", "😢", "❤️"]
+    property int cycleInterval: pluginData.cycleInterval || 3000
+    property int maxBarEmojis: pluginData.maxBarEmojis || 3
 
-    // Load settings from PluginService
-    property var enabledEmojis: pluginService ? pluginService.loadPluginData("exampleEmojiPlugin", "emojis", ["😊", "😢", "❤️"]) : ["😊", "😢", "❤️"]
-    property int cycleInterval: pluginService ? pluginService.loadPluginData("exampleEmojiPlugin", "cycleInterval", 3000) : 3000
-    property int maxBarEmojis: pluginService ? pluginService.loadPluginData("exampleEmojiPlugin", "maxBarEmojis", 3) : 3
-
-    // Current state for cycling through emojis
     property int currentIndex: 0
     property var displayedEmojis: []
 
-    // Timer to cycle through emojis at the configured interval
     Timer {
         interval: root.cycleInterval
         running: true
@@ -32,7 +27,6 @@ PluginComponent {
         }
     }
 
-    // Update the emojis shown in the bar when settings or index changes
     function updateDisplayedEmojis() {
         const maxToShow = Math.min(root.maxBarEmojis, root.enabledEmojis.length)
         let emojis = []
@@ -51,58 +45,44 @@ PluginComponent {
     onMaxBarEmojisChanged: updateDisplayedEmojis()
 
     horizontalBarPill: Component {
-        StyledRect {
-            width: emojiRow.implicitWidth + Theme.spacingM * 2
-            height: parent.widgetThickness
-            radius: Theme.cornerRadius
-            color: Theme.surfaceContainerHigh
+        Row {
+            id: emojiRow
+            spacing: Theme.spacingXS
 
-            Row {
-                id: emojiRow
-                anchors.centerIn: parent
-                spacing: Theme.spacingXS
-
-                Repeater {
-                    model: root.displayedEmojis
-                    StyledText {
-                        text: modelData
-                        font.pixelSize: Theme.fontSizeLarge
-                    }
+            Repeater {
+                model: root.displayedEmojis
+                StyledText {
+                    text: modelData
+                    font.pixelSize: Theme.fontSizeLarge
                 }
             }
         }
     }
 
     verticalBarPill: Component {
-        StyledRect {
-            width: parent.widgetThickness
-            height: emojiColumn.implicitHeight + Theme.spacingM * 2
-            radius: Theme.cornerRadius
-            color: Theme.surfaceContainerHigh
+        Column {
+            id: emojiColumn
+            spacing: Theme.spacingXS
 
-            Column {
-                id: emojiColumn
-                anchors.centerIn: parent
-                spacing: Theme.spacingXS
-
-                Repeater {
-                    model: root.displayedEmojis
-                    StyledText {
-                        text: modelData
-                        font.pixelSize: Theme.fontSizeMedium
-                        anchors.horizontalCenter: parent.horizontalCenter
-                    }
+            Repeater {
+                model: root.displayedEmojis
+                StyledText {
+                    text: modelData
+                    font.pixelSize: Theme.fontSizeMedium
+                    anchors.horizontalCenter: parent.horizontalCenter
                 }
             }
         }
     }
 
     popoutContent: Component {
-        Item {
-            width: parent.width
-            height: parent.height
+        PopoutComponent {
+            id: popoutColumn
+
+            headerText: "Emoji Picker"
+            detailsText: "Click an emoji to copy it to clipboard"
+            showCloseButton: true
 
-            // A grid of 120+ emojis for the user to pick from
             property var allEmojis: [
                 "😀", "😃", "😄", "😁", "😆", "😅", "🤣", "😂", "🙂", "🙃",
                 "😉", "😊", "😇", "🥰", "😍", "🤩", "😘", "😗", "😚", "😙",
@@ -119,59 +99,43 @@ PluginComponent {
                 "👌", "🤌", "🤏", "👈", "👉", "👆", "👇", "☝️", "✋", "🤚"
             ]
 
-            Column {
-                anchors.fill: parent
-                anchors.margins: Theme.spacingM
-                spacing: Theme.spacingM
+            Item {
+                width: parent.width
+                implicitHeight: root.popoutHeight - popoutColumn.headerHeight - popoutColumn.detailsHeight - Theme.spacingXL
 
-                StyledText {
-                    text: "Click an emoji to copy it!"
-                    font.pixelSize: Theme.fontSizeMedium
-                    font.weight: Font.Medium
-                    color: Theme.surfaceText
-                }
-
-                DankFlickable {
-                    width: parent.width
-                    height: parent.height - parent.spacing - 30
-                    contentWidth: emojiGrid.width
-                    contentHeight: emojiGrid.height
+                DankGridView {
+                    id: emojiGrid
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    width: Math.floor(parent.width / 50) * 50
+                    height: parent.height
                     clip: true
+                    cellWidth: 50
+                    cellHeight: 50
+                    model: popoutColumn.allEmojis
 
-                    Grid {
-                        id: emojiGrid
-                        width: parent.width - Theme.spacingM
-                        columns: 8
-                        spacing: Theme.spacingS
+                    delegate: StyledRect {
+                        width: 45
+                        height: 45
+                        radius: Theme.cornerRadius
+                        color: emojiMouseArea.containsMouse ? Theme.surfaceContainerHighest : Theme.surfaceContainerHigh
+                        border.width: 0
 
-                        Repeater {
-                            model: allEmojis
+                        StyledText {
+                            anchors.centerIn: parent
+                            text: modelData
+                            font.pixelSize: Theme.fontSizeXLarge
+                        }
 
-                            StyledRect {
-                                width: 45
-                                height: 45
-                                radius: Theme.cornerRadius
-                                color: emojiMouseArea.containsMouse ? Theme.surfaceContainerHighest : Theme.surfaceContainerHigh
-                                border.width: 0
+                        MouseArea {
+                            id: emojiMouseArea
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            cursorShape: Qt.PointingHandCursor
 
-                                StyledText {
-                                    anchors.centerIn: parent
-                                    text: modelData
-                                    font.pixelSize: Theme.fontSizeXLarge
-                                }
-
-                                MouseArea {
-                                    id: emojiMouseArea
-                                    anchors.fill: parent
-                                    hoverEnabled: true
-                                    cursorShape: Qt.PointingHandCursor
-
-                                    onClicked: {
-                                        Quickshell.execDetached(["sh", "-c", "echo -n '" + modelData + "' | wl-copy"])
-                                        ToastService.show("Copied " + modelData + " to clipboard", 2000)
-                                        root.closePopout()
-                                    }
-                                }
+                            onClicked: {
+                                Quickshell.execDetached(["sh", "-c", "echo -n '" + modelData + "' | wl-copy"])
+                                ToastService.showInfo("Copied " + modelData + " to clipboard")
+                                popoutColumn.closePopout()
                             }
                         }
                     }

PLUGINS/ExampleEmojiPlugin/README.md

@@ -1,6 +1,6 @@
 # Emoji Cycler Plugin
 
-An example DankMaterialShell plugin that displays cycling emojis in your bar with an emoji picker popout.
+An example dms plugin that displays cycling emojis in your bar with an emoji picker popout.
 
 ## Features
 

PLUGINS/ExampleEmojiPlugin/plugin.json

@@ -3,7 +3,7 @@
     "name": "Emoji Cycler",
     "description": "Display cycling emojis in your bar with a handy emoji picker popout",
     "version": "1.0.0",
-    "author": "DMS Plugin System",
+    "author": "AvengeMedia",
     "icon": "mood",
     "component": "./EmojiWidget.qml",
     "settings": "./EmojiSettings.qml",

PLUGINS/README.md

@@ -121,15 +121,21 @@ PluginComponent {
 
     // Define popout content (optional)
     popoutContent: Component {
-        Column {
-            width: parent.width
-            spacing: Theme.spacingM
-            padding: Theme.spacingM
+        PopoutComponent {
+            headerText: "My Plugin"
+            detailsText: "Optional description text goes here"
+            showCloseButton: true
 
-            StyledText {
-                text: "Popout Content"
-                font.pixelSize: Theme.fontSizeLarge
-                color: Theme.surfaceText
+            // Your popout content goes here
+            Column {
+                width: parent.width
+                spacing: Theme.spacingM
+
+                StyledText {
+                    text: "Popout Content"
+                    font.pixelSize: Theme.fontSizeLarge
+                    color: Theme.surfaceText
+                }
             }
         }
     }
@@ -160,6 +166,42 @@ The PluginComponent automatically handles:
 - Proper positioning and anchoring
 - Theme integration
 
+### PopoutComponent
+
+PopoutComponent provides a consistent header/content layout for plugin popouts:
+
+```qml
+import qs.Modules.Plugins
+
+PopoutComponent {
+    headerText: "Header Title"        // Main header text (bold, large)
+    detailsText: "Description text"   // Optional description (smaller, gray)
+    showCloseButton: true             // Show X button in top-right
+
+    // Access to exposed properties for dynamic sizing
+    readonly property int headerHeight    // Height of header area
+    readonly property int detailsHeight   // Height of description area
+
+    // Your content here - use parent.width for full width
+    // Calculate available height: root.popoutHeight - headerHeight - detailsHeight - spacing
+    DankGridView {
+        width: parent.width
+        height: parent.height
+        // ...
+    }
+}
+```
+
+**PopoutComponent Properties:**
+- `headerText`: Main header text (optional, hidden if empty)
+- `detailsText`: Description text below header (optional, hidden if empty)
+- `showCloseButton`: Show close button in header (default: false)
+- `closePopout`: Function to close popout (auto-injected by PluginPopout)
+- `headerHeight`: Readonly height of header (0 if not visible)
+- `detailsHeight`: Readonly height of description (0 if not visible)
+
+The component automatically handles spacing and layout. Content children are rendered below the description with proper padding.
+
 ### Settings Component
 
 Optional settings UI loaded inline in the PluginsTab accordion interface. Use the simplified settings API with auto-storage components: