fix(notifications): polish modal styling, credential display, and trigger filters (#3571)

* fix(notifications): polish modal styling, credential display, and trigger filters

- Show credential display name instead of raw account ID in Slack account selector
- Fix label styling to use default Label component (text-primary) for consistency
- Fix modal body spacing with proper top padding after tab bar
- Replace list-card skeleton with form-field skeleton matching actual layout
- Replace custom "Select a Slack account first" box with disabled Combobox (dependsOn pattern)
- Use proper Label component in WorkflowSelector with consistent gap spacing
- Add overflow badge pattern (slice + +N) to level and trigger filter badges
- Use dynamic trigger options from getTriggerOptions() instead of hardcoded CORE_TRIGGER_TYPES
- Relax API validation to accept integration trigger types (z.string instead of z.enum)
- Deduplicate account rows from credential leftJoin in accounts API
- Extract getTriggerOptions() to module-level constants to avoid per-render calls

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix(notifications): address PR review feedback

- Restore accountId in displayName fallback chain (credentialDisplayName || accountId || providerId)
- Add .default([]) to triggerFilter in create schema to preserve backward compatibility
- Treat empty triggerFilter as "match all" in notification matching logic
- Remove unreachable overflow badge for levelFilter (only 2 possible values)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: waleedlatif1

apps/sim/app/api/auth/accounts/route.ts

@@ -1,5 +1,5 @@
 import { db } from '@sim/db'
-import { account } from '@sim/db/schema'
+import { account, credential } from '@sim/db/schema'
 import { createLogger } from '@sim/logger'
 import { and, desc, eq } from 'drizzle-orm'
 import { type NextRequest, NextResponse } from 'next/server'
@@ -28,16 +28,25 @@ export async function GET(request: NextRequest) {
         id: account.id,
         accountId: account.accountId,
         providerId: account.providerId,
+        credentialDisplayName: credential.displayName,
       })
       .from(account)
+      .leftJoin(credential, eq(credential.accountId, account.id))
       .where(and(...whereConditions))
       .orderBy(desc(account.updatedAt))
 
