[pull] master from supabase:master

apps/studio/components/interfaces/Account/AccessTokens/AccessTokenList.tsx

@@ -50,6 +50,7 @@ const RowLoading = () => (
 )
 
 const tableHeaderClass = 'text-left font-mono uppercase text-xs text-foreground-lighter h-auto py-2'
+
 const TableContainer = ({ children }: { children: React.ReactNode }) => (
   <Card className="w-full overflow-hidden">
     <CardContent className="p-0">
@@ -151,13 +152,15 @@ export const AccessTokenList = ({ searchString = '', onDeleteSuccess }: AccessTo
         {filteredTokens?.map((x) => {
           return (
             <TableRow key={x.token_alias}>
-              <TableCell className="w-48">
-                <p className="truncate">{x.name}</p>
+              <TableCell className="w-36 max-w-36">
+                <p className="truncate" title={x.name}>
+                  {x.name}
+                </p>
               </TableCell>
-              <TableCell>
-                <span className="font-mono text-foreground-light">{x.token_alias}</span>
+              <TableCell className="max-w-96">
+                <p className="font-mono text-foreground-light truncate">{x.token_alias}</p>
               </TableCell>
-              <TableCell>
+              <TableCell className="min-w-32">
                 <p className="text-foreground-light">
                   {x.last_used_at ? (
                     <Tooltip>
@@ -171,7 +174,7 @@ export const AccessTokenList = ({ searchString = '', onDeleteSuccess }: AccessTo
                   )}
                 </p>
               </TableCell>
-              <TableCell>
+              <TableCell className="min-w-32">
                 {x.expires_at ? (
                   dayjs(x.expires_at).isBefore(dayjs()) ? (
                     <Tooltip>

apps/studio/components/layouts/AccountLayout/AccountLayout.tsx

@@ -1,6 +1,4 @@
-import { ArrowLeft } from 'lucide-react'
 import Head from 'next/head'
-import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { PropsWithChildren, useEffect } from 'react'
 
@@ -9,13 +7,8 @@ import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
 import { withAuth } from 'hooks/misc/withAuth'
 import { IS_PLATFORM } from 'lib/constants'
 import { useAppStateSnapshot } from 'state/app-state'
-import { cn, NavMenu, NavMenuItem } from 'ui'
-import {
-  MAX_WIDTH_CLASSES,
-  PADDING_CLASSES,
-  ScaffoldContainerLegacy,
-  ScaffoldTitle,
-} from '../Scaffold'
+import { cn } from 'ui'
+import { WithSidebar } from './WithSidebar'
 
 export interface AccountLayoutProps {
   title: string
@@ -37,19 +30,6 @@ const AccountLayout = ({ children, title }: PropsWithChildren<AccountLayoutProps
         ? `/org/${lastVisitedOrganization}`
         : '/organizations'
 
-  const accountLinks = [
-    {
-      label: 'Account Settings',
-      href: `/account/me`,
-      keys: [`/account/me`, `/account/tokens`, `/account/security`],
-    },
-    {
-      label: 'Audit Logs',
-      href: `/account/audit`,
-      key: `/account/audit`,
-    },
-  ]
-
   const currentPath = router.pathname
 
   useEffect(() => {
@@ -64,33 +44,52 @@ const AccountLayout = ({ children, title }: PropsWithChildren<AccountLayoutProps
         <title>{title ? `${title} | Supabase` : 'Supabase'}</title>
         <meta name="description" content="Supabase Studio" />
       </Head>
-      <div className={cn('flex flex-col h-screen w-screen')}>
-        <ScaffoldContainerLegacy>
-          <Link
-            href={backToDashboardURL}
-            className="flex text-xs flex-row gap-2 items-center text-foreground-lighter focus-visible:text-foreground hover:text-foreground"
-          >
-            <ArrowLeft strokeWidth={1.5} size={14} />
-            Back to dashboard
-          </Link>
-          <ScaffoldTitle>Account settings</ScaffoldTitle>
-        </ScaffoldContainerLegacy>
-        <div className="border-b">
-          <NavMenu
-            className={cn(PADDING_CLASSES, MAX_WIDTH_CLASSES, 'border-none')}
-            aria-label="Organization menu navigation"
-          >
-            {accountLinks.map((item, i) => (
-              <NavMenuItem
-                key={`${item.key}-${i}`}
-                active={(item.key === currentPath || item.keys?.includes(currentPath)) ?? false}
-              >
-                <Link href={item.href}>{item.label}</Link>
-              </NavMenuItem>
-            ))}
-          </NavMenu>
-        </div>
-        {children}
+      <div className={cn('flex flex-col w-screen h-[calc(100vh-48px)]')}>
+        <WithSidebar
+          title=""
+          breadcrumbs={[]}
+          backToDashboardURL={backToDashboardURL}
+          sections={[
+            {
+              key: 'account-settings',
+              heading: 'Account Settings',
+              links: [
+                {
+                  key: 'preferences',
+                  label: 'Preferences',
+                  href: '/account/me',
+                  isActive: currentPath === '/account/me',
+                },
+                {
+                  key: 'access-tokens',
+                  label: 'Access Tokens',
+                  href: '/account/tokens',
+                  isActive: currentPath === '/account/tokens',
+                },
+                {
+                  key: 'security',
+                  label: 'Security',
+                  href: '/account/security',
+                  isActive: currentPath === '/account/security',
+                },
+              ],
+            },
+            {
+              key: 'logs',
+              heading: 'Logs',
+              links: [
+                {
+                  key: 'audit-logs',
+                  label: 'Audit Logs',
+                  href: '/account/audit',
+                  isActive: currentPath === '/account/audit',
+                },
+              ],
+            },
+          ]}
+        >
+          {children}
+        </WithSidebar>
       </div>
     </>
   )