Next.js Supabase V3 (#463)

Version 3 of the kit:
- Radix UI replaced with Base UI (using the Shadcn UI patterns)
- next-intl replaces react-i18next
- enhanceAction deprecated; usage moved to next-safe-action
- main layout now wrapped with [locale] path segment
- Teams only mode
- Layout updates
- Zod v4
- Next.js 16.2
- Typescript 6
- All other dependencies updated
- Removed deprecated Edge CSRF
- Dynamic Github Action runner

apps/web/app/[locale]/docs/_components/docs-back-button.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+
+import { ArrowLeftIcon } from 'lucide-react';
+
+import { getSafeRedirectPath } from '@kit/shared/utils';
+import { Button } from '@kit/ui/button';
+import { Trans } from '@kit/ui/trans';
+
+import appConfig from '~/config/app.config';
+
+export function DocsBackButton() {
+  const searchParams = useSearchParams();
+  const returnPath = searchParams.get('returnPath');
+  const parsedPath = getSafeRedirectPath(returnPath, '/');
+
+  return (
+    <Button
+      nativeButton={false}
+      variant="link"
+      render={
+        <Link href={parsedPath || '/'}>
+          <ArrowLeftIcon className="size-4" />{' '}
+          <span className={'hidden sm:block'}>
+            <Trans i18nKey="common.back" values={{ product: appConfig.name }} />
+          </span>
+        </Link>
+      }
+    />
+  );
+}

apps/web/app/[locale]/docs/_components/docs-card.tsx

@@ -0,0 +1,32 @@
+import Link from 'next/link';
+
+export function DocsCard({
+  title,
+  subtitle,
+  children,
+  link,
+}: React.PropsWithChildren<{
+  title: string;
+  subtitle?: string | null;
+  link: { url: string; label?: string };
+}>) {
+  return (
+    <Link href={link.url} className="flex flex-col">
+      <div
+        className={`hover:bg-muted/70 flex grow flex-col gap-y-0.5 rounded border p-4`}
+      >
+        <h3 className="mt-0 text-lg font-medium hover:underline dark:text-white">
+          {title}
+        </h3>
+
+        {subtitle && (
+          <div className="text-muted-foreground text-sm">
+            <p dangerouslySetInnerHTML={{ __html: subtitle }}></p>
+          </div>
+        )}
+
+        {children && <div className="text-sm">{children}</div>}
+      </div>
+    </Link>
+  );
+}

apps/web/app/[locale]/docs/_components/docs-cards.tsx

@@ -0,0 +1,24 @@
+import { Cms } from '@kit/cms';
+
+import { DocsCard } from './docs-card';
+
+export function DocsCards({ cards }: { cards: Cms.ContentItem[] }) {
+  const cardsSortedByOrder = [...cards].sort((a, b) => a.order - b.order);
+
+  return (
+    <div className={'absolute flex w-full flex-col gap-4 pb-48 lg:max-w-2xl'}>
+      {cardsSortedByOrder.map((item) => {
+        return (
+          <DocsCard
+            key={item.title}
+            title={item.title}
+            subtitle={item.description}
+            link={{
+              url: `/docs/${item.slug}`,
+            }}
+          />
+        );
+      })}
+    </div>
+  );
+}

apps/web/app/[locale]/docs/_components/docs-header.tsx

@@ -0,0 +1,36 @@
+import Link from 'next/link';
+
+import { Header } from '@kit/ui/marketing';
+import { Separator } from '@kit/ui/separator';
+import { Trans } from '@kit/ui/trans';
+
+import { AppLogo } from '~/components/app-logo';
+
+import { DocsBackButton } from './docs-back-button';
+
+export function DocsHeader() {
+  return (
+    <Header
+      logo={
+        <div className={'flex w-full flex-1 justify-between'}>
+          <div className="flex items-center gap-x-4">
+            <AppLogo href="/" />
+
+            <Separator orientation="vertical" />
+
+            <Link
+              href="/help"
+              className="font-semibold tracking-tight hover:underline"
+            >
+              <Trans i18nKey="marketing.documentation" />
+            </Link>
+          </div>
+
+          <DocsBackButton />
+        </div>
+      }
+      centered={false}
+      className="border-border/50 border-b px-4"
+    />
+  );
+}

apps/web/app/[locale]/docs/_components/docs-nav-link.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+import { SidebarMenuButton, SidebarMenuItem } from '@kit/ui/sidebar';
+import { cn, isRouteActive } from '@kit/ui/utils';
+
+export function DocsNavLink({
+  label,
+  url,
+  children,
+}: React.PropsWithChildren<{ label: string; url: string }>) {
+  const currentPath = usePathname();
+  const isCurrent = isRouteActive(url, currentPath);
+
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton
+        render={<Link href={url} />}
+        isActive={isCurrent}
+        className={cn('text-secondary-foreground transition-all')}
+      >
+        <span className="block max-w-full truncate">{label}</span>
+
+        {children}
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  );
+}

