Add inlang/paraglide-js localization

Remove the temporary directory after extracting buildkit
Localize the extension popovers.
Update package and fix tsconfig.json
Expand development directory guide
Move messages under localization
Popovers and sidebar
Update Chinese translations
Accidentally lost the changes that @ym provided, brought them back
File formatting pass
Localized all components, hooks, providers, hooks
Localize all pages except Settings
Bump packages
Settings Access page
Settings local auth page
Fix ref lint warning
Settings Advanced page
Fix UI lint warnings there were a bunch of ref and useEffect violations.
Settings appearance page
Settings general pages
Settings hardware page
Settings keyboard page
Settings macros pages
Settings mouse page
Settings page
Settings video page
Settings network page
Fix compilation issues
Ran machine translate
Use getLocale for date, relative time, and money formatting
Fix eslint
Delete unused messages
Added setting to choose locale
Merged in dev hotfix
Fix update status rendering

Author: IDisposable

.devcontainer/docker/devcontainer.json

@@ -8,7 +8,8 @@
 		}
 	},
 	"mounts": [
-		"source=${localEnv:HOME}/.ssh,target=/home/vscode/.ssh,type=bind,consistency=cached"
+		"source=${localEnv:HOME}/.ssh,target=/home/vscode/.ssh,type=bind,consistency=cached",
+		"source=/var/run/docker.sock,target=/var/run/docker.sock,type=bind"
 	],
 	"onCreateCommand": ".devcontainer/install-deps.sh",
 	"customizations": {
@@ -31,8 +32,11 @@
 				// Frontend
 				"esbenp.prettier-vscode",
 				"dbaeumer.vscode-eslint",
-				"bradlc.vscode-tailwindcss"
+				"bradlc.vscode-tailwindcss",
+				"codeandstuff.package-json-upgrade",
+				// Localization
+				"inlang.vs-code-extension"
 			]
 		}
 	}
-}
+}

.vscode/extensions.json

@@ -0,0 +1,25 @@
+{
+    "recommendations": [
+        // coding styles
+        "chrislajoie.vscode-modelines",
+        "editorconfig.editorconfig",
+        // GitHub
+        "GitHub.vscode-pull-request-github",
+        "github.vscode-github-actions",
+        // Golang
+        "golang.go",
+        // C / C++
+        "ms-vscode.cpptools",
+        "ms-vscode.cpptools-extension-pack",
+        // CMake / Makefile
+        "ms-vscode.makefile-tools",
+        "ms-vscode.cmake-tools",
+        // Frontend
+        "esbenp.prettier-vscode",
+        "dbaeumer.vscode-eslint",
+        "bradlc.vscode-tailwindcss",
+        "codeandstuff.package-json-upgrade",
+        // Localization
+        "inlang.vs-code-extension"
+    ]
+}

DEVELOPMENT.md

