App id io.github.theupriser.Steamify (GNOME matches windows to launchers only by reverse-DNS ids), own dark window frame on GNOME, launcher icon as a full path

ui/qml/Header.qml

@@ -4,6 +4,8 @@ import QtQuick
 Rectangle {
     required property AppState app
     required property string iconUrl
+    // Our own window frame (GNOME): drag the header, double-click to maximize, and the buttons at the right.
+    property bool customFrame: false
     readonly property var titles: ({ review: "Review", password: "Password", applying: app.biosRun ? "BIOS update" : "Applying",
                                      done: "Done", bios1: "BIOS update", bios2: "BIOS update" })
     width: parent.width; height: 72; color: Theme.bar
@@ -18,8 +20,39 @@ Rectangle {
     }
     Rectangle {
         visible: app.status.steamMachine === true
-        anchors.right: parent.right; anchors.rightMargin: 40; anchors.verticalCenter: parent.verticalCenter
+        anchors.right: parent.right; anchors.rightMargin: customFrame ? 190 : 40; anchors.verticalCenter: parent.verticalCenter
         height: 34; radius: 17; color: "#1b2330"; width: mt.implicitWidth + 28
         Text { id: mt; anchors.centerIn: parent; text: "Steam Machine · CachyOS"; color: Theme.label; font.family: Theme.body; font.pixelSize: 14 }
     }
+    // Moving the window (and maximizing by double-click) is the part of the header left of the buttons.
+    Item {
+        visible: customFrame
+        anchors { left: parent.left; top: parent.top; bottom: parent.bottom; right: controls.left }
+        DragHandler { target: null; onActiveChanged: if (active) Window.window.startSystemMove() }
+        TapHandler { onDoubleTapped: Window.window.visibility === Window.Maximized ? Window.window.showNormal() : Window.window.showMaximized() }
+    }
+    Row {
+        id: controls
+        visible: customFrame
+        anchors.right: parent.right; anchors.rightMargin: 16; anchors.verticalCenter: parent.verticalCenter; spacing: 6
+        Repeater {
+            model: [ { g: "\u2013", a: "min" }, { g: "\u25a1", a: "max" }, { g: "\u2715", a: "close" } ]
+            Rectangle {
+                required property var modelData
+                width: 44; height: 44; radius: 22
+                color: area.containsMouse ? (modelData.a === "close" ? "#c0392b" : Theme.line) : "transparent"
+                Text { anchors.centerIn: parent; text: modelData.g; color: Theme.text; font.family: Theme.body; font.pixelSize: 20 }
+                MouseArea {
+                    id: area
+                    anchors.fill: parent; hoverEnabled: true; cursorShape: Qt.PointingHandCursor
+                    onClicked: {
+                        var w = Window.window
+                        if (modelData.a === "min") w.showMinimized()
+                        else if (modelData.a === "max") { if (w.visibility === Window.Maximized) w.showNormal(); else w.showMaximized() }
+                        else Qt.quit()
+                    }
+                }
+            }
+        }
+    }
 }

ui/qml/Main.qml

@@ -11,12 +11,15 @@ ApplicationWindow {
     required property var backend
     required property var gamepad
     required property bool fullscreen
+    // The app draws the window frame (GNOME): the header carries the buttons, the edges resize.
+    required property bool customFrame
     required property string iconUrl
     required property bool fromSteam
     Component.onCompleted: Input.fromSteam = fromSteam
 
     width: 1280; height: 720
     minimumWidth: 960; minimumHeight: 540
+    flags: customFrame ? (Qt.Window | Qt.FramelessWindowHint) : Qt.Window
     visibility: fullscreen ? Window.FullScreen : Window.Windowed
     title: "Steamify"
     color: Theme.bg
@@ -41,7 +44,7 @@ ApplicationWindow {
         Keys.onPressed: function (e) { steamify.keyPressed(e); }
         Keys.onReleased: function (e) { steamify.keyReleased(e); }
 
-        Header { id: header; app: steamify; iconUrl: win.iconUrl }
+        Header { id: header; app: steamify; iconUrl: win.iconUrl; customFrame: win.customFrame }
 
         Item {
             id: content
@@ -55,4 +58,19 @@ ApplicationWindow {
             DoneScreen { anchors.fill: parent; app: steamify; visible: steamify.screen === "done" }
         }
     }
+
+    // Resize handles around a window with our own frame.
+    component Edge: MouseArea {
+        required property int edges
+        hoverEnabled: true
+        onPressed: win.startSystemResize(edges)
+    }
+    Edge { visible: win.customFrame; edges: Qt.LeftEdge; width: 6; anchors { left: parent.left; top: parent.top; bottom: parent.bottom; topMargin: 8; bottomMargin: 8 } cursorShape: Qt.SizeHorCursor }
+    Edge { visible: win.customFrame; edges: Qt.RightEdge; width: 6; anchors { right: parent.right; top: parent.top; bottom: parent.bottom; topMargin: 8; bottomMargin: 8 } cursorShape: Qt.SizeHorCursor }
+    Edge { visible: win.customFrame; edges: Qt.TopEdge; height: 6; anchors { top: parent.top; left: parent.left; right: parent.right; leftMargin: 8; rightMargin: 8 } cursorShape: Qt.SizeVerCursor }
+    Edge { visible: win.customFrame; edges: Qt.BottomEdge; height: 6; anchors { bottom: parent.bottom; left: parent.left; right: parent.right; leftMargin: 8; rightMargin: 8 } cursorShape: Qt.SizeVerCursor }
+    Edge { visible: win.customFrame; edges: Qt.LeftEdge | Qt.TopEdge; width: 8; height: 8; anchors { left: parent.left; top: parent.top } cursorShape: Qt.SizeFDiagCursor }
+    Edge { visible: win.customFrame; edges: Qt.RightEdge | Qt.TopEdge; width: 8; height: 8; anchors { right: parent.right; top: parent.top } cursorShape: Qt.SizeBDiagCursor }
+    Edge { visible: win.customFrame; edges: Qt.LeftEdge | Qt.BottomEdge; width: 8; height: 8; anchors { left: parent.left; bottom: parent.bottom } cursorShape: Qt.SizeBDiagCursor }
+    Edge { visible: win.customFrame; edges: Qt.RightEdge | Qt.BottomEdge; width: 8; height: 8; anchors { right: parent.right; bottom: parent.bottom } cursorShape: Qt.SizeFDiagCursor }
 }