games: the Steam library as an endless strip with a large preview

An overlay on DP-1: a looping PathView of slanted tiles along the bottom,
the centred one shown large above it in Steam's hero art with its title.
Installed games and non-Steam shortcuts come first, by last played; owned
games that are not installed follow, framed in peach, and Enter installs
them. Launches go through steam -silent so the Steam window stays down.

games.py reads appmanifests, the binary shortcuts.vdf and Steam's library
cache on every opening; owned games come from the Web API through a cache
refreshed in the background.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

1 files changed, 276 insertions, 0 deletions

diff --git a/games/Games.qml b/games/Games.qml
new file mode 100644
index 0000000..2d22460
--- /dev/null
+++ b/games/Games.qml
@@ -0,0 +1,276 @@
+// Copyright (C) 2026 Danilo M. <danix@danix.xyz>
+//
+// This program is free software; you can redistribute it and/or modify
+// it under the terms of the GNU General Public License version 2 as
+// published by the Free Software Foundation.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+
+import Quickshell
+import Quickshell.Io
+import Quickshell.Wayland
+import QtQuick
+
+Scope {
+    id: root
+
+    property bool open: false
+    property string monitor: "DP-1"
+    property var items: []
+    property string query: ""
+
+    // Horizontal shear of the strip's tiles, as a fraction of their height.
+    readonly property real slant: -0.25
+    readonly property int step: 210
+
+    readonly property var screenObj:
+        Quickshell.screens.find(s => s.name === root.monitor) ?? Quickshell.screens[0]
+
+    readonly property var shown: {
+        const q = root.query.toLowerCase();
+        return root.items.filter(g => g.name.toLowerCase().includes(q));
+    }
+
+    // The strip is a loop, so the list repeats until it fills the screen
+    // width: a short library would otherwise leave gaps in the circle.
+    readonly property var reel: {
+        if (!root.shown.length) return [];
+        const slots = Math.ceil(root.screenObj.width / root.step) + 2;
+        let out = [];
+        while (out.length < slots) out = out.concat(root.shown);
+        return out;
+    }
+
+    function launch(g) {
+        if (!g) return;
+        // -silent keeps the Steam window down whether or not Steam is running.
+        // Ids are strings: a shortcut's game id does not fit a JS number.
+        Quickshell.execDetached(["steam", "-silent",
+            g.installed ? `steam://rungameid/${g.id}` : `steam://install/${g.appid}`]);
+        root.open = false;
+    }
+
+    // The list is read on every opening; the owned games come from a cache
+    // that a Web API call refreshes in the background, then the list is
+    // read again.
+    onOpenChanged: if (open) {
+        root.query = "";
+        list.running = true;
+        refresh.running = true;
+    }
+
+    Process {
+        id: list
+        command: ["/usr/bin/python3", `${Quickshell.shellDir}/games.py`]
+        stdout: StdioCollector {
+            onStreamFinished: {
+                try { root.items = JSON.parse(text); } catch (e) { root.items = []; }
+            }
+        }
+    }
+
+    Process {
+        id: refresh
+        command: ["/usr/bin/python3", `${Quickshell.shellDir}/games.py`, "--refresh"]
+        onExited: code => { if (code === 0 && root.open) list.running = true; }
+    }
+
+    // A config with no visible window exits, reporting nothing. This 1x1
+    // click-through window holds the shell open while the overlay is hidden.
+    PanelWindow {
+        anchors { top: true; left: true }
+        implicitWidth: 1
+        implicitHeight: 1
+        color: "transparent"
+        exclusionMode: ExclusionMode.Ignore
+        mask: Region {}
+        WlrLayershell.keyboardFocus: WlrKeyboardFocus.None
+    }
+
+    LazyLoader {
+        active: root.open
+
+        PanelWindow {
+            id: win
+            readonly property var game: root.reel[strip.currentIndex]
+            readonly property color bg: Qt.rgba(Theme.crust.r, Theme.crust.g, Theme.crust.b, 0.94)
+
+            screen: root.screenObj
+            anchors { top: true; left: true; right: true; bottom: true }
+            color: win.bg
+            exclusionMode: ExclusionMode.Ignore
+            WlrLayershell.layer: WlrLayer.Overlay
+            WlrLayershell.namespace: "keystone-games"
+            WlrLayershell.keyboardFocus: WlrKeyboardFocus.Exclusive
+
+            MouseArea {
+                anchors.fill: parent
+                onClicked: root.open = false
+            }
+
+            // The selected game, large: Steam's wide hero art, or the cover
+            // when there is none, fading into the background at the bottom.
+            Item {
+                anchors { top: parent.top; left: parent.left; right: parent.right; bottom: strip.top }
+
+                Image {
+                    anchors.fill: parent
+                    source: win.game ? (win.game.hero || win.game.cover ? `file://${win.game.hero || win.game.cover}` : "") : ""
+                    fillMode: Image.PreserveAspectCrop
+                    asynchronous: true
+                }
+
+                Rectangle {
+                    anchors.fill: parent
+                    gradient: Gradient {
+                        GradientStop { position: 0.45; color: "transparent" }
+                        GradientStop { position: 1.0; color: win.bg }
+                    }
+                }
+
+                Column {
+                    anchors { left: parent.left; bottom: parent.bottom; margins: 80 }
+                    spacing: 8
+
+                    Text {
+                        text: win.game?.name ?? (root.items.length ? "No match" : "")
+                        color: Theme.text
+                        font.family: Theme.fontFamily
+                        font.pixelSize: 56
+                        font.bold: true
+                    }
+                    Text {
+                        visible: !!win.game
+                        text: !win.game ? ""
+                            : !win.game.installed ? "Not installed  ·  Enter installs"
+                            : win.game.last ? `Last played ${new Date(win.game.last * 1000).toLocaleDateString(Qt.locale(), "d MMMM yyyy")}`
+                            : "Never played"
+                        color: win.game?.installed ? Theme.subtext : Theme.peach
+                        font.family: Theme.fontFamily
+                        font.pixelSize: 20
+                    }
+                }
+            }
+
+            // Keys reach a focused item, not a window: the search field
+            // takes them all and steers the strip. It shows only what is typed.
+            TextInput {
+                id: field
+                anchors { right: parent.right; top: parent.top; margins: 60 }
+                focus: true
+                color: Theme.text
+                font.family: Theme.fontFamily
+                font.pixelSize: 28
+                onTextEdited: root.query = text
+
+                Keys.onEscapePressed: root.open = false
+                Keys.onLeftPressed: strip.decrementCurrentIndex()
+                Keys.onRightPressed: strip.incrementCurrentIndex()
+                Keys.onReturnPressed: root.launch(win.game)
+                Keys.onEnterPressed: root.launch(win.game)
+            }
+
+            // An endless strip: PathView wraps, and the tile at the centre
+            // is the selection.
+            PathView {
+                id: strip
+                anchors { left: parent.left; right: parent.right; bottom: parent.bottom; bottomMargin: 120 }
+                height: 300
+                model: root.reel
+                pathItemCount: Math.min(count, Math.ceil((width + 2 * root.step) / root.step))
+                preferredHighlightBegin: 0.5
+                preferredHighlightEnd: 0.5
+                highlightRangeMode: PathView.StrictlyEnforceRange
+                highlightMoveDuration: 220
+                onModelChanged: currentIndex = 0
+
+                path: Path {
+                    startX: -root.step
+                    startY: strip.height / 2
+                    PathLine { x: strip.width + root.step; y: strip.height / 2 }
+                }
+
+                delegate: Item {
+                    id: tile
+                    required property var modelData
+                    required property int index
+                    readonly property bool current: PathView.isCurrentItem
+                    width: 160
+                    height: 160
+                    z: current ? 1 : 0
+                    scale: current ? 1.5 : 1
+                    Behavior on scale { NumberAnimation { duration: 160 } }
+
+                    // A parallelogram: the tile is sheared about its middle
+                    // and clips to that shape; the art inside is sheared back
+                    // so it stands straight, and widened to reach both edges.
+                    Item {
+                        anchors.fill: parent
+                        clip: true
+                        transform: Matrix4x4 {
+                            matrix: Qt.matrix4x4(1, root.slant, 0, -root.slant * tile.height / 2,
+                                                 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+                        }
+
+                        Rectangle { anchors.fill: parent; color: Theme.surface }
+
+                        Image {
+                            x: -tile.height * Math.abs(root.slant) / 2
+                            width: parent.width + tile.height * Math.abs(root.slant)
+                            height: parent.height
+                            transform: Matrix4x4 {
+                                matrix: Qt.matrix4x4(1, -root.slant, 0, root.slant * tile.height / 2,
+                                                     0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+                            }
+                            source: tile.modelData.cover ? `file://${tile.modelData.cover}` : ""
+                            sourceSize.width: 480
+                            fillMode: Image.PreserveAspectCrop
+                            asynchronous: true
+                            // Not installed: greyed until selected.
+                            opacity: tile.modelData.installed || tile.current ? 1 : 0.35
+                        }
+
+                        // No cover: the initial stands in for it.
+                        Text {
+                            anchors.centerIn: parent
+                            visible: !tile.modelData.cover
+                            text: tile.modelData.name.charAt(0)
+                            color: Theme.text
+                            font.family: Theme.fontFamily
+                            font.pixelSize: 64
+                            font.bold: true
+                        }
+
+                        // Not installed: a peach frame, the colour of the
+                        // preview's "Not installed" line.
+                        Rectangle {
+                            anchors.fill: parent
+                            color: "transparent"
+                            border.width: tile.current ? 3 : tile.modelData.installed ? 0 : 2
+                            border.color: tile.modelData.installed ? Theme.accent : Theme.peach
+                        }
+                    }
+
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: tile.current ? root.launch(tile.modelData) : strip.currentIndex = tile.index
+                    }
+                }
+
+                // The wheel steps one tile a notch.
+                MouseArea {
+                    anchors.fill: parent
+                    acceptedButtons: Qt.NoButton
+                    onWheel: wheel => {
+                        const d = wheel.angleDelta.y || wheel.angleDelta.x;
+                        if (d < 0) strip.incrementCurrentIndex();
+                        else if (d > 0) strip.decrementCurrentIndex();
+                    }
+                }
+            }
+        }
+    }
+}