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/ui/src/hooks/use-async-dialog-state.test.ts

@@ -0,0 +1,116 @@
+import { describe, expect, it } from 'vitest';
+
+import { createAsyncDialogState } from './use-async-dialog-state';
+
+describe('createAsyncDialogState', () => {
+  it('starts idle for a closed dialog', () => {
+    const state = createAsyncDialogState();
+
+    expect(state.getSessionId()).toBe(0);
+    expect(state.isPending()).toBe(false);
+    expect(state.isCurrentSession(0)).toBe(true);
+  });
+
+  it('tracks pending state for the active session', () => {
+    const state = createAsyncDialogState(true);
+    const sessionId = state.getSessionId();
+
+    state.setPending(sessionId, true);
+
+    expect(state.isPending()).toBe(true);
+
+    state.setPending(sessionId, false);
+
+    expect(state.isPending()).toBe(false);
+  });
+
+  it('keeps pending true until all overlapping requests settle', () => {
+    const state = createAsyncDialogState(true);
+    const sessionId = state.getSessionId();
+
+    state.setPending(sessionId, true);
+    state.setPending(sessionId, true);
+
+    expect(state.isPending()).toBe(true);
+
+    state.setPending(sessionId, false);
+
+    expect(state.isPending()).toBe(true);
+
+    state.setPending(sessionId, false);
+
+    expect(state.isPending()).toBe(false);
+  });
+
+  it('ignores extra false transitions', () => {
+    const state = createAsyncDialogState(true);
+    const sessionId = state.getSessionId();
+
+    state.setPending(sessionId, false);
+
+    expect(state.isPending()).toBe(false);
+  });
+
+  it('creates a new session when reopening the dialog', () => {
+    const state = createAsyncDialogState(true);
+    const firstSessionId = state.getSessionId();
+
+    state.syncOpen(false);
+    state.syncOpen(true);
+
+    expect(state.getSessionId()).toBe(firstSessionId + 1);
+    expect(state.isCurrentSession(firstSessionId)).toBe(false);
+  });
+
+  it('ignores stale pending updates from an older session after reopen', () => {
+    const state = createAsyncDialogState(true);
+    const firstSessionId = state.getSessionId();
+
+    state.setPending(firstSessionId, true);
+    state.syncOpen(false);
+    state.syncOpen(true);
+
+    expect(state.isPending()).toBe(false);
+
+    state.setPending(firstSessionId, false);
+
+    expect(state.isPending()).toBe(false);
+  });
+
+  it('allows new session requests after a reopen even if the old one was pending', () => {
+    const state = createAsyncDialogState(true);
+    const firstSessionId = state.getSessionId();
+
+    state.setPending(firstSessionId, true);
+    state.syncOpen(false);
+    state.syncOpen(true);
+
+    const secondSessionId = state.getSessionId();
+
+    state.setPending(secondSessionId, true);
+
+    expect(state.isPending()).toBe(true);
+
+    state.setPending(firstSessionId, false);
+
+    expect(state.isPending()).toBe(true);
+
+    state.setPending(secondSessionId, false);
+
+    expect(state.isPending()).toBe(false);
+  });
+
+  it('does not bump the session id for repeated syncs with the same open value', () => {
+    const state = createAsyncDialogState();
+
+    state.syncOpen(false);
+    expect(state.getSessionId()).toBe(0);
+
+    state.syncOpen(true);
+    const openSessionId = state.getSessionId();
+
+    state.syncOpen(true);
+
+    expect(state.getSessionId()).toBe(openSessionId);
+  });
+});

packages/ui/src/hooks/use-async-dialog-state.ts

@@ -0,0 +1,46 @@
+interface AsyncDialogState {
+  getSessionId: () => number;
+  isCurrentSession: (sessionId: number) => boolean;
+  isPending: () => boolean;
+  setPending: (sessionId: number, pending: boolean) => void;
+  syncOpen: (open: boolean) => void;
+}
+
+export function createAsyncDialogState(initialOpen = false): AsyncDialogState {
+  let isOpen = initialOpen;
+  let sessionId = initialOpen ? 1 : 0;
+  const pendingCountBySession = new Map<number, number>();
+
+  const getPendingCount = () => pendingCountBySession.get(sessionId) ?? 0;
+
+  return {
+    getSessionId: () => sessionId,
+    isCurrentSession: (candidateSessionId) => candidateSessionId === sessionId,
+    isPending: () => getPendingCount() > 0,
+    setPending: (targetSessionId, pending) => {
+      if (targetSessionId !== sessionId) return;
+
+      const currentPendingCount =
+        pendingCountBySession.get(targetSessionId) ?? 0;
+      const nextPendingCount = pending
+        ? currentPendingCount + 1
+        : Math.max(0, currentPendingCount - 1);
+
+      if (nextPendingCount === 0) {
+        pendingCountBySession.delete(targetSessionId);
+        return;
+      }
+
+      pendingCountBySession.set(targetSessionId, nextPendingCount);
+    },
+    syncOpen: (nextOpen) => {
+      if (nextOpen === isOpen) return;
+
+      isOpen = nextOpen;
+
+      if (nextOpen) {
+        sessionId += 1;
+      }
+    },
+  };
+}

