pyGUI/ISC/HomePage.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import ISC

Rectangle {
    id: root
    anchors.fill: parent
    color: Theme.pageBackground
    clip: true

    // Primary navigation shown in the left rail.
    property var sideActions: ["DETECT WAFER", "READ MEMORY", "OPEN CSV IN EXCEL", "ERASE MEMORY", "IMPORT DATA", "STORED DATA"]

    // Footer tabs drive the active workspace section.
    property var bottomTabs: ["Status", "Graph", "Data", "Wafer Map", "Compare", "Split", "Settings", "About"]

    property int selectedTabIndex: 0

    RowLayout {
        anchors.fill: parent
        spacing: 0

        // Left control rail.
        Rectangle {
            id: sideRail
            Layout.preferredWidth: Theme.sideRailWidth
            Layout.fillHeight: true
            color: Theme.sideRailBackground
            border.color: Theme.workspaceBorder
            border.width: 1

            readonly property int actionCount: root.sideActions.length
            readonly property real computedButtonHeight: Math.min(Theme.sideButtonHeight, (height - (Theme.panelPadding * 2) - (Theme.sideRailSpacing * Math.max(0, actionCount - 1))) / Math.max(1, actionCount))

            ColumnLayout {
                anchors.fill: parent
                anchors.margins: Theme.panelPadding
                spacing: Theme.sideRailSpacing

                Repeater {
                    model: root.sideActions

                    Button {
                        id: control
                        text: modelData
                        Layout.fillWidth: true
                        Layout.preferredHeight: Math.max(Theme.sideButtonMinHeight, sideRail.computedButtonHeight)

                        background: Rectangle {
                            color: control.down ? Theme.buttonPressed : Theme.cardBackground
                            border.color: Theme.cardBorder
                            border.width: 1
                            radius: 4
                        }

                        contentItem: Text {
                            text: control.text
                            color: Theme.headingColor
                            font.bold: true
                            font.pixelSize: 18
                            wrapMode: Text.WordWrap
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                        }
                    }
                }
            }
        }

        // Main workspace and footer navigation.
        Rectangle {
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: Theme.workspaceBackground
            border.color: Theme.workspaceBorder
            border.width: 1

            ColumnLayout {
                anchors.fill: parent
                anchors.margins: Theme.mainAreaPadding
                spacing: Theme.rightPaneGap

                Rectangle {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Layout.minimumHeight: 220
                    color: Theme.responseBackground
                    border.color: Theme.responseBorder
                    border.width: 1
                    radius: 8

                    Label {
                        anchors.centerIn: parent
                        text: "Main content area"
                        color: Theme.bodyColor
                        font.pixelSize: 20
                    }
                }

                // Keep the tab strip evenly distributed across the footer.
                Rectangle {
                    Layout.fillWidth: true
                    Layout.preferredHeight: Theme.tabBarHeight + (Theme.tabBarPadding * 2)
                    color: Theme.tabBarBackground
                    border.color: Theme.workspaceBorder
                    border.width: 1

                    RowLayout {
                        anchors.fill: parent
                        anchors.margins: Theme.tabBarPadding
                        spacing: Theme.tabSpacing

                        Repeater {
                            model: root.bottomTabs

                            Button {
                                id: botTabBtn
                                property bool isActive: index === root.selectedTabIndex

                                text: modelData
                                Layout.fillWidth: true
                                Layout.preferredHeight: Theme.tabBarHeight
                                Layout.minimumWidth: Theme.tabButtonMinWidth
                                onClicked: root.selectedTabIndex = index
                                hoverEnabled: true

                                background: Rectangle {
                                    color: botTabBtn.isActive ? Theme.tabActiveBackground : (botTabBtn.hovered ? Theme.tabHoverBackground : Theme.tabBackground)
                                    border.color: Theme.tabBorder
                                    border.width: 1
                                    radius: Theme.tabRadius
                                }

                                contentItem: Text {
                                    text: botTabBtn.text
                                    color: botTabBtn.isActive ? Theme.tabActiveText : Theme.tabText
                                    font.pixelSize: Theme.tabFontSize
                                    font.bold: botTabBtn.isActive
                                    horizontalAlignment: Text.AlignHCenter
                                    verticalAlignment: Text.AlignVCenter
                                    elide: Text.ElideRight
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}