create-fate 1.3.3 → 1.5.0

package/templates/fate/void/db/migrations/meta/20260508073357_snapshot.json

@@ -50,6 +50,13 @@
           "notNull": false,
           "autoincrement": false
         },
+        "issuer": {
+          "name": "issuer",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
         "password": {
           "name": "password",
           "type": "text",
@@ -102,9 +109,9 @@
         }
       },
       "indexes": {
-        "account_providerId_accountId_key": {
-          "name": "account_providerId_accountId_key",
-          "columns": ["providerId", "accountId"],
+        "account_issuer_accountId_key": {
+          "name": "account_issuer_accountId_key",
+          "columns": ["issuer", "accountId"],
           "isUnique": true
         }
       },

package/templates/fate/void/db/schema.ts

@@ -67,6 +67,7 @@ export const account = sqliteTable(
     createdAt: timestampColumn(),
     id: idColumn().primaryKey(),
     idToken: text(),
+    issuer: text().notNull(),
     password: text(),
     providerId: text().notNull(),
     refreshToken: text(),
@@ -77,9 +78,7 @@ export const account = sqliteTable(
       .notNull()
       .references(() => user.id, { onDelete: 'cascade' }),
   },
-  (table) => [
-    uniqueIndex('account_providerId_accountId_key').on(table.providerId, table.accountId),
-  ],
+  (table) => [uniqueIndex('account_issuer_accountId_key').on(table.issuer, table.accountId)],
 );
 
 export const category = sqliteTable(

package/templates/fate/void/middleware/01.shared.ts

@@ -26,4 +26,7 @@ export default defineMiddleware(async (context, next) => {
   });
 
   await next();
+
+  // Void auth appends headers after this middleware; asset responses can be immutable.
+  context.res = new Response(context.res.body, context.res);
 });

package/templates/fate/void/package.json

@@ -10,13 +10,17 @@
   },
   "type": "module",
   "scripts": {
-    "build": "vp build",
+    "build": "vp run fbtee:all && vp build",
     "db:generate": "void db generate",
     "db:migrate": "void db migrate",
     "db:seed": "void db seed --file db/seed.ts",
     "dev": "vp dev",
-    "dev:setup": "vp run prepare:void && vp run db:seed && vp run fate:generate",
+    "dev:setup": "vp run fbtee:all && vp run prepare:void && vp run db:seed && vp run fate:generate",
     "fate:generate": "vp exec fate generate",
+    "fbtee:all": "vp run fbtee:collect && vp run fbtee:translate",
+    "fbtee:collect": "vp exec fbtee collect",
+    "fbtee:prepare": "vp run fbtee:collect && vp exec fbtee prepare-translations --source-strings source_strings.json --output-dir translations --locales de-DE ja-JP",
+    "fbtee:translate": "vp exec fbtee translate --source-strings source_strings.json --output-dir src/translations --output-locale-style=bcp47",
     "prepare:void": "void prepare",
     "test:all": "vp check && vp test"
   },
@@ -24,38 +28,39 @@
     "@nkzw/core": "^1.3.1",
     "@nkzw/fate": "latest",
     "@nkzw/stack": "^2.3.2",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@void/react": "^0.7.13",
-    "better-auth": "^1.6.9",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@void/react": "^0.10.12",
+    "better-auth": "1.7.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "drizzle-orm": "^0.45.2",
-    "lucide-react": "^1.14.0",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "react-error-boundary": "^6.1.1",
+    "fbtee": "^4.0.0",
+    "lucide-react": "^1.34.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-error-boundary": "^6.1.3",
     "react-fate": "latest",
