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

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 { useEffect, useState } from 'react';
+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';
 
@@ -8,7 +8,7 @@ interface SpamAssassinProps {
   result: SpamCheckingResult | undefined;
 }
 
-interface SpamCheckingResult {
+export interface SpamCheckingResult {
   checks: {
     name: string;
     description: string;
@@ -25,33 +25,26 @@ function toSorted<T>(array: T[], sorter: (a: T, b: T) => number): T[] {
 }
 
 export const useSpamAssassin = ({
-  slug,
   markup,
   plainText,
+
+  initialResult,
 }: {
-  slug: string;
   markup: string;
   plainText: string;
-}) => {
-  const cacheKey = `spam-assassin-${slug.replaceAll('/', '-')}`;
 
-  const [result, setResult] = useState<SpamCheckingResult | undefined>();
-
-  useEffect(() => {
-    const cachedValue =
-      'localStorage' in global ? global.localStorage.getItem(cacheKey) : null;
-    if (cachedValue) {
-      try {
-        setResult(JSON.parse(cachedValue));
-      } catch (exception) {
-        setResult(undefined);
-      }
-    }
-  }, [cacheKey]);
+  initialResult?: SpamCheckingResult;
+}) => {
+  const [result, setResult] = useState<SpamCheckingResult | undefined>(
+    initialResult,
+  );
 
   const [loading, setLoading] = useState(false);
+  const isLoadingRef = useRef(false);
 
   const load = async () => {
+    if (isLoadingRef.current) return;
+    isLoadingRef.current = true;
     setLoading(true);
 
     try {
@@ -64,25 +57,21 @@ export const useSpamAssassin = ({
         }),
       });
 
-      if (response.ok) {
-        const responseBody = (await response.json()) as
-          | { error: string }
-          | SpamCheckingResult;
-        if ('error' in responseBody) {
-          toast.error(responseBody.error);
-        } else {
-          setResult(responseBody);
-          localStorage.setItem(cacheKey, JSON.stringify(responseBody));
-        }
+      const responseBody = (await response.json()) as
+        | { error: string }
+        | SpamCheckingResult;
+      if ('error' in responseBody) {
+        toast.error(responseBody.error);
       } else {
-        console.error(await response.text());
-        toast.error('Something went wrong');
+        setResult(responseBody);
+        return responseBody;
       }
     } catch (exception) {
       console.error(exception);
       toast.error(JSON.stringify(exception));
     } finally {
       setLoading(false);
+      isLoadingRef.current = false;
     }
   };
 
@@ -94,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,
               )}
             >
@@ -123,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>
@@ -139,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

@@ -0,0 +1,52 @@
+import { motion } from 'framer-motion';
+import { cn } from '../../utils';
+import { Tooltip } from '../tooltip';
+
+interface ToolbarButtonProps extends React.ComponentProps<'button'> {
+  children: React.ReactNode;
+  active?: boolean;
+  tooltip?: React.ReactNode;
+  delayDuration?: number;
+}
+
+export const ToolbarButton = ({
+  children,
+  className,
+  active,
+  tooltip,
+  delayDuration = 500,
+  ...props
+}: ToolbarButtonProps) => {
+  return (
+    <Tooltip.Provider>
+      <Tooltip delayDuration={delayDuration}>
+        <Tooltip.Trigger asChild>
+          <button
+            type="button"
+            {...props}
+            className={cn(
+              '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,
+            )}
+          >
+            {children}
+            {active ? (
+              <motion.span
+                className="-bottom-px absolute rounded-sm left-0 w-full bg-cyan-11 h-px"
+                layoutId="active-toolbar-button"
+                transition={{
+                  type: 'spring',
+                  bounce: 0.2,
+                  duration: 0.6,
+                }}
+              />
+            ) : null}
+          </button>
+        </Tooltip.Trigger>
+        {tooltip ? <Tooltip.Content>{tooltip}</Tooltip.Content> : null}
+      </Tooltip>
+    </Tooltip.Provider>
+  );
+};

package/src/components/toolbar/use-cached-state.ts

@@ -0,0 +1,33 @@
+import { useSyncExternalStore } from 'react';
+
+export const useCachedState = <T>(key: string) => {
+  let value: T | undefined = undefined;
+  if ('localStorage' in global) {
+    const storedValue = global.localStorage.getItem(key);
+    if (storedValue !== null) {
+      try {
+        value = JSON.parse(storedValue) as T;
+      } catch (exception) {
+        console.warn(
+          'Failed to load stored value for',
+          key,
+          'with value',
+          value,
+        );
+      }
+    }
+  }
+
+  return [
+    useSyncExternalStore(
+      () => () => {},
+      () => value,
+      () => undefined,
+    ),
+    function setValue(newValue: T | undefined) {
+      if ('localStorage' in global) {
+        global.localStorage.setItem(key, JSON.stringify(newValue));
+      }
+    },
+  ] as const;
+};

package/src/components/toolbar.tsx

@@ -1,185 +1,241 @@
+'use client';
 import * as Tabs from '@radix-ui/react-tabs';