-    const accountsWithDisplayName = accounts.map((acc) => ({
+    const seen = new Map<string, (typeof accounts)[number]>()
+    for (const acc of accounts) {
+      if (!seen.has(acc.id)) {
+        seen.set(acc.id, acc)
+      }
+    }
+
+    const accountsWithDisplayName = Array.from(seen.values()).map((acc) => ({
       id: acc.id,
       accountId: acc.accountId,
       providerId: acc.providerId,
-      displayName: acc.accountId || acc.providerId,
+      displayName: acc.credentialDisplayName || acc.accountId || acc.providerId,
     }))
 
     return NextResponse.json({ accounts: accountsWithDisplayName })

apps/sim/app/api/workspaces/[id]/notifications/[notificationId]/route.ts

@@ -8,13 +8,12 @@ import { AuditAction, AuditResourceType, recordAudit } from '@/lib/audit/log'
 import { getSession } from '@/lib/auth'
 import { encryptSecret } from '@/lib/core/security/encryption'
 import { getUserEntityPermissions } from '@/lib/workspaces/permissions/utils'
-import { CORE_TRIGGER_TYPES } from '@/stores/logs/filters/types'
 import { MAX_EMAIL_RECIPIENTS, MAX_WORKFLOW_IDS } from '../constants'
 
 const logger = createLogger('WorkspaceNotificationAPI')
 
 const levelFilterSchema = z.array(z.enum(['info', 'error']))
-const triggerFilterSchema = z.array(z.enum(CORE_TRIGGER_TYPES))
+const triggerFilterSchema = z.array(z.string().min(1))
 
 const alertRuleSchema = z.enum([
   'consecutive_failures',

apps/sim/app/api/workspaces/[id]/notifications/route.ts

@@ -9,14 +9,13 @@ import { AuditAction, AuditResourceType, recordAudit } from '@/lib/audit/log'
 import { getSession } from '@/lib/auth'
 import { encryptSecret } from '@/lib/core/security/encryption'
 import { getUserEntityPermissions } from '@/lib/workspaces/permissions/utils'
-import { CORE_TRIGGER_TYPES } from '@/stores/logs/filters/types'
 import { MAX_EMAIL_RECIPIENTS, MAX_NOTIFICATIONS_PER_TYPE, MAX_WORKFLOW_IDS } from './constants'
 
 const logger = createLogger('WorkspaceNotificationsAPI')
 
 const notificationTypeSchema = z.enum(['webhook', 'email', 'slack'])
 const levelFilterSchema = z.array(z.enum(['info', 'error']))
-const triggerFilterSchema = z.array(z.enum(CORE_TRIGGER_TYPES))
+const triggerFilterSchema = z.array(z.string().min(1))
 
 const alertRuleSchema = z.enum([
   'consecutive_failures',
@@ -82,7 +81,7 @@ const createNotificationSchema = z
     workflowIds: z.array(z.string()).max(MAX_WORKFLOW_IDS).default([]),
     allWorkflows: z.boolean().default(false),
     levelFilter: levelFilterSchema.default(['info', 'error']),
-    triggerFilter: triggerFilterSchema.default([...CORE_TRIGGER_TYPES]),
+    triggerFilter: triggerFilterSchema.default([]),
     includeFinalOutput: z.boolean().default(false),
     includeTraceSpans: z.boolean().default(false),
     includeRateLimits: z.boolean().default(false),

apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/components/slack-channel-selector/slack-channel-selector.tsx

@@ -79,14 +79,6 @@ export function SlackChannelSelector({
 
   const selectedChannel = channels.find((c) => c.id === value)
 
-  if (!accountId) {
-    return (
-      <div className='rounded-[6px] border bg-[var(--surface-3)] p-[10px] text-center'>
-        <p className='text-[12px] text-[var(--text-muted)]'>Select a Slack account first</p>
-      </div>
-    )
-  }
-
   const handleChange = (channelId: string) => {
     const channel = channels.find((c) => c.id === channelId)
     onChange(channelId, channel?.name || '')
@@ -99,9 +91,13 @@ export function SlackChannelSelector({
         value={value}
         onChange={handleChange}
         placeholder={
-          channels.length === 0 && !isLoading ? 'No channels available' : 'Select channel...'
+          !accountId
+            ? 'Select an account first...'
+            : channels.length === 0 && !isLoading
+              ? 'No channels available'
+              : 'Select channel...'
         }
-        disabled={disabled || channels.length === 0}
+        disabled={disabled || !accountId || channels.length === 0}
         isLoading={isLoading}
         error={fetchError}
         searchable

apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/components/workflow-selector/workflow-selector.tsx

@@ -2,7 +2,7 @@
 
 import { useMemo } from 'react'
 import { X } from 'lucide-react'
-import { Badge, Combobox, type ComboboxOption } from '@/components/emcn'
+import { Badge, Combobox, type ComboboxOption, Label } from '@/components/emcn'
 import { Skeleton } from '@/components/ui'
 import { useWorkflows } from '@/hooks/queries/workflows'
 
@@ -103,16 +103,16 @@ export function WorkflowSelector({
 
   if (isLoading) {
     return (
-      <div className='flex flex-col gap-[4px]'>
-        <span className='font-medium text-[13px] text-[var(--text-secondary)]'>Workflows</span>
+      <div className='flex flex-col gap-[8px]'>
+        <Label>Workflows</Label>
         <Skeleton className='h-[34px] w-full rounded-[6px]' />
       </div>
     )
   }
 
   return (
-    <div className='flex flex-col gap-[4px]'>
-      <span className='font-medium text-[13px] text-[var(--text-secondary)]'>Workflows</span>
+    <div className='flex flex-col gap-[8px]'>
+      <Label>Workflows</Label>
       <Combobox
         options={options}
         multiSelect