put shell in subdir, and add nix package

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/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,52 @@
+import QtQuick
+import Quickshell.Widgets
+import Qt5Compat.GraphicalEffects
+import ".."
+
+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["inverse_surface"]
+    property var activeColor: ShellSettings.colors["inverse_primary"]
+    signal clicked
+
+    implicitWidth: implicitSize
+    implicitHeight: implicitSize
+
+    Rectangle {
+        id: iconBackground
+        color: ShellSettings.colors["primary"]
+        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/MaterialButton.qml

@@ -0,0 +1,24 @@
+import QtQuick
+import ".."
+
+MouseArea {
+    id: root
+    hoverEnabled: true
+
+    property real radius: width / 2
+    property bool checked: false
+    property var activeColor: ShellSettings.colors["primary"]
+    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/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["primary"]
+    radius: 5
+    width: 7.5
+    height: 7.5
+}