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/scripts/generate-icons.js

@@ -1,11 +1,11 @@
 #!/usr/bin/env node
 
-const { icons } = require('@iconify-json/material-symbols');
-const fs = require('fs');
-const path = require('path');
+const { icons } = require("@iconify-json/material-symbols");
+const fs = require("fs");
+const path = require("path");
 
 // Check for verbose flag
-const isVerbose = process.argv.includes('--verbose') || process.argv.includes('-v');
+const isVerbose = process.argv.includes("--verbose") || process.argv.includes("-v");
 
 // Logging functions
 const info = (message) => console.log(message);
@@ -18,12 +18,12 @@ const debug = (message) => {
 // Function to scan codebase for LocalIcon usage
 function scanForUsedIcons() {
   const usedIcons = new Set();
-  const srcDir = path.join(__dirname, '..', 'src');
+  const srcDir = path.join(__dirname, "..", "src");
 
-  info('🔍 Scanning codebase for LocalIcon usage...');
+  info("🔍 Scanning codebase for LocalIcon usage...");
 
   if (!fs.existsSync(srcDir)) {
-    console.error('❌ Source directory not found:', srcDir);
+    console.error("❌ Source directory not found:", srcDir);
     process.exit(1);
   }
 
@@ -31,19 +31,19 @@ function scanForUsedIcons() {
   function scanDirectory(dir) {
     const files = fs.readdirSync(dir);
 
-    files.forEach(file => {
+    files.forEach((file) => {
       const filePath = path.join(dir, file);
       const stat = fs.statSync(filePath);
 
       if (stat.isDirectory()) {
         scanDirectory(filePath);
-      } else if (file.endsWith('.tsx') || file.endsWith('.ts')) {
-        const content = fs.readFileSync(filePath, 'utf8');
+      } else if (file.endsWith(".tsx") || file.endsWith(".ts")) {
+        const content = fs.readFileSync(filePath, "utf8");
 
         // Match LocalIcon usage: <LocalIcon icon="icon-name" ...>
         const localIconMatches = content.match(/<LocalIcon\s+[^>]*icon="([^"]+)"/g);
         if (localIconMatches) {
-          localIconMatches.forEach(match => {
+          localIconMatches.forEach((match) => {
             const iconMatch = match.match(/icon="([^"]+)"/);
             if (iconMatch) {
               usedIcons.add(iconMatch[1]);
@@ -55,7 +55,7 @@ function scanForUsedIcons() {
         // Match LocalIcon usage: <LocalIcon icon='icon-name' ...>
         const localIconSingleQuoteMatches = content.match(/<LocalIcon\s+[^>]*icon='([^']+)'/g);
         if (localIconSingleQuoteMatches) {
-          localIconSingleQuoteMatches.forEach(match => {
+          localIconSingleQuoteMatches.forEach((match) => {
             const iconMatch = match.match(/icon='([^']+)'/);
             if (iconMatch) {
               usedIcons.add(iconMatch[1]);
@@ -67,7 +67,7 @@ function scanForUsedIcons() {
         // Match old material-symbols-rounded spans: <span className="material-symbols-rounded">icon-name</span>
         const spanMatches = content.match(/<span[^>]*className="[^"]*material-symbols-rounded[^"]*"[^>]*>([^<]+)<\/span>/g);
         if (spanMatches) {
-          spanMatches.forEach(match => {
+          spanMatches.forEach((match) => {
             const iconMatch = match.match(/>([^<]+)<\/span>/);
             if (iconMatch && iconMatch[1].trim()) {
               const iconName = iconMatch[1].trim();
@@ -80,7 +80,7 @@ function scanForUsedIcons() {
         // Match Icon component usage: <Icon icon="material-symbols:icon-name" ...>
         const iconMatches = content.match(/<Icon\s+[^>]*icon="material-symbols:([^"]+)"/g);
         if (iconMatches) {
-          iconMatches.forEach(match => {
+          iconMatches.forEach((match) => {
             const iconMatch = match.match(/icon="material-symbols:([^"]+)"/);
             if (iconMatch) {
               usedIcons.add(iconMatch[1]);
@@ -92,7 +92,7 @@ function scanForUsedIcons() {
         // Match icon config usage: icon: 'icon-name' or icon: "icon-name"
         const iconPropertyMatches = content.match(/icon:\s*(['"])([a-z0-9-]+)\1/g);
         if (iconPropertyMatches) {
-          iconPropertyMatches.forEach(match => {
+          iconPropertyMatches.forEach((match) => {
             const iconMatch = match.match(/icon:\s*(['"])([a-z0-9-]+)\1/);
             if (iconMatch) {
               usedIcons.add(iconMatch[2]);
@@ -118,18 +118,20 @@ async function main() {
   const usedIcons = scanForUsedIcons();
 
   // Check if we need to regenerate (compare with existing)
-  const outputPath = path.join(__dirname, '..', 'src', 'assets', 'material-symbols-icons.json');
+  const outputPath = path.join(__dirname, "..", "src", "assets", "material-symbols-icons.json");
   let needsRegeneration = true;
 
   if (fs.existsSync(outputPath)) {
     try {
-      const existingSet = JSON.parse(fs.readFileSync(outputPath, 'utf8'));
+      const existingSet = JSON.parse(fs.readFileSync(outputPath, "utf8"));
       const existingIcons = Object.keys(existingSet.icons || {}).sort();
       const currentIcons = [...usedIcons].sort();
 
       if (JSON.stringify(existingIcons) === JSON.stringify(currentIcons)) {
         needsRegeneration = false;
-        info(`✅ Icon set already up-to-date (${usedIcons.length} icons, ${Math.round(fs.statSync(outputPath).size / 1024)}KB)`);
+        info(
+          `✅ Icon set already up-to-date (${usedIcons.length} icons, ${Math.round(fs.statSync(outputPath).size / 1024)}KB)`,
+        );
       }
     } catch {
       // If we can't parse existing file, regenerate
@@ -138,34 +140,34 @@ async function main() {
   }
 
   if (!needsRegeneration) {
-    info('🎉 No regeneration needed!');
+    info("🎉 No regeneration needed!");
     process.exit(0);
   }
 
   info(`🔍 Extracting ${usedIcons.length} icons from Material Symbols...`);
 
   // Dynamic import of ES module
-  const { getIcons } = await import('@iconify/utils');
+  const { getIcons } = await import("@iconify/utils");
 
   // Extract only our used icons from the full set
   const extractedIcons = getIcons(icons, usedIcons);
 
   if (!extractedIcons) {
-    console.error('❌ Failed to extract icons');
+    console.error("❌ Failed to extract icons");
     process.exit(1);
   }
 
   // Check for missing icons
   const extractedIconNames = Object.keys(extractedIcons.icons || {});
-  const missingIcons = usedIcons.filter(icon => !extractedIconNames.includes(icon));
+  const missingIcons = usedIcons.filter((icon) => !extractedIconNames.includes(icon));
 
   if (missingIcons.length > 0) {
-    info(`⚠️  Missing icons (${missingIcons.length}): ${missingIcons.join(', ')}`);
-    info('💡 These icons don\'t exist in Material Symbols. Please use available alternatives.');
+    info(`⚠️  Missing icons (${missingIcons.length}): ${missingIcons.join(", ")}`);
+    info("💡 These icons don't exist in Material Symbols. Please use available alternatives.");
   }
 
   // Create output directory
-  const outputDir = path.join(__dirname, '..', 'src', 'assets');
+  const outputDir = path.join(__dirname, "..", "src", "assets");
   if (!fs.existsSync(outputDir)) {
     fs.mkdirSync(outputDir, { recursive: true });
   }
@@ -182,7 +184,7 @@ async function main() {
 // This file is automatically generated by scripts/generate-icons.js
 // Do not edit manually - changes will be overwritten
 
-export type MaterialSymbolIcon = ${usedIcons.map(icon => `'${icon}'`).join(' | ')};
+export type MaterialSymbolIcon = ${usedIcons.map((icon) => `'${icon}'`).join(" | ")};
 
 export interface IconSet {
   prefix: string;
@@ -196,7 +198,7 @@ declare const iconSet: IconSet;
 export default iconSet;
 `;
 
-  const typesPath = path.join(outputDir, 'material-symbols-icons.d.ts');
+  const typesPath = path.join(outputDir, "material-symbols-icons.d.ts");
   fs.writeFileSync(typesPath, typesContent);
 
   info(`📝 Generated types: ${typesPath}`);
@@ -204,7 +206,7 @@ export default iconSet;
 }
 
 // Run the main function
-main().catch(error => {
-  console.error('❌ Script failed:', error);
+main().catch((error) => {
+  console.error("❌ Script failed:", error);
   process.exit(1);
 });