address couple of john code review commends

- [ ] Reorder the Home Screen in a way so that it will be easy and accessible for the user to understand [ @vasanth Kumar  ]
- [ ] [@ComponentsCreation] Add the File System in Component Creation and Component details Pages
- [ ] [@ComponentsDetails] Redefined the export page field from the components file
- [ ] [@ComponentsDetails] Display the Worker page only for the Durable worker
- [ ] [@ComponentsDetails] Add Invoke page for Ephemeral Components
- [ ] [@WorkerDetails] Allow User to update the version of the worker using API
- [ ] [@RouteCreation] Suggestion in the response and worker name
- [ ] [@APIDeplument] Need handle the Api deployment with the link to all navigation
- [ ] [@APIDeplument] Need handle copy to curl option to invoke the api though the curl for testing right away

Signed-off-by: itsparser <itsparser@gmail.com>

crates/app/package.json

@@ -11,11 +11,12 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
-    "@radix-ui/react-alert-dialog": "^1.1.4",
+    "@radix-ui/react-alert-dialog": "^1.1.5",
+    "@radix-ui/react-avatar": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.1.3",
     "@radix-ui/react-collapsible": "^1.1.2",
-    "@radix-ui/react-dialog": "^1.1.4",
-    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-dialog": "^1.1.5",
+    "@radix-ui/react-dropdown-menu": "^2.1.5",
     "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-popover": "^1.1.4",
     "@radix-ui/react-radio-group": "^1.2.2",
@@ -25,7 +26,7 @@
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.2",
     "@radix-ui/react-toast": "^1.2.4",
-    "@radix-ui/react-tooltip": "^1.1.6",
+    "@radix-ui/react-tooltip": "^1.1.7",
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-fs": "^2.2.0",
     "@tauri-apps/plugin-http": "^2.2.0",

crates/app/src/App.tsx

@@ -32,6 +32,7 @@ import CreateDeployment from "@/pages/deployment/create";
 import {ApiLayout} from "./pages/api/details/api-layout";
 import ComponentInvoke from "@/pages/components/details/invoke";
 import Plugins from "@/pages/components/details/plugin.tsx";
+import {ComponentLayout} from "@/pages/components/details/component-layout.tsx";
 
 function App() {
     return (
@@ -47,41 +48,21 @@ function App() {
                         <Route path="/components/create" element={<CreateComponent/>}/>
                         <Route
                             path="/components/:componentId"
-                            element={<ComponentDetails/>}
-                        />
-                        <Route
-                            path="/components/:componentId/settings"
-                            element={<ComponentSettings/>}
-                        />
-                        <Route
-                            path="/components/:componentId/update"
-                            element={<ComponentUpdate/>}
-                        />
-                        <Route
-                            path="/components/:componentId/info"
-                            element={<ComponentInfo/>}
-                        />
-                        <Route
-                            path="/components/:componentId/exports"
-                            element={<Exports/>}
-                        />
-                        <Route
-                            path="/components/:componentId/plugins"
-                            element={<Plugins/>}
-                        />
-
-                        <Route
-                            path="/components/:componentId/invoke"
-                            element={<ComponentInvoke/>}
-                        />
-                        <Route
-                            path="/components/:componentId/workers"
-                            element={<WorkerList/>}
-                        />
-                        <Route
-                            path="/components/:componentId/workers/create"
-                            element={<CreateWorker/>}
-                        />
+                            element={<ComponentLayout/>}
+                        >
+                            <Route path="" element={<ComponentDetails/>}/>
+                            <Route path="settings" element={<ComponentSettings/>}/>
+                            <Route path="update" element={<ComponentUpdate/>}/>
+                            <Route path="info" element={<ComponentInfo/>}/>
+                            <Route path="exports" element={<Exports/>}/>
+                            <Route path="plugins" element={<Plugins/>}/>
+                            <Route path="invoke" element={<ComponentInvoke/>}/>
+                            <Route path="workers" element={<WorkerList/>}/>
+                            <Route
+                                path="workers/create"
+                                element={<CreateWorker/>}
+                            />
+                        </Route>
                         <Route
                             path="/components/:componentId/workers/:workerName"
                             element={<WorkerDetails/>}