feat: add models settings page with filtering and management

.github/workflows/lint.yml

@@ -14,5 +14,8 @@ jobs:
       - name: Install dependencies
         run: bun install --frozen-lockfile
 
+      - name: Check translation consistency
+        run: bun run check:translations
+
       - name: Run ESLint
         run: bun run lint

package.json

@@ -15,13 +15,15 @@
     "format:frontend": "prettier --write .",
     "format:backend": "cd src-tauri && cargo fmt",
     "test:playwright": "playwright test",
-    "test:playwright:ui": "playwright test --ui"
+    "test:playwright:ui": "playwright test --ui",
+    "check:translations": "bun scripts/check-translations.ts"
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.16",
     "@tauri-apps/api": "^2.9.0",
     "@tauri-apps/plugin-autostart": "~2.5.1",
     "@tauri-apps/plugin-clipboard-manager": "~2.3.2",
+    "@tauri-apps/plugin-dialog": "~2",
     "@tauri-apps/plugin-fs": "~2.4.4",
     "@tauri-apps/plugin-global-shortcut": "~2.3.1",
     "@tauri-apps/plugin-opener": "^2.5.2",
@@ -30,16 +32,16 @@
     "@tauri-apps/plugin-sql": "~2.3.1",
     "@tauri-apps/plugin-store": "~2.4.1",
     "@tauri-apps/plugin-updater": "~2.9.0",
-    "react-select": "^5.8.0",
-    "tauri-plugin-macos-permissions-api": "2.3.0",
     "i18next": "^25.7.2",
     "immer": "^11.1.3",
     "lucide-react": "^0.542.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^16.4.1",
+    "react-select": "^5.8.0",
     "sonner": "^2.0.7",
     "tailwindcss": "^4.1.16",
+    "tauri-plugin-macos-permissions-api": "2.3.0",
     "zod": "^3.25.76",
     "zustand": "^5.0.8"
   },

scripts/check-translations.ts

