i18n Keys for Size values and partial Job Manager translation (#2480)

* added more translation keys and a little bit refreshed overview card style * reverted style changes and disabled pluralize func * minor changes * added a couple of translation keys for job manager * deleted unused keys * updated translations, changed card style in overview section * forgot about console.log * more translation and minor fixes in translation * translation for sync component
spacedriveapp · May 17, 2024 · c091cca · c091cca
1 parent 26b6baf
commit c091cca
Show file tree

Hide file tree

Showing 29 changed files with 1,437 additions and 529 deletions.
diff --git a/interface/app/$libraryId/Explorer/Inspector/MediaData.tsx b/interface/app/$libraryId/Explorer/Inspector/MediaData.tsx
@@ -76,14 +76,14 @@ const ExifMediaData = (data: ExifMetadata) => {
 	return (
 		<>
 			<MetaData
-				label="Date"
+				label={t('date')}
 				tooltipValue={data.date_taken ?? null} // should show full raw value
 				// should show localised, utc-offset value or plain value with tooltip mentioning that we don't have the timezone metadata
 				value={data.date_taken ?? null}
 			/>
-			<MetaData label="Type" value="Image" />
+			<MetaData label={t('type')} value={t('image')} />
 			<MetaData
-				label="Location"
+				label={t('location')}
 				tooltipValue={data.location && formatLocation(data.location, coordinatesFormat)}
 				value={
 					data.location && (
@@ -116,16 +116,19 @@ const ExifMediaData = (data: ExifMetadata) => {
 				}
 			/>
 			<MetaData
-				label="Resolution"
+				label={t('resolution')}
 				value={`${data.resolution.width} x ${data.resolution.height}`}
 			/>
-			<MetaData label="Device" value={data.camera_data.device_make} />
-			<MetaData label="Model" value={data.camera_data.device_model} />
-			<MetaData label="Color profile" value={data.camera_data.color_profile} />
-			<MetaData label="Color space" value={data.camera_data.color_space} />
-			<MetaData label="Flash" value={data.camera_data.flash?.mode} />
+			<MetaData label={t('device')} value={data.camera_data.device_make} />
+			<MetaData label={t('model')} value={data.camera_data.device_model} />
+			<MetaData label={t('color_profile')} value={data.camera_data.color_profile} />
+			<MetaData label={t('color_space')} value={data.camera_data.color_space} />
 			<MetaData
-				label="Zoom"
+				label={t('flash')}
+				value={t(`${data.camera_data.flash?.mode.toLowerCase()}`)}
+			/>
+			<MetaData
+				label={t('zoom')}
 				value={
 					data.camera_data &&
 					data.camera_data.zoom &&
@@ -134,8 +137,8 @@ const ExifMediaData = (data: ExifMetadata) => {
 						: '--'
 				}
 			/>
-			<MetaData label="Iso" value={data.camera_data.iso} />
-			<MetaData label="Software" value={data.camera_data.software} />
+			<MetaData label="ISO" value={data.camera_data.iso} />
+			<MetaData label={t('software')} value={data.camera_data.software} />
 		</>
 	);
 };
@@ -196,7 +199,7 @@ const FFmpegMediaData = (data: FFmpegMetadata) => {
 	return (
 		<>
 			<MetaData label={t('type')} value={type} />
-			<MetaData label="Bitrate" value={`${bit_rate.value} ${bit_rate.unit}/s`} />
+			<MetaData label={t('bitrate')} value={`${bit_rate.value} ${bit_rate.unit}/s`} />
 			{duration && <MetaData label={t('duration')} value={duration.format('HH:mm:ss.SSS')} />}
 			{start_time && (
 				<MetaData label={t('start_time')} value={start_time.format('HH:mm:ss.SSS')} />

diff --git a/interface/app/$libraryId/Explorer/Inspector/index.tsx b/interface/app/$libraryId/Explorer/Inspector/index.tsx
@@ -34,7 +34,6 @@ import {
 	humanizeSize,
 	NonIndexedPathItem,
 	Object,
-	ObjectKindEnum,
 	ObjectWithFilePaths,
 	useBridgeQuery,
 	useItemsAsObjects,
@@ -305,7 +304,11 @@ export const SingleItemMetadata = ({ item }: { item: ExplorerItem }) => {
 				<MetaData
 					icon={Cube}
 					label={t('size')}
-					value={!!ephemeralPathData && ephemeralPathData.is_dir ? null : `${size}`}
+					value={
+						!!ephemeralPathData && ephemeralPathData.is_dir
+							? null
+							: `${size.value} ${t(`size_${size.unit.toLowerCase()}`)}`
+					}
 				/>
 
 				<MetaData
@@ -522,14 +525,19 @@ const MultiItemMetadata = ({ items }: { items: ExplorerItem[] }) => {
 	const { t, dateFormat } = useLocale();
 
 	const onlyNonIndexed = metadata.types.has('NonIndexedPath') && metadata.types.size === 1;
+	const filesSize = humanizeSize(metadata.size);
 
 	return (
 		<>
 			<MetaContainer>
 				<MetaData
 					icon={Cube}
 					label={t('size')}
-					value={metadata.size !== null ? `${humanizeSize(metadata.size)}` : null}
+					value={
+						metadata.size !== null
+							? `${filesSize.value} ${t(`size_${filesSize.unit.toLowerCase()}s`)}`
+							: null
+					}
 				/>
 				<MetaData
 					icon={Clock}

diff --git a/interface/app/$libraryId/Explorer/OptionsPanel/index.tsx b/interface/app/$libraryId/Explorer/OptionsPanel/index.tsx
@@ -45,7 +45,7 @@ export default () => {
 						<SelectOption value="none">{t('none')}</SelectOption>
 						{explorer.orderingKeys?.options.map((option) => (
 							<SelectOption key={option.value} value={option.value}>
-								{option.description}
+								{t(`${option.description?.toLowerCase().split(' ').join('_')}`)}
 							</SelectOption>
 						))}
 					</Select>

diff --git a/interface/app/$libraryId/Explorer/View/GridView/Item/index.tsx b/interface/app/$libraryId/Explorer/View/GridView/Item/index.tsx
@@ -132,6 +132,7 @@ const ItemSize = () => {
 	const isLocation = item.data.type === 'Location';
 	const isEphemeral = item.data.type === 'NonIndexedPath';
 	const isFolder = filePath?.is_dir;
+	const { t } = useLocale();
 
 	const showSize =
 		showBytesInGridView &&
@@ -142,8 +143,10 @@ const ItemSize = () => {
 		(!isRenaming || !item.selected);
 
 	const bytes = useMemo(
-		() => showSize && humanizeSize(filePath?.size_in_bytes_bytes),
-		[filePath?.size_in_bytes_bytes, showSize]
+		() =>
+			showSize &&
+			`${humanizeSize(filePath?.size_in_bytes_bytes).value} ${t(`size_${humanizeSize(filePath?.size_in_bytes_bytes).unit.toLowerCase()}`)}`,
+		[filePath?.size_in_bytes_bytes, showSize, t]
 	);
 
 	if (!showSize) return null;

diff --git a/interface/app/$libraryId/Explorer/View/ListView/useTable.tsx b/interface/app/$libraryId/Explorer/View/ListView/useTable.tsx
@@ -122,7 +122,7 @@ export const useTable = () => {
 						!filePath.size_in_bytes_bytes ||
 						(filePath.is_dir && item.type === 'NonIndexedPath')
 						? '-'
-						: humanizeSize(filePath.size_in_bytes_bytes);
+						: `${humanizeSize(filePath.size_in_bytes_bytes).value} ${t(`size_${humanizeSize(filePath.size_in_bytes_bytes).unit.toLowerCase()}`)}`;
 				}
 			},
 			{

diff --git a/interface/app/$libraryId/Explorer/util.ts b/interface/app/$libraryId/Explorer/util.ts
@@ -165,7 +165,7 @@ const kinds: Record<string, string> = {
 	Code: `${i18n.t('code')}`,
 	Database: `${i18n.t('database')}`,
 	Book: `${i18n.t('book')}`,
-	Config: `${i18n.t('widget')}`,
+	Config: `${i18n.t('config')}`,
 	Dotfile: `${i18n.t('dotfile')}`,
 	Screenshot: `${i18n.t('screenshot')}`,
 	Label: `${i18n.t('label')}`

diff --git a/interface/app/$libraryId/Layout/Sidebar/JobManager/Job.tsx b/interface/app/$libraryId/Layout/Sidebar/JobManager/Job.tsx
@@ -12,6 +12,7 @@ import { memo } from 'react';
 import { JobProgressEvent, JobReport, useJobInfo } from '@sd/client';
 import { ProgressBar } from '@sd/ui';
 import { showAlertDialog } from '~/components';
+import { useLocale } from '~/hooks';
 
 import JobContainer from './JobContainer';
 
@@ -34,6 +35,7 @@ const JobIcon: Record<string, Icon> = {
 
 function Job({ job, className, isChild, progress }: JobProps) {
 	const jobData = useJobInfo(job, progress);
+	const { t } = useLocale();
 
 	// I don't like sending TSX as a prop due to lack of hot-reload, but it's the only way to get the error log to show up
 	if (job.status === 'CompletedWithErrors') {
@@ -51,13 +53,12 @@ function Job({ job, className, isChild, progress }: JobProps) {
 		);
 		jobData.textItems?.push([
 			{
-				text: 'Completed with errors',
+				text: t('completed_with_errors'),
 				icon: Info,
 				onClick: () => {
 					showAlertDialog({
-						title: 'Error',
-						description:
-							'The job completed with errors. Please see the error log below for more information. If you need help, please contact support and provide this error.',
+						title: t('error'),
+						description: t('job_error_description'),
 						children: JobError
 					});
 				}

diff --git a/interface/app/$libraryId/Layout/Sidebar/JobManager/JobGroup.tsx b/interface/app/$libraryId/Layout/Sidebar/JobManager/JobGroup.tsx
@@ -41,6 +41,7 @@ export default function ({ group, progress }: JobGroupProps) {
 	}, [jobs]);
 
 	if (jobs.length === 0) return <></>;
+	const { t } = useLocale();
 
 	return (
 		<ul className="relative overflow-visible">
@@ -69,9 +70,7 @@ export default function ({ group, progress }: JobGroupProps) {
 						textItems={[
 							[
 								{
-									text: `${formatNumber(tasks.total)} ${
-										tasks.total <= 1 ? 'task' : 'tasks'
-									}`
+									text: `${formatNumber(tasks.total)} ${t('task', { count: tasks.total })}`
 								},
 								{ text: dateStarted },
 								{ text: totalGroupTime || undefined },
@@ -80,7 +79,7 @@ export default function ({ group, progress }: JobGroupProps) {
 									text: ['Queued', 'Paused', 'Canceled', 'Failed'].includes(
 										group.status
 									)
-										? group.status
+										? t(`${group.status.toLowerCase()}`)
 										: undefined
 								}
 							],

diff --git a/interface/app/$libraryId/overview/FileKindStats.tsx b/interface/app/$libraryId/overview/FileKindStats.tsx
@@ -89,8 +89,7 @@ const KindItem = ({ kind, name, icon, items, selected, onClick, disabled }: Kind
 					<h2 className="text-sm font-medium">{name}</h2>
 					{items !== undefined && (
 						<p className="text-xs text-ink-faint">
-							{formatNumber(items)}{' '}
-							{items > 1 || items === 0 ? `${t('items')}` : `${t('item')}`}
+							{t('item_with_count', { count: items })}
 						</p>
 					)}
 				</div>

diff --git a/interface/app/$libraryId/overview/LibraryStats.tsx b/interface/app/$libraryId/overview/LibraryStats.tsx
@@ -31,6 +31,8 @@ const StatItem = (props: StatItemProps) => {
 		saveState: false
 	});
 
+	const { t } = useLocale();
+
 	return (
 		<div
 			className={clsx(
@@ -57,7 +59,9 @@ const StatItem = (props: StatItemProps) => {
 					})}
 				>
 					<span className="font-black tabular-nums">{count}</span>
-					<span className="ml-1 text-[16px] font-medium text-ink-faint">{size.unit}</span>
+					<span className="ml-1 text-[16px] font-medium text-ink-faint">
+						{t(`size_${size.unit.toLowerCase()}`)}
+					</span>
 				</div>
 			</span>
 		</div>

diff --git a/interface/app/$libraryId/overview/LocationCard.tsx b/interface/app/$libraryId/overview/LocationCard.tsx
@@ -3,6 +3,7 @@ import { useMemo } from 'react';
 import { humanizeSize } from '@sd/client';
 import { Button, Card, tw } from '@sd/ui';
 import { Icon } from '~/components';
+import { useLocale } from '~/hooks';
 
 type LocationCardProps = {
 	name: string;
@@ -20,6 +21,7 @@ const LocationCard = ({ icon, name, connectionType, ...stats }: LocationCardProp
 			totalSpace: humanizeSize(stats.totalSpace)
 		};
 	}, [stats]);
+	const { t } = useLocale();
 
 	return (
 		<Card className="flex w-[280px] shrink-0 flex-col  bg-app-box/50 !p-0 ">
@@ -29,7 +31,7 @@ const LocationCard = ({ icon, name, connectionType, ...stats }: LocationCardProp
 					<span className="truncate font-medium">{name}</span>
 					<span className="mt-1 truncate text-tiny text-ink-faint">
 						{totalSpace.value}
-						{totalSpace.unit}
+						{t(`size_${totalSpace.unit.toLowerCase()}`)}
 					</span>
 				</div>
 			</div>

diff --git a/interface/app/$libraryId/overview/StatCard.tsx b/interface/app/$libraryId/overview/StatCard.tsx
@@ -1,7 +1,6 @@
-import { ReactComponent as Ellipsis } from '@sd/assets/svgs/ellipsis.svg';
 import { useEffect, useMemo, useState } from 'react';
 import { humanizeSize } from '@sd/client';
-import { Button, Card, CircularProgress, tw } from '@sd/ui';
+import { Card, CircularProgress, tw } from '@sd/ui';
 import { Icon } from '~/components';
 import { useIsDark, useLocale } from '~/hooks';
 
@@ -61,22 +60,36 @@ const StatCard = ({ icon, name, connectionType, ...stats }: StatCardProps) => {
 						<div className="absolute text-lg font-semibold">
 							{usedSpaceSpace.value}
 							<span className="ml-0.5 text-tiny opacity-60">
-								{usedSpaceSpace.unit}
+								{t(`size_${usedSpaceSpace.unit.toLowerCase()}`)}
 							</span>
 						</div>
 					</CircularProgress>
 				)}
 				<div className="flex flex-col overflow-hidden">
-					<Icon className="-ml-1" name={icon as any} size={60} />
+					<Icon
+						className="-ml-1 min-h-[60px] min-w-[60px]"
+						name={icon as any}
+						size={60}
+					/>
 					<span className="truncate font-medium">{name}</span>
 					<span className="mt-1 truncate text-tiny text-ink-faint">
-						{freeSpace.value}
-						{freeSpace.unit} {t('free_of')} {totalSpace.value}
-						{totalSpace.unit}
+						{freeSpace.value !== totalSpace.value && (
+							<>
+								{freeSpace.value} {t(`size_${freeSpace.unit.toLowerCase()}`)}{' '}
+								{t('free_of')} {totalSpace.value}{' '}
+								{t(`size_${totalSpace.unit.toLowerCase()}`)}
+							</>
+						)}
 					</span>
 				</div>
 			</div>
 			<div className="flex h-10 flex-row items-center gap-1.5  border-t border-app-line px-2">
+				{freeSpace.value === totalSpace.value && (
+					<Pill>
+						{totalSpace.value}
+						{t(`size_${totalSpace.unit.toLowerCase()}`)}
+					</Pill>
+				)}
 				<Pill className="uppercase">{connectionType || t('local')}</Pill>
 				<div className="grow" />
 				{/* <Button size="icon" variant="outline">

diff --git a/interface/app/$libraryId/settings/library/locations/IndexerRuleEditor/RuleButton.tsx b/interface/app/$libraryId/settings/library/locations/IndexerRuleEditor/RuleButton.tsx
@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import { useRef } from 'react';
 import { IndexerRule } from '@sd/client';
 import { InfoPill } from '~/app/$libraryId/Explorer/Inspector';
+import { useLocale } from '~/hooks';
 
 import { IndexerRuleIdFieldType } from '.';
 
@@ -26,6 +27,7 @@ function RuleButton<T extends IndexerRuleIdFieldType>({
 	const value = field?.value ?? [];
 	const toggleRef = useRef<HTMLElement>(null);
 	const ruleEnabled = value.includes(rule.id);
+	const { t } = useLocale();
 
 	return (
 		<div
@@ -41,7 +43,9 @@ function RuleButton<T extends IndexerRuleIdFieldType>({
 			)}
 		>
 			<div className="w-full">
-				<p className="mb-2 truncate px-2 text-center text-sm">{rule.name}</p>
+				<p className="mb-2 truncate px-2 text-center text-sm">
+					{t(`${rule.name?.toLowerCase().split(' ').join('_')}`)}
+				</p>
 				<div className="flex flex-wrap justify-center gap-2">
 					<InfoPill
 						ref={toggleRef}
@@ -61,10 +65,10 @@ function RuleButton<T extends IndexerRuleIdFieldType>({
 							ruleEnabled ? '!bg-accent !text-white' : 'text-ink'
 						)}
 					>
-						{ruleEnabled ? 'Enabled' : 'Disabled'}
+						{ruleEnabled ? t('enabled') : t('disabled')}
 					</InfoPill>
 					{ruleIsSystem(rule) && (
-						<InfoPill className="px-2 text-ink-faint">System</InfoPill>
+						<InfoPill className="px-2 text-ink-faint">{t('system')}</InfoPill>
 					)}
 				</div>
 			</div>