From eeb0660d83a6a1c83474c5118a1194f4261d73d6 Mon Sep 17 00:00:00 2001
From: Josh Knapp <jknapp85@gmail.com>
Date: Sun, 12 Jul 2026 20:14:29 -0700
Subject: [PATCH] Replace emoji-as-icons in editor chrome with Font Awesome

Unicode emoji/glyphs (Sitesmith's sparkle, lock, close X) render as
tofu on systems without an emoji font. Swap for the FA4 glyphs the
rest of the chrome already uses:
- SitesmithButton/SitesmithModal: sparkle -> fa-magic, lock -> fa-lock
- ContextMenu "Ask Sitesmith" entry: sparkle -> fa-magic (via new
  optional MenuItem.icon field)
- TemplateModal/SitesmithModal close buttons, PagesPanel delete,
  AssetsPanel delete/cancel: &#10005; -> fa-times / fa-trash

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 craft/src/panels/context-menu/ContextMenu.tsx  | 10 ++++++++--
 craft/src/panels/left/AssetsPanel.tsx          |  4 ++--
 craft/src/panels/left/PagesPanel.tsx           |  2 +-
 craft/src/panels/sitesmith/SitesmithButton.tsx |  4 ++--
 craft/src/panels/sitesmith/SitesmithModal.tsx  |  7 +++++--
 craft/src/panels/topbar/TemplateModal.tsx      |  2 +-
 6 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/craft/src/panels/context-menu/ContextMenu.tsx b/craft/src/panels/context-menu/ContextMenu.tsx
index b1eb0b8..fa9371d 100644
--- a/craft/src/panels/context-menu/ContextMenu.tsx
+++ b/craft/src/panels/context-menu/ContextMenu.tsx
@@ -16,6 +16,8 @@ interface ContextMenuProps {
 
 interface MenuItem {
   label: string;
+  /** Font Awesome icon suffix (e.g. 'magic' for fa-magic), rendered before the label. */
+  icon?: string;
   shortcut?: string;
   action: () => void;
   danger?: boolean;
@@ -189,7 +191,8 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
 
   const items: MenuItem[] = [
     {
-      label: '✨ Ask Sitesmith',
+      label: 'Ask Sitesmith',
+      icon: 'magic',
       action: askSitesmith,
       disabled: isRoot,
       dividerAfter: true,
@@ -291,7 +294,10 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
               (e.target as HTMLElement).style.background = 'transparent';
             }}
           >
-            <span>{item.label}</span>
+            <span>
+              {item.icon && <i className={`fa fa-${item.icon}`} style={{ marginRight: 6, width: 12 }} />}
+              {item.label}
+            </span>
             {item.shortcut && (
               <span
                 style={{
diff --git a/craft/src/panels/left/AssetsPanel.tsx b/craft/src/panels/left/AssetsPanel.tsx
index 1229881..e77455b 100644
--- a/craft/src/panels/left/AssetsPanel.tsx
+++ b/craft/src/panels/left/AssetsPanel.tsx
@@ -296,7 +296,7 @@ export const AssetsPanel: React.FC = () => {
                     cursor: 'pointer',
                   }}
                 >
-                  &#10005;
+                  <i className="fa fa-times" aria-hidden />
                 </button>
               </div>
             ) : (
@@ -328,7 +328,7 @@ export const AssetsPanel: React.FC = () => {
                 onMouseEnter={(e) => { (e.target as HTMLElement).style.opacity = '1'; }}
                 onMouseLeave={(e) => { (e.target as HTMLElement).style.opacity = '0.7'; }}
               >
-                &#10005;
+                <i className="fa fa-times" aria-hidden />
               </button>
             )}
           </div>
diff --git a/craft/src/panels/left/PagesPanel.tsx b/craft/src/panels/left/PagesPanel.tsx
index a7e90a4..8b36fde 100644
--- a/craft/src/panels/left/PagesPanel.tsx
+++ b/craft/src/panels/left/PagesPanel.tsx
@@ -394,7 +394,7 @@ export const PagesPanel: React.FC = () => {
                       cursor: 'pointer',
                     }}
                   >
-                    &#10005;
+                    <i className="fa fa-trash" />
                   </button>
                 )}
               </div>
diff --git a/craft/src/panels/sitesmith/SitesmithButton.tsx b/craft/src/panels/sitesmith/SitesmithButton.tsx
index c25e81d..6bc306a 100644
--- a/craft/src/panels/sitesmith/SitesmithButton.tsx
+++ b/craft/src/panels/sitesmith/SitesmithButton.tsx
@@ -21,8 +21,8 @@ export const SitesmithButton: React.FC<Props> = ({ onClick }) => {
         color: '#fff', border: 'none', padding: '6px 12px', borderRadius: 6, cursor: 'pointer', fontWeight: 500,
       }}
     >
-      ✨ Sitesmith
-      {locked && <span aria-hidden style={{ marginLeft: 6, fontSize: 12 }}>🔒</span>}
+      <i className="fa fa-magic" aria-hidden style={{ marginRight: 6 }} /> Sitesmith
+      {locked && <i className="fa fa-lock" aria-hidden style={{ marginLeft: 6, fontSize: 12 }} />}
       {capped && !locked && <span aria-hidden style={{ marginLeft: 6, fontSize: 11, opacity: 0.85 }}>(cap)</span>}
     </button>
   );
diff --git a/craft/src/panels/sitesmith/SitesmithModal.tsx b/craft/src/panels/sitesmith/SitesmithModal.tsx
index 6bb9ac7..56e793b 100644
--- a/craft/src/panels/sitesmith/SitesmithModal.tsx
+++ b/craft/src/panels/sitesmith/SitesmithModal.tsx
@@ -103,7 +103,10 @@ export const SitesmithModal: React.FC<Props> = ({ onClose, target }) => {
     >
       <div style={panel}>
         <div style={header}>
-          <div style={{ fontWeight: 600, color: '#fff' }}>✨ Sitesmith</div>
+          <div style={{ fontWeight: 600, color: '#fff' }}>
+            <i className="fa fa-magic" aria-hidden style={{ marginRight: 6 }} />
+            Sitesmith
+          </div>
           {summary && summary.enabled && (
             <div style={{ fontSize: 12, color: '#a1a1aa', marginLeft: 16 }}>
               {summary.monthly_used} / {summary.monthly_cap} this month
@@ -136,7 +139,7 @@ export const SitesmithModal: React.FC<Props> = ({ onClose, target }) => {
               </button>
             )
           )}
-          <button onClick={onClose} aria-label="Close" style={closeBtn}>✕</button>
+          <button onClick={onClose} aria-label="Close" style={closeBtn}><i className="fa fa-times" aria-hidden /></button>
         </div>
         <div style={body}>
           <UpgradeBanner summary={summary} />
diff --git a/craft/src/panels/topbar/TemplateModal.tsx b/craft/src/panels/topbar/TemplateModal.tsx
index 93b2227..75f3330 100644
--- a/craft/src/panels/topbar/TemplateModal.tsx
+++ b/craft/src/panels/topbar/TemplateModal.tsx
@@ -248,7 +248,7 @@ export const TemplateModal: React.FC<TemplateModalProps> = ({ open, onClose }) =
             </p>
           </div>
           <button onClick={onClose} style={closeButtonStyle} title="Close">
-            &#10005;
+            <i className="fa fa-times" aria-hidden />
           </button>
         </div>