feat(event-meta): add description field to EventMeta

apps/start/src/modals/Modal/Container.tsx

@@ -1,9 +1,8 @@
 import type { DialogContentProps } from '@radix-ui/react-dialog';
 import { X } from 'lucide-react';
 import { useRef } from 'react';
-import { popModal } from '..';
 import { Button } from '@/components/ui/button';
-import { DialogContent, DialogTitle } from '@/components/ui/dialog';
+import { DialogClose, DialogContent, DialogTitle } from '@/components/ui/dialog';
 import { cn } from '@/utils/cn';
 
 interface ModalContentProps extends DialogContentProps {
@@ -83,15 +82,12 @@ export function ModalHeader({
           )}
         </div>
         {onClose !== false && (
-          <Button
-            className="-mt-2"
-            onClick={() => (onClose ? onClose() : popModal())}
-            size="sm"
-            variant="ghost"
-          >
-            <X className="h-4 w-4" />
-            <span className="sr-only">Close</span>
-          </Button>
+          <DialogClose asChild onClick={() => onClose?.()}>
+            <Button className="-mt-2" size="sm" variant="ghost">
+              <X className="h-4 w-4" />
+              <span className="sr-only">Close</span>
+            </Button>
+          </DialogClose>
         )}
       </div>
     </div>

apps/start/src/modals/edit-event.tsx

@@ -7,6 +7,7 @@ import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
 import { useAppParams } from '@/hooks/use-app-params';
 import { useTRPC } from '@/integrations/trpc/react';
 import { cn } from '@/utils/cn';
@@ -37,6 +38,7 @@ export default function EditEvent({ id }: Props) {
   const [selectedIcon, setIcon] = useState<string | null>(null);
   const [selectedColor, setColor] = useState(EventIconRecords.default!.color);
   const [conversion, setConversion] = useState(false);
+  const [description, setDescription] = useState('');
   const [step, setStep] = useState<'icon' | 'color'>('icon');
   useEffect(() => {
     if (event?.meta?.icon) {
@@ -48,6 +50,9 @@ export default function EditEvent({ id }: Props) {
     if (event?.meta?.conversion) {
       setConversion(event.meta.conversion);
     }
+    if (event?.meta?.description) {
+      setDescription(event.meta.description);
+    }
   }, [event]);
 
   const SelectedIcon = selectedIcon ? EventIconMapper[selectedIcon] : null;
@@ -87,6 +92,15 @@ export default function EditEvent({ id }: Props) {
             </div>
           </label>
         </div>
+        <div>
+          <Label className="mb-2 block">Description</Label>
+          <Textarea
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder="What does this event mean? When does it fire?"
+            rows={3}
+          />
+        </div>
         <AnimatePresence mode="wait">
           {step === 'icon' ? (
             <motion.div
@@ -203,6 +217,7 @@ export default function EditEvent({ id }: Props) {
               icon: selectedIcon ?? EventIconRecords.default!.icon,
               color: selectedColor ?? EventIconRecords.default!.color,
               conversion,
+              description: description.trim(),
             })
           }
         >

packages/db/prisma/migrations/20260607120000_add_event_meta_description/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "event_meta" ADD COLUMN IF NOT EXISTS "description" TEXT;

packages/db/prisma/schema.prisma

@@ -500,12 +500,13 @@ model ShareWidget {
 }
 
 model EventMeta {
-  id         String   @id @default(dbgenerated("gen_random_uuid()")) @db.Uuid
-  name       String
-  conversion Boolean?
-  color      String?
-  icon       String?
-  projectId  String
+  id          String   @id @default(dbgenerated("gen_random_uuid()")) @db.Uuid
+  name        String
+  conversion  Boolean?
+  color       String?
+  icon        String?
+  description String?
+  projectId   String
   project    Project  @relation(fields: [projectId], references: [id], onDelete: Cascade)
 
   createdAt DateTime @default(now())

packages/trpc/src/routers/event.ts

@@ -38,10 +38,11 @@ export const eventRouter = createTRPCRouter({
         icon: z.string().optional(),
         color: z.string().optional(),
         conversion: z.boolean().optional(),
+        description: z.string().optional(),
       }),
     )
     .mutation(
-      async ({ input: { projectId, name, icon, color, conversion } }) => {
+      async ({ input: { projectId, name, icon, color, conversion, description } }) => {
         await getEventMetasCached.clear(projectId);
         return db.eventMeta.upsert({
           where: {
@@ -50,8 +51,8 @@ export const eventRouter = createTRPCRouter({
               projectId,
             },
           },
-          create: { projectId, name, icon, color, conversion },
-          update: { icon, color, conversion },
+          create: { projectId, name, icon, color, conversion, description },
+          update: { icon, color, conversion, description },
         });
       },
     ),