134 improvement add a button that allows closing the sidebar (#135)

* Enhance sidebar navigation and layout configuration

- Added support for configurable sidebar collapsed style
- Updated layout components to use new sidebar configuration
- Added environment variable for sidebar trigger display
- Simplified page header and navigation components
- Improved sidebar responsiveness and user experience

* Refactor admin account page layout and action buttons

- Moved action buttons from sidebar to PageHeader for both personal and team account pages
- Updated button variants and styling for better visual hierarchy
- Improved spacing and layout of account page components
- Added border to PageHeader for better visual separation

* Update version updater dialog styling

- Replaced `space-x-4` with `gap-x-2` for better spacing
- Wrapped translation text in a `span` for improved layout
- Maintained consistent icon and text alignment in dialog title

* Refactor sidebar state management and configuration

- Simplified sidebar context and removed minimized state
- Updated layout components to use new sidebar open/closed state
- Modified sidebar navigation to handle collapsed state dynamically
- Added environment variable for sidebar trigger and collapsed style
- Improved sidebar responsiveness and rendering logic

* Remove sidebar configuration and environment variables

- Simplified sidebar context by removing `minimized` state in components
- Updated account selector components to use simplified sidebar state
- Removed unused helper functions in sidebar implementation

packages/features/admin/src/components/admin-account-page.tsx

@@ -14,6 +14,7 @@ import { Badge } from '@kit/ui/badge';
 import { Button } from '@kit/ui/button';
 import { Heading } from '@kit/ui/heading';
 import { If } from '@kit/ui/if';
+import { PageBody, PageHeader } from '@kit/ui/page';
 import { ProfileAvatar } from '@kit/ui/profile-avatar';
 import {
   Table,
@@ -61,38 +62,22 @@ async function PersonalAccountPage(props: { account: Account }) {
     'banned_until' in data.user && data.user.banned_until !== 'none';
 
   return (
-    <div className={'flex flex-col space-y-4'}>
-      <AppBreadcrumbs
-        values={{
-          [props.account.id]:
-            props.account.name ?? props.account.email ?? 'Account',
-        }}
-      />
-
-      <div className={'flex items-center justify-between'}>
-        <div className={'flex items-center gap-x-4'}>
-          <div className={'flex items-center gap-x-2.5'}>
-            <ProfileAvatar
-              pictureUrl={props.account.picture_url}
-              displayName={props.account.name}
-            />
-
-            <span className={'text-sm font-semibold capitalize'}>
-              {props.account.name}
-            </span>
-          </div>
-
-          <Badge variant={'outline'}>Personal Account</Badge>
-
-          <If condition={isBanned}>
-            <Badge variant={'destructive'}>Banned</Badge>
-          </If>
-        </div>
-
-        <div className={'flex gap-x-1'}>
+    <>
+      <PageHeader
+        className="border-b"
+        description={
+          <AppBreadcrumbs
+            values={{
+              [props.account.id]:
+                props.account.name ?? props.account.email ?? 'Account',
+            }}
+          />
+        }
+      >
+        <div className={'flex gap-x-2.5'}>
           <If condition={isBanned}>
             <AdminReactivateUserDialog userId={props.account.id}>
-              <Button size={'sm'} variant={'ghost'}>
+              <Button size={'sm'} variant={'secondary'}>
                 <ShieldPlus className={'mr-1 h-4'} />
                 Reactivate
               </Button>
@@ -101,15 +86,15 @@ async function PersonalAccountPage(props: { account: Account }) {
 
           <If condition={!isBanned}>
             <AdminBanUserDialog userId={props.account.id}>
-              <Button size={'sm'} variant={'ghost'}>
-                <Ban className={'mr-1 h-4'} />
+              <Button size={'sm'} variant={'secondary'}>
+                <Ban className={'text-destructive mr-1 h-3'} />
                 Ban
               </Button>
             </AdminBanUserDialog>
 
             <AdminImpersonateUserDialog userId={props.account.id}>
-              <Button size={'sm'} variant={'ghost'}>
-                <VenetianMask className={'mr-1 h-4'} />
+              <Button size={'sm'} variant={'secondary'}>
+                <VenetianMask className={'mr-1 h-4 text-blue-500'} />
                 Impersonate
               </Button>
             </AdminImpersonateUserDialog>
@@ -122,20 +107,43 @@ async function PersonalAccountPage(props: { account: Account }) {
             </Button>
           </AdminDeleteUserDialog>
         </div>
-      </div>
+      </PageHeader>
 
-      <div className={'flex flex-col gap-y-8'}>
-        <SubscriptionsTable accountId={props.account.id} />
+      <PageBody className={'space-y-6 py-4'}>
+        <div className={'flex items-center justify-between'}>
+          <div className={'flex items-center gap-x-4'}>
+            <div className={'flex items-center gap-x-2.5'}>
+              <ProfileAvatar
+                pictureUrl={props.account.picture_url}
+                displayName={props.account.name}
+              />
 
-        <div className={'divider-divider-x flex flex-col gap-y-2.5'}>
-          <Heading level={6}>Teams</Heading>
+              <span className={'text-sm font-semibold capitalize'}>
+                {props.account.name}
+              </span>
+            </div>
 
-          <div>
-            <AdminMembershipsTable memberships={memberships} />
+            <Badge variant={'outline'}>Personal Account</Badge>
+
+            <If condition={isBanned}>
+              <Badge variant={'destructive'}>Banned</Badge>
+            </If>
           </div>
         </div>
-      </div>
-    </div>
+
+        <div className={'flex flex-col gap-y-8'}>
+          <SubscriptionsTable accountId={props.account.id} />
+
+          <div className={'divider-divider-x flex flex-col gap-y-2.5'}>
+            <Heading level={6}>Teams</Heading>
+
+            <div>
+              <AdminMembershipsTable memberships={memberships} />
+            </div>
+          </div>
+        </div>
+      </PageBody>
+    </>
   );
 }
 
@@ -145,50 +153,57 @@ async function TeamAccountPage(props: {
   const members = await getMembers(props.account.slug ?? '');
 
   return (
-    <div className={'flex flex-col gap-y-4'}>
-      <AppBreadcrumbs
-        values={{
-          [props.account.id]:
-            props.account.name ?? props.account.email ?? 'Account',
-        }}
-      />
-
-      <div className={'flex justify-between'}>
-        <div className={'flex items-center gap-x-4'}>
-          <div className={'flex items-center gap-x-2.5'}>
-            <ProfileAvatar
-              pictureUrl={props.account.picture_url}
-              displayName={props.account.name}
-            />
-
-            <span className={'text-sm font-semibold capitalize'}>
-              {props.account.name}
-            </span>
-          </div>
-
-          <Badge variant={'outline'}>Team Account</Badge>
-        </div>
-
+    <>
+      <PageHeader
+        className="border-b"
+        description={
+          <AppBreadcrumbs
+            values={{
+              [props.account.id]:
+                props.account.name ?? props.account.email ?? 'Account',
+            }}
+          />
+        }
+      >
         <AdminDeleteAccountDialog accountId={props.account.id}>
           <Button size={'sm'} variant={'destructive'}>
             <BadgeX className={'mr-1 h-4'} />
             Delete
           </Button>
         </AdminDeleteAccountDialog>
-      </div>
+      </PageHeader>
 
-      <div>
-        <div className={'flex flex-col gap-y-8'}>
-          <SubscriptionsTable accountId={props.account.id} />
+      <PageBody className={'space-y-6 py-4'}>
+        <div className={'flex justify-between'}>
+          <div className={'flex items-center gap-x-4'}>
+            <div className={'flex items-center gap-x-2.5'}>
+              <ProfileAvatar
+                pictureUrl={props.account.picture_url}
+                displayName={props.account.name}
+              />
 
-          <div className={'flex flex-col gap-y-2.5'}>
-            <Heading level={6}>Team Members</Heading>
+              <span className={'text-sm font-semibold capitalize'}>
+                {props.account.name}
+              </span>
+            </div>
 
-            <AdminMembersTable members={members} />
+            <Badge variant={'outline'}>Team Account</Badge>
           </div>
         </div>
-      </div>
-    </div>
+
+        <div>
+          <div className={'flex flex-col gap-y-8'}>
+            <SubscriptionsTable accountId={props.account.id} />
+
+            <div className={'flex flex-col gap-y-2.5'}>
+              <Heading level={6}>Team Members</Heading>
+
+              <AdminMembersTable members={members} />
+            </div>
+          </div>
+        </div>
+      </PageBody>
+    </>
   );
 }