strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Lazy load language data

Browse Source
This commit is contained in:
Sam Becker 2025-05-12 09:10:28 -05:00
parent 878edc713d
commit 526ba1a43b
79 changed files with 732 additions and 375 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/film/[film]/page.tsx
View File

@ -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 =
cache(getPhotosFilmDataCached);
const getPhotosFilmDataCachedCached = 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,

5
app/focal/[focal]/page.tsx
View File

@ -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,

3
app/layout.tsx
View File

@ -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>

5
app/lens/[make]/[model]/page.tsx
View File

@ -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,

5
app/recipe/[recipe]/page.tsx
View File

@ -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,

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

@ -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,

6
app/sign-in/page.tsx
View File

@ -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>
);

5
app/tag/[tag]/page.tsx
View File

@ -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,

7
app/tag/hidden/page.tsx
View File

@ -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,

31
src/admin/AdminAppMenu.tsx
View File

@ -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
: APP_TEXT.admin.batchEditShort,
? appText.admin.batchExitEdit
: appText.admin.batchEditShort,
icon: isSelecting
? <IoCloseSharp
size={18}
@ -175,8 +177,8 @@ export default function AdminAppMenu({
}
items.push({
label: showAppInsightsLink
? APP_TEXT.admin.appInsights
: APP_TEXT.admin.appConfig,
? appText.admin.appInsights
: 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]

4
src/admin/AdminBatchEditPanelClient.tsx
View File

@ -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,
);

12
src/admin/AdminNav.tsx
View File

@ -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,
}); }

20
src/admin/AdminPhotoMenu.tsx
View File

@ -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,

12
src/admin/AdminPhotosClient.tsx
View File

@ -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,
APP_TEXT.photo.photoPlural,
appText.photo.photo,
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,
APP_TEXT.admin.updatePlural,
appText.admin.update,
appText.admin.updatePlural,
)}
</ResponsiveText>
</PathLoaderButton>}

7
src/admin/AdminRecipeBadge.tsx
View File

@ -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>;

6
src/admin/AdminRecipeTable.tsx
View File

@ -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 />

7
src/admin/AdminTagBadge.tsx
View File

@ -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>;

7
src/admin/AdminTagTable.tsx
View File

@ -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 />

4
src/admin/DeletePhotoButton.tsx
View File

