Fixed tweaks and mods, added localization, added antivirus walkthrough

src/renderer/components/PreferencesDialog.tsx

@@ -5,12 +5,14 @@ import {
 	FolderOpen,
 	RefreshCw,
 	ScrollText,
+	ShieldAlert,
 	ShieldCheck
 } from 'lucide-react';
 
 import { PreferencesSchema } from '~common/schemas';
 import { api } from '~renderer/utils/api';
 import zodResolver from '~renderer/utils/zodResolver';
+import { useT } from '~renderer/i18n';
 
 import TextButton from './styled/TextButton';
 import CheckboxInput from './form/CheckboxInput';
@@ -19,27 +21,32 @@ import ClientDirDialog from './ClientDirDialog';
 import CloseButton from './styled/CloseButton';
 
 const MirrorStatus = () => {
+	const t = useT();
 	const [state, setState] = useState<string>('verifying');
 	api.updater.observe.useSubscription(undefined, {
 		onData: ({ state }) => setState(state)
 	});
 
 	if (state === 'serverUnreachable')
-		return <span className="s1 text-red">offline</span>;
+		return <span className="s1 text-red">{t('prefs.mirrorOffline')}</span>;
 	if (state === 'verifying' || state === 'updating')
-		return <span className="s1 text-blueGray">checking…</span>;
-	return <span className="s1 text-warmGreen">online</span>;
+		return (
+			<span className="s1 text-blueGray">{t('prefs.mirrorChecking')}</span>
+		);
+	return <span className="s1 text-warmGreen">{t('prefs.mirrorOnline')}</span>;
 };
 
 type Props = { close: () => void };
 
 const PreferencesDialog = ({ close }: Props) => {
+	const t = useT();
 	const { data: pref } = api.preferences.get.useQuery();
 	const setPref = api.preferences.set.useMutation();
 
 	const verify = api.updater.verify.useMutation();
 	const openInstallFolder = api.general.openInstallFolder.useMutation();
 	const openLogFile = api.general.openLogFile.useMutation();
+	const addExclusion = api.general.addDefenderExclusion.useMutation();
 
 	const { handleSubmit, watch, setValue, reset } = useForm({
 		defaultValues: pref ?? {},
@@ -59,9 +66,12 @@ const PreferencesDialog = ({ close }: Props) => {
 
 	return (
 		<form
-			className="tw-dialog !w-fit min-w-[480px] max-w-[640px] !gap-1 whitespace-nowrap"
+			className="tw-dialog !w-fit min-w-[480px] max-w-[640px] !gap-1"
 			onSubmit={handleSubmit(async v => {
-				await setPref.mutateAsync(v);
+				await setPref.mutateAsync({
+					cleanWdb: v.cleanWdb,
+					minimizeToTrayOnPlay: v.minimizeToTrayOnPlay
+				});
 				close();
 			})}
 		>
@@ -71,26 +81,26 @@ const PreferencesDialog = ({ close }: Props) => {
 					close();
 				}}
 			/>
-			<h3 className="tw-color">SETTINGS</h3>
+			<h3 className="tw-color">{t('prefs.title')}</h3>
 			<hr className="mb-1" />
 
 			<div className="flex items-center gap-3">
-				<h4 className="tw-color">INSTALL LOCATION:</h4>
+				<h4 className="tw-color">{t('prefs.installLocation')}</h4>
 				<TextButton
 					icon={FolderOpen}
 					size={14}
 					onClick={() => openInstallFolder.mutateAsync()}
 					className="!p-1 text-blueGray"
 				>
-					Open folder
+					{t('prefs.openFolder')}
 				</TextButton>
 			</div>
 			<div className="flex items-center gap-2 border border-blueGray/20 bg-darkGray/40 px-3 py-1">
 				<span
 					title={pref?.clientDir}
-					className="min-w-0 shrink grow overflow-hidden text-ellipsis"
+					className="min-w-0 shrink grow overflow-hidden text-ellipsis whitespace-nowrap"
 				>
-					{pref?.clientDir ?? 'Not selected'}
+					{pref?.clientDir ?? t('prefs.notSelected')}
 				</span>
 				<DialogButton
 					dialog={closeInner => (
@@ -104,15 +114,20 @@ const PreferencesDialog = ({ close }: Props) => {
 					clickAway={pref?.isPortable}
 				>
 					{open => (
-						<TextButton icon={FilePen} size={14} onClick={open} className="!p-1">
-							Change
+						<TextButton
+							icon={FilePen}
+							size={14}
+							onClick={open}
+							className="!p-1"
+						>
+							{t('prefs.change')}
 						</TextButton>
 					)}
 				</DialogButton>
 			</div>
 
 			<div className="mt-1 flex items-center gap-3">
-				<h4 className="tw-color">DOWNLOAD MIRROR:</h4>
+				<h4 className="tw-color">{t('prefs.downloadMirror')}</h4>
 			</div>
 			<div className="flex items-center gap-2 pl-2">
 				<input type="radio" checked readOnly className="accent-warmGreen" />
@@ -122,47 +137,63 @@ const PreferencesDialog = ({ close }: Props) => {
 					icon={RefreshCw}
 					size={12}
 					onClick={() => verify.mutateAsync()}
-					title="Re-check"
+					title={t('prefs.recheck')}
 					className="!p-0 text-blueGray"
 				/>
 			</div>
 
 			<div className="flex items-start gap-3">
-				<div className="flex flex-col">
-					<h4 className="tw-color">TROUBLESHOOTING:</h4>
+				<div className="flex min-w-0 flex-col">
+					<h4 className="tw-color">{t('prefs.troubleshooting')}</h4>
 					<TextButton
 						icon={ShieldCheck}
 						onClick={() => verify.mutateAsync().then(close)}
-						className="text-warmGreen"
+						className="!items-start text-left text-warmGreen"
 					>
-						Verify game files
+						{t('prefs.verifyGameFiles')}
 					</TextButton>
 					<TextButton
 						icon={ScrollText}
 						onClick={() => openLogFile.mutateAsync()}
-						className="text-pink"
+						className="!items-start text-left text-pink"
 					>
-						Open log file
+						{t('prefs.openLogFile')}
 					</TextButton>
+					<TextButton
+						icon={ShieldAlert}
+						onClick={() => addExclusion.mutateAsync()}
+						loading={addExclusion.isLoading}
+						className="!items-start text-left text-orange"
+					>
+						{t('prefs.allowThroughAntivirus')}
+					</TextButton>
+					{addExclusion.data?.ok === true && (
+						<span className="s1 text-warmGreen">
+							{t('prefs.exclusionAdded')}
+						</span>
+					)}
+					{addExclusion.data?.ok === false && (
+						<span className="s1 text-orange">{addExclusion.data.error}</span>
+					)}
 				</div>
 
-				<div className="flex flex-col">
-					<h4 className="tw-color">GENERAL SETTINGS:</h4>
+				<div className="flex min-w-0 flex-col">
+					<h4 className="tw-color">{t('prefs.generalSettings')}</h4>
 					<CheckboxInput
 						value={!!watch('cleanWdb')}
 						setValue={setBool('cleanWdb')}
-						label="Clean WDB on each launch"
+						label={t('prefs.cleanWdb')}
 					/>
 					<CheckboxInput
 						value={!!watch('minimizeToTrayOnPlay')}
 						setValue={setBool('minimizeToTrayOnPlay')}
-						label="Minimize to tray while playing"
+						label={t('prefs.minimizeToTray')}
 					/>
 				</div>
 			</div>
 
 			<TextButton type="submit" className="mt-1 self-end text-green">
-				Save
+				{t('prefs.save')}
 			</TextButton>
 		</form>
 	);