nomad-shell/shell/qml/Main.qml

import QtQuick
import QtQuick.Window
import NomadInput 1.0

QtObject {
    // this is our top screen, for now, though in the future I would like to have it configurable which screen does which.
    // I'll burn that bridge when I get to it
    property Window topWindow: Window {
        width: 960 // this resolution size is for development. I'd like to have a cleaner way to develop for 1080p without getting a dedicated monitor for testing nomad on my dev computer
        height: 540
        visible: true
        title: "nomad-top" // this is necesarry for Sway, which auto-assigns the windows
        property string lastInputText: "none" // I've never really integrated NomadInput into this debug section in the top half and now I'm too lazy to. it's just a placeholder anyway.

        Connections {
            target: inputManager
            
            function onActionPressed(action) {
                topWindow.lastInputText = inputManager.actionName(action) + " pressed"
            }
            function onActionReleased(action) {
                topWindow.lastInputText = inputManager.actionName(action) + " released"
            }
        }

        Rectangle { // just a placeholder for the top screen until we do something better
            anchors.fill: parent
            color: "#181818"

            Column {
                anchors.centerIn: parent
                spacing: 20

                Text {
                    text: "nomad top screen"
                    color: "white"
                    font.pixelSize: 50
                }

                Text {
                    text: "last input: " + topWindow.lastInputText
                    color: "white"
                    font.pixelSize: 30
                }
            }
        }
    }

    property Window bottomWindow: Window {
        width: 620 // again, half-resolution
        height: 540
        visible: true
        title: "nomad-bottom" // window titling for Sway auto-assign

        NavigationManager {
            id: navigationManager
            rootItem: bottomRoot
        }

        Connections {
            target: inputManager

            // you don't wanna know what this used to look like :dread: 
            // just checks if our navigation is directional, and, if so, moves the selection in that direction
            function onActionPressed(action) {
                switch (action) {
                case InputManager.Up:
                case InputManager.Down:
                case InputManager.Left:
                case InputManager.Right:
                    navigationManager.move(action)
                    break
                }
            }
        }


        Rectangle {
            id: bottomRoot
            anchors.fill: parent
            color: "#181818"

            // top text where a menu dock will probably be eventually
            Text { 
                anchors.top: parent.top
                anchors.topMargin: 30
                anchors.horizontalCenter: parent.horizontalCenter

                text: "top placeholder"
                color: "white"
                font.pixelSize: 24
            }

            // this is the game carousel. mostly self explanatory, but I wanna point out that the local index for this listView does probably still matter.
            // I got rid of dedicated menu indexing for the dock, but I think it still matters here, for the sake of auto-scrolling
            ListView {
                id: gamesList

                anchors.left: parent.left
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter

                // TODO: Tune this stuff !!! it feels just slightly janky and off for now, game cards don't align when scrolling, they go all the way out
                // to the edge with no spacing at all when on the leftmost or rightmost cards, and vertical navigation from the dock feels *wrong*, idk, 
                // fix it sometime.
                height: 140
                orientation: ListView.Horizontal 
                preferredHighlightBegin: 200
                preferredHighlightEnd: 420
                highlightRangeMode: ListView.ApplyRange
                spacing: 20

                model: 20 // this is a placeholder for now, I don't know how I really want to handle max game carousel size yet. another time.

                Component.onCompleted: { // on startup, this should select the first game in the list. 
                    if (currentItem) {
                        navigationManager.focusItem(currentItem)
                    }
                }

                delegate: Rectangle { // TODO: design a real game card QML to replace this placeholder
                    id: gameTile

                    width: 110
                    height: 110

                    color: navigationManager.currentItem === gameTile ? "blue" : "white"

                    function onNavigationFocused() {
                        gamesList.currentIndex = index 
                    }

                    Component.onCompleted: {
                        navigationManager.registerItem(gameTile)
                    }

                    Component.onDestruction: {
                        navigationManager.unregisterItem(gameTile)
                    }

                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            navigationManager.focusItem(gameTile)
                        }
                    }
                }
            }

            Row {
                id: bottomMenu

                anchors.bottom: parent.bottom
                anchors.bottomMargin: 30
                anchors.horizontalCenter: parent.horizontalCenter

                spacing: 16

                Repeater {
                    id: dockRepeater
                    model: 5

                    Rectangle {
                        id: dockButton

                        width: 60
                        height: 60

                        color: navigationManager.currentItem === dockButton ? "blue" : "white"

                        function onNavigationFocused() {
                            // there used to be code here when my navigation was worse. I bet I'll need it eventually tho
                            // this entire section is a placeholder dock button anyway though.
                        }

                        Component.onCompleted: {
                            navigationManager.registerItem(dockButton)
                        }

                        Component.onDestruction: {
                            navigationManager.unregisterItem(dockButton)
                        }

                        MouseArea {
                            anchors.fill: parent

                            onClicked: {
                                navigationManager.focusItem(dockButton)
                            }
                        }
                    }
                }
            }
        } 
    }
}