@@ -0,0 +1,224 @@
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// Configuration
+const LOCALES_DIR = path.join(__dirname, "..", "src", "i18n", "locales");
+const REFERENCE_LANG = "en";
+
+type TranslationData = Record<string, unknown>;
+
+interface ValidationResult {
+  valid: boolean;
+  missing: string[][];
+  extra: string[][];
+}
+
+function getLanguages(): string[] {
+  const entries = fs.readdirSync(LOCALES_DIR, { withFileTypes: true });
+  return entries
+    .filter((entry) => entry.isDirectory() && entry.name !== REFERENCE_LANG)
+    .map((entry) => entry.name)
+    .sort();
+}
+
+const LANGUAGES = getLanguages();
+
+// Colors for terminal output
+const colors: Record<string, string> = {
+  reset: "\x1b[0m",
+  red: "\x1b[31m",
+  green: "\x1b[32m",
+  yellow: "\x1b[33m",
+  blue: "\x1b[34m",
+};
+
+function colorize(text: string, color: string): string {
+  return `${colors[color]}${text}${colors.reset}`;
+}
+
+function getAllKeyPaths(
+  obj: TranslationData,
+  prefix: string[] = [],
+): string[][] {
+  let paths: string[][] = [];
+  for (const key in obj) {
+    if (!Object.hasOwn(obj, key)) continue;
+
+    const currentPath = prefix.concat([key]);
+    const value = obj[key];
+
+    if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+      paths = paths.concat(
+        getAllKeyPaths(value as TranslationData, currentPath),
+      );
+    } else {
+      paths.push(currentPath);
+    }
+  }
+  return paths;
+}
+
+function hasKeyPath(obj: TranslationData, keyPath: string[]): boolean {
+  let current: unknown = obj;
+  for (const key of keyPath) {
+    if (
+      typeof current !== "object" ||
+      current === null ||
+      (current as Record<string, unknown>)[key] === undefined
+    ) {
+      return false;
+    }
+    current = (current as Record<string, unknown>)[key];
+  }
+  return true;
+}
+
+function loadTranslationFile(lang: string): TranslationData | null {
+  const filePath = path.join(LOCALES_DIR, lang, "translation.json");
+
+  try {
+    const content = fs.readFileSync(filePath, "utf8");
+    return JSON.parse(content) as TranslationData;
+  } catch (error) {
+    console.error(colorize(`✗ Error loading ${lang}/translation.json:`, "red"));
+    console.error(`  ${(error as Error).message}`);
+    return null;
+  }
+}
+
+function validateTranslations(): void {
+  console.log(colorize("\n🌍 Translation Consistency Check\n", "blue"));
+
+  // Load reference file
+  console.log(`Loading reference language: ${REFERENCE_LANG}`);
+  const referenceData = loadTranslationFile(REFERENCE_LANG);
+
+  if (!referenceData) {
+    console.error(
+      colorize(`\n✗ Failed to load reference file (${REFERENCE_LANG})`, "red"),
+    );
+    process.exit(1);
+  }
+
+  // Get all key paths from reference
+  const referenceKeyPaths = getAllKeyPaths(referenceData);
+  console.log(`Reference has ${referenceKeyPaths.length} keys\n`);
+
+  // Track validation results
+  let hasErrors = false;
+  const results: Record<string, ValidationResult> = {};
+
+  // Validate each language
+  for (const lang of LANGUAGES) {
+    const langData = loadTranslationFile(lang);
+
+    if (!langData) {
+      hasErrors = true;
+      results[lang] = { valid: false, missing: [], extra: [] };
+      continue;
+    }
+
+    // Find missing keys
+    const missing = referenceKeyPaths.filter(
+      (keyPath) => !hasKeyPath(langData, keyPath),
+    );
+
+    // Find extra keys (keys in language but not in reference)
+    const langKeyPaths = getAllKeyPaths(langData);
+    const extra = langKeyPaths.filter(
+      (keyPath) => !hasKeyPath(referenceData, keyPath),
+    );
+
+    results[lang] = {
+      valid: missing.length === 0 && extra.length === 0,
+      missing,
+      extra,
+    };
+
+    if (missing.length > 0 || extra.length > 0) {
+      hasErrors = true;
+    }
+  }
+
+  // Print results
+  console.log(colorize("Results:", "blue"));
+  console.log("─".repeat(60));
+
+  for (const lang of LANGUAGES) {
+    const result = results[lang];
+
+    if (result.valid) {
+      console.log(
+        colorize(`✓ ${lang.toUpperCase()}: All keys present`, "green"),
+      );
+    } else {
+      console.log(colorize(`✗ ${lang.toUpperCase()}: Issues found`, "red"));
+
+      if (result.missing.length > 0) {
+        console.log(
+          colorize(`  Missing ${result.missing.length} keys:`, "yellow"),
+        );
+        result.missing.slice(0, 10).forEach((keyPath) => {
+          console.log(`    - ${keyPath.join(".")}`);
+        });
+        if (result.missing.length > 10) {
+          console.log(
+            colorize(
+              `    ... and ${result.missing.length - 10} more`,
+              "yellow",
+            ),
+          );
+        }
+      }
+
+      if (result.extra.length > 0) {
+        console.log(
+          colorize(
+            `  Extra ${result.extra.length} keys (not in reference):`,
+            "yellow",
+          ),
+        );
+        result.extra.slice(0, 10).forEach((keyPath) => {
+          console.log(`    - ${keyPath.join(".")}`);
+        });
+        if (result.extra.length > 10) {
+          console.log(
+            colorize(`    ... and ${result.extra.length - 10} more`, "yellow"),
+          );
+        }
+      }
+
+      console.log("");
+    }
+  }
+
+  console.log("─".repeat(60));
+
+  // Summary
+  const validCount = Object.values(results).filter((r) => r.valid).length;
+  const totalCount = LANGUAGES.length;
+
+  if (hasErrors) {
+    console.log(
+      colorize(
+        `\n✗ Validation failed: ${validCount}/${totalCount} languages passed`,
+        "red",
+      ),
+    );
+    process.exit(1);
+  } else {
+    console.log(
+      colorize(
+        `\n✓ All ${totalCount} languages have complete translations!`,
+        "green",
+      ),
+    );
+    process.exit(0);
+  }
+}
+
+// Run validation
+validateTranslations();