@@ -97,38 +97,42 @@ tail -f /var/log/jetkvm.log
 
 ```
 /kvm/
-├── main.go                  # App entry point
-├── config.go                # Settings & configuration
-├── display.go               # Device UI control
-├── web.go                   # API endpoints
-├── cmd/                     # Command line main
-├── internal/                # Internal Go packages
-│   ├── confparser/          # Configuration file implementation
-│   ├── hidrpc/              # HIDRPC implementation for HID devices (keyboard, mouse, etc.)
-│   ├── logging/             # Logging implementation
-│   ├── mdns/                # mDNS implementation
-│   ├── native/              # CGO / Native code glue layer (on-device hardware)
-│   │   ├── cgo/             # C files for the native library (HDMI, Touchscreen, etc.)
-│   │   └── eez/             # EEZ Studio Project files (for Touchscreen)
-│   ├── network/             # Network implementation
-│   ├── timesync/            # Time sync/NTP implementation
-│   ├── tzdata/              # Timezone data and generation
-│   ├── udhcpc/              # DHCP implementation
-│   ├── usbgadget/           # USB gadget
-│   ├── utils/               # SSH handling
-│   └── websecure/           # TLS certificate management
-├── resource/                # netboot iso and other resources
-├── scripts/                 # Bash shell scripts for building and deploying
-└── static/                  #  (react client build output)
-└── ui/                      # React frontend
-    ├── public/              # UI website static images and fonts
-    └── src/                 # Client React UI
-        ├── assets/          # UI in-page images
-        ├── components/      # UI components
-        ├── hooks/           # Hooks (stores, RPC handling, virtual devices)
-        ├── keyboardLayouts/ # Keyboard layout definitions
-        ├── providers/       # Feature flags
-        └── routes/          # Pages (login, settings, etc.)
+├── main.go                   # App entry point
+├── config.go                 # Settings & configuration
+├── display.go                # Device UI control
+├── web.go                    # API endpoints
+├── cmd/                      # Command line main
+├── internal/                 # Internal Go packages
+│   ├── confparser/           # Configuration file implementation
+│   ├── hidrpc/               # HIDRPC implementation for HID devices (keyboard, mouse, etc.)
+│   ├── logging/              # Logging implementation
+│   ├── mdns/                 # mDNS implementation
+│   ├── native/               # CGO / Native code glue layer (on-device hardware)
+│   │   ├── cgo/              # C files for the native library (HDMI, Touchscreen, etc.)
+│   │   └── eez/              # EEZ Studio Project files (for Touchscreen)
+│   ├── network/              # Network implementation
+│   ├── timesync/             # Time sync/NTP implementation
+│   ├── tzdata/               # Timezone data and generation
+│   ├── udhcpc/               # DHCP implementation
+│   ├── usbgadget/            # USB gadget
+│   ├── utils/                # SSH handling
+│   └── websecure/            # TLS certificate management
+├── resource/                 # netboot iso and other resources
+├── scripts/                  # Bash shell scripts for building and deploying
+└── static/                   #  (react client build output)
+└── ui/                       # React frontend
+    ├── localization/         # Client UI localization (i18n)
+    │   ├── jetKVM.UI.inlang/ # Settings for inlang
+    │   └── messages/         # Messages localized
+    ├── public/               # UI website static images and fonts
+    └── src/                  # Client React UI
+        ├── assets/           # UI in-page images
+        ├── components/       # UI components
+        ├── hooks/            # Hooks (stores, RPC handling, virtual devices)
+        ├── keyboardLayouts/  # Keyboard layout definitions
+    │   ├── paraglide/        #  (localization compiled messages output)
+        ├── providers/        # Feature flags
+        └── routes/           # Pages (login, settings, etc.)
 ```
 
 **Key files for beginners:**

scripts/find_duplicate_translations.py

@@ -0,0 +1,82 @@
+#!/usr/bin/env python3
+import argparse
+import json
+import os
+import re
+from datetime import datetime
+from pathlib import Path
+
+def flatten_strings(obj, prefix=""):
+    if isinstance(obj, dict):
+        for k, v in obj.items():
+            key = f"{prefix}.{k}" if prefix else k
+            yield from flatten_strings(v, key)
+    else:
+        # only consider scalar strings for translation targets
+        if isinstance(obj, str):
+            yield prefix, obj
+
+def normalize(s, ignore_case=False, trim=False, collapse_ws=False):
+    if collapse_ws:
+        s = re.sub(r"\s+", " ", s)
+    if trim:
+        s = s.strip()
+    if ignore_case:
+        s = s.lower()
+    return s
+
+def main():
+    p = argparse.ArgumentParser(description="Find identical translation targets with different keys in en.json")
+    p.add_argument("--en", default="../ui/localization/messages/en.json", help="path to en.json")
+    p.add_argument("--out", default="../reports/duplicate_translations.json", help="output report path (JSON)")
+    p.add_argument("--ignore-case", action="store_true", help="ignore case when comparing values")
+    p.add_argument("--trim", action="store_true", help="trim surrounding whitespace before comparing")
+    p.add_argument("--collapse-ws", action="store_true", help="collapse internal whitespace before comparing")
+    args = p.parse_args()
+
+    en_path = Path(args.en)
+    if not en_path.is_file():
+        print(f"en.json not found: {en_path}")
+        raise SystemExit(2)
+
+    with en_path.open(encoding="utf-8") as f:
+        payload = json.load(f)
+
+    entries = list(flatten_strings(payload))
+    total_keys = len(entries)
+
+    groups = {}
+    original_values = {}
+    for key, val in entries:
+        norm = normalize(val, ignore_case=args.ignore_case, trim=args.trim, collapse_ws=args.collapse_ws)
+        groups.setdefault(norm, []).append(key)
+        # keep the first seen original for reporting
+        original_values.setdefault(norm, val)
+
+    duplicates = []
+    for norm, keys in groups.items():
+        if len(keys) > 1:
+            duplicates.append({
+                "normalized_value": norm,
+                "original_value": original_values.get(norm),
+                "keys": sorted(keys),
+                "count": len(keys)
+            })
+
+    report = {
+        "generated_at": datetime.utcnow().isoformat() + "Z",
+        "en_json": str(en_path),
+        "total_string_keys": total_keys,
+        "duplicate_groups": sorted(duplicates, key=lambda d: (-d["count"], d["normalized_value"])),
+        "duplicate_count": len(duplicates)
+    }
+
+    out_path = Path(args.out)
+    out_path.parent.mkdir(parents=True, exist_ok=True)
+    with out_path.open("w", encoding="utf-8") as f:
+        json.dump(report, f, indent=2, ensure_ascii=False)
+
+    print(f"Wrote {out_path} — total keys: {total_keys}, duplicate groups: {len(duplicates)}")
+
+if __name__ == "__main__":
+    main()

