feat(demo): integrate route context for nav and enhance ProgressDemo

- Inject RouteContext in MainTemplate to properly set nav current_path
- Add comprehensive inline styles to ProgressDemo for improved visuals

demo/DemoComponents/ProgressDemo.vala

@@ -18,21 +18,22 @@ public class ProgressDemo : Component {
     
     public override string markup { get {
         return """
-        <div sid="progress" spry-continuation class="demo-progress">
-            <div spry-dynamic="progress-bar" class="progress-bar-container">
+        <div sid="progress" spry-continuation class="demo-progress" style="padding: 20px; background: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef;">
+            <div spry-dynamic="progress-bar" class="progress-bar-container" style="background: #e0e0e0; border-radius: 8px; overflow: hidden; margin: 15px 0; height: 24px;">
                 <div sid="progress-bar" class="progress-bar"
-                     style-width-expr='format("%i%%", this.percent)'>
+                     style-width-expr='format("%i%%", this.percent)'
+                     style="height: 100%; background: linear-gradient(90deg, #4CAF50, #8BC34A); transition: width 0.3s ease; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px; min-width: 40px;">
                 </div>
             </div>
-            <div spry-dynamic="status" class="progress-info">
-                <span sid="percent-text" class="progress-percent" spry-unique content-expr='format("%i%%", this.percent)'>0%</span>
-                <span sid="status-text" class="progress-status" spry-unique content-expr="this.status">Ready</span>
+            <div spry-dynamic="status" class="progress-info" style="display: flex; justify-content: space-between; align-items: center; margin: 15px 0;">
+                <span sid="percent-text" class="progress-percent" spry-unique content-expr='format("%i%%", this.percent)' style="font-weight: bold; color: #333; font-size: 18px;">0%</span>
+                <span sid="status-text" class="progress-status" spry-unique content-expr="this.status" style="color: #666; font-size: 14px; padding: 6px 12px; background: #e9ecef; border-radius: 4px; border-left: 3px solid #2196F3;">Ready</span>
             </div>
-            <div class="progress-controls">
+            <div class="progress-controls" style="display: flex; gap: 10px; margin-top: 15px;">
                 <button sid="start-btn" spry-action=":Start" spry-target="progress"
-                        class="progress-btn">Start Task</button>
+                        class="progress-btn" style="padding: 10px 20px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 500; transition: background 0.2s;">Start Task</button>
                 <button sid="reset-btn" spry-action=":Reset" spry-target="progress"
-                        class="progress-btn secondary">Reset</button>
+                        class="progress-btn secondary" style="padding: 10px 20px; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 500; transition: background 0.2s;">Reset</button>
             </div>
         </div>
         """;

demo/MainTemplate.vala

@@ -15,6 +15,7 @@ using Inversion;
 public class MainTemplate : PageTemplate {
     
     private NavSidebarComponent nav;
+    private RouteContext route_context = inject<RouteContext>();
     
     public override string markup { get {
         return """
@@ -41,8 +42,8 @@ public class MainTemplate : PageTemplate {
     }}
     
     public override async void prepare() throws Error {
-        // Get the nav component - it will use its default current_path
-        // Pages that need to set a specific current path should do so in their own prepare()
+        // Get the nav component and set the current path from the route context
         nav = get_component_child<NavSidebarComponent>("nav");
+        nav.current_path = route_context.requested_path;
     }
 }