From ec0d9afefa79d5dd56b68a02b49b07859f3ab0b8 Mon Sep 17 00:00:00 2001
From: Lalit Shrotriya <lalitshrotriya2002@gmail.com>
Date: Sun, 7 Jun 2026 10:36:36 +0000
Subject: [PATCH 1/3] feat(event-meta): add description field to EventMeta
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds an optional description/note field to event definitions so teams
can document what each event means directly in the OpenPanel UI — a
lightweight alternative to a separate wiki.

Changes:
- Prisma schema: `description String?` on EventMeta model
- Migration: ALTER TABLE event_meta ADD COLUMN description TEXT
- tRPC router: accept and persist description in updateEventMeta
- Edit-event modal: textarea to set/edit the description

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/start/src/modals/edit-event.tsx              | 15 +++++++++++++++
 .../migration.sql                                 |  2 ++
 packages/db/prisma/schema.prisma                  | 13 +++++++------
 packages/trpc/src/routers/event.ts                |  7 ++++---
 4 files changed, 28 insertions(+), 9 deletions(-)
 mode change 100644 => 100755 apps/start/src/modals/edit-event.tsx
 create mode 100644 packages/db/prisma/migrations/20260607120000_add_event_meta_description/migration.sql
 mode change 100644 => 100755 packages/db/prisma/schema.prisma
 mode change 100644 => 100755 packages/trpc/src/routers/event.ts

diff --git a/apps/start/src/modals/edit-event.tsx b/apps/start/src/modals/edit-event.tsx
old mode 100644
new mode 100755
index be2a4d82f..d9ec54af6
--- a/apps/start/src/modals/edit-event.tsx
+++ b/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() || undefined,
             })
           }
         >
diff --git a/packages/db/prisma/migrations/20260607120000_add_event_meta_description/migration.sql b/packages/db/prisma/migrations/20260607120000_add_event_meta_description/migration.sql
new file mode 100644
index 000000000..77bc8520f
--- /dev/null
+++ b/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;
diff --git a/packages/db/prisma/schema.prisma b/packages/db/prisma/schema.prisma
old mode 100644
new mode 100755
index a171dc654..dc2cab39e
--- a/packages/db/prisma/schema.prisma
+++ b/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())
diff --git a/packages/trpc/src/routers/event.ts b/packages/trpc/src/routers/event.ts
old mode 100644
new mode 100755
index 018b8aaf4..11da2e054
--- a/packages/trpc/src/routers/event.ts
+++ b/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 },
         });
       },
     ),

From 9137ac502526924aa15c9c4a1574b17a48aafe55 Mon Sep 17 00:00:00 2001
From: Lalit Shrotriya <lalitshrotriya2002@gmail.com>
Date: Sun, 7 Jun 2026 11:03:19 +0000
Subject: [PATCH 2/3] fix(modal): use DialogClose for X button in modal header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The close button was a plain Button calling popModal(), which could race
with Radix's internal open-state tracking. Wrapping it in DialogClose
(asChild) lets Radix own the close event — same mechanism as clicking
outside the dialog.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/start/src/modals/Modal/Container.tsx | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)
 mode change 100644 => 100755 apps/start/src/modals/Modal/Container.tsx

diff --git a/apps/start/src/modals/Modal/Container.tsx b/apps/start/src/modals/Modal/Container.tsx
old mode 100644
new mode 100755
index 89a7126f4..aa9b85940
--- a/apps/start/src/modals/Modal/Container.tsx
+++ b/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>

From 68d3a28a3f40b87508f74035a5d96d78e385836d Mon Sep 17 00:00:00 2001
From: Lalit Shrotriya <lalitshrotriya2002@gmail.com>
Date: Mon, 8 Jun 2026 05:34:28 +0000
Subject: [PATCH 3/3] fix(event-meta): allow clearing description by sending
 empty string

Sending `trim() || undefined` silently dropped empty input, preventing
users from clearing an existing description. Now sends the trimmed value
directly so an empty string is passed and the server can clear the field.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/start/src/modals/edit-event.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/start/src/modals/edit-event.tsx b/apps/start/src/modals/edit-event.tsx
index d9ec54af6..404e25c14 100755
--- a/apps/start/src/modals/edit-event.tsx
+++ b/apps/start/src/modals/edit-event.tsx
@@ -217,7 +217,7 @@ export default function EditEvent({ id }: Props) {
               icon: selectedIcon ?? EventIconRecords.default!.icon,
               color: selectedColor ?? EventIconRecords.default!.color,
               conversion,
-              description: description.trim() || undefined,
+              description: description.trim(),
             })
           }
         >