Ziya/ui/app/index.slint

// App Layer - Main Application Entry Point
// This is the root of the application following Feature-Sliced Design

// Import std-widgets for Palette
import { Palette } from "std-widgets.slint";
import { NewTokenUiData, CexUpdatedUiData, MaxDepthReachedUiData } from "../shared/types/token.slint";

// Import widgets (standalone UI blocks)
import { NavigationWidget } from "../widgets/navigation/index.slint";
import { TitleBar } from "../widgets/window-controls/ui/title-bar.slint";

// Import pages
import { Dashboard } from "../pages/dashboard/index.slint";
import { HuntingGroundPage } from "../pages/hunting-ground/index.slint";
import { TradingPage } from "../pages/trading/index.slint";
import { PortfolioPage } from "../pages/portfolio/index.slint";
import { MarketsPage } from "../pages/markets/index.slint";
import { LoginView } from "../pages/auth/index.slint";
import { LoadingView } from "../shared/ui/index.slint";

export component App inherits Window {
    title: "Ziya - One Stop Shop for Your Trading Habit";
    min-width: 1280px;
    min-height: 720px;
    
    // Disable default background
    background: transparent;
    
    // Theme state
    in-out property <bool> is-dark-mode: false;
    
    // Application state management
    in-out property <string> app-state: "loading"; // "loading", "login", "authenticated"
    in-out property <bool> is-authenticated: false;
    in-out property <string> user-email: "";
    in-out property <string> sidebar-state: "full"; // "full", "icon-only", or "hidden"
    
    // Loading state
    in-out property <bool> is-loading: true;
    in-out property <bool> has-connection-error: false;
    in-out property <string> loading-status: "Initializing your trading environment...";
    
    // Navigation state
    in-out property <string> current-page: "Dashboard";
    in-out property <string> user-initials: "JD";
    
    // Token data
    in-out property <[NewTokenUiData]> new-tokens: [];
    in-out property <[CexUpdatedUiData]> cex-tokens: [];
    in-out property <[MaxDepthReachedUiData]> analysis-tokens: [];
    in-out property <int> current-time: 0;
    
    // Callbacks for application state
    callback health-check-completed(bool); // true if healthy, false if error
    callback retry-health-check();
    callback login-attempt(string, string);
    callback logout-requested();
    callback authenticate-user(string);
    
    // Callbacks for window controls
    callback start-drag-window();
    callback minimize-window();
    callback maximize-window();
    callback close-window();
    callback theme-toggle-clicked();
    
    // Callbacks for navigation
    callback navigation-changed(string);
    callback toggle-sidebar();
    
    // Callbacks for hunting ground
    callback refresh-hunting-ground();
    callback clear-column(string);
    
    // Other callbacks
    callback logout-clicked();
    callback buy-clicked();
    callback sell-clicked();
    callback clear-new-tokens();
    callback clear-cex-tokens();
    callback clear-analysis-tokens();
    
    Rectangle {
        background: Palette.background;
        width: 100%;
        height: 100%;
        
        // Apply overflow hidden to prevent scrolling
        clip: true;

        // Loading Screen
        if app-state == "loading": LoadingView {
            is-loading: root.is-loading;
            has-error: root.has-connection-error;
            status-text: root.loading-status;
            
            retry-connection => {
                root.retry-health-check();
            }
        }
        
        // Login Screen
        if app-state == "login": VerticalLayout {
            spacing: 0px;
            
            // Title Bar (fixed height)
            TitleBar {
                height: 40px;
                is-dark-theme: root.is-dark-mode;
                minimize-window => {
                    root.minimize-window();
                }
                maximize-window => {
                    root.maximize-window();
                }
                close-window => {
                    root.close-window();
                }
                toggle-theme => {
                    root.is-dark-mode = !root.is-dark-mode;
                    if (root.is-dark-mode) {
                        Palette.color-scheme = ColorScheme.dark;
                    } else {
                        Palette.color-scheme = ColorScheme.light;
                    }
                    root.theme-toggle-clicked();
                }
            }
            
            LoginView {
                login-clicked(email, password) => {
                    root.login-attempt(email, password);
                }
                
                navigate-to-dashboard => {
                    // Demo mode - skip login
                    root.authenticate-user("demo@ziya.trading");
                }
                
                back-to-loading => {
                    root.app-state = "loading";
                    root.retry-health-check();
                }
            }
        }
        
        // Main Application (Authenticated State)
        if app-state == "authenticated": VerticalLayout {
            spacing: 0px;
            // Title Bar (fixed height)
            TitleBar {
                height: 40px;
                is-dark-theme: root.is-dark-mode;
                minimize-window => {
                    root.minimize-window();
                }
                maximize-window => {
                    root.maximize-window();
                }
                close-window => {
                    root.close-window();
                }
                toggle-theme => {
                    root.is-dark-mode = !root.is-dark-mode;
                    if (root.is-dark-mode) {
                        Palette.color-scheme = ColorScheme.dark;
                    } else {
                        Palette.color-scheme = ColorScheme.light;
                    }
                    root.theme-toggle-clicked();
                }
            }
            
            // Main Content Area (stretches to fill remaining space)
            HorizontalLayout {
                spacing: 0px;
                
                // Navigation Sidebar (different states)
                if sidebar-state == "full": NavigationWidget {
                    width: 280px;
                    current-page: root.current-page;
                    user-initials: root.user-initials;
                    sidebar-state: root.sidebar-state;
                    navigation-changed(page) => {
                        root.current-page = page;
                        root.navigation-changed(page);
                    }
                    logout-clicked => {
                        root.logout-requested();
                    }
                    toggle-sidebar => {
                        root.sidebar-state = "icon-only";
                    }
                }
                
                if sidebar-state == "icon-only": NavigationWidget {
                    width: 80px;
                    current-page: root.current-page;
                    user-initials: root.user-initials;
                    sidebar-state: root.sidebar-state;
                    navigation-changed(page) => {
                        root.current-page = page;
                        root.navigation-changed(page);
                    }
                    logout-clicked => {
                        root.logout-requested();
                    }
                    toggle-sidebar => {
                        root.sidebar-state = "full";
                    }
                }
                
                // Page Content (stretches to fill remaining space)
                Rectangle {
                    background: Palette.background;
                    
                    // Content container with proper centering
                    VerticalLayout {
                        alignment: stretch;
                        
                        // Route to different pages
                        if current-page == "Dashboard": Dashboard {
                            user-initials: root.user-initials;
                            logout => {
                                root.logout-requested();
                            }
                        }
                        
                        if current-page == "Hunting Ground": HuntingGroundPage {
                            new-tokens: root.new-tokens;
                            cex-tokens: root.cex-tokens;
                            analysis-tokens: root.analysis-tokens;
                            current-time: root.current-time;
                            
                            clear-new-tokens => {
                                root.clear-new-tokens();
                            }
                            
                            clear-cex-tokens => {
                                root.clear-cex-tokens();
                            }
                            
                            clear-analysis-tokens => {
                                root.clear-analysis-tokens();
                            }
                        }
                        
                        if current-page == "Trading": TradingPage {
                            buy-clicked => {
                                root.buy-clicked();
                            }
                            sell-clicked => {
                                root.sell-clicked();
                            }
                        }
                        
                        if current-page == "Portfolio": PortfolioPage {
                        }
                        
                        if current-page == "Markets": MarketsPage {
                        }
                    }
                }
            }
        }
    }

}