jake/sofa
1
Fork 0
mirror of https://github.com/jakejarvis/sofa.git synced 2026-07-14 18:15:56 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(i18n): comprehensive audit of translated strings across web and native

Browse Source 
- Replace hand-rolled pluralization (ternary suffix hacks) with `plural` macro
- Wrap 40+ untranslated user-facing strings with LingUI macros: aria-labels,
  accessibilityLabels/Hints, placeholders, error fallbacks, toast overrides
- Unify episode progress format to `${watched}/${plural(total, ...)}` across
  all 4 call sites (title-card, continue-watching, season-accordion)
- Unify capitalization: "Sign in", "Sign out", "Create account",
  "Change password", "Update password", "Image cache", "Remove from library",
  "Mark Watched", "Trending Today", "On Watchlist", "or"
- Translate cron schedule strings in system health via `i18n._(msg)` with
  locale-aware day names via `Intl.DateTimeFormat`
- Move Zod validation schemas inside components with `useMemo(() => ..., [t])`
  so validation messages are translatable at runtime
- Unify "Watched all of" variable naming to `seasonLabel` across all call
  sites to produce a single msgid
- Remove trailing period from lone "Failed to..." error message
- Add EAS build i18n template extraction step

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
jake
2026-03-23 16:21:54 -04:00
co-authored by Claude Opus 4.6
parent b289b7abed
commit eb9c7ae6df
35 changed files with 489 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/eas-build.yml
+3
View File
@@ -47,6 +47,9 @@ jobs:
- name: Install dependencies
run: bun install --frozen-lockfile
- name: Extract i18n template
run: bunx lingui extract-template
- name: Build
working-directory: apps/native
run: eas build --platform ${{ inputs.platform || 'all' }} --profile ${{ inputs.profile || 'production' }} --non-interactive --no-wait
.gitignore
+1
View File
@@ -50,6 +50,7 @@ coverage
tmp
temp
crowdin-context.jsonl
messages.pot
# local data
*.db
apps/native/src/app/(auth)/login.tsx
+18 -10
View File
@@ -3,7 +3,7 @@ import { IconServer2 } from "@tabler/icons-react-native";
import { useForm, useStore } from "@tanstack/react-form";
import { useQuery } from "@tanstack/react-query";
import { Link } from "expo-router";
import { useRef, useState } from "react";
import { useMemo, useRef, useState } from "react";
import { Pressable, type TextInput, View } from "react-native";
import Animated, { FadeIn, FadeInDown } from "react-native-reanimated";
import { useCSSVariable } from "uniwind";
@@ -22,13 +22,21 @@ import { toast } from "@/lib/toast";
import { getFormErrors } from "@/utils/form-errors";
import * as Haptics from "@/utils/haptics";
const signInSchema = z.object({
email: z.string().trim().min(1, "Email is required").email("Enter a valid email address"),
password: z.string().min(1, "Password is required"),
});
export default function LoginScreen() {
const { t } = useLingui();
const signInSchema = useMemo(
() =>
z.object({
email: z
.string()
.trim()
.min(1, t`Email is required`)
.email(t`Enter a valid email address`),
password: z.string().min(1, t`Password is required`),
}),
[t],
);
const passwordRef = useRef<TextInput>(null);
const [errorFields, setErrorFields] = useState<Set<string>>(new Set());
const [isSignedIn, setIsSignedIn] = useState(false);
@@ -108,7 +116,7 @@ export default function LoginScreen() {
<View className="my-4 flex-row items-center">
<View className="bg-border h-px flex-1" />
<Text className="text-muted-foreground px-3 text-xs">
<Trans>OR</Trans>
<Trans>or</Trans>
</Text>
<View className="bg-border h-px flex-1" />
</View>
@@ -128,7 +136,7 @@ export default function LoginScreen() {
</Label>
<Input
value={field.state.value}
accessibilityLabel="Email"
accessibilityLabel={t`Email`}
onBlur={field.handleBlur}
onChangeText={(text) => {
field.handleChange(text);
@@ -159,7 +167,7 @@ export default function LoginScreen() {
<Input
ref={passwordRef}
value={field.state.value}
accessibilityLabel="Password"
accessibilityLabel={t`Password`}
onBlur={field.handleBlur}
onChangeText={(text) => {
field.handleChange(text);
@@ -184,7 +192,7 @@ export default function LoginScreen() {
<Spinner size="sm" />
) : (
<ButtonLabel>
<Trans>Sign In</Trans>
<Trans>Sign in</Trans>
</ButtonLabel>
)}
</Button>
apps/native/src/app/(auth)/register.tsx
+28 -13
View File
@@ -2,7 +2,7 @@ import { Trans, useLingui } from "@lingui/react/macro";
import { useForm, useStore } from "@tanstack/react-form";
import { useQuery } from "@tanstack/react-query";
import { Link } from "expo-router";
import { useRef, useState } from "react";
import { useMemo, useRef, useState } from "react";
import { Pressable, type TextInput, View } from "react-native";
import Animated, { FadeIn, FadeInDown } from "react-native-reanimated";
import { z } from "zod";
@@ -19,14 +19,29 @@ import { toast } from "@/lib/toast";
import { getFormErrors } from "@/utils/form-errors";
import * as Haptics from "@/utils/haptics";
const signUpSchema = z.object({
name: z.string().trim().min(1, "Name is required").min(2, "Name must be at least 2 characters"),
email: z.string().trim().min(1, "Email is required").email("Enter a valid email address"),
password: z.string().min(1, "Password is required").min(8, "Use at least 8 characters"),
});
export default function RegisterScreen() {
const { t } = useLingui();
const signUpSchema = useMemo(
() =>
z.object({
name: z
.string()
.trim()
.min(1, t`Name is required`)
.min(2, t`Name must be at least 2 characters`),
email: z
.string()
.trim()
.min(1, t`Email is required`)
.email(t`Enter a valid email address`),
password: z
.string()
.min(1, t`Password is required`)
.min(8, t`Use at least 8 characters`),
}),
[t],
);
const emailRef = useRef<TextInput>(null);
const passwordRef = useRef<TextInput>(null);
const [errorFields, setErrorFields] = useState<Set<string>>(new Set());
@@ -101,7 +116,7 @@ export default function RegisterScreen() {
}
return (
<AuthScreen title={t`Create Account`} subtitle={t`Registering on ${serverHost}`}>
<AuthScreen title={t`Create account`} subtitle={t`Registering on ${serverHost}`}>
<View className="gap-3">
<Animated.View entering={FadeInDown.duration(300).delay(100)}>
<form.Field name="name">
@@ -112,7 +127,7 @@ export default function RegisterScreen() {
</Label>
<Input
value={field.state.value}
accessibilityLabel="Name"
accessibilityLabel={t`Name`}
onBlur={field.handleBlur}
onChangeText={(text) => {
field.handleChange(text);
@@ -141,13 +156,13 @@ export default function RegisterScreen() {
<Input
ref={emailRef}
value={field.state.value}
accessibilityLabel="Email"
accessibilityLabel={t`Email`}
onBlur={field.handleBlur}
onChangeText={(text) => {
field.handleChange(text);
clearFieldError("email");
}}
placeholder="email@example.com"
placeholder="wwhite@graymatter.biz"
keyboardType="email-address"
autoCapitalize="none"
autoComplete="email"
@@ -172,7 +187,7 @@ export default function RegisterScreen() {
<Input
ref={passwordRef}
value={field.state.value}
accessibilityLabel="Password"
accessibilityLabel={t`Password`}
onBlur={field.handleBlur}
onChangeText={(text) => {
field.handleChange(text);
@@ -197,7 +212,7 @@ export default function RegisterScreen() {
<Spinner size="sm" />
) : (
<ButtonLabel>
<Trans>Create Account</Trans>
<Trans>Create account</Trans>
</ButtonLabel>
)}
</Button>
apps/native/src/app/(auth)/server-url.tsx
+2 -2
View File
@@ -136,8 +136,8 @@ export default function ServerUrlScreen() {
<Input
ref={inputRef}
value={url}
accessibilityLabel="Server URL"
accessibilityHint="Enter the full URL for your Sofa server"
accessibilityLabel={t`Server URL`}
accessibilityHint={t`Enter the full URL for your Sofa server`}
onChangeText={handleChangeText}
placeholder="https://sofa.example.com"
placeholderTextColorClassName="accent-muted-foreground/50"
apps/native/src/app/(tabs)/(home)/index.tsx
+1 -1
View File
@@ -142,7 +142,7 @@ export default function DashboardScreen() {
</View>
<View className="flex-row gap-3">
<StatsCard
label={t`In library`}
label={t`In Library`}
value={stats.data?.librarySize}
icon={IconBooks}
color="text-status-watchlist"
apps/native/src/app/(tabs)/(settings)/index.tsx
+10 -10
View File
@@ -204,10 +204,10 @@ export default function SettingsScreen() {
}, []);
const handleSignOut = () => {
Alert.alert(t`Sign Out`, t`Are you sure you want to sign out?`, [
Alert.alert(t`Sign out`, t`Are you sure you want to sign out?`, [
{ text: t`Cancel`, style: "cancel" },
{
text: t`Sign Out`,
text: t`Sign out`,
style: "destructive",
onPress: () => {
authClient.signOut();
@@ -234,8 +234,8 @@ export default function SettingsScreen() {
<DropdownMenu.Trigger asChild>
<Pressable
accessibilityRole="button"
accessibilityLabel="Edit profile photo"
accessibilityHint="Opens options to change or remove your photo"
accessibilityLabel={t`Edit profile photo`}
accessibilityHint={t`Opens options to change or remove your photo`}
className="mr-3"
hitSlop={8}
>
@@ -280,7 +280,7 @@ export default function SettingsScreen() {
<Pressable
onPress={pickAvatar}
accessibilityRole="button"
accessibilityLabel="Add profile photo"
accessibilityLabel={t`Add profile photo`}
className="mr-3"
hitSlop={8}
>
@@ -307,7 +307,7 @@ export default function SettingsScreen() {
<View className="flex-row items-center gap-2">
<TextInput
value={nameInput}
accessibilityLabel="Display name"
accessibilityLabel={t`Display name`}
onChangeText={setNameInput}
className="border-primary text-foreground min-h-10 flex-1 border-b py-2 font-sans text-base"
/>
@@ -396,7 +396,7 @@ export default function SettingsScreen() {
right={
<Switch
value={analyticsEnabled}
accessibilityLabel="Anonymous usage reporting"
accessibilityLabel={t`Anonymous usage reporting`}
onValueChange={(enabled) => {
setAnalyticsToggle(enabled);
setAnalyticsEnabled(enabled);
@@ -440,7 +440,7 @@ export default function SettingsScreen() {
icon={IconCloud}
/>
<SettingsRow
label={t`Image Cache`}
label={t`Image cache`}
value={
systemHealth.data?.imageCache
? plural(systemHealth.data.imageCache.imageCount, {
@@ -467,7 +467,7 @@ export default function SettingsScreen() {
right={
<Switch
value={registration.data?.open ?? false}
accessibilityLabel="Open registration"
accessibilityLabel={t`Open registration`}
onValueChange={(open) => toggleRegistration.mutate({ open })}
/>
}
@@ -478,7 +478,7 @@ export default function SettingsScreen() {
right={
<Switch
value={updateCheck.data?.enabled ?? false}
accessibilityLabel="Check for updates"
accessibilityLabel={t`Check for updates`}
onValueChange={(enabled) => toggleUpdateCheck.mutate({ enabled })}
/>
}
apps/native/src/app/change-password.tsx
+22 -18
View File
@@ -1,7 +1,7 @@
import { Trans, useLingui } from "@lingui/react/macro";
import { useForm } from "@tanstack/react-form";
import { Stack, useRouter } from "expo-router";
import { useRef, useState } from "react";
import { useMemo, useRef, useState } from "react";
import { Alert, ScrollView, type TextInput, View } from "react-native";
import Animated, { FadeInDown } from "react-native-reanimated";
import { useResolveClassNames } from "uniwind";
@@ -16,17 +16,6 @@ import { authClient } from "@/lib/server";
import { toast } from "@/lib/toast";
import * as Haptics from "@/utils/haptics";
const changePasswordSchema = z
.object({
currentPassword: z.string().min(1, "Current password is required"),
newPassword: z.string().min(8, "Password must be at least 8 characters"),
confirmPassword: z.string().min(1, "Please confirm your password"),
})
.refine((data) => data.newPassword === data.confirmPassword, {
message: "Passwords do not match",
path: ["confirmPassword"],
});
function formatFormErrors(errors: unknown): string | null {
if (!errors) return null;
if (typeof errors === "string") return errors;
@@ -41,6 +30,21 @@ function formatFormErrors(errors: unknown): string | null {
export default function ChangePasswordScreen() {
const { t } = useLingui();
const changePasswordSchema = useMemo(
() =>
z
.object({
currentPassword: z.string().min(1, t`Current password is required`),
newPassword: z.string().min(8, t`Password must be at least 8 characters`),
confirmPassword: z.string().min(1, t`Please confirm your password`),
})
.refine((data) => data.newPassword === data.confirmPassword, {
message: t`Passwords do not match`,
path: ["confirmPassword"],
}),
[t],
);
const { back } = useRouter();
const newPasswordRef = useRef<TextInput>(null);
const confirmPasswordRef = useRef<TextInput>(null);
@@ -91,7 +95,7 @@ export default function ChangePasswordScreen() {
keyboardShouldPersistTaps="handled"
>
<Stack.Screen.Title style={headerTitleStyle as Record<string, unknown>}>
<Trans>Change Password</Trans>
<Trans>Change password</Trans>
</Stack.Screen.Title>
<form.Subscribe
@@ -117,7 +121,7 @@ export default function ChangePasswordScreen() {
</Label>
<Input
value={field.state.value}
accessibilityLabel="Current password"
accessibilityLabel={t`Current password`}
onBlur={field.handleBlur}
onChangeText={field.handleChange}
placeholder="••••••••"
@@ -143,7 +147,7 @@ export default function ChangePasswordScreen() {
<Input
ref={newPasswordRef}
value={field.state.value}
accessibilityLabel="New password"
accessibilityLabel={t`New password`}
onBlur={field.handleBlur}
onChangeText={field.handleChange}
placeholder="••••••••"
@@ -169,7 +173,7 @@ export default function ChangePasswordScreen() {
<Input
ref={confirmPasswordRef}
value={field.state.value}
accessibilityLabel="Confirm new password"
accessibilityLabel={t`Confirm new password`}
onBlur={field.handleBlur}
onChangeText={field.handleChange}
placeholder="••••••••"
@@ -195,7 +199,7 @@ export default function ChangePasswordScreen() {
<Switch
value={revokeOtherSessions}
onValueChange={setRevokeOtherSessions}
accessibilityLabel="Sign out of other sessions"
accessibilityLabel={t`Sign out of other sessions`}
/>
</Animated.View>
@@ -209,7 +213,7 @@ export default function ChangePasswordScreen() {
<Spinner size="sm" />
) : (
<ButtonLabel>
<Trans>Update Password</Trans>
<Trans>Update password</Trans>
</ButtonLabel>
)}
</Button>
apps/native/src/app/title/[id].tsx
+6 -3
View File
@@ -115,7 +115,10 @@ export default function TitleDetailScreen() {
quickAdd: quickAddMutation,
} = useTitleActions({
toasts: {
watchMovie: () => (title?.title ? `Marked "${title.title}" as watched` : "Marked as watched"),
watchMovie: () => {
const name = title?.title;
return name ? t`Marked "${name}" as watched` : t`Marked as watched`;
},
},
});
@@ -315,8 +318,8 @@ export default function TitleDetailScreen() {
)
}
accessibilityRole="button"
accessibilityLabel={`Play trailer for ${title.title}`}
accessibilityHint="Opens the trailer in YouTube"
accessibilityLabel={t`Play trailer for ${titleName}`}
accessibilityHint={t`Opens the trailer in YouTube`}
className="absolute inset-0 items-center justify-center"
>
{isLiquidGlassAvailable() ? (
apps/native/src/components/dashboard/continue-watching-card.tsx
+8 -5
View File
@@ -1,3 +1,4 @@
import { plural } from "@lingui/core/macro";
import { useLingui } from "@lingui/react/macro";
import { Link } from "expo-router";
import { memo } from "react";
@@ -36,10 +37,12 @@ export const ContinueWatchingCard = memo(function ContinueWatchingCard({
const { t } = useLingui();
const { animatedStyle, gesture: tapGesture } = usePressAnimation();
const progressLabel = `${item.watchedEpisodes} of ${item.totalEpisodes} episodes`;
const nextEpLabel = item.nextEpisode
? `Next: Season ${item.nextEpisode.seasonNumber} Episode ${item.nextEpisode.episodeNumber}`
: undefined;
const watchedEpisodes = item.watchedEpisodes;
const totalEpisodes = item.totalEpisodes;
const progressLabel = t`${watchedEpisodes}/${plural(totalEpisodes, { one: "# episode", other: "# episodes" })}`;
const seasonNum = item.nextEpisode?.seasonNumber;
const epNum = item.nextEpisode?.episodeNumber;
const nextEpLabel = item.nextEpisode ? t`Next: S${seasonNum} E${epNum}` : undefined;
const cardLabel = [item.title.title, progressLabel, nextEpLabel].filter(Boolean).join(", ");
return (
@@ -105,7 +108,7 @@ export const ContinueWatchingCard = memo(function ContinueWatchingCard({
<Link.Preview />
<Link.Menu>
<Link.MenuAction
title={t`Remove from Library`}
title={t`Remove from library`}
icon="trash"
destructive
onPress={() => titleActions.removeFromLibrary(item.title.id)}
apps/native/src/components/dashboard/upcoming-row.tsx
+2 -2
View File
@@ -128,7 +128,7 @@ export function UpcomingRow({ item }: { item: UpcomingItem }) {
<Link.Menu>
{item.titleType === "movie" && (
<Link.MenuAction
title={t`Mark as Watched`}
title={t`Mark Watched`}
icon="checkmark.circle"
onPress={() => titleActions.markMovieWatched(item.titleId, item.titleName)}
/>
@@ -141,7 +141,7 @@ export function UpcomingRow({ item }: { item: UpcomingItem }) {
/>
)}
<Link.MenuAction
title={t`Remove from Library`}
title={t`Remove from library`}
icon="trash"
destructive
onPress={() => titleActions.removeFromLibrary(item.titleId)}
apps/native/src/components/explore/hero-banner.tsx
+1 -1
View File
@@ -55,7 +55,7 @@ export function HeroBanner({ item }: { item: HeroBannerItem }) {
<Pressable
accessibilityRole="button"
accessibilityLabel={accessibilityLabel}
accessibilityHint="Opens title details"
accessibilityHint={t`Opens title details`}
style={{ flex: 1 }}
>
{item.backdropPath && (
apps/native/src/components/header-avatar.tsx
+3 -3
View File
@@ -24,7 +24,7 @@ export function HeaderAvatar() {
<Pressable
onPress={() => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}
accessibilityRole="button"
accessibilityLabel="User menu"
accessibilityLabel={t`User menu`}
hitSlop={8}
>
<View className="size-8 overflow-hidden rounded-full" accessible={false}>
@@ -59,10 +59,10 @@ export function HeaderAvatar() {
key="sign-out"
destructive
onSelect={() => {
Alert.alert(t`Sign Out`, t`Are you sure you want to sign out?`, [
Alert.alert(t`Sign out`, t`Are you sure you want to sign out?`, [
{ text: t`Cancel`, style: "cancel" },
{
text: t`Sign Out`,
text: t`Sign out`,
style: "destructive",
onPress: () => {
authClient.signOut();
apps/native/src/components/titles/season-accordion.tsx
+12 -4
View File
@@ -78,13 +78,21 @@ export function SeasonAccordion({
toasts: {
watchEpisode: ({ id: epId }) => {
const ep = episodes.find((e) => e.id === epId);
return ep ? `Watched S${season.seasonNumber} E${ep.episodeNumber}` : "Episode watched";
const sNum = season.seasonNumber;
const eNum = ep?.episodeNumber;
return ep ? t`Watched S${sNum} E${eNum}` : t`Episode watched`;
},
unwatchEpisode: ({ id: epId }) => {
const ep = episodes.find((e) => e.id === epId);
return ep ? `Unwatched S${season.seasonNumber} E${ep.episodeNumber}` : "Episode unwatched";
const sNum = season.seasonNumber;
const eNum = ep?.episodeNumber;
return ep ? t`Unwatched S${sNum} E${eNum}` : t`Episode unwatched`;
},
watchSeason: `Watched all of ${season.name ?? `Season ${season.seasonNumber}`}`,
watchSeason: (() => {
const sn = season.seasonNumber;
const seasonLabel = season.name ?? t`Season ${sn}`;
return t`Watched all of ${seasonLabel}`;
})(),
},
});
@@ -113,7 +121,7 @@ export function SeasonAccordion({
<Pressable
onPress={toggleExpanded}
accessibilityRole="button"
accessibilityLabel={`${season.name ?? t`Season ${seasonNumber}`}, ${t`${watchedCount} of ${episodeCount} episodes watched`}`}
accessibilityLabel={`${season.name ?? t`Season ${seasonNumber}`}, ${t`${watchedCount}/${plural(episodeCount, { one: "# episode", other: "# episodes" })}`}`}
accessibilityState={{ expanded }}
className="flex-row items-center justify-between p-4"
>
apps/native/src/components/titles/status-action-button.tsx
+2 -2
View File
@@ -43,7 +43,7 @@ const STATUS_STYLES = {
function StatusLabel({ status }: { status: TitleStatus }) {
switch (status) {
case "in_watchlist":
return <Trans>In Watchlist</Trans>;
return <Trans>On Watchlist</Trans>;
case "watching":
return <Trans>Watching</Trans>;
case "caught_up":
@@ -77,7 +77,7 @@ export function StatusActionButton({
}}
disabled={isPending}
accessibilityRole="button"
accessibilityLabel={t`Add to watchlist`}
accessibilityLabel={t`Add to Watchlist`}
className="border-title-accent/20 bg-title-accent/10 flex-row items-center gap-1.5 rounded-lg border px-4 py-2"
>
<ScaledIcon icon={IconPlus} size={14} color={titleAccent} strokeWidth={2.5} />
apps/native/src/components/ui/poster-card.tsx
+2 -2
View File
@@ -219,7 +219,7 @@ export const PosterCard = memo(function PosterCard({
)}
{type === "movie" && (
<Link.MenuAction
title={t`Mark as Watched`}
title={t`Mark Watched`}
icon="checkmark.circle"
onPress={() => titleActions.markMovieWatched(id, title)}
/>
@@ -233,7 +233,7 @@ export const PosterCard = memo(function PosterCard({
)}
{userStatus && (
<Link.MenuAction
title={t`Remove from Library`}
title={t`Remove from library`}
icon="trash"
destructive
onPress={() => titleActions.removeFromLibrary(id)}
apps/native/src/components/ui/skeleton.tsx
+3 -1
View File
@@ -1,3 +1,4 @@
import { useLingui } from "@lingui/react/macro";
import { useEffect } from "react";
import type { ViewStyle } from "react-native";
import Animated, {
@@ -17,6 +18,7 @@ interface SkeletonProps {
}
export function Skeleton({ width, height = 14, borderRadius = 4, style }: SkeletonProps) {
const { t } = useLingui();
const secondaryColor = useCSSVariable("--color-secondary") as string;
const reduceMotion = useReducedMotion();
const opacity = useSharedValue(reduceMotion ? 0.7 : 0.4);
@@ -34,7 +36,7 @@ export function Skeleton({ width, height = 14, borderRadius = 4, style }: Skelet
return (
<Animated.View
accessible
accessibilityLabel="Loading"
accessibilityLabel={t`Loading`}
style={[
{
width,
apps/native/src/components/ui/star-rating.tsx
+7 -4
View File
@@ -1,3 +1,5 @@
import { plural } from "@lingui/core/macro";
import { useLingui } from "@lingui/react/macro";
import { IconStar, IconStarFilled } from "@tabler/icons-react-native";
import { Pressable, View } from "react-native";
import { useCSSVariable } from "uniwind";
@@ -19,6 +21,7 @@ export function StarRating({
interactive = true,
accentColor,
}: StarRatingProps) {
const { t } = useLingui();
const [defaultPrimary, mutedForeground] = useCSSVariable([
"--color-primary",
"--color-muted-foreground",
@@ -29,7 +32,7 @@ export function StarRating({
return (
<View
className="flex-row items-center gap-1"
accessibilityLabel={`Rating: ${rating} out of 5 stars`}
accessibilityLabel={t`Rating: ${rating} out of 5 stars`}
accessibilityRole="adjustable"
>
{[1, 2, 3, 4, 5].map((star) => (
@@ -37,12 +40,12 @@ export function StarRating({
key={star}
disabled={!interactive}
accessibilityRole="button"
accessibilityLabel={`${star} star${star !== 1 ? "s" : ""}`}
accessibilityLabel={plural(star, { one: "# star", other: "# stars" })}
accessibilityHint={
interactive
? star === rating
? "Double tap to clear rating"
: `Double tap to rate ${star} star${star !== 1 ? "s" : ""}`
? t`Double tap to clear rating`
: t`Double tap to rate ${plural(star, { one: "# star", other: "# stars" })}`
: undefined
}
onPress={() => {
apps/native/src/lib/title-actions.ts
+2 -2
View File
@@ -112,11 +112,11 @@ export const titleActions = {
}
},
async watchSeason(id: string, seasonName?: string) {
async watchSeason(id: string, seasonLabel?: string) {
try {
await client.seasons.watch({ id });
toast.success(
seasonName ? i18n._(msg`Watched all of ${seasonName}`) : i18n._(msg`Season watched`),
seasonLabel ? i18n._(msg`Watched all of ${seasonLabel}`) : i18n._(msg`Season watched`),
);
invalidateTitleQueries();
} catch {
apps/web/src/components/auth-form.tsx
+8 -7
View File
@@ -1,4 +1,4 @@
import { Trans } from "@lingui/react/macro";
import { Trans, useLingui } from "@lingui/react/macro";
import { IconKey } from "@tabler/icons-react";
import { Link, useNavigate } from "@tanstack/react-router";
import { AnimatePresence, motion } from "motion/react";
@@ -37,6 +37,7 @@ export function AuthForm({
mode: "login" | "register";
authConfig?: AuthConfig;
}) {
const { t } = useLingui();
const navigate = useNavigate();
const [name, setName] = useState("");
const [email, setEmail] = useState("");
@@ -59,19 +60,19 @@ export function AuthForm({
if (isRegister) {
const result = await signUp.email({ name, email, password });
if (result.error) {
setError(result.error.message ?? "Registration failed");
setError(result.error.message ?? t`Registration failed`);
return;
}
} else {
const result = await signIn.email({ email, password });
if (result.error) {
setError(result.error.message ?? "Login failed");
setError(result.error.message ?? t`Login failed`);
return;
}
}
void navigate({ to: "/dashboard" });
} catch {
setError("Something went wrong");
setError(t`Something went wrong`);
} finally {
setLoading(false);
}
@@ -86,7 +87,7 @@ export function AuthForm({
callbackURL: "/dashboard",
});
} catch {
setError("Failed to start SSO login");
setError(t`Failed to start SSO login`);
} finally {
setOidcLoading(false);
}
@@ -181,7 +182,7 @@ export function AuthForm({
value={name}
onChange={(e) => setName(e.target.value)}
className={authInputClass}
placeholder="Your name…"
placeholder={t`Your name…`}
/>
</motion.div>
)}
@@ -216,7 +217,7 @@ export function AuthForm({
value={password}
onChange={(e) => setPassword(e.target.value)}
className={authInputClass}
placeholder="Min 8 characters…"
placeholder={t`Min 8 characters…`}
/>
</motion.div>
apps/web/src/components/command-palette.tsx
+1 -1
View File
@@ -333,7 +333,7 @@ export function CommandPalette() {
<span data-slot="command-shortcut" className="ml-auto">
<button
type="button"
aria-label="Remove from recent searches"
aria-label={t`Remove from recent searches`}
onClick={(e) => {
e.stopPropagation();
handleRemoveRecent(q);
apps/web/src/components/explore/hero-banner.tsx
+1 -1
View File
@@ -67,7 +67,7 @@ export function HeroBanner({
</span>
)}
<span className="text-muted-foreground text-xs">
<Trans>Trending today</Trans>
<Trans>Trending Today</Trans>
</span>
</div>
<Link to="/titles/$id" params={{ id }} className="group/title text-start">
apps/web/src/components/landing-page.tsx
+1 -1
View File
@@ -165,7 +165,7 @@ export function LandingPage({
className="group bg-primary text-primary-foreground hover:shadow-primary/20 relative inline-flex h-12 items-center justify-center overflow-hidden rounded-lg px-8 font-medium transition-shadow hover:shadow-lg"
>
<span className="relative z-10">
<Trans>Sign In</Trans>
<Trans>Sign in</Trans>
</span>
<div className="absolute inset-0 bg-gradient-to-t from-black/10 to-transparent opacity-0 transition-opacity group-hover:opacity-100" />
</Link>
apps/web/src/components/nav-bar.tsx
+4 -4
View File
@@ -147,7 +147,7 @@ export function NavBar({
</Link>
<nav
ref={navRef}
aria-label="Primary"
aria-label={t`Primary`}
className="relative hidden items-center gap-1 sm:flex"
>
{navLinks.map((link, i) => {
@@ -205,7 +205,7 @@ export function NavBar({
<DropdownMenu modal={false}>
<DropdownMenuTrigger
className="hover:ring-primary/40 focus-visible:ring-primary/60 hidden cursor-pointer rounded-full ring-2 ring-transparent transition-all outline-none sm:block"
aria-label="Account menu"
aria-label={t`Account menu`}
>
<Avatar>
<AvatarImage src={userImage} alt={userName} />
@@ -260,7 +260,7 @@ export function NavBar({
<Link
to="/settings"
className="hover:ring-primary/40 rounded-full ring-2 ring-transparent transition-all sm:hidden"
aria-label="Settings"
aria-label={t`Settings`}
>
<Avatar size="sm">
<AvatarImage src={userImage} alt={userName} />
@@ -298,7 +298,7 @@ export function MobileTabBar() {
return (
<nav
aria-label="Primary"
aria-label={t`Primary`}
className="border-border/50 bg-background/90 fixed right-0 bottom-0 left-0 z-50 border-t ps-[env(safe-area-inset-left)] pe-[env(safe-area-inset-right)] backdrop-blur-xl sm:hidden"
>
<div ref={containerRef} className="relative flex h-14 items-stretch">
apps/web/src/components/people/filmography-grid.tsx
+1 -1
View File
@@ -73,7 +73,7 @@ export function FilmographyGrid({ credits, userStatuses }: FilmographyGridProps)
value={sort}
onValueChange={(v) => v && setSort(v as Sort)}
modal={false}
aria-label="Sort filmography"
aria-label={t`Sort filmography`}
>
<SelectTrigger size="sm">
<SelectValue>
apps/web/src/components/settings/backup-schedule-section.tsx
+1 -1
View File
@@ -199,7 +199,7 @@ export function BackupScheduleSection() {
return (
<CardContent>
<p className="text-muted-foreground text-sm">
<Trans>Failed to load backup schedule settings.</Trans>
<Trans>Failed to load backup schedule settings</Trans>
</p>
</CardContent>
);
apps/web/src/components/settings/system-health-section.tsx
+15 -9
View File
@@ -1,3 +1,4 @@
import { msg, plural } from "@lingui/core/macro";
import { Trans, useLingui } from "@lingui/react/macro";
import {
IconActivity,
@@ -28,6 +29,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip
import { useTimeAgo } from "@/hooks/use-time-ago";
import { orpc } from "@/lib/orpc/client";
import type { CronJobName, SystemHealthData } from "@sofa/api/schemas";
import { i18n } from "@sofa/i18n";
const DIGITS_ONLY_RE = /^\d+$/;
@@ -40,26 +42,29 @@ function cronToHuman(pattern: string): string {
// Every N hours: "0 */6 * * *"
if (hour.startsWith("*/")) {
const n = Number.parseInt(hour.slice(2), 10);
return `Every ${n}h`;
return i18n._(msg`Every ${n}h`);
}
// Twice daily: "0 1,13 * * *"
if (hour.includes(",") && !hour.includes("/") && !hour.includes("-")) {
const hours = hour.split(",");
if (hours.length === 2) {
return `Daily at ${hours.map((h) => `${h.padStart(2, "0")}:${min.padStart(2, "0")}`).join(", ")}`;
const times = hours.map((h) => `${h.padStart(2, "0")}:${min.padStart(2, "0")}`).join(", ");
return i18n._(msg`Daily at ${times}`);
}
}
// Daily at specific time: "0 3 * * *"
if (DIGITS_ONLY_RE.test(hour) && DIGITS_ONLY_RE.test(min) && dow === "*") {
return `Daily at ${hour.padStart(2, "0")}:${min.padStart(2, "0")}`;
const time = `${hour.padStart(2, "0")}:${min.padStart(2, "0")}`;
return i18n._(msg`Daily at ${time}`);
}
// Weekly
// Weekly — use Intl for locale-aware day name
if (DIGITS_ONLY_RE.test(dow)) {
const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
return `Weekly on ${days[Number(dow)] ?? dow}`;
const dayDate = new Date(2024, 0, 7 + Number(dow)); // 2024-01-07 is a Sunday
const dayName = new Intl.DateTimeFormat(i18n.locale, { weekday: "short" }).format(dayDate);
return i18n._(msg`Weekly on ${dayName}`);
}
return pattern;
@@ -528,7 +533,7 @@ function StorageCard({
onRefresh: () => void;
}) {
const { t } = useLingui();
const cachedImageCount = imageCache.imageCount.toLocaleString();
const cachedImageCount = imageCache.imageCount;
const backupCount = backups.backupCount;
const lastBackupAt = backups.lastBackupAt;
return (
@@ -567,7 +572,7 @@ function StorageCard({
{imageCache.enabled ? (
<>
<p className="text-muted-foreground mt-1 text-xs">
{t`${cachedImageCount} cached images`}
{plural(cachedImageCount, { one: "# cached image", other: "# cached images" })}
</p>
<p className="text-muted-foreground/50 mt-0.5 text-[10px] leading-relaxed">
{Object.entries(imageCache.categories)
@@ -598,7 +603,8 @@ function StorageCard({
{backupCount > 0 ? (
<p className="text-muted-foreground mt-1 text-xs">
<Trans>
{backupCount} backups · last <LiveTimeAgo date={lastBackupAt} fallback={t`unknown`} />
{plural(backupCount, { one: "# backup", other: "# backups" })} · last{" "}
<LiveTimeAgo date={lastBackupAt} fallback={t`unknown`} />
</Trans>
</p>
) : (
apps/web/src/components/title-card.tsx
+4 -1
View File
@@ -1,3 +1,4 @@
import { plural } from "@lingui/core/macro";
import { useLingui } from "@lingui/react/macro";
import {
IconBookmarkFilled,
@@ -148,7 +149,9 @@ function ProgressBar({ watched, total }: { watched: number; total: number }) {
style={{ width: `${pct}%` }}
/>
</TooltipTrigger>
<TooltipContent side="top">{t`${watched}/${total} episodes`}</TooltipContent>
<TooltipContent side="top">
{t`${watched}/${plural(total, { one: "# episode", other: "# episodes" })}`}
</TooltipContent>
</Tooltip>
);
}
apps/web/src/components/titles/cast-carousel.tsx
+7 -4
View File
@@ -1,4 +1,5 @@
import { Trans, useLingui } from "@lingui/react/macro";
import { plural } from "@lingui/core/macro";
import { Trans } from "@lingui/react/macro";
import { IconUser, IconUsers } from "@tabler/icons-react";
import { Link } from "@tanstack/react-router";
@@ -7,9 +8,11 @@ import { thumbHashToUrl } from "@/lib/thumbhash";
import type { CastMember } from "@sofa/api/schemas";
function EpisodeCountLabel({ count }: { count: number }) {
const { t } = useLingui();
const suffix = count !== 1 ? "s" : "";
return <p className="text-muted-foreground/70 text-[10px]">{t`${count} ep${suffix}`}</p>;
return (
<p className="text-muted-foreground/70 text-[10px]">
{plural(count, { one: "# ep", other: "# eps" })}
</p>
);
}
interface CastCarouselProps {
apps/web/src/components/titles/star-rating.tsx
+5 -2
View File
@@ -1,3 +1,5 @@
import { plural } from "@lingui/core/macro";
import { useLingui } from "@lingui/react/macro";
import { IconStar, IconStarFilled } from "@tabler/icons-react";
import { motion } from "motion/react";
import { useState } from "react";
@@ -14,13 +16,14 @@ interface StarRatingProps {
}
export function StarRating({ value, onChange }: StarRatingProps) {
const { t } = useLingui();
const [hover, setHover] = useState(0);
return (
<div
className="flex items-center gap-0.5"
role="radiogroup"
aria-label="Rating"
aria-label={t`Rating`}
onMouseLeave={() => setHover(0)}
>
{[1, 2, 3, 4, 5].map((star) => {
@@ -31,7 +34,7 @@ export function StarRating({ value, onChange }: StarRatingProps) {
type="button"
role="radio"
aria-checked={star === value}
aria-label={`Rate ${star} star${star !== 1 ? "s" : ""}`}
aria-label={t`Rate ${plural(star, { one: "# star", other: "# stars" })}`}
onClick={() => onChange(star === value ? 0 : star)}
onMouseEnter={() => setHover(star)}
className="p-0.5"
apps/web/src/components/titles/status-button.tsx
+1 -1
View File
@@ -37,7 +37,7 @@ export function StatusButton({ currentStatus, onChange }: StatusButtonProps) {
const statusConfig = {
in_watchlist: {
label: t`In Watchlist`,
label: t`On Watchlist`,
icon: IconBookmarkFilled,
class: "text-primary",
bgClass: "bg-primary/10 hover:bg-primary/15",
apps/web/src/components/titles/title-hero.tsx
+3 -2
View File
@@ -1,4 +1,4 @@
import { Trans } from "@lingui/react/macro";
import { Trans, useLingui } from "@lingui/react/macro";
import {
IconCalendarEvent,
IconCircleCheck,
@@ -30,6 +30,7 @@ export function TitleHero({
actions: ReactNode;
children?: ReactNode;
}) {
const { t } = useLingui();
const dateStr = title.releaseDate ?? title.firstAirDate;
const year = dateStr?.slice(0, 4);
const palette = title.colorPalette;
@@ -175,7 +176,7 @@ export function TitleHero({
href={`https://www.themoviedb.org/${title.type === "movie" ? "movie" : "tv"}/${title.tmdbId}`}
target="_blank"
rel="noopener noreferrer"
aria-label="View on TMDB"
aria-label={t`View on TMDB`}
className="inline-flex items-center opacity-70 transition-opacity hover:opacity-40"
>
<TmdbLogo className="h-2.5 w-auto" />
apps/web/src/components/titles/title-seasons.tsx
+8 -2
View File
@@ -1,4 +1,4 @@
import { Trans } from "@lingui/react/macro";
import { Trans, useLingui } from "@lingui/react/macro";
import {
IconCheck,
IconChecks,
@@ -59,6 +59,7 @@ export function TitleSeasons({
}: {
seasons?: Season[];
} = {}) {
const { t } = useLingui();
const { seasons, setSeasons, watchingEp } = useTitleContext();
const { episodeWatches, userStatus } = useTitleUserInfo();
@@ -228,6 +229,7 @@ export function TitleSeasons({
{season.episodes.map((ep) => {
const isWatched = watchedSet.has(ep.id);
const { stillPath } = ep;
const epNum = ep.episodeNumber;
return (
<div
key={ep.id}
@@ -254,7 +256,11 @@ export function TitleSeasons({
<div className="flex gap-3 px-4 py-3">
<button
type="button"
aria-label={`Mark episode ${ep.episodeNumber} as ${isWatched ? "unwatched" : "watched"}`}
aria-label={
isWatched
? t`Unmark episode ${epNum}`
: t`Mark episode ${epNum} watched`
}
onClick={() =>
handleWatchEpisode(
ep.id,
apps/web/src/components/ui/spinner.tsx
+3 -1
View File
@@ -1,12 +1,14 @@
import { useLingui } from "@lingui/react/macro";
import { IconLoader } from "@tabler/icons-react";
import { cn } from "@/lib/utils";
function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
const { t } = useLingui();
return (
<IconLoader
role="status"
aria-label="Loading"
aria-label={t`Loading`}
className={cn("size-4 animate-spin", className)}
{...props}
/>
packages/i18n/src/po/en.po
+293 -40
View File
File diff suppressed because one or more lines are too long