Refactor and enhance modals

.claude/skills/translate-changes/LANGUAGE_CODES.md

@@ -2,15 +2,15 @@
 
 ## Supported Languages
 
-| Language | File | Code | Notes |
-|----------|------|------|-------|
-| English (source) | en.json | en | Source of truth for all translations |
-| German | de.json | de | Formal "Sie" form |
-| Spanish | es.json | es | Latin American Spanish |
-| French | fr.json | fr | Standard French |
-| Italian | it.json | it | Standard Italian |
-| Russian | ru.json | ru | Includes ICU plural rules |
-| Ukrainian | uk.json | uk | Includes ICU plural rules |
+| Language         | File    | Code | Notes                                |
+| ---------------- | ------- | ---- | ------------------------------------ |
+| English (source) | en.json | en   | Source of truth for all translations |
+| German           | de.json | de   | Formal "Sie" form                    |
+| Spanish          | es.json | es   | Latin American Spanish               |
+| French           | fr.json | fr   | Standard French                      |
+| Italian          | it.json | it   | Standard Italian                     |
+| Russian          | ru.json | ru   | Includes ICU plural rules            |
+| Ukrainian        | uk.json | uk   | Includes ICU plural rules            |
 
 ## File Locations
 
@@ -37,6 +37,7 @@ Each language file maintains the same nested key structure as `en.json`:
 ### HTML Tags
 
 Many strings contain HTML for links or formatting:
+
 ```json
 "signedOut": "You must <a href=\"{href}\">sign in</a> before..."
 ```
@@ -46,6 +47,7 @@ Translations MUST preserve the HTML structure exactly.
 ### Variable Placeholders
 
 Strings may contain variables in curly braces:
+
 - `{href}` - URLs
 - `{n}` - Numbers
 - `{name}` - Names or identifiers
@@ -61,44 +63,52 @@ Some strings use ICU MessageFormat for pluralization:
 ```
 
 Russian and Ukrainian have complex plural rules:
+
 ```json
 "labelSelected": "{n, plural, one {# документ} few {# документа} many {# документов} other {# документов}}"
 ```
 
 ## Translation Style Guidelines
 
 ### German (de.json)
+
 - Use formal "Sie" form
 - Compound nouns are common
 - Example: "anmelden" (sign in), "ausführen" (execute)
 
 ### Spanish (es.json)
+
 - Latin American Spanish preferred
 - Use "usted" form (formal)
 - Example: "iniciar sesión" (sign in), "ejecutar" (execute)
 
 ### French (fr.json)
+
 - Use "vous" form (formal)
 - Elision rules apply (l' before vowels)
 - Example: "se connecter" (sign in), "exécuter" (execute)
 
 ### Italian (it.json)
+
 - Use "Lei" form (formal in some contexts) or informal based on existing patterns
 - Example: "accedere" (sign in), "eseguire" (execute)
 
 ### Russian (ru.json)
+
 - Cyrillic alphabet
 - Complex case and gender agreement
 - Example: "войти" (sign in), "запустить" (execute)
 
 ### Ukrainian (uk.json)
+
 - Cyrillic alphabet (different from Russian)
 - Similar grammar to Russian but distinct vocabulary
 - Example: "увійти" (sign in), "запустити" (execute)
 
 ## Encoding
 
 All JSON files use Unicode escape sequences for non-ASCII characters:
+
 - `é` becomes `\u00e9`
 - `ñ` becomes `\u00f1`
 - Cyrillic characters are also escaped
@@ -108,6 +118,7 @@ The Edit tool handles this automatically - no manual encoding needed.
 ## Verification Commands
 
 ### Check a specific key across all languages
+
 ```bash
 for file in src/langs/json/{de,es,fr,it,ru,uk}.json; do
   echo "=== $file ==="