scripts/find_unused_messages.py

@@ -0,0 +1,96 @@
+#!/usr/bin/env python3
+import argparse
+import json
+import os
+import re
+from datetime import datetime
+from pathlib import Path
+
+def flatten(d, prefix=""):
+    for k, v in d.items():
+        key = f"{prefix}.{k}" if prefix else k
+        if isinstance(v, dict):
+            yield from flatten(v, key)
+        else:
+            yield key
+
+def gather_files(src_dir, exts=(".ts", ".tsx", ".js", ".jsx", ".html", ".vue", ".json")):
+    for root, _, files in os.walk(src_dir):
+        parts = root.split(os.sep)
+        if "node_modules" in parts or ".git" in parts:
+            continue
+        for fn in files:
+            if fn.endswith(exts):
+                yield Path(root) / fn
+
+def find_usages(keys, files):
+    usages = {k: [] for k in keys}
+    # Precompile patterns for speed
+    patterns = {k: re.compile(r"\bm\." + re.escape(k) + r"\s*\(") for k in keys}
+    for file in files:
+        try:
+            text = file.read_text(encoding="utf-8")
+        except Exception:
+            continue
+        lines = text.splitlines()
+        for i, line in enumerate(lines, start=1):
+            for k, pat in patterns.items():
+                if pat.search(line):
+                    usages[k].append({
+                        "file": str(file),
+                        "line": i,
+                        "text": line.strip()
+                    })
+    return usages
+
+def main():
+    p = argparse.ArgumentParser(description="Generate JSON report of localization key usage (m.key_name_here()).")
+    p.add_argument("--en", default="../ui/localization/messages/en.json", help="path to en.json")
+    p.add_argument("--src", default="../ui", help="root source directory to scan")
+    p.add_argument("--out", default="../reports/localization_report.json", help="output report file")
+    args = p.parse_args()
+
+    en_path = Path(args.en)
+    if not en_path.is_file():
+        print(f"en.json not found: {en_path}", flush=True)
+        raise SystemExit(2)
+
+    with en_path.open(encoding="utf-8") as f:
+        payload = json.load(f)
+
+    keys = sorted(list(flatten(payload)))
+    files = list(gather_files(args.src))
+    usages = find_usages(keys, files)
+
+    report = {
+        "generated_at": datetime.utcnow().isoformat() + "Z",
+        "en_json": str(en_path),
+        "src_root": args.src,
+        "total_keys": len(keys),
+        "keys": {}
+    }
+
+    unused_count = 0
+    for k in keys:
+        occ = usages.get(k, [])
+        used = bool(occ)
+        if not used:
+            unused_count += 1
+        report["keys"][k] = {
+            "used": used,
+            "occurrences": occ
+        }
+
+    report["unused_count"] = unused_count
+    report["unused_keys"] = [k for k, v in report["keys"].items() if not v["used"]]
+
+    out_path = Path(args.out)
+    out_path.parent.mkdir(parents=True, exist_ok=True)
+    with out_path.open("w", encoding="utf-8") as f:
+        json.dump(report, f, indent=2, ensure_ascii=False)
+
+    print(f"Report written to {out_path}")
+    print(f"Total keys: {report['total_keys']}, Unused: {report['unused_count']}")
+
+if __name__ == "__main__":
+    main()

