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/dev-tool/components/app-layout.tsx

@@ -1,13 +1,13 @@
-import { DevToolSidebar } from '@/components/app-sidebar';
+import { SidebarInset, SidebarProvider } from '@kit/ui/sidebar';
 
-import { SidebarInset, SidebarProvider } from '@kit/ui/shadcn-sidebar';
+import { DevToolSidebar } from '@/components/app-sidebar';
 
 export function DevToolLayout(props: React.PropsWithChildren) {
   return (
     <SidebarProvider>
       <DevToolSidebar />
 
-      <SidebarInset>{props.children}</SidebarInset>
+      <SidebarInset className="px-4">{props.children}</SidebarInset>
     </SidebarProvider>
   );
 }

apps/dev-tool/components/app-sidebar.tsx

@@ -24,7 +24,7 @@ import {
   SidebarMenuSub,
   SidebarMenuSubButton,
   SidebarMenuSubItem,
-} from '@kit/ui/shadcn-sidebar';
+} from '@kit/ui/sidebar';
 import { isRouteActive } from '@kit/ui/utils';
 
 const routes = [
@@ -92,14 +92,14 @@ export function DevToolSidebar({
                     {route.children.map((child) => (
                       <SidebarMenuSubItem key={child.path}>
                         <SidebarMenuSubButton
-                          asChild
+                          render={
+                            <Link href={child.path}>
+                              <child.Icon className="h-4 w-4" />
+                              <span>{child.label}</span>
+                            </Link>
+                          }
                           isActive={isRouteActive(child.path, pathname, false)}
-                        >
-                          <Link href={child.path}>
-                            <child.Icon className="h-4 w-4" />
-                            <span>{child.label}</span>
-                          </Link>
-                        </SidebarMenuSubButton>
+                        />
                       </SidebarMenuSubItem>
                     ))}
                   </SidebarMenuSub>
@@ -107,13 +107,13 @@ export function DevToolSidebar({
               ) : (
                 <SidebarMenuButton
                   isActive={isRouteActive(route.path, pathname, false)}
-                  asChild
-                >
-                  <Link href={route.path}>
-                    <route.Icon className="h-4 w-4" />
-                    <span>{route.label}</span>
-                  </Link>
-                </SidebarMenuButton>
+                  render={
+                    <Link href={route.path}>
+                      <route.Icon className="h-4 w-4" />
+                      <span>{route.label}</span>
+                    </Link>
+                  }
+                />
               )}
             </SidebarMenuItem>
           ))}

apps/dev-tool/components/env-mode-selector.tsx

@@ -2,8 +2,6 @@
 
 import { useRouter } from 'next/navigation';
 
-import { EnvMode } from '@/app/variables/lib/types';
-
 import {
   Select,
   SelectContent,
@@ -12,6 +10,8 @@ import {
   SelectValue,
 } from '@kit/ui/select';
 
+import { EnvMode } from '@/app/variables/lib/types';
+
 export function EnvModeSelector({ mode }: { mode: EnvMode }) {
   const router = useRouter();
 

apps/dev-tool/components/iframe.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { useState } from 'react';
-
 import { createPortal } from 'react-dom';
 
 export const IFrame: React.FC<

apps/dev-tool/components/root-providers.tsx

@@ -3,18 +3,18 @@
 import { useState } from 'react';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { AbstractIntlMessages } from 'next-intl';
 
-import { I18nProvider } from '@kit/i18n/provider';
+import { I18nClientProvider } from '@kit/i18n/provider';
 import { Toaster } from '@kit/ui/sonner';
 
-import { i18nResolver } from '../lib/i18n/i18n.resolver';
-import { getI18nSettings } from '../lib/i18n/i18n.settings';
-
-export function RootProviders(props: React.PropsWithChildren) {
+export function RootProviders(
+  props: React.PropsWithChildren<{ messages: AbstractIntlMessages }>,
+) {
   return (
-    <I18nProvider settings={getI18nSettings('en')} resolver={i18nResolver}>
+    <I18nClientProvider locale="en" messages={props.messages}>
       <ReactQueryProvider>{props.children}</ReactQueryProvider>
-    </I18nProvider>
+    </I18nClientProvider>
   );
 }
 

apps/dev-tool/components/status-tile.tsx

@@ -33,7 +33,7 @@ interface ServiceCardProps {
 export const ServiceCard = ({ name, status }: ServiceCardProps) => {
   return (
     <Card className="w-full max-w-2xl">
-      <CardContent className="p-4">
+      <CardContent>
         <div className="space-y-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center space-x-4">