apps/web/app/[locale]/docs/_components/docs-navigation-collapsible.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+
+import { Cms } from '@kit/cms';
+import { Collapsible } from '@kit/ui/collapsible';
+import { cn, isRouteActive } from '@kit/ui/utils';
+
+export function DocsNavigationCollapsible(
+  props: React.PropsWithChildren<{
+    node: Cms.ContentItem;
+    prefix: string;
+  }>,
+) {
+  const currentPath = usePathname();
+  const prefix = props.prefix;
+
+  const isChildActive = props.node.children.some((child) =>
+    isRouteActive(prefix + '/' + child.url, currentPath),
+  );
+
+  return (
+    <Collapsible
+      className={cn('group/collapsible', {
+        'group/active': isChildActive,
+      })}
+      defaultOpen={isChildActive ? true : !props.node.collapsed}
+    >
+      {props.children}
+    </Collapsible>
+  );
+}

apps/web/app/[locale]/docs/_components/docs-navigation.tsx

@@ -0,0 +1,149 @@
+import { ChevronDown } from 'lucide-react';
+
+import { Cms } from '@kit/cms';
+import { CollapsibleContent, CollapsibleTrigger } from '@kit/ui/collapsible';
+import {
+  Sidebar,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+} from '@kit/ui/sidebar';
+
+import { DocsNavLink } from '../_components/docs-nav-link';
+import { DocsNavigationCollapsible } from '../_components/docs-navigation-collapsible';
+import { FloatingDocumentationNavigationButton } from './floating-docs-navigation-button';
+
+function Node({
+  node,
+  level,
+  prefix,
+}: {
+  node: Cms.ContentItem;
+  level: number;
+  prefix: string;
+}) {
+  const url = `${prefix}/${node.slug}`;
+  const label = node.label ? node.label : node.title;
+
+  return (
+    <NodeContainer node={node} prefix={prefix}>
+      <NodeTrigger node={node} label={label} url={url} />
+
+      <NodeContentContainer node={node}>
+        <Tree pages={node.children ?? []} level={level + 1} prefix={prefix} />
+      </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 render={<SidebarMenuItem />}>
+        <SidebarMenuButton>
+          {label}
+          <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
+        </SidebarMenuButton>
+      </CollapsibleTrigger>
+    );
+  }
+
+  return <DocsNavLink label={label} url={url} />;
+}
+
+function Tree({
+  pages,
+  level,
+  prefix,
+}: {
+  pages: Cms.ContentItem[];
+  level: number;
+  prefix: string;
+}) {
+  if (level === 0) {
+    return pages.map((treeNode, index) => (
+      <Node key={index} node={treeNode} level={level} prefix={prefix} />
+    ));
+  }
+
+  if (pages.length === 0) {
+    return null;
+  }
+
+  return (
+    <SidebarMenuSub>
+      {pages.map((treeNode, index) => (
+        <Node key={index} node={treeNode} level={level} prefix={prefix} />
+      ))}
+    </SidebarMenuSub>
+  );
+}
+
+export function DocsNavigation({
+  pages,
+  prefix = '/docs',
+}: {
+  pages: Cms.ContentItem[];
+  prefix?: string;
+}) {
+  return (
+    <>
+      <Sidebar variant={'floating'}>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu className={'pb-48'}>
+              <Tree pages={pages} level={0} prefix={prefix} />
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </Sidebar>
+
+      <FloatingDocumentationNavigationButton />
+    </>
+  );
+}

apps/web/app/[locale]/docs/_components/floating-docs-navigation-button.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { Menu } from 'lucide-react';
+
+import { Button } from '@kit/ui/button';
+import { useSidebar } from '@kit/ui/sidebar';
+
+export function FloatingDocumentationNavigationButton() {
+  const { toggleSidebar } = useSidebar();
+  return (
+    <Button
+      size="custom"
+      variant="custom"
+      className={
+        'bg-primary fixed right-5 bottom-5 z-10 h-16! w-16! rounded-full! lg:hidden'
+      }
+      onClick={toggleSidebar}
+    >
+      <Menu className={'text-primary-foreground size-6'} />
+    </Button>
+  );
+}