react-email 4.0.0-alpha.6 → 4.0.0-alpha.7

package/src/components/toolbar/linter.tsx

@@ -1,12 +1,11 @@
 import prettyBytes from 'pretty-bytes';
-import { useRef, useState } from 'react';
-import { nicenames } from '../../actions/email-validation/caniemail-data';
-import type { CompatibilityCheckingResult } from '../../actions/email-validation/check-compatibility';
+import { Children, useRef, useState } from 'react';
 import type { ImageCheckingResult } from '../../actions/email-validation/check-images';
 import type { LinkCheckingResult } from '../../actions/email-validation/check-links';
-import { cn } from '../../utils';
+import { cn, sanitize } from '../../utils';
 import { getLintingSources, loadLintingRowsFrom } from '../../utils/linting';
 import { IconWarning } from '../icons/icon-warning';
+import { CodePreviewLineLink } from './code-preview-line-link';
 import { Results } from './results';
 
 export type LintingRow =
@@ -17,10 +16,6 @@ export type LintingRow =
   | {
       source: 'link';
       result: LinkCheckingResult;
-    }
-  | {
-      source: 'compatibility';
-      result: CompatibilityCheckingResult;
     };
 
 interface LinterProps {
@@ -29,14 +24,10 @@ interface LinterProps {
 
 export const useLinter = ({
   markup,
-  reactMarkup,
-  emailPath,
 
   initialRows,
 }: {
-  reactMarkup: string;
   markup: string;
-  emailPath: string;
 
   initialRows?: LintingRow[];
 }) => {
@@ -44,8 +35,6 @@ export const useLinter = ({
 
   const sources = getLintingSources(
     markup,
-    reactMarkup,
-    emailPath,
     'location' in global
       ? `${global.location.protocol}//${global.location.host}`
       : '',
@@ -105,80 +94,44 @@ export const Linter = ({ rows }: LinterProps) => {
           )!;
           return (
             <Result status={row.result.status} key={i}>
-              <Result.Name>{failingCheck.type}</Result.Name>
+              <Result.Name>{sanitize(failingCheck.type)}</Result.Name>
               <Result.Description>
                 {failingCheck.type === 'security'
-                  ? 'Insecure URL, use HTTPS insted of HTTP'
+                  ? 'Insecure URL, use HTTPS instead of HTTP'
                   : null}
                 {failingCheck.type === 'fetch_attempt' &&
                 failingCheck.metadata.fetchStatusCode &&
                 failingCheck.metadata.fetchStatusCode >= 300 &&
-                failingCheck.metadata.fetchStatusCode < 400
-                  ? 'There was a redirect, the content may have been moved'
-                  : null}
+                failingCheck.metadata.fetchStatusCode < 400 ? (
+                  <>
+                    <strong>{failingCheck.metadata.fetchStatusCode}</strong>:
+                    There was a redirect, the content may have been moved
+                  </>
+                ) : null}
                 {failingCheck.type === 'fetch_attempt' &&
                 failingCheck.metadata.fetchStatusCode &&
-                failingCheck.metadata.fetchStatusCode >= 400
-                  ? 'The link is broken'
-                  : null}
+                failingCheck.metadata.fetchStatusCode >= 400 ? (
+                  <>
+                    <strong>{failingCheck.metadata.fetchStatusCode}</strong>:
+                    The link is broken
+                  </>
+                ) : null}
                 {failingCheck.type === 'syntax'
                   ? 'The link is broken due to invalid syntax'
                   : null}
 
-                <span className="font-mono float-right text-ellipsis overflow-hidden text-nowrap max-w-[30ch]">
+                <span className="ml-2 text-ellipsis overflow-hidden text-nowrap max-w-[30ch]">
                   {row.result.link}
                 </span>
               </Result.Description>
               <Result.Metadata>
-                {failingCheck.type === 'fetch_attempt'
-                  ? failingCheck.metadata.fetchStatusCode
-                  : ''}
-              </Result.Metadata>
-            </Result>
-          );
-        }
-
-        if (row.source === 'compatibility') {
-          const statsReportedNotWorking = Object.entries(
-            row.result.statsPerEmailClient,
-          ).filter(([, stats]) => stats.status === 'error');
-          const statsReportedPartiallyWorking = Object.entries(
-            row.result.statsPerEmailClient,
-          ).filter(([, stats]) => stats.status === 'warning');
-
-          const unsupportedClientsString = statsReportedNotWorking
-            .map(([emailClient]) => nicenames.family[emailClient])
-            .join(', ');
-          const partiallySupportedClientsString = statsReportedPartiallyWorking
-            .map(([emailClient]) => nicenames.family[emailClient])
-            .join(', ');
-
-          return (
-            <Result status={row.result.status} key={i}>
-              <Result.Name>{row.result.entry.title}</Result.Name>
-              <Result.Description>
-                {statsReportedNotWorking.length > 0
-                  ? `Not supported in ${unsupportedClientsString}`
-                  : null}
-                {statsReportedPartiallyWorking.length > 0 &&
-                statsReportedNotWorking.length > 0
-                  ? '. '
-                  : null}
-                {statsReportedPartiallyWorking.length > 0
-                  ? `Partially supported in ${partiallySupportedClientsString}`
-                  : null}
-              </Result.Description>
-              <Result.Metadata>
-                {row.result.location.start.line.toString().padStart(2, '0')}:
-                {row.result.location.start.column.toString().padStart(2, '0')}
-                <a
-                  href={row.result.entry.url}
-                  className="underline ml-2"
-                  rel="noreferrer"
-                  target="_blank"
-                >
-                  See more info
-                </a>
+                {[
+                  <CodePreviewLineLink
+                    line={row.result.codeLocation.line}
+                    column={row.result.codeLocation.column}
+                    type="html"
+                  />,
+                ]}
               </Result.Metadata>
             </Result>
           );
@@ -188,24 +141,43 @@ export const Linter = ({ rows }: LinterProps) => {
           const failingCheck = row.result.checks.find(
             (check) => check.passed === false,
           )!;
+          const metadata: React.ReactNode[] = [];
+          for (const check of row.result.checks) {
+            if (check.type === 'image_size' && check.metadata.byteCount) {
+              metadata.push(prettyBytes(check.metadata.byteCount));
+            }
+          }
+          metadata.push(
+            <CodePreviewLineLink
+              line={row.result.codeLocation.line}
+              column={row.result.codeLocation.column}
+              type="html"
+            />,
+          );
           return (
             <Result status={row.result.status} key={i}>
-              <Result.Name>{failingCheck.type}</Result.Name>
+              <Result.Name>{sanitize(failingCheck.type)}</Result.Name>
               <Result.Description>
                 {failingCheck.type === 'security'
-                  ? 'Insecure URL, use HTTPS insted of HTTP'
+                  ? 'Insecure URL, use HTTPS instead of HTTP'
                   : null}
                 {failingCheck.type === 'fetch_attempt' &&
                 failingCheck.metadata.fetchStatusCode &&
                 failingCheck.metadata.fetchStatusCode >= 300 &&
-                failingCheck.metadata.fetchStatusCode < 400
-                  ? 'There was a redirect, the image may have been moved'
-                  : null}
+                failingCheck.metadata.fetchStatusCode < 400 ? (
+                  <>
+                    <strong>{failingCheck.metadata.fetchStatusCode}</strong>:
+                    There was a redirect, the image may have been moved
+                  </>
+                ) : null}
                 {failingCheck.type === 'fetch_attempt' &&
                 failingCheck.metadata.fetchStatusCode &&
-                failingCheck.metadata.fetchStatusCode >= 400
-                  ? 'The image is broken'
-                  : null}
+                failingCheck.metadata.fetchStatusCode >= 400 ? (
+                  <>
+                    <strong>{failingCheck.metadata.fetchStatusCode}</strong>:
+                    The image is broken
+                  </>
+                ) : null}
                 {failingCheck.type === 'syntax'
                   ? 'The image is broken due to an invalid source'
                   : null}
@@ -219,32 +191,11 @@ export const Linter = ({ rows }: LinterProps) => {
                   ? 'This image is too large, keep it under 1mb'
                   : null}
 
-                <span className="font-mono float-right text-ellipsis overflow-hidden text-nowrap max-w-[30ch]">
+                <span className="ml-2 text-ellipsis overflow-hidden text-nowrap max-w-[30ch]">
                   {row.result.source}
                 </span>
               </Result.Description>
-              <Result.Metadata>
-                {row.result.checks
-                  .map((check) => {
-                    if (
-                      check.type === 'fetch_attempt' &&
-                      check.metadata.fetchStatusCode
-                    ) {
-                      return check.metadata.fetchStatusCode;
-                    }
-
-                    if (
-                      check.type === 'image_size' &&
-                      check.metadata.byteCount
-                    ) {
-                      return prettyBytes(check.metadata.byteCount);
-                    }
-
-                    return undefined;
-                  })
-                  .filter(Boolean)
-                  .join('—')}
-              </Result.Metadata>
+              <Result.Metadata>{metadata}</Result.Metadata>
             </Result>
           );
         }
@@ -277,9 +228,9 @@ Result.Name = ({
 }: React.ComponentProps<typeof Results.Column>) => {
   return (
     <Results.Column {...props}>
-      <span className="flex uppercase gap-1 items-center group-data-[status=error]/result:text-red-400 group-data-[status=warning]/result:text-orange-300">
+      <span className="flex uppercase gap-2 items-center group-data-[status=error]/result:text-red-400 group-data-[status=warning]/result:text-orange-300">
         <IconWarning />
-        {children}
+        {typeof children === 'string' ? sanitize(children) : children}
       </span>
     </Results.Column>
   );
@@ -293,18 +244,25 @@ Result.Description = ({
   return <Results.Column {...props}>{children}</Results.Column>;
 };
 
-Result.Metadata = ({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<typeof Results.Column>) => {
+interface MetadatProps extends React.ComponentProps<typeof Results.Column> {
+  children: React.ReactNode[];
+}
+
+Result.Metadata = ({ children, className, ...props }: MetadatProps) => {
   return (
     <Results.Column
       align="right"
       {...props}
       className={cn('font-mono text-slate-11', className)}
     >
-      {children}
+      {Children.map(children, (child, index) => {
+        return (
+          <>
+            {index > 0 ? ' · ' : null}
+            {child}
+          </>
+        );
+      })}
     </Results.Column>
   );
 };

package/src/components/toolbar/results.tsx

@@ -8,7 +8,7 @@ export const Results = ({
   return (
     <table
       className={cn(
-        'group relative w-full border-collapse text-left text-slate-10 text-xs',
+        'group relative w-full border-collapse text-left text-slate-10 text-sm',
         className,
       )}
     >
@@ -41,7 +41,10 @@ Results.Column = ({
   ...props
 }: React.ComponentProps<'td'>) => {
   return (
-    <td className={cn('py-1 align-bottom font-medium', className)} {...props}>
+    <td
+      className={cn('py-1.5 align-bottom font-regular', className)}
+      {...props}
+    >
       {children}
     </td>
   );

package/src/components/toolbar/spam-assassin.tsx

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react';
 import { toast } from 'sonner';
-import { cn } from '../../utils';
+import { cn, sanitize } from '../../utils';
 import { IconWarning } from '../icons/icon-warning';
 import { Results } from './results';
 
@@ -83,25 +83,33 @@ export const SpamAssassin = ({ result }: SpamAssassinProps) => {
     <>
       {result ? (
         <Results>
-          <Results.Row className="sticky border-b-2 top-0 bg-black">
+          <Results.Row className="sticky border-b top-0 bg-black">
             <Results.Column className="uppercase">
-              <span className="flex gap-1 items-center">
+              <span className="flex gap-2 items-center">
                 <IconWarning
                   className={cn(
-                    result.points > 1.5 ? 'text-yellow-200' : null,
-                    result.points > 3 ? 'text-orange-300' : null,
+                    result.points === 0 ? 'text-green-400' : null,
+                    result.points > 0 && result.points <= 1.5 ? null : null,
+                    result.points > 1.5 ? 'text-yellow-100' : null,
+                    result.points > 3 ? 'text-orange-400' : null,
                     result.points >= 5 ? 'text-red-400' : null,
                   )}
                 />
                 Score
               </span>
             </Results.Column>
-            <Results.Column>Lower scores are better</Results.Column>
+            <Results.Column>
+              {result.points === 0
+                ? 'Congratulations! Your email is clean of abuse indicators.'
+                : 'Lower scores are better'}
+            </Results.Column>
             <Results.Column
               className={cn(
-                'text-right text-2xl tracking-tighter font-mono',
+                'text-right text-3xl tracking-tighter font-bold',
+                result.points === 0 ? 'text-green-400' : null,
+                result.points > 0 && result.points <= 1.5 ? null : null,
                 result.points > 1.5 ? 'text-yellow-200' : null,
-                result.points > 3 ? 'text-orange-300' : null,
+                result.points > 3 ? 'text-orange-400' : null,
                 result.points >= 5 ? 'text-red-400' : null,
               )}
             >
@@ -112,15 +120,15 @@ export const SpamAssassin = ({ result }: SpamAssassinProps) => {
             (check) => (
               <Results.Row key={check.name}>
                 <Results.Column className="uppercase">
-                  <span className="flex gap-1 items-center">
+                  <span className="flex gap-2 items-center">
                     <IconWarning
                       className={cn(
                         check.points > 1 ? 'text-yellow-200' : null,
-                        check.points > 2 ? 'text-orange-300' : null,
+                        check.points > 2 ? 'text-orange-400' : null,
                         check.points > 3 ? 'text-red-400' : null,
                       )}
                     />
-                    {check.name}
+                    {sanitize(check.name)}
                   </span>
                 </Results.Column>
                 <Results.Column>{check.description}</Results.Column>
@@ -128,7 +136,7 @@ export const SpamAssassin = ({ result }: SpamAssassinProps) => {
                   className={cn(
                     'text-right font-mono tracking-tighter',
                     check.points > 1 ? 'text-yellow-200' : null,
-                    check.points > 2 ? 'text-orange-300' : null,
+                    check.points > 2 ? 'text-orange-400' : null,
                     check.points > 3 ? 'text-red-400' : null,
                   )}
                 >

package/src/components/toolbar/toolbar-button.tsx

@@ -6,6 +6,7 @@ interface ToolbarButtonProps extends React.ComponentProps<'button'> {
   children: React.ReactNode;
   active?: boolean;
   tooltip?: React.ReactNode;
+  delayDuration?: number;
 }
 
 export const ToolbarButton = ({
@@ -13,17 +14,18 @@ export const ToolbarButton = ({
   className,
   active,
   tooltip,
+  delayDuration = 500,
   ...props
 }: ToolbarButtonProps) => {
   return (
     <Tooltip.Provider>
-      <Tooltip>
+      <Tooltip delayDuration={delayDuration}>
         <Tooltip.Trigger asChild>
           <button
             type="button"
             {...props}
             className={cn(
-              'h-full w-fit font-medium flex text-sm text-slate-10 items-center align-middle justify-center px-1 py-2 gap-1 relative',
+              'h-full w-fit font-regular flex text-sm text-slate-10 items-center align-middle justify-center px-1 gap-2 relative',
               'hover:text-slate-12 transition-colors',
               active && 'data-[state=active]:text-cyan-11',
               className,

package/src/components/toolbar.tsx

@@ -3,13 +3,14 @@ import * as Tabs from '@radix-ui/react-tabs';
 import { LayoutGroup } from 'framer-motion';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { use, useEffect } from 'react';
+import type { CompatibilityCheckingResult } from '../actions/email-validation/check-compatibility';
 import { isBuilding } from '../app/env';
 import { PreviewContext } from '../contexts/preview';
 import { cn } from '../utils';
 import { IconArrowDown } from './icons/icon-arrow-down';
+import { IconInfo } from './icons/icon-info';
 import { IconReload } from './icons/icon-reload';
-import { IconScanner } from './icons/icon-scanner';
-import { IconScissors } from './icons/icon-scissors';
+import { Compatibility, useCompatibility } from './toolbar/compatibility';
 import { Linter, type LintingRow, useLinter } from './toolbar/linter';
 import {
   SpamAssassin,
@@ -19,11 +20,12 @@ import {
 import { ToolbarButton } from './toolbar/toolbar-button';
 import { useCachedState } from './toolbar/use-cached-state';
 
-export type ToolbarTabValue = 'linter' | 'spam-assassin';
+export type ToolbarTabValue = 'linter' | 'compatibility' | 'spam-assassin';
 
 const ToolbarInner = ({
   serverLintingRows,
   serverSpamCheckingResult,
+  serverCompatibilityResults,
 
   markup,
   reactMarkup,
@@ -54,30 +56,42 @@ const ToolbarInner = ({
     } else {
       params.set('toolbar-panel', newValue);
     }
-    router.push(`${pathname}?${params.toString()}`);
+    router.push(`${pathname}?${params.toString()}${location.hash}`);
   };
 
   const [cachedSpamCheckingResult, setCachedSpamCheckingResult] =
     useCachedState<SpamCheckingResult>(
       `spam-assassin-${emailSlug.replaceAll('/', '-')}`,
     );
-  const [spamCheckingResult, { load: loadSpamChecking }] = useSpamAssassin({
-    markup,
-    plainText,
+  const [spamCheckingResult, { load: loadSpamChecking, loading: spamLoading }] =
+    useSpamAssassin({
+      markup,
+      plainText,
 
-    initialResult: serverSpamCheckingResult ?? cachedSpamCheckingResult,
-  });
+      initialResult: serverSpamCheckingResult ?? cachedSpamCheckingResult,
+    });
 
   const [cachedLintingRows, setCachedLintingRows] = useCachedState<
     LintingRow[]
   >(`linter-${emailSlug.replaceAll('/', '-')}`);
-  const [lintingRows, { load: loadLinting }] = useLinter({
-    reactMarkup,
-    emailPath,
+  const [lintingRows, { load: loadLinting, loading: lintLoading }] = useLinter({
     markup,
 
     initialRows: serverLintingRows ?? cachedLintingRows,
   });
+  const [cachedCompatibilityResults, setCachedCompatibilityResults] =
+    useCachedState<CompatibilityCheckingResult[]>(
+      `compatibility-${emailSlug.replaceAll('/', '-')}`,
+    );
+  const [
+    compatibilityCheckingResults,
+    { load: loadCompatibility, loading: compatibilityLoading },
+  ] = useCompatibility({
+    emailPath,
+    reactMarkup,
+
+    initialResults: serverCompatibilityResults ?? cachedCompatibilityResults,
+  });
 
   if (!isBuilding) {
     useEffect(() => {
@@ -87,6 +101,9 @@ const ToolbarInner = ({
 
         const spamCheckingResult = await loadSpamChecking();
         setCachedSpamCheckingResult(spamCheckingResult);
+
+        const compatibilityCheckingResults = await loadCompatibility();
+        setCachedCompatibilityResults(compatibilityCheckingResults);
       })();
     }, []);
   }
@@ -95,49 +112,83 @@ const ToolbarInner = ({
     <div
       data-toggled={toggled}
       className={cn(
-        'bg-black group/toolbar text-xs text-slate-11 h-48 transition-all',
-        'data-[toggled=false]:h-8',
+        'absolute bottom-0 left-0 right-0',
+        'bg-black group/toolbar text-xs text-slate-11 h-52 transition-transform',
+        'data-[toggled=false]:translate-y-[170px]',
       )}
     >
       <Tabs.Root
-        value={activeTab}
+        value={activeTab ?? ''}
         onValueChange={(newValue) => {
           setActivePanelValue(newValue as ToolbarTabValue);
         }}
         asChild
       >
         <div className="flex flex-col h-full">
-          <Tabs.List className="flex gap-4 px-2 border-b border-solid border-slate-6 h-7 w-full">
+          <Tabs.List className="flex gap-4 px-4 border-b border-solid border-slate-6 h-10 w-full flex-shrink-0">
             <LayoutGroup id="toolbar">
-              <Tabs.Trigger asChild value="spam-assassin">
-                <ToolbarButton active={activeTab === 'spam-assassin'}>
-                  <IconScissors />
-                  Spam Assassin
-                </ToolbarButton>
-              </Tabs.Trigger>
               <Tabs.Trigger asChild value="linter">
                 <ToolbarButton active={activeTab === 'linter'}>
-                  <IconScanner />
                   Linter
                 </ToolbarButton>
               </Tabs.Trigger>
+              <Tabs.Trigger asChild value="compatibility">
+                <ToolbarButton active={activeTab === 'compatibility'}>
+                  Compatibility
+                </ToolbarButton>
+              </Tabs.Trigger>
+              <Tabs.Trigger asChild value="spam-assassin">
+                <ToolbarButton active={activeTab === 'spam-assassin'}>
+                  Spam
+                </ToolbarButton>
+              </Tabs.Trigger>
             </LayoutGroup>
-            <div className="flex gap-1 ml-auto">
+            <div className="flex gap-0.5 ml-auto">
+              <ToolbarButton
+                delayDuration={0}
+                tooltip={
+                  (activeTab === 'linter' &&
+                    'The Linter tab checks all the images and links for common issues like missing alt text, broken URLs, insecure HTTP methods, and more.') ||
+                  (activeTab === 'spam-assassin' &&
+                    'The Spam tab will look at the content and use a robust scoring framework to determine if the email is likely to be spam. Powered by SpamAssassin.') ||
+                  (activeTab === 'compatibility' &&
+                    'The Compatibility tab shows how well the HTML/CSS is supported across mail clients like Outlook, Gmail, etc. Powered by Can I Email.') ||
+                  'Info'
+                }
+                onClick={() => {
+                  if (activeTab === undefined) {
+                    setActivePanelValue('linter');
+                  } else {
+                    setActivePanelValue(undefined);
+                  }
+                }}
+              >
+                <IconInfo size={24} />
+              </ToolbarButton>
               {isBuilding ? null : (
                 <ToolbarButton
                   tooltip="Reload"
+                  disabled={lintLoading || spamLoading}
                   onClick={async () => {
                     if (activeTab === undefined) {
                       setActivePanelValue('linter');
                     }
                     if (activeTab === 'spam-assassin') {
                       await loadSpamChecking();
-                    } else {
+                    } else if (activeTab === 'linter') {
                       await loadLinting();
+                    } else if (activeTab === 'compatibility') {
+                      await loadCompatibility();
                     }
                   }}
                 >
-                  <IconReload />
+                  <IconReload
+                    size={24}
+                    className={cn({
+                      'animate-spin opacity-60 animate-spin-fast':
+                        lintLoading || spamLoading,
+                    })}
+                  />
                 </ToolbarButton>
               )}
               <ToolbarButton
@@ -150,17 +201,41 @@ const ToolbarInner = ({
                   }
                 }}
               >
-                <IconArrowDown className="transition-transform group-data-[toggled=false]/toolbar:rotate-180" />
+                <IconArrowDown
+                  size={24}
+                  className="transition-transform group-data-[toggled=false]/toolbar:rotate-180"
+                />
               </ToolbarButton>
             </div>
           </Tabs.List>
 
-          <div className="flex-grow transition-opacity opacity-100 group-data-[toggled=false]/toolbar:opacity-0 overflow-y-auto px-2">
+          <div className="flex-grow transition-opacity opacity-100 group-data-[toggled=false]/toolbar:opacity-0 overflow-y-auto px-2 pt-3">
             <Tabs.Content value="linter">
-              <Linter rows={lintingRows} />
+              {lintLoading ? (
+                <div className="animate-pulse text-slate-11 text-sm pt-1">
+                  Running linting...
+                </div>
+              ) : (
+                <Linter rows={lintingRows} />
+              )}
             </Tabs.Content>
             <Tabs.Content value="spam-assassin">
-              <SpamAssassin result={spamCheckingResult} />
+              {spamLoading ? (
+                <div className="animate-pulse text-slate-11 text-sm pt-1">
+                  Running spam check...
+                </div>
+              ) : (
+                <SpamAssassin result={spamCheckingResult} />
+              )}
+            </Tabs.Content>
+            <Tabs.Content value="compatibility">
+              {compatibilityLoading ? (
+                <div className="animate-pulse text-slate-11 text-sm pt-1">
+                  Running compatibility check...
+                </div>
+              ) : (
+                <Compatibility results={compatibilityCheckingResults} />
+              )}
             </Tabs.Content>
           </div>
         </div>
@@ -172,11 +247,13 @@ const ToolbarInner = ({
 interface ToolbarProps {
   serverSpamCheckingResult: SpamCheckingResult | undefined;
   serverLintingRows: LintingRow[] | undefined;
+  serverCompatibilityResults: CompatibilityCheckingResult[] | undefined;
 }
 
 export const Toolbar = ({
   serverLintingRows,
   serverSpamCheckingResult,
+  serverCompatibilityResults,
 }: ToolbarProps) => {
   const { emailPath, emailSlug, renderedEmailMetadata } = use(PreviewContext)!;
 
@@ -192,6 +269,7 @@ export const Toolbar = ({
       plainText={plainText}
       serverLintingRows={serverLintingRows}
       serverSpamCheckingResult={serverSpamCheckingResult}
+      serverCompatibilityResults={serverCompatibilityResults}
     />
   );
 };