59 lines
1.9 KiB
Plaintext
59 lines
1.9 KiB
Plaintext
// Connections Page - Display active connections list
|
|
import { Theme, Typography, SpacingSystem } from "../theme/theme.slint";
|
|
import { Item } from "../components/item.slint";
|
|
import { Empty } from "../components/empty.slint";
|
|
import { Connection } from "../types.slint";
|
|
|
|
export component ConnectionsPage inherits Rectangle {
|
|
in property <[Connection]> connections;
|
|
|
|
callback load-connections();
|
|
|
|
background: Theme.colors.background;
|
|
|
|
VerticalLayout {
|
|
// Fixed header
|
|
Rectangle {
|
|
height: 48px;
|
|
background: Theme.colors.background;
|
|
|
|
HorizontalLayout {
|
|
padding: SpacingSystem.spacing.s4;
|
|
|
|
Text {
|
|
text: "Connections";
|
|
font-size: Typography.sizes.xl;
|
|
font-weight: Typography.weights.bold;
|
|
color: Theme.colors.foreground;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Scrollable content
|
|
Flickable {
|
|
viewport-height: content-layout.preferred-height + SpacingSystem.spacing.s4 * 2;
|
|
|
|
content-layout := VerticalLayout {
|
|
padding: SpacingSystem.spacing.s4;
|
|
spacing: SpacingSystem.spacing.s2;
|
|
|
|
// Empty state
|
|
if connections.length == 0: Empty {
|
|
height: 300px;
|
|
icon: "🔗";
|
|
title: "No Active Connections";
|
|
description: "Connections will appear here when active";
|
|
}
|
|
|
|
// Connection list
|
|
for connection in connections: Item {
|
|
icon: "✓";
|
|
title: connection.host;
|
|
description: "Process: " + connection.process + " | Rule: " + connection.rule + " | ↑ " + connection.upload + " ↓ " + connection.download;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|