-    "tailwind-merge": "^3.5.0",
-    "void": "^0.7.13",
+    "tailwind-merge": "^3.6.0",
+    "void": "^0.10.12",
     "void-fate": "latest",
     "zod": "^4.4.3"
   },
   "devDependencies": {
+    "@cloudflare/workers-types": "4.20260702.1",
     "@nkzw/eslint-plugin": "^2.0.0",
-    "@nkzw/oxlint-config": "^1.2.1",
-    "@rolldown/plugin-babel": "^0.2.3",
-    "@tailwindcss/vite": "^4.2.4",
-    "@types/node": "^25.6.0",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "@typescript/native-preview": "7.0.0-dev.20260505.1",
-    "@vitejs/plugin-react": "^6.0.1",
-    "babel-plugin-react-compiler": "^1.0.0",
-    "eslint-plugin-no-only-tests": "^3.4.0",
-    "eslint-plugin-perfectionist": "^5.9.0",
-    "eslint-plugin-react-hooks": "^7.1.1",
-    "tailwindcss": "^4.2.4",
-    "ts-node": "^10.9.2",
+    "@nkzw/fbtee-cli": "^4.0.0",
+    "@nkzw/oxlint-config": "^2.0.1",
+    "@nkzw/vite-plugin-fbtee": "^4.0.0",
+    "@oxc-node/core": "^0.1.0",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "^26.4.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.5",
+    "@vitejs/plugin-react": "^6.1.0",
+    "oxc-transform-react": "^0.147.0",
+    "pg": "8.22.0",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^7.0.2",
     "vite": "catalog:",
     "vite-plus": "catalog:",
     "vitest": "catalog:"

package/templates/fate/void/pages/index.tsx

@@ -38,7 +38,9 @@ const PostFeed = ({
   return posts.length ? (
     <VStack gap={16}>
       <Stack alignCenter between gap={16}>
-        <H2 className="pl-5">Latest posts</H2>
+        <H2 className="pl-5">
+          <fbt desc="Latest posts header">Latest posts</fbt>
+        </H2>
         <div>
           <button
             className={cx(
@@ -46,6 +48,7 @@ const PostFeed = ({
               user ? 'active:translate-y-0.5 active:opacity-50' : 'pointer-events-none opacity-0',
             )}
             onClick={() => setShowPostEditor((showPostEditor) => !showPostEditor)}
+            type="button"
           >
             {showPostEditor ? (
               <CircleMinus className="h-6 w-6" />
@@ -65,7 +68,7 @@ const PostFeed = ({
         {loadNext ? (
           <Stack center>
             <Button onClick={loadNext} variant="ghost">
-              Load more posts
+              <fbt desc="Load more posts button">Load more posts</fbt>{' '}
             </Button>
           </Stack>
         ) : null}
@@ -77,7 +80,9 @@ const PostFeed = ({
 const CategoryFeed = ({ categories }: { categories: Array<ViewRef<'Category'>> }) =>
   categories.length ? (
     <VStack gap={16}>
-      <H2 className="pl-5">Explore by theme</H2>
+      <H2 className="pl-5">
+        <fbt desc="index: Explore by theme">Explore by theme</fbt>
+      </H2>
       <VStack gap={24}>
         {categories.map((category) => (
           <CategoryCard category={category} key={category.id} />
@@ -89,7 +94,9 @@ const CategoryFeed = ({ categories }: { categories: Array<ViewRef<'Category'>> }
 const EventFeed = ({ events }: { events: Array<ViewRef<'Event'>> }) =>
   events.length ? (
     <VStack gap={16}>
-      <H2 className="pl-5">Events</H2>
+      <H2 className="pl-5">
+        <fbt desc="index: Events">Events</fbt>
+      </H2>
       <VStack gap={24}>
         {events.map((event) => (
           <EventCard event={event} key={event.id} />
@@ -114,16 +121,20 @@ export default function HomePage() {
         <Card className="border border-white/20 bg-linear-to-r from-blue-500 to-sky-500 text-white dark:from-blue-600 dark:to-sky-600">
           <Stack alignCenter gap={12} wrap>
             <span className="squircle bg-white/20 px-2 py-1 text-xs font-semibold tracking-widest uppercase">
-              <span className="lowercase italic">fate</span> demo
+              <span className="lowercase italic">fate</span> <fbt desc="index: demo">demo</fbt>{' '}
             </span>
           </Stack>
           <div className="space-y-3">
             <h1 className="text-3xl leading-tight font-semibold text-balance lg:text-4xl">
-              fate is a modern data client for React inspired by Relay and GraphQL.
+              <fbt desc="Description of fate">
+                fate is a modern data client for React inspired by Relay and GraphQL.
+              </fbt>{' '}
             </h1>
             <p className="text-sm text-white/80 lg:text-base">
-              fate combines view composition, normalized caching, data masking, Async React
-              features, and type-safe data fetching.
+              <fbt desc="index: fate combines view composition, normalized caching, data masking, Async React features, and type-safe data fetching.">
+                fate combines view composition, normalized caching, data masking, Async React
+                features, and type-safe data fetching.
+              </fbt>{' '}
             </p>
           </div>
           <Stack alignCenter gap={12} wrap>
@@ -131,10 +142,12 @@ export default function HomePage() {
               <>
                 <Button asChild size="sm" variant="secondary">
                   <Link className="squircle px-4 py-2 text-sm font-semibold" href="/login">
-                    Login
+                    <fbt desc="Login button">Login</fbt>{' '}
                   </Link>
                 </Button>
-                <span className="text-sm text-white/80">Sign in to post comments.</span>
+                <span className="text-sm text-white/80">
+                  <fbt desc="Login button label">Sign in to post comments.</fbt>
+                </span>
               </>
             )}
           </Stack>

package/templates/fate/void/pages/layout.tsx

@@ -1,9 +1,10 @@
-import '../src/App.css';
 import Stack from '@nkzw/stack';
+import '../src/App.css';
 import { useShared } from '@void/react';
 import { ReactNode, Suspense } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { VoidFateClient } from 'void-fate/react';
+import LocaleContext from '../src/lib/LocaleContext.tsx';
 import type { SharedData } from '../src/lib/shared.ts';
 import Card from '../src/ui/Card.tsx';
 import Error from '../src/ui/Error.tsx';
@@ -13,7 +14,7 @@ import Section from '../src/ui/Section.tsx';
 const Thinking = () => (
   <Section>
     <Stack center className="animate-pulse text-gray-500 italic" verticalPadding={48}>
-      Thinking...
+      <fbt desc="Text for thinking/loading screen">Thinking...</fbt>
     </Stack>
   </Section>
 );
@@ -24,23 +25,25 @@ export default function Layout({ children }: { children: ReactNode }) {
   const origin = typeof window === 'undefined' ? shared.origin : window.location.origin;
 
   return (
-    <VoidFateClient origin={origin} userId={userId}>
-      <div className="min-h-screen bg-background text-foreground">
-        <div className="min-h-screen bg-[radial-gradient(circle_at_20%_20%,rgba(59,130,246,0.08),transparent_35%),radial-gradient(circle_at_80%_0,rgba(99,102,241,0.08),transparent_28%)]">
-          <Header />
-          <ErrorBoundary
-            fallbackRender={({ error }) => (
-              <Section>
-                <Card>
-                  <Error error={error} />
-                </Card>
-              </Section>
-            )}
-          >
-            <Suspense fallback={<Thinking />}>{children}</Suspense>
-          </ErrorBoundary>
+    <LocaleContext>
+      <VoidFateClient origin={origin} userId={userId}>
+        <div className="min-h-screen bg-background text-foreground">
+          <div className="min-h-screen bg-[radial-gradient(circle_at_20%_20%,rgba(59,130,246,0.08),transparent_35%),radial-gradient(circle_at_80%_0,rgba(99,102,241,0.08),transparent_28%)]">
+            <Header />
+            <ErrorBoundary
+              fallbackRender={({ error }) => (
+                <Section>
+                  <Card>
+                    <Error error={error} />
+                  </Card>
+                </Section>
+              )}
+            >
+              <Suspense fallback={<Thinking />}>{children}</Suspense>
+            </ErrorBoundary>
+          </div>
         </div>
-      </div>
-    </VoidFateClient>
+      </VoidFateClient>
+    </LocaleContext>
   );
 }

package/templates/fate/void/pages/login.tsx

@@ -1,5 +1,6 @@
 import Stack, { VStack } from '@nkzw/stack';
 import { useRouter, useShared } from '@void/react';
+import { fbs } from 'fbtee';
 import { ExternalLinkIcon } from 'lucide-react';
 import { useActionState, useEffect, useState } from 'react';
 import type { SharedData } from '../src/lib/shared.ts';
@@ -49,7 +50,9 @@ export default function LoginPage() {
   return (
     <Section>
       <VStack center gap={16}>
-        <H2 className="pl-5">Sign In</H2>
+        <H2 className="pl-5">
+          <fbt desc="Sign in button">Sign In</fbt>
+        </H2>
         <Stack gap={32} wrap>
           <Card className="w-84">
             <Stack gap vertical>
@@ -58,7 +61,7 @@ export default function LoginPage() {
                   className="w-48"
                   name="email"
                   onChange={(e) => setEmail(e.target.value)}
-                  placeholder="email"
+                  placeholder={fbs('email', 'login: placeholder')}
                   type="email"
                   value={email}
                 />
@@ -66,13 +69,13 @@ export default function LoginPage() {
                   className="w-48"
                   name="password"
                   onChange={(e) => setPassword(e.target.value)}
-                  placeholder="password"
+                  placeholder={fbs('password', 'login: placeholder')}
                   type="password"
                   value={password}
                 />
                 <div>
                   <AsyncButton type="submit" variant="outline">
-                    Sign In
+                    <fbt desc="Sign in button">Sign In</fbt>{' '}
                   </AsyncButton>
                 </div>
               </VStack>
@@ -80,20 +83,21 @@ export default function LoginPage() {
           </Card>
           <Card className="w-84">
             <p>
-              Try one of the
-              <Stack
-                alignCenter
-                as="a"
-                className="inline-flex! px-1 underline hover:no-underline"
-                gap={4}
-                href="https://github.com/nkzw-tech/fate/blob/main/packages/create-fate/templates/fate/void/seedData.ts#L1"
-                rel="noreferrer"
-                target="_blank"
-              >
-                Example Accounts
-                <ExternalLinkIcon className="h-4 w-4" />
-              </Stack>{' '}
-              in the seed data.
+              <fbt desc="Example account instructions">
+                Try one of the{' '}
+                <Stack
+                  alignCenter
+                  as="a"
+                  className="inline-flex! px-1 underline hover:no-underline"
+                  gap={4}
+                  href="https://github.com/nkzw-tech/fate/blob/main/packages/create-fate/templates/fate/void/seedData.ts#L1"
+                  rel="noreferrer"
+                  target="_blank"
+                >
+                  Example Accounts <ExternalLinkIcon className="h-4 w-4" />
+                </Stack>{' '}
+                in the seed data.
+              </fbt>{' '}
             </p>
           </Card>
         </Stack>

package/templates/fate/void/pages/search.tsx

@@ -1,4 +1,5 @@
 import Stack, { VStack } from '@nkzw/stack';
+import { fbs } from 'fbtee';
 import { Suspense, useDeferredValue, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useRequest, useView, view, ViewRef } from 'react-fate';
@@ -39,7 +40,12 @@ const SearchResults = ({ isStale, query }: { isStale: boolean; query: string })
   if (commentSearch.length === 0) {
     return (
       <p>
-        No matches for <i>&quot;{query}&quot;</i>
+        <fbt desc="Empty comment search results">
+          No matches for{' '}
+          <i>
+            &quot;<fbt:param name="query">{query}</fbt:param>&quot;
+          </i>
+        </fbt>
       </p>
     );
   }
@@ -65,17 +71,25 @@ export default function SearchPage() {
           <Input
             className="w-64"
             onChange={(e) => setQuery(e.target.value)}
-            placeholder="Search comments..."
+            placeholder={fbs('Search comments...', 'search: placeholder')}
             ref={(ref) => ref?.focus()}
             value={query}
           />
           {isDevelopment ? (
-            <div className="text-xs text-muted-foreground">500ms artificial slowdown</div>
+            <div className="text-xs text-muted-foreground">
+              <fbt desc="Slowdown label explanation">500ms artificial slowdown</fbt>
+            </div>
           ) : null}
         </Stack>
 
         <ErrorBoundary FallbackComponent={Error}>
-          <Suspense fallback={<h2>Thinking…</h2>}>
+          <Suspense
+            fallback={
+              <h2>
+                <fbt desc="Text for thinking/loading screen">Thinking…</fbt>
+              </h2>
+            }
+          >
             {query.trim().length > 0 ? <SearchResults isStale={isStale} query={query} /> : null}
           </Suspense>
         </ErrorBoundary>

package/templates/fate/void/pnpm-workspace.yaml

@@ -8,13 +8,12 @@ allowBuilds:
   workerd: true
 
 catalog:
-  vite: npm:@voidzero-dev/vite-plus-core@^0.1.23
-  vite-plus: ^0.1.23
-  vitest: npm:@voidzero-dev/vite-plus-test@^0.1.23
+  vite: npm:@voidzero-dev/vite-plus-core@^0.3.0
+  vite-plus: ^0.3.0
+  vitest: ^4.1.11
 
 minimumReleaseAgeExclude:
   - '@voidzero-dev/vite-plus-core'
-  - '@voidzero-dev/vite-plus-test'
   - vite-plus
 
 onlyBuiltDependencies:
@@ -26,6 +25,7 @@ onlyBuiltDependencies:
   - workerd
 
 overrides:
+  better-auth: 1.7.2
   kysely: 0.28.17
   vite: 'catalog:'
   vitest: 'catalog:'

package/templates/fate/void/src/fate/server.ts

@@ -7,8 +7,9 @@ import {
   hasNestedSelection,
 } from '@nkzw/fate/server';
 import { createDrizzleSourceAdapter, type DrizzleQueryExtra } from '@nkzw/fate/server/drizzle';
+import { like } from 'drizzle-orm';
 import { createVoidFateLive } from 'void-fate/server';
-import { db, eq, like } from 'void/db';
+import { db, eq } from 'void/db';
 import { z } from 'zod';
 import {
   type CommentItem,

package/templates/fate/void/src/lib/AvailableLanguages.tsx

@@ -0,0 +1,5 @@
+export default new Map([
+  ['en-US', 'English'],
+  ['de-DE', 'Deutsch (German)'],
+  ['ja-JP', '日本語 (Japanese)'],
+]);

package/templates/fate/void/src/lib/LocaleContext.tsx

@@ -0,0 +1,61 @@
+/// <reference types="fbtee/ReactTypes.d.ts" />
+
+import { createLocaleContext, useLocaleContext } from 'fbtee';
+import { ReactNode, startTransition, useEffect, useState } from 'react';
+import AvailableLanguages from './AvailableLanguages.tsx';
+
+const Context = createLocaleContext({
+  availableLanguages: AvailableLanguages,
+  // Keep the server and first client render identical; restore preferences after hydration.
+  clientLocales: ['en-US'],
+  fallbackLocale: 'en-US',
+  loadLocale: async (locale) => {
+    if (locale !== 'en-US' && AvailableLanguages.has(locale)) {
+      return (await import(`../translations/${locale}.json`)).default[locale];
+    }
+    return {};
+  },
+});
+
+function RestoreLocale({ restored, onRestore }: { restored: boolean; onRestore: () => void }) {
+  const { locale, setLocale } = useLocaleContext();
+  useEffect(() => {
+    if (restored) return;
+    onRestore();
+    let savedLocale: string | null = null;
+    try {
+      savedLocale = localStorage.getItem('fbtee:locale');
+    } catch {
+      // Browser storage can be unavailable.
+    }
+    const preferred = [savedLocale, ...navigator.languages, navigator.language]
+      .filter((value): value is string => !!value)
+      .map((value) => value.replaceAll('_', '-'));
+    const nextLocale = preferred
+      .map((value) =>
+        AvailableLanguages.has(value)
+          ? value
+          : [...AvailableLanguages.keys()].find(
+              (available) => available.split('-')[0] === value.split('-')[0],
+            ),
+      )
+      .find(Boolean);
+    if (nextLocale && nextLocale !== locale) {
+      startTransition(() => setLocale(nextLocale));
+    }
+  }, [locale, setLocale, restored, onRestore]);
+  useEffect(() => {
+    document.documentElement.lang = locale;
+  }, [locale]);
+  return null;
+}
+
+export default function LocaleContext({ children }: { children: ReactNode }) {
+  const [restored, setRestored] = useState(false);
+  return (
+    <Context>
+      <RestoreLocale restored={restored} onRestore={() => setRestored(true)} />
+      {children}
+    </Context>
+  );
+}

package/templates/fate/void/src/ui/CategoryCard.tsx

@@ -33,11 +33,23 @@ const CategoryPost = ({ post: postRef }: { post: ViewRef<'Post'> }) => {
             {post.title}
           </span>
         </Link>
-        <span className="text-xs text-muted-foreground">{post.likes} likes</span>
+        <span className="text-xs text-muted-foreground">
+          <fbt desc="Post like count">
+            <fbt:plural count={post.likes} many="likes" showCount="yes">
+              like
+            </fbt:plural>
+          </fbt>
+        </span>
       </Stack>
       <Stack alignCenter gap wrap>
         <span className="text-xs text-muted-foreground">
-          {author?.name ? `by ${author.name}` : 'By an anonymous collaborator'}
+          {author?.name ? (
+            <fbt desc="Post author">
+              by <fbt:param name="author">{author.name}</fbt:param>
+            </fbt>
+          ) : (
+            <fbt desc="Anonymous post author">By an anonymous collaborator</fbt>
+          )}
         </span>
         {tags.length ? (
           <Stack gap wrap>
@@ -82,7 +94,11 @@ export default function CategoryCard({ category: categoryRef }: { category: View
             <p className="text-sm text-muted-foreground">{category.description}</p>
           </div>
           <Badge className="text-nowrap" variant="outline">
-            {category.postCount} posts
+            <fbt desc="Category post count">
+              <fbt:plural count={category.postCount} many="posts" showCount="yes">
+                post
+              </fbt:plural>
+            </fbt>{' '}
           </Badge>
         </Stack>
         <VStack gap={12}>
@@ -92,7 +108,9 @@ export default function CategoryCard({ category: categoryRef }: { category: View
         </VStack>
         {category.posts?.pagination?.hasNext ? (
           <span className="text-sm text-muted-foreground">
-            More posts available in this category...
+            <fbt desc="CategoryCard: More posts available in this category...">
+              More posts available in this category...
+            </fbt>{' '}
           </span>
         ) : null}
       </VStack>

package/templates/fate/void/src/ui/CreatePost.tsx

@@ -1,4 +1,5 @@
 import Stack, { VStack } from '@nkzw/stack';
+import { fbs } from 'fbtee';
 import { KeyboardEvent, startTransition, useActionState, useState } from 'react';
 import { useFateClient, useView, ViewRef } from 'react-fate';
 import { Button } from '../ui/Button.tsx';
@@ -64,13 +65,15 @@ export default function CreatePost({ user: userRef }: { user: ViewRef<'User'> |
   return (
     <Card>
       <VStack action={createPost} as="form" gap={16}>
-        <H3>Create a Post</H3>
+        <H3>
+          <fbt desc="CreatePost: Create a Post">Create a Post</fbt>
+        </H3>
         <Input
           className="w-full"
           disabled={isPending}
           onChange={(event) => setTitleValue(event.target.value)}
           onKeyDown={maybeSubmitPost}
-          placeholder="Post Title"
+          placeholder={fbs('Post Title', 'CreatePost: placeholder')}
           value={titleValue}
         />
         <textarea
@@ -78,18 +81,20 @@ export default function CreatePost({ user: userRef }: { user: ViewRef<'User'> |
           disabled={isPending}
           onChange={(event) => setContentValue(event.target.value)}
           onKeyDown={maybeSubmitPost}
-          placeholder={'Share your thoughts about fate...'}
+          placeholder={fbs('Share your thoughts about fate...', 'CreatePost: placeholder')}
           value={contentValue}
         />
         <Stack alignCenter between className="text-sm" gap={16}>
-          <span className="font-bold">Mutation Debug Options</span>
+          <span className="font-bold">
+            <fbt desc="CreatePost: Mutation Debug Options">Mutation Debug Options</fbt>
+          </span>
           <Stack alignCenter as="label" gap>
             <CheckBox
               checked={missingMutationSelection}
               disabled={isPending}
               onChange={(event) => setMissingMutationSelection(event.target.checked)}
             />
-            Missing mutation selection
+            <fbt desc="CreatePost: Missing mutation selection">Missing mutation selection</fbt>{' '}
           </Stack>
           <Stack alignCenter as="label" gap>
             <CheckBox
@@ -97,12 +102,12 @@ export default function CreatePost({ user: userRef }: { user: ViewRef<'User'> |
               disabled={isPending}
               onChange={(event) => setMissingOptimisticContent(event.target.checked)}
             />
-            Missing optimistic content
+            <fbt desc="CreatePost: Missing optimistic content">Missing optimistic content</fbt>{' '}
           </Stack>
         </Stack>
         <Stack alignCenter end gap={16}>
           <Button disabled={postingIsDisabled} size="sm" type="submit" variant="secondary">
-            Post comment
+            <fbt desc="Post comment button">Post comment</fbt>{' '}
           </Button>
         </Stack>
       </VStack>