moar

apps/studio/components/interfaces/Organization/resource-banner.tsx

@@ -18,16 +18,16 @@ export function OrganizationResourceBanner() {
           type="danger"
           title="Outstanding Invoices"
           message="Please pay invoices to avoid service disruption."
-          link={`/org/${org?.slug}/invoices`}
+          link={`/org/${org?.slug}/settings/invoices`}
           org={org}
         />
       )}
-      {true && (
+      {org?.restriction_status === 'grace_period' && (
         <WarningBanner
           type="warning"
           title="Your organization has exceeded its quota"
           message={`You are given a grace period until ${dayjs(org?.restriction_data?.['grace_period_end']).format('DD MMM, YYYY')}`}
-          link={`/org/${org?.slug}/billing`}
+          link={`/org/${org?.slug}/settings/billing`}
           org={org}
         />
       )}
@@ -36,7 +36,7 @@ export function OrganizationResourceBanner() {
           type="warning"
           title="Grace period is over"
           message="Your project will not be able to serve requests when you used up your quota."
-          link={`/org/${org?.slug}/billing`}
+          link={`/org/${org?.slug}/settings/billing`}
           org={org}
         />
       )}
@@ -45,7 +45,7 @@ export function OrganizationResourceBanner() {
           type="danger"
           title="Services Restricted"
           message="Your project is unable to serve any requests as your organization has used up its quota."
-          link={`/org/${org?.slug}/billing`}
+          link={`/org/${org?.slug}/settings/billing`}
           org={org}
         />
       )}
