-

kms/web/src/components/Applications.tsx

@@ -5,7 +5,8 @@ import {
   Badge,
   Group,
   Text,
-  Stack
+  SidebarLayout,
+  Sidebar
 } from '@skybridge/web-components';
 import { IconEye, IconCopy } from '@tabler/icons-react';
 import { notifications } from '@mantine/notifications';
@@ -123,7 +124,18 @@ const Applications: React.FC = () => {
   ];
 
   return (
-    <Stack gap="md">
+    <SidebarLayout
+      sidebarOpened={sidebarOpen}
+      sidebarWidth={450}
+      sidebar={
+        <ApplicationSidebar
+          opened={sidebarOpen}
+          onClose={() => setSidebarOpen(false)}
+          onSuccess={handleSuccess}
+          editingApp={editingApp}
+        />
+      }
+    >
       <DataTable
         data={applications}
         columns={columns}
@@ -137,14 +149,7 @@ const Applications: React.FC = () => {
         customActions={customActions}
         emptyMessage="No applications found"
       />
-      
-      <ApplicationSidebar
-        opened={sidebarOpen}
-        onClose={() => setSidebarOpen(false)}
-        onSuccess={handleSuccess}
-        editingApp={editingApp}
-      />
-    </Stack>
+    </SidebarLayout>
   );
 };