create-fate 1.4.0 → 1.5.0

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"
   },
@@ -30,6 +34,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "drizzle-orm": "^0.45.2",
+    "fbtee": "^4.0.0",
     "lucide-react": "^1.34.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
@@ -43,7 +48,9 @@
   "devDependencies": {
     "@cloudflare/workers-types": "4.20260702.1",
     "@nkzw/eslint-plugin": "^2.0.0",
+    "@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",

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(
@@ -66,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}
@@ -78,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} />
@@ -90,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} />
@@ -115,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>
@@ -132,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/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>

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

@@ -4,14 +4,16 @@ export default function Error({ error: initialError }: { error: unknown }) {
   const error = initialError instanceof Error ? (initialError as Error) : null;
   return (
     <VStack gap={12}>
-      <h3 className="text-xl font-semibold text-red-700">Error</h3>
+      <h3 className="text-xl font-semibold text-red-700">
+        <fbt desc="Error: Error">Error</fbt>
+      </h3>
       <code>{error ? error.stack || `fate Error: ${error.message}` : String(initialError)}</code>
       <div>
         <a
           className="cursor-pointer underline decoration-gray-300 hover:no-underline"
           onClick={() => window.location.reload()}
         >
-          Try again
+          <fbt desc="Try again button">Try again</fbt>{' '}
         </a>
       </div>
     </VStack>

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

@@ -1,4 +1,5 @@
 import Stack, { VStack } from '@nkzw/stack';
+import { fbs } from 'fbtee';
 import { ArrowUpRight, CalendarDays, MapPin, Users } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { useView, view, ViewRef } from 'react-fate';
@@ -41,7 +42,7 @@ const EventAttendeeChip = ({ attendee: attendeeRef }: { attendee: ViewRef<'Event
 
   return (
     <Badge className="text-nowrap" key={attendee.id} variant="outline">
-      {user?.name ?? 'Guest'} · {formatLabel(attendee.status)}
+      {user?.name ?? fbs('Guest', 'Unnamed event attendee')} · {formatLabel(attendee.status)}
     </Badge>
   );
 };
@@ -110,12 +111,22 @@ export default function EventCard({ event: eventRef }: { event: ViewRef<'Event'>
         <Stack alignCenter gap>
           <Users className="text-muted-foreground" size={14} />
           <span className="text-sm text-foreground/80">
-            {event.attendingCount ?? attendees.length} attending · capacity {event.capacity}
+            <fbt desc="Event attendance and capacity">
+              <fbt:param name="attending">{event.attendingCount ?? attendees.length}</fbt:param>{' '}
+              attending · capacity <fbt:param name="capacity">{event.capacity}</fbt:param>
+            </fbt>
           </span>
         </Stack>
         <Stack alignCenter gap>
           <ArrowUpRight className="text-muted-foreground" size={14} />
-          <span className="text-sm text-foreground/80">Hosted by {host?.name ?? 'Unknown'}</span>
+          <span className="text-sm text-foreground/80">
+            <fbt desc="Event host">
+              Hosted by{' '}
+              <fbt:param name="host">
+                {host?.name ?? fbs('Unknown', 'Unknown event host')}
+              </fbt:param>
+            </fbt>
+          </span>
         </Stack>
         {topics.length ? (
           <Stack gap wrap>
@@ -128,7 +139,9 @@ export default function EventCard({ event: eventRef }: { event: ViewRef<'Event'>
         ) : null}
         {attendees.length ? (
           <VStack gap>
-            <span className="text-xs text-muted-foreground">Community RSVPs</span>
+            <span className="text-xs text-muted-foreground">
+              <fbt desc="EventCard: Community RSVPs">Community RSVPs</fbt>
+            </span>
             <Stack gap wrap>
               {attendees.slice(0, 4).map(({ node }) => (
                 <EventAttendeeChip attendee={node} key={node.id} />
@@ -143,7 +156,7 @@ export default function EventCard({ event: eventRef }: { event: ViewRef<'Event'>
             rel="noreferrer"
             target="_blank"
           >
-            Join livestream
+            <fbt desc="EventCard: Join livestream">Join livestream</fbt>{' '}
           </a>
         ) : null}
       </VStack>

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

@@ -5,6 +5,7 @@ import type { SharedData } from '../lib/shared.ts';
 import AuthClient from '../user/AuthClient.tsx';
 import { Button } from './Button.tsx';
 import Link from './Link.tsx';
+import LocaleSwitcher from './LocaleSwitcher.tsx';
 
 export default function Header() {
   const router = useRouter();
@@ -51,16 +52,19 @@ export default function Header() {
                 <span className="italic">fate</span>
               </span>
               <p className="hidden text-xs text-muted-foreground sm:block">
-                A modern data client for React.
+                <fbt desc="fate library tagline">A modern data client for React.</fbt>{' '}
               </p>
             </div>
           </Stack>
         </Link>
         <Stack alignCenter>
+          <LocaleSwitcher />
           <Button asChild size="sm" variant="ghost">
             <Link href="/search">
               <Search className="h-4 w-4" />
-              <span className="hidden sm:inline">Search</span>
+              <span className="hidden sm:inline">
+                <fbt desc="Search button">Search</fbt>
+              </span>
             </Link>
           </Button>
           <div className="flex w-9 justify-end sm:w-24">
@@ -78,13 +82,15 @@ export default function Header() {
                   }}
                 >
                   <LogOut className="h-4 w-4" />
-                  <span className="hidden sm:inline">Logout</span>
+                  <span className="hidden sm:inline">
+                    <fbt desc="Logout button">Logout</fbt>
+                  </span>
                 </Stack>
               </Button>
             ) : (
               <Button asChild className="w-full" size="sm" variant="ghost">
                 <Link href="/login">
-                  <LogIn className="h-4 w-4" /> Login
+                  <LogIn className="h-4 w-4" /> <fbt desc="Login button">Login</fbt>{' '}
                 </Link>
               </Button>
             )}

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

@@ -0,0 +1,34 @@
+import { useLocaleContext } from 'fbtee';
+import { startTransition } from 'react';
+import AvailableLanguages from '../lib/AvailableLanguages.tsx';
+
+export default function LocaleSwitcher() {
+  const { locale, localeChangeIsPending, setLocale } = useLocaleContext();
+  return (
+    <label className="inline-flex items-center gap-2 text-sm">
+      <span className="sr-only">
+        <fbt desc="Locale switcher button">Change Language</fbt>
+      </span>
+      <select
+        className="rounded-md border border-gray-300 bg-background px-2 py-1 text-foreground"
+        disabled={localeChangeIsPending}
+        onChange={(event) => {
+          const nextLocale = event.target.value;
+          try {
+            localStorage.setItem('fbtee:locale', nextLocale);
+          } catch {
+            // Changing the language still works without browser storage.
+          }
+          startTransition(() => setLocale(nextLocale));
+        }}
+        value={locale}
+      >
+        {[...AvailableLanguages].map(([value, name]) => (
+          <option key={value} value={value}>
+            {name}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}