@@ -78,7 +78,8 @@ const WarningBanner = ({
     <div
       className={cn(
         `relative ${bannerStyles} border-b border-muted py-1 flex items-center gap-2 flex-shrink-0 px-10 justify-center`,
-        isProject && 'last:rounded-b-[7px] mx-2 border-default border-l border-r'
+        isProject && 'last:rounded-b-[7px] mx-2 border-default border-l border-r',
+        'flex-shrink-0'
       )}
     >
       <div className="mx-auto w-full xl:max-w-[700px] items-center flex flex-row gap-3">

apps/studio/components/interfaces/app-default-navigation.tsx

@@ -110,13 +110,6 @@ export function AppDefaultNavigation() {
 }
 
 function NavLink({ route, active }: { route: any; active?: boolean }) {
-  const router = useRouter()
-  // const hasItems = route.items && route.items.some((section) => section.items.length > 0)
-  const [open, setOpen] = useState(false)
-
-  // console.log('route', route)
-
-  // if (!route.items) {
   return (
     <SidebarMenuItem key={route.key}>
       <SidebarMenuButton
@@ -252,7 +245,7 @@ const OrganizationLinks = () => {
     // },
     {
       label: 'Organization settings',
-      href: `/org/${slug}/settings`,
+      href: `/org/${slug}/settings/general`,
       key: 'settings',
       icon: <Settings size={ICON_SIZE} strokeWidth={ICON_STROKE_WIDTH} />,
     },
@@ -291,21 +284,17 @@ const OrganizationLinks = () => {
 
   return (
     <SidebarMenu className="flex flex-col gap-1 items-start">
-      <SidebarGroup
-      // className={cn(!open && 'pt-0')}
-      >
+      <SidebarGroup>
         {navMenuItems.map((item, i) => (
-          <SidebarMenuItem key={`${item.label}-${i}`}>
-            <NavLink
-              active={i === 0 ? activeRoute === undefined : activeRoute === item.key}
-              route={{
-                label: item.label,
-                link: item.href,
-                key: item.label,
-                icon: item.icon,
-              }}
-            />
-          </SidebarMenuItem>
+          <NavLink
+            active={i === 0 ? activeRoute === undefined : activeRoute === item.key}
+            route={{
+              label: item.label,
+              link: item.href,
+              key: item.label,
+              icon: item.icon,
+            }}
+          />
         ))}
       </SidebarGroup>
     </SidebarMenu>

apps/studio/components/interfaces/sidebar-open-top-banner.tsx

@@ -116,7 +116,6 @@ export function SidebarOpenTopBanner() {
         </div>
         {!!project?.ref && (
           <motion.div
-            className="border-l flex-0 h-full"
             initial={{ opacity: 0, x: -20 }}
             animate={{
               opacity: !aiAssistantPanel.open ? 1 : 0,

apps/studio/components/layouts/AppLayout/AssistantButton.tsx

@@ -9,12 +9,12 @@ const AssistantButton = () => {
       type="text"
       size="tiny"
       id="assistant-trigger"
-      className="h-full w-full rounded-none"
+      className="w-[24px] h-[24px] flex items-center justify-center p-0"
       onClick={() => {
         setAiAssistantPanel({ open: !aiAssistantPanel.open })
       }}
     >
-      <AiIconAnimation allowHoverEffect size={20} />
+      <AiIconAnimation allowHoverEffect size={16} />
     </Button>
   )
 }

apps/studio/components/layouts/OrganizationLayout.tsx

@@ -8,7 +8,7 @@ import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
 import { ExternalLink } from 'lucide-react'
 import Link from 'next/link'
 import type { PropsWithChildren } from 'react'
-import { Alert_Shadcn_, AlertTitle_Shadcn_, Button, NavMenu, NavMenuItem } from 'ui'
+import { Alert_Shadcn_, AlertTitle_Shadcn_, Button, cn, NavMenu, NavMenuItem } from 'ui'
 import AccountLayout from './AccountLayout/AccountLayout'
 import DefaultLayout from './DefaultLayout'
 import { ScaffoldContainer, ScaffoldDivider, ScaffoldHeader, ScaffoldTitle } from './Scaffold'
@@ -75,30 +75,34 @@ const OrganizationLayout = ({ children }: PropsWithChildren<{}>) => {
   const filteredNavMenuItems = navMenuItems.filter((item) => !item.hidden)
 
   return (
-    <div className="relative py-1.5 w-full h-full">
-      <div className="relative w-full h-full border-l border-t border-b rounded-tl-[7px] rounded-bl-[7px] bg-dash-sidebar flex flex-col">
+    <div className="flex flex-row h-full w-full">
+      <div
+        className={cn(
+          'border-l w-full rounded-tl-[7px] rounded-bl-[7px] border-t border-b my-1.5 bg-dash-sidebar flex flex-col'
+        )}
+      >
         {/* <NoticeBanner /> */}
         <OrganizationResourceBanner />
         {/* <AnimatePresence>
-        <motion.div
-          className="px-10"
-          initial={{ opacity: 0, y: -20 }}
-          animate={{ opacity: 1, y: 0 }}
-          exit={{ opacity: 0, y: -20 }}
-          transition={{
-            duration: 0.2,
-            ease: 'easeOut',
-          }}
-        >
-          <NavMenu className="border-none" aria-label="Organization menu navigation">
-            {filteredNavMenuItems.map((item) => (
-              <NavMenuItem key={item.label} active={currentPath === item.href}>
-                <Link href={item.href}>{item.label}</Link>
-              </NavMenuItem>
-            ))}
-          </NavMenu>
-        </motion.div>
-      </AnimatePresence> */}
+          <motion.div
+            className="px-10"
+            initial={{ opacity: 0, y: -20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -20 }}
+            transition={{
+              duration: 0.2,
+              ease: 'easeOut',
+            }}
+          >
+            <NavMenu className="border-none" aria-label="Organization menu navigation">
+              {filteredNavMenuItems.map((item) => (
+                <NavMenuItem key={item.label} active={currentPath === item.href}>
+                  <Link href={item.href}>{item.label}</Link>
+                </NavMenuItem>
+              ))}
+            </NavMenu>
+          </motion.div>
+        </AnimatePresence> */}
 
         {/* <ScaffoldDivider /> */}
         {/* <motion.div

apps/studio/components/layouts/ProjectLayout/organization-settings-layout.tsx

@@ -0,0 +1,68 @@
+import { useParams } from 'common'
+import { AnimatePresence, motion } from 'framer-motion'
+import { useCurrentPath } from 'hooks/misc/useCurrentPath'
+import Link from 'next/link'
+import { PropsWithChildren } from 'react'
+import { cn, NavMenu, NavMenuItem } from 'ui'
+
+function OrganizationSettingsLayout({ children }: PropsWithChildren) {
+  const currentPath = useCurrentPath()
+  const { slug } = useParams()
+
+  const navMenuItems = [
+    {
+      label: 'General',
+      href: `/org/${slug}/settings/general`,
+    },
+    {
+      label: 'Billing',
+      href: `/org/${slug}/settings/billing`,
+    },
+    {
+      label: 'Invoices',
+      href: `/org/${slug}/settings/invoices`,
+    },
+    {
+      label: 'Audit Logs',
+      href: `/org/${slug}/settings/audit`,
+    },
+    {
+      label: 'Legal Documents',
+      href: `/org/${slug}/settings/documents`,
+    },
+  ]
+
+  return (
+    <>
+      {/* <AnimatePresence>
+        <motion.div
+          className="px-10"
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -20 }}
+          transition={{
+            duration: 0.2,
+            ease: 'easeOut',
+          }}
+        > */}
+      <NavMenu
+        className={cn(
+          '[&_ul]:mx-auto [&_ul]:max-w-[1200px] [&_ul]:px-6 [&_ul]:lg:px-14 [&_ul]:xl:px-24 [&_ul]:2xl:px-32',
+          'pt-6'
+        )}
+        aria-label="Organization menu navigation"
+      >
+        {navMenuItems.map((item) => (
+          <NavMenuItem key={item.label} active={currentPath === item.href}>
+            <Link href={item.href}>{item.label}</Link>
+          </NavMenuItem>
+        ))}
+      </NavMenu>
+      {/* </motion.div>
+      </AnimatePresence> */}
+      <main className="h-full w-full overflow-y-auto">{children}</main>
+    </>
+  )
+}
+
+export default OrganizationSettingsLayout

apps/studio/pages/org/[slug]/settings/audit.tsx

@@ -2,6 +2,7 @@ import { AuditLogs } from 'components/interfaces/Organization'
 import AppLayout from 'components/layouts/AppLayout/AppLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import OrganizationLayout from 'components/layouts/OrganizationLayout'
+import OrganizationSettingsLayout from 'components/layouts/ProjectLayout/organization-settings-layout'
 import { Loading } from 'components/ui/Loading'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
@@ -19,7 +20,9 @@ const OrgAuditLogs: NextPageWithLayout = () => {
 OrgAuditLogs.getLayout = (page) => (
   <AppLayout>
     <DefaultLayout>
-      <OrganizationLayout>{page}</OrganizationLayout>
+      <OrganizationLayout>
+        <OrganizationSettingsLayout>{page}</OrganizationSettingsLayout>
+      </OrganizationLayout>
     </DefaultLayout>
   </AppLayout>
 )

apps/studio/pages/org/[slug]/settings/billing.tsx

@@ -3,6 +3,7 @@ import { BillingSettings } from 'components/interfaces/Organization'
 import AppLayout from 'components/layouts/AppLayout/AppLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import OrganizationLayout from 'components/layouts/OrganizationLayout'
+import OrganizationSettingsLayout from 'components/layouts/ProjectLayout/organization-settings-layout'
 import { Loading } from 'components/ui/Loading'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
@@ -42,7 +43,9 @@ const OrgBillingSettings: NextPageWithLayout = () => {
 OrgBillingSettings.getLayout = (page) => (
   <AppLayout>
     <DefaultLayout>
-      <OrganizationLayout>{page}</OrganizationLayout>
+      <OrganizationLayout>
+        <OrganizationSettingsLayout>{page}</OrganizationSettingsLayout>
+      </OrganizationLayout>
     </DefaultLayout>
   </AppLayout>
 )

apps/studio/pages/org/[slug]/settings/documents.tsx

@@ -2,6 +2,7 @@ import { Documents } from 'components/interfaces/Organization'
 import AppLayout from 'components/layouts/AppLayout/AppLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import OrganizationLayout from 'components/layouts/OrganizationLayout'
+import OrganizationSettingsLayout from 'components/layouts/ProjectLayout/organization-settings-layout'
 import type { NextPageWithLayout } from 'types'
 
 const OrgDocuments: NextPageWithLayout = () => {
@@ -11,7 +12,9 @@ const OrgDocuments: NextPageWithLayout = () => {
 OrgDocuments.getLayout = (page) => (
   <AppLayout>
     <DefaultLayout>
-      <OrganizationLayout>{page}</OrganizationLayout>
+      <OrganizationLayout>
+        <OrganizationSettingsLayout>{page}</OrganizationSettingsLayout>
+      </OrganizationLayout>
     </DefaultLayout>
   </AppLayout>
 )

apps/studio/pages/org/[slug]/settings/general.tsx

@@ -2,6 +2,7 @@ import { GeneralSettings as GeneralSettingsLegacy } from 'components/interfaces/
 import AppLayout from 'components/layouts/AppLayout/AppLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import OrganizationLayout from 'components/layouts/OrganizationLayout'
+import OrganizationSettingsLayout from 'components/layouts/ProjectLayout/organization-settings-layout'
 import { Loading } from 'components/ui/Loading'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
@@ -25,7 +26,9 @@ const OrgGeneralSettings: NextPageWithLayout = () => {
 OrgGeneralSettings.getLayout = (page) => (
   <AppLayout>
     <DefaultLayout>
-      <OrganizationLayout>{page}</OrganizationLayout>
+      <OrganizationLayout>
+        <OrganizationSettingsLayout>{page}</OrganizationSettingsLayout>
+      </OrganizationLayout>
     </DefaultLayout>
   </AppLayout>
 )

apps/studio/pages/org/[slug]/settings/invoices.tsx

@@ -2,6 +2,7 @@ import { InvoicesSettings } from 'components/interfaces/Organization'
 import AppLayout from 'components/layouts/AppLayout/AppLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import OrganizationLayout from 'components/layouts/OrganizationLayout'
+import OrganizationSettingsLayout from 'components/layouts/ProjectLayout/organization-settings-layout'
 import { Loading } from 'components/ui/Loading'
 import { usePermissionsQuery } from 'data/permissions/permissions-query'
 import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
@@ -25,7 +26,9 @@ const OrgInvoices: NextPageWithLayout = () => {
 OrgInvoices.getLayout = (page) => (
   <AppLayout>
     <DefaultLayout>
-      <OrganizationLayout>{page}</OrganizationLayout>
+      <OrganizationLayout>
+        <OrganizationSettingsLayout>{page}</OrganizationSettingsLayout>
+      </OrganizationLayout>
     </DefaultLayout>
   </AppLayout>
 )