Fixed tweaks and mods, added localization, added antivirus walkthrough

src/renderer/components/TopBar.tsx

@@ -2,12 +2,15 @@ import { Settings, Minus, X } from 'lucide-react';
 import { useState } from 'react';
 
 import { api } from '~renderer/utils/api';
+import { useT } from '~renderer/i18n';
 
 import DialogButton from './styled/DialogButton';
 import PreferencesDialog from './PreferencesDialog';
 import TextButton from './styled/TextButton';
+import LanguageDropdown from './LanguageDropdown';
 
 const TopBar = () => {
+	const t = useT();
 	const [safeToQuit, setSafeToQuit] = useState(true);
 	api.updater.observe.useSubscription(undefined, {
 		onData: ({ state }) =>
@@ -21,12 +24,16 @@ const TopBar = () => {
 			style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
 			className="absolute left-0 right-0 top-0 flex justify-end pr-2 pt-2 opacity-50"
 		>
-			<div style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties} className="flex">
+			<div
+				style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
+				className="flex items-center"
+			>
+				<LanguageDropdown />
 				<DialogButton dialog={close => <PreferencesDialog close={close} />}>
 					{open => (
 						<TextButton
 							icon={Settings}
-							title="Settings"
+							title={t('topbar.settings')}
 							onClick={open}
 							size={16}
 							className="!p-1"
@@ -35,7 +42,7 @@ const TopBar = () => {
 				</DialogButton>
 				<TextButton
 					icon={Minus}
-					title="Minimize"
+					title={t('topbar.minimize')}
 					onClick={() => minimize.mutateAsync()}
 					size={16}
 					className="!p-1"
@@ -43,19 +50,16 @@ const TopBar = () => {
 				<DialogButton
 					dialog={close => (
 						<div className="tw-dialog">
-							<h3 className="tw-color">Quit?</h3>
+							<h3 className="tw-color">{t('quit.title')}</h3>
 							<hr />
-							<p className="text-blueGray">
-								Your game is currently being updated. Quitting now may cause
-								problems.
-							</p>
+							<p className="text-blueGray">{t('quit.warn')}</p>
 							<div className="flex gap-2 self-end">
-								<TextButton onClick={close}>Return</TextButton>
+								<TextButton onClick={close}>{t('quit.return')}</TextButton>
 								<TextButton
 									onClick={() => quit.mutateAsync()}
 									className="text-red"
 								>
-									Quit
+									{t('topbar.quit')}
 								</TextButton>
 							</div>
 						</div>
@@ -64,7 +68,7 @@ const TopBar = () => {
 					{open => (
 						<TextButton
 							icon={X}
-							title="Quit"
+							title={t('topbar.quit')}
 							onClick={() => (!safeToQuit ? open() : quit.mutateAsync())}
 							size={16}
 							className="!p-1 hocus:text-red"