nova-shell/shell/modules/content/MemoryContent.qml

import QtQuick
import ".." as M

Column {
    id: root

    required property int percent
    required property real usedGb
    required property real totalGb
    required property real availGb
    required property real cachedGb
    required property real buffersGb
    required property var processes
    required property color accentColor

    property bool active: true

    function _fmt(gb) {
        return gb >= 10 ? gb.toFixed(1) + "G" : gb.toFixed(2) + "G";
    }

    // Usage bar
    Item {
        width: root.width
        height: 14

        Item {
            id: memBar
            anchors.left: parent.left
            anchors.leftMargin: 12
            anchors.right: parent.right
            anchors.rightMargin: 12
            anchors.verticalCenter: parent.verticalCenter
            height: 6

            Rectangle {
                anchors.fill: parent
                color: M.Theme.base02
                radius: 3
            }

            // Cached (base0D, behind used)
            Rectangle {
                width: parent.width * Math.min(1, (root.usedGb + root.cachedGb) / Math.max(root.totalGb, 0.001))
                height: parent.height
                color: M.Theme.base0D
                opacity: 0.4
                radius: 3
                Behavior on width {
                    enabled: root.active
                    NumberAnimation {
                        duration: 200
                    }
                }
            }

            // Used (accentColor, on top)
            Rectangle {
                width: parent.width * Math.min(1, root.usedGb / Math.max(root.totalGb, 0.001))
                height: parent.height
                color: root.accentColor
                radius: 3
                Behavior on width {
                    enabled: root.active
                    NumberAnimation {
                        duration: 200
                    }
                }
            }
        }
    }

    // Memory history sparkline
    Canvas {
        id: memSparkline
        anchors.left: parent.left
        anchors.leftMargin: 12
        anchors.right: parent.right
        anchors.rightMargin: 12
        height: 18

        property var _hist: M.SystemStats.memHistory
        property color _col: root.accentColor

        on_HistChanged: if (root.active)
            requestPaint()
        on_ColChanged: if (root.active)
            requestPaint()

        onVisibleChanged: if (visible)
            requestPaint()

        onPaint: {
            const ctx = getContext("2d");
            if (!ctx)
                return;
            ctx.clearRect(0, 0, width, height);
            const d = _hist;
            if (!d.length)
                return;
            const bw = width / 30;
            ctx.fillStyle = Qt.rgba(_col.r, _col.g, _col.b, 0.15).toString();
            ctx.fillRect(0, 0, width, height);
            ctx.fillStyle = _col.toString();
            for (let i = 0; i < d.length; i++) {
                const h = Math.max(1, height * d[i] / 100);
                ctx.fillRect((30 - d.length + i) * bw, height - h, Math.max(1, bw - 0.5), h);
            }
        }
    }

    // Breakdown rows
    Item {
        width: root.width
        height: 18

        Text {
            anchors.left: parent.left
            anchors.leftMargin: 12
            anchors.verticalCenter: parent.verticalCenter
            text: "Used"
            color: M.Theme.base04
            font.pixelSize: M.Theme.fontSize - 2
            font.family: M.Theme.fontFamily
        }

        Text {
            anchors.right: parent.right
            anchors.rightMargin: 12
            anchors.verticalCenter: parent.verticalCenter
            text: root._fmt(root.usedGb)
            color: M.Theme.base05
            font.pixelSize: M.Theme.fontSize - 2
            font.family: M.Theme.fontFamily
        }
    }

    Item {
        width: root.width
        height: 18

        Text {
            anchors.left: parent.left
            anchors.leftMargin: 12
            anchors.verticalCenter: parent.verticalCenter
            text: "Cached"
            color: M.Theme.base04
            font.pixelSize: M.Theme.fontSize - 2
            font.family: M.Theme.fontFamily
        }

        Text {
            anchors.right: parent.right
            anchors.rightMargin: 12
            anchors.verticalCenter: parent.verticalCenter
            text: root._fmt(root.cachedGb)
            color: M.Theme.base05
            font.pixelSize: M.Theme.fontSize - 2
            font.family: M.Theme.fontFamily
        }
    }

    Item {
        width: root.width
        height: 18

        Text {
            anchors.left: parent.left
            anchors.leftMargin: 12
            anchors.verticalCenter: parent.verticalCenter
            text: "Available"
            color: M.Theme.base04
            font.pixelSize: M.Theme.fontSize - 2
            font.family: M.Theme.fontFamily
        }

        Text {
            anchors.right: parent.right
            anchors.rightMargin: 12
            anchors.verticalCenter: parent.verticalCenter
            text: root._fmt(root.availGb)
            color: M.Theme.base05
            font.pixelSize: M.Theme.fontSize - 2
            font.family: M.Theme.fontFamily
        }
    }

    Item {
        width: root.width
        height: 18

        Text {
            anchors.left: parent.left
            anchors.leftMargin: 12
            anchors.verticalCenter: parent.verticalCenter
            text: "Total"
            color: M.Theme.base04
            font.pixelSize: M.Theme.fontSize - 2
            font.family: M.Theme.fontFamily
        }

        Text {
            anchors.right: parent.right
            anchors.rightMargin: 12
            anchors.verticalCenter: parent.verticalCenter
            text: root._fmt(root.totalGb)
            color: M.Theme.base05
            font.pixelSize: M.Theme.fontSize - 2
            font.family: M.Theme.fontFamily
        }
    }

    // Process list separator
    Rectangle {
        width: root.width - 16
        height: 1
        anchors.horizontalCenter: parent.horizontalCenter
        color: M.Theme.base03
    }

    Item {
        width: root.width
        height: 18

        Text {
            anchors.left: parent.left
            anchors.leftMargin: 12
            anchors.verticalCenter: parent.verticalCenter
            text: "PROCESS"
            color: M.Theme.base03
            font.pixelSize: M.Theme.fontSize - 3
            font.family: M.Theme.fontFamily
            font.letterSpacing: 1
        }

        Text {
            anchors.right: parent.right
            anchors.rightMargin: 12
            anchors.verticalCenter: parent.verticalCenter
            text: "MEM"
            color: M.Theme.base03
            font.pixelSize: M.Theme.fontSize - 3
            font.family: M.Theme.fontFamily
            font.letterSpacing: 1
        }
    }

    // Top processes by memory
    Repeater {
        model: root.processes

        delegate: Item {
            required property var modelData
            width: root.width
            height: 20

            Text {
                anchors.left: parent.left
                anchors.leftMargin: 12
                anchors.verticalCenter: parent.verticalCenter
                text: modelData.cmd
                color: M.Theme.base05
                font.pixelSize: M.Theme.fontSize - 2
                font.family: M.Theme.fontFamily
                elide: Text.ElideRight
                width: parent.width - 80
            }

            Text {
                anchors.right: parent.right
                anchors.rightMargin: 12
                anchors.verticalCenter: parent.verticalCenter
                text: modelData.mem.toFixed(1) + "%"
                color: M.Theme.base04
                font.pixelSize: M.Theme.fontSize - 2
                font.family: M.Theme.fontFamily
                width: 36
                horizontalAlignment: Text.AlignRight
            }
        }
    }

    Item {
        width: 1
        height: 4
    }
}