@allbluecn/web-app 0.4.17 → 0.4.18

package/src/routes/_nav/prd/index.tsx

@@ -0,0 +1,9 @@
+// AUTO-GENERATED by @allbluecn/kernel — DO NOT EDIT
+import { createFileRoute } from '@tanstack/react-router'
+import type { PluginRouteContext } from '@allbluecn/kernel'
+import { prd_route_1 } from '@allbluecn/plugins-core/prd/routes'
+
+export const Route = createFileRoute('/_nav/prd/')({
+  loader: ((ctx: PluginRouteContext) => prd_route_1.loader(ctx)) as any,
+  component: prd_route_1.Component as any,
+})

package/src/routes/_nav/prd/route.tsx

@@ -0,0 +1,8 @@
+// AUTO-GENERATED by @allbluecn/kernel — DO NOT EDIT
+import { createFileRoute } from '@tanstack/react-router'
+import type { PluginRouteContext } from '@allbluecn/kernel'
+import { prd_route_0 } from '@allbluecn/plugins-core/prd/routes'
+
+export const Route = createFileRoute('/_nav/prd')({
+  component: prd_route_0.Component as any,
+})

package/src/routes/_nav/settings/-settings-tabs.tsx

@@ -17,7 +17,7 @@
 
 import { Link, useLocation } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
-import { User, Users, Bot, Palette, Settings, CreditCard, Plug, ShieldCheck, type LucideIcon } from 'lucide-react'
+import { User, Users, Bot, Palette, Settings, CreditCard, Plug, ShieldCheck, Bell, type LucideIcon } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { mergeSettingsGroups } from '@/components/plugin-slots/plugin-settings-tabs'
 
