qbz/crates/qbz-slint/ui/shell/QconnectDevModal.slint

// Qobuz Connect — DEV diagnostics modal.
//
// Opened from the connect flyout's "Diagnostics" button. Shows a live status
// block (session topology / active+local renderer / queue version) and a rolling
// event log with relative timestamps. The Rust side (qconnect_service +
// qconnect_event_sink) populates QconnectDevState.status / .log. Backdrop or the
// X closes it (open is in-out, toggled directly here).

import { Theme } from "../foundation/semantic-colors.slint";
import { Typography } from "../foundation/typography.slint";
import { Radius } from "../foundation/radius.slint";
import { QconnectDevState } from "../state.slint";
import { QbzIcon } from "../primitives/QbzIcon.slint";
import { TextEdit } from "std-widgets.slint";

export component QconnectDevModal inherits Rectangle {
    visible: QconnectDevState.open;

    if QconnectDevState.open: Rectangle {
        background: #000000bf;
        TouchArea {
            mouse-cursor: default;
            clicked => {
                QconnectDevState.open = false;
            }
        }
        Rectangle {
            width: Math.min(root.width - 80px, 600px);
            height: Math.min(root.height - 80px, 640px);
            x: (parent.width - self.width) / 2;
            y: (parent.height - self.height) / 2;
            border-radius: Radius.md;
            background: Theme.surface-card;
            border-width: 1px;
            border-color: Theme.border-subtle;
            drop-shadow-blur: 32px;
            drop-shadow-color: #00000080;
            // Swallow clicks so they don't reach the backdrop.
            TouchArea { }

            VerticalLayout {
                padding: 20px;
                spacing: 14px;

                // Header.
                HorizontalLayout {
                    Text {
                        text: "Qobuz Connect — Diagnostics";
                        color: Theme.text-primary;
                        font-size: Typography.heading;
                        font-weight: Typography.semibold;
                        horizontal-stretch: 1;
                        vertical-alignment: center;
                    }
                    close-x := TouchArea {
                        width: 28px;
                        height: 28px;
                        mouse-cursor: pointer;
                        clicked => {
                            QconnectDevState.open = false;
                        }
                        QbzIcon {
                            source: @image-url("../assets/icons/x.svg");
                            width: 17px;
                            height: 17px;
                            x: (parent.width - self.width) / 2;
                            y: (parent.height - self.height) / 2;
                            tint: close-x.has-hover ? Theme.text-primary : Theme.text-muted;
                        }
                    }
                }

                // Live status block.
                Rectangle {
                    background: Theme.surface-elevated;
                    border-radius: Radius.sm;
                    height: 140px;
                    clip: true;
                    TextEdit {
                        width: 100%;
                        height: 100%;
                        read-only: true;
                        wrap: word-wrap;
                        font-size: 12px;
                        text: QconnectDevState.status == ""
                            ? "Not connected."
                            : QconnectDevState.status;
                    }
                }

                // Event-log header + clear.
                HorizontalLayout {
                    Text {
                        text: "Event log (newest first)";
                        color: Theme.text-primary;
                        font-size: Typography.body;
                        font-weight: Typography.semibold;
                        horizontal-stretch: 1;
                        vertical-alignment: center;
                    }
                    Rectangle {
                        width: clr.preferred-width + 22px;
                        height: 26px;
                        border-radius: Radius.sm;
                        background: clear-ta.has-hover ? Theme.surface-card : transparent;
                        border-width: 1px;
                        border-color: Theme.border-subtle;
                        clr := Text {
                            text: "Clear";
                            color: Theme.text-secondary;
                            font-size: 12px;
                            x: (parent.width - self.width) / 2;
                            y: (parent.height - self.height) / 2;
                        }
                        clear-ta := TouchArea {
                            mouse-cursor: pointer;
                            clicked => {
                                QconnectDevState.clear();
                            }
                        }
                    }
                }

                // Rolling event log (newest first) — read-only TextEdit so the
                // lines are selectable + copyable (Ctrl+C), and it scrolls.
                Rectangle {
                    vertical-stretch: 1;
                    TextEdit {
                        width: 100%;
                        height: 100%;
                        read-only: true;
                        wrap: word-wrap;
                        font-size: 11px;
                        text: QconnectDevState.log-text;
                    }
                }
            }
        }
    }
}