Initial commit

remove syncthing folder

bar/popops: fix menu window anims and positioning

bar/popops: change anims a little and add dropshadow

Update README.md

widgets/coloredicon: move to colorization, looks worse but..., yea

bar/popops: make popup window dissapear on menu close

README: add todo list, and brief desc

Update README.md

Update README.md

Update README.md

bar/systray: issue recreate on interact

bar/systray: hide popup on interact

bar/systray: add arrow for entries with children

bar/battery: start of battery widget

wallpaper/matugen: add foot template

extra sizing conditions for sys tray

bar/systray: add some more margin to text

update settings schema

bar/workspaces: filter by monitor, switch to scriptmodel

settings: fix settings lol

bar/systray: fix right item

feat: screenshot tool

clipboard one day...

feat: init lockscreen

mpris: add ipc handler for multimedia keys

mpris stuff

save progress

put shell in subdir, and add nix package

move readme back woops

bar/volume: make tool bar smaller

greeter: init greeter

greeter: fixed resource links

readme: update checklist

progress maybe, maybe not

fix: fixed screenshot tool not working

fix: bar layout issues

progress save

progress update

track styled popup

still broken but getting there

still broken but getting there

fix: gitignore qmlls.ini

fix: remove qmlls.ini

progress save

new popup system

new popup system

new popup system

more work on popups

fix: mask issues on popups

update readme

shell/widgets/ColoredIcon.qml

@@ -0,0 +1,32 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Effects
+import Quickshell.Widgets
+import ".."
+
+Item {
+    id: root
+    required property var source
+    property var implicitSize: 0
+    property var color: "white"
+    readonly property real actualSize: Math.min(root.width, root.height)
+
+    implicitWidth: implicitSize
+    implicitHeight: implicitSize
+
+    IconImage {
+        anchors.fill: parent
+        source: root.source
+        layer.enabled: true
+        layer.effect: MultiEffect {
+            colorization: 1
+            colorizationColor: root.color
+        }
+    }
+
+    Rectangle {
+        color: root.color
+        anchors.fill: parent
+    }
+}

shell/widgets/FontIcon.qml

@@ -0,0 +1,34 @@
+import QtQuick
+import ".."
+
+Text {
+    id: textIcon
+
+    property real fill: 0
+
+    renderType: Text.NativeRendering
+    textFormat: Text.PlainText
+    horizontalAlignment: Text.AlignHCenter
+    verticalAlignment: Text.AlignVCenter
+
+    font {
+        family: "Material Symbols Outlined"
+        pointSize: Math.max(parent.height * 0.50, 11)
+
+        variableAxes: {
+            "FILL": fill
+        }
+    }
+
+    Behavior on fill {
+        NumberAnimation {
+            duration: 200
+        }
+    }
+
+    Behavior on color {
+        ColorAnimation {
+            duration: 200
+        }
+    }
+}

shell/widgets/FontIconButton.qml

@@ -0,0 +1,48 @@
+import QtQuick
+import ".."
+
+MaterialButton {
+    id: root
+
+    property real implicitSize
+    property string iconName: ""
+    property string activeIconColor: ShellSettings.colors["inverse_primary"]
+    property string inactiveIconColor: ShellSettings.colors["inverse_surface"]
+
+    implicitWidth: this.implicitSize
+    implicitHeight: this.implicitSize
+
+    Text {
+        id: textIcon
+        text: root.iconName
+        renderType: Text.NativeRendering
+        textFormat: Text.PlainText
+        color: root.containsMouse || root.checked ? root.activeIconColor : root.inactiveIconColor 
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        anchors.fill: parent
+
+        font {
+            family: "Material Symbols Outlined"
+            pointSize: Math.max(parent.height * 0.60, 11)
+
+            variableAxes: {
+                "FILL": fill
+            }
+        }
+
+        property real fill: !root.containsMouse && !root.checked ? 0 : 1
+
+        Behavior on fill {
+            NumberAnimation {
+                duration: 200
+            }
+        }
+
+        Behavior on color {
+            ColorAnimation {
+                duration: 200
+            }
+        }
+    }
+}

shell/widgets/IconButton.qml

@@ -0,0 +1,51 @@
+import QtQuick
+import Quickshell.Widgets
+import qs 
+
+Item {
+    id: root
+    property string source
+    property var implicitSize: 24
+    property var padding: 0
+    property var radius: 20
+    property var activeRectangle: true
+    property var color: ShellSettings.colors.inactive_translucent
+    property var activeColor: ShellSettings.colors.active_translucent
+    signal clicked
+
+    implicitWidth: implicitSize
+    implicitHeight: implicitSize
+
+    Rectangle {
+        id: iconBackground
+        color: ShellSettings.colors.active_translucent
+        radius: root.radius
+        visible: iconButton.containsMouse && root.activeRectangle
+        anchors.fill: parent
+    }
+
+    // Figure out a way to color images better 
+    IconImage {
+        id: iconImage
+        source: root.source
+        visible: true 
+        // color: {
+        //     if (!activeRectangle)
+        //         return root.color;
+        //
+        //     return iconButton.containsMouse ? root.activeColor : root.color;
+        // }
+
+        anchors {
+            fill: parent
+            margins: root.padding
+        }
+    }
+
+    MouseArea {
+        id: iconButton
+        hoverEnabled: true
+        anchors.fill: parent
+        onPressed: root.clicked()
+    }
+}