-import { LayoutGroup, motion } from 'framer-motion';
+import { LayoutGroup } from 'framer-motion';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useEffect } from 'react';
+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 { Linter, useLinter } from './toolbar/linter';
-import { SpamAssassin, useSpamAssassin } from './toolbar/spam-assassin';
-import { Tooltip } from './tooltip';
+import { Compatibility, useCompatibility } from './toolbar/compatibility';
+import { Linter, type LintingRow, useLinter } from './toolbar/linter';
+import {
+  SpamAssassin,
+  type SpamCheckingResult,
+  useSpamAssassin,
+} from './toolbar/spam-assassin';
+import { ToolbarButton } from './toolbar/toolbar-button';
+import { useCachedState } from './toolbar/use-cached-state';
 
-type ToolbarProps = React.ComponentProps<'div'> & {
-  emailSlug: string;
-  markup: string;
-  plainText: string;
-};
-
-type ActivePanelValue = 'linter' | 'spam-assassin';
-
-interface ToolbarButton extends React.ComponentProps<'button'> {
-  children: React.ReactNode;
-  active?: boolean;
-  tooltip?: React.ReactNode;
-}
+export type ToolbarTabValue = 'linter' | 'compatibility' | 'spam-assassin';
 
-const ToolbarButton = ({
-  children,
-  className,
-  active,
-  tooltip,
-  ...props
-}: ToolbarButton) => {
-  return (
-    <Tooltip.Provider>
-      <Tooltip>
-        <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',
-              'hover:text-slate-12 transition-colors',
-              active && 'data-[state=active]:text-cyan-11',
-              className,
-            )}
-          >
-            {children}
-            {active ? (
-              <motion.span
-                className="-bottom-px absolute rounded-sm left-0 w-full bg-cyan-11 h-px"
-                layoutId="active-toolbar-button"
-                transition={{
-                  type: 'spring',
-                  bounce: 0.2,
-                  duration: 0.6,
-                }}
-              />
-            ) : null}
-          </button>
-        </Tooltip.Trigger>
-        {tooltip ? <Tooltip.Content>{tooltip}</Tooltip.Content> : null}
-      </Tooltip>
-    </Tooltip.Provider>
-  );
-};
+const ToolbarInner = ({
+  serverLintingRows,
+  serverSpamCheckingResult,
+  serverCompatibilityResults,
 
-export const Toolbar = ({
-  emailSlug,
   markup,
+  reactMarkup,
   plainText,
-  className,
-  ...rest
-}: ToolbarProps) => {
+  emailPath,
+  emailSlug,
+}: ToolbarProps & {
+  markup: string;
+  reactMarkup: string;
+  plainText: string;
+  emailSlug: string;
+  emailPath: string;
+}) => {
   const pathname = usePathname();
   const searchParams = useSearchParams();
   const router = useRouter();
 
-  const activePanelValue = (searchParams.get('toolbar-panel') ?? undefined) as
-    | ActivePanelValue
+  const activeTab = (searchParams.get('toolbar-panel') ?? undefined) as
+    | ToolbarTabValue
     | undefined;
 
-  const toggled = activePanelValue !== undefined;
+  const toggled = activeTab !== undefined;
 
-  const setActivePanelValue = (newValue: ActivePanelValue | undefined) => {
-    console.log(newValue);
+  const setActivePanelValue = (newValue: ToolbarTabValue | undefined) => {
     const params = new URLSearchParams(searchParams);
     if (newValue === undefined) {
       params.delete('toolbar-panel');
     } else {
       params.set('toolbar-panel', newValue);
     }
-    router.push(`${pathname}?${params.toString()}`);
+    router.push(`${pathname}?${params.toString()}${location.hash}`);
   };
 
-  const [spamCheckingResult, { load: loadSpamChecking }] = useSpamAssassin({
-    slug: emailSlug,
+  const [cachedSpamCheckingResult, setCachedSpamCheckingResult] =
+    useCachedState<SpamCheckingResult>(
+      `spam-assassin-${emailSlug.replaceAll('/', '-')}`,
+    );
+  const [spamCheckingResult, { load: loadSpamChecking, loading: spamLoading }] =
+    useSpamAssassin({
+      markup,
+      plainText,
+
+      initialResult: serverSpamCheckingResult ?? cachedSpamCheckingResult,
+    });
+
+  const [cachedLintingRows, setCachedLintingRows] = useCachedState<
+    LintingRow[]
+  >(`linter-${emailSlug.replaceAll('/', '-')}`);
+  const [lintingRows, { load: loadLinting, loading: lintLoading }] = useLinter({
     markup,
-    plainText,
+
+    initialRows: serverLintingRows ?? cachedLintingRows,
   });
+  const [cachedCompatibilityResults, setCachedCompatibilityResults] =
+    useCachedState<CompatibilityCheckingResult[]>(
+      `compatibility-${emailSlug.replaceAll('/', '-')}`,
+    );
+  const [
+    compatibilityCheckingResults,
+    { load: loadCompatibility, loading: compatibilityLoading },
+  ] = useCompatibility({
+    emailPath,
+    reactMarkup,
 
-  const [lintingResults, { load: loadLinting }] = useLinter({
-    slug: emailSlug,
-    markup,
+    initialResults: serverCompatibilityResults ?? cachedCompatibilityResults,
   });
 
-  useEffect(() => {
-    loadLinting();
-    loadSpamChecking();
-  }, []);
+  if (!isBuilding) {
+    useEffect(() => {
+      (async () => {
+        const lintingRows = await loadLinting();
+        setCachedLintingRows(lintingRows);
+
+        const spamCheckingResult = await loadSpamChecking();
+        setCachedSpamCheckingResult(spamCheckingResult);
+
+        const compatibilityCheckingResults = await loadCompatibility();
+        setCachedCompatibilityResults(compatibilityCheckingResults);
+      })();
+    }, []);
+  }
 
   return (
     <div
-      {...rest}
       data-toggled={toggled}
       className={cn(
-        'bg-black group/toolbar text-xs text-slate-11 h-48 transition-all',
-        'data-[toggled=false]:h-8',
-        className,
+        '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={activePanelValue}
+        value={activeTab ?? ''}
         onValueChange={(newValue) => {
-          setActivePanelValue(newValue as ActivePanelValue);
+          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={activePanelValue === 'spam-assassin'}>
-                  <IconScissors />
-                  Spam Assassin
-                </ToolbarButton>
-              </Tabs.Trigger>
               <Tabs.Trigger asChild value="linter">
-                <ToolbarButton active={activePanelValue === 'linter'}>
-                  <IconScanner />
+                <ToolbarButton active={activeTab === 'linter'}>
                   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
-                tooltip="Reload"
+                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 (activePanelValue === 'spam-assassin') {
-                    void loadSpamChecking();
-                  } else if (activePanelValue === 'linter') {
-                    void loadLinting();
-                  } else {
+                  if (activeTab === undefined) {
                     setActivePanelValue('linter');
-                    void loadLinting();
+                  } else {
+                    setActivePanelValue(undefined);
                   }
                 }}
               >
-                <IconReload />
+                <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 if (activeTab === 'linter') {
+                      await loadLinting();
+                    } else if (activeTab === 'compatibility') {
+                      await loadCompatibility();
+                    }
+                  }}
+                >
+                  <IconReload
+                    size={24}
+                    className={cn({
+                      'animate-spin opacity-60 animate-spin-fast':
+                        lintLoading || spamLoading,
+                    })}
+                  />
+                </ToolbarButton>
+              )}
               <ToolbarButton
                 tooltip="Toggle toolbar"
                 onClick={() => {
-                  if (activePanelValue === undefined) {
+                  if (activeTab === undefined) {
                     setActivePanelValue('linter');
                   } else {
                     setActivePanelValue(undefined);
                   }
                 }}
               >
-                <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 results={lintingResults} />
+              {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>
@@ -187,3 +243,33 @@ export const Toolbar = ({
     </div>
   );
 };
+
+interface ToolbarProps {
+  serverSpamCheckingResult: SpamCheckingResult | undefined;
+  serverLintingRows: LintingRow[] | undefined;
+  serverCompatibilityResults: CompatibilityCheckingResult[] | undefined;
+}
+
+export const Toolbar = ({
+  serverLintingRows,
+  serverSpamCheckingResult,
+  serverCompatibilityResults,
+}: ToolbarProps) => {
+  const { emailPath, emailSlug, renderedEmailMetadata } = use(PreviewContext)!;
+
+  if (renderedEmailMetadata === undefined) return null;
+  const { markup, plainText, reactMarkup } = renderedEmailMetadata;
+
+  return (
+    <ToolbarInner
+      emailPath={emailPath}
+      emailSlug={emailSlug}
+      markup={markup}
+      reactMarkup={reactMarkup}
+      plainText={plainText}
+      serverLintingRows={serverLintingRows}
+      serverSpamCheckingResult={serverSpamCheckingResult}
+      serverCompatibilityResults={serverCompatibilityResults}
+    />
+  );
+};

package/src/components/tooltip-content.tsx

@@ -18,7 +18,7 @@ export const TooltipContent = React.forwardRef<
       {...props}
       className={cn(
         'z-20 rounded-md border border-slate-6 bg-black px-3 py-2 text-white text-xs',
-        'font-sans',
+        'font-sans max-w-60',
       )}
       ref={forwardedRef}
       sideOffset={sideOffset}

package/src/components/topbar/view-size-controls.tsx

@@ -123,7 +123,7 @@ const PresetMenuItem = ({
     onClick={() => onSelect(dimensions)}
   >
     {name}
-    <span className="flex h-fit items-center rounded-full bg-slate-6 px-1.5 py-0.5 font-bold text-white text-xs">
+    <span className="flex h-fit items-center rounded-full bg-slate-6 px-2 py-1 font-medium text-slate-11 text-xs">
       {dimensions.width}x{dimensions.height}
     </span>
   </DropdownMenu.Item>