fixes

Author: pierre-b

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file.
 
+## [26.13] - 2026-01-25
+
+- **Segments**: Added real-time validation when creating segments to detect duplicate IDs before submission (#243)
+- **Email Builder**: Fixed clicking image blocks with links navigating away instead of allowing block selection (#239)
+- **Email Builder**: Fixed popover buttons overflowing in certain languages by using auto-width with minimum constraint (#240)
+- **Amazon SES**: Fixed Notifuse message ID extraction from webhook
+
 ## [26.12] - 2026-01-24
 
 - **Transactional Notifications**: Added card-based UI with delivery stats (sent, delivered, failed, bounced) and period selector (7D/30D/60D)

config/config.go

@@ -14,7 +14,7 @@ import (
 	"github.com/spf13/viper"
 )
 
-const VERSION = "26.12"
+const VERSION = "26.13"
 
 type Config struct {
 	Server              ServerConfig

console/src/components/email_builder/blocks/MjImageBlock.tsx

@@ -340,12 +340,13 @@ export class MjImageBlock extends BaseEmailBlock {
         href={attrs.href}
         target={attrs.target || '_blank'}
         rel={attrs.rel}
-        style={{ 
+        style={{
           textDecoration: 'none',
           display: 'block',
           borderRadius: attrs.borderRadius,
           overflow: 'hidden'
         }}
+        onClick={(e) => e.preventDefault()}
       >
         {imageElement}
       </a>

console/src/components/email_builder/editor.css

@@ -18,10 +18,17 @@
 }
 
 /* Popover content buttons (for link and emoji popovers) */
-.tiptap-link-popover .ant-btn,
-.tiptap-emoji-popover .ant-btn {
-    color: inherit !important;
-    /* Let these inherit from their parent context */
+/* Only apply to default buttons, not primary/danger which need white text */
+.tiptap-link-popover .ant-btn-default,
+.tiptap-emoji-popover .ant-btn-default {
+    color: rgba(0, 0, 0, 0.88) !important;
+}
+
+.tiptap-link-popover .ant-btn-primary,
+.tiptap-link-popover .ant-btn-dangerous,
+.tiptap-emoji-popover .ant-btn-primary,
+.tiptap-emoji-popover .ant-btn-dangerous {
+    color: #fff !important;
 }
 
 /* Input elements inside TiptapToolbar popovers */

console/src/components/email_builder/ui/StringPopoverInput.tsx

@@ -73,7 +73,7 @@ const StringPopoverInput: React.FC<StringPopoverInputProps> = ({
   }
 
   const content = (
-    <div className="w-64">
+    <div className="w-fit min-w-64">
       <Input
         size="small"
         value={inputValue}

console/src/components/email_builder/ui/tiptap/components/TiptapToolbar.tsx

@@ -193,7 +193,10 @@ export const ColorButton: React.FC<ColorButtonProps> = ({
         >
           <div style={{ position: 'relative' }}>
             <ToolbarButton title={title} isActive={isActive}>
-              <FontAwesomeIcon icon={icon as import('@fortawesome/fontawesome-svg-core').IconProp} size="xs" />
+              <FontAwesomeIcon
+                icon={icon as import('@fortawesome/fontawesome-svg-core').IconProp}
+                size="xs"
+              />
             </ToolbarButton>
             <div
               style={{
@@ -300,7 +303,7 @@ export const LinkButton: React.FC<LinkButtonProps> = ({ editor, title }) => {
         setLinkType('url')
       }
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps -- getCurrentLink is stable
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- getCurrentLink is stable
   }, [visible, isActiveLink])
 
   const handleInsertLink = () => {
@@ -355,7 +358,7 @@ export const LinkButton: React.FC<LinkButtonProps> = ({ editor, title }) => {
   return (
     <Popover
       content={
-        <div style={{ width: '300px', padding: '8px' }}>
+        <div style={{ minWidth: '300px', padding: '8px' }}>
           <div style={{ marginBottom: '12px' }}>
             <label
               style={{ display: 'block', marginBottom: '4px', fontSize: '14px', fontWeight: '500' }}
@@ -377,10 +380,10 @@ export const LinkButton: React.FC<LinkButtonProps> = ({ editor, title }) => {
               {linkType === 'url'
                 ? t`URL`
                 : linkType === 'email'
-                ? t`Email Address`
-                : linkType === 'phone'
-                ? t`Phone Number`
-                : t`Anchor ID`}
+                  ? t`Email Address`
+                  : linkType === 'phone'
+                    ? t`Phone Number`
+                    : t`Anchor ID`}
             </label>
             <Input
               value={linkValue}
@@ -395,7 +398,7 @@ export const LinkButton: React.FC<LinkButtonProps> = ({ editor, title }) => {
               {t`Cancel`}
             </Button>
             {isActiveLink && (
-              <Button size="small" onClick={handleRemoveLink} danger>
+              <Button size="small" onClick={handleRemoveLink} color="danger" variant="outlined">
                 {t`Remove Link`}
               </Button>
             )}

console/src/components/segment/button_upsert.tsx

@@ -14,6 +14,7 @@ import {
   message
 } from 'antd'
 import React, { useMemo, useState, useEffect } from 'react'
+import { debounce } from 'lodash'
 import { useParams } from '@tanstack/react-router'
 import { useAuth } from '../../contexts/AuthContext'
 import { TreeNodeInput, HasLeaf } from './input'
@@ -26,6 +27,7 @@ import {
   createSegment,
   updateSegment,
   previewSegment,
+  getSegment,
   CreateSegmentRequest,
   UpdateSegmentRequest,
   PreviewSegmentRequest,
@@ -125,6 +127,10 @@ const DrawerSegment = (props: {
   const [loadingPreview, setLoadingPreview] = useState(false)
   const [previewedData, setPreviewedData] = useState<string | undefined>() // track the tree hash to avoid re-render
   const [previewResponse, setPreviewResponse] = useState<PreviewSegmentResponse | undefined>()
+  const [idValidation, setIdValidation] = useState<{
+    status: '' | 'validating' | 'error' | 'success'
+    message: string
+  }>({ status: '', message: '' })
 
   // Find the current workspace
   const workspace = useMemo(() => {
@@ -168,6 +174,56 @@ const DrawerSegment = (props: {
 
   const lists = listsData?.lists || []
 
+  // Generate segment ID from name (same logic as in onFinish)
+  const generateSegmentId = (name: string): string => {
+    return name
+      .toLowerCase()
+      .replace(/[\s-]+/g, '_')
+      .replace(/[^a-z0-9_]/g, '')
+      .replace(/^_+|_+$/g, '')
+      .replace(/_+/g, '_')
+  }
+
+  // Debounced function to check if segment ID exists
+  const checkIdExists = useMemo(
+    () =>
+      debounce(async (name: string) => {
+        // Skip validation in edit mode or if no workspace
+        if (!name || !workspaceId || props.segment) {
+          setIdValidation({ status: '', message: '' })
+          return
+        }
+
+        const id = generateSegmentId(name)
+        if (!id) {
+          setIdValidation({ status: '', message: '' })
+          return
+        }
+
+        setIdValidation({ status: 'validating', message: '' })
+
+        try {
+          await getSegment({ workspace_id: workspaceId, id })
+          // Segment exists (active or deleted) - show error
+          setIdValidation({
+            status: 'error',
+            message: t`A segment with ID "${id}" already exists`
+          })
+        } catch {
+          // Segment not found - ID is available
+          setIdValidation({ status: 'success', message: '' })
+        }
+      }, 500),
+    [workspaceId, props.segment, t]
+  )
+
+  // Cleanup debounce on unmount
+  useEffect(() => {
+    return () => {
+      checkIdExists.cancel()
+    }
+  }, [checkIdExists])
+
   const preview = async () => {
     if (loadingPreview || !workspaceId) return
     setLoadingPreview(true)
@@ -211,6 +267,12 @@ const DrawerSegment = (props: {
   const onFinish = async (values: { name: string; color: string; tree: TreeNode; timezone: string }) => {
     if (loading || !workspaceId) return
 
+    // Block submission if ID validation failed (only for create mode)
+    if (!props.segment && idValidation.status === 'error') {
+      message.error(t`Please choose a different segment name`)
+      return
+    }
+
     setLoading(true)
 
     try {
@@ -309,8 +371,26 @@ const DrawerSegment = (props: {
             <Col span={18}>
               <Form.Item label={t`Name`} required>
                 <Space.Compact style={{ width: '100%' }}>
-                  <Form.Item name="name" noStyle rules={[{ required: true, type: 'string' }]}>
-                    <Input placeholder={t`i.e: Big spenders...`} style={{ flex: 1 }} />
+                  <Form.Item
+                    name="name"
+                    rules={[{ required: true, type: 'string' }]}
+                    validateStatus={
+                      idValidation.status === 'validating'
+                        ? 'validating'
+                        : idValidation.status === 'error'
+                          ? 'error'
+                          : idValidation.status === 'success'
+                            ? 'success'
+                            : undefined
+                    }
+                    help={idValidation.status === 'error' ? idValidation.message : undefined}
+                    hasFeedback={!props.segment && idValidation.status !== ''}
+                    style={{ flex: 1, marginBottom: 0 }}
+                  >
+                    <Input
+                      placeholder={t`i.e: Big spenders...`}
+                      onChange={(e) => checkIdExists(e.target.value)}
+                    />
                   </Form.Item>
                   <Form.Item noStyle name="color">
                     <Select

env.example

@@ -21,12 +21,13 @@
 # Example: openssl rand -base64 32
 SECRET_KEY=your-secret-key-here
 
-# Database Configuration (REQUIRED)
-DB_HOST=localhost
-DB_PORT=5432
-DB_USER=postgres
-DB_PASSWORD=your-secure-password
-DB_NAME=notifuse_system
+# Database Configuration (Optional - compose.yaml has working defaults for Docker)
+# Uncomment and modify only if using an external database or custom setup
+# DB_HOST=postgres
+# DB_PORT=5432
+# DB_USER=postgres
+# DB_PASSWORD=postgres
+# DB_NAME=notifuse_system
 
 # =============================================================================
 # SETUP WIZARD - Configure via Web Interface (Recommended)

internal/service/inbound_webhook_event_service.go

@@ -260,6 +260,18 @@ func isHardBounce(bounceType, bounceCategory string) bool {
 	return false
 }
 
+// extractXMessageIDFromHeaders searches for the X-Message-ID header in SES mail headers.
+// This is used as a fallback when notifuse_message_id tag is not present
+// (e.g., for emails sent via SendRawEmail before tags were added).
+func extractXMessageIDFromHeaders(headers []domain.SESHeader) string {
+	for _, header := range headers {
+		if strings.EqualFold(header.Name, "X-Message-ID") {
+			return header.Value
+		}
+	}
+	return ""
+}
+
 // processSESWebhook processes a webhook event from Amazon SES
 func (s *InboundWebhookEventService) processSESWebhook(integrationID string, rawPayload []byte) (events []*domain.InboundWebhookEvent, err error) {
 
@@ -342,6 +354,10 @@ func (s *InboundWebhookEventService) processSESWebhook(integrationID string, raw
 				notifuseMessageID = ids[0]
 			}
 		}
+		// Fallback to X-Message-ID header if tag not found
+		if notifuseMessageID == "" {
+			notifuseMessageID = extractXMessageIDFromHeaders(bounceNotification.Mail.Headers)
+		}
 
 		// Parse timestamp
 		if t, err := time.Parse(time.RFC3339, bounceNotification.Bounce.Timestamp); err == nil {
@@ -366,6 +382,10 @@ func (s *InboundWebhookEventService) processSESWebhook(integrationID string, raw
 					notifuseMessageID = ids[0]
 				}
 			}
+			// Fallback to X-Message-ID header if tag not found
+			if notifuseMessageID == "" {
+				notifuseMessageID = extractXMessageIDFromHeaders(complaintNotification.Mail.Headers)
+			}
 
 			// Parse timestamp
 			if t, err := time.Parse(time.RFC3339, complaintNotification.Complaint.Timestamp); err == nil {
@@ -389,6 +409,10 @@ func (s *InboundWebhookEventService) processSESWebhook(integrationID string, raw
 						notifuseMessageID = ids[0]
 					}
 				}
+				// Fallback to X-Message-ID header if tag not found
+				if notifuseMessageID == "" {
+					notifuseMessageID = extractXMessageIDFromHeaders(deliveryNotification.Mail.Headers)
+				}
 
 				// Parse timestamp
 				if t, err := time.Parse(time.RFC3339, deliveryNotification.Delivery.Timestamp); err == nil {