@@ -45,6 +45,7 @@ const groups: SettingsGroup[] = [
       { labelKey: 'tabs.accountProfile', path: '/settings/account', icon: User },
       { labelKey: 'tabs.teamMembers', path: '/settings/team', icon: Users },
       { labelKey: 'tabs.dataPrivacy', path: '/settings/privacy', icon: ShieldCheck },
+      { labelKey: 'tabs.notifications', path: '/settings/notifications', icon: Bell },
     ],
   },
   {

package/src/routes/_nav/settings/design/route.lazy.tsx

@@ -70,7 +70,7 @@ function DesignSettingsPage() {
   }, [])
 
   const generateMutation = useMutation({
-    mutationFn: () => generateSketchTokenFn(),
+    mutationFn: () => generateSketchTokenFn({ data: {} }),
     onSuccess: (data) => {
       toast.success(t('design.tokenGenerated'))
       setToken(data.token)

package/src/routes/_nav/settings/notifications/route.lazy.tsx

@@ -0,0 +1,37 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { createLazyFileRoute } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { NotificationPreferences } from '@/components/notifications/notification-preferences'
+
+export const Route = createLazyFileRoute('/_nav/settings/notifications')({
+  component: NotificationsSettingsPage,
+})
+
+function NotificationsSettingsPage() {
+  const { t } = useTranslation('notifications')
+  return (
+    <div className="flex flex-col gap-6 p-6">
+      <div className="flex flex-col gap-1">
+        <h1 className="text-xl font-semibold">{t('preferences.title')}</h1>
+        <p className="text-sm text-muted-foreground">{t('preferences.description')}</p>
+      </div>
+      <NotificationPreferences />
+    </div>
+  )
+}

package/src/routes/_nav/settings/notifications/route.tsx

@@ -0,0 +1,20 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_nav/settings/notifications')({})

package/src/routes/_nav/settings/privacy/route.lazy.tsx

@@ -61,7 +61,7 @@ function PrivacySettingsPage() {
   const handleExport = async () => {
     setExporting(true)
     try {
-      await requestMyExportFn()
+      await requestMyExportFn({ data: {} })
       toast.success(t('privacy.submitted'))
     } catch (err) {
       toast.error(err instanceof Error ? err.message : '操作失败')
@@ -74,7 +74,7 @@ function PrivacySettingsPage() {
     if (!userName || confirmName.trim() !== userName.trim()) return
     setDeleting(true)
     try {
-      await requestMyDeletionFn()
+      await requestMyDeletionFn({ data: {} })
       toast.success(t('privacy.submitted'))
       setDialogOpen(false)
       setConfirmName('')

package/src/routes/_nav/settings/route.lazy.tsx

@@ -34,7 +34,7 @@ function SettingsLayout() {
         </div>
       </aside>
       <section className="min-w-0 flex-1 overflow-y-auto flex justify-center">
-        <div className="max-w-3xl w-full">
+        <div className="max-w-4xl w-full">
           <Outlet />
         </div>
       </section>

package/src/routes/_nav/tags/$id/route.tsx

@@ -0,0 +1,8 @@
+// AUTO-GENERATED by @allbluecn/kernel — DO NOT EDIT
+import { createFileRoute } from '@tanstack/react-router'
+import type { PluginRouteContext } from '@allbluecn/kernel'
+import { tags_route_2 } from '@allbluecn/plugins-core/tags/routes'
+
+export const Route = createFileRoute('/_nav/tags/$id')({
+  component: tags_route_2.Component as any,
+})

package/src/routes/_nav/tags/index.tsx

@@ -0,0 +1,8 @@
+// AUTO-GENERATED by @allbluecn/kernel — DO NOT EDIT
+import { createFileRoute } from '@tanstack/react-router'
+import type { PluginRouteContext } from '@allbluecn/kernel'
+import { tags_route_1 } from '@allbluecn/plugins-core/tags/routes'
+
+export const Route = createFileRoute('/_nav/tags/')({
+  component: tags_route_1.Component as any,
+})

package/src/routes/_nav/tags/route.tsx

@@ -0,0 +1,8 @@
+// AUTO-GENERATED by @allbluecn/kernel — DO NOT EDIT
+import { createFileRoute } from '@tanstack/react-router'
+import type { PluginRouteContext } from '@allbluecn/kernel'
+import { tags_route_0 } from '@allbluecn/plugins-core/tags/routes'
+
+export const Route = createFileRoute('/_nav/tags')({
+  component: tags_route_0.Component as any,
+})

package/src/routes/_nav/tags/settings/route.tsx

@@ -0,0 +1,9 @@
+// AUTO-GENERATED by @allbluecn/kernel — DO NOT EDIT
+import { createFileRoute } from '@tanstack/react-router'
+import type { PluginRouteContext } from '@allbluecn/kernel'
+import { tags_route_3 } from '@allbluecn/plugins-core/tags/routes'
+
+export const Route = createFileRoute('/_nav/tags/settings')({
+  loader: ((ctx: PluginRouteContext) => tags_route_3.loader(ctx)) as any,
+  component: tags_route_3.Component as any,
+})

package/src/routes/api/notifications/stream.ts

@@ -0,0 +1,88 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS for a PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { createFileRoute } from '@tanstack/react-router'
+import { toServerSentEventsResponse } from '@tanstack/ai'
+import type { StreamChunk } from '@tanstack/ai'
+import { prisma } from '@allbluecn/database'
+import { getCurrentSession } from '@/lib/session'
+import { notificationBus } from '@/server/notifications/event-bus'
+import type { NotificationSseValue } from '@allbluecn/shared'
+
+export const Route = createFileRoute('/api/notifications/stream')({
+  server: {
+    handlers: {
+      GET: async ({ request }) => {
+        let session = null as any
+        try {
+          session = await getCurrentSession(request)
+        } catch {
+          return new Response('Unauthorized', { status: 401 })
+        }
+        if (!session?.user?.id) {
+          return new Response('Unauthorized', { status: 401 })
+        }
+        const userId = session.user.id
+
+        const abortController = new AbortController()
+        request.signal.addEventListener('abort', () => abortController.abort())
+
+        const queue: NotificationSseValue[] = []
+        let notify: (() => void) | null = null
+
+        const unsubscribe = notificationBus.subscribe(userId, (value) => {
+          queue.push(value)
+          notify?.()
+        })
+
+        async function* stream(): AsyncGenerator<StreamChunk> {
+          try {
+            const count = await prisma.notification.count({
+              where: { userId, readAt: null },
+            })
+            yield {
+              type: 'CUSTOM',
+              name: 'notifications',
+              value: { kind: 'unread_snapshot', count },
+            } as unknown as StreamChunk
+
+            while (!abortController.signal.aborted) {
+              if (queue.length === 0) {
+                await new Promise<void>((resolve) => {
+                  notify = resolve
+                  setTimeout(resolve, 25000)
+                })
+                notify = null
+                continue
+              }
+              const value = queue.shift()!
+              yield {
+                type: 'CUSTOM',
+                name: 'notifications',
+                value,
+              } as unknown as StreamChunk
+            }
+          } finally {
+            unsubscribe()
+          }
+        }
+
+        return toServerSentEventsResponse(stream(), { abortController })
+      },
+    },
+  },
+})

package/src/routes/invite/$token/route.lazy.tsx

@@ -12,64 +12,328 @@
 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 // GNU Affero General Public License for more details.
 //
-// You should have received a copy of this license.
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-import { createLazyFileRoute, useNavigate } from '@tanstack/react-router'
-import { useQuery, useMutation } from '@tanstack/react-query'
+import { createLazyFileRoute, Link, useNavigate } from '@tanstack/react-router'
+import { useState, useEffect } from 'react'
+import { useMutation } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import { Badge } from '@/components/ui/badge'
-import { toast } from 'sonner'
-import { getTeamInvitationByTokenFn, acceptTeamInvitationFn } from '@/server/serverFns/team'
-import { ArrowRight } from 'lucide-react'
+import { toast } from '@/components/ui/sonner'
+import { RainbowButton } from '@/components/magicui/rainbow-button'
+import { UserAvatar } from '@allbluecn/ui'
+import { AuthLayout, AuthLayoutLeft, AuthLayoutRight } from '@/components/auth/auth-layout'
+import { AuthBrandPanel } from '@/components/auth/auth-brand-panel'
+import { IconInput } from '@/components/auth/icon-input'
+import { Card, CardContent } from '@/components/ui/card'
+import { ArrowRight, CheckCircle2, Info, Loader2, Mail, UserCircle } from 'lucide-react'
+import { useDebouncedCallback } from '@/lib/pacer'
+import { acceptTeamInvitationFn, applyTeamInvitationFn, checkInviteEmailRegisteredFn } from '@/server/serverFns/team'
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
 
 export const Route = createLazyFileRoute('/invite/$token')({
   component: InvitePage,
 })
 
+type EmailCheckState = 'idle' | 'checking' | 'registered' | 'unregistered'
+
 function InvitePage() {
-  const { token } = Route.useRouteContext()
+  const { token, inv } = Route.useRouteContext()
   const navigate = useNavigate()
   const { t } = useTranslation('invite')
-  const { data, isLoading } = useQuery({
-    queryKey: ['teamInvitation', token],
-    queryFn: () => getTeamInvitationByTokenFn({ data: { token } }),
-  })
-  const accept = useMutation({
+  const ctx = Route.useRouteContext() as any
+  const session = ctx?.session
+  const isLoggedIn = !!session?.user?.id
+  const emailPrefilled = inv?.channel === 'email' && !!inv?.email
+
+  const [emailInput, setEmailInput] = useState('')
+  const [emailCheck, setEmailCheck] = useState<EmailCheckState>(
+    emailPrefilled ? 'checking' : 'idle',
+  )
+  const [applied, setApplied] = useState(false)
+
+  const acceptMutation = useMutation({
     mutationFn: () => acceptTeamInvitationFn({ data: { token } }),
-    onSuccess: () => {
-      toast.success(t('accepted'))
-      navigate({ to: '/dashboard' })
-    },
+    onSuccess: () => setApplied(true),
     onError: (e: Error) => toast.error(e.message),
   })
-  if (isLoading) return null
-  if (!data) return <div className="p-10">{t('notFound')}</div>
-  const ok = data.effectiveStatus === 'pending'
-  return (
-    <div className="flex min-h-dvh items-center justify-center p-6">
-      <Card className="w-full max-w-md">
-        <CardHeader>
-          <CardTitle>{t('title', { owner: data.owner.username })}</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            {t('seatType')}：
-            <Badge variant="outline">{data.seatType === 'guest' ? t('guest') : t('member')}</Badge>
+
+  const applyMutation = useMutation({
+    mutationFn: (email: string) => applyTeamInvitationFn({ data: { token, email } }),
+    onSuccess: () => setApplied(true),
+    onError: (e: Error) => toast.error(e.message),
+  })
+
+  const checkEmail = useDebouncedCallback(async (email: string) => {
+    try {
+      const { registered } = await checkInviteEmailRegisteredFn({ data: { email } })
+      setEmailCheck(registered ? 'registered' : 'unregistered')
+    } catch {
+      setEmailCheck('idle')
+    }
+  }, { wait: 500 })
+
+  useEffect(() => {
+    const email = (emailPrefilled ? inv!.email ?? '' : emailInput).trim()
+    if (!EMAIL_RE.test(email)) {
+      setEmailCheck('idle')
+      return
+    }
+    setEmailCheck('checking')
+    void checkEmail(email.toLowerCase())
+  }, [emailInput, emailPrefilled, inv?.email, checkEmail])
+
+  if (!inv || inv.effectiveStatus === 'expired' || inv.effectiveStatus === 'revoked') {
+    return (
+      <AuthLayout>
+        <AuthLayoutLeft>
+          <div className="space-y-4 text-center">
+            <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-destructive/10">
+              <Info className="size-8 text-destructive" />
+            </div>
+            <h1 className="text-2xl font-semibold">{t('expiredOrInvalid')}</h1>
+            <p className="text-sm text-muted-foreground">{t('expiredOrInvalidDesc')}</p>
+            <Link to="/login" className="mt-4 inline-block text-sm text-primary hover:underline">
+              {t('goToLogin')}
+            </Link>
           </div>
-          {ok ? (
-            <Button className="w-full" disabled={accept.isPending} onClick={() => accept.mutate()}>
-              {t('accept')}
-              <ArrowRight className="ml-2 size-4" />
-            </Button>
-          ) : (
-            <p className="text-sm text-muted-foreground">
-              {data.effectiveStatus === 'expired' ? t('expired') : t('invalid')}
-            </p>
-          )}
-        </CardContent>
-      </Card>
+        </AuthLayoutLeft>
+        <AuthLayoutRight>
+          <AuthBrandPanel footer={<p className="text-sm text-muted-foreground">{t('brandFooter')}</p>} title={t('brandTitle')} />
+        </AuthLayoutRight>
+      </AuthLayout>
+    )
+  }
+
+  if (!isLoggedIn && inv.channel === 'email' && inv.effectiveStatus === 'pending_approval') {
+    return (
+      <AuthLayout>
+        <AuthLayoutLeft>
+          <div className="space-y-4 text-center">
+            <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
+              <Loader2 className="size-8 animate-spin text-primary" />
+            </div>
+            <h1 className="text-2xl font-semibold">{t('awaitingApproval')}</h1>
+            <p className="text-sm text-muted-foreground">{t('awaitingApprovalDesc')}</p>
+            <div className="space-y-2">
+              <Link
+                to="/login"
+                search={{ redirect: `/invite/${token}` }}
+                className="block w-full rounded-lg border border-primary/20 bg-primary/5 px-4 py-2 text-sm text-primary font-medium hover:bg-primary/10 transition-colors"
+              >
+                {t('loginNow')}
+              </Link>
+            </div>
+          </div>
+        </AuthLayoutLeft>
+        <AuthLayoutRight>
+          <AuthBrandPanel footer={<p className="text-sm text-muted-foreground">{t('brandFooter')}</p>} title={t('brandTitle')} />
+        </AuthLayoutRight>
+      </AuthLayout>
+    )
+  }
+
+  const owner = inv.owner
+  const features = [
+    { icon: Mail, label: t('featureCollaboration'), desc: t('featureCollaborationDesc') },
+    { icon: UserCircle, label: t('featureTeam'), desc: t('featureTeamDesc') },
+  ]
+
+  const awaitingBlock = (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2 rounded-lg border border-primary/20 bg-primary/5 p-3">
+        <Loader2 className="size-4 animate-spin text-primary shrink-0" />
+        <p className="text-sm text-primary font-medium">{t('awaitingApproval')}</p>
+      </div>
+      <p className="text-center text-xs text-muted-foreground">{t('awaitingApprovalDesc')}</p>
+      <Link
+        to="/dashboard"
+        className="flex w-full items-center justify-center gap-2 rounded-lg border py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+      >
+        {t('goToDashboard')}
+        <ArrowRight className="size-4" />
+      </Link>
     </div>
   )
+
+  return (
+    <AuthLayout>
+      <AuthLayoutLeft>
+        <div className="space-y-3 text-center">
+          <UserAvatar
+            avatarConfig={owner.avatarConfig as any}
+            bgColor={owner.bgColor}
+            bgShape={owner.bgShape as 'circle' | 'rounded' | 'square' | null}
+            className="mx-auto size-16"
+            name={owner.username}
+            size="2xl"
+          />
+          <div className="space-y-1">
+            <p className="text-2xl font-bold tracking-tight">{owner.username}</p>
+            <p className="text-sm font-medium text-primary">
+              {inv.channel === 'link'
+                ? t('inviteYou', { owner: owner.email })
+                : t('seatMessage', { seat: inv.selectedRole === 'member' ? t('seatMember') : t('seatViewer') })}
+            </p>
+          </div>
+        </div>
+
+        {isLoggedIn ? (
+          <div className="space-y-4">
+            <Card className="border border-border">
+              <CardContent>
+                <div className="flex items-center gap-3">
+                  <UserAvatar
+                    avatarConfig={session.user?.avatarConfig as any}
+                    bgColor={session.user?.bgColor}
+                    bgShape={session.user?.bgShape as 'circle' | 'rounded' | 'square' | null}
+                    className="shrink-0"
+                    name={session.user?.username ?? session.user?.name}
+                    size="md"
+                  />
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-medium">
+                      {session.user?.name ?? session.user?.email}
+                    </p>
+                    <p className="truncate text-xs text-muted-foreground">{session.user?.email}</p>
+                  </div>
+                  <CheckCircle2 className="size-4 text-green-500 shrink-0" />
+                </div>
+              </CardContent>
+            </Card>
+
+            {applied || inv.myRequestStatus === 'pending' || (inv.channel === 'email' && inv.effectiveStatus === 'pending_approval') ? (
+              awaitingBlock
+            ) : inv.alreadyJoined ? (
+              <div className="space-y-3">
+                <div className="flex items-center gap-2 rounded-lg border border-green-500/30 bg-green-500/10 p-3">
+                  <CheckCircle2 className="size-4 text-green-500 shrink-0" />
+                  <p className="text-sm font-medium text-green-600">{t('alreadyJoined')}</p>
+                </div>
+                <p className="text-center text-xs text-muted-foreground">{t('alreadyJoinedDesc')}</p>
+                <Link
+                  to="/dashboard"
+                  className="flex w-full items-center justify-center gap-2 rounded-lg border py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+                >
+                  {t('goToDashboard')}
+                </Link>
+              </div>
+            ) : (
+              <>
+                <RainbowButton
+                  className="w-full"
+                  disabled={acceptMutation.isPending}
+                  onClick={() => acceptMutation.mutate()}
+                >
+                  {acceptMutation.isPending ? (
+                    <>
+                      <Loader2 className="mr-2 size-4 animate-spin" />
+                      {t('joining')}
+                    </>
+                  ) : (
+                    <>
+                      {inv.channel === 'email' ? t('acceptJoin') : t('requestToJoin')}
+                      <ArrowRight className="ml-2 size-4" />
+                    </>
+                  )}
+                </RainbowButton>
+                {inv.channel === 'link' && (
+                  <p className="text-center text-xs text-muted-foreground">{t('linkApprovalNote')}</p>
+                )}
+              </>
+            )}
+          </div>
+        ) : (
+          <div className="space-y-4">
+            <IconInput
+              icon={Mail}
+              label={t('emailLabel')}
+              onChange={(e) => setEmailInput(e.target.value)}
+              placeholder="name@example.com"
+              type="email"
+              value={emailPrefilled ? inv!.email ?? '' : emailInput}
+              disabled={emailPrefilled}
+            />
+
+            {applied ? (
+              <>
+                <div className="flex items-center gap-2 rounded-lg border border-primary/20 bg-primary/5 p-3">
+                  <CheckCircle2 className="size-4 text-primary shrink-0" />
+                  <div className="min-w-0">
+                    <p className="text-sm font-medium text-primary">{t('appliedHint')}</p>
+                    <p className="text-xs text-muted-foreground">{t('appliedHintLogin')}</p>
+                  </div>
+                </div>
+                <Link to="/login" search={{ redirect: `/invite/${token}` }} className="block">
+                  <RainbowButton className="w-full">
+                    {t('loginNow')}
+                    <ArrowRight className="ml-2 size-4" />
+                  </RainbowButton>
+                </Link>
+              </>
+            ) : emailCheck === 'unregistered' ? (
+              <>
+                <RainbowButton
+                  className="w-full"
+                  onClick={() => {
+                    const email = (emailPrefilled ? inv!.email ?? '' : emailInput).trim()
+                    navigate({ to: '/register', search: { invite: token, email } })
+                  }}
+                >
+                  {t('registerNow')}
+                  <ArrowRight className="ml-2 size-4" />
+                </RainbowButton>
+                <p className="text-center text-xs text-muted-foreground">{t('emailUnregisteredHint')}</p>
+              </>
+            ) : (
+              <>
+                <RainbowButton
+                  className="w-full"
+                  disabled={emailCheck !== 'registered' || applyMutation.isPending}
+                  onClick={() => {
+                    const email = (emailPrefilled ? inv!.email ?? '' : emailInput).trim()
+                    if (!EMAIL_RE.test(email)) {
+                      toast.error(t('invalidEmail'))
+                      return
+                    }
+                    applyMutation.mutate(email.toLowerCase())
+                  }}
+                >
+                  {applyMutation.isPending || emailCheck === 'checking' ? (
+                    <>
+                      <Loader2 className="mr-2 size-4 animate-spin" />
+                      {t('checking')}
+                    </>
+                  ) : (
+                    <>
+                      {t('applyToJoin')}
+                      <ArrowRight className="ml-2 size-4" />
+                    </>
+                  )}
+                </RainbowButton>
+                <p className="text-center text-xs text-muted-foreground">
+                  {emailCheck === 'registered' ? t('emailRegisteredHint') : t('notRegisteredNote')}
+                </p>
+              </>
+            )}
+
+            <div className="text-center text-sm">
+              {t('alreadyHaveAccount')}{' '}
+              <Link to="/login" className="font-medium text-primary hover:underline">
+                {t('login')}
+              </Link>
+            </div>
+          </div>
+        )}
+      </AuthLayoutLeft>
+      <AuthLayoutRight>
+        <AuthBrandPanel
+          features={features}
+          footer={<p className="text-sm text-muted-foreground">{t('brandFooter')}</p>}
+          title={t('brandTitle')}
+        />
+      </AuthLayoutRight>
+    </AuthLayout>
+  )
 }