From 8de2b0031720a60772e00506ec2dc8c954bbc64a Mon Sep 17 00:00:00 2001
From: Tyler VanZanten <tylervz@users.noreply.github.com>
Date: Tue, 15 Oct 2024 15:25:34 -0400
Subject: [PATCH] Reformat JavaScript and TypeScript files with Prettier
 (#1192)

---
 www/package-lock.json                   |   9 +-
 www/package.json                        |   2 +-
 www/src/Addons/I2CAnalog1219.tsx        |   3 +-
 www/src/Addons/Keyboard.tsx             |  68 ++++-----
 www/src/Addons/ReactiveLED.tsx          | 181 ++++++++++++++----------
 www/src/Components/CaptureButton.tsx    |   2 +-
 www/src/Components/KeyboardMapper.jsx   |   4 +-
 www/src/Components/Navigation.jsx       |  12 +-
 www/src/Locales/zh-CN/PinMapping.jsx    |   9 +-
 www/src/Pages/AddonsConfigPage.jsx      |   5 +-
 www/src/Pages/HomePage.jsx              |  10 +-
 www/src/Pages/InputMacroAddonPage.tsx   |  10 +-
 www/src/Pages/PeripheralMappingPage.jsx |   2 +-
 www/src/Pages/PinMapping.tsx            |   6 +-
 www/src/Pages/SettingsPage.jsx          |   8 +-
 www/src/Store/useProfilesStore.ts       |   2 +-
 www/vite.config.ts                      |   2 +-
 17 files changed, 191 insertions(+), 144 deletions(-)

diff --git a/www/package-lock.json b/www/package-lock.json
index 34f13ce52..2b59f5f5c 100644
--- a/www/package-lock.json
+++ b/www/package-lock.json
@@ -44,7 +44,7 @@
 				"express": "^4.18.2",
 				"nodemon": "^2.0.22",
 				"pako": "^2.1.0",
-				"prettier": "^3.0.1",
+				"prettier": "^3.3.3",
 				"sass": "^1.62.1",
 				"typescript": "^5.3.3",
 				"vite": "^4.3.9"
@@ -4588,10 +4588,11 @@
 			}
 		},
 		"node_modules/prettier": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.1.tgz",
-			"integrity": "sha512-fcOWSnnpCrovBsmFZIGIy9UqK2FaI7Hqax+DIO0A9UxeVoY4iweyaFjS5TavZN97Hfehph0nhsZnjlVKzEQSrQ==",
+			"version": "3.3.3",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+			"integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
 			"dev": true,
+			"license": "MIT",
 			"bin": {
 				"prettier": "bin/prettier.cjs"
 			},
diff --git a/www/package.json b/www/package.json
index f5a30ee9b..651020f1a 100644
--- a/www/package.json
+++ b/www/package.json
@@ -51,7 +51,7 @@
 		"express": "^4.18.2",
 		"nodemon": "^2.0.22",
 		"pako": "^2.1.0",
-		"prettier": "^3.0.1",
+		"prettier": "^3.3.3",
 		"sass": "^1.62.1",
 		"typescript": "^5.3.3",
 		"vite": "^4.3.9"
