feat(quickshell): basic bar, tray, notification

1 files changed, 226 insertions, 0 deletions

diff --git a/modules/system/quickshell/WifiPasswordPrompt.qml b/modules/system/quickshell/WifiPasswordPrompt.qml
new file mode 100644
index 0000000..c77c351
--- /dev/null
+++ b/modules/system/quickshell/WifiPasswordPrompt.qml
@@ -0,0 +1,226 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Hyprland 
+
+PanelWindow {
+    id: root
+
+    // Properties
+    property string networkName: ""
+    property string title: "The Wi-Fi network \"" + networkName + "\" requires a password."
+    property string submitLabel: "Join"
+    property string iconSource: "network-wireless-symbolic"
+    
+    signal submitted(string text, bool remember)
+    signal cancelled()
+
+    // Methods
+    function open(name) {
+        networkName = name
+        passwordInput.text = ""
+        showPasswordCheck.checked = false
+        rememberNetworkCheck.checked = true
+        visible = true
+        Qt.callLater(() => passwordInput.forceActiveFocus())
+    }
+
+    // Window Configuration
+    visible: false
+    color: Theme.transparent
+    exclusiveZone: 0
+    
+    anchors {
+        top: true
+        bottom: true
+        left: true
+        right: true
+    }
+    
+    WlrLayershell.layer: WlrLayer.Overlay
+    WlrLayershell.keyboardFocus: WlrKeyboardFocus.Exclusive
+
+    HyprlandFocusGrab {
+        id: focusGrab
+        windows: [root]
+        active: root.visible
+    }
+
+    // UI Layout
+    Rectangle {
+        anchors.fill: parent
+        color: Theme.scrim
+        MouseArea { 
+            anchors.fill: parent 
+            acceptedButtons: Qt.AllButtons
+            hoverEnabled: true
+            onWheel: wheel => wheel.accepted = true
+        }
+    }
+
+    Squircle {
+        id: dialog
+        anchors.centerIn: parent
+        width: 480
+        height: Math.max(180, layout.implicitHeight + 40)
+        fillColor: Theme.bg
+        strokeColor: Theme.border
+        strokeWidth: 1
+        cornerRadius: 12
+
+        Keys.onEscapePressed: {
+            root.visible = false
+            root.cancelled()
+        }
+
+        RowLayout {
+            id: layout
+            anchors.fill: parent
+            anchors.margins: 20
+            spacing: 16
+
+            Item {
+                Layout.alignment: Qt.AlignTop
+                Layout.preferredWidth: 64
+                Layout.preferredHeight: 64
+                
+                Image {
+                    anchors.fill: parent
+                    source: Quickshell.iconPath(root.iconSource)
+                    fillMode: Image.PreserveAspectFit
+                }
+            }
+
+            ColumnLayout {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                spacing: 8
+
+                Text {
+                    Layout.fillWidth: true
+                    text: root.title
+                    color: Theme.text
+                    font.pixelSize: 13
+                    font.weight: Font.DemiBold
+                    wrapMode: Text.WordWrap
+                }
+
+                GridLayout {
+                    Layout.fillWidth: true
+                    columns: 2
+                    rowSpacing: 8
+                    columnSpacing: 8
+
+                    Text {
+                        text: "Password:"
+                        color: Theme.text
+                        font.pixelSize: 12
+                        Layout.alignment: Qt.AlignRight | Qt.AlignTop
+                        Layout.topMargin: 6
+                    }
+
+                    ColumnLayout {
+                        Layout.fillWidth: true
+                        spacing: 8
+
+                        TextField {
+                            id: passwordInput
+                            focus: true
+                            Layout.fillWidth: true
+                            Layout.preferredHeight: 28
+                            font.pixelSize: 12
+                            color: Theme.text
+                            echoMode: showPasswordCheck.checked ? TextInput.Normal : TextInput.Password
+                            
+                            background: Rectangle {
+                                color: Theme.surface
+                                radius: 4
+                                border.color: passwordInput.activeFocus ? Theme.accent : Theme.border
+                                border.width: passwordInput.activeFocus ? 2 : 1
+                            }
+
+                            onAccepted: {
+                                root.submitted(passwordInput.text, rememberNetworkCheck.checked)
+                                root.visible = false
+                            }
+                        }
+
+                        CustomCheckBox {
+                            id: showPasswordCheck
+                            text: "Show password"
+                            Layout.fillWidth: true
+                        }
+
+                        CustomCheckBox {
+                            id: rememberNetworkCheck
+                            text: "Remember this network"
+                            checked: true
+                            Layout.fillWidth: true
+                        }
+                    }
+                }
+
+                Item { Layout.preferredHeight: 4 } 
+
+                RowLayout {
+                    Layout.fillWidth: true
+                    spacing: 8
+
+                    Item { Layout.fillWidth: true } 
+
+                    Button {
+                        text: "Cancel"
+                        
+                        contentItem: Text {
+                            text: parent.text
+                            color: Theme.text
+                            font.pixelSize: 13
+                            horizontalAlignment: Text.AlignHCenter
+                            verticalAlignment: Text.AlignVCenter
+                        }
+                        
+                        background: Rectangle {
+                            implicitWidth: 80
+                            implicitHeight: 28
+                            color: parent.hovered ? Theme.surfaceHover : Theme.surface
+                            radius: 6
+                            border.color: Theme.border
+                            border.width: 1
+                        }
+                        
+                        onClicked: {
+                            root.visible = false
+                            root.cancelled()
+                        }
+                    }
+
+                    Button {
+                        text: root.submitLabel
+                        
+                        contentItem: Text {
+                            text: parent.text
+                            color: Theme.text
+                            font.pixelSize: 13
+                            horizontalAlignment: Text.AlignHCenter
+                            verticalAlignment: Text.AlignVCenter
+                        }
+                        
+                        background: Rectangle {
+                            implicitWidth: 80
+                            implicitHeight: 28
+                            color: parent.hovered ? Theme.accentHover : Theme.accent
+                            radius: 6
+                        }
+                        
+                        onClicked: {
+                            root.submitted(passwordInput.text, rememberNetworkCheck.checked)
+                            root.visible = false
+                        }
+                    }
+                }
+            }
+        }
+    }
+}