Lazy load language data

app/film/[film]/page.tsx

@@ -8,9 +8,9 @@ import { cache } from 'react';
 import { PATH_ROOT } from '@/app/paths';
 import { redirect } from 'next/navigation';
 import { staticallyGenerateCategoryIfConfigured } from '@/app/static';
+import { getAppText } from '@/i18n/state/server';
 
-const getPhotosFilmDataCachedCached =
+const getPhotosFilmDataCachedCached = cache(getPhotosFilmDataCached);
-  cache(getPhotosFilmDataCached);
 
 export const generateStaticParams = staticallyGenerateCategoryIfConfigured(
   'films',
@@ -38,12 +38,14 @@ export async function generateMetadata({
   
   if (photos.length === 0) { return {}; }
   
+  const appText = await getAppText();
+  
   const {
     url,
     title,
     description,
     images,
-  } = generateMetaForFilm(film, photos, count, dateRange);
+  } = generateMetaForFilm(film, photos, appText, count, dateRange);
 
   return {
     title,

app/focal/[focal]/page.tsx

@@ -8,6 +8,7 @@ import type { Metadata } from 'next';
 import { redirect } from 'next/navigation';
 import { cache } from 'react';
 import { staticallyGenerateCategoryIfConfigured } from '@/app/static';
+import { getAppText } from '@/i18n/state/server';
 
 const getPhotosFocalDataCachedCached = cache((focal: number) =>
   getPhotosFocalLengthDataCached({
@@ -41,12 +42,14 @@ export async function generateMetadata({
 
   if (photos.length === 0) { return {}; }
 
+  const appText = await getAppText();
+
   const {
     url,
     title,
     description,
     images,
-  } = generateMetaForFocalLength(focal, photos, count, dateRange);
+  } = generateMetaForFocalLength(focal, photos, appText, count, dateRange);
 
   return {
     title,

app/layout.tsx

@@ -24,6 +24,7 @@ import AdminUploadPanel from '@/admin/upload/AdminUploadPanel';
 import { revalidatePath } from 'next/cache';
 import RecipeModal from '@/recipe/RecipeModal';
 import ThemeColors from '@/app/ThemeColors';
+import AppTextProvider from '@/i18n/state/AppTextProvider';
 
 import '../tailwind.css';
 
@@ -80,6 +81,7 @@ export default function RootLayout({
         '3xl:flex flex-col items-center',
       )}>
         <AppStateProvider>
+          <AppTextProvider>
             <ThemeColors />
             <ThemeProvider attribute="class" defaultTheme={DEFAULT_THEME}>
               <SwrConfigClient>
@@ -117,6 +119,7 @@ export default function RootLayout({
               <PhotoEscapeHandler />
               <ToasterWithThemes />
             </ThemeProvider>
+          </AppTextProvider>
         </AppStateProvider>
       </body>
     </html>

app/lens/[make]/[model]/page.tsx

@@ -13,6 +13,7 @@ import {
 import {
   staticallyGenerateCategoryIfConfigured,
 } from '@/app/static';
+import { getAppText } from '@/i18n/state/server';
 
 const getPhotosLensDataCachedCached = cache((
   make: string | undefined,
@@ -41,12 +42,14 @@ export async function generateMetadata({
     lens,
   ] = await getPhotosLensDataCachedCached(make, model);
 
+  const appText = await getAppText();
+
   const {
     url,
     title,
     description,
     images,
-  } = generateMetaForLens(lens, photos, count, dateRange);
+  } = generateMetaForLens(lens, photos, appText, count, dateRange);
 
   return {
     title,

app/recipe/[recipe]/page.tsx

@@ -8,6 +8,7 @@ import { generateMetaForRecipe } from '@/recipe';
 import RecipeOverview from '@/recipe/RecipeOverview';
 import { getPhotosRecipeDataCached } from '@/recipe/data';
 import { staticallyGenerateCategoryIfConfigured } from '@/app/static';
+import { getAppText } from '@/i18n/state/server';
 
 const getPhotosRecipeDataCachedCached = cache(getPhotosRecipeDataCached);
 
@@ -39,12 +40,14 @@ export async function generateMetadata({
 
   if (photos.length === 0) { return {}; }
 
+  const appText = await getAppText();
+
   const {
     url,
     title,
     description,
     images,
-  } = generateMetaForRecipe(recipe, photos, count, dateRange);
+  } = generateMetaForRecipe(recipe, photos, appText, count, dateRange);
 
   return {
     title,

app/shot-on/[make]/[model]/page.tsx

@@ -7,6 +7,7 @@ import CameraOverview from '@/camera/CameraOverview';
 import { cache } from 'react';
 import { getUniqueCameras } from '@/photo/db/query';
 import { staticallyGenerateCategoryIfConfigured } from '@/app/static';
+import { getAppText } from '@/i18n/state/server';
 
 const getPhotosCameraDataCachedCached = cache((
   make: string,
@@ -35,12 +36,14 @@ export async function generateMetadata({
     camera,
   ] = await getPhotosCameraDataCachedCached(make, model);
 
+  const appText = await getAppText();
+
   const {
     url,
     title,
     description,
     images,
-  } = generateMetaForCamera(camera, photos, count, dateRange);
+  } = generateMetaForCamera(camera, photos, appText, count, dateRange);
 
   return {
     title,

app/sign-in/page.tsx

@@ -5,7 +5,7 @@ import { clsx } from 'clsx/lite';
 import { redirect } from 'next/navigation';
 import LinkWithStatus from '@/components/LinkWithStatus';
 import { IoArrowBack } from 'react-icons/io5';
-import { APP_TEXT } from '@/app/config';
+import { getAppText } from '@/i18n/state/server';
 
 export default async function SignInPage() {
   const session = await auth();
@@ -14,6 +14,8 @@ export default async function SignInPage() {
     redirect(PATH_ADMIN);
   }
 
+  const appText = await getAppText();
+  
   return (
     <div className={clsx(
       'fixed top-0 left-0 right-0 bottom-0',
@@ -28,7 +30,7 @@ export default async function SignInPage() {
         )}
       >
         <IoArrowBack className="translate-y-[1px]" />
-        {APP_TEXT.nav.home}
+        {appText.nav.home}
       </LinkWithStatus>
     </div>
   );

app/tag/[tag]/page.tsx

@@ -8,6 +8,7 @@ import type { Metadata } from 'next';
 import { redirect } from 'next/navigation';
 import { cache } from 'react';
 import { staticallyGenerateCategoryIfConfigured } from '@/app/static';
+import { getAppText } from '@/i18n/state/server';
 
 const getPhotosTagDataCachedCached = cache((tag: string) =>
   getPhotosTagDataCached({ tag, limit: INFINITE_SCROLL_GRID_INITIAL}));
@@ -37,12 +38,14 @@ export async function generateMetadata({
 
   if (photos.length === 0) { return {}; }
 
+  const appText = await getAppText();
+
   const {
     url,
     title,
     description,
     images,
-  } = generateMetaForTag(tag, photos, count, dateRange);
+  } = generateMetaForTag(tag, photos, appText, count, dateRange);
 
   return {
     title,

app/tag/hidden/page.tsx

@@ -8,6 +8,7 @@ import { TAG_HIDDEN, descriptionForTaggedPhotos, titleForTag } from '@/tag';
 import HiddenHeader from '@/tag/HiddenHeader';
 import { Metadata } from 'next';
 import { cache } from 'react';
+import { getAppText } from '@/i18n/state/server';
 
 const getPhotosHiddenMetaCached = cache(() =>
   getPhotosMetaCached({ hidden: 'only' }));
@@ -17,9 +18,13 @@ export async function generateMetadata(): Promise<Metadata> {
 
   if (count === 0) { return {}; }
 
-  const title = titleForTag(TAG_HIDDEN, undefined, count);
+  const appText = await getAppText();
+  
+  const title = titleForTag(TAG_HIDDEN, undefined, appText, count);
+
   const description = descriptionForTaggedPhotos(
     undefined,
+    appText,
     undefined,
     count,
     dateRange,

src/admin/AdminAppMenu.tsx

@@ -29,7 +29,7 @@ import IconBroom from '@/components/icons/IconBroom';
 import InsightsIndicatorDot from './insights/InsightsIndicatorDot';
 import MoreMenuItem from '@/components/more/MoreMenuItem';
 import Spinner from '@/components/Spinner';
-import { APP_TEXT } from '@/app/config';
+import { useAppText } from '@/i18n/state/client';
 
 export default function AdminAppMenu({
   active,
@@ -58,6 +58,8 @@ export default function AdminAppMenu({
     clearAuthStateAndRedirectIfNecessary,
   } = useAppState();
 
+  const appText = useAppText();
+
   const isSelecting = selectedPhotoIds !== undefined;
 
   const isAltPressed = useIsKeyBeingPressed('alt');
@@ -66,7 +68,7 @@ export default function AdminAppMenu({
 
   const sectionUpload: ComponentProps<typeof MoreMenuItem>[] =
     useMemo(() => ([{
-      label: APP_TEXT.admin.uploadPhotos,
+      label: appText.admin.uploadPhotos,
       icon: <IconUpload
         size={15}
         className="translate-x-[0.5px] translate-y-[0.5px]"
@@ -74,14 +76,14 @@ export default function AdminAppMenu({
       annotation: isLoadingAdminData &&
         <Spinner className="translate-y-[1.5px]" />,
       action: startUpload,
-    }]), [isLoadingAdminData, startUpload]);
+    }]), [appText, isLoadingAdminData, startUpload]);
 
   const sectionMain: ComponentProps<typeof MoreMenuItem>[] = useMemo(() => {
     const items: ComponentProps<typeof MoreMenuItem>[] = [];
 
     if (uploadsCount) {
       items.push({
-        label: APP_TEXT.admin.uploadPlural,
+        label: appText.admin.uploadPlural,
         annotation: `${uploadsCount}`,
         icon: <IconFolder
           size={16}
@@ -92,7 +94,7 @@ export default function AdminAppMenu({
     }
     if (photosCountNeedSync) {
       items.push({
-        label: APP_TEXT.admin.updatePlural,
+        label: appText.admin.updatePlural,
         annotation: <>
           <span className="mr-3">
             {photosCountNeedSync}
@@ -112,7 +114,7 @@ export default function AdminAppMenu({
     }
     if (photosCountTotal) {
       items.push({
-        label: APP_TEXT.admin.managePhotos,
+        label: appText.admin.managePhotos,
         ...photosCountTotal && {
           annotation: `${photosCountTotal}`,
         },
@@ -125,7 +127,7 @@ export default function AdminAppMenu({
     }
     if (tagsCount) {
       items.push({
-        label: APP_TEXT.admin.manageTags,
+        label: appText.admin.manageTags,
         annotation: `${tagsCount}`,
         icon: <IconTag
           size={15}
@@ -136,7 +138,7 @@ export default function AdminAppMenu({
     }
     if (recipesCount) {
       items.push({
-        label: APP_TEXT.admin.manageRecipes,
+        label: appText.admin.manageRecipes,
         annotation: `${recipesCount}`,
         icon: <IconRecipe
           size={17}
@@ -148,8 +150,8 @@ export default function AdminAppMenu({
     if (photosCountTotal) {
       items.push({
         label: isSelecting
-          ? APP_TEXT.admin.batchExitEdit
+          ? appText.admin.batchExitEdit
-          : APP_TEXT.admin.batchEditShort,
+          : appText.admin.batchEditShort,
         icon: isSelecting
           ? <IoCloseSharp
             size={18}
@@ -175,8 +177,8 @@ export default function AdminAppMenu({
     }
     items.push({
       label: showAppInsightsLink
-        ? APP_TEXT.admin.appInsights
+        ? appText.admin.appInsights
-        : APP_TEXT.admin.appConfig,
+        : appText.admin.appConfig,
       icon: <AdminAppInfoIcon
         size="small"
         className="translate-x-[-0.5px] translate-y-[0.5px]"
@@ -188,6 +190,7 @@ export default function AdminAppMenu({
 
     return items;
   }, [
+    appText,
     isSelecting,
     photosCountNeedSync,
     photosCountTotal,
@@ -200,10 +203,10 @@ export default function AdminAppMenu({
 
   const sectionSignOut: ComponentProps<typeof MoreMenuItem>[] =
     useMemo(() => ([{
-      label: APP_TEXT.auth.signOut,
+      label: appText.auth.signOut,
       icon: <IconSignOut size={15} />,
       action: () => signOutAction().then(clearAuthStateAndRedirectIfNecessary),
-    }]), [clearAuthStateAndRedirectIfNecessary]);
+    }]), [appText.auth.signOut, clearAuthStateAndRedirectIfNecessary]);
 
   const sections = useMemo(() =>
     [sectionUpload, sectionMain, sectionSignOut]

src/admin/AdminBatchEditPanelClient.tsx

@@ -19,6 +19,7 @@ import { FaArrowDown, FaCheck } from 'react-icons/fa6';
 import ResponsiveText from '@/components/primitives/ResponsiveText';
 import IconFavs from '@/components/icons/IconFavs';
 import IconTag from '@/components/icons/IconTag';
+import { useAppText } from '@/i18n/state/client';
 
 export default function AdminBatchEditPanelClient({
   uniqueTags,
@@ -37,6 +38,8 @@ export default function AdminBatchEditPanelClient({
     setIsPerformingSelectEdit,
   } = useAppState();
 
+  const appText = useAppText();
+
   const [tags, setTags] = useState<string>();
   const [tagErrorMessage, setTagErrorMessage] = useState('');
   const isInTagMode = tags !== undefined;
@@ -49,6 +52,7 @@ export default function AdminBatchEditPanelClient({
 
   const photosText = photoQuantityText(
     selectedPhotoIds?.length ?? 0,
+    appText,
     false,
     false,
   );

src/admin/AdminNav.tsx

@@ -12,7 +12,7 @@ import {
   PATH_ADMIN_UPLOADS,
 } from '@/app/paths';
 import AdminNavClient from './AdminNavClient';
-import { APP_TEXT } from '@/app/config';
+import { getAppText } from '@/i18n/state/server';
 
 export default async function AdminNav() {
   const [
@@ -38,32 +38,34 @@ export default async function AdminNav() {
     getPhotosMostRecentUpdateCached().catch(() => undefined),
   ]);
 
+  const appText = await getAppText();
+
   const includeInsights = countPhotos > 0;
 
   // Photos
   const items = [{
-    label: APP_TEXT.photo.photoPlural,
+    label: appText.photo.photoPlural,
     href: PATH_ADMIN_PHOTOS,
     count: countPhotos,
   }];
 
   // Uploads
   if (countUploads > 0) { items.push({
-    label: APP_TEXT.admin.uploadPlural,
+    label: appText.admin.uploadPlural,
     href: PATH_ADMIN_UPLOADS,
     count: countUploads,
   }); }
 
   // Tags
   if (countTags > 0) { items.push({
-    label: APP_TEXT.category.tagPlural,
+    label: appText.category.tagPlural,
     href: PATH_ADMIN_TAGS,
     count: countTags,
   }); }
 
   // Recipes
   if (countRecipes > 0) { items.push({
-    label: APP_TEXT.category.recipePlural,
+    label: appText.category.recipePlural,
     href: PATH_ADMIN_RECIPES,
     count: countRecipes,
   }); }

src/admin/AdminPhotoMenu.tsx

@@ -26,7 +26,7 @@ import IconFavs from '@/components/icons/IconFavs';
 import IconEdit from '@/components/icons/IconEdit';
 import { photoNeedsToBeSynced } from '@/photo/sync';
 import { KEY_COMMANDS } from '@/photo/key-commands';
-import { APP_TEXT } from '@/app/config';
+import { useAppText } from '@/i18n/state/client';
 
 export default function AdminPhotoMenu({
   photo,
@@ -42,6 +42,8 @@ export default function AdminPhotoMenu({
 }) {
   const { isUserSignedIn, registerAdminUpdate } = useAppState();
 
+  const appText = useAppText();
+
   const isFav = isPhotoFav(photo);
   const path = usePathname();
   const shouldRedirectFav = isPathFavs(path) && isFav;
@@ -49,7 +51,7 @@ export default function AdminPhotoMenu({
 
   const sectionMain = useMemo(() => {
     const items: ComponentProps<typeof MoreMenuItem>[] = [{
-      label: APP_TEXT.admin.edit,
+      label: appText.admin.edit,
       icon: <IconEdit
         size={15}
         className="translate-x-[0.5px]"
@@ -59,7 +61,7 @@ export default function AdminPhotoMenu({
     }];
     if (includeFavorite) {
       items.push({
-        label: isFav ? APP_TEXT.admin.unfavorite : APP_TEXT.admin.favorite,
+        label: isFav ? appText.admin.unfavorite : appText.admin.favorite,
         icon: <IconFavs
           size={14}
           className="translate-x-[-1px] translate-y-[0.5px]"
@@ -77,7 +79,7 @@ export default function AdminPhotoMenu({
       });
     }
     items.push({
-      label: APP_TEXT.admin.download,
+      label: appText.admin.download,
       icon: <MdOutlineFileDownload
         size={17}
         className="translate-x-[-1px]"
@@ -87,9 +89,9 @@ export default function AdminPhotoMenu({
       ...showKeyCommands && { keyCommand: KEY_COMMANDS.download },
     });
     items.push({
-      label: APP_TEXT.admin.sync,
+      label: appText.admin.sync,
       labelComplex: <span className="inline-flex items-center gap-2">
-        <span>{APP_TEXT.admin.sync}</span>
+        <span>{appText.admin.sync}</span>
         {photoNeedsToBeSynced(photo) &&
           <InsightsIndicatorDot
             colorOverride="blue"
@@ -107,6 +109,7 @@ export default function AdminPhotoMenu({
 
     return items;
   }, [
+    appText,
     photo,
     showKeyCommands,
     includeFavorite,
@@ -116,7 +119,7 @@ export default function AdminPhotoMenu({
   ]);
 
   const sectionDelete: ComponentProps<typeof MoreMenuItem>[] = useMemo(() => [{
-    label: APP_TEXT.admin.delete,
+    label: appText.admin.delete,
     icon: <BiTrash
       size={15}
       className="translate-x-[-1px]"
@@ -124,7 +127,7 @@ export default function AdminPhotoMenu({
     className: 'text-error *:hover:text-error',
     color: 'red',
     action: () => {
-      if (confirm(deleteConfirmationTextForPhoto(photo))) {
+      if (confirm(deleteConfirmationTextForPhoto(photo, appText))) {
         return deletePhotoAction(
           photo.id,
           photo.url,
@@ -140,6 +143,7 @@ export default function AdminPhotoMenu({
       keyCommand: KEY_COMMANDS.delete[1],
     },
   }], [
+    appText,
     photo,
     showKeyCommands,
     revalidatePhoto,

src/admin/AdminPhotosClient.tsx

@@ -15,7 +15,7 @@ import PhotoUploadWithStatus from '@/photo/PhotoUploadWithStatus';
 import { pluralize } from '@/utility/string';
 import IconBroom from '@/components/icons/IconBroom';
 import ResponsiveText from '@/components/primitives/ResponsiveText';
-import { APP_TEXT } from '@/app/config';
+import { useAppText } from '@/i18n/state/client';
 
 export default function AdminPhotosClient({
   photos,
@@ -42,6 +42,8 @@ export default function AdminPhotosClient({
 }) {
   const { uploadState: { isUploading } } = useAppState();
 
+  const appText = useAppText();
+
   return (
     <AppGrid
       contentMain={
@@ -64,8 +66,8 @@ export default function AdminPhotosClient({
                 tooltip={(
                   pluralize(
                     photosCountNeedsSync,
-                    APP_TEXT.photo.photo,
+                    appText.photo.photo,
-                    APP_TEXT.photo.photoPlural,
+                    appText.photo.photoPlural,
                   ) +
                   ' missing data or AI-generated text'
                 )}
@@ -83,8 +85,8 @@ export default function AdminPhotosClient({
                 <ResponsiveText shortText={photosCountNeedsSync}>
                   {pluralize(
                     photosCountNeedsSync,
-                    APP_TEXT.admin.update,
+                    appText.admin.update,
-                    APP_TEXT.admin.updatePlural,
+                    appText.admin.updatePlural,
                   )}
                 </ResponsiveText>
               </PathLoaderButton>}

src/admin/AdminRecipeBadge.tsx

@@ -2,8 +2,9 @@ import { photoLabelForCount } from '@/photo';
 import { clsx } from 'clsx/lite';
 import Badge from '@/components/Badge';
 import PhotoRecipe from '@/recipe/PhotoRecipe';
+import { getAppText } from '@/i18n/state/server';
 
-export default function AdminRecipeBadge({
+export default async function AdminRecipeBadge({
   recipe,
   count,
   hideBadge,
@@ -12,6 +13,8 @@ export default function AdminRecipeBadge({
   count: number,
   hideBadge?: boolean,
 }) {
+  const appText = await getAppText();
+
   const renderBadgeContent = () =>
     <div className={clsx(
       'inline-flex items-center gap-2',
@@ -21,7 +24,7 @@ export default function AdminRecipeBadge({
         <span>{count}</span>
         <span className="hidden xs:inline-block">
           &nbsp;
-          {photoLabelForCount(count)}
+          {photoLabelForCount(count, appText)}
         </span>
       </div>
     </div>;

src/admin/AdminRecipeTable.tsx

@@ -9,12 +9,14 @@ import { pathForAdminRecipeEdit } from '@/app/paths';
 import { clsx } from 'clsx/lite';
 import { formatRecipe, Recipes, sortRecipes } from '@/recipe';
 import AdminRecipeBadge from './AdminRecipeBadge';
+import { getAppText } from '@/i18n/state/server';
 
-export default function AdminRecipeTable({
+export default async function AdminRecipeTable({
   recipes,
 }: {
   recipes: Recipes
 }) {
+  const appText = await getAppText();
   return (
     <AdminTable>
       {sortRecipes(recipes).map(({ recipe, count }) =>
@@ -31,7 +33,7 @@ export default function AdminRecipeTable({
               action={deletePhotoRecipeGloballyAction}
               confirmText={
                 // eslint-disable-next-line max-len
-                `Are you sure you want to remove "${formatRecipe(recipe)}" from ${photoQuantityText(count, false).toLowerCase()}?`}
+                `Are you sure you want to remove "${formatRecipe(recipe)}" from ${photoQuantityText(count, appText, false, false).toLowerCase()}?`}
             >
               <input type="hidden" name="recipe" value={recipe} />
               <DeleteFormButton clearLocalState />

src/admin/AdminTagBadge.tsx

@@ -4,8 +4,9 @@ import { clsx } from 'clsx/lite';
 import FavsTag from '@/tag/FavsTag';
 import { isTagFavs } from '@/tag';
 import Badge from '@/components/Badge';
+import { getAppText } from '@/i18n/state/server';
 
-export default function AdminTagBadge({
+export default async function AdminTagBadge({
   tag,
   count,
   hideBadge,
@@ -14,6 +15,8 @@ export default function AdminTagBadge({
   count: number,
   hideBadge?: boolean,
 }) {
+  const appText = await getAppText();
+
   const renderBadgeContent = () =>
     <div className={clsx(
       'inline-flex items-center gap-2',
@@ -28,7 +31,7 @@ export default function AdminTagBadge({
         <span>{count}</span>
         <span className="hidden xs:inline-block">
           &nbsp;
-          {photoLabelForCount(count)}
+          {photoLabelForCount(count, appText)}
         </span>
       </div>
     </div>;

src/admin/AdminTagTable.tsx

@@ -9,12 +9,15 @@ import EditButton from '@/admin/EditButton';
 import { pathForAdminTagEdit } from '@/app/paths';
 import { clsx } from 'clsx/lite';
 import AdminTagBadge from './AdminTagBadge';
+import { getAppText } from '@/i18n/state/server';
 
-export default function AdminTagTable({
+export default async function AdminTagTable({
   tags,
 }: {
   tags: Tags
 }) {
+  const appText = await getAppText();
+
   return (
     <AdminTable>
       {sortTags(tags).map(({ tag, count }) =>
@@ -31,7 +34,7 @@ export default function AdminTagTable({
               action={deletePhotoTagGloballyAction}
               confirmText={
                 // eslint-disable-next-line max-len
-                `Are you sure you want to remove "${formatTag(tag)}" from ${photoQuantityText(count, false).toLowerCase()}?`}
+                `Are you sure you want to remove "${formatTag(tag)}" from ${photoQuantityText(count, appText, false, false).toLowerCase()}?`}
             >
               <input type="hidden" name="tag" value={tag} />
               <DeleteFormButton clearLocalState />

src/admin/DeletePhotoButton.tsx

@@ -3,6 +3,7 @@
 import { deleteConfirmationTextForPhoto, Photo, titleForPhoto } from '@/photo';
 import DeletePhotosButton from './DeletePhotosButton';
 import { ComponentProps } from 'react';
+import { useAppText } from '@/i18n/state/client';
 
 export default function DeletePhotoButton({
   photo,
@@ -10,11 +11,12 @@ export default function DeletePhotoButton({
 }: {
   photo: Photo
 } & ComponentProps<typeof DeletePhotosButton>) {
+  const appText = useAppText();
   return (
     <DeletePhotosButton
       {...rest}
       photoIds={[photo.id]}
-      confirmText={deleteConfirmationTextForPhoto(photo)}
+      confirmText={deleteConfirmationTextForPhoto(photo, appText)}
       toastText={`"${titleForPhoto(photo)}" deleted`}
     />
   );

src/admin/DeletePhotosButton.tsx

@@ -7,6 +7,7 @@ import { useAppState } from '@/state/AppState';
 import { toastSuccess, toastWarning } from '@/toast';
 import { ComponentProps, useState } from 'react';
 import DeleteButton from './DeleteButton';
+import { useAppText } from '@/i18n/state/client';
 
 export default function DeletePhotosButton({
   photoIds = [],
@@ -27,7 +28,9 @@ export default function DeletePhotosButton({
 } & ComponentProps<typeof LoaderButton>) {
   const [isLoading, setIsLoading] = useState(false);
 
-  const photosText = photoQuantityText(photoIds.length, false, false);
+  const appText = useAppText();
+
+  const photosText = photoQuantityText(photoIds.length, appText, false, false);
 
   const { invalidateSwr, registerAdminUpdate } = useAppState();
 

src/admin/PhotoTagFieldset.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import FieldSetWithStatus from '@/components/FieldSetWithStatus';
+import { useAppText } from '@/i18n/state/client';
 import { convertTagsForForm, getValidationMessageForTags, Tags } from '@/tag';
 import { ComponentProps, useEffect, useRef, useState } from 'react';
 
@@ -25,6 +26,8 @@ export default function PhotoTagFieldset(props: {
 
   const ref = useRef<HTMLInputElement>(null);
 
+  const appText = useAppText();
+
   const [errorMessageLocal, setErrorMessageLocal] = useState('');
 
   useEffect(() => {
@@ -43,7 +46,7 @@ export default function PhotoTagFieldset(props: {
         inputRef={ref}
         label="Tags"
         value={tags}
-        tagOptions={convertTagsForForm(tagOptions)}
+        tagOptions={convertTagsForForm(tagOptions, appText)}
         onChange={tags => {
           onChange(tags);
           const validationMessage = getValidationMessageForTags(tags) ?? '';

src/admin/SignInOrUploadClient.tsx

@@ -4,7 +4,7 @@ import { useAppState } from '@/state/AppState';
 import SignInForm from '@/auth/SignInForm';
 import clsx from 'clsx/lite';
 import PhotoUploadWithStatus from '@/photo/PhotoUploadWithStatus';
-import { APP_TEXT } from '@/app/config';
+import { useAppText } from '@/i18n/state/client';
 
 export default function SignInOrUploadClient({
   shouldResize,
@@ -15,6 +15,8 @@ export default function SignInOrUploadClient({
 }) {
   const { isUserSignedIn, isCheckingAuth } = useAppState();
 
+  const appText = useAppText();
+
   return (
     <div className={clsx(
       'flex justify-center items-center flex-col gap-4',
@@ -22,10 +24,10 @@ export default function SignInOrUploadClient({
     )}>
       <div>
         {isCheckingAuth
-          ? APP_TEXT.misc.loading
+          ? appText.misc.loading
           : isUserSignedIn
-            ? APP_TEXT.onboarding.setupFirstPhoto
+            ? appText.onboarding.setupFirstPhoto
-            : APP_TEXT.onboarding.setupSignIn}
+            : appText.onboarding.setupSignIn}
       </div>
       {!isCheckingAuth && isUserSignedIn === false &&
         <div className="flex justify-center my-2 sm:my-4">

src/app/AppViewSwitcher.tsx

@@ -9,7 +9,6 @@ import {
 import IconSearch from '../components/icons/IconSearch';
 import { useAppState } from '@/state/AppState';
 import {
-  APP_TEXT,
   GRID_HOMEPAGE_ENABLED,
   SHOW_KEYBOARD_SHORTCUT_TOOLTIPS,
 } from './config';
@@ -20,6 +19,7 @@ import { useCallback, useRef, useState } from 'react';
 import useKeydownHandler from '@/utility/useKeydownHandler';
 import { usePathname } from 'next/navigation';
 import { KEY_COMMANDS } from '@/photo/key-commands';
+import { useAppText } from '@/i18n/state/client';
 
 export type SwitcherSelection = 'feed' | 'grid' | 'admin';
 
@@ -32,6 +32,8 @@ export default function AppViewSwitcher({
 }) {
   const pathname = usePathname();
   
+  const appText = useAppText();
+
   const {
     isUserSignedIn,
     isUserSignedInEager,
@@ -67,7 +69,7 @@ export default function AppViewSwitcher({
       hrefRef={refHrefFeed}
       active={currentSelection === 'feed'}
       tooltip={{...SHOW_KEYBOARD_SHORTCUT_TOOLTIPS && {
-        content: APP_TEXT.nav.feed,
+        content: appText.nav.feed,
         keyCommand: KEY_COMMANDS.feed,
       }}}
       noPadding
@@ -80,7 +82,7 @@ export default function AppViewSwitcher({
       hrefRef={refHrefGrid}
       active={currentSelection === 'grid'}
       tooltip={{...SHOW_KEYBOARD_SHORTCUT_TOOLTIPS && {
-        content: APP_TEXT.nav.grid,
+        content: appText.nav.grid,
         keyCommand: KEY_COMMANDS.grid,
       }}}
       noPadding
@@ -104,7 +106,7 @@ export default function AppViewSwitcher({
             noPadding
             tooltip={{
               ...!isAdminMenuOpen && SHOW_KEYBOARD_SHORTCUT_TOOLTIPS && {
-                content: APP_TEXT.nav.admin,
+                content: appText.nav.admin,
                 keyCommand: KEY_COMMANDS.admin,
               },
             }}
@@ -117,7 +119,7 @@ export default function AppViewSwitcher({
             />}
             tooltip={{
               ...!isAdminMenuOpen && SHOW_KEYBOARD_SHORTCUT_TOOLTIPS && {
-                content: APP_TEXT.nav.admin,
+                content: appText.nav.admin,
                 keyCommand: KEY_COMMANDS.admin,
               },
             }}
@@ -129,7 +131,7 @@ export default function AppViewSwitcher({
           icon={<IconSearch includeTitle={false} />}
           onClick={() => setIsCommandKOpen?.(true)}
           tooltip={{...SHOW_KEYBOARD_SHORTCUT_TOOLTIPS && {
-            content: APP_TEXT.nav.search,
+            content: appText.nav.search,
             keyCommandModifier: KEY_COMMANDS.search[0],
             keyCommand: KEY_COMMANDS.search[1],
           }}}

src/app/Footer.tsx

@@ -4,7 +4,7 @@ import { clsx } from 'clsx/lite';
 import AppGrid from '../components/AppGrid';
 import ThemeSwitcher from '@/app/ThemeSwitcher';
 import Link from 'next/link';
-import { APP_TEXT, SHOW_REPO_LINK } from '@/app/config';
+import { SHOW_REPO_LINK } from '@/app/config';
 import RepoLink from '../components/RepoLink';
 import { usePathname } from 'next/navigation';
 import { PATH_ADMIN_PHOTOS, isPathAdmin, isPathSignIn } from './paths';
@@ -13,6 +13,7 @@ import { signOutAction } from '@/auth/actions';
 import AnimateItems from '@/components/AnimateItems';
 import { useAppState } from '@/state/AppState';
 import Spinner from '@/components/Spinner';
+import { useAppText } from '@/i18n/state/client';
 
 export default function Footer() {
   const pathname = usePathname();
@@ -24,6 +25,8 @@ export default function Footer() {
     clearAuthStateAndRedirectIfNecessary,
   } = useAppState();
 
+  const appText = useAppText();
+
   const showFooter = !isPathSignIn(pathname);
 
   const shouldAnimate = !isPathAdmin(pathname);
@@ -51,7 +54,7 @@ export default function Footer() {
                     <form action={() => signOutAction()
                       .then(clearAuthStateAndRedirectIfNecessary)}>
                       <SubmitButtonWithStatus styleAs="link">
-                        {APP_TEXT.auth.signOut}
+                        {appText.auth.signOut}
                       </SubmitButtonWithStatus>
                     </form>
                   </>
@@ -60,7 +63,7 @@ export default function Footer() {
                     : SHOW_REPO_LINK
                       ? <RepoLink />
                       : <Link href={PATH_ADMIN_PHOTOS}>
-                        {APP_TEXT.nav.admin}
+                        {appText.nav.admin}
                       </Link>}
               </div>
               <div className="flex items-center h-10">

src/app/ThemeSwitcher.tsx

@@ -5,9 +5,11 @@ import { useTheme } from 'next-themes';
 import Switcher from '@/components/Switcher';
 import SwitcherItem from '@/components/SwitcherItem';
 import { BiDesktop, BiMoon, BiSun } from 'react-icons/bi';
-import { APP_TEXT } from './config';
+import { useAppText } from '@/i18n/state/client';
 
 export default function ThemeSwitcher () {
+  const appText = useAppText();
+
   const [mounted, setMounted] = useState(false);
   const { theme, setTheme } = useTheme();
 
@@ -26,19 +28,19 @@ export default function ThemeSwitcher () {
         icon={<BiDesktop size={16} />}
         onClick={() => setTheme('system')}
         active={theme === 'system'}
-        tooltip={{ content: APP_TEXT.theme.system }}
+        tooltip={{ content: appText.theme.system }}
       />
       <SwitcherItem
         icon={<BiSun size={18} />}
         onClick={() => setTheme('light')}
         active={theme === 'light'}
-        tooltip={{ content: APP_TEXT.theme.light }}
+        tooltip={{ content: appText.theme.light }}
       />
       <SwitcherItem
         icon={<BiMoon size={16} />}
         onClick={() => setTheme('dark')}
         active={theme === 'dark'}
-        tooltip={{ content: APP_TEXT.theme.dark }}
+        tooltip={{ content: appText.theme.dark }}
       />
     </Switcher>
   );

src/app/config.ts

@@ -5,7 +5,6 @@ import {
 import { getOrderedCategoriesFromString } from '@/category';
 import type { StorageType } from '@/platforms/storage';
 import { makeUrlAbsolute, shortenUrl } from '@/utility/url';
-import { getTextForLocale } from '@/i18n';
 
 // HARD-CODED GLOBAL CONFIGURATION
 
@@ -99,9 +98,7 @@ const SITE_DOMAIN_SHORT = shortenUrl(SITE_DOMAIN);
 
 // SITE META
 
-export const APP_TEXT = getTextForLocale(
+export const APP_LOCALE = process.env.NEXT_PUBLIC_LOCALE || 'US-EN';
-  process.env.NEXT_PUBLIC_LOCALE,
-);
 
 export const NAV_TITLE =
   process.env.NEXT_PUBLIC_NAV_TITLE;
@@ -342,15 +339,14 @@ export const APP_CONFIGURATION = {
     Boolean(process.env.ADMIN_EMAIL) &&
     Boolean(process.env.ADMIN_PASSWORD)
   ),
-  // Domain
+  // Content
-  locale: process.env.NEXT_PUBLIC_LOCALE ?? 'US-EN',
+  locale: APP_LOCALE,
   hasLocale: Boolean(process.env.NEXT_PUBLIC_LOCALE),
   hasDomain: Boolean(
     process.env.NEXT_PUBLIC_DOMAIN ||
     // Legacy environment variable
     process.env.NEXT_PUBLIC_SITE_DOMAIN,
   ),
-  // Content
   hasNavTitle: Boolean(NAV_TITLE),
   hasNavCaption: Boolean(NAV_CAPTION),
   isMetaTitleConfigured: IS_META_TITLE_CONFIGURED,

src/auth/SignInForm.tsx

@@ -21,7 +21,7 @@ import { useAppState } from '@/state/AppState';
 import { clsx } from 'clsx/lite';
 import { PATH_ADMIN_PHOTOS } from '@/app/paths';
 import IconLock from '@/components/icons/IconLock';
-import { APP_TEXT } from '@/app/config';
+import { useAppText } from '@/i18n/state/client';
 
 export default function SignInForm({
   includeTitle = true,
@@ -36,6 +36,8 @@ export default function SignInForm({
 
   const { setUserEmail } = useAppState();
 
+  const appText = useAppText();
+
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [response, action] = useActionState(signInAction, undefined);
@@ -80,27 +82,27 @@ export default function SignInForm({
         )}>
           <IconLock className="text-main translate-y-[0.5px]" />
           <span className="text-main">
-            {APP_TEXT.auth.signIn}
+            {appText.auth.signIn}
           </span>
         </h1>}
       <form action={action} className="w-full">
         <div className="space-y-5 w-full -translate-y-0.5">
           {response === KEY_CREDENTIALS_SIGN_IN_ERROR &&
             <ErrorNote>
-              {APP_TEXT.auth.invalidEmailPassword}
+              {appText.auth.invalidEmailPassword}
             </ErrorNote>}
           <div className="space-y-4 w-full">
             <FieldSetWithStatus
               id="email"
               inputRef={emailRef}
-              label={APP_TEXT.auth.email}
+              label={appText.auth.email}
               type="email"
               value={email}
               onChange={setEmail}
             />
             <FieldSetWithStatus
               id="password"
-              label={APP_TEXT.auth.password}
+              label={appText.auth.password}
               type="password"
               value={password}
               onChange={setPassword}
@@ -113,7 +115,7 @@ export default function SignInForm({
               />}
           </div>
           <SubmitButtonWithStatus disabled={!isFormValid}>
-            {APP_TEXT.auth.signIn}
+            {appText.auth.signIn}
           </SubmitButtonWithStatus>
         </div>
       </form>

src/camera/CameraHeader.tsx

@@ -4,8 +4,9 @@ import { Camera, cameraFromPhoto } from '.';
 import PhotoCamera from './PhotoCamera';
 import { descriptionForCameraPhotos } from './meta';
 import { AI_TEXT_GENERATION_ENABLED } from '@/app/config';
+import { getAppText } from '@/i18n/state/server';
 
-export default function CameraHeader({
+export default async function CameraHeader({
   camera: cameraProp,
   photos,
   selectedPhoto,
@@ -21,12 +22,19 @@ export default function CameraHeader({
   dateRange?: PhotoDateRange
 }) {
   const camera = cameraFromPhoto(photos[0], cameraProp);
+  const appText = await getAppText();
   return (
     <PhotoHeader
       camera={camera}
       entity={<PhotoCamera {...{ camera }} contrast="high" />}
       entityDescription={
-        descriptionForCameraPhotos(photos, undefined, count, dateRange)}
+        descriptionForCameraPhotos(
+          photos,
+          appText,
+          undefined,
+          count,
+          dateRange,
+        )}
       photos={photos}
       selectedPhoto={selectedPhoto}
       indexNumber={indexNumber}

src/camera/CameraOGTile.tsx

@@ -3,8 +3,9 @@ import { absolutePathForCameraImage, pathForCamera } from '@/app/paths';
 import OGTile, { OGLoadingState } from '@/components/OGTile';
 import { Camera } from '.';
 import { descriptionForCameraPhotos, titleForCamera } from './meta';
+import { getAppText } from '@/i18n/state/server';
 
-export default function CameraOGTile({
+export default async function CameraOGTile({
   camera,
   photos,
   loadingState: loadingStateExternal,
@@ -25,10 +26,17 @@ export default function CameraOGTile({
   count?: number
   dateRange?: PhotoDateRange
 }) {
+  const appText = await getAppText();
   return (
     <OGTile {...{
-      title: titleForCamera(camera, photos, count),
+      title: titleForCamera(camera, photos, appText, count),
-      description: descriptionForCameraPhotos(photos, true, count, dateRange),
+      description: descriptionForCameraPhotos(
+        photos,
+        appText,
+        true,
+        count,
+        dateRange,
+      ),
       path: pathForCamera(camera),
       pathImageAbsolute: absolutePathForCameraImage(camera),
       loadingState: loadingStateExternal,

src/camera/CameraShareModal.tsx

@@ -4,8 +4,9 @@ import ShareModal from '@/share/ShareModal';
 import CameraOGTile from './CameraOGTile';
 import { Camera, formatCameraText } from '.';
 import { shareTextForCamera } from './meta';
+import { getAppText } from '@/i18n/state/server';
 
-export default function CameraShareModal({
+export default async function CameraShareModal({
   camera,
   photos,
   count,
@@ -13,11 +14,12 @@ export default function CameraShareModal({
 }: {
   camera: Camera
 } & PhotoSetAttributes) {
+  const appText = await getAppText();
   return (
     <ShareModal
       pathShare={absolutePathForCamera(camera, true)}
       navigatorTitle={formatCameraText(camera)}
-      socialText={shareTextForCamera(camera, photos)}
+      socialText={shareTextForCamera(camera, photos, appText)}
     >
       <CameraOGTile {...{ camera, photos, count, dateRange }} />
     </ShareModal>

src/camera/meta.ts

@@ -9,7 +9,7 @@ import {
   absolutePathForCamera,
   absolutePathForCameraImage,
 } from '@/app/paths';
-import { APP_TEXT } from '@/app/config';
+import { I18NState } from '@/i18n/state';
 
 // Meta functions moved to separate file to avoid
 // dependencies (camelcase-keys) found in photo/index.ts
@@ -18,30 +18,34 @@ import { APP_TEXT } from '@/app/config';
 export const titleForCamera = (
   camera: Camera,
   photos: Photo[],
+  appText: I18NState,
   explicitCount?: number,
 ) => [
-  APP_TEXT.category.cameraTitle(
+  appText.category.cameraTitle(
     formatCameraText(cameraFromPhoto(photos[0], camera)),
   ),
-  photoQuantityText(explicitCount ?? photos.length),
+  photoQuantityText(explicitCount ?? photos.length, appText),
 ].join(' ');
 
 export const shareTextForCamera = (
   camera: Camera,
   photos: Photo[],
+  appText: I18NState,
 ) =>
-  APP_TEXT.category.cameraShare(
+  appText.category.cameraShare(
     formatCameraText(cameraFromPhoto(photos[0], camera)),
   );
 
 export const descriptionForCameraPhotos = (
   photos: Photo[],
+  appText: I18NState,
   dateBased?: boolean,
   explicitCount?: number,
   explicitDateRange?: PhotoDateRange,
 ) =>
   descriptionForPhotoSet(
     photos,
+    appText,
     undefined,
     dateBased,
     explicitCount,
@@ -51,12 +55,19 @@ export const descriptionForCameraPhotos = (
 export const generateMetaForCamera = (
   camera: Camera,
   photos: Photo[],
+  appText: I18NState,
   explicitCount?: number,
   explicitDateRange?: PhotoDateRange,
 ) => ({
   url: absolutePathForCamera(camera),
-  title: titleForCamera(camera, photos, explicitCount),
+  title: titleForCamera(camera, photos, appText, explicitCount),
   description:
-    descriptionForCameraPhotos(photos, true, explicitCount, explicitDateRange),
+    descriptionForCameraPhotos(
+      photos,
+      appText,
+      true,
+      explicitCount,
+      explicitDateRange,
+    ),
   images: absolutePathForCameraImage(camera),
 });

src/cmdk/CommandK.tsx

@@ -3,6 +3,7 @@ import { getPhotosMetaCached } from '@/photo/cache';
 import { photoQuantityText } from '@/photo';
 import { ADMIN_DEBUG_TOOLS_ENABLED } from '../app/config';
 import { getDataForCategoriesCached } from '@/category/cache';
+import { getAppText } from '@/i18n/state/server';
 
 export default async function CommandK() {
   const [
@@ -15,9 +16,13 @@ export default async function CommandK() {
     getDataForCategoriesCached(),
   ]);
 
-  return <CommandKClient
+  const appText = await getAppText();
+
+  return (
+    <CommandKClient
       {...categories}
       showDebugTools={ADMIN_DEBUG_TOOLS_ENABLED}
-    footer={photoQuantityText(count, false)}
+      footer={photoQuantityText(count, appText, false)}
-  />;
+    />
+  );
 }

src/cmdk/CommandKClient.tsx

@@ -53,7 +53,6 @@ import { addHiddenToTags, formatTag, isTagFavs, isTagHidden } from '@/tag';
 import { formatCount, formatCountDescriptive } from '@/utility/string';
 import CommandKItem from './CommandKItem';
 import {
-  APP_TEXT,
   CATEGORY_VISIBILITY,
   GRID_HOMEPAGE_ENABLED,
 } from '@/app/config';
@@ -78,6 +77,7 @@ import useMaskedScroll from '../components/useMaskedScroll';
 import { labelForFilm } from '@/film';
 import IconFavs from '@/components/icons/IconFavs';
 import IconHidden from '@/components/icons/IconHidden';
+import { useAppText } from '@/i18n/state/client';
 
 const DIALOG_TITLE = 'Global Command-K Menu';
 const DIALOG_DESCRIPTION = 'For searching photos, views, and settings';
@@ -157,6 +157,8 @@ export default function CommandKClient({
     setShouldDebugRecipeOverlays,
   } = useAppState();
 
+  const appText = useAppText();
+
   const isOpenRef = useRef(isOpen);
 
   const refInput = useRef<HTMLInputElement>(null);
@@ -261,7 +263,7 @@ export default function CommandKClient({
           setIsLoading(false);
         });
     }
-  }, [queryDebounced, isPending]);
+  }, [queryDebounced, isPending, appText]);
 
   useEffect(() => {
     if (queryLive === '') {
@@ -289,7 +291,7 @@ export default function CommandKClient({
       .map(category => {
         switch (category) {
         case 'cameras': return {
-          heading: APP_TEXT.category.cameraPlural,
+          heading: appText.category.cameraPlural,
           accessory: <IconCamera size={14} />,
           items: cameras.map(({ camera, count }) => ({
             label: formatCameraText(camera),
@@ -299,7 +301,7 @@ export default function CommandKClient({
           })),
         };
         case 'lenses': return {
-          heading: APP_TEXT.category.lensPlural,
+          heading: appText.category.lensPlural,
           accessory: <IconLens size={14} className="translate-y-[0.5px]" />,
           items: lenses.map(({ lens, count }) => ({
             label: formatLensText(lens, 'medium'),
@@ -310,7 +312,7 @@ export default function CommandKClient({
           })),
         };
         case 'tags': return {
-          heading: APP_TEXT.category.tagPlural,
+          heading: appText.category.tagPlural,
           accessory: <IconTag
             size={13}
             className="translate-x-[1px] translate-y-[0.75px]"
@@ -337,7 +339,7 @@ export default function CommandKClient({
           })),
         };
         case 'recipes': return {
-          heading: APP_TEXT.category.recipePlural,
+          heading: appText.category.recipePlural,
           accessory: <IconRecipe
             size={15}
             className="translate-x-[-1px]"
@@ -350,7 +352,7 @@ export default function CommandKClient({
           })),
         };
         case 'films': return {
-          heading: APP_TEXT.category.filmPlural,
+          heading: appText.category.filmPlural,
           accessory: <IconFilm size={14} />,
           items: films.map(({ film, count }) => ({
             label: labelForFilm(film).medium,
@@ -360,7 +362,7 @@ export default function CommandKClient({
           })),
         };
         case 'focal-lengths': return {
-          heading: APP_TEXT.category.focalLengthPlural,
+          heading: appText.category.focalLengthPlural,
           accessory: <IconFocalLength className="text-[14px]" />,
           items: focalLengths.map(({ focal, count }) => ({
             label: formatFocalLength(focal)!,
@@ -372,24 +374,32 @@ export default function CommandKClient({
         }
       })
       .filter(Boolean) as CommandKSection[]
-  , [tagsIncludingHidden, cameras, lenses, recipes, films, focalLengths]);
+  , [
+    appText,
+    tagsIncludingHidden,
+    cameras,
+    lenses,
+    recipes,
+    films,
+    focalLengths,
+  ]);
 
   const clientSections: CommandKSection[] = [{
-    heading: APP_TEXT.theme.theme,
+    heading: appText.theme.theme,
     accessory: <IoInvertModeSharp
       size={14}
       className="translate-y-[0.5px] translate-x-[-1px]"
     />,
     items: [{
-      label: APP_TEXT.theme.system,
+      label: appText.theme.system,
       annotation: <BiDesktop />,
       action: () => setTheme('system'),
     }, {
-      label: APP_TEXT.theme.light,
+      label: appText.theme.light,
       annotation: <BiSun size={16} className="translate-x-[1.25px]" />,
       action: () => setTheme('light'),
     }, {
-      label: APP_TEXT.theme.dark,
+      label: appText.theme.dark,
       annotation: <BiMoon className="translate-x-[1px]" />,
       action: () => setTheme('dark'),
     }],
@@ -441,15 +451,15 @@ export default function CommandKClient({
 
   const pageFeed: CommandKItem = {
     label: GRID_HOMEPAGE_ENABLED
-      ? APP_TEXT.nav.feed
+      ? appText.nav.feed
-      : `${APP_TEXT.nav.feed} (${APP_TEXT.nav.home})`,
+      : `${appText.nav.feed} (${appText.nav.home})`,
     path: PATH_FEED_INFERRED,
   };
 
   const pageGrid: CommandKItem = {
     label: GRID_HOMEPAGE_ENABLED
-      ? `${APP_TEXT.nav.grid} (${APP_TEXT.nav.home})`
+      ? `${appText.nav.grid} (${appText.nav.home})`
-      : APP_TEXT.nav.grid,
+      : appText.nav.grid,
     path: PATH_GRID_INFERRED,
   };
 
@@ -471,40 +481,40 @@ export default function CommandKClient({
 
   if (isUserSignedIn) {
     adminSection.items.push({
-      label: APP_TEXT.admin.uploadPhotos,
+      label: appText.admin.uploadPhotos,
       annotation: <IconLock narrow />,
       action: startUpload,
     });
     if (uploadsCount) {
       adminSection.items.push({
-        label: `${APP_TEXT.admin.uploadPlural} (${uploadsCount})`,
+        label: `${appText.admin.uploadPlural} (${uploadsCount})`,
         annotation: <IconLock narrow />,
         path: PATH_ADMIN_UPLOADS,
       });
     }
     adminSection.items.push({
-      label: `${APP_TEXT.admin.managePhotos} (${photosCountTotal})`,
+      label: `${appText.admin.managePhotos} (${photosCountTotal})`,
       annotation: <IconLock narrow />,
       path: PATH_ADMIN_PHOTOS,
     });
     if (tagsCount) {
       adminSection.items.push({
-        label: `${APP_TEXT.admin.manageTags} (${tagsCount})`,
+        label: `${appText.admin.manageTags} (${tagsCount})`,
         annotation: <IconLock narrow />,
         path: PATH_ADMIN_TAGS,
       });
     }
     if (recipesCount) {
       adminSection.items.push({
-        label: `${APP_TEXT.admin.manageRecipes} (${recipesCount})`,
+        label: `${appText.admin.manageRecipes} (${recipesCount})`,
         annotation: <IconLock narrow />,
         path: PATH_ADMIN_RECIPES,
       });
     }
     adminSection.items.push({
       label: selectedPhotoIds === undefined
-        ? APP_TEXT.admin.batchEdit
+        ? appText.admin.batchEdit
-        : APP_TEXT.admin.batchExitEdit,
+        : appText.admin.batchExitEdit,
       annotation: <IconLock narrow />,
       path: selectedPhotoIds === undefined
         ? PATH_GRID_INFERRED
@@ -514,7 +524,7 @@ export default function CommandKClient({
         : () => setSelectedPhotoIds?.(undefined),
     }, {
       label: <span className="flex items-center gap-3">
-        {APP_TEXT.admin.appInsights}
+        {appText.admin.appInsights}
         {insightsIndicatorStatus &&
           <InsightsIndicatorDot />}
       </span>,
@@ -522,7 +532,7 @@ export default function CommandKClient({
       annotation: <IconLock narrow />,
       path: PATH_ADMIN_INSIGHTS,
     }, {
-      label: APP_TEXT.admin.appConfig,
+      label: appText.admin.appConfig,
       annotation: <IconLock narrow />,
       path: PATH_ADMIN_CONFIGURATION,
     });
@@ -538,14 +548,14 @@ export default function CommandKClient({
       });
     }
     adminSection.items.push({
-      label: APP_TEXT.auth.signOut,
+      label: appText.auth.signOut,
       action: () => signOutAction()
         .then(clearAuthStateAndRedirectIfNecessary)
         .then(() => setIsOpen?.(false)),
     });
   } else {
     adminSection.items.push({
-      label: APP_TEXT.auth.signIn,
+      label: appText.auth.signIn,
       path: PATH_SIGN_IN,
     });
   }
@@ -596,7 +606,7 @@ export default function CommandKClient({
                 'focus:outline-hidden',
                 isPending && 'opacity-20',
               )}
-              placeholder={APP_TEXT.cmdk.placeholder}
+              placeholder={appText.cmdk.placeholder}
               disabled={isPending}
             />
             {isLoading && !isPending &&
@@ -617,8 +627,8 @@ export default function CommandKClient({
           <div className="px-3 pt-2 pb-3.5 space-y-2">
             <Command.Empty className="mt-1 pl-3 text-dim text-base pb-0.5">
               {isLoading
-                ? APP_TEXT.cmdk.searching
+                ? appText.cmdk.searching
-                : APP_TEXT.cmdk.noResults}
+                : appText.cmdk.noResults}
             </Command.Empty>
             {queriedSections
               .concat(categorySections)

src/components/CopyButton.tsx

@@ -3,7 +3,7 @@ import LoaderButton from './primitives/LoaderButton';
 import clsx from 'clsx/lite';
 import { toastSuccess } from '@/toast';
 import { ComponentProps } from 'react';
-import { APP_TEXT } from '@/app/config';
+import { useAppText } from '@/i18n/state/client';
 
 export default function CopyButton({
   label,
@@ -19,6 +19,7 @@ export default function CopyButton({
   iconSize?: number
   className?: string
 } & ComponentProps<typeof LoaderButton>) {
+  const appText = useAppText();
   return (
     <LoaderButton
       {...props}
@@ -30,7 +31,7 @@ export default function CopyButton({
       onClick={text
         ? () => {
           navigator.clipboard.writeText(text);
-          toastSuccess(APP_TEXT.misc.copyPhrase(label));
+          toastSuccess(appText.misc.copyPhrase(label));
         }
         : undefined}
       styleAs="link"

src/components/DownloadButton.tsx

@@ -4,7 +4,7 @@ import { downloadFileNameForPhoto, Photo } from '@/photo';
 import LoaderButton from './primitives/LoaderButton';
 import { useState } from 'react';
 import { downloadFileFromBrowser } from '@/utility/url';
-import { APP_TEXT } from '@/app/config';
+import { useAppText } from '@/i18n/state/client';
 
 export default function DownloadButton({
   photo,
@@ -15,9 +15,11 @@ export default function DownloadButton({
 }) {
   const [isLoading, setIsLoading] = useState(false);
 
+  const appText = useAppText();
+
   return (
     <LoaderButton
-      tooltip={APP_TEXT.tooltip.download}
+      tooltip={appText.tooltip.download}
       className={clsx(
         className,
         'text-medium',

src/components/ImageInput.tsx

@@ -9,7 +9,7 @@ import { FiUploadCloud } from 'react-icons/fi';
 import { MAX_IMAGE_SIZE } from '@/platforms/next-image';
 import ProgressButton from './primitives/ProgressButton';
 import { useAppState } from '@/state/AppState';
-import { APP_TEXT } from '@/app/config';
+import { useAppText } from '@/i18n/state/client';
 
 export default function ImageInput({
   ref: inputRefExternal,
@@ -55,6 +55,8 @@ export default function ImageInput({
     resetUploadState,
   } = useAppState();
   
+  const appText = useAppText();
+
   const disabled = disabledProp || isUploading;
 
   return (
@@ -85,13 +87,13 @@ export default function ImageInput({
             >
               {isUploading
                 ? filesLength > 1
-                  ? APP_TEXT.utility.paginateAction(
+                  ? appText.utility.paginateAction(
                     fileUploadIndex + 1,
                     filesLength,
-                    APP_TEXT.admin.uploading,
+                    appText.admin.uploading,
                   )
-                  : APP_TEXT.admin.uploading
+                  : appText.admin.uploading
-                : APP_TEXT.admin.uploadPhotos}
+                : appText.admin.uploadPhotos}
             </ProgressButton>}
           <input
             ref={inputRef}

src/components/RepoLink.tsx

@@ -1,13 +1,15 @@
-import { APP_TEXT, TEMPLATE_REPO_NAME, TEMPLATE_REPO_URL } from '@/app/config';
+import { TEMPLATE_REPO_NAME, TEMPLATE_REPO_URL } from '@/app/config';
+import { useAppText } from '@/i18n/state/client';
 import { clsx } from 'clsx/lite';
 import Link from 'next/link';
 import { BiLogoGithub } from 'react-icons/bi';
 
 export default function RepoLink() {
+  const appText = useAppText();
   return (
     <span className="inline-flex items-center gap-2 whitespace-nowrap">
       <span className="hidden sm:inline-block">
-        {APP_TEXT.misc.repo}
+        {appText.misc.repo}
       </span>
       <Link
         href={TEMPLATE_REPO_URL}

src/components/useNavigateOrRunActionWithToast.tsx

@@ -1,4 +1,4 @@
-import { APP_TEXT } from '@/app/config';
+import { useAppText } from '@/i18n/state/client';
 import { toastWaiting } from '@/toast';
 import { useRouter } from 'next/navigation';
 import { useCallback, useEffect, useRef, useTransition } from 'react';
@@ -7,7 +7,7 @@ import { toast } from 'sonner';
 
 export default function useNavigateOrRunActionWithToast({
   pathOrAction,
-  toastMessage = APP_TEXT.misc.loading,
+  toastMessage: _toastMessage,
   dismissDelay = 1500,
 }: {
   pathOrAction?: string | (() => Promise<any> | undefined)
@@ -16,6 +16,10 @@ export default function useNavigateOrRunActionWithToast({
 }) {
   const router = useRouter();
 
+  const appText = useAppText();
+
+  const toastMessage = _toastMessage ?? appText.misc.loading;
+
   const toastId = useRef<string | number>(undefined);
   
   const [isPending, startTransition] = useTransition();

src/film/FilmHeader.tsx

@@ -7,6 +7,7 @@ import PhotoFilm from '@/film/PhotoFilm';
 import { getRecipePropsFromPhotos } from '@/recipe';
 import { useAppState } from '@/state/AppState';
 import { AI_TEXT_GENERATION_ENABLED } from '@/app/config';
+import { useAppText } from '@/i18n/state/client';
 
 export default function FilmHeader({
   film,
@@ -31,6 +32,8 @@ export default function FilmHeader({
     ? getRecipePropsFromPhotos(photos, selectedPhoto)
     : undefined;
 
+  const appText = useAppText();
+
   return (
     <PhotoHeader
       film={film}
@@ -42,7 +45,12 @@ export default function FilmHeader({
           : undefined}
       />}
       entityDescription={descriptionForFilmPhotos(
-        photos, undefined, count, dateRange)}
+        photos,
+        appText,
+        undefined,
+        count,
+        dateRange,
+      )}
       photos={photos}
       selectedPhoto={selectedPhoto}
       indexNumber={indexNumber}

src/film/FilmOGTile.tsx

@@ -5,8 +5,9 @@ import {
 } from '@/app/paths';
 import OGTile, { OGLoadingState } from '@/components/OGTile';
 import { descriptionForFilmPhotos, titleForFilm } from '.';
+import { getAppText } from '@/i18n/state/server';
 
-export default function FilmOGTile({
+export default async function FilmOGTile({
   film,
   photos,
   loadingState: loadingStateExternal,
@@ -27,11 +28,12 @@ export default function FilmOGTile({
   count?: number
   dateRange?: PhotoDateRange
 }) {
+  const appText = await getAppText();
   return (
     <OGTile {...{
-      title: titleForFilm(film, photos, count),
+      title: titleForFilm(film, photos, appText, count),
       description:
-        descriptionForFilmPhotos(photos, true, count, dateRange),
+        descriptionForFilmPhotos(photos, appText, true, count, dateRange),
       path: pathForFilm(film),
       pathImageAbsolute: absolutePathForFilmImage(film),
       loadingState: loadingStateExternal,

src/film/FilmShareModal.tsx

@@ -3,8 +3,9 @@ import { PhotoSetAttributes } from '../category';
 import ShareModal from '@/share/ShareModal';
 import FilmOGTile from './FilmOGTile';
 import { labelForFilm, shareTextForFilm } from '.';
+import { getAppText } from '@/i18n/state/server';
 
-export default function FilmShareModal({
+export default async function FilmShareModal({
   film,
   photos,
   count,
@@ -12,11 +13,12 @@ export default function FilmShareModal({
 }: {
   film: string
 } & PhotoSetAttributes) {
+  const appText = await getAppText();
   return (
     <ShareModal
       pathShare={absolutePathForFilm(film, true)}
       navigatorTitle={labelForFilm(film).large}
-      socialText={shareTextForFilm(film)}
+      socialText={shareTextForFilm(film, appText)}
     >
       <FilmOGTile {...{ film, photos, count, dateRange }} />
     </ShareModal>

src/film/index.tsx

@@ -19,7 +19,7 @@ import {
 } from '@/utility/string';
 import { AnnotatedTag } from '@/photo/form';
 import PhotoFilmIcon from './PhotoFilmIcon';
-import { APP_TEXT } from '@/app/config';
+import { I18NState } from '@/i18n/state';
 
 export type FilmWithCount = {
   film: string
@@ -59,25 +59,29 @@ export const sortFilmsWithCount = (
 export const titleForFilm = (
   film: string,
   photos: Photo[],
+  appText: I18NState,
   explicitCount?: number,
 ) => [
   labelForFilm(film).large,
-  photoQuantityText(explicitCount ?? photos.length),
+  photoQuantityText(explicitCount ?? photos.length, appText),
 ].join(' ');
 
 export const shareTextForFilm = (
   film: string,
+  appText: I18NState,
 ) =>
-  APP_TEXT.category.filmShare(labelForFilm(film).large);
+  appText.category.filmShare(labelForFilm(film).large);
 
 export const descriptionForFilmPhotos = (
   photos: Photo[],
+  appText: I18NState,
   dateBased?: boolean,
   explicitCount?: number,
   explicitDateRange?: PhotoDateRange,
 ) =>
   descriptionForPhotoSet(
     photos,
+    appText,
     undefined,
     dateBased,
     explicitCount,
@@ -87,13 +91,15 @@ export const descriptionForFilmPhotos = (
 export const generateMetaForFilm = (
   film: string,
   photos: Photo[],
+  appText: I18NState,
   explicitCount?: number,
   explicitDateRange?: PhotoDateRange,
 ) => ({
   url: absolutePathForFilm(film),
-  title: titleForFilm(film, photos, explicitCount),
+  title: titleForFilm(film, photos, appText, explicitCount),
   description: descriptionForFilmPhotos(
     photos,
+    appText,
     true,
     explicitCount,
     explicitDateRange,

src/focal/FocalLengthHeader.tsx

@@ -3,6 +3,8 @@ import { descriptionForFocalLengthPhotos } from '.';
 import PhotoHeader from '@/photo/PhotoHeader';
 import PhotoFocalLength from './PhotoFocalLength';
 import { AI_TEXT_GENERATION_ENABLED } from '@/app/config';
+import { useAppText } from '@/i18n/state/client';
+
 export default function FocalLengthHeader({
   focal,
   photos,
@@ -18,14 +20,17 @@ export default function FocalLengthHeader({
   count?: number
   dateRange?: PhotoDateRange
 }) {
+  const appText = useAppText();
   return (
     <PhotoHeader
       focal={focal}
       entity={<PhotoFocalLength focal={focal} contrast="high" />}
       entityDescription={descriptionForFocalLengthPhotos(
         photos,
+        appText,
         undefined,
         count,
+        dateRange,
       )}
       photos={photos}
       selectedPhoto={selectedPhoto}

src/focal/FocalLengthOGTile.tsx

@@ -5,8 +5,9 @@ import {
 } from '@/app/paths';
 import OGTile, { OGLoadingState } from '@/components/OGTile';
 import { descriptionForFocalLengthPhotos, titleForFocalLength } from '.';
+import { getAppText } from '@/i18n/state/server';
 
-export default function FocalLengthOGTile({
+export default async function FocalLengthOGTile({
   focal,
   photos,
   loadingState: loadingStateExternal,
@@ -27,11 +28,13 @@ export default function FocalLengthOGTile({
   count?: number
   dateRange?: PhotoDateRange
 }) {
+  const appText = await getAppText();
   return (
     <OGTile {...{
-      title: titleForFocalLength(focal, photos, count),
+      title: titleForFocalLength(focal, photos, appText, count),
       description: descriptionForFocalLengthPhotos(
         photos,
+        appText,
         true,
         count,
         dateRange,

src/focal/FocalLengthShareModal.tsx

@@ -3,8 +3,9 @@ import { PhotoSetAttributes } from '../category';
 import ShareModal from '@/share/ShareModal';
 import FocalLengthOGTile from './FocalLengthOGTile';
 import { formatFocalLengthSafe, shareTextFocalLength } from '.';
+import { getAppText } from '@/i18n/state/server';
 
-export default function FocalLengthShareModal({
+export default async function FocalLengthShareModal({
   focal,
   photos,
   count,
@@ -12,11 +13,12 @@ export default function FocalLengthShareModal({
 }: {
   focal: number
 } & PhotoSetAttributes) {
+  const appText = await getAppText();
   return (
     <ShareModal
       pathShare={absolutePathForFocalLength(focal, true)}
       navigatorTitle={formatFocalLengthSafe(focal)}
-      socialText={shareTextFocalLength(focal)}
+      socialText={shareTextFocalLength(focal, appText)}
     >
       <FocalLengthOGTile {...{ focal, photos, count, dateRange }} />
     </ShareModal>

src/focal/index.ts

@@ -8,7 +8,7 @@ import {
   absolutePathForFocalLength,
   absolutePathForFocalLengthImage,
 } from '@/app/paths';
-import { APP_TEXT } from '@/app/config';
+import { I18NState } from '@/i18n/state';
 
 export type FocalLengths = {
   focal: number
@@ -30,23 +30,29 @@ export const formatFocalLengthSafe = (focal = 0) =>
 export const titleForFocalLength = (
   focal: number,
   photos: Photo[],
+  appText: I18NState,
   explicitCount?: number,
 ) => [
-  APP_TEXT.category.focalLengthTitle(formatFocalLengthSafe(focal)),
+  appText.category.focalLengthTitle(formatFocalLengthSafe(focal)),
-  photoQuantityText(explicitCount ?? photos.length),
+  photoQuantityText(explicitCount ?? photos.length, appText),
 ].join(' ');
 
-export const shareTextFocalLength = (focal: number) =>
+export const shareTextFocalLength = (
-  APP_TEXT.category.focalLengthShare(formatFocalLengthSafe(focal));
+  focal: number,
+  appText: I18NState,
+) =>
+  appText.category.focalLengthShare(formatFocalLengthSafe(focal));
 
 export const descriptionForFocalLengthPhotos = (
   photos: Photo[],
+  appText: I18NState,
   dateBased?: boolean,
   explicitCount?: number,
   explicitDateRange?: PhotoDateRange,
 ) =>
   descriptionForPhotoSet(
     photos,
+    appText,
     undefined,
     dateBased,
     explicitCount,
@@ -56,13 +62,15 @@ export const descriptionForFocalLengthPhotos = (
 export const generateMetaForFocalLength = (
   focal: number,
   photos: Photo[],
+  appText: I18NState,
   explicitCount?: number,
   explicitDateRange?: PhotoDateRange,
 ) => ({
   url: absolutePathForFocalLength(focal),
-  title: titleForFocalLength(focal, photos, explicitCount),
+  title: titleForFocalLength(focal, photos, appText, explicitCount),
   description: descriptionForFocalLengthPhotos(
     photos,
+    appText,
     true,
     explicitCount,
     explicitDateRange,

src/i18n/date.ts

@@ -0,0 +1,12 @@
+import { enUS, ptBR, pt } from 'date-fns/locale';
+import { APP_LOCALE } from '@/app/config';
+
+const getDateFnLocale = (locale: string) => {
+  switch (locale) {
+  case 'pt-pt': return pt;
+  case 'pt-br': return ptBR;
+  default: return enUS;
+  }
+};
+
+export const DATE_FN_LOCALE = getDateFnLocale(APP_LOCALE);

src/i18n/index.ts

@@ -1,7 +1,4 @@
 import US_EN from './locales/us-en';
-import PT_BR from './locales/pt-br';
-import PT_PT from './locales/pt-pt';
-import { enUS, ptBR, pt } from 'date-fns/locale';
 
 export type I18N = typeof US_EN;
 
@@ -9,71 +6,20 @@ export type I18NDeepPartial = {
   [key in keyof I18N]?: Partial<I18N[key]>;
 }
 
-const getDateFnLocale = (locale: string) => {
+export const LOCALE_TEXT: Record<
-  switch (locale) {
+  string,
-  case 'pt-pt': return pt;
+  () => Promise<I18NDeepPartial | undefined>
-  case 'pt-br': return ptBR;
+> = {
-  default: return enUS;
+  'pt-br': () => import('./locales/pt-br').then((m) => m.default),
-  }
+  'pt-pt': () => import('./locales/pt-pt').then((m) => m.default),
 };
 
-const generateI18NWithFunctions = (i18nText: I18N) => {
+export const getTextForLocale = async (
-  return {
-    ...i18nText,
-    category: {
-      ...i18nText.category,
-      cameraTitle: (camera: string) =>
-        i18nText.category.cameraTitle.replace('{{camera}}', camera),
-      cameraShare: (camera: string) =>
-        i18nText.category.cameraShare.replace('{{camera}}', camera),
-      taggedPhrase: (tag: string) =>
-        i18nText.category.taggedPhrase.replace('{{tag}}', tag),
-      recipeShare: (recipe: string) =>
-        i18nText.category.recipeShare.replace('{{recipe}}', recipe),
-      filmShare: (film: string) =>
-        i18nText.category.filmShare.replace('{{film}}', film),
-      focalLengthTitle: (focal: string) =>
-        i18nText.category.focalLengthTitle.replace('{{focal}}', focal),
-      focalLengthShare: (focal: string) =>
-        i18nText.category.focalLengthShare.replace('{{focal}}', focal),
-    },
-    admin: {
-      ...i18nText.admin,
-      deleteConfirm: (photoTitle: string) =>
-        i18nText.admin.deleteConfirm.replace('{{photoTitle}}', photoTitle),
-    },
-    misc: {
-      ...i18nText.misc,
-      copyPhrase: (label: string) =>
-        i18nText.misc.copyPhrase.replace('{{label}}', label),
-    },
-    utility: {
-      ...i18nText.utility,
-      paginate: (index: number, count: number) =>
-        i18nText.utility.paginate
-          .replace('{{index}}', index.toString())
-          .replace('{{count}}', count.toString()),
-      paginateAction: (index: number, count: number, action: string) =>
-        i18nText.utility.paginateAction
-          .replace('{{index}}', index.toString())
-          .replace('{{count}}', count.toString())
-          .replace('{{action}}', action),
-    },
-    dateLocale: getDateFnLocale(i18nText.locale),
-  };
-};
-
-export const LOCALE_TEXT: Record<string, I18NDeepPartial | undefined> = {
-  'pt-br': PT_BR,
-  'pt-pt': PT_PT,
-};
-
-export const getTextForLocale = (
   locale = '',
-) => {
+): Promise<I18N> => {
   const text = US_EN;
 
-  Object.entries(LOCALE_TEXT[locale.toLocaleLowerCase()] ?? {})
+  Object.entries(await LOCALE_TEXT[locale.toLocaleLowerCase()]?.() ?? {})
     .forEach(([key, value]) => {
       // Fall back to English for missing keys
       text[key as keyof I18N] = {
@@ -82,5 +28,5 @@ export const getTextForLocale = (
       };
     });
 
-  return generateI18NWithFunctions(text);
+  return text;
 };

src/i18n/state/AppTextProvider.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { getTextForLocale } from '..';
+import { APP_LOCALE } from '@/app/config';
+import AppTextProviderClient from './AppTextProviderClient';
+
+export default async function AppTextProvider({
+  children,
+}: {
+  children: ReactNode
+}) {
+  const value = await getTextForLocale(APP_LOCALE);
+  return (
+    <AppTextProviderClient {...{ value }}>
+      {children}
+    </AppTextProviderClient>
+  );
+}

src/i18n/state/AppTextProviderClient.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { AppTextContext } from './client';
+import { I18N } from '..';
+import { generateI18NState } from '.';
+
+export default function AppTextProviderClient({
+  children,
+  value,
+}: {
+  children: ReactNode
+  value: I18N
+}) {
+  return (
+    <AppTextContext.Provider value={generateI18NState(value)}>
+      {children}
+    </AppTextContext.Provider>
+  );
+}

src/i18n/state/client.ts

@@ -0,0 +1,9 @@
+'use client';
+
+import { createContext, use } from 'react';
+import { generateI18NState } from '.';
+import US_EN from '../locales/us-en';
+
+export const AppTextContext = createContext(generateI18NState(US_EN));
+
+export const useAppText = () => use(AppTextContext);

src/i18n/state/index.ts

@@ -0,0 +1,48 @@
+import { I18N } from '..';
+
+export type I18NState = ReturnType<typeof generateI18NState>;
+
+export const generateI18NState = (i18nText: I18N) => {
+  return {
+    ...i18nText,
+    category: {
+      ...i18nText.category,
+      cameraTitle: (camera: string) =>
+        i18nText.category.cameraTitle.replace('{{camera}}', camera),
+      cameraShare: (camera: string) =>
+        i18nText.category.cameraShare.replace('{{camera}}', camera),
+      taggedPhrase: (tag: string) =>
+        i18nText.category.taggedPhrase.replace('{{tag}}', tag),
+      recipeShare: (recipe: string) =>
+        i18nText.category.recipeShare.replace('{{recipe}}', recipe),
+      filmShare: (film: string) =>
+        i18nText.category.filmShare.replace('{{film}}', film),
+      focalLengthTitle: (focal: string) =>
+        i18nText.category.focalLengthTitle.replace('{{focal}}', focal),
+      focalLengthShare: (focal: string) =>
+        i18nText.category.focalLengthShare.replace('{{focal}}', focal),
+    },
+    admin: {
+      ...i18nText.admin,
+      deleteConfirm: (photoTitle: string) =>
+        i18nText.admin.deleteConfirm.replace('{{photoTitle}}', photoTitle),
+    },
+    misc: {
+      ...i18nText.misc,
+      copyPhrase: (label: string) =>
+        i18nText.misc.copyPhrase.replace('{{label}}', label),
+    },
+    utility: {
+      ...i18nText.utility,
+      paginate: (index: number, count: number) =>
+        i18nText.utility.paginate
+          .replace('{{index}}', index.toString())
+          .replace('{{count}}', count.toString()),
+      paginateAction: (index: number, count: number, action: string) =>
+        i18nText.utility.paginateAction
+          .replace('{{index}}', index.toString())
+          .replace('{{count}}', count.toString())
+          .replace('{{action}}', action),
+    },
+  };
+};

src/i18n/state/server.ts

@@ -0,0 +1,6 @@
+import { APP_LOCALE } from '@/app/config';
+import { getTextForLocale } from '..';
+import { generateI18NState } from '.';
+
+export const getAppText = async () =>
+  getTextForLocale(APP_LOCALE).then(generateI18NState);

src/lens/LensHeader.tsx

@@ -4,8 +4,9 @@ import { Lens, lensFromPhoto } from '.';
 import PhotoLens from './PhotoLens';
 import { descriptionForLensPhotos } from './meta';
 import { AI_TEXT_GENERATION_ENABLED } from '@/app/config';
+import { getAppText } from '@/i18n/state/server';
 
-export default function LensHeader({
+export default async function LensHeader({
   lens: lensProp,
   photos,
   selectedPhoto,
@@ -21,12 +22,19 @@ export default function LensHeader({
   dateRange?: PhotoDateRange
 }) {
   const lens = lensFromPhoto(photos[0], lensProp);
+  const appText = await getAppText();
   return (
     <PhotoHeader
       lens={lens}
       entity={<PhotoLens {...{ lens }} contrast="high" />}
       entityDescription={
-        descriptionForLensPhotos(photos, undefined, count, dateRange)}
+        descriptionForLensPhotos(
+          photos,
+          appText,
+          undefined,
+          count,
+          dateRange,
+        )}
       photos={photos}
       selectedPhoto={selectedPhoto}
       indexNumber={indexNumber}

src/lens/LensOGTile.tsx

@@ -3,8 +3,9 @@ import { absolutePathForLensImage, pathForLens } from '@/app/paths';
 import OGTile, { OGLoadingState } from '@/components/OGTile';
 import { Lens } from '.';
 import { titleForLens, descriptionForLensPhotos } from './meta';
+import { getAppText } from '@/i18n/state/server';
 
-export default function LensOGTile({
+export default async function LensOGTile({
   lens,
   photos,
   loadingState: loadingStateExternal,
@@ -25,10 +26,17 @@ export default function LensOGTile({
   count?: number
   dateRange?: PhotoDateRange
 }) {
+  const appText = await getAppText();
   return (
     <OGTile {...{
-      title: titleForLens(lens, photos, count),
+      title: titleForLens(lens, photos, appText, count),
-      description: descriptionForLensPhotos(photos, true, count, dateRange),
+      description: descriptionForLensPhotos(
+        photos,
+        appText,
+        true,
+        count,
+        dateRange,
+      ),
       path: pathForLens(lens),
       pathImageAbsolute: absolutePathForLensImage(lens),
       loadingState: loadingStateExternal,

src/lens/LensShareModal.tsx

@@ -4,8 +4,9 @@ import ShareModal from '@/share/ShareModal';
 import { formatLensText, Lens } from '.';
 import { shareTextForLens } from './meta';
 import LensOGTile from './LensOGTile';
+import { getAppText } from '@/i18n/state/server';
 
-export default function LensShareModal({
+export default async function LensShareModal({
   lens,
   photos,
   count,
@@ -13,11 +14,12 @@ export default function LensShareModal({
 }: {
   lens: Lens
 } & PhotoSetAttributes) {
+  const appText = await getAppText();
   return (
     <ShareModal
       pathShare={absolutePathForLens(lens, true)}
       navigatorTitle={formatLensText(lens)}
-      socialText={shareTextForLens(lens, photos)}
+      socialText={shareTextForLens(lens, photos, appText)}
     >
       <LensOGTile {...{ lens, photos, count, dateRange }} />
     </ShareModal>

src/lens/meta.ts

@@ -9,7 +9,7 @@ import {
   absolutePathForLens,
   absolutePathForLensImage,
 } from '@/app/paths';
-import { APP_TEXT } from '@/app/config';
+import { I18NState } from '@/i18n/state';
 
 // Meta functions moved to separate file to avoid
 // dependencies (camelcase-keys) found in photo/index.ts
@@ -18,30 +18,34 @@ import { APP_TEXT } from '@/app/config';
 export const titleForLens = (
   lens: Lens,
   photos: Photo[],
+  appText: I18NState,
   explicitCount?: number,
 ) => [
-  `${APP_TEXT.category.lens}:`,
+  `${appText.category.lens}:`,
   formatLensText(lensFromPhoto(photos[0], lens)),
-  photoQuantityText(explicitCount ?? photos.length),
+  photoQuantityText(explicitCount ?? photos.length, appText),
 ].join(' ');
 
 export const shareTextForLens = (
   lens: Lens,
   photos: Photo[],
+  appText: I18NState,
 ) =>
   [
-    `${APP_TEXT.category.lens}:`,
+    `${appText.category.lens}:`,
     formatLensText(lensFromPhoto(photos[0], lens)),
   ].join(' ');
 
 export const descriptionForLensPhotos = (
   photos: Photo[],
+  appText: I18NState,
   dateBased?: boolean,
   explicitCount?: number,
   explicitDateRange?: PhotoDateRange,
 ) =>
   descriptionForPhotoSet(
     photos,
+    appText,
     undefined,
     dateBased,
     explicitCount,
@@ -51,12 +55,19 @@ export const descriptionForLensPhotos = (
 export const generateMetaForLens = (
   lens: Lens,
   photos: Photo[],
+  appText: I18NState,
   explicitCount?: number,
   explicitDateRange?: PhotoDateRange,
 ) => ({
   url: absolutePathForLens(lens),
-  title: titleForLens(lens, photos, explicitCount),
+  title: titleForLens(lens, photos, appText, explicitCount),
   description:
-    descriptionForLensPhotos(photos, true, explicitCount, explicitDateRange),
+    descriptionForLensPhotos(
+      photos,
+      appText,
+      true,
+      explicitCount,
+      explicitDateRange,
+    ),
   images: absolutePathForLensImage(lens),
 });

src/photo/PhotoDate.tsx

@@ -2,7 +2,7 @@ import ResponsiveDate from '@/components/ResponsiveDate';
 import { Photo } from '.';
 import { useMemo } from 'react';
 import { Timezone } from '@/utility/timezone';
-import { APP_TEXT } from '@/app/config';
+import { useAppText } from '@/i18n/state/client';
 
 export default function PhotoDate({
   photo,
@@ -31,14 +31,16 @@ export default function PhotoDate({
     photo.updatedAt,
   ]);
 
+  const appText = useAppText();
+
   const getTitleLabel = () => {
     switch (dateType) {
     case 'takenAt':
-      return APP_TEXT.photo.taken;
+      return appText.photo.taken;
     case 'createdAt':
-      return APP_TEXT.photo.created;
+      return appText.photo.created;
     case 'updatedAt':
-      return APP_TEXT.photo.updated;
+      return appText.photo.updated;
     }
   };
 

src/photo/PhotoGridSidebar.tsx

@@ -10,7 +10,7 @@ import FavsTag from '../tag/FavsTag';
 import { useAppState } from '@/state/AppState';
 import { useMemo, useRef } from 'react';
 import HiddenTag from '@/tag/HiddenTag';
-import { APP_TEXT, CATEGORY_VISIBILITY } from '@/app/config';
+import { CATEGORY_VISIBILITY } from '@/app/config';
 import { clsx } from 'clsx/lite';
 import PhotoRecipe from '@/recipe/PhotoRecipe';
 import IconCamera from '@/components/icons/IconCamera';
@@ -26,6 +26,7 @@ import {
 } from '@/category';
 import PhotoFocalLength from '@/focal/PhotoFocalLength';
 import useElementHeight from '@/utility/useElementHeight';
+import { useAppText } from '@/i18n/state/client';
 
 const APPROXIMATE_ITEM_HEIGHT = 34;
 const ABOUT_HEIGHT_OFFSET = 80;
@@ -58,6 +59,8 @@ export default function PhotoGridSidebar({
     categories,
   );
 
+  const appText = useAppText();
+
   const aboutRef = useRef<HTMLParagraphElement>(null);
   const aboutHeight = useElementHeight(aboutRef);
   const height = containerHeight
@@ -72,7 +75,10 @@ export default function PhotoGridSidebar({
     )
     : undefined;
 
-  const { start, end } = dateRangeForPhotos(undefined, photosDateRange);
+  const { start, end } = dateRangeForPhotos(
+    undefined,
+    photosDateRange,
+  );
 
   const { photosCountHidden } = useAppState();
 
@@ -83,7 +89,7 @@ export default function PhotoGridSidebar({
   const camerasContent = cameras.length > 0
     ? <HeaderList
       key="cameras"
-      title={APP_TEXT.category.cameraPlural}
+      title={appText.category.cameraPlural}
       icon={<IconCamera
         size={15}
         className="translate-x-[0.5px]"
@@ -107,7 +113,7 @@ export default function PhotoGridSidebar({
   const lensesContent = lenses.length > 0
     ? <HeaderList
       key="lenses"
-      title={APP_TEXT.category.lensPlural}
+      title={appText.category.lensPlural}
       icon={<IconLens size={15} />}
       maxItems={maxItemsPerCategory}
       items={lenses
@@ -127,7 +133,7 @@ export default function PhotoGridSidebar({
   const tagsContent = tags.length > 0
     ? <HeaderList
       key="tags"
-      title={APP_TEXT.category.tagPlural}
+      title={appText.category.tagPlural}
       icon={<IconTag
         size={14}
         className="translate-x-[1px] translate-y-[1px]"
@@ -172,7 +178,7 @@ export default function PhotoGridSidebar({
   const recipesContent = recipes.length > 0
     ? <HeaderList
       key="recipes"
-      title={APP_TEXT.category.recipePlural}
+      title={appText.category.recipePlural}
       icon={<IconRecipe
         size={16}
         className="translate-x-[-1px]"
@@ -195,7 +201,7 @@ export default function PhotoGridSidebar({
   const filmsContent = films.length > 0
     ? <HeaderList
       key="films"
-      title={APP_TEXT.category.filmPlural}
+      title={appText.category.filmPlural}
       icon={<IconFilm size={15} />}
       maxItems={maxItemsPerCategory}
       items={films
@@ -213,7 +219,7 @@ export default function PhotoGridSidebar({
   const focalLengthsContent = focalLengths.length > 0
     ? <HeaderList
       key="focal-lengths"
-      title={APP_TEXT.category.focalLengthPlural}
+      title={appText.category.focalLengthPlural}
       icon={<IconFocalLength size={13} />}
       maxItems={maxItemsPerCategory}
       items={focalLengths.map(({ focal, count }) =>
@@ -232,14 +238,14 @@ export default function PhotoGridSidebar({
     ? start
       ? <HeaderList
         key="photo-stats"
-        title={photoQuantityText(photosCount, false)}
+        title={photoQuantityText(photosCount, appText, false)}
         items={start === end
           ? [start]
           : [`${end} –`, start]}
       />
       : <HeaderList
         key="photo-stats"
-        items={[photoQuantityText(photosCount, false)]}
+        items={[photoQuantityText(photosCount, appText, false)]}
       />
     : null;
 

src/photo/PhotoHeader.tsx

@@ -17,13 +17,13 @@ import PhotoLink from './PhotoLink';
 import ResponsiveText from '@/components/primitives/ResponsiveText';
 import { useAppState } from '@/state/AppState';
 import { GRID_GAP_CLASSNAME } from '@/components';
-import { APP_TEXT } from '@/app/config';
+import { useAppText } from '@/i18n/state/client';
 
 export default function PhotoHeader({
   photos,
   selectedPhoto,
   entity,
-  entityVerb = APP_TEXT.photo.photo.toLocaleUpperCase(),
+  entityVerb: _entityVerb,
   entityDescription,
   indexNumber,
   count,
@@ -45,6 +45,10 @@ export default function PhotoHeader({
 } & PhotoSetCategory) {
   const { isGridHighDensity } = useAppState();
 
+  const appText = useAppText();
+
+  const entityVerb = _entityVerb ?? appText.photo.photo.toLocaleUpperCase();
+
   const { start, end } = dateRangeForPhotos(photos, dateRange);
 
   const selectedPhotoIndex = selectedPhoto
@@ -155,13 +159,13 @@ export default function PhotoHeader({
                   }} />}
               </>
               : <ResponsiveText
-                shortText={APP_TEXT.utility.paginateAction(
+                shortText={appText.utility.paginateAction(
                   paginationIndex,
                   paginationCount,
                   entityVerb,
                 )}
               >
-                {APP_TEXT.utility.paginateAction(
+                {appText.utility.paginateAction(
                   paginationIndex,
                   paginationCount,
                   entityVerb)}

src/photo/PhotoLarge.tsx

@@ -31,7 +31,6 @@ import {
   SHOW_TAKEN_AT_TIME,
   MATTE_COLOR,
   MATTE_COLOR_DARK,
-  APP_TEXT,
 } from '@/app/config';
 import AdminPhotoMenu from '@/admin/AdminPhotoMenu';
 import { RevalidatePhoto } from './InfinitePhotoScroll';
@@ -51,6 +50,7 @@ import PhotoLens from '@/lens/PhotoLens';
 import { lensFromPhoto } from '@/lens';
 import MaskedScroll from '@/components/MaskedScroll';
 import useCategoryCountsForPhoto from '@/category/useCategoryCountsForPhoto';
+import { useAppText } from '@/i18n/state/client';
 
 export default function PhotoLarge({
   photo,
@@ -117,6 +117,8 @@ export default function PhotoLarge({
     isUserSignedIn,
   } = useAppState();
 
+  const appText = useAppText();
+
   const {
     cameraCount,
     lensCount,
@@ -379,7 +381,7 @@ export default function PhotoLarge({
                           <>
                             {' '}
                             <Tooltip
-                              content={APP_TEXT.tooltip['35mm']}
+                              content={appText.tooltip['35mm']}
                               sideOffset={3}
                               supportMobile
                             >
@@ -435,7 +437,7 @@ export default function PhotoLarge({
                   )}>
                     {showZoomControls &&
                       <LoaderButton
-                        tooltip={APP_TEXT.tooltip.zoom}
+                        tooltip={appText.tooltip.zoom}
                         icon={<LuExpand size={15} />}
                         onClick={() => refZoomControls.current?.open()}
                         styleAs="link"
@@ -444,7 +446,7 @@ export default function PhotoLarge({
                       />}
                     {shouldShare &&
                       <ShareButton
-                        tooltip={APP_TEXT.tooltip.sharePhoto}
+                        tooltip={appText.tooltip.sharePhoto}
                         photo={photo}
                         tag={shouldShareTag
                           ? primaryTag

src/photo/PhotoPrevNextActions.tsx

@@ -25,13 +25,13 @@ import { isPhotoFav } from '@/tag';
 import Tooltip from '@/components/Tooltip';
 import {
   ALLOW_PUBLIC_DOWNLOADS,
-  APP_TEXT,
   SHOW_KEYBOARD_SHORTCUT_TOOLTIPS,
 } from '@/app/config';
 import { downloadFileFromBrowser } from '@/utility/url';
 import useKeydownHandler from '@/utility/useKeydownHandler';
 import { KEY_COMMANDS } from './key-commands';
 import { syncPhotoConfirmText } from '@/admin/confirm';
+import { useAppText } from '@/i18n/state/client';
 
 const ANIMATION_LEFT: AnimationConfig = { type: 'left', duration: 0.3 };
 const ANIMATION_RIGHT: AnimationConfig = { type: 'right', duration: 0.3 };
@@ -50,6 +50,8 @@ export default function PhotoPrevNextActions({
 } & PhotoSetCategory) {
   const { setNextPhotoAnimation, isUserSignedIn } = useAppState();
 
+  const appText = useAppText();
+
   const photoTitle = photo
     ? photo.title
       ? `'${photo.title}'`
@@ -201,7 +203,7 @@ export default function PhotoPrevNextActions({
         '*:select-none',
       )}>
         <Tooltip {...SHOW_KEYBOARD_SHORTCUT_TOOLTIPS && {
-          content: APP_TEXT.nav.prev,
+          content: appText.nav.prev,
           keyCommand: KEY_COMMANDS.prev[0],
         }}>
           <PhotoLink
@@ -215,7 +217,7 @@ export default function PhotoPrevNextActions({
           >
             <FiChevronLeft className="sm:hidden text-[1.1rem]" />
             <span className="hidden sm:inline-block uppercase">
-              {APP_TEXT.nav.prevShort}
+              {appText.nav.prevShort}
             </span>
           </PhotoLink>
         </Tooltip>
@@ -223,7 +225,7 @@ export default function PhotoPrevNextActions({
           /
         </span>
         <Tooltip {...SHOW_KEYBOARD_SHORTCUT_TOOLTIPS && {
-          content: APP_TEXT.nav.next,
+          content: appText.nav.next,
           keyCommand: KEY_COMMANDS.next[0],
         }}>
           <PhotoLink
@@ -237,7 +239,7 @@ export default function PhotoPrevNextActions({
           >
             <FiChevronRight className="sm:hidden text-[1.1rem]" />
             <span className="hidden sm:inline-block uppercase">
-              {APP_TEXT.nav.nextShort}
+              {appText.nav.nextShort}
             </span>
           </PhotoLink>
         </Tooltip>

src/photo/PhotoUploadWithStatus.tsx

@@ -11,7 +11,7 @@ import { useRef } from 'react';
 import { useEffect } from 'react';
 import Spinner from '@/components/Spinner';
 import ResponsiveText from '@/components/primitives/ResponsiveText';
-import { APP_TEXT } from '@/app/config';
+import { useAppText } from '@/i18n/state/client';
 
 export default function PhotoUploadWithStatus({
   inputRef,
@@ -45,6 +45,8 @@ export default function PhotoUploadWithStatus({
     resetUploadState,
   } = useAppState();
 
+  const appText = useAppText();
+
   const router = useRouter();
 
   useEffect(() => {
@@ -77,7 +79,7 @@ export default function PhotoUploadWithStatus({
   const isFinishing = isPending && shouldResetUploadStateAfterPending.current;
 
   const uploadStatusText = filesLength > 1
-    ? APP_TEXT.utility.paginate(fileUploadIndex + 1, filesLength)
+    ? appText.utility.paginate(fileUploadIndex + 1, filesLength)
     : undefined;
 
   return (
@@ -160,19 +162,19 @@ export default function PhotoUploadWithStatus({
             {isUploading
               ? isFinishing
                 ? <>
-                  {APP_TEXT.misc.finishing}
+                  {appText.misc.finishing}
                 </>
                 : <>
                   {!showButton && uploadStatusText
                     ? <>
                       <ResponsiveText shortText={uploadStatusText}>
-                        {APP_TEXT.misc.uploading} {uploadStatusText}
+                        {appText.misc.uploading} {uploadStatusText}
                       </ResponsiveText>
                       {': '}
                       {fileUploadName}
                     </>
                     : <ResponsiveText shortText={fileUploadName}>
-                      {APP_TEXT.misc.uploading} {fileUploadName}
+                      {appText.misc.uploading} {fileUploadName}
                     </ResponsiveText>}
                 </>
               : !showButton && <>Initializing</>}

src/photo/PhotosEmptyState.tsx

@@ -1,7 +1,6 @@
 import Container from '@/components/Container';
 import AppGrid from '@/components/AppGrid';
 import {
-  APP_TEXT,
   IS_SITE_READY,
   PRESERVE_ORIGINAL_UPLOADS,
 } from '@/app/config';
@@ -13,8 +12,11 @@ import SignInOrUploadClient from '@/admin/SignInOrUploadClient';
 import Link from 'next/link';
 import { PATH_ADMIN_CONFIGURATION } from '@/app/paths';
 import AnimateItems from '@/components/AnimateItems';
+import { getAppText } from '@/i18n/state/server';
+
+export default async function PhotosEmptyState() {
+  const appText = await getAppText();
 
-export default function PhotosEmptyState() {
   return (
     <AppGrid
       contentMain={
@@ -34,8 +36,8 @@ export default function PhotosEmptyState() {
                 'text-gray-700 dark:text-gray-200',
               )}>
                 {!IS_SITE_READY
-                  ? APP_TEXT.onboarding.setupIncomplete
+                  ? appText.onboarding.setupIncomplete
-                  : APP_TEXT.onboarding.setupComplete}
+                  : appText.onboarding.setupComplete}
               </div>
               {!IS_SITE_READY
                 ? <AdminAppConfiguration simplifiedView />
@@ -49,7 +51,7 @@ export default function PhotosEmptyState() {
                     }}
                   />
                   <div>
-                    {APP_TEXT.onboarding.setupConfig}
+                    {appText.onboarding.setupConfig}
                     {' '}
                     <Link
                       href={PATH_ADMIN_CONFIGURATION}

src/photo/form/PhotoForm.tsx

@@ -46,6 +46,7 @@ import { isMakeFujifilm } from '@/platforms/fujifilm';
 import PhotoFilmIcon from '@/film/PhotoFilmIcon';
 import FieldsetFavs from './FieldsetFavs';
 import FieldsetHidden from './FieldsetHidden';
+import { useAppText } from '@/i18n/state/client';
 
 const THUMBNAIL_SIZE = 300;
 
@@ -84,6 +85,8 @@ export default function PhotoForm({
 
   const { invalidateSwr, shouldDebugImageFallbacks } = useAppState();
 
+  const appText = useAppText();
+
   const changedFormKeys = useMemo(() =>
     getChangedFormFields(initialPhotoForm, formData),
   [initialPhotoForm, formData]);
@@ -328,7 +331,7 @@ export default function PhotoForm({
         {/* Fields */}
         <div className="space-y-6">
           {FORM_METADATA_ENTRIES(
-            convertTagsForForm(uniqueTags),
+            convertTagsForForm(uniqueTags, appText),
             convertRecipesForForm(uniqueRecipes),
             convertFilmsForForm(uniqueFilms, isMakeFujifilm(formData.make)),
             aiContent !== undefined,

src/photo/index.ts

@@ -2,7 +2,6 @@ import { formatFocalLength } from '@/focal';
 import { getNextImageUrlForRequest } from '@/platforms/next-image';
 import { photoHasFilmData } from '@/film';
 import {
-  APP_TEXT,
   HIGH_DENSITY_GRID,
   IS_PREVIEW,
   SHOW_EXIF_DATA,
@@ -25,6 +24,7 @@ import type { Metadata } from 'next';
 import { FujifilmRecipe } from '@/platforms/fujifilm/recipe';
 import { FujifilmSimulation } from '@/platforms/fujifilm/simulation';
 import { PhotoSyncStatus, generatePhotoSyncStatus } from './sync';
+import { I18NState } from '@/i18n/state';
 
 // INFINITE SCROLL: FEED
 export const INFINITE_SCROLL_FEED_INITIAL =
@@ -232,10 +232,14 @@ export const titleForPhoto = (
 export const altTextForPhoto = (photo: Photo) =>
   photo.semanticDescription || titleForPhoto(photo);
 
-export const photoLabelForCount = (count: number, _capitalize = true) => {
+export const photoLabelForCount = (
+  count: number,
+  appText: I18NState,
+  _capitalize = true,
+) => {
   const label = count === 1
-    ? APP_TEXT.photo.photo
+    ? appText.photo.photo
-    : APP_TEXT.photo.photoPlural;
+    : appText.photo.photoPlural;
   return _capitalize
     ? capitalize(label)
     : label;
@@ -243,31 +247,38 @@ export const photoLabelForCount = (count: number, _capitalize = true) => {
 
 export const photoQuantityText = (
   count: number,
+  appText: I18NState,
   includeParentheses = true,
   capitalize?: boolean,
 ) =>
   includeParentheses
-    ? `(${count} ${photoLabelForCount(count, capitalize)})`
+    ? `(${count} ${photoLabelForCount(count, appText, capitalize)})`
-    : `${count} ${photoLabelForCount(count, capitalize)}`;  
+    : `${count} ${photoLabelForCount(count, appText, capitalize)}`;  
 
-export const deleteConfirmationTextForPhoto = (photo: Photo) =>
+export const deleteConfirmationTextForPhoto = (
-  APP_TEXT.admin.deleteConfirm(titleForPhoto(photo));
+  photo: Photo,
+  appText: I18NState,
+) =>
+  appText.admin.deleteConfirm(titleForPhoto(photo));
 
 export type PhotoDateRange = { start: string, end: string };
 
 export const descriptionForPhotoSet = (
   photos:Photo[] = [],
+  appText: I18NState,
   descriptor?: string,
   dateBased?: boolean,
   explicitCount?: number,
   explicitDateRange?: PhotoDateRange,
 ) =>
   dateBased
-    ? dateRangeForPhotos(photos, explicitDateRange).description.toUpperCase()
+    ? dateRangeForPhotos(photos, explicitDateRange)
+      .description
+      .toLocaleUpperCase()
     : [
       explicitCount ?? photos.length, (
         descriptor ||
-        photoLabelForCount(explicitCount ?? photos.length, false)
+        photoLabelForCount(explicitCount ?? photos.length, appText, false)
       ),
     ].join(' ');
 

src/recipe/PhotoRecipeOverlay.tsx

@@ -19,7 +19,7 @@ import { TbChecklist } from 'react-icons/tb';
 import CopyButton from '@/components/CopyButton';
 import { labelForFilm } from '@/film';
 import PhotoRecipe from './PhotoRecipe';
-import { APP_TEXT } from '@/app/config';
+import { useAppText } from '@/i18n/state/client';
 
 export default function PhotoRecipeOverlay({
   ref,
@@ -47,6 +47,8 @@ export default function PhotoRecipeOverlay({
     bwMagentaGreen,
   } = data;
 
+  const appText = useAppText();
+
   const whiteBalanceTypeFormatted = formatWhiteBalance(data);
 
   const renderDataSquare = (
@@ -139,7 +141,7 @@ export default function PhotoRecipeOverlay({
             'text-black/40 active:text-black/75',
             'hover:text-black/40',
           )}
-          tooltip={APP_TEXT.tooltip.recipeCopy}
+          tooltip={appText.tooltip.recipeCopy}
           tooltipColor="frosted"
         />
         <span>

src/recipe/PhotoRecipeOverlayButton.tsx

@@ -4,7 +4,7 @@ import clsx from 'clsx/lite';
 import { FaPlus } from 'react-icons/fa6';
 import Tooltip from '@/components/Tooltip';
 import { useRef } from 'react';
-import { APP_TEXT } from '@/app/config';
+import { useAppText } from '@/i18n/state/client';
 
 export default function PhotoRecipeOverlayButton({
   className,
@@ -17,8 +17,10 @@ export default function PhotoRecipeOverlayButton({
 }) {
   const ref = useRef<HTMLButtonElement>(null);
 
+  const appText = useAppText();
+
   return (
-    <Tooltip content={APP_TEXT.tooltip.recipeInfo}>
+    <Tooltip content={appText.tooltip.recipeInfo}>
       <button
         ref={ref}
         onClick={() => {

src/recipe/RecipeHeader.tsx

@@ -6,6 +6,7 @@ import PhotoRecipe from './PhotoRecipe';
 import { useAppState } from '@/state/AppState';
 import { descriptionForRecipePhotos, getRecipePropsFromPhotos } from '.';
 import { AI_TEXT_GENERATION_ENABLED } from '@/app/config';
+import { useAppText } from '@/i18n/state/client';
 
 export default function RecipeHeader({
   recipe,
@@ -24,6 +25,8 @@ export default function RecipeHeader({
 }) {
   const { recipeModalProps, setRecipeModalProps } = useAppState();
 
+  const appText = useAppText();
+
   const recipeProps = getRecipePropsFromPhotos(photos, selectedPhoto);
 
   return (
@@ -37,7 +40,13 @@ export default function RecipeHeader({
           ? () => setRecipeModalProps?.(recipeProps)
           : undefined}
       />}
-      entityDescription={descriptionForRecipePhotos(photos, undefined, count)}
+      entityDescription={descriptionForRecipePhotos(
+        photos,
+        appText,
+        undefined,
+        count,
+        dateRange,
+      )}
       photos={photos}
       selectedPhoto={selectedPhoto}
       indexNumber={indexNumber}

src/recipe/RecipeOGTile.tsx

@@ -2,8 +2,9 @@ import { Photo, PhotoDateRange } from '@/photo';
 import { absolutePathForRecipeImage, pathForRecipe } from '@/app/paths';
 import OGTile, { OGLoadingState } from '@/components/OGTile';
 import { descriptionForRecipePhotos, titleForRecipe } from '.';
+import { getAppText } from '@/i18n/state/server';
 
-export default function RecipeOGTile({
+export default async function RecipeOGTile({
   recipe,
   photos,
   loadingState: loadingStateExternal,
@@ -24,10 +25,17 @@ export default function RecipeOGTile({
   count?: number
   dateRange?: PhotoDateRange
 }) {
+  const appText = await getAppText();
   return (
     <OGTile {...{
-      title: titleForRecipe(recipe, photos, count),
+      title: titleForRecipe(recipe, photos, appText, count),
-      description: descriptionForRecipePhotos(photos, true, count, dateRange),
+      description: descriptionForRecipePhotos(
+        photos,
+        appText,
+        true,
+        count,
+        dateRange,
+      ),
       path: pathForRecipe(recipe),
       pathImageAbsolute: absolutePathForRecipeImage(recipe),
       loadingState: loadingStateExternal,

src/recipe/RecipeShareModal.tsx

@@ -8,8 +8,9 @@ import {
   generateRecipeText,
 } from '.';
 import RecipeOGTile from './RecipeOGTile';
+import { getAppText } from '@/i18n/state/server';
 
-export default function RecipeShareModal({
+export default async function RecipeShareModal({
   recipe,
   photos,
   count,
@@ -23,10 +24,12 @@ export default function RecipeShareModal({
     ? generateRecipeText({ data, film })
     : undefined;
 
+  const appText = await getAppText();
+
   return (
     <ShareModal
       pathShare={absolutePathForRecipe(recipe, true)}
-      socialText={shareTextForRecipe(recipe)}
+      socialText={shareTextForRecipe(recipe, appText)}
       navigatorTitle={formatRecipe(recipe)}
       navigatorText={recipeText}
     >

src/recipe/index.ts

@@ -8,7 +8,7 @@ import {
 } from '@/utility/string';
 import { FujifilmRecipe } from '@/platforms/fujifilm/recipe';
 import { labelForFilm } from '@/film';
-import { APP_TEXT } from '@/app/config';
+import { I18NState } from '@/i18n/state';
 
 export type RecipeWithCount = {
   recipe: string
@@ -31,23 +31,29 @@ export const formatRecipe = (recipe?: string) =>
 export const titleForRecipe = (
   recipe: string,
   photos:Photo[] = [],
+  appText: I18NState,
   explicitCount?: number,
 ) => [
-  `${APP_TEXT.category.recipe}: ${formatRecipe(recipe)}`,
+  `${appText.category.recipe}: ${formatRecipe(recipe)}`,
-  photoQuantityText(explicitCount ?? photos.length),
+  photoQuantityText(explicitCount ?? photos.length, appText),
 ].join(' ');
 
-export const shareTextForRecipe = (recipe: string) =>
+export const shareTextForRecipe = (
-  APP_TEXT.category.recipeShare(formatRecipe(recipe));
+  recipe: string,
+  appText: I18NState,
+) =>
+  appText.category.recipeShare(formatRecipe(recipe));
 
 export const descriptionForRecipePhotos = (
   photos: Photo[] = [],
+  appText: I18NState,
   dateBased?: boolean,
   explicitCount?: number,
   explicitDateRange?: PhotoDateRange,
 ) =>
   descriptionForPhotoSet(
     photos,
+    appText,
     undefined,
     dateBased,
     explicitCount,
@@ -139,13 +145,20 @@ export const generateRecipeText = (
 export const generateMetaForRecipe = (
   recipe: string,
   photos: Photo[],
+  appText: I18NState,
   explicitCount?: number,
   explicitDateRange?: PhotoDateRange,
 ) => ({
   url: absolutePathForRecipe(recipe),
-  title: titleForRecipe(recipe, photos, explicitCount),
+  title: titleForRecipe(recipe, photos, appText, explicitCount),
   description:
-    descriptionForRecipePhotos(photos, true, explicitCount, explicitDateRange),
+    descriptionForRecipePhotos(
+      photos,
+      appText,
+      true,
+      explicitCount,
+      explicitDateRange,
+    ),
   images: absolutePathForRecipeImage(recipe),
 });
 

src/share/ShareModal.tsx

@@ -8,12 +8,13 @@ import { ReactNode, useEffect } from 'react';
 import { shortenUrl } from '@/utility/url';
 import { toastSuccess } from '@/toast';
 import { PiXLogo } from 'react-icons/pi';
-import { APP_TEXT, SHOW_SOCIAL } from '@/app/config';
+import { SHOW_SOCIAL } from '@/app/config';
 import { generateXPostText } from '@/utility/social';
 import { useAppState } from '@/state/AppState';
 import useOnPathChange from '@/utility/useOnPathChange';
 import { IoArrowUp } from 'react-icons/io5';
 import MaskedScroll from '@/components/MaskedScroll';
+import { useAppText } from '@/i18n/state/client';
 
 export default function ShareModal({
   title,
@@ -35,6 +36,8 @@ export default function ShareModal({
     setShouldRespondToKeyboardCommands,
   } = useAppState();
 
+  const appText = useAppText();
+
   useEffect(() => {
     setShouldRespondToKeyboardCommands?.(false);
     return () => setShouldRespondToKeyboardCommands?.(true);
@@ -96,7 +99,7 @@ export default function ShareModal({
               <BiCopy size={18} />,
               () => {
                 navigator.clipboard.writeText(pathShare);
-                toastSuccess(APP_TEXT.photo.copied);
+                toastSuccess(appText.photo.copied);
               },
               true,
             )}

src/tag/HiddenHeader.tsx

@@ -2,8 +2,9 @@ import { Photo, photoQuantityText } from '@/photo';
 import PhotoHeader from '@/photo/PhotoHeader';
 import HiddenTag from './HiddenTag';
 import { AI_TEXT_GENERATION_ENABLED } from '@/app/config';
+import { getAppText } from '@/i18n/state/server';
 
-export default function HiddenHeader({
+export default async function HiddenHeader({
   photos,
   selectedPhoto,
   indexNumber,
@@ -14,11 +15,12 @@ export default function HiddenHeader({
   indexNumber?: number
   count: number
 }) {
+  const appText = await getAppText();
   return (
     <PhotoHeader
       key="HiddenHeader"
       entity={<HiddenTag contrast="high" />}
-      entityDescription={photoQuantityText(count, false)}
+      entityDescription={photoQuantityText(count, appText, false, false)}
       photos={photos}
       selectedPhoto={selectedPhoto}
       indexNumber={indexNumber}

src/tag/TagHeader.tsx

@@ -3,9 +3,10 @@ import PhotoTag from './PhotoTag';
 import { descriptionForTaggedPhotos, isTagFavs } from '.';
 import PhotoHeader from '@/photo/PhotoHeader';
 import FavsTag from './FavsTag';
-import { AI_TEXT_GENERATION_ENABLED, APP_TEXT } from '@/app/config';
+import { AI_TEXT_GENERATION_ENABLED } from '@/app/config';
+import { getAppText } from '@/i18n/state/server';
 
-export default function TagHeader({
+export default async function TagHeader({
   tag,
   photos,
   selectedPhoto,
@@ -20,14 +21,20 @@ export default function TagHeader({
   count?: number
   dateRange?: PhotoDateRange
 }) {
+  const appText = await getAppText();
   return (
     <PhotoHeader
       tag={tag}
       entity={isTagFavs(tag) 
         ? <FavsTag contrast="high" />
         : <PhotoTag tag={tag} contrast="high" />}
-      entityVerb={APP_TEXT.category.taggedPhotos}
+      entityVerb={appText.category.taggedPhotos}
-      entityDescription={descriptionForTaggedPhotos(photos, undefined, count)}
+      entityDescription={descriptionForTaggedPhotos(
+        photos,
+        appText,
+        undefined,
+        count,
+      )}
       photos={photos}
       selectedPhoto={selectedPhoto}
       indexNumber={indexNumber}

src/tag/TagOGTile.tsx

@@ -2,8 +2,9 @@ import { Photo, PhotoDateRange } from '@/photo';
 import { absolutePathForTagImage, pathForTag } from '@/app/paths';
 import OGTile, { OGLoadingState } from '@/components/OGTile';
 import { descriptionForTaggedPhotos, titleForTag } from '.';
+import { getAppText } from '@/i18n/state/server';
 
-export default function TagOGTile({
+export default async function TagOGTile({
   tag,
   photos,
   loadingState: loadingStateExternal,
@@ -24,10 +25,17 @@ export default function TagOGTile({
   count?: number
   dateRange?: PhotoDateRange
 }) {
+  const appText = await getAppText();
   return (
     <OGTile {...{
-      title: titleForTag(tag, photos, count),
+      title: titleForTag(tag, photos, appText, count),
-      description: descriptionForTaggedPhotos(photos, true, count, dateRange),
+      description: descriptionForTaggedPhotos(
+        photos,
+        appText,
+        true,
+        count,
+        dateRange,
+      ),
       path: pathForTag(tag),
       pathImageAbsolute: absolutePathForTagImage(tag),
       loadingState: loadingStateExternal,

src/tag/TagShareModal.tsx

@@ -3,8 +3,9 @@ import { PhotoSetAttributes } from '../category';
 import ShareModal from '@/share/ShareModal';
 import TagOGTile from './TagOGTile';
 import { formatTag, shareTextForTag } from '.';
+import { getAppText } from '@/i18n/state/server';
 
-export default function TagShareModal({
+export default async function TagShareModal({
   tag,
   photos,
   count,
@@ -12,11 +13,12 @@ export default function TagShareModal({
 }: {
   tag: string
 } & PhotoSetAttributes) {
+  const appText = await getAppText();
   return (
     <ShareModal
       pathShare={absolutePathForTag(tag, true)}
       navigatorTitle={formatTag(tag)}
-      socialText={shareTextForTag(tag)}
+      socialText={shareTextForTag(tag, appText)}
     >
       <TagOGTile {...{ tag, photos, count, dateRange }} />
     </ShareModal>

src/tag/index.ts

@@ -16,7 +16,7 @@ import {
   formatCountDescriptive,
 } from '@/utility/string';
 import { sortCategoryByCount } from '@/category';
-import { APP_TEXT } from '@/app/config';
+import { I18NState } from '@/i18n/state';
 
 // Reserved tags
 export const TAG_FAVS   = 'favs';
@@ -42,16 +42,20 @@ export const getValidationMessageForTags = (tags?: string) => {
 export const titleForTag = (
   tag: string,
   photos:Photo[] = [],
+  appText: I18NState,
   explicitCount?: number,
 ) => [
   formatTag(tag),
-  photoQuantityText(explicitCount ?? photos.length),
+  photoQuantityText(explicitCount ?? photos.length, appText),
 ].join(' ');
 
-export const shareTextForTag = (tag: string) =>
+export const shareTextForTag = (
+  tag: string,
+  appText: I18NState,
+) =>
   isTagFavs(tag)
-    ? APP_TEXT.category.taggedFavs
+    ? appText.category.taggedFavs
-    : APP_TEXT.category.taggedPhrase(formatTag(tag));
+    : appText.category.taggedPhrase(formatTag(tag));
 
 export const sortTagsArray = (
   tags: string[],
@@ -92,13 +96,15 @@ export const sortTagsObjectWithoutFavs = (tags: Tags) =>
 
 export const descriptionForTaggedPhotos = (
   photos: Photo[] = [],
+  appText: I18NState,
   dateBased?: boolean,
   explicitCount?: number,
   explicitDateRange?: PhotoDateRange,
 ) =>
   descriptionForPhotoSet(
     photos,
-    APP_TEXT.category.taggedPhotos,
+    appText,
+    appText.category.taggedPhotos,
     dateBased,
     explicitCount,
     explicitDateRange,
@@ -107,13 +113,19 @@ export const descriptionForTaggedPhotos = (
 export const generateMetaForTag = (
   tag: string,
   photos: Photo[],
+  appText: I18NState,
   explicitCount?: number,
   explicitDateRange?: PhotoDateRange,
 ) => ({
   url: absolutePathForTag(tag),
-  title: titleForTag(tag, photos, explicitCount),
+  title: titleForTag(tag, photos, appText, explicitCount),
-  description:
+  description: descriptionForTaggedPhotos(
-    descriptionForTaggedPhotos(photos, true, explicitCount, explicitDateRange),
+    photos,
+    appText,
+    true,
+    explicitCount,
+    explicitDateRange,
+  ),
   images: absolutePathForTagImage(tag),
 });
 
@@ -137,11 +149,14 @@ export const addHiddenToTags = (tags: Tags, photosCountHidden = 0) =>
       )
     : tags;
 
-export const convertTagsForForm = (tags: Tags = []) =>
+export const convertTagsForForm = (
+  tags: Tags = [],
+  appText: I18NState,
+) =>
   sortTagsObjectWithoutFavs(tags)
     .map(({ tag, count }) => ({
       value: tag,
       annotation: formatCount(count),
       annotationAria:
-        formatCountDescriptive(count, APP_TEXT.category.taggedPhotos),
+        formatCountDescriptive(count, appText.category.taggedPhotos),
     }));

src/utility/date.ts

@@ -1,7 +1,7 @@
 import { parseISO, parse, format } from 'date-fns';
 import { formatInTimeZone } from 'date-fns-tz';
 import { Timezone } from './timezone';
-import { APP_TEXT } from '@/app/config';
+import { DATE_FN_LOCALE } from '@/i18n/date';
 
 const DATE_STRING_FORMAT_TINY                   = 'dd MMM yy';
 const DATE_STRING_FORMAT_TINY_PLACEHOLDER       = '00 000 00';
@@ -67,12 +67,15 @@ export const formatDate = ({
     ? placeholderString
     : timezone
       ? formatInTimeZone(
-        date, timezone, formatString, { locale: APP_TEXT.dateLocale },
+        date, timezone, formatString, { locale: DATE_FN_LOCALE },
       )
-      : format(date, formatString, { locale: APP_TEXT.dateLocale });
+      : format(date, formatString, { locale: DATE_FN_LOCALE });
 };
 
-export const formatDateFromPostgresString = (date: string, length?: Length) =>
+export const formatDateFromPostgresString = (
+  date: string,
+  length?: Length,
+) =>
   formatDate({
     date: parse(date, DATE_STRING_FORMAT_POSTGRES, new Date()),
     length,