feat(dash): improved frontend dashboard (#6)

Co-authored-by: Sharang Parnerkar <parnerkarsharang@gmail.com>
Reviewed-on: #6

src/components/sidebar.rs

@@ -1,8 +1,8 @@
 use dioxus::prelude::*;
 use dioxus_free_icons::icons::bs_icons::{
-    BsBoxArrowRight, BsFileEarmarkText, BsGear, BsGithub, BsGrid, BsHouseDoor, BsRobot,
+    BsBoxArrowRight, BsBuilding, BsChatDots, BsCloudArrowUp, BsCodeSlash, BsCollection, BsGithub,
+    BsGrid, BsHouseDoor, BsPuzzle,
 };
-use dioxus_free_icons::icons::fa_solid_icons::FaCubes;
 use dioxus_free_icons::Icon;
 
 use crate::Route;
@@ -25,29 +25,39 @@ struct NavItem {
 pub fn Sidebar(email: String, avatar_url: String) -> Element {
     let nav_items: Vec<NavItem> = vec![
         NavItem {
-            label: "Overview",
-            route: Route::OverviewPage {},
+            label: "Dashboard",
+            route: Route::DashboardPage {},
             icon: rsx! { Icon { icon: BsHouseDoor, width: 18, height: 18 } },
         },
         NavItem {
-            label: "Documentation",
-            route: Route::OverviewPage {},
-            icon: rsx! { Icon { icon: BsFileEarmarkText, width: 18, height: 18 } },
+            label: "Providers",
+            route: Route::ProvidersPage {},
+            icon: rsx! { Icon { icon: BsCloudArrowUp, width: 18, height: 18 } },
         },
         NavItem {
-            label: "Agents",
-            route: Route::OverviewPage {},
-            icon: rsx! { Icon { icon: BsRobot, width: 18, height: 18 } },
+            label: "Chat",
+            route: Route::ChatPage {},
+            icon: rsx! { Icon { icon: BsChatDots, width: 18, height: 18 } },
         },
         NavItem {
-            label: "Models",
-            route: Route::OverviewPage {},
-            icon: rsx! { Icon { icon: FaCubes, width: 18, height: 18 } },
+            label: "Tools",
+            route: Route::ToolsPage {},
+            icon: rsx! { Icon { icon: BsPuzzle, width: 18, height: 18 } },
         },
         NavItem {
-            label: "Settings",
-            route: Route::OverviewPage {},
-            icon: rsx! { Icon { icon: BsGear, width: 18, height: 18 } },
+            label: "Knowledge Base",
+            route: Route::KnowledgePage {},
+            icon: rsx! { Icon { icon: BsCollection, width: 18, height: 18 } },
+        },
+        NavItem {
+            label: "Developer",
+            route: Route::AgentsPage {},
+            icon: rsx! { Icon { icon: BsCodeSlash, width: 18, height: 18 } },
+        },
+        NavItem {
+            label: "Organization",
+            route: Route::OrgPricingPage {},
+            icon: rsx! { Icon { icon: BsBuilding, width: 18, height: 18 } },
         },
     ];
 
@@ -56,15 +66,22 @@ pub fn Sidebar(email: String, avatar_url: String) -> Element {
 
     rsx! {
         aside { class: "sidebar",
-            // -- Header: avatar circle + email --
             SidebarHeader { email: email.clone(), avatar_url }
 
-            // -- Navigation links --
             nav { class: "sidebar-nav",
                 for item in nav_items {
                     {
-                        // Simple active check: highlight Overview only when on `/`.
-                        let is_active = item.route == current_route;
+                        // Active detection for nested routes: highlight the parent nav
+                        // item when any child route within the nested shell is active.
+                        let is_active = match &current_route {
+                            Route::AgentsPage {} | Route::FlowPage {} | Route::AnalyticsPage {} => {
+                                item.label == "Developer"
+                            }
+                            Route::OrgPricingPage {} | Route::OrgDashboardPage {} => {
+                                item.label == "Organization"
+                            }
+                            _ => item.route == current_route,
+                        };
                         let cls = if is_active { "sidebar-link active" } else { "sidebar-link" };
                         rsx! {
                             Link { to: item.route, class: cls,
@@ -76,7 +93,6 @@ pub fn Sidebar(email: String, avatar_url: String) -> Element {
                 }
             }
 
-            // -- Logout button --
             div { class: "sidebar-logout",
                 Link {
                     to: NavigationTarget::<Route>::External("/auth/logout".into()),
@@ -86,7 +102,6 @@ pub fn Sidebar(email: String, avatar_url: String) -> Element {
                 }
             }
 
-            // -- Footer: version + social links --
             SidebarFooter {}
         }
     }