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

packages/features/team-accounts/src/components/invitations/account-invitations-table.tsx

@@ -4,7 +4,7 @@ import { useMemo, useState } from 'react';
 
 import { ColumnDef } from '@tanstack/react-table';
 import { Ellipsis } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
+import { useTranslations } from 'next-intl';
 
 import { Database } from '@kit/supabase/database';
 import { Badge } from '@kit/ui/badge';
@@ -43,7 +43,7 @@ export function AccountInvitationsTable({
   invitations,
   permissions,
 }: AccountInvitationsTableProps) {
-  const { t } = useTranslation('teams');
+  const t = useTranslations('teams');
   const [search, setSearch] = useState('');
   const columns = useGetColumns(permissions);
 
@@ -82,7 +82,7 @@ function useGetColumns(permissions: {
   canRemoveInvitation: boolean;
   currentUserRoleHierarchy: number;
 }): ColumnDef<Invitations[0]>[] {
-  const { t } = useTranslation('teams');
+  const t = useTranslations('teams');
 
   return useMemo(
     () => [
@@ -96,7 +96,7 @@ function useGetColumns(permissions: {
           return (
             <span
               data-test={'invitation-email'}
-              className={'flex items-center space-x-4 text-left'}
+              className={'flex items-center gap-x-2 text-left'}
             >
               <span>
                 <ProfileAvatar text={email} />
@@ -172,19 +172,21 @@ function ActionsDropdown({
   return (
     <>
       <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant={'ghost'} size={'icon'}>
-            <Ellipsis className={'h-5 w-5'} />
-          </Button>
-        </DropdownMenuTrigger>
+        <DropdownMenuTrigger
+          render={
+            <Button variant={'ghost'} size={'icon'}>
+              <Ellipsis className={'h-5 w-5'} />
+            </Button>
+          }
+        />
 
-        <DropdownMenuContent>
+        <DropdownMenuContent className="min-w-52">
           <If condition={permissions.canUpdateInvitation}>
             <DropdownMenuItem
               data-test={'update-invitation-trigger'}
               onClick={() => setIsUpdatingRole(true)}
             >
-              <Trans i18nKey={'teams:updateInvitation'} />
+              <Trans i18nKey={'teams.updateInvitation'} />
             </DropdownMenuItem>
 
             <If condition={getIsInviteExpired(invitation.expires_at)}>
@@ -192,7 +194,7 @@ function ActionsDropdown({
                 data-test={'renew-invitation-trigger'}
                 onClick={() => setIsRenewingInvite(true)}
               >
-                <Trans i18nKey={'teams:renewInvitation'} />
+                <Trans i18nKey={'teams.renewInvitation'} />
               </DropdownMenuItem>
             </If>
           </If>
@@ -200,9 +202,10 @@ function ActionsDropdown({
           <If condition={permissions.canRemoveInvitation}>
             <DropdownMenuItem
               data-test={'remove-invitation-trigger'}
+              variant="destructive"
               onClick={() => setIsDeletingInvite(true)}
             >
-              <Trans i18nKey={'teams:removeInvitation'} />
+              <Trans i18nKey={'teams.removeInvitation'} />
             </DropdownMenuItem>
           </If>
         </DropdownMenuContent>