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/core/pages/HomePage.css

@@ -59,7 +59,9 @@
   font-weight: 600;
   color: var(--text-muted);
   background: transparent;
-  transition: background 0.2s ease, color 0.2s ease;
+  transition:
+    background 0.2s ease,
+    color 0.2s ease;
 }
 
 .mobile-toggle-button:focus-visible {

frontend/src/core/pages/HomePage.tsx

@@ -8,11 +8,11 @@ import { useBaseUrl } from "@app/hooks/useBaseUrl";
 import { useIsMobile } from "@app/hooks/useIsMobile";
 import { useAppConfig } from "@app/contexts/AppConfigContext";
 import { useLogoPath } from "@app/hooks/useLogoPath";
-import { useLogoAssets } from '@app/hooks/useLogoAssets';
+import { useLogoAssets } from "@app/hooks/useLogoAssets";
 import { useFileContext } from "@app/contexts/file/fileHooks";
 import { useNavigationState, useNavigationActions } from "@app/contexts/NavigationContext";
 import { useViewer } from "@app/contexts/ViewerContext";
-import AppsIcon from '@mui/icons-material/AppsRounded';
+import AppsIcon from "@mui/icons-material/AppsRounded";
 
 import ToolPanel from "@app/components/tools/ToolPanel";
 import Workbench from "@app/components/layout/Workbench";
@@ -31,9 +31,7 @@ type MobileView = "tools" | "workbench";
 
 export default function HomePage() {
   const { t } = useTranslation();
-  const {
-    sidebarRefs,
-  } = useSidebarContext();
+  const { sidebarRefs } = useSidebarContext();
 
   const { quickAccessRef } = sidebarRefs;
 
@@ -70,44 +68,31 @@ export default function HomePage() {
     const prevCount = prevFileCountRef.current;
     const currentCount = activeFiles.length;
 
-    console.log('[HomePage] Navigation effect triggered:', {
+    console.log("[HomePage] Navigation effect triggered:", {
       prevCount,
       currentCount,
       currentWorkbench: navigationState.workbench,
       selectedToolKey,
     });
 
-    const action = getStartupNavigationAction(
-      prevCount,
-      currentCount,
-      selectedToolKey,
-      navigationState.workbench
-    );
+    const action = getStartupNavigationAction(prevCount, currentCount, selectedToolKey, navigationState.workbench);
 
-    console.log('[HomePage] Navigation action returned:', action);
+    console.log("[HomePage] Navigation action returned:", action);
 
     if (action) {
-      console.log('[HomePage] Applying navigation:', action);
+      console.log("[HomePage] Applying navigation:", action);
       actions.setWorkbench(action.workbench);
-      if (typeof action.activeFileIndex === 'number') {
+      if (typeof action.activeFileIndex === "number") {
         setActiveFileIndex(action.activeFileIndex);
       }
     } else {
-      console.log('[HomePage] No navigation - staying in current workbench');
+      console.log("[HomePage] No navigation - staying in current workbench");
     }
 
     prevFileCountRef.current = currentCount;
-  }, [
-    activeFiles.length,
-    actions,
-    setActiveFileIndex,
-    selectedToolKey,
-    navigationState.workbench,
-  ]);
+  }, [activeFiles.length, actions, setActiveFileIndex, selectedToolKey, navigationState.workbench]);
 
-  const hideToolPanel = customWorkbenchViews.find(
-    (v) => v.workbenchId === navigationState.workbench
-  )?.hideToolPanel ?? false;
+  const hideToolPanel = customWorkbenchViews.find((v) => v.workbenchId === navigationState.workbench)?.hideToolPanel ?? false;
 
   const brandAltText = t("home.mobile.brandAlt", "Stirling PDF logo");
   const brandIconSrc = useLogoPath();
@@ -178,8 +163,8 @@ export default function HomePage() {
 
   // Automatically switch to workbench when read mode or multiTool is activated in mobile
   useEffect(() => {
-    if (isMobile && (readerMode || selectedToolKey === 'multiTool')) {
-      setActiveMobileView('workbench');
+    if (isMobile && (readerMode || selectedToolKey === "multiTool")) {
+      setActiveMobileView("workbench");
     }
   }, [isMobile, readerMode, selectedToolKey]);
 
@@ -187,16 +172,16 @@ export default function HomePage() {
   // hideToolPanel is true for all custom workbenches that take over the full screen.
   useEffect(() => {
     if (isMobile && hideToolPanel) {
-      setActiveMobileView('workbench');
+      setActiveMobileView("workbench");
     }
   }, [isMobile, hideToolPanel]);
 
   // When navigating back to tools view in mobile with a workbench-only tool, show tool picker
   useEffect(() => {
-    if (isMobile && activeMobileView === 'tools' && selectedTool) {
+    if (isMobile && activeMobileView === "tools" && selectedTool) {
       // Check if this is a workbench-only tool (has workbench but no component)
       if (selectedTool.workbench && !selectedTool.component) {
-        setLeftPanelView('toolPicker');
+        setLeftPanelView("toolPicker");
       }
     }
   }, [isMobile, activeMobileView, selectedTool, setLeftPanelView]);
@@ -204,14 +189,14 @@ export default function HomePage() {
   const baseUrl = useBaseUrl();
 
   // Update document meta when tool changes
-  const appName = config?.appNameNavbar || 'Stirling PDF';
+  const appName = config?.appNameNavbar || "Stirling PDF";
   useDocumentMeta({
     title: selectedTool ? `${selectedTool.name} - ${appName}` : appName,
-    description: selectedTool?.description || t('app.description', 'The Free Adobe Acrobat alternative (10M+ Downloads)'),
+    description: selectedTool?.description || t("app.description", "The Free Adobe Acrobat alternative (10M+ Downloads)"),
     ogTitle: selectedTool ? `${selectedTool.name} - ${appName}` : appName,
-    ogDescription: selectedTool?.description || t('app.description', 'The Free Adobe Acrobat alternative (10M+ Downloads)'),
+    ogDescription: selectedTool?.description || t("app.description", "The Free Adobe Acrobat alternative (10M+ Downloads)"),
     ogImage: selectedToolKey ? `${baseUrl}/og_images/${selectedToolKey}.png` : `${baseUrl}/og_images/home.png`,
-    ogUrl: selectedTool ? `${baseUrl}${window.location.pathname}` : baseUrl
+    ogUrl: selectedTool ? `${baseUrl}${window.location.pathname}` : baseUrl,
   });
 
   // Note: File selection limits are now handled directly by individual tools
@@ -228,7 +213,11 @@ export default function HomePage() {
                 <img src={brandTextSrc} alt={brandAltText} className="mobile-brand-text" />
               </div>
             </div>
-            <div className="mobile-toggle-buttons" role="tablist" aria-label={t('home.mobile.viewSwitcher', 'Switch workspace view')}>
+            <div
+              className="mobile-toggle-buttons"
+              role="tablist"
+              aria-label={t("home.mobile.viewSwitcher", "Switch workspace view")}
+            >
               <button
                 type="button"
                 role="tab"
@@ -236,7 +225,7 @@ export default function HomePage() {
                 className={`mobile-toggle-button ${activeMobileView === "tools" ? "active" : ""}`}
                 onClick={() => handleSelectMobileView("tools")}
               >
-                {t('home.mobile.tools', 'Tools')}
+                {t("home.mobile.tools", "Tools")}
               </button>
               <button
                 type="button"
@@ -245,20 +234,18 @@ export default function HomePage() {
                 className={`mobile-toggle-button ${activeMobileView === "workbench" ? "active" : ""}`}
                 onClick={() => handleSelectMobileView("workbench")}
               >
-                {t('home.mobile.workspace', 'Workspace')}
+                {t("home.mobile.workspace", "Workspace")}
               </button>
             </div>
-            <span className="mobile-toggle-hint">
-              {t('home.mobile.swipeHint', 'Swipe left or right to switch views')}
-            </span>
+            <span className="mobile-toggle-hint">{t("home.mobile.swipeHint", "Swipe left or right to switch views")}</span>
           </div>
           <div ref={sliderRef} className="mobile-slider">
-            <div className="mobile-slide" aria-label={t('home.mobile.toolsSlide', 'Tool selection panel')}>
+            <div className="mobile-slide" aria-label={t("home.mobile.toolsSlide", "Tool selection panel")}>
               <div className="mobile-slide-content">
                 <ToolPanel />
               </div>
             </div>
-            <div className="mobile-slide" aria-label={t('home.mobile.workbenchSlide', 'Workspace panel')}>
+            <div className="mobile-slide" aria-label={t("home.mobile.workbenchSlide", "Workspace panel")}>
               <div className="mobile-slide-content">
                 <div className="flex-1 min-h-0 flex">
                   <Workbench />
@@ -270,62 +257,54 @@ export default function HomePage() {
           <div className="mobile-bottom-bar">
             <button
               className="mobile-bottom-button"
-              aria-label={t('quickAccess.allTools', 'Tools')}
+              aria-label={t("quickAccess.allTools", "Tools")}
               onClick={() => {
                 handleBackToTools();
                 if (isMobile) {
-                  setActiveMobileView('tools');
+                  setActiveMobileView("tools");
                 }
               }}
             >
-              <AppsIcon sx={{ fontSize: '1.5rem' }} />
-              <span className="mobile-bottom-button-label">{t('quickAccess.allTools', 'Tools')}</span>
+              <AppsIcon sx={{ fontSize: "1.5rem" }} />
+              <span className="mobile-bottom-button-label">{t("quickAccess.allTools", "Tools")}</span>
             </button>
-            {toolAvailability['automate']?.available !== false && (
+            {toolAvailability["automate"]?.available !== false && (
               <button
                 className="mobile-bottom-button"
-                aria-label={t('quickAccess.automate', 'Automate')}
+                aria-label={t("quickAccess.automate", "Automate")}
                 onClick={() => {
-                  handleToolSelect('automate');
+                  handleToolSelect("automate");
                   if (isMobile) {
-                    setActiveMobileView('tools');
+                    setActiveMobileView("tools");
                   }
                 }}
               >
                 <LocalIcon icon="automation-outline" width="1.5rem" height="1.5rem" />
-                <span className="mobile-bottom-button-label">{t('quickAccess.automate', 'Automate')}</span>
+                <span className="mobile-bottom-button-label">{t("quickAccess.automate", "Automate")}</span>
               </button>
             )}
             <button
               className="mobile-bottom-button"
-              aria-label={t('home.mobile.openFiles', 'Open files')}
+              aria-label={t("home.mobile.openFiles", "Open files")}
               onClick={() => openFilesModal()}
             >
               <LocalIcon icon="folder-rounded" width="1.5rem" height="1.5rem" />
-              <span className="mobile-bottom-button-label">{t('quickAccess.files', 'Files')}</span>
+              <span className="mobile-bottom-button-label">{t("quickAccess.files", "Files")}</span>
             </button>
             <button
               className="mobile-bottom-button"
-              aria-label={t('quickAccess.config', 'Config')}
+              aria-label={t("quickAccess.config", "Config")}
               onClick={() => setConfigModalOpen(true)}
             >
               <LocalIcon icon="settings-rounded" width="1.5rem" height="1.5rem" />
-              <span className="mobile-bottom-button-label">{t('quickAccess.config', 'Config')}</span>
+              <span className="mobile-bottom-button-label">{t("quickAccess.config", "Config")}</span>
             </button>
           </div>
           <FileManager selectedTool={selectedTool as any /* FIX ME */} />
-          <AppConfigModal
-            opened={configModalOpen}
-            onClose={() => setConfigModalOpen(false)}
-          />
+          <AppConfigModal opened={configModalOpen} onClose={() => setConfigModalOpen(false)} />
         </div>
       ) : (
-        <Group
-          align="flex-start"
-          gap={0}
-          h="100%"
-          className="flex-nowrap flex"
-        >
+        <Group align="flex-start" gap={0} h="100%" className="flex-nowrap flex">
           <QuickAccessBar ref={quickAccessRef} />
           {!hideToolPanel && <ToolPanel />}
           <Workbench />