Windows-Gotify-Client-Rust/ui/dialogs.slint

// AGENTS.md §54 modals.
//
// Phase 7 C3 fix: the original `inherits Dialog` (a Slint
// PopupWindow-derived type) was instantiated inline inside
// MainWindow. PopupWindow expects to be `.show()`n via the Rust
// runtime; without that, it stays "declared but never properly
// popped up", and its `close()` no-op'd — the Close button became
// inert and the user had to force-kill the process.
//
// Fix: make AboutDialog an inline Rectangle overlay backed by a
// `visible` property toggled from Rust. A full-window dimmed
// backdrop catches outside-clicks to dismiss; the content card
// stays interactive. Same wiring pattern the rest of the UI uses
// (Slint `if root.show-about: AboutDialog { ... }`).

export component AboutDialog inherits Rectangle {
    in property <string> version-string: "v0.1.0";
    in property <string> build-date: "2026-09-19";

    in property <color> bg-color: #28292d;
    in property <color> text-primary-color: #e6e6e6;
    in property <color> text-secondary-color: #a0a0a0;
    in property <color> accent-color: #4ea1ff;
    in property <color> button-bg: #2f3035;
    in property <color> button-border: #3a3b40;
    in property <color> backdrop-color: #000000;

    callback close-dialog();

    background: transparent;

    // Backdrop: full-window dimmed layer that swallows clicks so
    // clicking outside the card dismisses the dialog.
    Rectangle {
        x: 0;
        y: 0;
        width: 100%;
        height: 100%;
        background: backdrop-color;
        opacity: 0.55;
        TouchArea {
            clicked => {
                root.close-dialog();
            }
        }
    }

    // Card: 360x240-ish centered modal content.
    Rectangle {
        x: (parent.width - self.width) / 2;
        y: (parent.height - self.height) / 2;
        width: 380px;
        height: 280px;
        background: bg-color;
        border-color: button-border;
        border-width: 1px;
        border-radius: 12px;

        VerticalLayout {
            padding: 24px;
            spacing: 10px;

            Text {
                text: "Windows Gotify Client (Rust)";
                color: text-primary-color;
                font-size: 16px;
                font-weight: 700;
            }
            Text {
                text: version-string;
                color: accent-color;
                font-size: 13px;
            }
            Text {
                text: "Built " + build-date;
                color: text-secondary-color;
                font-size: 11px;
            }
            Rectangle { height: 8px; }
            Text {
                text: "Lightweight, modern, Windows-native Gotify\ndesktop client. Phase 1–8 complete.";
                color: text-secondary-color;
                font-size: 12px;
                wrap: word-wrap;
            }
            Rectangle { height: 8px; }

            // Close button row.
            HorizontalLayout {
                alignment: end;
                Rectangle {
                    width: 100px;
                    height: 32px;
                    background: button-bg;
                    border-color: button-border;
                    border-width: 1px;
                    border-radius: 6px;
                    Text {
                        x: (parent.width - self.width) / 2;
                        y: (parent.height - self.height) / 2;
                        text: "Close";
                        color: text-primary-color;
                        font-size: 12px;
                    }
                    // TouchArea last so it sits on top of the Text.
                    TouchArea {
                        clicked => {
                            root.close-dialog();
                        }
                    }
                }
            }
        }
    }
}

export component ConfirmDialog inherits Rectangle {
    in property <string> title-text: "Confirm";
    in property <string> message: "Are you sure?";
    in property <string> confirm-label: "Confirm";
    in property <string> cancel-label: "Cancel";

    callback confirmed();
    callback cancelled();

    in property <color> bg-color: #28292d;
    in property <color> text-primary-color: #e6e6e6;
    in property <color> text-secondary-color: #a0a0a0;
    in property <color> danger-color: #f44336;
    in property <color> button-bg: #2f3035;
    in property <color> button-border: #3a3b40;
    in property <color> backdrop-color: #000000;

    background: transparent;

    Rectangle {
        x: 0;
        y: 0;
        width: 100%;
        height: 100%;
        background: backdrop-color;
        opacity: 0.55;
        TouchArea {
            clicked => {
                root.cancelled();
            }
        }
    }

    Rectangle {
        x: (parent.width - self.width) / 2;
        y: (parent.height - self.height) / 2;
        width: 380px;
        height: 180px;
        background: bg-color;
        border-color: button-border;
        border-width: 1px;
        border-radius: 12px;

        VerticalLayout {
            padding: 24px;
            spacing: 16px;

            Text {
                text: message;
                color: text-primary-color;
                font-size: 13px;
                wrap: word-wrap;
            }

            HorizontalLayout {
                spacing: 12px;

                Rectangle { horizontal-stretch: 1; }

                Rectangle {
                    width: 90px;
                    height: 32px;
                    background: button-bg;
                    border-color: button-border;
                    border-width: 1px;
                    border-radius: 6px;
                    Text {
                        x: (parent.width - self.width) / 2;
                        y: (parent.height - self.height) / 2;
                        text: cancel-label;
                        color: text-primary-color;
                        font-size: 12px;
                    }
                    TouchArea {
                        clicked => {
                            root.cancelled();
                        }
                    }
                }
                Rectangle {
                    width: 90px;
                    height: 32px;
                    background: danger-color;
                    border-radius: 6px;
                    Text {
                        x: (parent.width - self.width) / 2;
                        y: (parent.height - self.height) / 2;
                        text: confirm-label;
                        color: #ffffff;
                        font-size: 12px;
                        font-weight: 600;
                    }
                    TouchArea {
                        clicked => {
                            root.confirmed();
                        }
                    }
                }
            }
        }
    }
}