Add Qt/QML desktop shell and Nebula.UI

Introduce a new production desktop shell at `shells/desktop/shell` built with C++20, Qt Quick/QML, and LayerShellQt, including top bar, launcher, desktop surfaces, shell state, and mock app data. Add the shared `packages/nebula-ui` QML module (theme, controls, focus, icons) and wire it into the shell build. Retire the old GTK/WebKit native host by removing `shells/desktop/native`, move the React shell UI to `shells/desktop/prototype-react` as an archived design reference, and update root/compositor/session documentation to reflect the new Linux-only production architecture and temporary Sway role.
2026-08-26 16:34:40 +12:00
parent 5504d3cfb8
commit befed8ff96
80 changed files with 2128 additions and 609 deletions
@@ -0,0 +1,134 @@
+import QtQuick
+import Nebula.UI
+
+Item {
+    id: root
+
+    property string variant: "tile"
+    property var item
+    signal selected(var item)
+
+    readonly property bool rowVariant: variant === "row"
+    readonly property int iconSize: rowVariant ? 32 : (variant === "recent" ? 32 : 40)
+    readonly property int glyphSize: rowVariant ? 16 : 18
+
+    implicitWidth: rowVariant ? parent ? parent.width : 200 : 90
+    implicitHeight: rowVariant ? 48 : 78
+    Accessible.role: Accessible.Button
+    Accessible.name: item ? item.name : ""
+    Accessible.onPressAction: root.selected(item)
+
+    Rectangle {
+        anchors.fill: parent
+        radius: Theme.radiusMedium
+        color: hover.containsMouse ? Theme.tileHover : "transparent"
+
+        Behavior on color {
+            ColorAnimation {
+                duration: Theme.animationFast
+            }
+        }
+    }
+
+    Column {
+        visible: !root.rowVariant
+        anchors.fill: parent
+        anchors.topMargin: 10
+        anchors.bottomMargin: 8
+        anchors.leftMargin: 6
+        anchors.rightMargin: 6
+        spacing: 8
+
+        Rectangle {
+            width: root.iconSize
+            height: root.iconSize
+            radius: root.variant === "recent" ? 9 : 11
+            anchors.horizontalCenter: parent.horizontalCenter
+            color: Theme.iconWell
+
+            Rectangle {
+                anchors.fill: parent
+                radius: parent.radius
+                color: "transparent"
+                border.color: Theme.iconWellHighlight
+                border.width: 1
+            }
+
+            NebulaIcon {
+                anchors.centerIn: parent
+                name: item && item.glyph ? item.glyph : "folder"
+                size: root.glyphSize
+                color: item && item.tint ? item.tint : Theme.accent
+            }
+        }
+
+        Text {
+            width: parent.width
+            text: item ? item.name : ""
+            color: Theme.textPrimary
+            font.family: Theme.fontFamily
+            font.pixelSize: Theme.fontSizeApp
+            elide: Text.ElideRight
+            horizontalAlignment: Text.AlignHCenter
+        }
+    }
+
+    Row {
+        visible: root.rowVariant
+        anchors.fill: parent
+        anchors.margins: 8
+        spacing: 10
+
+        Rectangle {
+            width: root.iconSize
+            height: root.iconSize
+            radius: 9
+            anchors.verticalCenter: parent.verticalCenter
+            color: Theme.iconWell
+
+            NebulaIcon {
+                anchors.centerIn: parent
+                name: item && (item.glyph || item.kind) ? (item.glyph || item.kind) : "folder"
+                size: root.glyphSize
+                color: item && item.tint ? item.tint : Theme.accent
+            }
+        }
+
+        Column {
+            anchors.verticalCenter: parent.verticalCenter
+            width: parent.width - root.iconSize - 10
+            spacing: 1
+
+            Text {
+                width: parent.width
+                text: item ? item.name : ""
+                color: Theme.textPrimary
+                font.family: Theme.fontFamily
+                font.pixelSize: Theme.fontSizeApp
+                elide: Text.ElideRight
+            }
+
+            Text {
+                width: parent.width
+                visible: item && item.subtitle ? true : false
+                text: item && item.subtitle ? item.subtitle : ""
+                color: Theme.textTertiary
+                font.family: Theme.fontFamily
+                font.pixelSize: Theme.fontSizeSmall
+                elide: Text.ElideRight
+            }
+        }
+    }
+
+    MouseArea {
+        id: hover
+        anchors.fill: parent
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onClicked: root.selected(item)
+    }
+
+    FocusFrame {
+        radius: Theme.radiusMedium
+    }
+}