ui/eslint.config.cjs

@@ -9,8 +9,6 @@ const {
     fixupConfigRules,
 } = require("@eslint/compat");
 
-const tsParser = require("@typescript-eslint/parser");
-const reactRefresh = require("eslint-plugin-react-refresh");
 const js = require("@eslint/js");
 
 const {
@@ -23,6 +21,9 @@ const compat = new FlatCompat({
     allConfig: js.configs.all
 });
 
+const tsParser = require("@typescript-eslint/parser");
+const reactRefresh = require("eslint-plugin-react-refresh");
+
 module.exports = defineConfig([{
     languageOptions: {
         globals: {
@@ -66,7 +67,7 @@ module.exports = defineConfig([{
             groups: ["builtin", "external", "internal", "parent", "sibling"],
             "newlines-between": "always",
         }],
-    
+
         "@typescript-eslint/no-unused-vars": ["warn", {
             "argsIgnorePattern": "^_", "varsIgnorePattern": "^_"
         }],
@@ -81,7 +82,10 @@ module.exports = defineConfig([{
                 map: [
                     ["@components", "./src/components"],
                     ["@routes", "./src/routes"],
+                    ["@hooks", "./src/hooks"],
+                    ["@providers", "./src/providers"],
                     ["@assets", "./src/assets"],
+                    ["@localizations", "./localization/paraglide"],
                     ["@", "./src"],
                 ],
 

ui/index.html

@@ -45,31 +45,39 @@
     <link rel="shortcut icon" href="/favicon.ico" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <meta name="apple-mobile-web-app-title" content="JetKVM" />
-    <link rel="manifest" href="/site.webmanifest" />
+    <link rel="manifest" href="/public/site.webmanifest" />
     <meta name="theme-color" content="#051946" />
-    <meta name="description" content="A web-based KVM console for managing remote servers." />
+    <meta
+      name="description"
+      content="A web-based KVM console for managing remote servers."
+    />
     <script>
       function applyThemeFromPreference() {
         // dark theme setup
-        var darkDesired = localStorage.theme === "dark" ||
+        var darkDesired =
+          localStorage.theme === "dark" ||
           (!("theme" in localStorage) &&
-            window.matchMedia("(prefers-color-scheme: dark)").matches)
+            window.matchMedia("(prefers-color-scheme: dark)").matches);
 
-        document.documentElement.classList.toggle("dark", darkDesired)
+        document.documentElement.classList.toggle("dark", darkDesired);
       }
 
       // initial theme application
       applyThemeFromPreference();
 
       // Listen for system theme changes
-      window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", applyThemeFromPreference);
-      window.matchMedia("(prefers-color-scheme: light)").addEventListener("change", applyThemeFromPreference);
+      window
+        .matchMedia("(prefers-color-scheme: dark)")
+        .addEventListener("change", applyThemeFromPreference);
+      window
+        .matchMedia("(prefers-color-scheme: light)")
+        .addEventListener("change", applyThemeFromPreference);
     </script>
   </head>
   <body
-    class="h-full w-full bg-[#f3f9ff] font-sans text-sm antialiased dark:bg-slate-900 md:text-base"
+    class="h-full w-full bg-[#f3f9ff] font-sans text-sm antialiased md:text-base dark:bg-slate-900"
   >
-    <div id="root" class="w-full h-full"></div>
+    <div id="root" class="h-full w-full"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

ui/localization/jetKVM.UI.inlang/.gitignore

@@ -0,0 +1 @@
+cache