Use American English spelling throughout

web/src/views/mail/InviteCard.tsx

@@ -17,18 +17,18 @@ export function InviteCard({ email, part }: { email: Email; part: EmailBodyPart
 
   useEffect(() => {
     if (!cal.available || !part.blobId) return;
-    let cancelled = false;
+    let canceled = false;
     cal
       .parseIcs(part.blobId)
       .then(async (evs) => {
-        if (cancelled) return;
+        if (canceled) return;
         setEvents(evs);
         const first = evs[0];
         if (first?.uid) setExisting(await cal.findByUid(first.uid));
       })
-      .catch((err) => !cancelled && setError((err as Error).message));
+      .catch((err) => !canceled && setError((err as Error).message));
     return () => {
-      cancelled = true;
+      canceled = true;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [part.blobId, cal.available]);
@@ -80,7 +80,7 @@ export function InviteCard({ email, part }: { email: Email; part: EmailBodyPart
     }
   };
 
-  const title = method === "CANCEL" ? "Cancelled event" : method === "REPLY" ? "Invitation reply" : method === "REQUEST" ? (existing ? "Invitation (in your calendar)" : "Invitation") : "Event";
+  const title = method === "CANCEL" ? "Canceled event" : method === "REPLY" ? "Invitation reply" : method === "REQUEST" ? (existing ? "Invitation (in your calendar)" : "Invitation") : "Event";
 
   return (
     <div className="invite-card">

web/src/views/mail/MailView.tsx

@@ -101,7 +101,7 @@ export function MailView({ mailboxId, threadId, search }: { mailboxId?: string;
   }, [listQuery, query, mailboxesLoaded]);
 
   // Nothing moves a message out of Scheduled when its hold expires, so settle
-  // the folder up on the way in: sent messages to Sent, cancelled ones back to
+  // the folder up on the way in: sent messages to Sent, canceled ones back to
   // Drafts, and refresh what is still waiting.
   useEffect(() => {
     if (mailboxesLoaded && mailboxId && mailboxId === scheduledId) void reconcile();

web/src/views/mail/MailboxTree.tsx

@@ -290,9 +290,9 @@ function FolderRow({ mailbox: m, label, depth, hasChildren, open, hiddenUnread,
   // Bold when this folder has unread mail, or any folder beneath it does (parent + child both bold).
   const unread = m.role !== "drafts" && m.role !== "trash" && m.role !== "junk" && m.role !== "sent" && !scheduled ? m.unreadEmails + childUnread > 0 : m.unreadEmails > 0 && m.role !== "drafts" && !scheduled;
   const icon = m.role && ROLE_ICONS[m.role] ? ROLE_ICONS[m.role] : scheduled ? <Clock size={20} /> : <Folder size={20} />;
-  // A chosen colour tints the icon only; the label keeps the tree's own
-  // contrast, which a dozen arbitrary colours would not reliably give it.
-  // Subscribed, not read once: picking a colour has to repaint the row.
+  // A chosen color tints the icon only; the label keeps the tree's own
+  // contrast, which a dozen arbitrary colors would not reliably give it.
+  // Subscribed, not read once: picking a color has to repaint the row.
   const tint = useSettings((s) => folderColor(s.settings.folderColors, m.id));
 
   const onDragOver = (e: DragEvent) => {
@@ -442,7 +442,7 @@ function MailboxMenu({ mailbox: m, onClose, onCreateChild, onShare, onMove }: {
     return n;
   });
   const rename = async () => {
-    const name = await // The server's own name, never the localised one: this box writes
+    const name = await // The server's own name, never the localized one: this box writes
     // back whatever it is prefilled with.
     promptDialog({ title: t("Rename folder"), defaultValue: m.name });
     if (!name?.trim() || name.trim() === m.name) return;
@@ -497,7 +497,7 @@ function MailboxMenu({ mailbox: m, onClose, onCreateChild, onShare, onMove }: {
           reason this entry survives at all. */}
       {shared && <MenuItem icon={<Share2 size={16} />} label={t("Stop sharing")} onClick={onShare} />}
       <MenuSep />
-      <MenuTitle><span className="row gap-4"><Palette size={12} />  {t("Colour")}</span></MenuTitle>
+      <MenuTitle><span className="row gap-4"><Palette size={12} />  {t("Color")}</span></MenuTitle>
       <div className="color-grid" style={{ gridTemplateColumns: "repeat(6, 26px)", padding: "4px 10px 8px" }}>
         {CALENDAR_COLORS.map((c) => (
           <button
@@ -509,7 +509,7 @@ function MailboxMenu({ mailbox: m, onClose, onCreateChild, onShare, onMove }: {
           />
         ))}
       </div>
-      {color && <MenuItem icon={<X size={16} />} label={t("Use the default colour")} onClick={() => setColor(null)} />}
+      {color && <MenuItem icon={<X size={16} />} label={t("Use the default color")} onClick={() => setColor(null)} />}
       <MenuSep />
       {canEmpty(m.role) && <MenuItem icon={<Eraser size={16} />} label={emptyLabel(m)} onClick={() => void empty()} danger disabled={!m.totalEmails} />}
       <MenuItem icon={<Trash2 size={16} />} label={t("Delete folder")} onClick={() => void remove()} danger disabled={isSpecial || !m.myRights.mayDelete} />

web/src/views/mail/MessageList.tsx

@@ -612,7 +612,7 @@ const Row = memo(function Row({ email: e, threadEmails, top, height, selected, f
   /*
    * How far this row has been dragged from home, and whether it is currently
    * animating back. Kept here rather than in the list so that a moving finger
-   * re-renders one row instead of the whole virtualised list; the list is told
+   * re-renders one row instead of the whole virtualized list; the list is told
    * only the three things the strip behind the row needs -- which row, which
    * way, and whether letting go now would fire.
    */

web/src/views/mail/MessageView.tsx

@@ -60,12 +60,12 @@ export const MessageView = memo(function MessageView({ email: e, expanded, wasUn
   /*
    * Following a link out of a message, when the reader has asked to be asked.
    *
-   * The click is cancelled and the navigation re-issued after the answer,
+   * The click is canceled and the navigation re-issued after the answer,
    * because there is no way to hold a real navigation open across a dialog.
    * `window.open` runs in the continuation of the dialog's own click, which is
    * still the user gesture the popup blocker wants to see.
    *
-   * Both message bodies go through here -- the sanitised HTML one and the
+   * Both message bodies go through here -- the sanitized HTML one and the
    * plain-text one -- because a link in a plain-text mail is linkified by us
    * and is exactly as capable of pointing somewhere else as one the sender
    * marked up.
@@ -167,7 +167,7 @@ export const MessageView = memo(function MessageView({ email: e, expanded, wasUn
    * the reader has asked for the theme over that too.
    *
    * `forced` is the second switch and is narrower than `themed`: it only turns
-   * on for mail that actually declares colours, so plain mail is themed the
+   * on for mail that actually declares colors, so plain mail is themed the
    * gentle way and never pays for the override rules.
    */
   const declaresColors = useMemo(
@@ -411,7 +411,7 @@ export const MessageView = memo(function MessageView({ email: e, expanded, wasUn
                 onClick={async () => {
                   try {
                     await cancelScheduled(e.id);
-                    toast.success(translate("Send cancelled — the message is back in Drafts"));
+                    toast.success(translate("Send canceled — the message is back in Drafts"));
                   } catch (err) {
                     toast.error(translate("Could not cancel: {error}", { error: (err as Error).message }));
                   }
@@ -427,7 +427,7 @@ export const MessageView = memo(function MessageView({ email: e, expanded, wasUn
             <div className="remote-banner external-banner" style={{ margin: "0 16px 8px" }}>
               <ShieldAlert size={16} />
               <span className="grow">
-                {tNode("This message came from {domain}, which is outside your organisation.", {
+                {tNode("This message came from {domain}, which is outside your organization.", {
                   domain: <strong className="notranslate" translate="no">{domainOf(from?.email ?? "")}</strong>,
                 })}
               </span>

web/src/views/mail/__tests__/signature-banner.test.tsx

@@ -12,7 +12,7 @@ import type { SignatureReport } from "@/lib/smime/verify";
 /*
  * The wording is the feature here, so it is worth asserting rather than
  * eyeballing. The rule this pins down: ihasmail has no certificate authority to
- * ask, so a signature that merely verifies against the certificate travelling
+ * ask, so a signature that merely verifies against the certificate traveling
  * beside it must never be dressed as an endorsement. "Verified" full stop is
  * the word that would be a lie, and the tone must not be the reassuring one
  * until a previous sighting actually corroborates the signer.
@@ -71,7 +71,7 @@ describe("what the signature banner says", () => {
   it("does not congratulate a signer it has never seen before", async () => {
     await render(done({ crypto: { kind: "intact", cert: cert(), signer }, trust: "first-seen", warnings: [] }));
     expect(host.textContent).toContain("seen here for the first time");
-    // Grey, not green: an unknown certificate that verifies against itself has
+    // Gray, not green: an unknown certificate that verifies against itself has
     // established nothing worth a tick.
     expect(host.querySelector(".signature-banner")?.className).toContain("quiet");
     expect(host.textContent).not.toMatch(/\bverified\b/i);