shell/widgets/MaterialSlider.qml

@@ -0,0 +1,105 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Controls
+import Qt5Compat.GraphicalEffects
+import ".."
+
+Slider {
+    id: root
+
+    value: 0.5
+    from: 0.0
+    to: 1.0
+
+    property string text
+    property Component icon
+
+    background: Rectangle {
+        id: background
+        implicitWidth: parent.width
+        implicitHeight: parent.height
+        width: root.availableWidth
+        height: implicitHeight
+        x: root.leftPadding
+        y: root.topPadding + root.availableHeight / 2 - height / 2
+        z: 0
+        color: ShellSettings.colors["surface_container_highest"]
+        radius: height / 2
+
+        layer.enabled: true
+        layer.effect: OpacityMask {
+            maskSource: Rectangle {
+                width: background.implicitWidth
+                height: background.implicitHeight
+                radius: background.radius
+                color: "black"
+            }
+        }
+
+        Rectangle {
+            id: visualPos
+            width: root.visualPosition * (root.availableWidth - root.height) + (root.height / 2)
+            height: parent.height
+            color: ShellSettings.colors["primary"]
+        }
+
+        Text {
+            id: sliderText
+            text: root.text
+            visible: text !== ""
+            color: ShellSettings.colors["inverse_primary"]
+            horizontalAlignment: Text.AlignLeft
+            verticalAlignment: Text.AlignVCenter
+            elide: Text.ElideRight
+
+            font {
+                pointSize: Math.max(handle.implicitHeight * 0.35, 11)
+            }
+
+            anchors {
+                top: parent.top
+                bottom: parent.bottom
+                left: {
+                    let visualWidth = (root.visualPosition * root.availableWidth);
+                    if ((visualWidth / root.availableWidth) < 0.5)
+                        return visualPos.right;
+                    else
+                        return parent.left;
+                }
+                right: {
+                    let visualWidth = (root.visualPosition * root.availableWidth);
+                    if ((visualWidth / root.availableWidth) > 0.5)
+                        return visualPos.right;
+                    else
+                        return parent.right;
+                }
+
+                leftMargin: 20
+                rightMargin: 20
+            }
+        }
+    }
+
+    handle: Rectangle {
+        id: handle
+        color: ShellSettings.colors["primary"]
+        implicitWidth: root.height
+        implicitHeight: root.height
+        radius: width / 2
+
+        x: root.leftPadding + root.visualPosition * (root.availableWidth - width)
+        y: root.topPadding + root.availableHeight / 2 - height / 2
+        // icon maybe
+
+        Loader {
+            active: root.icon !== undefined
+            sourceComponent: root.icon
+
+            anchors {
+                fill: parent
+                margins: 2
+            }
+        }
+    }
+}

shell/widgets/RoundSlider.qml

@@ -0,0 +1,55 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Controls
+import Qt5Compat.GraphicalEffects
+import ".."
+
+Slider {
+    id: slider
+    implicitHeight: 8
+    property var accentColor: ShellSettings.colors["primary"]
+
+    background: Rectangle {
+        id: sliderContainer
+        width: slider.availableWidth
+        height: slider.implicitHeight
+        color: ShellSettings.colors["inverse_surface"]
+        radius: 4
+        anchors.verticalCenter: parent.verticalCenter
+
+        layer.enabled: true
+        layer.effect: OpacityMask {
+            source: Rectangle {
+                width: sliderContainer.width
+                height: sliderContainer.height
+                radius: sliderContainer.radius
+                color: "white"
+            }
+
+            maskSource: Rectangle {
+                width: sliderContainer.width
+                height: sliderContainer.height
+                radius: sliderContainer.radius
+                color: "black"
+            }
+        }
+
+        Rectangle {
+            id: fill
+            width: slider.handle.width / 2 + slider.visualPosition * (sliderContainer.width - slider.handle.width)
+            height: sliderContainer.height
+            color: Qt.color(slider.accentColor ?? "purple").darker(1.2)
+        }
+    }
+
+    handle: Rectangle {
+        id: handleRect
+        x: slider.visualPosition * (slider.availableWidth - width)
+        y: slider.topPadding + slider.availableHeight / 2 - height / 2
+        width: 16
+        height: 16
+        radius: width / 2
+        color: slider.pressed ? Qt.color(slider.accentColor ?? "purple").darker(1.5) : slider.accentColor ?? "purple"
+    }
+}

