chore(rwa): fix the sidebar layout (#2698)

.changeset/four-jokes-check.md

@@ -0,0 +1,5 @@
+---
+'@kadena/kode-ui': patch
+---
+
+fix in the sidebar header layout

packages/apps/rwa-demo/src/app/(app)/SideBar.tsx

@@ -1,10 +1,12 @@
 import { AssetSwitch } from '@/components/AssetSwitch/AssetSwitch';
 import { useAccount } from '@/hooks/account';
 import {
+  MonoAccountBox,
   MonoApps,
   MonoDarkMode,
   MonoLightMode,
   MonoLogout,
+  MonoNetworkCheck,
 } from '@kadena/kode-icons';
 import {
   Button,
@@ -17,6 +19,7 @@ import {
   SideBarItem,
   SideBarItemsInline,
   SideBar as SideBarLayout,
+  useLayout,
 } from '@kadena/kode-ui/patterns';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
@@ -26,6 +29,7 @@ import { KLogo } from './KLogo';
 
 export const SideBar: FC = () => {
   const { theme, setTheme } = useTheme();
+  const { isExpanded } = useLayout();
   const { logout, account, isMounted } = useAccount();
   const router = useRouter();
 
@@ -65,19 +69,33 @@ export const SideBar: FC = () => {
           />
         </>
       }
-      appContext={<AssetSwitch />}
+      appContext={
+        <SideBarItem visual={<MonoNetworkCheck />} label="Select Asset">
+          <AssetSwitch showLabel={isExpanded} />
+        </SideBarItem>
+      }
       context={
         <>
           <SideBarItemsInline>
-            <ContextMenu
-              trigger={<Button variant="outlined">{account?.alias}</Button>}
+            <SideBarItem
+              label=""
+              visual={<MonoAccountBox />}
+              onPress={handleLogout}
             >
-              <ContextMenuItem
-                endVisual={<MonoLogout />}
-                label="Logout"
-                onClick={handleLogout}
-              />
-            </ContextMenu>
+              <ContextMenu
+                trigger={
+                  <Button variant="outlined">
+                    {isExpanded ? account?.alias : <MonoAccountBox />}
+                  </Button>
+                }
+              >
+                <ContextMenuItem
+                  endVisual={<MonoLogout />}
+                  label="Logout"
+                  onClick={handleLogout}
+                />
+              </ContextMenu>
+            </SideBarItem>
             <SideBarItem
               visual={theme === 'dark' ? <MonoDarkMode /> : <MonoLightMode />}
               onPress={toggleTheme}

packages/apps/rwa-demo/src/app/(app)/layout.tsx

@@ -99,7 +99,6 @@ const RootLayout = ({
       >
         <Stack width="100%" flexDirection="column" gap="sm">
           <AssetInfo />
-
           {children}
         </Stack>
       </SideBarLayout>

packages/apps/rwa-demo/src/components/AgentsList/AgentsList.tsx

@@ -1,24 +1,40 @@
 import { useAccount } from '@/hooks/account';
+import { useAsset } from '@/hooks/asset';
 import { useGetAgents } from '@/hooks/getAgents';
 import { useTransactions } from '@/hooks/transactions';
 import { removeAgent } from '@/services/removeAgent';
 import { getClient } from '@/utils/client';
-import { MonoDelete } from '@kadena/kode-icons';
-import { Button, Heading } from '@kadena/kode-ui';
+import { MonoDelete, MonoSupportAgent } from '@kadena/kode-icons';
+import { Button } from '@kadena/kode-ui';
 import {
   CompactTable,
   CompactTableFormatters,
+  SectionCard,
+  SectionCardBody,
+  SectionCardContentBlock,
+  SectionCardHeader,
+  useLayout,
   useNotifications,
 } from '@kadena/kode-ui/patterns';
 import type { FC } from 'react';
+import { useState } from 'react';
+import { AddAgentForm } from '../AddAgentForm/AddAgentForm';
 import { Confirmation } from '../Confirmation/Confirmation';
 import { interpretErrorMessage } from '../TransactionsProvider/TransactionsProvider';
 
 export const AgentsList: FC = () => {
+  const { setIsRightAsideExpanded, isRightAsideExpanded } = useLayout();
+  const { paused } = useAsset();
   const { data } = useGetAgents();
   const { account, sign } = useAccount();
   const { addTransaction } = useTransactions();
   const { addNotification } = useNotifications();
+  const [hasOpenAgentForm, setHasOpenAgentForm] = useState(false);
+
+  const handleAddAgent = () => {
+    setIsRightAsideExpanded(true);
+    setHasOpenAgentForm(true);
+  };
 
   const handleDelete = async (accountName: any) => {
     try {
@@ -48,35 +64,62 @@ export const AgentsList: FC = () => {
 
   return (
     <>
-      <Heading as="h3">Agents</Heading>
-      <CompactTable
-        fields={[
-          {
-            label: 'status',
-            key: 'result',
-            width: '10%',
-            render: CompactTableFormatters.FormatStatus(),
-          },
-          { label: 'Account', key: 'accountName', width: '50%' },
-          { label: 'Requestkey', key: 'requestKey', width: '30%' },
-          {
-            label: '',
-            key: 'accountName',
-            width: '10%',
-            render: CompactTableFormatters.FormatActions({
-              trigger: (
-                <Confirmation
-                  onPress={handleDelete}
-                  trigger={<Button startVisual={<MonoDelete />} />}
-                >
-                  Are you sure you want to delete this agent?
-                </Confirmation>
-              ),
-            }),
-          },
-        ]}
-        data={data}
-      />
+      {isRightAsideExpanded && hasOpenAgentForm && (
+        <AddAgentForm
+          onClose={() => {
+            setIsRightAsideExpanded(false);
+            setHasOpenAgentForm(false);
+          }}
+        />
+      )}
+      <SectionCard stack="vertical">
+        <SectionCardContentBlock>
+          <SectionCardHeader
+            title="Agents"
+            description={<>All the agents for this contract</>}
+            actions={
+              <Button
+                isDisabled={paused}
+                endVisual={<MonoSupportAgent />}
+                onClick={handleAddAgent}
+                variant="outlined"
+              >
+                Add Agent
+              </Button>
+            }
+          />
+          <SectionCardBody>
+            <CompactTable
+              fields={[
+                {
+                  label: 'status',
+                  key: 'result',
+                  width: '10%',
+                  render: CompactTableFormatters.FormatStatus(),
+                },
+                { label: 'Account', key: 'accountName', width: '50%' },
+                { label: 'Requestkey', key: 'requestKey', width: '30%' },
+                {
+                  label: '',
+                  key: 'accountName',
+                  width: '10%',
+                  render: CompactTableFormatters.FormatActions({
+                    trigger: (
+                      <Confirmation
+                        onPress={handleDelete}
+                        trigger={<Button startVisual={<MonoDelete />} />}
+                      >
+                        Are you sure you want to delete this agent?
+                      </Confirmation>
+                    ),
+                  }),
+                },
+              ]}
+              data={data}
+            />
+          </SectionCardBody>
+        </SectionCardContentBlock>
+      </SectionCard>
     </>
   );
 };

packages/apps/rwa-demo/src/components/AssetSwitch/AssetSwitch.tsx

@@ -1,5 +1,5 @@
 import { useAsset } from '@/hooks/asset';
-import { MonoSettings } from '@kadena/kode-icons';
+import { MonoSettings, MonoWorkspaces } from '@kadena/kode-icons';
 import {
   Button,
   ContextMenu,
@@ -16,7 +16,9 @@ import type { FC } from 'react';
 import { useState } from 'react';
 import { AssetForm } from './AssetForm';
 
-export const AssetSwitch: FC = () => {
+export const AssetSwitch: FC<{ showLabel?: boolean }> = ({
+  showLabel = true,
+}) => {
   const { assets, asset, setAsset } = useAsset();
   const [openSide, setOpenSide] = useState(false);
   const { setIsRightAsideExpanded, isRightAsideExpanded } = useLayout();
@@ -43,7 +45,15 @@ export const AssetSwitch: FC = () => {
       <ContextMenu
         trigger={
           <Button isCompact variant="outlined">
-            {asset ? asset.name : 'Select an asset'}
+            {showLabel ? (
+              asset ? (
+                asset.name
+              ) : (
+                'Select an asset'
+              )
+            ) : (
+              <MonoWorkspaces />
+            )}
           </Button>
         }
       >

packages/apps/rwa-demo/src/components/HomePage/OwnerRootPage.tsx

@@ -1,5 +1,4 @@
 'use client';
-import { AddAgentForm } from '@/components/AddAgentForm/AddAgentForm';
 import { AgentsList } from '@/components/AgentsList/AgentsList';
 import { SetComplianceForm } from '@/components/SetComplianceForm/SetComplianceForm';
 import { SideBarBreadcrumbs } from '@/components/SideBarBreadcrumbs/SideBarBreadcrumbs';
@@ -12,19 +11,11 @@ import { useState } from 'react';
 export const OwnerRootPage = () => {
   const { setIsRightAsideExpanded, isRightAsideExpanded } = useLayout();
   const { paused } = useAsset();
-  const [hasOpenAgentForm, setHasOpenAgentForm] = useState(false);
   const [hasOpenComplianceForm, setHasOpenComplianceForm] = useState(false);
 
-  const handleAddAgent = () => {
-    setIsRightAsideExpanded(true);
-    setHasOpenAgentForm(true);
-    setHasOpenComplianceForm(false);
-  };
-
   const handleComplianceForm = () => {
     setIsRightAsideExpanded(true);
     setHasOpenComplianceForm(true);
-    setHasOpenAgentForm(false);
   };
 
   return (
@@ -35,28 +26,12 @@ export const OwnerRootPage = () => {
         <SetComplianceForm
           onClose={() => {
             setIsRightAsideExpanded(false);
-            setHasOpenAgentForm(false);
-          }}
-        />
-      )}
-      {isRightAsideExpanded && hasOpenAgentForm && (
-        <AddAgentForm
-          onClose={() => {
-            setIsRightAsideExpanded(false);
-            setHasOpenAgentForm(false);
+            setHasOpenComplianceForm(false);
           }}
         />
       )}
 
       <Stack gap="sm">
-        <Button
-          isDisabled={paused}
-          startVisual={<MonoAdd />}
-          onClick={handleAddAgent}
-        >
-          Add Agent
-        </Button>
-
         <Button
           isDisabled={paused}
           startVisual={<MonoAdd />}

packages/libs/kode-ui/src/patterns/SectionCard/style.css.ts

@@ -78,6 +78,7 @@ export const headerClass = recipe({
           },
           sm: {
             gridTemplateColumns: `2fr 1fr`,
+            gridTemplateRows: `max-content max-content`,
             gridTemplateAreas: `
                   "header actions"
                   "description actions"

packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.tsx

@@ -6,12 +6,7 @@ import { useLayout } from './components/LayoutProvider';
 import { NotificationSlot } from './components/NotificationSlot/NotificationSlot';
 import { SideBarAside } from './components/SideBarAside';
 import { SideBarHeader } from './components/SideBarHeader';
-import {
-  bodyWrapperClass,
-  layoutExpandedWrapperClass,
-  layoutWrapperClass,
-  mainClass,
-} from './styles.css';
+import { bodyWrapperClass, layoutWrapperClass, mainClass } from './styles.css';
 import type { ISideBarLayoutLocation } from './types';
 
 export interface ISideBarLayout extends PropsWithChildren {
@@ -59,13 +54,16 @@ export const SideBarLayout: FC<ISideBarLayout> = ({
         className={bodyWrapperClass}
       >
         <Stack
-          className={classNames(layoutWrapperClass({ variant }), {
-            [layoutExpandedWrapperClass]: isExpanded,
-          })}
+          className={classNames(
+            layoutWrapperClass({
+              isRightExpanded: isRightAsideExpanded ?? false,
+              isLeftExpanded: isExpanded ?? false,
+            }),
+          )}
         >
           <SideBarHeader logo={logo} />
           {sidebar}
-          <main className={mainClass({ variant })}>
+          <main className={mainClass}>
             <Stack width="100%" flexDirection="column" marginInlineEnd="sm">
               {topBanner && (
                 <Stack