Add spanish translation and update documentation with missing steps

TRANSLATION.md

@@ -34,7 +34,7 @@ The app automatically detects the language from the URL path:
 
 **To improve existing translations:**
 
-1. Navigate to `public/locales/{language}/common.json`
+1. Navigate to `public/locales/{language}/common.json` and `public/locales/{language}/tools.json`
 2. Find the key you want to update
 3. Change the translation value
 4. Save and test
@@ -42,10 +42,13 @@ The app automatically detects the language from the URL path:
 **To add a new language (e.g., Spanish):**
 
 1. Copy `public/locales/en/common.json` to `public/locales/es/common.json`
-2. Translate all values in `es/common.json`
-3. Add Spanish to `supportedLanguages` in `src/js/i18n/i18n.ts`
-4. Add Spanish name to `languageNames` in `src/js/i18n/i18n.ts`
-5. Test thoroughly
+2. Copy `public/locales/en/tools.json` to `public/locales/es/tools.json`
+3. Translate all values in both `es/common.json` and `es/tools.json`
+4. Add Spanish to `supportedLanguages` in `src/js/i18n/i18n.ts`
+5. Add Spanish name to `languageNames` in `src/js/i18n/i18n.ts`
+6. Add Spanish language code to the routing regex in `vite.config.ts`
+7. Restart the dev server
+8. Test thoroughly
 
 ---
 
@@ -53,17 +56,18 @@ The app automatically detects the language from the URL path:
 
 Let's add **French** as an example:
 
-### Step 1: Create Translation File
+### Step 1: Create Translation Files
 
 ```bash
 # Create the directory
 mkdir -p public/locales/fr
 
-# Copy the English template
+# Copy the English templates
 cp public/locales/en/common.json public/locales/fr/common.json
+cp public/locales/en/tools.json public/locales/fr/tools.json
 ```
 
-### Step 2: Translate the JSON File
+### Step 2: Translate the JSON Files
 
 Open `public/locales/fr/common.json` and translate all the values:
 
@@ -95,27 +99,66 @@ Open `public/locales/fr/common.json` and translate all the values:
 "accueil": "Accueil"
 ```
 
+Then do the same for `public/locales/fr/tools.json` to translate all tool names and descriptions.
+
 ### Step 3: Register the Language
 
 Edit `src/js/i18n/i18n.ts`:
 
 ```typescript
 // Add 'fr' to supported languages
-export const supportedLanguages = ['en', 'de', 'fr'] as const;
+export const supportedLanguages = ['en', 'de', 'es', 'fr', 'zh', 'vi'] as const;
 export type SupportedLanguage = (typeof supportedLanguages)[number];
 
 // Add French display name
 export const languageNames: Record<SupportedLanguage, string> = {
     en: 'English',
     de: 'Deutsch',
+    es: 'Español',
     fr: 'Français',  // ← Add this
+    zh: '中文',
+    vi: 'Tiếng Việt',
 };
 ```
 
-### Step 4: Test Your Translation
+Also update the `getLanguageFromUrl` function in the same file:
+
+```typescript
+export const getLanguageFromUrl = (): SupportedLanguage => {
+    const path = window.location.pathname;
+    const langMatch = path.match(/^\/(en|de|es|fr|zh|vi)(?:\/|$)/);  // ← Add 'fr' here
+    // ... rest of the function
+};
+```
+
+### Step 4: Update Vite Configuration
+
+Edit `vite.config.ts` to add French to the routing middleware:
+
+```typescript
+function pagesRewritePlugin(): Plugin {
+  return {
+    name: 'pages-rewrite',
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        const url = req.url?.split('?')[0] || '';
+
+        // Add 'fr' to this regex pattern
+        const langMatch = url.match(/^\/(en|de|es|fr|zh|vi)(\/.*)?$/);
+        // ... rest of the middleware
+      });
+    },
+  };
+}
+```
+
+⚠️ **Important**: This step is critical! Without updating the Vite config, you'll get 404 errors when trying to access French pages.
+
+### Step 5: Restart and Test Your Translation
 
 ```bash
-# Start the dev server
+# Stop the dev server (Ctrl+C)
+# Start it again
 npm run dev
 
 # Visit the French version
@@ -415,14 +458,34 @@ SyntaxError: Unexpected token } in JSON at position 1234
 **Solution:**
 Make sure you added the language to both arrays in `i18n.ts`:
 ```typescript
-export const supportedLanguages = ['en', 'de', 'fr']; // ← Add here
+export const supportedLanguages = ['en', 'de', 'es', 'fr', 'zh', 'vi']; // ← Add here
 export const languageNames = {
     en: 'English',
     de: 'Deutsch',
+    es: 'Español',
     fr: 'Français', // ← And here
+    zh: '中文',
+    vi: 'Tiếng Việt',
 };
 ```
 
+### Issue: 404 Error When Accessing Language Pages
+
+**Symptoms:**
+Visiting `http://localhost:5173/fr/about.html` shows a 404 error page.
+
+**Solution:**
+You need to update `vite.config.ts` to include your language code in the routing regex:
+```typescript
+// In the pagesRewritePlugin function
+const langMatch = url.match(/^\/(en|de|es|fr|zh|vi)(\/.*)?$/); // ← Add your language code
+```
+
+After updating, restart the dev server:
+```bash
+npm run dev
+```
+
 ---
 
 ## File Checklist
@@ -430,11 +493,14 @@ export const languageNames = {
 When adding a new language, make sure these files are updated:
 
 - [ ] `public/locales/{lang}/common.json` - Main translation file
-- [ ] `src/js/i18n/i18n.ts` - Add to `supportedLanguages` and `languageNames`
+- [ ] `public/locales/{lang}/tools.json` - Tools translation file
+- [ ] `src/js/i18n/i18n.ts` - Add to `supportedLanguages`, `languageNames`, and `getLanguageFromUrl` regex
+- [ ] `vite.config.ts` - Add language code to routing regex in `pagesRewritePlugin`
 - [ ] Test all pages: homepage, about, contact, FAQ, tool pages
 - [ ] Test settings modal and shortcuts
 - [ ] Test language switcher in footer
 - [ ] Verify URL routing works (`/{lang}/`)
+- [ ] Test that all tools load correctly
 
 ---
 
@@ -474,9 +540,11 @@ Current translation coverage:
 |----------|------|--------|------------|
 | English  | `en` | ✅ Complete | Core team |
 | German   | `de` | 🚧 In Progress | Core team |
+| Spanish   | `es` | ✅ Complete | Community |
+| Chinese   | `zh` | ✅ Complete | Community |
 | Vietnamese | `vi` | ✅ Complete | Community |
 | Your Language | `??` | 🚧 In Progress | You? |
 
 ---
 
-**Last Updated**: December 2025
+**Last Updated**: January 2026