feat: add webhook queue system and worker

apps/web/.env.development.example → .env.example

@@ -1,5 +1,5 @@
 # Development environment (.env.local)
-# Copy this file to apps/web/.env.local
+# Copy this file to .env.local in the root directory
 
 # Drizzle / libSQL (local sqlite)
 DATABASE_URL=file:./local.db
@@ -36,3 +36,6 @@ STORAGE_USESSL=false
 STORAGE_ACCESS_KEY=formbase
 STORAGE_SECRET_KEY=password
 STORAGE_BUCKET=formbase
+
+# Redis (for webhook queue)
+REDIS_URL=redis://localhost:6379

.eslintrc.cjs

@@ -1,6 +1,12 @@
 /** @type {import('eslint').Linter.Config} */
 const config = {
-  ignorePatterns: ['apps/**', 'packages/**', 'tests/playwright-report/**', 'tests/test-results/**', '**/.eslintrc.cjs'],
+  ignorePatterns: [
+    'apps/**',
+    'packages/**',
+    'tests/playwright-report/**',
+    'tests/test-results/**',
+    '**/.eslintrc.cjs',
+  ],
   extends: ['formbase/base'],
 };
 

apps/web/next.config.js

@@ -20,7 +20,7 @@ const nextConfig = {
     '@formbase/env',
     '@formbase/ui',
     '@formbase/utils',
-    "@formbase/tailwind",
+    '@formbase/tailwind',
   ],
   serverExternalPackages: ['libsql', '@libsql/client'],
   typescript: {

apps/web/package.json

@@ -4,10 +4,10 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "next build",
-    "dev": "next dev -p 3000",
+    "build": "dotenv -e ../../.env.local -- next build",
+    "dev": "dotenv -e ../../.env.local -- next dev -p 3000",
     "lint": "eslint . --cache --max-warnings 0",
-    "start": "next start",
+    "start": "dotenv -e ../../.env.local -- next start",
     "typecheck": "tsc --noEmit --tsBuildInfoFile .tsbuildinfo"
   },
   "dependencies": {
@@ -16,6 +16,7 @@
     "@formbase/db": "workspace:*",
     "@formbase/email": "workspace:*",
     "@formbase/env": "workspace:*",
+    "@formbase/queue": "workspace:*",
     "@formbase/ui": "workspace:*",
     "@formbase/utils": "workspace:*",
     "@hookform/resolvers": "^3.4.2",
@@ -57,6 +58,7 @@
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "dotenv": "^16.4.5",
+    "dotenv-cli": "^7.4.2",
     "eslint-config-formbase": "workspace:*",
     "postcss": "^8.4.38",
     "shiki": "^1.6.3",

apps/web/src/app/(auth)/login/login.tsx

@@ -9,8 +9,6 @@ import type { FormEvent } from 'react';
 import { IconBrandGithub, IconBrandGoogleFilled } from '@tabler/icons-react';
 
 import { signIn } from '@formbase/auth/client';
-
-import { Logo } from '../_components/logo';
 import { Button } from '@formbase/ui/primitives/button';
 import { Input } from '@formbase/ui/primitives/input';
 import { Label } from '@formbase/ui/primitives/label';
@@ -20,6 +18,8 @@ import { LoadingButton } from '~/components/loading-button';
 import { PasswordInput } from '~/components/password-input';
 import { useSocialAuth } from '~/lib/hooks/use-social-auth';
 
+import { Logo } from '../_components/logo';
+
 export function Login() {
   const router = useRouter();
   const [formError, setFormError] = useState<string | null>(null);

apps/web/src/app/(auth)/reset-password/[token]/page.tsx

@@ -1,7 +1,6 @@
 import Link from 'next/link';
 
 import { Logo } from '../../_components/logo';
-
 import { ResetPassword } from './reset-password';
 
 export const metadata = {

apps/web/src/app/(auth)/reset-password/page.tsx

@@ -4,7 +4,6 @@ import { redirect } from 'next/navigation';
 import { getSession } from '@formbase/auth/server';
 
 import { Logo } from '../_components/logo';
-
 import { SendResetEmail } from './send-reset-email';
 
 export const metadata = {

apps/web/src/app/(auth)/reset-password/send-reset-email.tsx

@@ -1,8 +1,10 @@
 'use client';
 
-import { type FormEvent, useState } from 'react';
+import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 
+import type { FormEvent } from 'react';
+
 import { toast } from 'sonner';
 
 import { authClient } from '@formbase/auth/client';
@@ -46,10 +48,7 @@ export function SendResetEmail() {
   return (
     <form className="mt-8 space-y-4" onSubmit={handleResetRequest}>
       <div>
-        <Label
-          htmlFor="email"
-          className="text-sm font-medium text-foreground"
-        >
+        <Label htmlFor="email" className="text-sm font-medium text-foreground">
           Email
         </Label>
         <Input

apps/web/src/app/(auth)/verify-email/verify-code.tsx

@@ -37,7 +37,9 @@ export const VerifyEmail = ({ email }: { email?: string | null }) => {
       })
       .catch(() => {
         toast('Unable to verify email. Please try again.', {
-          icon: <ExclamationTriangleIcon className="h-5 w-5 text-destructive" />,
+          icon: (
+            <ExclamationTriangleIcon className="h-5 w-5 text-destructive" />
+          ),
         });
       });
   }, [token, router]);

apps/web/src/app/(main)/dashboard/_components/forms.tsx

@@ -8,9 +8,7 @@ import { EmptyFormState } from './empty-state';
 import { FormCard } from './form-card';
 
 interface FormsProps {
-  promises: Promise<
-    [RouterOutputs['form']['userForms']]
-  >;
+  promises: Promise<[RouterOutputs['form']['userForms']]>;
 }
 
 export function Forms({ promises }: FormsProps) {

apps/web/src/app/(main)/dashboard/_components/new-form-dialog.tsx

@@ -10,8 +10,6 @@ import { toast } from 'sonner';
 import { z } from 'zod';
 
 import { Button } from '@formbase/ui/primitives/button';
-
-import { LoadingButton } from '~/components/loading-button';
 import {
   Dialog,
   DialogContent,
@@ -35,6 +33,7 @@ import {
   TooltipTrigger,
 } from '@formbase/ui/primitives/tooltip';
 
+import { LoadingButton } from '~/components/loading-button';
 import { api } from '~/lib/trpc/react';
 
 const FormSchema = z.object({

apps/web/src/app/(main)/dashboard/settings/api-keys/api-keys-section.tsx

@@ -44,7 +44,6 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@formbase/ui/primitives/popover';
-
 import { cn } from '@formbase/ui/utils/cn';
 
 import { CopyButton } from '~/components/copy-button';
@@ -278,7 +277,9 @@ interface ApiKeyRowProps {
 
 function ApiKeyRow({ apiKey, onDelete }: ApiKeyRowProps) {
   const isExpired = apiKey.expiresAt && new Date(apiKey.expiresAt) < new Date();
-  const { data: usageStats } = api.apiKeys.getUsageStats.useQuery({ id: apiKey.id });
+  const { data: usageStats } = api.apiKeys.getUsageStats.useQuery({
+    id: apiKey.id,
+  });
 
   return (
     <div className="flex items-center justify-between p-4">
@@ -295,7 +296,9 @@ function ApiKeyRow({ apiKey, onDelete }: ApiKeyRowProps) {
           <code className="rounded bg-muted px-1.5 py-0.5">
             {apiKey.keyPrefix}...
           </code>
-          <span>Created {format(new Date(apiKey.createdAt), 'MMM d, yyyy')}</span>
+          <span>
+            Created {format(new Date(apiKey.createdAt), 'MMM d, yyyy')}
+          </span>
           {apiKey.lastUsedAt && (
             <span>
               Last used {format(new Date(apiKey.lastUsedAt), 'MMM d, yyyy')}

apps/web/src/app/(main)/dashboard/settings/profile-form.tsx

@@ -9,8 +9,6 @@ import { toast } from 'sonner';
 import { z } from 'zod';
 
 import { type User } from '@formbase/auth';
-
-import { LoadingButton } from '~/components/loading-button';
 import {
   Form,
   FormControl,
@@ -21,6 +19,7 @@ import {
 } from '@formbase/ui/primitives/form';
 import { Input } from '@formbase/ui/primitives/input';
 
+import { LoadingButton } from '~/components/loading-button';
 import { api } from '~/lib/trpc/react';
 
 const profileFormSchema = z.object({