Add frontend autoformatting and set CI to require formatted code for all languages (#6052)

# Description of Changes
Changes the strategy for autoformatting to reject PRs if they are not
formatted correctly instead of allowing them to merge and then spawning
a new PR to fix the formatting. The old strategy just caused more work
for us because we'd have to manually approve the followup PR and get it
merged, which required 2 reviewers so in practice it rarely got done and
just meant everyone's PRs ended up containing reformatting for unrelated
files, which makes code review unnecessarily difficult. If the PR's code
is not formatted correctly after this PR, a comment will be added
automatically to tell the author how to run the formatter script to fix
their code so it can go in.

This also enables autoformatting for the frontend code, using Prettier.
I've enabled it for pretty much everything in the frontend folder, other
than 3rd party files and files it doesn't make sense for. I also
excluded Markdown because it sounds likely to be more annoying to have
to autoformat the Markdown in the frontend folder but nowhere else. Open
to changing this though if people disagree.

> [!note]
> 
> Advice to reviewers: The first commit contains all of the actual logic
I've introduced (CI changes, Prettier config, etc.)
> The second commit is just the reformatting of the entire frontend
folder.
> The first commit needs proper review, the second one just give it a
spot-check that it's doing what you'd expect.

frontend/src/proprietary/components/shared/UpdateSeatsModal.tsx

@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from 'react';
-import { Modal, Button, Text, Alert, Loader, Stack, Group, NumberInput } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
+import React, { useState, useEffect } from "react";
+import { Modal, Button, Text, Alert, Loader, Stack, Group, NumberInput } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { Z_INDEX_OVER_CONFIG_MODAL } from "@app/styles/zIndex";
 
 interface UpdateSeatsModalProps {
   opened: boolean;
@@ -14,7 +14,7 @@ interface UpdateSeatsModalProps {
 }
 
 type UpdateState = {
-  status: 'idle' | 'loading' | 'error';
+  status: "idle" | "loading" | "error";
   error?: string;
 };
 
@@ -28,63 +28,60 @@ const UpdateSeatsModal: React.FC<UpdateSeatsModalProps> = ({
   onUpdateSeats,
 }) => {
   const { t } = useTranslation();
-  const [state, setState] = useState<UpdateState>({ status: 'idle' });
+  const [state, setState] = useState<UpdateState>({ status: "idle" });
   const [newSeatCount, setNewSeatCount] = useState<number>(minimumSeats);
 
   // Reset seat count when modal opens
   useEffect(() => {
     if (opened) {
       setNewSeatCount(minimumSeats);
-      setState({ status: 'idle' });
+      setState({ status: "idle" });
     }
   }, [opened, minimumSeats]);
 
   const handleUpdateSeats = async () => {
     if (!onUpdateSeats) {
       setState({
-        status: 'error',
-        error: 'Update function not provided',
+        status: "error",
+        error: "Update function not provided",
       });
       return;
     }
 
     if (newSeatCount < minimumSeats) {
       setState({
-        status: 'error',
-        error: t(
-          'billing.seatCountTooLow',
-          'Seat count must be at least {{minimum}} (current number of users)',
-          { minimum: minimumSeats }
-        ),
+        status: "error",
+        error: t("billing.seatCountTooLow", "Seat count must be at least {{minimum}} (current number of users)", {
+          minimum: minimumSeats,
+        }),
       });
       return;
     }
 
     if (newSeatCount === currentSeats) {
       setState({
-        status: 'error',
-        error: t('billing.seatCountUnchanged', 'Please select a different seat count'),
+        status: "error",
+        error: t("billing.seatCountUnchanged", "Please select a different seat count"),
       });
       return;
     }
 
     try {
-      setState({ status: 'loading' });
+      setState({ status: "loading" });
 
       // Call the update function (will call manage-billing)
       const portalUrl = await onUpdateSeats(newSeatCount);
 
       // Redirect to Stripe billing portal
-      console.log('Redirecting to Stripe billing portal:', portalUrl);
+      console.log("Redirecting to Stripe billing portal:", portalUrl);
       window.location.href = portalUrl;
 
       // Note: No need to call onSuccess here since we're redirecting
       // The return flow will handle success notification
     } catch (err) {
-      const errorMessage =
-        err instanceof Error ? err.message : 'Failed to update seat count';
+      const errorMessage = err instanceof Error ? err.message : "Failed to update seat count";
       setState({
-        status: 'error',
+        status: "error",
         error: errorMessage,
       });
       onError?.(errorMessage);
@@ -92,18 +89,18 @@ const UpdateSeatsModal: React.FC<UpdateSeatsModalProps> = ({
   };
 
   const handleClose = () => {
-    setState({ status: 'idle' });
+    setState({ status: "idle" });
     setNewSeatCount(currentSeats);
     onClose();
   };
 
   const renderContent = () => {
-    if (state.status === 'loading') {
+    if (state.status === "loading") {
       return (
-        <Stack align="center" justify="center" style={{ padding: '2rem 0' }}>
+        <Stack align="center" justify="center" style={{ padding: "2rem 0" }}>
           <Loader size="lg" />
           <Text size="sm" c="dimmed" mt="md">
-            {t('billing.preparingUpdate', 'Preparing seat update...')}
+            {t("billing.preparingUpdate", "Preparing seat update...")}
           </Text>
         </Stack>
       );
@@ -111,8 +108,8 @@ const UpdateSeatsModal: React.FC<UpdateSeatsModalProps> = ({
 
     return (
       <Stack gap="lg">
-        {state.status === 'error' && (
-          <Alert color="red" title={t('common.error', 'Error')}>
+        {state.status === "error" && (
+          <Alert color="red" title={t("common.error", "Error")}>
             {state.error}
           </Alert>
         )}
@@ -120,7 +117,7 @@ const UpdateSeatsModal: React.FC<UpdateSeatsModalProps> = ({
         <Stack gap="md" mt="md">
           <Group justify="space-between">
             <Text size="sm" fw={500}>
-              {t('billing.currentSeats', 'Current Seats')}:
+              {t("billing.currentSeats", "Current Seats")}:
             </Text>
             <Text size="sm" fw={600}>
               {currentSeats}
@@ -128,53 +125,47 @@ const UpdateSeatsModal: React.FC<UpdateSeatsModalProps> = ({
           </Group>
           <Group justify="space-between">
             <Text size="sm" fw={500}>
-              {t('billing.minimumSeats', 'Minimum Seats')}:
+              {t("billing.minimumSeats", "Minimum Seats")}:
             </Text>
             <Text size="sm" c="dimmed">
-              {minimumSeats} {t('billing.basedOnUsers', '(current users)')}
+              {minimumSeats} {t("billing.basedOnUsers", "(current users)")}
             </Text>
           </Group>
         </Stack>
 
         <NumberInput
-          label={t('billing.newSeatCount', 'New Seat Count')}
-          description={t(
-            'billing.newSeatCountDescription',
-            'Select the number of seats for your enterprise license'
-          )}
+          label={t("billing.newSeatCount", "New Seat Count")}
+          description={t("billing.newSeatCountDescription", "Select the number of seats for your enterprise license")}
           value={newSeatCount}
-          onChange={(value) => setNewSeatCount(typeof value === 'number' ? value : minimumSeats)}
+          onChange={(value) => setNewSeatCount(typeof value === "number" ? value : minimumSeats)}
           min={minimumSeats}
           max={10000}
           step={1}
           size="md"
           styles={{
             input: {
-              fontSize: '1.5rem',
+              fontSize: "1.5rem",
               fontWeight: 500,
-              textAlign: 'center',
+              textAlign: "center",
             },
           }}
         />
 
-        <Alert color="blue" title={t('billing.whatHappensNext', 'What happens next?')}>
+        <Alert color="blue" title={t("billing.whatHappensNext", "What happens next?")}>
           <Text size="sm">
             {t(
-              'billing.stripePortalRedirect',
-              'You will be redirected to Stripe\'s billing portal to review and confirm the seat change. The prorated amount will be calculated automatically.'
+              "billing.stripePortalRedirect",
+              "You will be redirected to Stripe's billing portal to review and confirm the seat change. The prorated amount will be calculated automatically.",
             )}
           </Text>
         </Alert>
 
         <Group justify="flex-end" gap="sm">
           <Button variant="outline" onClick={handleClose}>
-            {t('common.cancel', 'Cancel')}
+            {t("common.cancel", "Cancel")}
           </Button>
-          <Button
-            onClick={handleUpdateSeats}
-            disabled={newSeatCount === currentSeats || newSeatCount < minimumSeats}
-          >
-            {t('billing.updateSeats', 'Update Seats')}
+          <Button onClick={handleUpdateSeats} disabled={newSeatCount === currentSeats || newSeatCount < minimumSeats}>
+            {t("billing.updateSeats", "Update Seats")}
           </Button>
         </Group>
       </Stack>
@@ -187,7 +178,7 @@ const UpdateSeatsModal: React.FC<UpdateSeatsModalProps> = ({
       onClose={handleClose}
       title={
         <Text fw={600} size="lg">
-          {t('billing.updateEnterpriseSeats', 'Update Enterprise Seats')}
+          {t("billing.updateEnterpriseSeats", "Update Enterprise Seats")}
         </Text>
       }
       size="md"