diff --git a/www/src/Addons/I2CAnalog1219.tsx b/www/src/Addons/I2CAnalog1219.tsx
index 6bd427643..1c428e51f 100644
--- a/www/src/Addons/I2CAnalog1219.tsx
+++ b/www/src/Addons/I2CAnalog1219.tsx
@@ -36,8 +36,7 @@ const I2CAnalog1219 = ({ values, errors, handleChange, handleCheckbox }) => {
 				hidden={
 					!(values.I2CAnalog1219InputEnabled && getAvailablePeripherals('i2c'))
 				}
-			>
-			</div>
+			></div>
 			{getAvailablePeripherals('i2c') ? (
 				<FormCheck
 					label={t('Common:switch-enabled')}
diff --git a/www/src/Addons/Keyboard.tsx b/www/src/Addons/Keyboard.tsx
index 36eaa4d7f..7279752c9 100644
--- a/www/src/Addons/Keyboard.tsx
+++ b/www/src/Addons/Keyboard.tsx
@@ -28,15 +28,24 @@ export const keyboardScheme = {
 	keyboardHostMouseLeft: yup
 		.number()
 		.label('Left Mouse Button')
-		.validateSelectionWhenValue('KeyboardHostAddonEnabled', BUTTON_MASKS_OPTIONS),
+		.validateSelectionWhenValue(
+			'KeyboardHostAddonEnabled',
+			BUTTON_MASKS_OPTIONS,
+		),
 	keyboardHostMouseMiddle: yup
 		.number()
 		.label('Middle Mouse Button')
-		.validateSelectionWhenValue('KeyboardHostAddonEnabled', BUTTON_MASKS_OPTIONS),
+		.validateSelectionWhenValue(
+			'KeyboardHostAddonEnabled',
+			BUTTON_MASKS_OPTIONS,
+		),
 	keyboardHostMouseRight: yup
 		.number()
 		.label('Right Mouse Button')
-		.validateSelectionWhenValue('KeyboardHostAddonEnabled', BUTTON_MASKS_OPTIONS),
+		.validateSelectionWhenValue(
+			'KeyboardHostAddonEnabled',
+			BUTTON_MASKS_OPTIONS,
+		),
 };
 
 export const keyboardState = {
@@ -47,16 +56,24 @@ export const keyboardState = {
 	KeyboardHostAddonEnabled: 0,
 };
 
-const options = Object.entries(BUTTON_ACTIONS)
-	.map(([key, value]) => ({
-		label: key,
-		value,
-	}));
+const options = Object.entries(BUTTON_ACTIONS).map(([key, value]) => ({
+	label: key,
+	value,
+}));
 
 const excludedButtons = [
-	'E1','E2','E3','E4',
-	'E5','E6','E7','E8',
-	'E9','E10','E11','E12',
+	'E1',
+	'E2',
+	'E3',
+	'E4',
+	'E5',
+	'E6',
+	'E7',
+	'E8',
+	'E9',
+	'E10',
+	'E11',
+	'E12',
 ];
 
 const Keyboard = ({
@@ -95,7 +112,7 @@ const Keyboard = ({
 					<div className="mb-2">
 						<KeyboardMapper
 							buttonLabels={buttonLabels}
-                            excludeButtons={excludedButtons}
+							excludeButtons={excludedButtons}
 							handleKeyChange={handleKeyChange(values, setFieldValue)}
 							validated={validated}
 							getKeyMappingForButton={getKeyMappingForButton(values)}
@@ -104,9 +121,7 @@ const Keyboard = ({
 				</Row>
 				<Row className="mb-3">
 					<p>{t('AddonsConfig:keyboard-host-mouse-header-text')}</p>
-					<div
-						className="col-sm-12 col-md-6 col-lg-2 mb-2"
-					>
+					<div className="col-sm-12 col-md-6 col-lg-2 mb-2">
 						<FormSelect
 							label={t(`AddonsConfig:keyboard-host-left-mouse`)}
 							name="keyboardHostMouseLeft"
@@ -117,18 +132,13 @@ const Keyboard = ({
 							onChange={handleChange}
 						>
 							{BUTTON_MASKS_OPTIONS.map((o, i) => (
-								<option
-									key={`keyboardHostMouseLeft-${i}`}
-									value={o.value}
-								>
+								<option key={`keyboardHostMouseLeft-${i}`} value={o.value}>
 									{o.label}
 								</option>
 							))}
 						</FormSelect>
 					</div>
-					<div
-						className="col-sm-12 col-md-6 col-lg-2 mb-2"
-					>
+					<div className="col-sm-12 col-md-6 col-lg-2 mb-2">
 						<FormSelect
 							label={t(`AddonsConfig:keyboard-host-middle-mouse`)}
 							name="keyboardHostMouseMiddle"
@@ -139,18 +149,13 @@ const Keyboard = ({
 							onChange={handleChange}
 						>
 							{BUTTON_MASKS_OPTIONS.map((o, i) => (
-								<option
-									key={`keyboardHostMouseMiddle-${i}`}
-									value={o.value}
-								>
+								<option key={`keyboardHostMouseMiddle-${i}`} value={o.value}>
 									{o.label}
 								</option>
 							))}
 						</FormSelect>
 					</div>
-					<div
-						className="col-sm-12 col-md-6 col-lg-2 mb-2"
-					>
+					<div className="col-sm-12 col-md-6 col-lg-2 mb-2">
 						<FormSelect
 							label={t(`AddonsConfig:keyboard-host-right-mouse`)}
 							name="keyboardHostMouseRight"
@@ -161,10 +166,7 @@ const Keyboard = ({
 							onChange={handleChange}
 						>
 							{BUTTON_MASKS_OPTIONS.map((o, i) => (
-								<option
-									key={`keyboardHostMouseRight-${i}`}
-									value={o.value}
-								>
+								<option key={`keyboardHostMouseRight-${i}`} value={o.value}>
 									{o.label}
 								</option>
 							))}
diff --git a/www/src/Addons/ReactiveLED.tsx b/www/src/Addons/ReactiveLED.tsx
index 7f2225f22..1c978d179 100644
--- a/www/src/Addons/ReactiveLED.tsx
+++ b/www/src/Addons/ReactiveLED.tsx
@@ -12,17 +12,14 @@ import FormSelect from '../Components/FormSelect';
 import FormControl from '../Components/FormControl';
 import { Button, FormCheck, Row, Col } from 'react-bootstrap';
 
-import WebApi, { } from '../Services/WebApi';
+import WebApi from '../Services/WebApi';
 
-import {
-	BUTTON_ACTIONS,
-	PinActionValues,
-} from '../Data/Pins';
+import { BUTTON_ACTIONS, PinActionValues } from '../Data/Pins';
 import { getButtonLabels } from '../Data/Buttons';
 
 const NON_SELECTABLE_BUTTON_ACTIONS = [
 	-5, 0, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36,
-	37, 38, 39, 40
+	37, 38, 39, 40,
 ];
 
 const REACTIVE_LED_MODES = [
@@ -72,82 +69,124 @@ const ReactiveLED = ({ values, errors, handleChange, handleCheckbox }) => {
 		fetchData();
 	}, [setSelectedLEDs, selectedLEDs]);
 
-	const handleLEDChange = (c : any, idx : Number, field : String, value : Number) => {
+	const handleLEDChange = (
+		c: any,
+		idx: Number,
+		field: String,
+		value: Number,
+	) => {
 		c[idx][field] = value;
 		console.dir(c);
 		return [...c];
 	};
 
 	const saveLEDSettings = async () => {
-		const ledSettings = await WebApi.setReactiveLEDs({leds: reactiveLEDs});
+		const ledSettings = await WebApi.setReactiveLEDs({ leds: reactiveLEDs });
 	};
 
 	return (
 		<Section title={t('ReactiveLED:header-text')}>
-			<div id="ReactiveLEDEnabledOptions" hidden={!values.ReactiveLEDAddonEnabled}>
+			<div
+				id="ReactiveLEDEnabledOptions"
+				hidden={!values.ReactiveLEDAddonEnabled}
+			>
 				<Row className="mb-3">
-					{reactiveLEDs?.length > 0 ? reactiveLEDs.map((o,i) => (
-						<div className="col card mb-1 me-1" key={`reactiveLED${i}`}>
-							<label>{t('ReactiveLED:led-panel-label', { index: i })}</label>
-							<FormControl
-								type="number"
-								label={t('ReactiveLED:led-pin-label')}
-								name={`led${i}Pin`}
-								className="form-control-sm"
-								groupClassName="mb-3"
-								value={reactiveLEDs[i].pin}
-								onChange={(e) => setSelectedLEDs((c) => handleLEDChange(c, i, 'pin', Number(e.target.value)))}
-								min={-1}
-								max={29}
-							/>
-							<FormSelect
-								label={t('ReactiveLED:led-action-label')}
-								name={`led${i}Action`}
-								className="form-select-sm"
-								groupClassName="mb-3"
-								value={reactiveLEDs[i].action}
-								onChange={(e) => setSelectedLEDs((c) => handleLEDChange(c, i, 'action', Number(e.target.value)))}
-							>
-								{Object.values(BUTTON_ACTIONS).filter((o) => !isNonSelectable(o)).map((mo,mi) => {
-								const opt = getOption(null,mo);
-								const labelKey = opt.label.split('BUTTON_PRESS_').pop();
-								return (
-									<option key={`led${i}Action-option-${mi}`} value={mo}>
-										{(labelKey && buttonNames[labelKey]) || t(`PinMapping:actions.${opt.label}`)}
-									</option>
-								);
-							})}
-							</FormSelect>
-							<FormSelect
-								label={t('ReactiveLED:led-mode-up-label')}
-								name={`led${i}ModeUp`}
-								className="form-select-sm"
-								groupClassName="mb-3"
-								value={reactiveLEDs[i].modeUp}
-								onChange={(e) => setSelectedLEDs((c) => handleLEDChange(c, i, 'modeUp', Number(e.target.value)))}
-							>
-								{REACTIVE_LED_MODES.map((mo, mi) => (
-									<option key={`led${i}ModeUp-option-${mi}`} value={mo.value}>
-										{t(`ReactiveLED:led-mode.${mo.label}`)}
-									</option>
-								))}
-							</FormSelect>
-							<FormSelect
-								label={t('ReactiveLED:led-mode-down-label')}
-								name={`led${i}ModeDown`}
-								className="form-select-sm"
-								groupClassName="mb-3"
-								value={reactiveLEDs[i].modeDown}
-								onChange={(e) => setSelectedLEDs((c) => handleLEDChange(c, i, 'modeDown', Number(e.target.value)))}
-							>
-								{REACTIVE_LED_MODES.map((mo, mi) => (
-									<option key={`led${i}ModeDown-option-${mi}`} value={mo.value}>
-										{t(`ReactiveLED:led-mode.${mo.label}`)}
-									</option>
-								))}
-							</FormSelect>
-						</div>
-					)) : ''}
+					{reactiveLEDs?.length > 0
+						? reactiveLEDs.map((o, i) => (
+								<div className="col card mb-1 me-1" key={`reactiveLED${i}`}>
+									<label>
+										{t('ReactiveLED:led-panel-label', { index: i })}
+									</label>
+									<FormControl
+										type="number"
+										label={t('ReactiveLED:led-pin-label')}
+										name={`led${i}Pin`}
+										className="form-control-sm"
+										groupClassName="mb-3"
+										value={reactiveLEDs[i].pin}
+										onChange={(e) =>
+											setSelectedLEDs((c) =>
+												handleLEDChange(c, i, 'pin', Number(e.target.value)),
+											)
+										}
+										min={-1}
+										max={29}
+									/>
+									<FormSelect
+										label={t('ReactiveLED:led-action-label')}
+										name={`led${i}Action`}
+										className="form-select-sm"
+										groupClassName="mb-3"
+										value={reactiveLEDs[i].action}
+										onChange={(e) =>
+											setSelectedLEDs((c) =>
+												handleLEDChange(c, i, 'action', Number(e.target.value)),
+											)
+										}
+									>
+										{Object.values(BUTTON_ACTIONS)
+											.filter((o) => !isNonSelectable(o))
+											.map((mo, mi) => {
+												const opt = getOption(null, mo);
+												const labelKey = opt.label.split('BUTTON_PRESS_').pop();
+												return (
+													<option key={`led${i}Action-option-${mi}`} value={mo}>
+														{(labelKey && buttonNames[labelKey]) ||
+															t(`PinMapping:actions.${opt.label}`)}
+													</option>
+												);
+											})}
+									</FormSelect>
+									<FormSelect
+										label={t('ReactiveLED:led-mode-up-label')}
+										name={`led${i}ModeUp`}
+										className="form-select-sm"
+										groupClassName="mb-3"
+										value={reactiveLEDs[i].modeUp}
+										onChange={(e) =>
+											setSelectedLEDs((c) =>
+												handleLEDChange(c, i, 'modeUp', Number(e.target.value)),
+											)
+										}
+									>
+										{REACTIVE_LED_MODES.map((mo, mi) => (
+											<option
+												key={`led${i}ModeUp-option-${mi}`}
+												value={mo.value}
+											>
+												{t(`ReactiveLED:led-mode.${mo.label}`)}
+											</option>
+										))}
+									</FormSelect>
+									<FormSelect
+										label={t('ReactiveLED:led-mode-down-label')}
+										name={`led${i}ModeDown`}
+										className="form-select-sm"
+										groupClassName="mb-3"
+										value={reactiveLEDs[i].modeDown}
+										onChange={(e) =>
+											setSelectedLEDs((c) =>
+												handleLEDChange(
+													c,
+													i,
+													'modeDown',
+													Number(e.target.value),
+												),
+											)
+										}
+									>
+										{REACTIVE_LED_MODES.map((mo, mi) => (
+											<option
+												key={`led${i}ModeDown-option-${mi}`}
+												value={mo.value}
+											>
+												{t(`ReactiveLED:led-mode.${mo.label}`)}
+											</option>
+										))}
+									</FormSelect>
+								</div>
+							))
+						: ''}
 				</Row>
 				<Row className="mb-3">
 					<div className="col-sm-3 mb-3">
diff --git a/www/src/Components/CaptureButton.tsx b/www/src/Components/CaptureButton.tsx
index 5828361ef..1b7009a4d 100644
--- a/www/src/Components/CaptureButton.tsx
+++ b/www/src/Components/CaptureButton.tsx
@@ -110,7 +110,7 @@ const CaptureButton = ({
 							buttonLabel
 								? buttonLabel
 								: t('CaptureButton:capture-button-button-label')
-					  } 🎮`}
+						} 🎮`}
 			</Button>
 		</>
 	);
diff --git a/www/src/Components/KeyboardMapper.jsx b/www/src/Components/KeyboardMapper.jsx
index f0c2103f5..c39367247 100644
--- a/www/src/Components/KeyboardMapper.jsx
+++ b/www/src/Components/KeyboardMapper.jsx
@@ -11,7 +11,7 @@ const KeyboardMapper = ({
 	handleKeyChange,
 	validated,
 	getKeyMappingForButton,
-    excludeButtons,
+	excludeButtons,
 	...props
 }) => {
 	const { buttonLabelType, swapTpShareLabels } = buttonLabels;
@@ -31,7 +31,7 @@ const KeyboardMapper = ({
 			<tbody>
 				{Object.keys(BUTTONS[buttonLabelType])
 					?.filter((btn) => !['label', 'value', 'Fn'].includes(btn))
-					.filter((btn) => (!excludeButtons?.find(x => x === btn)))
+					.filter((btn) => !excludeButtons?.find((x) => x === btn))
 					.map((button, i) => {
 						let label = BUTTONS[buttonLabelType][button];
 						if (
diff --git a/www/src/Components/Navigation.jsx b/www/src/Components/Navigation.jsx
index 2bc0929b7..136c94835 100644
--- a/www/src/Components/Navigation.jsx
+++ b/www/src/Components/Navigation.jsx
@@ -180,8 +180,8 @@ const Navigation = () => {
 						{isRebooting !== BOOT_MODES.BOOTSEL
 							? t('Navigation:reboot-modal-button-bootsel-label')
 							: isRebooting
-							? t('Navigation:reboot-modal-button-progress-label')
-							: t('Navigation:reboot-modal-button-success-label')}
+								? t('Navigation:reboot-modal-button-progress-label')
+								: t('Navigation:reboot-modal-button-success-label')}
 					</Button>
 					<Button
 						variant="primary"
@@ -190,8 +190,8 @@ const Navigation = () => {
 						{isRebooting !== BOOT_MODES.WEBCONFIG
 							? t('Navigation:reboot-modal-button-web-config-label')
 							: isRebooting
-							? t('Navigation:reboot-modal-button-progress-label')
-							: t('Navigation:reboot-modal-button-success-label')}
+								? t('Navigation:reboot-modal-button-progress-label')
+								: t('Navigation:reboot-modal-button-success-label')}
 					</Button>
 					<Button
 						variant="success"
@@ -200,8 +200,8 @@ const Navigation = () => {
 						{isRebooting !== BOOT_MODES.GAMEPAD
 							? t('Navigation:reboot-modal-button-controller-label')
 							: isRebooting
-							? t('Navigation:reboot-modal-button-progress-label')
-							: t('Navigation:reboot-modal-button-success-label')}
+								? t('Navigation:reboot-modal-button-progress-label')
+								: t('Navigation:reboot-modal-button-success-label')}
 					</Button>
 				</Modal.Footer>
 			</Modal>
diff --git a/www/src/Locales/zh-CN/PinMapping.jsx b/www/src/Locales/zh-CN/PinMapping.jsx
index b3650d1b4..051cbcace 100644
--- a/www/src/Locales/zh-CN/PinMapping.jsx
+++ b/www/src/Locales/zh-CN/PinMapping.jsx
@@ -1,21 +1,18 @@
 export default {
 	'header-text': '引脚映射',
-	'sub-header-text':
-		'使用引脚查看器来查看按键到引脚的连接。',
+	'sub-header-text': '使用引脚查看器来查看按键到引脚的连接。',
 	'alert-text':
 		'将按键映射到未连接或不可用的引脚可能会导致设备无法正常工作。要清除无效配置，请转到 <2>恢复默认设置</2> 页面。',
 	'pin-viewer': '引脚查看器',
 	'pin-pressed': '按下的引脚：{{pressedPin}}',
 	'pin-header-label': '引脚',
 	'profile-label-title': '档案名称',
-	'profile-label-description':
-		'最多16个字符。允许使用字母、数字和空格。',
+	'profile-label-description': '最多16个字符。允许使用字母、数字和空格。',
 	'profile-pin-mapping-title': '{{profileLabel}} - 引脚映射',
 	'profile-label-default': 'Profile {{profileNumber}}',
 	'profile-add-button': '+ 新增档案',
 	'profile-disabled': ' - (禁用)',
-	'profile-enabled-tooltip':
-		'禁用的档案在使用快捷键切换档案时将不可用。',
+	'profile-enabled-tooltip': '禁用的档案在使用快捷键切换档案时将不可用。',
 	'profile-pins-warning':
 		'尽量避免修改已设置为切换档案快捷键的按键或方向键，否则之后将很难理解你选择的档案配置！',
 	'profile-copy-base': '复制基础档案',
diff --git a/www/src/Pages/AddonsConfigPage.jsx b/www/src/Pages/AddonsConfigPage.jsx
index 394d343b4..b94416171 100644
--- a/www/src/Pages/AddonsConfigPage.jsx
+++ b/www/src/Pages/AddonsConfigPage.jsx
@@ -54,7 +54,10 @@ import DRV8833Rumble, {
 	drv8833RumbleScheme,
 	drv8833RumbleState,
 } from '../Addons/DRV8833';
-import ReactiveLED, { reactiveLEDScheme, reactiveLEDState } from '../Addons/ReactiveLED';
+import ReactiveLED, {
+	reactiveLEDScheme,
+	reactiveLEDState,
+} from '../Addons/ReactiveLED';
 
 const schema = yup.object().shape({
 	...analogScheme,
diff --git a/www/src/Pages/HomePage.jsx b/www/src/Pages/HomePage.jsx
index 5f4f08b6e..240274c19 100644
--- a/www/src/Pages/HomePage.jsx
+++ b/www/src/Pages/HomePage.jsx
@@ -55,8 +55,14 @@ export default function HomePage() {
 
 		WebApi.getMemoryReport(setLoading)
 			.then((response) => {
-				const { totalFlash, usedFlash, physicalFlash, staticAllocs, totalHeap, usedHeap } =
-					response;
+				const {
+					totalFlash,
+					usedFlash,
+					physicalFlash,
+					staticAllocs,
+					totalHeap,
+					usedHeap,
+				} = response;
 				setMemoryReport({
 					totalFlash: toKB(totalFlash),
 					usedFlash: toKB(usedFlash),
diff --git a/www/src/Pages/InputMacroAddonPage.tsx b/www/src/Pages/InputMacroAddonPage.tsx
index e7951610c..4e37858d1 100644
--- a/www/src/Pages/InputMacroAddonPage.tsx
+++ b/www/src/Pages/InputMacroAddonPage.tsx
@@ -536,10 +536,10 @@ export default function MacrosPage() {
 													{macro.macroLabel.length == 0
 														? t('InputMacroAddon:input-macro-macro-list-txt', {
 																macroNumber: i + 1,
-														  })
+															})
 														: macro.macroLabel.length > 24
-														? macro.macroLabel.substr(0, 24) + '...'
-														: macro.macroLabel}
+															? macro.macroLabel.substr(0, 24) + '...'
+															: macro.macroLabel}
 												</Nav.Link>
 											</Nav.Item>
 										))}
@@ -607,10 +607,10 @@ export default function MacrosPage() {
 																			{macro.useMacroTriggerButton == 1
 																				? t(
 																						'InputMacroAddon:input-macro-macro-trigger-type-button',
-																				  )
+																					)
 																				: t(
 																						'InputMacroAddon:input-macro-macro-trigger-type-pin',
-																				  )}
+																					)}
 																		</td>
 																		{macro.useMacroTriggerButton == 0 ? (
 																			<td>
diff --git a/www/src/Pages/PeripheralMappingPage.jsx b/www/src/Pages/PeripheralMappingPage.jsx
index bfbc14720..a9d2666dd 100644
--- a/www/src/Pages/PeripheralMappingPage.jsx
+++ b/www/src/Pages/PeripheralMappingPage.jsx
@@ -246,7 +246,7 @@ export default function PeripheralMappingPage() {
 																		? o
 																		: `${o} - ${t(
 																				'PeripheralMapping:pin-in-use',
-																		  )}`}
+																			)}`}
 																</option>
 															))}
 														</FormSelect>
diff --git a/www/src/Pages/PinMapping.tsx b/www/src/Pages/PinMapping.tsx
index e8a0867c3..ed34119b1 100644
--- a/www/src/Pages/PinMapping.tsx
+++ b/www/src/Pages/PinMapping.tsx
@@ -75,8 +75,8 @@ const options = Object.entries(BUTTON_ACTIONS)
 			type: buttonMask
 				? 'customButtonMask'
 				: dpadMask
-				? 'customDpadMask'
-				: 'action',
+					? 'customDpadMask'
+					: 'action',
 			customButtonMask: buttonMask?.value || 0,
 			customDpadMask: dpadMask?.value || 0,
 		};
@@ -107,7 +107,7 @@ const getMultiValue = (pinData) => {
 						type === 'customButtonMask') ||
 					(pinData.customDpadMask & customDpadMask &&
 						type === 'customDpadMask'),
-		  )
+			)
 		: options.filter((option) => option.value === pinData.action);
 };
 const ProfileLabel = memo(function ProfileLabel({
diff --git a/www/src/Pages/SettingsPage.jsx b/www/src/Pages/SettingsPage.jsx
index ab737e9da..443f01eca 100644
--- a/www/src/Pages/SettingsPage.jsx
+++ b/www/src/Pages/SettingsPage.jsx
@@ -41,9 +41,9 @@ const SHA256 = (ascii) => {
 	const k = (SHA256.k = SHA256.k || []);
 	let primeCounter = k[lengthProperty];
 	/*/
-    var hash = [], k = [];
-    var primeCounter = 0;
-    //*/
+		var hash = [], k = [];
+		var primeCounter = 0;
+		//*/
 
 	const isComposite = {};
 	for (let candidate = 2; primeCounter < 64; candidate++) {
@@ -97,7 +97,7 @@ const SHA256 = (ascii) => {
 								(rightRotate(w15, 7) ^ rightRotate(w15, 18) ^ (w15 >>> 3)) + // s0
 								w[i - 7] +
 								(rightRotate(w2, 17) ^ rightRotate(w2, 19) ^ (w2 >>> 10))) | // s1
-						  0);
+							0);
 			// This is only used once, so *could* be moved below, but it only saves 4 bytes and makes things unreadble
 			const temp2 =
 				(rightRotate(a, 2) ^ rightRotate(a, 13) ^ rightRotate(a, 22)) + // S0
diff --git a/www/src/Store/useProfilesStore.ts b/www/src/Store/useProfilesStore.ts
index 6ccc591bd..b91d6bb7b 100644
--- a/www/src/Store/useProfilesStore.ts
+++ b/www/src/Store/useProfilesStore.ts
@@ -114,7 +114,7 @@ const useProfilesStore = create<State & Actions>()((set, get) => ({
 							...profile,
 							...state.profiles[0],
 							profileLabel: profile.profileLabel,
-					  }
+						}
 					: profile,
 			),
 		})),
diff --git a/www/vite.config.ts b/www/vite.config.ts
index 2cca31cdd..66f6deff4 100644
--- a/www/vite.config.ts
+++ b/www/vite.config.ts
@@ -23,4 +23,4 @@ export default defineConfig({
 			lodash: 'lodash-es'
 		},
 	},
-});
\ No newline at end of file
+});