More translations (#2051)

* translations

* more translation keys

* all the translations

interface/app/$libraryId/Layout/Sidebar/SidebarLayout/FeedbackButton.tsx

@@ -2,22 +2,26 @@ import clsx from 'clsx';
 import { Controller } from 'react-hook-form';
 import { auth, useBridgeMutation, useZodForm } from '@sd/client';
 import { Button, Form, Popover, TextAreaField, toast, usePopover, z } from '@sd/ui';
+import i18n from '~/app/I18n';
 import { LoginButton } from '~/components/LoginButton';
+import { useLocale } from '~/hooks';
 
 const schema = z.object({
-	message: z.string().min(1, { message: 'Feedback is required' }),
+	message: z.string().min(1, { message: i18n.t('feedback_is_required') }),
 	emoji: z.number().min(0).max(3)
 });
 
 const EMOJIS = ['🤩', '😀', '🙁', '😭'];
 
 export default function () {
+	const { t } = useLocale();
+
 	const sendFeedback = useBridgeMutation(['api.sendFeedback'], {
 		onError() {
-			toast.error('There was an error submitting your feedback. Please try again.');
+			toast.error(t('feedback_toast_error_message'));
 		},
 		onSuccess() {
-			toast.success('Thanks for your feedback!');
+			toast.success(t('thank_you_for_your_feedback'));
 		}
 	});
 
@@ -37,7 +41,7 @@ export default function () {
 			popover={popover}
 			trigger={
 				<Button variant="outline" className="flex items-center gap-1">
-					<p className="text-[11px] font-normal text-sidebar-inkFaint">Feedback</p>
+					<p className="text-[11px] font-normal text-sidebar-inkFaint">{t('feedback')}</p>
 				</Button>
 			}
 		>
@@ -55,14 +59,14 @@ export default function () {
 						<div className="flex flex-row items-center gap-2">
 							<p className="flex-1 text-xs text-ink-dull">
 								{authState.status !== 'loggingIn' &&
-									'Logging in allows us to respond to your feedback'}
+									t('feedback_login_description')}
 							</p>
 							<LoginButton cancelPosition="left" />
 						</div>
 					)}
 					<TextAreaField
 						{...form.register('message')}
-						placeholder="Your feedback..."
+						placeholder={t('feedback_placeholder')}
 						className="!h-36 w-full flex-1"
 					/>
 					<div className="flex flex-row justify-between">
@@ -89,7 +93,7 @@ export default function () {
 						/>
 
 						<Button type="submit" variant="accent" disabled={!form.formState.isValid}>
-							Send
+							{t('send')}
 						</Button>
 					</div>
 				</div>

interface/app/$libraryId/settings/client/SpacedriveAccount.tsx

@@ -1,6 +1,7 @@
 import { auth, useBridgeQuery } from '@sd/client';
 import { Button, Card } from '@sd/ui';
 import { AuthRequiredOverlay } from '~/components/AuthRequiredOverlay';
+import { useLocale } from '~/hooks';
 
 export function SpacedriveAccount() {
 	return (
@@ -13,17 +14,18 @@ export function SpacedriveAccount() {
 
 function Account() {
 	const me = useBridgeQuery(['auth.me'], { retry: false });
+	const { t } = useLocale();
 
 	return (
 		<div className="my-2 flex w-full flex-col">
 			<div className="flex items-center justify-between">
-				<span className="font-semibold">Spacedrive Account</span>
+				<span className="font-semibold">{t("spacedrive_account")}</span>
 				<Button variant="gray" onClick={auth.logout}>
-					Logout
+					{t('logout')}
 				</Button>
 			</div>
 			<hr className="mb-4 mt-2 w-full border-app-line" />
-			<span>Logged in as {me.data?.email}</span>
+			<span>{t('logged_in_as', { email: me.data?.email })}</span>
 		</div>
 	);
 }

interface/app/$libraryId/settings/client/account.tsx

@@ -1,9 +1,8 @@
 import { Envelope, User } from '@phosphor-icons/react';
-import { iconNames } from '@sd/assets/util';
 import { useEffect, useState } from 'react';
 import { auth, useBridgeMutation, useBridgeQuery, useFeatureFlag } from '@sd/client';
 import { Button, Card, Input, toast } from '@sd/ui';
-import { Icon, TruncatedText } from '~/components';
+import { TruncatedText } from '~/components';
 import { AuthRequiredOverlay } from '~/components/AuthRequiredOverlay';
 import { useLocale } from '~/hooks';
 
@@ -21,14 +20,14 @@ export const Component = () => {
 						{authStore.status === 'loggedIn' && (
 							<div className="flex-row space-x-2">
 								<Button variant="accent" size="sm" onClick={auth.logout}>
-									Logout
+									{t('logout')}
 								</Button>
 							</div>
 						)}
 					</>
 				}
-				title="Spacedrive Cloud"
-				description="Spacedrive is always local first, but we will offer our own optional cloud services in the future. For now, authentication is only used for the Feedback feature, otherwise it is not required."
+				title={t('spacedrive_cloud')}
+				description={t('spacedrive_cloud_description')}
 			/>
 			<div className="flex flex-col justify-between gap-5 lg:flex-row">
 				<Profile authStore={authStore} email={me.data?.email} />

interface/app/$libraryId/settings/client/keybindings.tsx

@@ -7,6 +7,7 @@ import {
 import clsx from 'clsx';
 import { useState } from 'react';
 import { Divider, ModifierKeys, Switch } from '@sd/ui';
+import i18n from '~/app/I18n';
 import { Shortcut, shortcutCategories, useLocale, useOperatingSystem } from '~/hooks';
 import { keybindForOs } from '~/util/keybinds';
 import { OperatingSystem } from '~/util/Platform';
@@ -102,11 +103,11 @@ function createKeybindColumns(os: OperatingSystem) {
 	}>();
 	const columns = [
 		columnHelper.accessor('action', {
-			header: 'Description',
+			header: i18n.t('description'),
 			cell: (info) => <p className="w-full text-sm text-ink-faint">{info.getValue()}</p>
 		}),
 		columnHelper.accessor('icons', {
-			header: () => <p className="text-right">Key</p>,
+			header: () => <p className="text-right">{i18n.t('key')}</p>,
 			size: 200,
 			cell: (info) => {
 				const checkData = info.getValue()[os] || info.getValue()['all'];

interface/app/$libraryId/settings/library/locations/AddLocationButton.tsx

@@ -4,7 +4,7 @@ import { motion } from 'framer-motion';
 import { ComponentProps, useRef, useState } from 'react';
 import { useLibraryContext } from '@sd/client';
 import { Button, dialogManager, type ButtonProps } from '@sd/ui';
-import { useCallbackToWatchResize } from '~/hooks';
+import { useCallbackToWatchResize, useLocale } from '~/hooks';
 import { usePlatform } from '~/util/Platform';
 
 import { AddLocationDialog } from './AddLocationDialog';
@@ -26,6 +26,8 @@ export const AddLocationButton = ({
 	const platform = usePlatform();
 	const libraryId = useLibraryContext().library.uuid;
 
+	const { t } = useLocale();
+
 	const transition = {
 		type: 'keyframes',
 		ease: 'easeInOut',
@@ -90,7 +92,7 @@ export const AddLocationButton = ({
 						</div>
 					</div>
 				) : (
-					'Add Location'
+					t('add_location')
 				)}
 			</Button>
 		</>

interface/hooks/useKeyCopyCutPaste.ts

@@ -8,11 +8,13 @@ import { toast } from '@sd/ui';
 import { useExplorerContext } from '~/app/$libraryId/Explorer/Context';
 import { explorerStore } from '~/app/$libraryId/Explorer/store';
 import { useExplorerSearchParams } from '~/app/$libraryId/Explorer/util';
-import { isNonEmpty } from '~/util';
 
+import { useLocale } from './useLocale';
 import { useShortcut } from './useShortcut';
 
 export const useKeyCopyCutPaste = () => {
+	const { t } = useLocale();
+
 	const cutCopyState = useSelector(explorerStore, (s) => s.cutCopyState);
 	const [{ path }] = useExplorerSearchParams();
 
@@ -76,7 +78,7 @@ export const useKeyCopyCutPaste = () => {
 				});
 			} catch (error) {
 				toast.error({
-					title: 'Failed to duplicate file',
+					title: t('failed_to_duplicate_file'),
 					body: `Error: ${error}.`
 				});
 			}
@@ -116,7 +118,7 @@ export const useKeyCopyCutPaste = () => {
 							indexedArgs.sourceLocationId === parent.location.id &&
 							sourceParentPath === path
 						) {
-							toast.error('File already exists in this location');
+							toast.error(t('file_already_exist_in_this_location'));
 						}
 						await cutFiles.mutateAsync({
 							source_location_id: indexedArgs.sourceLocationId,
@@ -136,10 +138,17 @@ export const useKeyCopyCutPaste = () => {
 					}
 				}
 			} catch (error) {
-				toast.error({
-					title: `Failed to ${type.toLowerCase()} file`,
-					body: `Error: ${error}.`
-				});
+				if (type === 'Copy') {
+					toast.error({
+						title: t('failed_to_copy_file'),
+						body: `Error: ${error}.`
+					});
+				} else if (type === 'Cut') {
+					toast.error({
+						title: t('failed_to_cut_file'),
+						body: `Error: ${error}.`
+					});
+				}
 			}
 		}
 	});