feat: bar panel preset

Make presets more flexible
Fix workspaces when show windows disabled
Make rounded option for workspaces

config/Appearance.qml

@@ -27,6 +27,10 @@ Singleton {
         return c;
     }
 
+    function on(c: color): color {
+        return Qt.hsla(c.hslHue, c.hslSaturation, 0.2, 1);
+    }
+
     FileView {
         path: `${StandardPaths.standardLocations(StandardPaths.GenericStateLocation)[0]}/caelestia/scheme/current-mode.txt`
         watchChanges: true

config/BarConfig.qml

@@ -10,44 +10,65 @@ Singleton {
     property bool vertical: false
     property Preset preset: presets.pills
 
-    readonly property Sizes sizes: Sizes {}
+    readonly property Sizes sizes: preset.sizes
-    readonly property Workspaces workspaces: Workspaces {}
+    readonly property Workspaces workspaces: preset.workspaces
-    readonly property Tray tray: Tray {}
+    readonly property Tray tray: preset.tray
     readonly property Presets presets: Presets {}
 
     component Sizes: QtObject {
-        readonly property int height: 40
+        property int totalHeight: height
-        readonly property int innerHeight: 30
+        property int height: 40
-        readonly property int floatingGap: 10
+        property int innerHeight: 30
-        readonly property int floatingGapLarge: 15
+        property int floatingGap: 10
-        readonly property int maxLabelWidth: 600
+        property int floatingGapLarge: 15
-        readonly property int maxLabelHeight: 400
+        property int maxLabelWidth: 600
+        property int maxLabelHeight: 400
     }
 
     component Workspaces: QtObject {
-        readonly property int shown: 10
+        property int shown: 10
-        readonly property string style: ""
+        property bool rounded: true
-        readonly property bool occupiedBg: true
+        property bool occupiedBg: true
-        readonly property bool showWindows: true
+        property bool showWindows: true
-        readonly property bool activeTrail: !showWindows // Doesn't work well with variable sized workspaces
+        property bool activeTrail: !showWindows // Doesn't work well with variable sized workspaces
-        readonly property string label: "  "
+        property string label: "  "
-        readonly property string occupiedLabel: "󰮯 "
+        property string occupiedLabel: "󰮯 "
-        readonly property string activeLabel: "󰮯 "
+        property string activeLabel: "󰮯 "
     }
 
     component Tray: QtObject {
-        readonly property bool recolourIcons: false
+        property bool recolourIcons: false
     }
 
     component Preset: QtObject {
         required property string name
-        required property int totalHeight
+        property Sizes sizes: Sizes {}
+        property Workspaces workspaces: Workspaces {}
+        property Tray tray: Tray {}
     }
 
     component Presets: QtObject {
         readonly property Preset pills: Preset {
             name: "pills"
-            totalHeight: root.sizes.height + root.sizes.floatingGap
+            sizes: Sizes {
+                totalHeight: height + floatingGap
+            }
+        }
+        readonly property Preset panel: Preset {
+            name: "panel"
+            sizes: Sizes {
+                height: 30
+            }
+            workspaces: Workspaces {
+                rounded: false
+                showWindows: false
+                label: ""
+                occupiedLabel: ""
+                activeLabel: ""
+            }
+            tray: Tray {
+                recolourIcons: true
+            }
         }
     }
 }

modules/bar/Bar.qml

@@ -14,8 +14,8 @@ Variants {
         screen: modelData
         name: "bar"
 
-        width: BarConfig.vertical ? BarConfig.preset.totalHeight : -1
+        width: BarConfig.vertical ? BarConfig.sizes.totalHeight : -1
-        height: BarConfig.vertical ? -1 : BarConfig.preset.totalHeight
+        height: BarConfig.vertical ? -1 : BarConfig.sizes.totalHeight
 
         anchors.top: true
         anchors.left: true
@@ -42,6 +42,12 @@ Variants {
 
             Pills {}
         }
+
+        Preset {
+            presetName: "panel"
+
+            Panel {}
+        }
     }
 
     component Preset: Loader {

modules/bar/Panel.qml

@@ -0,0 +1,118 @@
+import "root:/widgets"
+import "root:/config"
+import "components"
+import "components/workspaces"
+import QtQuick
+import QtQuick.Layouts
+
+StyledRect {
+    id: root
+
+    function get(horiz, vert) {
+        return BarConfig.vertical ? vert : horiz;
+    }
+
+    color: Appearance.alpha(Appearance.colours.m3surface, false)
+    anchors.fill: parent
+
+    BoxLayout {
+        spacing: 0 //Appearance.padding.large
+
+        anchors.fill: parent
+
+        BoxLayout {
+            spacing: 0
+
+            Module {
+                color: Appearance.colours.mauve
+
+                OsIcon {
+                    color: Appearance.on(Appearance.colours.mauve)
+
+                    anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
+                    anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
+                }
+            }
+
+            Module {
+                color: Appearance.colours.pink
+
+                ActiveWindow {
+                    colour: Appearance.on(Appearance.colours.pink)
+
+                    anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
+                    anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
+                }
+            }
+        }
+
+        Item {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+        }
+
+        Workspaces {
+            vertical: BarConfig.vertical
+        }
+
+        Item {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+        }
+
+        Module {
+            color: Appearance.colours.green
+
+            Tray {
+                colour: Appearance.on(Appearance.colours.green)
+
+                anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
+                anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
+            }
+        }
+
+        Module {
+            color: Appearance.colours.yellow
+
+            Clock {
+                colour: Appearance.on(Appearance.colours.yellow)
+
+                anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
+                anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
+            }
+        }
+
+        Module {
+            color: Appearance.colours.peach
+
+            StatusIcons {
+                colour: Appearance.on(Appearance.colours.peach)
+
+                anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
+                anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
+            }
+        }
+
+        Module {
+            color: Appearance.colours.m3error
+
+            Layout.maximumWidth: BarConfig.sizes.height
+            Layout.maximumHeight: BarConfig.sizes.height
+
+            Power {
+                x: (BarConfig.sizes.height - width) / 2
+                color: Appearance.colours.m3onError
+
+                anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
+                anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
+            }
+        }
+    }
+
+    component Module: PaddedRect {
+        padding: BarConfig.vertical ? [Appearance.padding.large, 0] : [0, Appearance.padding.large]
+
+        Layout.minimumWidth: BarConfig.sizes.height
+        Layout.minimumHeight: BarConfig.sizes.height
+    }
+}

modules/bar/Pills.qml

@@ -1,10 +1,7 @@
-pragma ComponentBehavior: Bound
-
 import "root:/widgets"
 import "root:/config"
 import "components"
 import "components/workspaces"
-import Quickshell.Wayland
 import QtQuick
 import QtQuick.Layouts
 
@@ -108,8 +105,6 @@ BoxLayout {
     }
 
     component Pill: PaddedRect {
-        id: pill
-
         color: Appearance.alpha(Appearance.colours.m3surface, false)
         radius: Appearance.rounding.full
         padding: BarConfig.vertical ? [Appearance.padding.large, 0] : [0, Appearance.padding.large]

modules/bar/components/ActiveWindow.qml

@@ -7,7 +7,7 @@ import QtQuick
 StyledRect {
     id: root
 
-    readonly property color colour: Appearance.colours.pink
+    property color colour: Appearance.colours.pink
 
     animate: true
     clip: true

modules/bar/components/Clock.qml

@@ -6,7 +6,7 @@ import QtQuick
 StyledRect {
     id: root
 
-    readonly property color colour: Appearance.colours.peach
+    property color colour: Appearance.colours.peach
 
     MaterialIcon {
         id: icon

modules/bar/components/StatusIcons.qml

@@ -9,7 +9,7 @@ import QtQuick.Controls
 StyledRect {
     id: root
 
-    readonly property color colour: Appearance.colours.rosewater
+    property color colour: Appearance.colours.rosewater
 
     animate: true
     clip: true

modules/bar/components/Tray.qml

@@ -1,8 +1,13 @@
 import "root:/widgets"
+import "root:/config"
 import Quickshell.Services.SystemTray
 import QtQuick
 
 StyledRect {
+    id: root
+
+    property color colour: Appearance.colours.lavender
+
     animate: true
     clip: true
     visible: width > 0 && height > 0 // To avoid warnings about being visible with no size
@@ -11,7 +16,9 @@ StyledRect {
         Repeater {
             model: SystemTray.items
 
-            TrayItem {}
+            TrayItem {
+                colour: root.colour
+            }
         }
     }
 }

modules/bar/components/TrayItem.qml

@@ -6,9 +6,10 @@ import QtQuick
 import Qt5Compat.GraphicalEffects
 
 MouseArea {
-    id: item
+    id: root
 
     required property SystemTrayItem modelData
+    required property color colour
 
     acceptedButtons: Qt.LeftButton | Qt.RightButton
     width: Appearance.font.size.smaller * 2
@@ -25,7 +26,7 @@ MouseArea {
     QsMenuAnchor {
         id: menu
 
-        menu: item.modelData.menu
+        menu: root.modelData.menu
         anchor.window: this.QsWindow.window
     }
 
@@ -33,7 +34,7 @@ MouseArea {
         id: icon
 
         visible: !BarConfig.tray.recolourIcons
-        source: item.modelData.icon
+        source: root.modelData.icon
         anchors.fill: parent
     }
 
@@ -41,7 +42,7 @@ MouseArea {
         visible: BarConfig.tray.recolourIcons
         anchors.fill: icon
         source: icon
-        color: Appearance.colours.lavender
+        color: root.colour
 
         Behavior on color {
             ColorAnimation {

modules/bar/components/workspaces/ActiveIndicator.qml

@@ -26,8 +26,7 @@ Rectangle {
     y: vertical ? offset + 1 : 1
     width: (vertical ? BarConfig.sizes.innerHeight : size) - 2
     height: (vertical ? size : BarConfig.sizes.innerHeight) - 2
-    color: Appearance.colours.mauve
+    radius: BarConfig.workspaces.rounded ? Appearance.rounding.full : 0
-    radius: Appearance.rounding.full
 
     anchors.horizontalCenter: vertical ? parent.horizontalCenter : undefined
     anchors.verticalCenter: vertical ? undefined : parent.verticalCenter

modules/bar/components/workspaces/OccupiedBg.qml

@@ -54,7 +54,7 @@ Item {
             property Workspace end: root.workspaces[modelData.end - 1] ?? null
 
             color: Appearance.alpha(Appearance.colours.m3surfaceContainerHigh, true)
-            radius: Appearance.rounding.full
+            radius: BarConfig.workspaces.rounded ? Appearance.rounding.full : 0
 
             x: start?.x ?? 0
             y: start?.y ?? 0

modules/bar/components/workspaces/Workspace.qml

@@ -16,13 +16,14 @@ Item {
 
     readonly property bool isWorkspace: true // Flag for finding workspace children
     // Unanimated prop for others to use as reference
-    readonly property real size: childrenRect[vertical ? "height" : "width"] + (isOccupied ? Appearance.padding.normal : 0)
+    readonly property real size: childrenRect[vertical ? "height" : "width"] + (shouldPad ? Appearance.padding.normal : 0)
 
     readonly property int ws: groupOffset + index + 1
     readonly property bool isOccupied: occupied[ws] ?? false
+    readonly property bool shouldPad: isOccupied && BarConfig.workspaces.showWindows
 
-    Layout.preferredWidth: childrenRect.width + (isOccupied && !vertical ? Appearance.padding.normal : 0)
+    Layout.preferredWidth: childrenRect.width + (shouldPad && !vertical ? Appearance.padding.normal : 0)
-    Layout.preferredHeight: childrenRect.height + (isOccupied && vertical ? Appearance.padding.normal : 0)
+    Layout.preferredHeight: childrenRect.height + (shouldPad && vertical ? Appearance.padding.normal : 0)
 
     StyledText {
         id: indicator
@@ -49,7 +50,7 @@ Item {
 
         Repeater {
             model: ScriptModel {
-                values: Hyprland.clients.filter(c => c.workspace?.id === root.ws)
+                values: BarConfig.workspaces.showWindows ? Hyprland.clients.filter(c => c.workspace?.id === root.ws) : []
             }
 
             MaterialIcon {

modules/bar/components/workspaces/Workspaces.qml

@@ -7,7 +7,7 @@ Item {
     id: root
 
     property alias vertical: layout.vertical
-    readonly property color colour: Appearance.colours.mauve
+    property color colour: Appearance.colours.mauve
 
     readonly property list<Workspace> workspaces: layout.children.filter(c => c.isWorkspace)
     readonly property var occupied: Hyprland.workspaces.values.reduce((acc, curr) => {
@@ -43,6 +43,7 @@ Item {
     }
 
     ActiveIndicator {
+        color: root.colour
         vertical: root.vertical
         workspaces: root.workspaces
         mask: layout

widgets/PaddedRect.qml

@@ -6,12 +6,12 @@ StyledRect {
 
     property var padding: 0
 
-    readonly property int paddingTop: getRealPadding().top
+    readonly property real paddingTop: getRealPadding().top
-    readonly property int paddingRight: getRealPadding().right
+    readonly property real paddingRight: getRealPadding().right
-    readonly property int paddingBottom: getRealPadding().bottom
+    readonly property real paddingBottom: getRealPadding().bottom
-    readonly property int paddingLeft: getRealPadding().left
+    readonly property real paddingLeft: getRealPadding().left
-    readonly property int paddingX: getRealPadding().x
+    readonly property real paddingX: getRealPadding().x
-    readonly property int paddingY: getRealPadding().y
+    readonly property real paddingY: getRealPadding().y
 
     function getRealPadding() {
         const pad = {};