-

ui/pages/connections.slint

@@ -1,130 +1,57 @@
-import { Theme, SpacingSystem, Typography } from "../theme/theme.slint";
+// 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 struct Connection {
-    source: string,
-    destination: string,
-    protocol: string,
-    upload: string,
-    download: string,
-    duration: string,
-}
+export component ConnectionsPage inherits Rectangle {
+    in property <[Connection]> connections;
+
+    callback load-connections();
+
+    background: Theme.colors.background;
 
-export component ConnectionsPage {
-    in property <[Connection]> connections: [];
-    
     VerticalLayout {
-        padding: SpacingSystem.spacing.s4;
-        spacing: SpacingSystem.spacing.s4;
-        
-        // Header
-        Text {
-            text: "Connections";
-            color: Theme.colors.foreground;
-            font-size: Typography.sizes.xl;
-            font-weight: Typography.weights.bold;
-        }
-        
-        // Connections List
-        ScrollView {
-            VerticalLayout {
-                spacing: SpacingSystem.spacing.s2;
-                
-                for connection in root.connections: ConnectionItem {
-                    connection-data: connection;
-                }
-            }
-        }
-    }
-}
+        // Fixed header
+        Rectangle {
+            height: 48px;
+            background: Theme.colors.background;
+
+            HorizontalLayout {
+                padding: SpacingSystem.spacing.s4;
 
-component ConnectionItem {
-    in property <Connection> connection-data;
-    
-    private property <bool> hovered: false;
-    
-    height: 60px;
-    
-    states [
-        hovered when root.hovered: {
-            container.background: Theme.colors.muted.transparentize(0.5);
-        }
-    ]
-    
-    container := Rectangle {
-        background: transparent;
-        border-radius: SpacingSystem.radius.md;
-        border-width: 1px;
-        border-color: Theme.colors.border;
-        
-        animate background { duration: 150ms; }
-        
-        HorizontalLayout {
-            padding: SpacingSystem.spacing.s3;
-            spacing: SpacingSystem.spacing.s3;
-            alignment: space-between;
-            
-            // Icon
-            Rectangle {
-                width: 40px;
-                height: 40px;
-                border-radius: SpacingSystem.radius.md;
-                background: Theme.colors.primary.transparentize(0.9);
-                
                 Text {
-                    text: "🔗";
-                    font-size: Typography.sizes.lg;
-                    horizontal-alignment: center;
+                    text: "Connections";
+                    font-size: Typography.sizes.xl;
+                    font-weight: Typography.weights.bold;
+                    color: Theme.colors.foreground;
                     vertical-alignment: center;
                 }
             }
-            
-            // Connection Info
-            VerticalLayout {
-                spacing: SpacingSystem.spacing.s1;
-                
-                Text {
-                    text: root.connection-data.source + " → " + root.connection-data.destination;
-                    color: Theme.colors.foreground;
-                    font-size: Typography.sizes.sm;
-                    font-weight: Typography.weights.medium;
-                    overflow: elide;
-                }
-                
-                HorizontalLayout {
-                    spacing: SpacingSystem.spacing.s3;
-                    
-                    Text {
-                        text: root.connection-data.protocol;
-                        color: Theme.colors.muted-foreground;
-                        font-size: Typography.sizes.xs;
-                    }
-                    
-                    Text {
-                        text: "↑ " + root.connection-data.upload;
-                        color: Theme.colors.primary;
-                        font-size: Typography.sizes.xs;
-                    }
-                    
-                    Text {
-                        text: "↓ " + root.connection-data.download;
-                        color: Theme.colors.secondary;
-                        font-size: Typography.sizes.xs;
-                    }
-                }
-            }
-            
-            // Duration
-            Text {
-                text: root.connection-data.duration;
-                color: Theme.colmuted-foreground;
-                font-size: Typography.sizes.xs;
-                vertical-alignment: center;
-            }
         }
-        
-        touch := TouchArea {
-            moved => {
-                root.hovered = self.has-hover;
+
+        // 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;
+                }
             }
         }
     }