@ -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`}
/>
);

5
src/admin/DeletePhotosButton.tsx
View File

@ -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();

5
src/admin/PhotoTagFieldset.tsx
View File

@ -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) ?? '';

10
src/admin/SignInOrUploadClient.tsx
View File

@ -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
: APP_TEXT.onboarding.setupSignIn}
? appText.onboarding.setupFirstPhoto
: appText.onboarding.setupSignIn}
</div>
{!isCheckingAuth && isUserSignedIn === false &&
<div className="flex justify-center my-2 sm:my-4">

14
src/app/AppViewSwitcher.tsx
View File

@ -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],
}}}

9
src/app/Footer.tsx
View File

@ -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">

10
src/app/ThemeSwitcher.tsx
View File

@ -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>
);

10
src/app/config.ts
View File

@ -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(
process.env.NEXT_PUBLIC_LOCALE,
);
export const APP_LOCALE = process.env.NEXT_PUBLIC_LOCALE || 'US-EN';
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
locale: process.env.NEXT_PUBLIC_LOCALE ?? 'US-EN',
// Content
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,

14
src/auth/SignInForm.tsx
View File

@ -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>

12
src/camera/CameraHeader.tsx
View File

@ -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}

14
src/camera/CameraOGTile.tsx
View File

@ -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),
description: descriptionForCameraPhotos(photos, true, count, dateRange),
title: titleForCamera(camera, photos, appText, count),
description: descriptionForCameraPhotos(
photos,
appText,
true,
count,
dateRange,
),
path: pathForCamera(camera),
pathImageAbsolute: absolutePathForCameraImage(camera),
loadingState: loadingStateExternal,

6
src/camera/CameraShareModal.tsx
View File

@ -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>

23
src/camera/meta.ts
View File

@ -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),
});

11
src/cmdk/CommandK.tsx
View File

@ -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)}
/>
);
}

72
src/cmdk/CommandKClient.tsx
View File

@ -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
: `${APP_TEXT.nav.feed} (${APP_TEXT.nav.home})`,
? appText.nav.feed
: `${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})`
: APP_TEXT.nav.grid,
? `${appText.nav.grid} (${appText.nav.home})`
: 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
: APP_TEXT.admin.batchExitEdit,
? appText.admin.batchEdit
: 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
: APP_TEXT.cmdk.noResults}
? appText.cmdk.searching
: appText.cmdk.noResults}
</Command.Empty>
{queriedSections
.concat(categorySections)

5
src/components/CopyButton.tsx
View File

@ -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"

6
src/components/DownloadButton.tsx
View File

@ -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',

12
src/components/ImageInput.tsx
View File

@ -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
: APP_TEXT.admin.uploadPhotos}
: appText.admin.uploading
: appText.admin.uploadPhotos}
</ProgressButton>}
<input
ref={inputRef}

6
src/components/RepoLink.tsx
View File

@ -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}

8
src/components/useNavigateOrRunActionWithToast.tsx
View File

@ -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();

10
src/film/FilmHeader.tsx
View File

@ -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}

8
src/film/FilmOGTile.tsx
View File

@ -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,

6
src/film/FilmShareModal.tsx
View File

@ -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>

14
src/film/index.tsx
View File

@ -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,

5
src/focal/FocalLengthHeader.tsx
View File

@ -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}

7
src/focal/FocalLengthOGTile.tsx
View File

@ -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,

6
src/focal/FocalLengthShareModal.tsx
View File

@ -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>

20
src/focal/index.ts
View File

@ -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)),
photoQuantityText(explicitCount ?? photos.length),
appText.category.focalLengthTitle(formatFocalLengthSafe(focal)),
photoQuantityText(explicitCount ?? photos.length, appText),
].join(' ');
export const shareTextFocalLength = (focal: number) =>
APP_TEXT.category.focalLengthShare(formatFocalLengthSafe(focal));
export const shareTextFocalLength = (
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,

12
src/i18n/date.ts Normal file
View File

@ -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);

74
src/i18n/index.ts
View File

@ -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) => {
switch (locale) {
case 'pt-pt': return pt;
case 'pt-br': return ptBR;
default: return enUS;
}
export const LOCALE_TEXT: Record<
string,
() => Promise<I18NDeepPartial | undefined>
> = {
'pt-br': () => import('./locales/pt-br').then((m) => m.default),
'pt-pt': () => import('./locales/pt-pt').then((m) => m.default),
};
const generateI18NWithFunctions = (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),
},
dateLocale: getDateFnLocale(i18nText.locale),
};
};
export const LOCALE_TEXT: Record<string, I18NDeepPartial | undefined> = {
'pt-br': PT_BR,
'pt-pt': PT_PT,
};
export const getTextForLocale = (
export const getTextForLocale = async (
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;
};

17
src/i18n/state/AppTextProvider.tsx Normal file
View File

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

20
src/i18n/state/AppTextProviderClient.tsx Normal file
View File

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

9
src/i18n/state/client.ts Normal file
View File

@ -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);

48
src/i18n/state/index.ts Normal file
View File

@ -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),
},
};
};

6
src/i18n/state/server.ts Normal file
View File

@ -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);

12
src/lens/LensHeader.tsx
View File

@ -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}

14
src/lens/LensOGTile.tsx
View File

@ -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),
description: descriptionForLensPhotos(photos, true, count, dateRange),
title: titleForLens(lens, photos, appText, count),
description: descriptionForLensPhotos(
photos,
appText,
true,
count,
dateRange,
),
path: pathForLens(lens),
pathImageAbsolute: absolutePathForLensImage(lens),
loadingState: loadingStateExternal,

6
src/lens/LensShareModal.tsx
View File

@ -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>

23
src/lens/meta.ts
View File

@ -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),
});

10
src/photo/PhotoDate.tsx
View File

@ -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;
}
};

26
src/photo/PhotoGridSidebar.tsx
View File

@ -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;

12
src/photo/PhotoHeader.tsx
View File

@ -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)}

10
src/photo/PhotoLarge.tsx
View File

@ -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

12
src/photo/PhotoPrevNextActions.tsx
View File

@ -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>

12
src/photo/PhotoUploadWithStatus.tsx
View File

@ -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</>}

12
src/photo/PhotosEmptyState.tsx
View File

@ -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
: APP_TEXT.onboarding.setupComplete}
? appText.onboarding.setupIncomplete
: 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}

5
src/photo/form/PhotoForm.tsx
View File

@ -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,

31
src/photo/index.ts
View File

@ -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
: APP_TEXT.photo.photoPlural;
? appText.photo.photo
: 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, capitalize)}`;
? `(${count} ${photoLabelForCount(count, appText, capitalize)})`
: `${count} ${photoLabelForCount(count, appText, capitalize)}`;
export const deleteConfirmationTextForPhoto = (photo: Photo) =>
APP_TEXT.admin.deleteConfirm(titleForPhoto(photo));
export const deleteConfirmationTextForPhoto = (
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(' ');

6
src/recipe/PhotoRecipeOverlay.tsx
View File

@ -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>

6
src/recipe/PhotoRecipeOverlayButton.tsx
View File

@ -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={() => {

11
src/recipe/RecipeHeader.tsx
View File

@ -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}

14
src/recipe/RecipeOGTile.tsx
View File

@ -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),
description: descriptionForRecipePhotos(photos, true, count, dateRange),
title: titleForRecipe(recipe, photos, appText, count),
description: descriptionForRecipePhotos(
photos,
appText,
true,
count,
dateRange,
),
path: pathForRecipe(recipe),
pathImageAbsolute: absolutePathForRecipeImage(recipe),
loadingState: loadingStateExternal,

7
src/recipe/RecipeShareModal.tsx
View File

@ -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}
>