shell/widgets/Separator.qml

@@ -0,0 +1,9 @@
+import QtQuick
+import ".."
+
+Rectangle {
+    color: ShellSettings.colors["active"]
+    radius: 5
+    width: 3.5
+    height: 15
+}

shell/widgets/StyledMouseArea.qml

@@ -0,0 +1,24 @@
+import QtQuick
+import qs
+
+MouseArea {
+    id: root
+    hoverEnabled: true
+
+    property real radius: width / 2
+    property bool checked: false
+    property var activeColor: ShellSettings.colors.active_translucent
+    property var inactiveColor: "transparent"
+
+    Rectangle {
+        color: root.containsMouse || root.checked ? root.activeColor : root.inactiveColor 
+        radius: root.radius
+        anchors.fill: parent
+
+        Behavior on color {
+            ColorAnimation {
+                duration: 200
+            }
+        }
+    }
+}

shell/widgets/StyledPopup.qml

@@ -0,0 +1,53 @@
+import QtQuick
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Hyprland
+import ".."
+
+PopupWindow {
+    id: root
+    color: "transparent"
+    implicitWidth: container.width
+    implicitHeight: container.height
+
+    default property alias contentItem: container.children
+
+    function open() {
+        // root.anchor.rect.y = -root.implicitHeight;
+        root.visible = true;
+        grab.active = true;
+        // slideAnimation.start();
+    }
+
+    function hide() {
+        root.visible = false;
+        grab.active = false;
+    }
+
+    // PropertyAnimation {
+    //     id: slideAnimation
+    //     target: root.anchor.rect
+    //     property: "y"
+    //     from: -root.implicitHeight  // Off-screen position
+    //     to: 0  // On-screen position
+    //     duration: 300  // Animation duration in milliseconds
+    // }
+
+    HyprlandFocusGrab {
+        id: grab
+        windows: [root]
+        onCleared: root.hide()
+    }
+
+    WrapperRectangle {
+        id: container
+        margin: 5
+        radius: 12
+        color: ShellSettings.colors.surface_translucent
+
+        border {
+            width: 1
+            color: ShellSettings.colors.active_translucent
+        }
+    }
+}

shell/widgets/StyledRectangle.qml

@@ -0,0 +1,13 @@
+import QtQuick
+import qs
+
+Rectangle {
+    id: root
+    radius: 12
+    color: ShellSettings.colors.surface_translucent
+
+    border {
+        width: 1
+        color: ShellSettings.colors.active_translucent
+    }
+}

shell/widgets/TopBar.qml

@@ -0,0 +1,94 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import ".."
+
+Item {
+    id: root
+    property alias model: buttonRepeater.model
+    property int currentIndex: 0
+
+    RowLayout {
+        id: buttonGroup
+        spacing: 0
+        anchors.fill: parent
+
+        Repeater {
+            id: buttonRepeater
+
+            delegate: MouseArea {
+                id: button
+                hoverEnabled: true
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+
+                required property var modelData
+                required property int index
+                property bool checked: index === root.currentIndex
+
+                onClicked: {
+                    currentIndex = button.index;
+                    root.updateSelectionBarPosition();
+                }
+
+                // Change to SVG Icon
+                FontIcon {
+                    text: button.modelData
+                    fill: {
+                        if (button.checked)
+                            return 1;
+
+                        return button.containsMouse ? 1 : 0;
+                    }
+                    color: button.checked ? ShellSettings.colors["primary"] : ShellSettings.colors["inverse_surface"]
+                    anchors.fill: parent
+                    anchors.bottomMargin: 5
+                }
+            }
+        }
+    }
+
+    Rectangle {
+        id: selectionBar
+        implicitWidth: 100
+        implicitHeight: 3
+        topLeftRadius: width / 2
+        topRightRadius: width / 2
+        color: ShellSettings.colors["primary"]
+        anchors.bottom: tabBar.top
+
+        Behavior on x {
+            NumberAnimation {
+                duration: 250
+                easing.type: Easing.OutCubic
+            }
+        }
+    }
+
+    Rectangle {
+        id: tabBar
+        implicitHeight: 1.5
+        radius: width / 2
+        color: ShellSettings.colors["surface_container"]
+
+        anchors {
+            top: buttonGroup.bottom
+            left: parent.left
+            right: parent.right
+        }
+    }
+
+    // Change to icons being greyed out by default but selected is full white
+    function updateSelectionBarPosition() {
+        if (buttonRepeater.count > 0) {
+            var buttonWidth = buttonGroup.width / buttonRepeater.count;
+            var targetX = currentIndex * buttonWidth + (buttonWidth - selectionBar.width) / 2;
+            selectionBar.x = targetX;
+        }
+    }
+
+    Component.onCompleted: updateSelectionBarPosition()
+    onWidthChanged: updateSelectionBarPosition()
+}