@@ -116,6 +127,7 @@ done
 ```
 
 ### Validate JSON syntax
+
 ```bash
 for file in src/langs/json/*.json; do
   echo "Validating $file..."
@@ -124,6 +136,7 @@ done
 ```
 
 ### Compare keys between en.json and another language
+
 ```bash
 diff \
   <(jq -r 'keys | .[]' src/langs/json/en.json) \
@@ -133,15 +146,18 @@ diff \
 ## Common Issues
 
 ### Missing keys
+
 - Only translate MODIFIED keys, not missing ones
 - Many existing keys are intentionally untranslated
 
 ### Formatting
+
 - JSON must remain valid after edits
 - Maintain consistent indentation (2 spaces)
 - Commas must be correct (no trailing comma on last item)
 
 ### Context
+
 - Consider the full key path for context
 - Dialog buttons differ from page headers
 - Form labels differ from help text

.claude/skills/translate-changes/SKILL.md

@@ -63,18 +63,21 @@ This captures both uncommitted modifications and changes committed in the curren
 ### Step 2: Parse changes
 
 Look for lines starting with `+` in the diff that contain JSON keys:
+
 - Lines like `+    "keyName": "Value"` indicate additions or modifications
 - Ignore lines that are just structural changes (commas, brackets)
 
 ### Step 3: Extract key paths
 
 For each modified line, determine:
+
 - The full JSON path (e.g., `addonDispatchDialog.signedOut`)
 - The new English value
 
 ### Step 4: Translate
 
 For each modified key:
+
 1. Generate translations for all 6 languages
 2. Maintain the same HTML structure (e.g., `<a href="{href}">text</a>`)
 3. Preserve placeholders like `{href}`, `{n}`, etc.
@@ -83,6 +86,7 @@ For each modified key:
 ### Step 5: Update files
 
 For each language file:
+
 1. Read the current content
 2. Locate the key to update using the JSON path
 3. Use Edit tool to update the specific key
@@ -99,18 +103,21 @@ For each language file:
 ## Example Translations
 
 English:
+
 ```json
 "signedOut": "You must <a href=\"{href}\">sign in</a> before dispatching this add-on."
 ```
 
 Translations should maintain:
+
 - The `<a href="{href}">` structure
 - The `{href}` placeholder
 - Appropriate word order for each language
 
 ## Output Format
 
 After translating, show:
+
 1. Summary of changes detected
 2. List of keys modified
 3. Confirmation of files updated
@@ -119,6 +126,7 @@ After translating, show:
 ## Verification
 
 After updates, verify with:
+
 ```bash
 for file in src/langs/json/{de,es,fr,it,ru,uk}.json; do
   echo "=== $file ==="
@@ -131,4 +139,4 @@ done
 - JSON files use Unicode escape sequences (e.g., `\u00e9` for é)
 - The Edit tool will preserve this encoding automatically
 - Always use Edit tool, not Bash sed/awk, to maintain JSON validity
-- Files should remain valid JSON after updates
+- Files should remain valid JSON after updates

.nvmrc

@@ -0,0 +1 @@
+22

src/lib/components/accounts/Mailkey.svelte

@@ -55,20 +55,22 @@
 
 <Modal on:close>
   <h1 slot="title">{$_("mailkey.title")}</h1>
-  <div class="description">{@html $_("mailkey.description")}</div>
-  {#if message}
-    <p class="message" class:error>
-      {@html message}
-    </p>
-  {/if}
-  <Flex gap={1} wrap justify="center">
-    <Button mode="primary" on:click={create}>
-      {$_("mailkey.create.button")}
-    </Button>
-    <Button mode="danger" on:click={destroy}>
-      {$_("mailkey.destroy.button")}
-    </Button>
-  </Flex>
+  <div class="modal-form content">
+    <div class="description">{@html $_("mailkey.description")}</div>
+    {#if message}
+      <p class="message" class:error>
+        {@html message}
+      </p>
+    {/if}
+    <Flex gap={1} wrap justify="center">
+      <Button mode="primary" on:click={create}>
+        {$_("mailkey.create.button")}
+      </Button>
+      <Button mode="danger" on:click={destroy}>
+        {$_("mailkey.destroy.button")}
+      </Button>
+    </Flex>
+  </div>
 </Modal>
 
 <style>