create-fate 1.3.3 → 1.5.0

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>
+  );
+}

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

@@ -1,6 +1,7 @@
 import Stack, { VStack } from '@nkzw/stack';
 import { useShared } from '@void/react';
 import { cx } from 'class-variance-authority';
+import { fbs } from 'fbtee';
 import {
   KeyboardEvent,
   Suspense,
@@ -79,7 +80,7 @@ const PostComments = ({
       ))}
       {loadNext ? (
         <Button onClick={loadNext} variant="ghost">
-          Load more comments
+          <fbt desc="Load more comments button">Load more comments</fbt>{' '}
         </Button>
       ) : null}
     </VStack>
@@ -136,25 +137,29 @@ const CommentInput = ({
 
   return (
     <VStack action={addComment} as="form" gap>
-      <span className="text-sm font-medium text-foreground">Add a comment</span>
+      <span className="text-sm font-medium text-foreground">
+        <fbt desc="Comment add label">Add a comment</fbt>
+      </span>
       <textarea
         className="squircle min-h-20 w-full border border-gray-200/80 bg-gray-100/50 p-3 text-sm placeholder-gray-500 transition outline-none focus:border-gray-500 focus:ring-2 focus:ring-gray-200 disabled:opacity-50 dark:border-neutral-800 dark:bg-neutral-900/40 dark:placeholder-gray-400"
         disabled={isPending}
         onChange={(event) => setCommentText(event.target.value)}
         onKeyDown={maybeSubmitComment}
-        placeholder={user?.name ? `Share your thoughts, ${user.name}!` : 'Share your thoughts...'}
+        placeholder={fbs('Share your thoughts...', 'Placeholder text for comment input')}
         value={commentText}
       />
       {anyServerError ? (
         <p className="text-sm text-destructive">
-          {anyServerError instanceof Error
-            ? anyServerError.message
-            : 'Something went wrong. Please try again.'}
+          {anyServerError instanceof Error ? (
+            anyServerError.message
+          ) : (
+            <fbt desc="Error text">Something went wrong. Please try again.</fbt>
+          )}
         </p>
       ) : null}
       <Stack end gap>
         <Button disabled={commentingIsDisabled} size="sm" type="submit" variant="secondary">
-          Post comment
+          <fbt desc="Post comment button">Post comment</fbt>{' '}
         </Button>
       </Stack>
     </VStack>
@@ -237,7 +242,7 @@ export function PostCard({ detail, post: postRef }: { detail?: boolean; post: Vi
               </span>
             </Stack>
             <Button action={handleLike} disabled={likeIsPending} size="sm" variant="outline">
-              Like
+              <fbt desc="Like button">Like</fbt>{' '}
             </Button>
             {detail && (
               <Button
@@ -246,7 +251,7 @@ export function PostCard({ detail, post: postRef }: { detail?: boolean; post: Vi
                 size="sm"
                 variant="outline"
               >
-                Like (Slow)
+                <fbt desc="Like button with a slow request">Like (Slow)</fbt>{' '}
               </Button>
             )}
             {detail && (
@@ -260,7 +265,11 @@ export function PostCard({ detail, post: postRef }: { detail?: boolean; post: Vi
                 size="sm"
                 variant="outline"
               >
-                {likeResult?.error ? 'Oops, try again!' : `Like (Error)`}
+                {likeResult?.error ? (
+                  <fbt desc="Very short error messages">Oops, try again!</fbt>
+                ) : (
+                  <fbt desc="Like button that triggers an error">Like (Error)</fbt>
+                )}
               </Button>
             )}
             {detail && (
@@ -270,7 +279,9 @@ export function PostCard({ detail, post: postRef }: { detail?: boolean; post: Vi
                 size="sm"
                 variant="outline"
               >
-                Like (Network Error)
+                <fbt desc="Like button that triggers a network error">
+                  Like (Network Error)
+                </fbt>{' '}
               </Button>
             )}
             {detail && (
@@ -285,7 +296,7 @@ export function PostCard({ detail, post: postRef }: { detail?: boolean; post: Vi
                 size="sm"
                 variant="outline"
               >
-                Like (Many)
+                <fbt desc="Like button that can be pressed many times">Like (Many)</fbt>{' '}
               </Button>
             )}
             <Button
@@ -294,7 +305,7 @@ export function PostCard({ detail, post: postRef }: { detail?: boolean; post: Vi
               size="sm"
               variant="outline"
             >
-              Unlike
+              <fbt desc="Unlike button">Unlike</fbt>{' '}
             </Button>
           </Stack>
         </Stack>
@@ -302,7 +313,11 @@ export function PostCard({ detail, post: postRef }: { detail?: boolean; post: Vi
         <p className="text-sm text-muted-foreground">- {author?.name ?? 'Unknown author'}</p>
         <VStack gap={16}>
           <h4 className="text-base font-semibold text-foreground">
-            {post.commentCount} {post.commentCount === 1 ? 'Comment' : 'Comments'}
+            <fbt desc="Comment headline">
+              <fbt:plural count={post.commentCount} many="Comments" showCount="ifMany">
+                One Comment
+              </fbt:plural>
+            </fbt>
           </h4>
           <Suspense fallback={null}>
             <PostComments comments={post.comments} post={post} />

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

@@ -1,5 +1,6 @@
 import safeParse from '@nkzw/core/safeParse.js';
 import Stack, { VStack } from '@nkzw/stack';
+import { fbs } from 'fbtee';
 import { ChangeEvent, useActionState, useState } from 'react';
 import { useFateClient, useView, view, ViewRef } from 'react-fate';
 import { User } from '../fate/server.ts';
@@ -68,7 +69,7 @@ const UserNameForm = ({ user }: { user: SessionUser }) => {
         (error instanceof Error &&
           error.message &&
           safeParse<Array<{ message: string }>>(error.message)?.[0]?.message) ||
-          'Failed to update user name.',
+          fbs('Failed to update user name.', 'User name update error'),
       );
     }
   }, null);
@@ -80,9 +81,11 @@ const UserNameForm = ({ user }: { user: SessionUser }) => {
   return (
     <div>
       <VStack action={submitAction} as="form" gap={12}>
-        <h3 className="font-semibold">Update Name</h3>
+        <h3 className="font-semibold">
+          <fbt desc="Headline for update name section">Update Name</fbt>
+        </h3>
         <label className="sr-only" htmlFor="header-username">
-          Username
+          <fbt desc="Username label">Username</fbt>{' '}
         </label>
         <Input
           aria-describedby={error ? 'header-username-error' : undefined}
@@ -92,13 +95,13 @@ const UserNameForm = ({ user }: { user: SessionUser }) => {
           id="header-username"
           name="name"
           onChange={handleChange}
-          placeholder="Name"
+          placeholder={fbs('Name', 'UserCard: placeholder')}
           title={error ?? undefined}
           value={name}
         />
         <div>
           <Button disabled={isSaveDisabled} size="sm" type="submit" variant="secondary">
-            Save
+            <fbt desc="Button for saving">Save</fbt>{' '}
           </Button>
         </div>
       </VStack>
@@ -114,11 +117,15 @@ export default function UserCard({ viewer: viewerRef }: { viewer: ViewRef<'User'
     <Card>
       <VStack between className="h-full" gap={16}>
         <VStack gap={16}>
-          <H2>Your account</H2>
+          <H2>
+            <fbt desc="Your account headline">Your account</fbt>
+          </H2>
           <Stack alignCenter between gap={16}>
             <p className="text-sm text-muted-foreground">
-              Signed in as {viewer.name}
-              {viewer.email ? ` <${viewer.email}>` : null}.
+              <fbt desc="Signed in user">
+                Signed in as <fbt:param name="name">{viewer.name}</fbt:param>
+                <fbt:param name="email">{viewer.email ? ` <${viewer.email}>` : ''}</fbt:param>.
+              </fbt>
             </p>
           </Stack>
         </VStack>