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/(marketing)/docs/_components/docs-navigation.tsx

@@ -29,54 +29,76 @@ function Node({
   const url = `${prefix}/${node.slug}`;
   const label = node.label ? node.label : node.title;
 
-  const Container = (props: React.PropsWithChildren) => {
-    if (node.collapsible) {
-      return (
-        <DocsNavigationCollapsible node={node} prefix={prefix}>
-          {props.children}
-        </DocsNavigationCollapsible>
-      );
-    }
-
-    return props.children;
-  };
-
-  const ContentContainer = (props: React.PropsWithChildren) => {
-    if (node.collapsible) {
-      return <CollapsibleContent>{props.children}</CollapsibleContent>;
-    }
-
-    return props.children;
-  };
-
-  const Trigger = () => {
-    if (node.collapsible) {
-      return (
-        <CollapsibleTrigger asChild>
-          <SidebarMenuItem>
-            <SidebarMenuButton>
-              {label}
-              <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-        </CollapsibleTrigger>
-      );
-    }
-
-    return <DocsNavLink label={label} url={url} />;
-  };
-
   return (
-    <Container>
-      <Trigger />
+    <NodeContainer node={node} prefix={prefix}>
+      <NodeTrigger node={node} label={label} url={url} />
 
-      <ContentContainer>
+      <NodeContentContainer node={node}>
         <Tree pages={node.children ?? []} level={level + 1} prefix={prefix} />
-      </ContentContainer>
-    </Container>
+      </NodeContentContainer>
+    </NodeContainer>
   );
 }
 
+function NodeContentContainer({
+  node,
+  children,
+}: {
+  node: Cms.ContentItem;
+  children: React.ReactNode;
+}) {
+  if (node.collapsible) {
+    return <CollapsibleContent>{children}</CollapsibleContent>;
+  }
+
+  return children;
+}
+
+function NodeContainer({
+  node,
+  prefix,
+  children,
+}: {
+  node: Cms.ContentItem;
+  prefix: string;
+  children: React.ReactNode;
+}) {
+  if (node.collapsible) {
+    return (
+      <DocsNavigationCollapsible node={node} prefix={prefix}>
+        {children}
+      </DocsNavigationCollapsible>
+    );
+  }
+
+  return children;
+}
+
+function NodeTrigger({
+  node,
+  label,
+  url,
+}: {
+  node: Cms.ContentItem;
+  label: string;
+  url: string;
+}) {
+  if (node.collapsible) {
+    return (
+      <CollapsibleTrigger asChild>
+        <SidebarMenuItem>
+          <SidebarMenuButton>
+            {label}
+            <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </CollapsibleTrigger>
+    );
+  }
+
+  return <DocsNavLink label={label} url={url} />;
+}
+
 function Tree({
   pages,
   level,

apps/web/app/(marketing)/docs/_components/floating-docs-navigation.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useEffectEvent, useMemo, useState } from 'react';
 
 import { usePathname } from 'next/navigation';
 
@@ -21,27 +21,26 @@ export function FloatingDocumentationNavigation(
 
   const [isVisible, setIsVisible] = useState(false);
 
-  const enableScrolling = (element: HTMLElement) =>
-    (element.style.overflowY = '');
+  const enableScrolling = useEffectEvent(
+    () => body && (body.style.overflowY = ''),
+  );
 
-  const disableScrolling = (element: HTMLElement) =>
-    (element.style.overflowY = 'hidden');
+  const disableScrolling = useEffectEvent(
+    () => body && (body.style.overflowY = 'hidden'),
+  );
 
   // enable/disable body scrolling when the docs are toggled
   useEffect(() => {
-    if (!body) {
-      return;
-    }
-
     if (isVisible) {
-      disableScrolling(body);
+      disableScrolling();
     } else {
-      enableScrolling(body);
+      enableScrolling();
     }
-  }, [isVisible, body]);
+  }, [isVisible]);
 
   // hide docs when navigating to another page
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setIsVisible(false);
   }, [activePath]);