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

docs/components/app-breadcrumbs.mdoc

@@ -0,0 +1,84 @@
+---
+status: "published"
+
+label: "App Breadcrumbs"
+title: "App Breadcrumbs Component in the Next.js Supabase SaaS kit"
+description: "Learn how to use the App Breadcrumbs component in the Next.js Supabase SaaS kit"
+order: 6
+---
+
+
+The `AppBreadcrumbs` component creates a dynamic breadcrumb navigation based on the current URL path. It's designed to work with Next.js and uses the `usePathname` hook from Next.js for routing information.
+
+## Features
+
+- Automatically generates breadcrumbs from the current URL path
+- Supports custom labels for path segments
+- Limits the number of displayed breadcrumbs with an ellipsis for long paths
+- Internationalization support with the `Trans` component
+- Responsive design with different text sizes for mobile and desktop
+
+## Usage
+
+```tsx
+import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
+
+function MyPage() {
+  return (
+    <AppBreadcrumbs
+      values={{
+        "custom-slug": "Custom Label"
+      }}
+      maxDepth={4}
+    />
+  );
+}
+```
+
+When you have IDs in your URL, you can use the `values` prop to provide custom labels for those segments. For example, if your URL is `/users/123`, you can set `values={{ "123": "User Profile" }}` to display "User Profile" instead of "123" in the breadcrumb.
+
+```tsx
+<AppBreadcrumbs
+  values={{
+    "123": "User"
+  }}
+/>
+```
+
+This will display "User" instead of "123" in the breadcrumb.
+
+## Props
+
+The component accepts two optional props:
+
+1. `values`: An object where keys are URL segments and values are custom labels.
+- Type: `Record<string, string>`
+- Default: `{}`
+2. `maxDepth`: The maximum number of breadcrumb items to display before using an ellipsis.
+- Type: `number`
+- Default: `6`
+
+## Functionality
+
+- The component splits the current path into segments and creates a breadcrumb item for each.
+- If the number of segments exceeds `maxDepth`, it shows an ellipsis (...) to indicate hidden segments.
+- The last breadcrumb item is not clickable and represents the current page.
+- Custom labels can be provided through the `values` prop.
+- For segments without custom labels, it attempts to use an i18n key (`common.routes.[unslugified-path]`). If no translation is found, it falls back to the unslugified path.
+
+## Styling
+
+- The component uses Tailwind CSS classes for styling.
+- Breadcrumb items are capitalized.
+- On larger screens (lg breakpoint), the text size is slightly smaller.
+
+## Dependencies
+
+This component relies on several other components and utilities:
+
+- Next.js `usePathname` hook
+- Custom UI components (Breadcrumb, BreadcrumbItem, etc.) from Shadcn UI
+- `If` component for conditional rendering
+- `Trans` component for internationalization
+
+This component provides a flexible and easy-to-use solution for adding breadcrumb navigation to your Next.js application. It's particularly useful for sites with deep hierarchical structures or those requiring dynamic breadcrumb generation.