@tribe-nest/forge 3.26.0 → 3.29.0

package/src/ui/styled/Cart.tsx

@@ -2,6 +2,7 @@ import { useEffect } from "react";
 import { createPortal } from "react-dom";
 import { ShoppingBag, X, Trash2 } from "lucide-react";
 import { useCart } from "../../contexts/CartContext";
+import { useForgeT } from "../../i18n";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { readableTextOn } from "../theme/contrast";
 import { useAmountFormatter } from "../format/useFormatCurrency";
@@ -42,6 +43,9 @@ const DRAWER_Z = 2147483001;
  */
 export function Cart({ icon, checkoutPath = "/i/checkout", productHref, formatAmount, className, style }: CartProps) {
   const t = useThemeTokens();
+  // Named `translate` rather than the usual `t`: `t` is already the theme
+  // tokens here, and in the `ticketTotal` parameter below.
+  const translate = useForgeT();
   const fmt = useAmountFormatter(formatAmount);
   // Inclusive stores show a muted "incl. tax" caption on the cart total; the
   // exact tax figure only exists once checkout quotes it (display-only).
@@ -77,7 +81,7 @@ export function Cart({ icon, checkoutPath = "/i/checkout", productHref, formatAm
       <button
         type="button"
         onClick={() => setCartOpen((p) => !p)}
-        aria-label="Open cart"
+        aria-label={translate("forge.cart.aria_open")}
         data-testid="cart-button"
         className={className}
         style={{
@@ -123,7 +127,7 @@ export function Cart({ icon, checkoutPath = "/i/checkout", productHref, formatAm
           <style>{KEYFRAMES}</style>
           <div
             onClick={() => setCartOpen(false)}
-            aria-label="Close cart"
+            aria-label={translate("forge.cart.aria_close")}
             style={{ position: "fixed", inset: 0, zIndex: OVERLAY_Z, background: "rgba(0,0,0,0.3)" }}
           />
           <aside
@@ -154,11 +158,13 @@ export function Cart({ icon, checkoutPath = "/i/checkout", productHref, formatAm
                 borderBottom: `1px solid ${t.border}`,
               }}
             >
-              <h2 style={{ fontSize: 18, fontWeight: 800, margin: 0, fontFamily: t.headingFontFamily }}>My Cart</h2>
+              <h2 style={{ fontSize: 18, fontWeight: 800, margin: 0, fontFamily: t.headingFontFamily }}>
+                {translate("forge.cart.title")}
+              </h2>
               <button
                 type="button"
                 onClick={() => setCartOpen(false)}
-                aria-label="Close cart"
+                aria-label={translate("forge.cart.aria_close")}
                 style={{ background: "transparent", border: "none", cursor: "pointer", color: t.text }}
               >
                 <X size={22} />
@@ -166,7 +172,9 @@ export function Cart({ icon, checkoutPath = "/i/checkout", productHref, formatAm
             </div>
 
             <div style={{ flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 16 }}>
-              {count === 0 && <p style={{ textAlign: "center", opacity: 0.7 }}>Your cart is empty.</p>}
+              {count === 0 && (
+                <p style={{ textAlign: "center", opacity: 0.7 }}>{translate("forge.cart.empty_title")}</p>
+              )}
 
               {ticketItems.map((ticket) => (
                 <div
@@ -199,7 +207,10 @@ export function Cart({ icon, checkoutPath = "/i/checkout", productHref, formatAm
                     </div>
                     {Object.entries(ticket.tickets).map(([id, qty]) => (
                       <div key={id} style={{ fontSize: 12, marginTop: 4, opacity: 0.75 }}>
-                        {ticket.ticketMeta[id]?.title ?? "Ticket"} × {qty}
+                        {translate("forge.cart.ticket_line", {
+                          ticket_title: ticket.ticketMeta[id]?.title ?? translate("forge.cart.ticket_fallback_title"),
+                          quantity: qty,
+                        })}
                       </div>
                     ))}
                     <div style={{ fontSize: 14, marginTop: 4, opacity: 0.8 }}>{fmt(ticketTotal(ticket))}</div>
@@ -210,7 +221,7 @@ export function Cart({ icon, checkoutPath = "/i/checkout", productHref, formatAm
                     // cannot be bought on their own, and leaving them would
                     // produce a checkout the server refuses.
                     onClick={() => removeTickets(ticket.eventId)}
-                    aria-label="Remove tickets"
+                    aria-label={translate("forge.cart.aria_remove_tickets")}
                     style={{ position: "absolute", top: 0, right: 0, background: "transparent", border: "none", cursor: "pointer", color: t.primary, padding: 4 }}
                   >
                     <Trash2 size={16} />
@@ -270,18 +281,25 @@ export function Cart({ icon, checkoutPath = "/i/checkout", productHref, formatAm
                       <CartLineOptions item={item} accent={t.primary} />
                       {item.isGift && (
                         <div style={{ fontSize: 12, marginTop: 4, color: t.primary }}>
-                          Gift for {item.recipientName} ({item.recipientEmail})
+                          {translate("forge.cart.gift_for", {
+                            recipient_name: item.recipientName ?? "",
+                            recipient_email: item.recipientEmail ?? "",
+                          })}
                         </div>
                       )}
-                      <div style={{ fontSize: 12, marginTop: 4, opacity: 0.7 }}>Qty: {item.quantity}</div>
+                      <div style={{ fontSize: 12, marginTop: 4, opacity: 0.7 }}>
+                        {translate("forge.cart.quantity", { quantity: item.quantity })}
+                      </div>
                       {item.attachedTo && (
-                        <div style={{ fontSize: 12, marginTop: 4, color: t.primary }}>Added with your tickets</div>
+                        <div style={{ fontSize: 12, marginTop: 4, color: t.primary }}>
+                          {translate("forge.cart.attached_to_tickets")}
+                        </div>
                       )}
                     </div>
                     <button
                       type="button"
                       onClick={() => removeFromCart(item.productVariantId, item.isGift, item.recipientEmail)}
-                      aria-label="Remove item"
+                      aria-label={translate("forge.cart.aria_remove_item")}
                       style={{ position: "absolute", top: 0, right: 0, background: "transparent", border: "none", cursor: "pointer", color: t.primary, padding: 4 }}
                     >
                       <Trash2 size={16} />
@@ -299,12 +317,12 @@ export function Cart({ icon, checkoutPath = "/i/checkout", productHref, formatAm
                 }}
               >
                 <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
-                  <span style={{ fontSize: 18, fontWeight: 600 }}>Total:</span>
+                  <span style={{ fontSize: 18, fontWeight: 600 }}>{translate("forge.cart.total")}</span>
                   <span style={{ fontSize: 18, fontWeight: 800, color: t.primary, textAlign: "right" }}>
                     {fmt(total)}
                     {pricesIncludeTax && (
                       <span style={{ display: "block", fontSize: 11, fontWeight: 400, color: t.text, opacity: 0.65 }}>
-                        incl. tax
+                        {translate("forge.cart.incl_tax")}
                       </span>
                     )}
                   </span>
@@ -323,7 +341,7 @@ export function Cart({ icon, checkoutPath = "/i/checkout", productHref, formatAm
                     color: onPrimary,
                   }}
                 >
-                  Checkout
+                  {translate("forge.cart.checkout")}
                 </button>
               </div>
             )}

package/src/ui/styled/ChatRoom.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { Lock } from "lucide-react";
 import type { ChatChannel, ChatMessage } from "../../data/queries/useChat";
+import { useForgeT, type ForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
 import { readableTextOn } from "../theme/contrast";
 import { Loading } from "./Loading";
@@ -12,19 +13,20 @@ import { NewDmDialog } from "./chat/NewDmDialog";
 
 export interface ChatRoomProps {}
 
-const channelLabel = (c: ChatChannel): string => {
+const channelLabel = (c: ChatChannel, t: ForgeT): string => {
   if (c.type === "dm") {
     const p = c.otherParticipant;
     if (p) return `${p.firstName ?? ""} ${p.lastName ?? ""}`.trim() || p.email;
-    return c.name ?? "Direct message";
+    return c.name ?? t("forge.chat_room.dm_fallback");
   }
-  return `# ${c.name ?? "channel"}`;
+  return `# ${c.name ?? t("forge.chat_room.channel_fallback")}`;
 };
 
 // Reference implementation of the community chat, built entirely on the
 // `useChatRoom` primitive (channels + messages + realtime socket + read
 // receipts + threads + member DMs). A creator can rebuild this UI from the same hook.
 export function ChatRoom(_props: ChatRoomProps) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const room = useChatRoom();
   const [showSidebar, setShowSidebar] = useState(true);
@@ -69,7 +71,7 @@ export function ChatRoom(_props: ChatRoomProps) {
         >
           {icon}
           <span style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
-            {icon ? c.name ?? "channel" : channelLabel(c)}
+            {icon ? (c.name ?? t("forge.chat_room.channel_fallback")) : channelLabel(c, t)}
           </span>
         </span>
         {unread > 0 && (
@@ -111,37 +113,63 @@ export function ChatRoom(_props: ChatRoomProps) {
   if (room.channelsLoading) return <Loading fullPage />;
 
   return (
-    <div style={{ display: "flex", height: "calc(100vh - 200px)", border, borderRadius: theme.cornerRadius, overflow: "hidden" }}>
-      {/* Channel list — full-width on mobile, fixed rail on desktop */}
+    <div
+      style={{
+        display: "flex",
+        height: "calc(100vh - 200px)",
+        border,
+        borderRadius: theme.cornerRadius,
+        overflow: "hidden",
+      }}
+    >
+      {/* Channel list: full-width on mobile, fixed rail on desktop */}
       <aside
         className={`${showSidebar ? "flex" : "hidden"} md:flex w-full md:w-[260px] flex-col`}
         style={{ borderRight: border, overflowY: "auto" }}
       >
-        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 16px", borderBottom: border }}>
-          <h2 style={{ fontWeight: 700, margin: 0 }}>Channels</h2>
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "10px 16px",
+            borderBottom: border,
+          }}
+        >
+          <h2 style={{ fontWeight: 700, margin: 0 }}>{t("forge.chat_room.channels_title")}</h2>
           <button
             onClick={() => setShowNewDm(true)}
-            title="New message"
-            style={{ background: theme.colors.primary, color: readableTextOn(theme.colors.primary), border: "none", borderRadius: theme.cornerRadius, width: 28, height: 28, cursor: "pointer", fontSize: 18, lineHeight: 1 }}
+            title={t("forge.chat_room.new_message")}
+            style={{
+              background: theme.colors.primary,
+              color: readableTextOn(theme.colors.primary),
+              border: "none",
+              borderRadius: theme.cornerRadius,
+              width: 28,
+              height: 28,
+              cursor: "pointer",
+              fontSize: 18,
+              lineHeight: 1,
+            }}
           >
             +
           </button>
         </div>
         {renderGroup(
-          "Public",
+          t("forge.chat_room.group_public"),
           room.channels.filter((c) => c.type === "public"),
         )}
         {renderGroup(
-          "Private channels",
+          t("forge.chat_room.group_private"),
           room.channels.filter((c) => c.type === "private"),
           <Lock size={14} style={{ opacity: 0.7, flexShrink: 0 }} />,
         )}
         {renderGroup(
-          "Direct messages",
+          t("forge.chat_room.group_dms"),
           room.channels.filter((c) => c.type === "dm"),
         )}
         {room.channels.length === 0 && (
-          <div style={{ padding: 16, opacity: 0.5, fontSize: 13 }}>No channels yet.</div>
+          <div style={{ padding: 16, opacity: 0.5, fontSize: 13 }}>{t("forge.chat_room.empty_title")}</div>
         )}
       </aside>
 
@@ -151,7 +179,7 @@ export function ChatRoom(_props: ChatRoomProps) {
           <MessagePanel room={room} onBack={() => setShowSidebar(true)} border={border} />
         ) : (
           <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", opacity: 0.5 }}>
-            Select a channel to start chatting
+            {t("forge.chat_room.select_channel")}
           </div>
         )}
       </section>
@@ -193,6 +221,7 @@ function MessagePanel({
   onBack: () => void;
   border: string;
 }) {
+  const t = useForgeT();
   const theme = useForgeTheme();
   const listRef = useRef<HTMLDivElement | null>(null);
 
@@ -205,12 +234,15 @@ function MessagePanel({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [room.messages.length, room.selectedChannel?.id]);
 
-  const title = room.selectedChannel ? channelLabel(room.selectedChannel) : "channel";
+  const title = room.selectedChannel ? channelLabel(room.selectedChannel, t) : t("forge.chat_room.channel_fallback");
 
   return (
     <>
       <header style={{ padding: "12px 16px", borderBottom: border, display: "flex", alignItems: "center", gap: 12 }}>
-        <button onClick={onBack} style={{ background: "none", border: "none", cursor: "pointer", color: theme.colors.text }}>
+        <button
+          onClick={onBack}
+          style={{ background: "none", border: "none", cursor: "pointer", color: theme.colors.text }}
+        >
           ←
         </button>
         <strong>{title}</strong>
@@ -232,14 +264,27 @@ function MessagePanel({
           />
         ))}
         {room.hasMore && (
-          <button onClick={() => room.fetchNextPage()} style={{ alignSelf: "center", background: "none", border, borderRadius: 8, padding: "4px 10px", cursor: "pointer", color: theme.colors.text }}>
-            Load earlier
+          <button
+            onClick={() => room.fetchNextPage()}
+            style={{
+              alignSelf: "center",
+              background: "none",
+              border,
+              borderRadius: 8,
+              padding: "4px 10px",
+              cursor: "pointer",
+              color: theme.colors.text,
+            }}
+          >
+            {t("forge.chat_room.load_earlier")}
           </button>
         )}
       </div>
 
       {room.typingUsers.length > 0 && (
-        <div style={{ padding: "0 16px 6px", fontSize: 12, opacity: 0.6 }}>{room.typingUsers.join(", ")} typing…</div>
+        <div style={{ padding: "0 16px 6px", fontSize: 12, opacity: 0.6 }}>
+          {t("forge.chat_room.typing", { users: room.typingUsers.join(", ") })}
+        </div>
       )}
 
       <ChatComposer