325 lines
No EOL
12 KiB
Text
325 lines
No EOL
12 KiB
Text
// App Layer - Main Application Entry Point
|
||
// This is the root of the application following Feature-Sliced Design
|
||
|
||
// No std-widgets needed since we're using Layout components
|
||
|
||
// Import from shared layer (design system, UI kit)
|
||
import { Theme } from "../shared/design-system/tokens/theme.slint";
|
||
|
||
// Import widgets (standalone UI blocks)
|
||
import { NavigationWidget } from "../widgets/navigation/index.slint";
|
||
|
||
// Import pages
|
||
import { Dashboard } from "../pages/dashboard/index.slint";
|
||
|
||
export component App {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
// Application state
|
||
in-out property <string> current-page: "Dashboard";
|
||
in-out property <string> user-initials: "JD";
|
||
|
||
// Callbacks
|
||
callback navigation-changed(string);
|
||
callback theme-toggle-clicked();
|
||
callback logout-clicked();
|
||
callback buy-clicked();
|
||
callback sell-clicked();
|
||
callback start-drag-window();
|
||
callback minimize-window();
|
||
callback maximize-window();
|
||
callback close-window();
|
||
|
||
// Global drag area - covers entire window but sits behind interactive elements
|
||
TouchArea {
|
||
width: 100%;
|
||
height: 100%;
|
||
z: -1;
|
||
|
||
moved => {
|
||
if (self.pressed) {
|
||
root.start-drag-window();
|
||
}
|
||
}
|
||
}
|
||
|
||
VerticalLayout {
|
||
spacing: 0px;
|
||
|
||
// Title Bar - fixed height
|
||
Rectangle {
|
||
height: 32px;
|
||
background: Theme.surface;
|
||
|
||
HorizontalLayout {
|
||
padding: 4px;
|
||
spacing: 8px;
|
||
|
||
// Draggable area (left side) - takes most of the space
|
||
Rectangle {
|
||
horizontal-stretch: 1;
|
||
|
||
Text {
|
||
text: "Ziya Trading Platform";
|
||
color: Theme.text-primary;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
vertical-alignment: center;
|
||
x: 8px;
|
||
}
|
||
}
|
||
|
||
// Theme Toggle Button - fixed size
|
||
Rectangle {
|
||
width: 40px;
|
||
height: 20px;
|
||
border-radius: 10px;
|
||
background: Theme.is-dark-mode ? Theme.primary : Theme.border;
|
||
|
||
Rectangle {
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 8px;
|
||
background: white;
|
||
x: Theme.is-dark-mode ? 22px : 2px;
|
||
y: 2px;
|
||
|
||
animate x { duration: 200ms; easing: ease-in-out; }
|
||
}
|
||
|
||
TouchArea {
|
||
clicked => {
|
||
theme-toggle-clicked();
|
||
}
|
||
}
|
||
}
|
||
|
||
// Window Controls - fixed size
|
||
HorizontalLayout {
|
||
spacing: 2px;
|
||
|
||
// Minimize Button
|
||
Rectangle {
|
||
width: 28px;
|
||
height: 24px;
|
||
border-radius: 2px;
|
||
background: minimize-area.pressed ? #30404040 : minimize-area.has-hover ? #20404040 : transparent;
|
||
|
||
Text {
|
||
text: "−";
|
||
color: Theme.text-primary;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
horizontal-alignment: center;
|
||
vertical-alignment: center;
|
||
}
|
||
|
||
minimize-area := TouchArea {
|
||
clicked => { minimize-window(); }
|
||
}
|
||
}
|
||
|
||
// Maximize Button
|
||
Rectangle {
|
||
width: 28px;
|
||
height: 24px;
|
||
border-radius: 2px;
|
||
background: maximize-area.pressed ? #30404040 : maximize-area.has-hover ? #20404040 : transparent;
|
||
|
||
Text {
|
||
text: "□";
|
||
color: Theme.text-primary;
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
horizontal-alignment: center;
|
||
vertical-alignment: center;
|
||
}
|
||
|
||
maximize-area := TouchArea {
|
||
clicked => { maximize-window(); }
|
||
}
|
||
}
|
||
|
||
// Close Button
|
||
Rectangle {
|
||
width: 28px;
|
||
height: 24px;
|
||
border-radius: 2px;
|
||
background: close-area.pressed ? #E53E3E : close-area.has-hover ? #C53030 : transparent;
|
||
|
||
Text {
|
||
text: "×";
|
||
color: close-area.has-hover ? white : Theme.text-primary;
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
horizontal-alignment: center;
|
||
vertical-alignment: center;
|
||
}
|
||
|
||
close-area := TouchArea {
|
||
clicked => { close-window(); }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Main content area - stretches to fill remaining vertical space
|
||
HorizontalLayout {
|
||
spacing: 0px;
|
||
|
||
// Navigation Widget (Sidebar) - fixed width
|
||
NavigationWidget {
|
||
width: 280px;
|
||
current-page: root.current-page;
|
||
user-initials: root.user-initials;
|
||
|
||
navigation-changed(page) => {
|
||
root.current-page = page;
|
||
root.navigation-changed(page);
|
||
}
|
||
|
||
logout-clicked => { root.logout-clicked(); }
|
||
}
|
||
|
||
// Main content area - stretches to fill remaining horizontal space
|
||
Rectangle {
|
||
background: Theme.background;
|
||
|
||
// Page routing based on current-page
|
||
if current-page == "Dashboard": Dashboard {
|
||
user-initials: root.user-initials;
|
||
logout => { root.logout-clicked(); }
|
||
trade-buy(asset, amount) => { root.buy-clicked(); }
|
||
trade-sell(asset, amount) => { root.sell-clicked(); }
|
||
}
|
||
|
||
if current-page == "Trading": Rectangle {
|
||
background: Theme.background;
|
||
|
||
VerticalLayout {
|
||
padding: 24px;
|
||
spacing: 16px;
|
||
alignment: center;
|
||
|
||
Text {
|
||
text: "🎯 Trading Interface";
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
color: Theme.text-primary;
|
||
horizontal-alignment: center;
|
||
}
|
||
|
||
Text {
|
||
text: "Advanced trading features coming soon...";
|
||
font-size: 18px;
|
||
color: Theme.text-secondary;
|
||
horizontal-alignment: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
if current-page == "Portfolio": Rectangle {
|
||
background: Theme.background;
|
||
|
||
VerticalLayout {
|
||
padding: 24px;
|
||
spacing: 16px;
|
||
alignment: center;
|
||
|
||
Text {
|
||
text: "💼 Portfolio Management";
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
color: Theme.text-primary;
|
||
horizontal-alignment: center;
|
||
}
|
||
|
||
Text {
|
||
text: "Portfolio tracking and management features coming soon...";
|
||
font-size: 18px;
|
||
color: Theme.text-secondary;
|
||
horizontal-alignment: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
if current-page == "Markets": Rectangle {
|
||
background: Theme.background;
|
||
|
||
VerticalLayout {
|
||
padding: 24px;
|
||
spacing: 16px;
|
||
alignment: center;
|
||
|
||
Text {
|
||
text: "📈 Market Data";
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
color: Theme.text-primary;
|
||
horizontal-alignment: center;
|
||
}
|
||
|
||
Text {
|
||
text: "Real-time market data and analysis coming soon...";
|
||
font-size: 18px;
|
||
color: Theme.text-secondary;
|
||
horizontal-alignment: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
if current-page == "HuntingGround": Rectangle {
|
||
background: Theme.background;
|
||
|
||
VerticalLayout {
|
||
padding: 24px;
|
||
spacing: 16px;
|
||
alignment: center;
|
||
|
||
Text {
|
||
text: "🎯 Token Hunting Ground";
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
color: Theme.text-primary;
|
||
horizontal-alignment: center;
|
||
}
|
||
|
||
Text {
|
||
text: "Discover and track new tokens coming soon...";
|
||
font-size: 18px;
|
||
color: Theme.text-secondary;
|
||
horizontal-alignment: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
if current-page == "Profile": Rectangle {
|
||
background: Theme.background;
|
||
|
||
VerticalLayout {
|
||
padding: 24px;
|
||
spacing: 16px;
|
||
alignment: center;
|
||
|
||
Text {
|
||
text: "👤 User Profile";
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
color: Theme.text-primary;
|
||
horizontal-alignment: center;
|
||
}
|
||
|
||
Text {
|
||
text: "Profile management and settings coming soon...";
|
||
font-size: 18px;
|
||
color: Theme.text-secondary;
|
||
horizontal-alignment: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
} |