Next.js 16, React 19.2, Identities page, Invitations identities step, PNPM Catalogs (#381)

* Upgraded to Next.js 16
* Refactored code to comply with React 19.2 ESLint rules
* Refactored some useEffect usages with the new useEffectEvent
* Added Identities page and added second step to set up an identity after accepting an invitation
* Updated all dependencies
* Introduced PNPM catalogs for some frequently updated dependencies
* Bugs fixing and improvements

apps/web/app/home/(user)/settings/page.tsx

@@ -19,10 +19,10 @@ const features = {
 const providers = authConfig.providers.oAuth;
 
 const callbackPath = pathsConfig.auth.callback;
-const accountHomePath = pathsConfig.app.accountHome;
+const accountSettingsPath = pathsConfig.app.accountSettings;
 
 const paths = {
-  callback: callbackPath + `?next=${accountHomePath}`,
+  callback: callbackPath + `?next=${accountSettingsPath}`,
 };
 
 export const generateMetadata = async () => {

apps/web/app/home/[account]/_components/team-account-navigation-menu.tsx

@@ -64,7 +64,6 @@ export function TeamAccountNavigationMenu(props: {
         <div>
           <ProfileAccountDropdownContainer
             user={user}
-            account={account}
             showProfileName={false}
           />
         </div>

apps/web/app/home/[account]/billing/page.tsx

@@ -61,30 +61,7 @@ async function TeamAccountBillingPage({ params }: TeamAccountBillingPageProps) {
   const canManageBilling =
     workspace.account.permissions.includes('billing.manage');
 
-  const Checkout = () => {
-    if (!canManageBilling) {
-      return <CannotManageBillingAlert />;
-    }
-
-    return (
-      <TeamAccountCheckoutForm customerId={customerId} accountId={accountId} />
-    );
-  };
-
-  const BillingPortal = () => {
-    if (!canManageBilling || !customerId) {
-      return null;
-    }
-
-    return (
-      <form action={createBillingPortalSession}>
-        <input type="hidden" name={'accountId'} value={accountId} />
-        <input type="hidden" name={'slug'} value={account} />
-
-        <BillingPortalCard />
-      </form>
-    );
-  };
+  const shouldShowBillingPortal = canManageBilling && customerId;
 
   return (
     <>
@@ -97,7 +74,15 @@ async function TeamAccountBillingPage({ params }: TeamAccountBillingPageProps) {
       <PageBody>
         <div className={cn(`flex max-w-2xl flex-col space-y-4`)}>
           <If condition={!hasBillingData}>
-            <Checkout />
+            <If
+              condition={canManageBilling}
+              fallback={<CannotManageBillingAlert />}
+            >
+              <TeamAccountCheckoutForm
+                customerId={customerId}
+                accountId={accountId}
+              />
+            </If>
           </If>
 
           <If condition={subscription}>
@@ -124,7 +109,9 @@ async function TeamAccountBillingPage({ params }: TeamAccountBillingPageProps) {
             }}
           </If>
 
-          <BillingPortal />
+          {shouldShowBillingPortal ? (
+            <BillingPortalForm accountId={accountId} account={account} />
+          ) : null}
         </div>
       </PageBody>
     </>
@@ -148,3 +135,20 @@ function CannotManageBillingAlert() {
     </Alert>
   );
 }
+
+function BillingPortalForm({
+  accountId,
+  account,
+}: {
+  accountId: string;
+  account: string;
+}) {
+  return (
+    <form action={createBillingPortalSession}>
+      <input type="hidden" name={'accountId'} value={accountId} />
+      <input type="hidden" name={'slug'} value={account} />
+
+      <BillingPortalCard />
+    </form>
+  );
+}