[ENG-1578] Missing localization & language detect and settings (#2037)

* i18n privacy screen * more missing translations * language detector * Language Settings * sort german * bump version to 0.2.3
spacedriveapp · Feb 2, 2024 · e2175aa · e2175aa
1 parent 4032677
commit e2175aa
Show file tree

Hide file tree

Showing 24 changed files with 314 additions and 128 deletions.
diff --git a/apps/desktop/src-tauri/Cargo.toml b/apps/desktop/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "sd-desktop"
-version = "0.2.2"
+version = "0.2.3"
 description = "The universal file manager."
 authors = ["Spacedrive Technology Inc <support@spacedrive.com>"]
 default-run = "sd-desktop"

diff --git a/core/Cargo.toml b/core/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "sd-core"
-version = "0.2.2"
+version = "0.2.3"
 description = "Virtual distributed filesystem engine that powers Spacedrive."
 authors = ["Spacedrive Technology Inc."]
 rust-version = "1.73.0"

diff --git a/interface/app/$libraryId/Layout/Sidebar/sections/Devices/index.tsx b/interface/app/$libraryId/Layout/Sidebar/sections/Devices/index.tsx
@@ -1,7 +1,6 @@
-import { Link } from 'react-router-dom';
-import { useBridgeQuery, useFeatureFlag } from '@sd/client';
+import { useBridgeQuery } from '@sd/client';
 import { Button, Tooltip } from '@sd/ui';
-import { Icon, SubtleButton } from '~/components';
+import { Icon } from '~/components';
 import { useLocale } from '~/hooks';
 
 import SidebarLink from '../../SidebarLayout/Link';
@@ -13,7 +12,7 @@ export default function DevicesSection() {
 	const { t } = useLocale();
 
 	return (
-		<Section name="Devices">
+		<Section name={t('devices')}>
 			{node && (
 				<SidebarLink className="group relative w-full" to={`node/${node.id}`} key={node.id}>
 					<Icon name="Laptop" className="mr-1 h-5 w-5" />

diff --git a/interface/app/$libraryId/Layout/Sidebar/sections/Library/index.tsx b/interface/app/$libraryId/Layout/Sidebar/sections/Library/index.tsx
@@ -1,5 +1,6 @@
 import { Clock, Heart, Planet, Tag } from '@phosphor-icons/react';
 import { useLibraryQuery } from '@sd/client';
+import { useLocale } from '~/hooks';
 
 import Icon from '../../SidebarLayout/Icon';
 import SidebarLink from '../../SidebarLayout/Link';
@@ -9,25 +10,27 @@ export const COUNT_STYLE = `absolute right-1 min-w-[20px] top-1 flex h-[19px] px
 export default function LibrarySection() {
 	const labelCount = useLibraryQuery(['labels.count']);
 
+	const { t } = useLocale();
+
 	return (
 		<div className="space-y-0.5">
 			<SidebarLink to="overview">
 				<Icon component={Planet} />
-				Overview
+				{t('overview')}
 			</SidebarLink>
 			<SidebarLink to="recents">
 				<Icon component={Clock} />
-				Recents
+				{t('recents')}
 				{/* <div className={COUNT_STYLE}>34</div> */}
 			</SidebarLink>
 			<SidebarLink to="favorites">
 				<Icon component={Heart} />
-				Favorites
+				{t('favorites')}
 				{/* <div className={COUNT_STYLE}>2</div> */}
 			</SidebarLink>
 			<SidebarLink to="labels">
 				<Icon component={Tag} />
-				Labels
+				{t('labels')}
 				<div className={COUNT_STYLE}>{labelCount.data || 0}</div>
 			</SidebarLink>
 		</div>

diff --git a/interface/app/$libraryId/Layout/Sidebar/sections/Local/index.tsx b/interface/app/$libraryId/Layout/Sidebar/sections/Local/index.tsx
@@ -4,6 +4,7 @@ import { PropsWithChildren, useMemo } from 'react';
 import { useBridgeQuery, useCache, useLibraryQuery, useNodes } from '@sd/client';
 import { Button, toast, tw } from '@sd/ui';
 import { Icon, IconName } from '~/components';
+import { useLocale } from '~/hooks';
 import { useHomeDir } from '~/hooks/useHomeDir';
 
 import { useExplorerDroppable } from '../../../../Explorer/useExplorerDroppable';
@@ -39,6 +40,8 @@ export default function LocalSection() {
 	useNodes(result.data?.nodes);
 	const volumes = useCache(result.data?.items);
 
+	const { t } = useLocale();
+
 	// this will return an array of location ids that are also volumes
 	// { "/Mount/Point": 1, "/Mount/Point2": 2"}
 	const locationIdsForVolumes = useMemo(() => {
@@ -74,11 +77,11 @@ export default function LocalSection() {
 	);
 
 	return (
-		<Section name="Local">
+		<Section name={t('local')}>
 			<SeeMore>
 				<SidebarLink className="group relative w-full" to="network">
 					<SidebarIcon name="Globe" />
-					<Name>Network</Name>
+					<Name>{t('network')}</Name>
 				</SidebarLink>
 
 				{homeDir.data && (
@@ -87,7 +90,7 @@ export default function LocalSection() {
 						path={homeDir.data ?? ''}
 					>
 						<SidebarIcon name="Home" />
-						<Name>Home</Name>
+						<Name>{t('home')}</Name>
 					</EphemeralLocation>
 				)}
 

diff --git a/interface/app/$libraryId/Layout/Sidebar/sections/Locations/index.tsx b/interface/app/$libraryId/Layout/Sidebar/sections/Locations/index.tsx
@@ -12,6 +12,7 @@ import { useExplorerDroppable } from '~/app/$libraryId/Explorer/useExplorerDropp
 import { useExplorerSearchParams } from '~/app/$libraryId/Explorer/util';
 import { AddLocationButton } from '~/app/$libraryId/settings/library/locations/AddLocationButton';
 import { Icon, SubtleButton } from '~/components';
+import { useLocale } from '~/hooks';
 
 import SidebarLink from '../../SidebarLayout/Link';
 import Section from '../../SidebarLayout/Section';
@@ -24,9 +25,11 @@ export default function Locations() {
 	const locations = useCache(locationsQuery.data?.items);
 	const onlineLocations = useOnlineLocations();
 
+	const { t } = useLocale();
+
 	return (
 		<Section
-			name="Locations"
+			name={t('locations')}
 			actionArea={
 				<Link to="settings/library/locations">
 					<SubtleButton />

diff --git a/interface/app/$libraryId/Layout/Sidebar/sections/SavedSearches/index.tsx b/interface/app/$libraryId/Layout/Sidebar/sections/SavedSearches/index.tsx
@@ -5,6 +5,7 @@ import { useLibraryMutation, useLibraryQuery, type SavedSearch } from '@sd/clien
 import { Button } from '@sd/ui';
 import { useExplorerDroppable } from '~/app/$libraryId/Explorer/useExplorerDroppable';
 import { Folder } from '~/components';
+import { useLocale } from '~/hooks';
 
 import SidebarLink from '../../SidebarLayout/Link';
 import Section from '../../SidebarLayout/Section';
@@ -23,6 +24,8 @@ export default function SavedSearches() {
 
 	const navigate = useNavigate();
 
+	const { t } = useLocale();
+
 	const deleteSavedSearch = useLibraryMutation(['search.saved.delete'], {
 		onSuccess() {
 			if (currentIndex !== undefined && savedSearches.data) {
@@ -40,7 +43,7 @@ export default function SavedSearches() {
 
 	return (
 		<Section
-			name="Saved Searches"
+			name={t('saved_searches')}
 			// actionArea={
 			// 	<Link to="settings/library/saved-searches">
 			// 		<SubtleButton />

diff --git a/interface/app/$libraryId/Layout/Sidebar/sections/Tags/index.tsx b/interface/app/$libraryId/Layout/Sidebar/sections/Tags/index.tsx
@@ -1,8 +1,10 @@
 import clsx from 'clsx';
+import { t } from 'i18next';
 import { NavLink, useMatch } from 'react-router-dom';
 import { useCache, useLibraryQuery, useNodes, type Tag } from '@sd/client';
 import { useExplorerDroppable } from '~/app/$libraryId/Explorer/useExplorerDroppable';
 import { SubtleButton } from '~/components';
+import { useLocale } from '~/hooks';
 
 import SidebarLink from '../../SidebarLayout/Link';
 import Section from '../../SidebarLayout/Section';
@@ -14,11 +16,13 @@ export default function TagsSection() {
 	useNodes(result.data?.nodes);
 	const tags = useCache(result.data?.items);
 
+	const { t } = useLocale();
+
 	if (!tags?.length) return null;
 
 	return (
 		<Section
-			name="Tags"
+			name={t('tags')}
 			actionArea={
 				<NavLink to="settings/library/tags">
 					<SubtleButton />

diff --git a/interface/app/$libraryId/overview/index.tsx b/interface/app/$libraryId/overview/index.tsx
@@ -1,5 +1,6 @@
 import { Link } from 'react-router-dom';
 import { useBridgeQuery, useCache, useLibraryQuery, useNodes } from '@sd/client';
+import { useLocale } from '~/hooks';
 import { useRouteTitle } from '~/hooks/useRouteTitle';
 import { hardwareModelToIcon } from '~/util/hardware';
 
@@ -15,6 +16,9 @@ import StatisticItem from './StatCard';
 
 export const Component = () => {
 	useRouteTitle('Overview');
+
+	const { t } = useLocale();
+
 	const locationsQuery = useLibraryQuery(['locations.list'], { keepPreviousData: true });
 	useNodes(locationsQuery.data?.nodes);
 	const locations = useCache(locationsQuery.data?.items) ?? [];
@@ -31,7 +35,9 @@ export const Component = () => {
 				<TopBarPortal
 					left={
 						<div className="flex items-center gap-2">
-							<span className="text-sm font-medium truncate">Library Overview</span>
+							<span className="truncate text-sm font-medium">
+								{t('library_overview')}
+							</span>
 						</div>
 					}
 					center={<SearchBar redirectToSearch />}
@@ -65,7 +71,7 @@ export const Component = () => {
 					// 	/>
 					// }
 				/>
-				<div className="flex flex-col gap-3 pt-3 mt-4">
+				<div className="mt-4 flex flex-col gap-3 pt-3">
 					<OverviewSection>
 						<LibraryStatistics />
 					</OverviewSection>
@@ -132,11 +138,11 @@ export const Component = () => {
 						{/**/}
 					</OverviewSection>
 
-					<OverviewSection count={locations.length} title="Locations">
+					<OverviewSection count={locations.length} title={t('locations')}>
 						{locations?.map((item) => (
 							<Link key={item.id} to={`../location/${item.id}`}>
 								<StatisticItem
-									name={item.name || 'Unnamed Location'}
+									name={item.name || t('unnamed_location')}
 									icon="Folder"
 									totalSpace={item.size_in_bytes || [0]}
 									color="#0362FF"

diff --git a/interface/app/$libraryId/settings/client/general.tsx b/interface/app/$libraryId/settings/client/general.tsx
@@ -8,6 +8,7 @@ import {
 	useZodForm
 } from '@sd/client';
 import { Button, Card, Input, Select, SelectOption, Slider, Switch, tw, z } from '@sd/ui';
+import i18n from '~/app/I18n';
 import { Icon } from '~/components';
 import { useDebouncedFormWatch, useLocale } from '~/hooks';
 import { usePlatform } from '~/util/Platform';
@@ -21,6 +22,16 @@ const NodeSettingLabel = tw.div`mb-1 text-xs font-medium`;
 // https://doc.rust-lang.org/std/u16/index.html
 const u16 = z.number().min(0).max(65_535);
 
+const LANGUAGE_OPTIONS = [
+	{ value: 'en', label: 'English' },
+	{ value: 'de', label: 'Deutsch' },
+	{ value: 'es', label: 'Español' },
+	{ value: 'fr', label: 'Français' },
+	{ value: 'tr', label: 'Türkçe' },
+	{ value: 'zh-CN', label: '中文（简体）' },
+	{ value: 'zh-TW', label: '中文（繁體）' }
+];
+
 export const Component = () => {
 	const node = useBridgeQuery(['nodeState']);
 	const platform = usePlatform();
@@ -96,6 +107,7 @@ export const Component = () => {
 				title={t('general_settings')}
 				description={t('general_settings_description')}
 			/>
+			{/* Node Card */}
 			<Card className="px-5">
 				<div className="my-2 flex w-full flex-col">
 					<div className="flex flex-row items-center justify-between">
@@ -161,7 +173,7 @@ export const Component = () => {
 										}
 									}}
 								>
-									Open
+									{t('open')}
 								</Button>
 								{/* <Button size="sm" variant="outline">
 									Change
@@ -183,14 +195,35 @@ export const Component = () => {
 					</div> */}
 				</div>
 			</Card>
-
+			{/* Language Settings */}
+			<Setting mini title={t('language')} description={t('language_description')}>
+				<div className="flex h-[30px] gap-2">
+					<Select
+						value={i18n.language}
+						onChange={(e) => {
+							// add "i18nextLng" key to localStorage and set it to the selected language
+							i18n.changeLanguage(e);
+							localStorage.setItem('i18nextLng', e);
+						}}
+						containerClassName="h-[30px] whitespace-nowrap"
+					>
+						{LANGUAGE_OPTIONS.map((lang, key) => (
+							<SelectOption key={key} value={lang.value}>
+								{lang.label}
+							</SelectOption>
+						))}
+					</Select>
+				</div>
+			</Setting>
+			{/* Debug Mode */}
 			<Setting mini title={t('debug_mode')} description={t('debug_mode_description')}>
 				<Switch
 					size="md"
 					checked={debugState.enabled}
 					onClick={() => (debugState.enabled = !debugState.enabled)}
 				/>
 			</Setting>
+			{/* Background Processing */}
 			<Setting
 				mini
 				registerName="background_processing_percentage"
@@ -223,13 +256,14 @@ export const Component = () => {
 					/>
 				</div>
 			</Setting>
+			{/* Image Labeler */}
 			<Setting
 				mini
 				title={t('image_labeler_ai_model')}
 				description={t('image_labeler_ai_model_description')}
 				registerName="image_labeler_version"
 			>
-				<div className="flex h-[30px] gap-2">
+				<div className="flex h-[30px]">
 					<Controller
 						name="image_labeler_version"
 						disabled={node.data?.image_labeler_version == null}

diff --git a/interface/app/$libraryId/settings/node/libraries/index.tsx b/interface/app/$libraryId/settings/node/libraries/index.tsx
@@ -1,6 +1,6 @@
-import { t } from 'i18next';
 import { useBridgeQuery, useCache, useLibraryContext, useNodes } from '@sd/client';
 import { Button, dialogManager } from '@sd/ui';
+import { useLocale } from '~/hooks';
 
 import { Heading } from '../../Layout';
 import CreateDialog from './CreateDialog';
@@ -13,11 +13,13 @@ export const Component = () => {
 
 	const { library } = useLibraryContext();
 
+	const { t } = useLocale();
+
 	return (
 		<>
 			<Heading
 				title={t('libraries')}
-				description={t("libraries_description")}
+				description={t('libraries_description')}
 				rightArea={
 					<div className="flex-row space-x-2">
 						<Button
@@ -27,7 +29,7 @@ export const Component = () => {
 								dialogManager.create((dp) => <CreateDialog {...dp} />);
 							}}
 						>
-							{t("add_library")}
+							{t('add_library')}
 						</Button>
 					</div>
 				}

diff --git a/interface/app/I18n.ts b/interface/app/I18n.ts
@@ -1,12 +1,12 @@
 import i18n from 'i18next';
-// import LanguageDetector from 'i18next-browser-languagedetector';
+import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 import * as resources from 'virtual:i18next-loader';
 
 i18n
-	// // detect user language
-	// // learn more: https://github.com/i18next/i18next-browser-languageDetector
-	// .use(LanguageDetector)
+	// detect user language
+	// learn more: https://github.com/i18next/i18next-browser-languageDetector
+	.use(LanguageDetector)
 	// pass the i18n instance to react-i18next.
 	.use(initReactI18next)
 	// init i18next