init

2026-01-26 09:05:48 +08:00
commit f218a21377
20 changed files with 7774 additions and 0 deletions
--- a/ui/components/item.slint
+++ b/ui/components/item.slint
@@ -0,0 +1,89 @@
+// Item Component
+// List item with icon, title, description and selection state
+
+import { Theme, Typography, SpacingSystem } from "../theme/theme.slint";
+import { Animations } from "../utils/animations.slint";
+
+export component Item {
+    // Public properties
+    in property <string> icon: ""; // Text icon/emoji
+    in property <string> title;
+    in property <string> description: "";
+    in property <bool> selected: false;
+    
+    // Callbacks
+    callback clicked();
+    
+    // Internal state
+    private property <bool> hovered: false;
+    
+    min-height: 60px;
+    
+    // Main container
+    Rectangle {
+        background: selected ? Theme.colors.accent : 
+                   hovered ? Theme.colors.muted : 
+                   Colors.transparent;
+        border-radius: SpacingSystem.radius.md;
+        
+        animate background { 
+            duration: Animations.durations.fast; 
+            easing: Animations.ease-in-out; 
+        }
+        
+        HorizontalLayout {
+            padding: SpacingSystem.spacing.s3;
+            spacing: SpacingSystem.spacing.s3;
+            alignment: start;
+            
+            // Icon (if provided)
+            if icon != "": Rectangle {
+                width: 40px;
+                height: 40px;
+                border-radius: SpacingSystem.radius.md;
+                background: Theme.colors.muted;
+                
+                Text {
+                    text: icon;
+                    font-size: Typography.sizes.xl;
+                    horizontal-alignment: center;
+                    vertical-alignment: center;
+                }
+            }
+            
+            // Content area
+            VerticalLayout {
+                spacing: SpacingSystem.spacing.s1;
+                alignment: center;
+                
+                // Title
+                Text {
+                    text: title;
+                    font-size: Typography.sizes.base;
+                    font-weight: Typography.weights.medium;
+                    color: Theme.colors.foreground;
+                    wrap: word-wrap;
+                }
+                
+                // Description (if provided)
+                if description != "": Text {
+                    text: description;
+                    font-size: Typography.sizes.sm;
+                    color: Theme.colors.muted-foreground;
+                    wrap: word-wrap;
+                }
+            }
+        }
+        
+        // Touch interaction
+        TouchArea {
+            clicked => {
+                root.clicked();
+            }
+            
+            moved => {
+                hovered = self.has-hover;
+            }
+        }
+    }
+}