feat(emcn): tag input, tooltip shortcut

Author: emir-karabeg

apps/sim/app/_shell/providers/theme-provider.tsx

@@ -28,7 +28,7 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   return (
     <NextThemesProvider
       attribute='class'
-      defaultTheme='system'
+      defaultTheme='dark'
       enableSystem
       disableTransitionOnChange
       storageKey='sim-theme'

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

@@ -18,10 +18,11 @@ import {
   ModalTabsContent,
   ModalTabsList,
   ModalTabsTrigger,
+  TagInput,
+  type TagItem,
 } from '@/components/emcn'
 import { SlackIcon } from '@/components/icons'
 import { Skeleton } from '@/components/ui'
-import { cn } from '@/lib/core/utils/cn'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
 import {
   type NotificationSubscription,
@@ -156,8 +157,7 @@ export function NotificationSettings({
     errorCountThreshold: 10,
   })
 
-  const [emailInputValue, setEmailInputValue] = useState('')
-  const [invalidEmails, setInvalidEmails] = useState<string[]>([])
+  const [emailItems, setEmailItems] = useState<TagItem[]>([])
 
   const [formErrors, setFormErrors] = useState<Record<string, string>>({})
 
@@ -225,8 +225,7 @@ export function NotificationSettings({
     })
     setFormErrors({})
     setEditingId(null)
-    setEmailInputValue('')
-    setInvalidEmails([])
+    setEmailItems([])
   }, [])
 
   const handleClose = useCallback(() => {
@@ -243,81 +242,37 @@ export function NotificationSettings({
       const normalized = email.trim().toLowerCase()
       const validation = quickValidateEmail(normalized)
 
-      if (formData.emailRecipients.includes(normalized) || invalidEmails.includes(normalized)) {
+      if (emailItems.some((item) => item.value === normalized)) {
         return false
       }
 
-      if (!validation.isValid) {
-        setInvalidEmails((prev) => [...prev, normalized])
-        setEmailInputValue('')
-        return false
-      }
-
-      setFormErrors((prev) => ({ ...prev, emailRecipients: '' }))
-      setFormData((prev) => ({
-        ...prev,
-        emailRecipients: [...prev.emailRecipients, normalized],
-      }))
-      setEmailInputValue('')
-      return true
-    },
-    [formData.emailRecipients, invalidEmails]
-  )
-
-  const handleRemoveEmail = useCallback((emailToRemove: string) => {
-    setFormData((prev) => ({
-      ...prev,
-      emailRecipients: prev.emailRecipients.filter((e) => e !== emailToRemove),
-    }))
-  }, [])
+      setEmailItems((prev) => [...prev, { value: normalized, isValid: validation.isValid }])
 
-  const handleRemoveInvalidEmail = useCallback((index: number) => {
-    setInvalidEmails((prev) => prev.filter((_, i) => i !== index))
-  }, [])
-
-  const handleEmailKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (['Enter', ',', ' '].includes(e.key) && emailInputValue.trim()) {
-        e.preventDefault()
-        addEmail(emailInputValue)
+      if (validation.isValid) {
+        setFormErrors((prev) => ({ ...prev, emailRecipients: '' }))
+        setFormData((prev) => ({
+          ...prev,
+          emailRecipients: [...prev.emailRecipients, normalized],
+        }))
       }
 
-      if (e.key === 'Backspace' && !emailInputValue) {
-        if (invalidEmails.length > 0) {
-          handleRemoveInvalidEmail(invalidEmails.length - 1)
-        } else if (formData.emailRecipients.length > 0) {
-          handleRemoveEmail(formData.emailRecipients[formData.emailRecipients.length - 1])
-        }
-      }
+      return validation.isValid
     },
-    [
-      emailInputValue,
-      addEmail,
-      invalidEmails,
-      formData.emailRecipients,
-      handleRemoveInvalidEmail,
-      handleRemoveEmail,
-    ]
+    [emailItems]
   )
 
-  const handleEmailPaste = useCallback(
-    (e: React.ClipboardEvent<HTMLInputElement>) => {
-      e.preventDefault()
-      const pastedText = e.clipboardData.getData('text')
-      const pastedEmails = pastedText.split(/[\s,;]+/).filter(Boolean)
-
-      let addedCount = 0
-      pastedEmails.forEach((email) => {
-        if (addEmail(email)) {
-          addedCount++
-        }
-      })
-
-      if (addedCount === 0 && pastedEmails.length === 1) {
-        setEmailInputValue(emailInputValue + pastedEmails[0])
+  const handleRemoveEmailItem = useCallback(
+    (_value: string, index: number, isValid: boolean) => {
+      const itemToRemove = emailItems[index]
+      setEmailItems((prev) => prev.filter((_, i) => i !== index))
+      if (isValid && itemToRemove) {
+        setFormData((prev) => ({
+          ...prev,
+          emailRecipients: prev.emailRecipients.filter((e) => e !== itemToRemove.value),
+        }))
       }
     },
-    [addEmail, emailInputValue]
+    [emailItems]
   )
 
   const validateForm = (): boolean => {
@@ -356,8 +311,11 @@ export function NotificationSettings({
       } else if (formData.emailRecipients.length > 10) {
         errors.emailRecipients = 'Maximum 10 email recipients allowed'
       }
-      if (invalidEmails.length > 0) {
-        errors.emailRecipients = `Invalid email addresses: ${invalidEmails.join(', ')}`
+      const invalidEmailValues = emailItems
+        .filter((item) => !item.isValid)
+        .map((item) => item.value)
+      if (invalidEmailValues.length > 0) {
+        errors.emailRecipients = `Invalid email addresses: ${invalidEmailValues.join(', ')}`
       }
     }
 
@@ -536,8 +494,9 @@ export function NotificationSettings({
       inactivityHours: subscription.alertConfig?.inactivityHours || 24,
       errorCountThreshold: subscription.alertConfig?.errorCountThreshold || 10,
     })
-    setEmailInputValue('')
-    setInvalidEmails([])
+    setEmailItems(
+      (subscription.emailRecipients || []).map((email) => ({ value: email, isValid: true }))
+    )
     setShowForm(true)
   }
 
@@ -692,37 +651,13 @@ export function NotificationSettings({
           {activeTab === 'email' && (
             <div className='flex flex-col gap-[8px]'>
               <Label className='text-[var(--text-secondary)]'>Email Recipients</Label>
-              <div className='scrollbar-hide flex max-h-32 flex-wrap items-center gap-x-[8px] gap-y-[4px] overflow-y-auto rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] focus-within:outline-none dark:bg-[var(--surface-5)]'>
-                {invalidEmails.map((email, index) => (
-                  <EmailTag
-                    key={`invalid-${index}`}
-                    email={email}
-                    onRemove={() => handleRemoveInvalidEmail(index)}
-                    isInvalid={true}
-                  />
-                ))}
-                {formData.emailRecipients.map((email, index) => (
-                  <EmailTag
-                    key={`valid-${index}`}
-                    email={email}
-                    onRemove={() => handleRemoveEmail(email)}
-                  />
-                ))}
-                <input
-                  type='text'
-                  value={emailInputValue}
-                  onChange={(e) => setEmailInputValue(e.target.value)}
-                  onKeyDown={handleEmailKeyDown}
-                  onPaste={handleEmailPaste}
-                  onBlur={() => emailInputValue.trim() && addEmail(emailInputValue)}
-                  placeholder={
-                    formData.emailRecipients.length > 0 || invalidEmails.length > 0
-                      ? 'Add another email'
-                      : 'Enter emails'
-                  }
-                  className='min-w-[180px] flex-1 border-none bg-transparent p-0 font-medium font-sans text-foreground text-sm outline-none placeholder:text-[var(--text-muted)] disabled:cursor-not-allowed disabled:opacity-50'
-                />
-              </div>
+              <TagInput
+                items={emailItems}
+                onAdd={(value) => addEmail(value)}
+                onRemove={handleRemoveEmailItem}
+                placeholder='Enter emails'
+                placeholderWithTags='Add email'
+              />
               {formErrors.emailRecipients && (
                 <p className='text-[11px] text-[var(--text-error)]'>{formErrors.emailRecipients}</p>
               )}
@@ -1351,37 +1286,3 @@ export function NotificationSettings({
     </>
   )
 }
-
-interface EmailTagProps {
-  email: string
-  onRemove: () => void
-  isInvalid?: boolean
-}
-
-function EmailTag({ email, onRemove, isInvalid }: EmailTagProps) {
-  return (
-    <div
-      className={cn(
-        'flex w-auto items-center gap-[4px] rounded-[4px] border px-[6px] py-[2px] text-[12px]',
-        isInvalid
-          ? 'border-[var(--text-error)] bg-[color-mix(in_srgb,var(--text-error)_10%,transparent)] text-[var(--text-error)] dark:bg-[color-mix(in_srgb,var(--text-error)_16%,transparent)]'
-          : 'border-[var(--border-1)] bg-[var(--surface-4)] text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
-      )}
-    >
-      <span className='max-w-[200px] truncate'>{email}</span>
-      <button
-        type='button'
-        onClick={onRemove}
-        className={cn(
-          'flex-shrink-0 transition-colors focus:outline-none',
-          isInvalid
-            ? 'text-[var(--text-error)] hover:text-[var(--text-error)]'
-            : 'text-[var(--text-tertiary)] hover:text-[var(--text-primary)]'
-        )}
-        aria-label={`Remove ${email}`}
-      >
-        <X className='h-[12px] w-[12px] translate-y-[0.2px]' />
-      </button>
-    </div>
-  )
-}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/context-menu/block-context-menu.tsx

@@ -80,7 +80,7 @@ export function BlockContextMenu({
           }}
         >
           <span>Copy</span>
-          <span className='ml-auto text-[var(--text-tertiary)] group-hover:text-inherit'>⌘C</span>
+          <span className='ml-auto opacity-70 group-hover:opacity-100'>⌘C</span>
         </PopoverItem>
         <PopoverItem
           className='group'
@@ -91,7 +91,7 @@ export function BlockContextMenu({
           }}
         >
           <span>Paste</span>
-          <span className='ml-auto text-[var(--text-tertiary)] group-hover:text-inherit'>⌘V</span>
+          <span className='ml-auto opacity-70 group-hover:opacity-100'>⌘V</span>
         </PopoverItem>
         {!hasStarterBlock && (
           <PopoverItem
@@ -176,7 +176,7 @@ export function BlockContextMenu({
           }}
         >
           <span>Delete</span>
-          <span className='ml-auto text-[var(--text-tertiary)] group-hover:text-inherit'>⌫</span>
+          <span className='ml-auto opacity-70 group-hover:opacity-100'>⌫</span>
         </PopoverItem>
       </PopoverContent>
     </Popover>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/context-menu/pane-context-menu.tsx

@@ -61,7 +61,7 @@ export function PaneContextMenu({
           }}
         >
           <span>Undo</span>
-          <span className='ml-auto text-[var(--text-tertiary)] group-hover:text-inherit'>⌘Z</span>
+          <span className='ml-auto opacity-70 group-hover:opacity-100'>⌘Z</span>
         </PopoverItem>
         <PopoverItem
           className='group'
@@ -72,7 +72,7 @@ export function PaneContextMenu({
           }}
         >
           <span>Redo</span>
-          <span className='ml-auto text-[var(--text-tertiary)] group-hover:text-inherit'>⌘⇧Z</span>
+          <span className='ml-auto opacity-70 group-hover:opacity-100'>⌘⇧Z</span>
         </PopoverItem>
 
         {/* Edit and creation actions */}
@@ -86,7 +86,7 @@ export function PaneContextMenu({
           }}
         >
           <span>Paste</span>
-          <span className='ml-auto text-[var(--text-tertiary)] group-hover:text-inherit'>⌘V</span>
+          <span className='ml-auto opacity-70 group-hover:opacity-100'>⌘V</span>
         </PopoverItem>
         <PopoverItem
           className='group'
@@ -97,7 +97,7 @@ export function PaneContextMenu({
           }}
         >
           <span>Add Block</span>
-          <span className='ml-auto text-[var(--text-tertiary)] group-hover:text-inherit'>⌘K</span>
+          <span className='ml-auto opacity-70 group-hover:opacity-100'>⌘K</span>
         </PopoverItem>
         <PopoverItem
           className='group'
@@ -108,7 +108,7 @@ export function PaneContextMenu({
           }}
         >
           <span>Auto-layout</span>
-          <span className='ml-auto text-[var(--text-tertiary)] group-hover:text-inherit'>⇧L</span>
+          <span className='ml-auto opacity-70 group-hover:opacity-100'>⇧L</span>
         </PopoverItem>
 
         {/* Navigation actions */}
@@ -121,7 +121,7 @@ export function PaneContextMenu({
           }}
         >
           <span>Open Logs</span>
-          <span className='ml-auto text-[var(--text-tertiary)] group-hover:text-inherit'>⌘L</span>
+          <span className='ml-auto opacity-70 group-hover:opacity-100'>⌘L</span>
         </PopoverItem>
         <PopoverItem
           onClick={() => {

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/notifications/notifications.tsx

@@ -2,7 +2,7 @@ import { memo, useCallback, useMemo } from 'react'
 import { createLogger } from '@sim/logger'
 import clsx from 'clsx'
 import { X } from 'lucide-react'
-import { Button } from '@/components/emcn'
+import { Button, Tooltip } from '@/components/emcn'
 import { useRegisterGlobalCommands } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
 import { createCommands } from '@/app/workspace/[workspaceId]/utils/commands-utils'
 import { usePreventZoom } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
@@ -130,14 +130,21 @@ export const Notifications = memo(function Notifications() {
                   hasAction ? 'line-clamp-2' : 'line-clamp-4'
                 }`}
               >
-                <Button
-                  variant='ghost'
-                  onClick={() => removeNotification(notification.id)}
-                  aria-label='Dismiss notification'
-                  className='!p-1.5 -m-1.5 float-right ml-[16px]'
-                >
-                  <X className='h-3 w-3' />
-                </Button>
+                <Tooltip.Root>
+                  <Tooltip.Trigger asChild>
+                    <Button
+                      variant='ghost'
+                      onClick={() => removeNotification(notification.id)}
+                      aria-label='Dismiss notification'
+                      className='!p-1.5 -m-1.5 float-right ml-[16px]'
+                    >
+                      <X className='h-3 w-3' />
+                    </Button>
+                  </Tooltip.Trigger>
+                  <Tooltip.Content>
+                    <Tooltip.Shortcut keys='⌘E'>Clear all</Tooltip.Shortcut>
+                  </Tooltip.Content>
+                </Tooltip.Root>
                 {notification.level === 'error' && (
                   <span className='mr-[6px] mb-[2.75px] inline-block h-[6px] w-[6px] rounded-[2px] bg-[var(--text-error)] align-middle' />
                 )}