27
src/recipe/index.ts
View File

@ -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)}`,
photoQuantityText(explicitCount ?? photos.length),
`${appText.category.recipe}: ${formatRecipe(recipe)}`,
photoQuantityText(explicitCount ?? photos.length, appText),
].join(' ');
export const shareTextForRecipe = (recipe: string) =>
APP_TEXT.category.recipeShare(formatRecipe(recipe));
export const shareTextForRecipe = (
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),
});

7
src/share/ShareModal.tsx
View File

@ -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,
)}

6
src/tag/HiddenHeader.tsx
View File

@ -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}

15
src/tag/TagHeader.tsx
View File

@ -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}
entityDescription={descriptionForTaggedPhotos(photos, undefined, count)}
entityVerb={appText.category.taggedPhotos}
entityDescription={descriptionForTaggedPhotos(
photos,
appText,
undefined,
count,
)}
photos={photos}
selectedPhoto={selectedPhoto}
indexNumber={indexNumber}

14
src/tag/TagOGTile.tsx
View File

@ -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),
description: descriptionForTaggedPhotos(photos, true, count, dateRange),
title: titleForTag(tag, photos, appText, count),
description: descriptionForTaggedPhotos(
photos,
appText,
true,
count,
dateRange,
),
path: pathForTag(tag),
pathImageAbsolute: absolutePathForTagImage(tag),
loadingState: loadingStateExternal,

6
src/tag/TagShareModal.tsx
View File

@ -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>

37
src/tag/index.ts
View File

@ -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
: APP_TEXT.category.taggedPhrase(formatTag(tag));
? appText.category.taggedFavs
: 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),
description:
descriptionForTaggedPhotos(photos, true, explicitCount, explicitDateRange),
title: titleForTag(tag, photos, appText, explicitCount),
description: descriptionForTaggedPhotos(
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),
}));

11
src/utility/date.ts
View File

@ -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,