packages/ui/src/hooks/use-async-dialog.ts

@@ -0,0 +1,114 @@
+'use client';
+
+import { useCallback, useMemo, useReducer, useRef } from 'react';
+
+import { createAsyncDialogState } from './use-async-dialog-state';
+
+interface UseAsyncDialogOptions {
+  /**
+   * External controlled open state (optional).
+   * If not provided, the hook manages its own internal state.
+   */
+  open?: boolean;
+  /**
+   * External controlled onOpenChange callback (optional).
+   * If not provided, the hook manages its own internal state.
+   */
+  onOpenChange?: (open: boolean) => void;
+}
+
+interface UseAsyncDialogReturn {
+  /** Whether the dialog is open */
+  open: boolean;
+  /** Programmatic control for the current dialog session */
+  setOpen: (open: boolean) => void;
+  /** Whether an async operation is in progress */
+  isPending: boolean;
+  /** Set pending state - call from action callbacks */
+  setIsPending: (pending: boolean) => void;
+  /** Props to spread on Dialog component */
+  dialogProps: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    disablePointerDismissal: true;
+  };
+}
+
+/**
+ * Hook for managing dialog state with async operation protection.
+ *
+ * Prevents dialog from closing via Escape or backdrop click while
+ * an async operation is in progress. Programmatic updates remain tied
+ * to the dialog session that created them, so stale async completions
+ * do not close a newer reopened dialog.
+ */
+export function useAsyncDialog(
+  options: UseAsyncDialogOptions = {},
+): UseAsyncDialogReturn {
+  const { open: externalOpen, onOpenChange: externalOnOpenChange } = options;
+
+  const [, forceRender] = useReducer((value: number) => value + 1, 0);
+  const [internalOpen, setInternalOpen] = useReducer(
+    (_: boolean, next: boolean) => next,
+    false,
+  );
+  const stateRef = useRef(createAsyncDialogState(Boolean(externalOpen)));
+
+  const isControlled = externalOpen !== undefined;
+  const open = isControlled ? externalOpen : internalOpen;
+
+  stateRef.current.syncOpen(open);
+
+  const isPending = stateRef.current.isPending();
+  const sessionId = stateRef.current.getSessionId();
+
+  const setOpen = useCallback(
+    (newOpen: boolean) => {
+      if (!stateRef.current.isCurrentSession(sessionId)) return;
+
+      if (isControlled && externalOnOpenChange) {
+        externalOnOpenChange(newOpen);
+      } else {
+        setInternalOpen(newOpen);
+      }
+    },
+    [externalOnOpenChange, isControlled, sessionId],
+  );
+
+  const setIsPending = useCallback(
+    (pending: boolean) => {
+      if (!stateRef.current.isCurrentSession(sessionId)) return;
+
+      stateRef.current.setPending(sessionId, pending);
+      forceRender();
+    },
+    [sessionId],
+  );
+
+  const guardedOnOpenChange = useCallback(
+    (newOpen: boolean) => {
+      if (!newOpen && stateRef.current.isPending()) return;
+
+      setOpen(newOpen);
+    },
+    [setOpen],
+  );
+
+  const dialogProps = useMemo(
+    () =>
+      ({
+        open,
+        onOpenChange: guardedOnOpenChange,
+        disablePointerDismissal: true,
+      }) as const,
+    [guardedOnOpenChange, open],
+  );
+
+  return {
+    open,
+    setOpen,
+    isPending,
+    setIsPending,
+    dialogProps,
+  };
+}

packages/ui/src/hooks/use-mobile.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-const MOBILE_BREAKPOINT = 1024;
+const MOBILE_BREAKPOINT = 768;
 
 export function useIsMobile() {
   const [isMobile, setIsMobile] = React.useState<boolean | undefined>(