shadcn-slint/ui/app.slint

// Main Application - Proxy Management Tool
import { Theme, Typography, SpacingSystem } from "theme/theme.slint";
import { Button } from "components/button.slint";
import { Sidebar, NavItem } from "components/sidebar.slint";
import { ToastContainer, ToastMessage } from "components/toast.slint";
import { Profile, ProxyGroup, Connection, LogEntry, SettingItem } from "types.slint";
import { ConnectionsPage } from "pages/connections.slint";
import { LogsPage } from "pages/logs.slint";
import { SettingsPage } from "pages/settings.slint";
import { ProfilesPage } from "pages/profiles.slint";
import { HomePage } from "pages/home.slint";
import { ProxiesPage } from "pages/proxies.slint";

export component App inherits Window {
    title: "Proxy Manager";
    background: Theme.colors.background;

    // Window size settings
    min-width: 800px;
    min-height: 600px;
    preferred-width: 1000px;
    preferred-height: 700px;

    // ===== Application State =====
    in-out property <string> current-view: "home";
    in-out property <bool> sidebar-collapsed: false;

    // ===== Data State =====
    in-out property <Profile> current-profile;
    in-out property <[Profile]> profiles: [];
    in-out property <[ProxyGroup]> proxy-groups: [];
    in-out property <string> proxy-mode: "rule";  // "rule" | "global" | "direct"
    in-out property <[Connection]> connections: [];
    in-out property <[LogEntry]> mihomo-logs: [];
    in-out property <[LogEntry]> app-logs: [];
    in-out property <[SettingItem]> app-settings: [];
    in-out property <[SettingItem]> clash-settings: [];
    in-out property <[ToastMessage]> toasts: [];

    // ===== Callbacks (Rust Implementation) =====
    // Data loading
    callback load-profiles();
    callback load-proxy-groups(string /* mode: rule/global/direct */);
    callback load-connections();
    callback load-logs(string /* type: mihomo/app */);
    callback load-settings();

    // User actions
    callback select-profile(string /* profile-id */);
    callback select-proxy(string /* group-name */, string /* node-name */);
    callback test-proxy-delay(string /* node-name */);
    callback toggle-setting(string /* key */, bool /* value */);
    callback update-profile(string /* profile-id */);
    callback delete-profile(string /* profile-id */);
    callback add-profile(string /* url */);

    // Toast notification
    callback show-toast(string /* message */, string /* type */);

    // Sidebar navigation items
    property <[NavItem]> nav-items: [
        { icon: "🏠", label: "Home", active: current-view == "home" },
        { icon: "🌍", label: "Proxies", active: current-view == "proxies" },
        { icon: "📋", label: "Profiles", active: current-view == "profiles" },
        { icon: "🔗", label: "Connections", active: current-view == "connections" },
        { icon: "📝", label: "Logs", active: current-view == "logs" },
        { icon: "⚙", label: "Settings", active: current-view == "settings" },
    ];

    // Main layout
    VerticalLayout {
        // Top bar
        Rectangle {
            height: 60px;
            background: Theme.colors.card;

            // Bottom border
            Rectangle {
                y: parent.height - 1px;
                height: 1px;
                background: Theme.colors.border;
            }

            HorizontalLayout {
                padding: SpacingSystem.spacing.s4;
                spacing: SpacingSystem.spacing.s4;
                alignment: space-between;

                // Left: Title
                HorizontalLayout {
                    spacing: SpacingSystem.spacing.s3;
                    alignment: start;

                    Text {
                        text: "🔐 Proxy Manager";
                        font-size: Typography.sizes.xl;
                        font-weight: Typography.weights.bold;
                        color: Theme.colors.foreground;
                        vertical-alignment: center;
                    }
                }

                // Right: Theme toggle button
                Button {
                    text: Theme.is-dark-mode ? "☀ Light" : "🌙 Dark";
                    variant: "outline";
                    size: "sm";

                    clicked => {
                        Theme.toggle-theme();
                    }
                }
            }
        }

        // Main content area
        HorizontalLayout {
            // Sidebar
            Sidebar {
                items: nav-items;
                collapsed: sidebar-collapsed;

                item-clicked(index) => {
                    if index == 0 {
                        current-view = "home";
                        root.load-profiles();
                        root.load-settings();
                    }
                    else if index == 1 {
                        current-view = "proxies";
                        root.load-proxy-groups(proxy-mode);
                    }
                    else if index == 2 {
                        current-view = "profiles";
                        root.load-profiles();
                    }
                    else if index == 3 {
                        current-view = "connections";
                        root.load-connections();
                    }
                else if index == 4 {
                        current-view = "logs";
                        root.load-logs("mihomo");
                    }
                    else if index == 5 {
                        current-view = "settings";
                        root.load-settings();
                    }
                }

                toggle-collapsed => {
                    sidebar-collapsed = !sidebar-collapsed;
                }
            }

            // Main content area - Pages
            Rectangle {
                background: Theme.colors.background;
                horizontal-stretch: 1;
                vertical-stretch: 1;

                // Home page
                if current-view == "home": HomePage {
                    current-profile: root.current-profile;
                    quick-settings: root.app-settings;

                    load-home-data => {
                        root.load-profiles();
                        root.load-settings();
                    }

                    toggle-setting(key, value) => {
                        root.toggle-setting(key, value);
                    }
                }

                // Proxies page
                if current-view == "proxies": ProxiesPage {
                    proxy-groups: root.proxy-groups;
                    proxy-mode: root.proxy-mode;

                    load-proxy-groups(mode) => {
                        root.proxy-mode = mode;
                        root.load-proxy-groups(mode);
                    }

                    select-proxy(group-name, node-name) => {
                        root.select-proxy(group-name, node-name);
                    }

                    test-proxy-delay(node-name) => {
                        root.test-proxy-delay(node-name);
                    }
                }

                // Profiles page
                if current-view == "profiles": ProfilesPage {
                    profiles: root.profiles;

                    load-profiles => {
                        root.load-profiles();
                    }

                    select-profile(profile-id) => {
                        root.select-profile(profile-id);
                    }

                    update-profile(profile-id) => {
                        root.update-profile(profile-id);
                    }

                    delete-profile(profile-id) => {
                        root.delete-profile(profile-id);
                    }

                    add-profile => {
                        root.add-profile("");
                    }
                }

                // Connections page
                if current-view == "connections": ConnectionsPage {
                    connections: root.connections;

                    load-connections => {
                        root.load-connections();
                    }
                }

                // Logs page
                if current-view == "logs": LogsPage {
                    mihomo-logs: root.mihomo-logs;
                    app-logs: root.app-logs;

                    load-logs(log-type) => {
                        root.load-logs(log-type);
                    }
                }

                // Settings page
                if current-view == "settings": SettingsPage {
                    app-settings: root.app-settings;
                    clash-settings: root.clash-settings;

                    load-settings => {
                        root.load-settings();
                    }

                    toggle-setting(key, value) => {
                        root.toggle-setting(key, value);
                    }
                }
            }
        }
    }

    // Toast container
    Rectangle {
        x: parent.width - 390px;
        y: 20px;
        width: 370px;

        ToastContainer {
            toasts: toasts;

            toast-dismissed(index) => {
                // Will be handled by Rust
            }
        }
    }
}