reorganize modal i18n keys

Author: olivermrose

.vscode/settings.json

@@ -2,6 +2,6 @@
   "editor.defaultFormatter": "oxc.oxc-vscode",
   "editor.formatOnSave": true,
   "i18n-ally.keystyle": "nested",
-  "i18n-ally.localesPaths": ["./i18n/locales"],
+  "i18n-ally.localesPaths": ["./i18n/locales", "i18n", "i18n/locales"],
   "typescript.tsdk": "node_modules/typescript/lib"
 }

app/components/Header/AtprotoModal.client.vue

@@ -35,7 +35,7 @@ async function handleLogin() {
         locale: locale.value,
       })
     } else {
-      errorMessage.value = $t('auth.modal.default_input_error')
+      errorMessage.value = $t('auth.modal.atmosphere.default_input_error')
     }
   }
 }
@@ -54,13 +54,13 @@ watch(handleInput, newHandleInput => {
 
 <template>
   <!-- Modal -->
-  <Modal :modalTitle="$t('auth.modal.title')" class="max-w-lg" id="atproto-modal">
+  <Modal :modalTitle="$t('auth.modal.atmosphere.title')" class="max-w-lg" id="atproto-modal">
     <div v-if="user?.handle" class="space-y-4">
       <div class="flex items-center gap-3 p-4 bg-bg-subtle border border-border rounded-lg">
         <span class="w-3 h-3 rounded-full bg-green-500" aria-hidden="true" />
         <div>
           <p class="font-mono text-xs text-fg-muted">
-            {{ $t('auth.modal.connected_as', { handle: user.handle }) }}
+            {{ $t('auth.modal.atmosphere.connected_as', { handle: user.handle }) }}
           </p>
         </div>
       </div>
@@ -71,22 +71,22 @@ watch(handleInput, newHandleInput => {
 
     <!-- Disconnected state -->
     <form v-else class="space-y-4" @submit.prevent="handleLogin">
-      <p class="text-sm text-fg-muted">{{ $t('auth.modal.connect_prompt') }}</p>
+      <p class="text-sm text-fg-muted">{{ $t('auth.modal.atmosphere.connect_prompt') }}</p>
 
       <div class="space-y-3">
         <div>
           <label
             for="handle-input"
             class="block text-xs text-fg-subtle uppercase tracking-wider mb-1.5"
           >
-            {{ $t('auth.modal.handle_label') }}
+            {{ $t('auth.modal.atmosphere.handle_label') }}
           </label>
           <InputBase
             id="handle-input"
             v-model="handleInput"
             type="text"
             name="handle"
-            :placeholder="$t('auth.modal.handle_placeholder')"
+            :placeholder="$t('auth.modal.atmosphere.handle_placeholder')"
             no-correct
             class="w-full"
             size="medium"
@@ -100,10 +100,10 @@ watch(handleInput, newHandleInput => {
           <summary
             class="text-fg-subtle hover:text-fg-muted transition-colors duration-200 focus-visible:(outline-2 outline-accent/70)"
           >
-            {{ $t('auth.modal.what_is_atmosphere') }}
+            {{ $t('auth.modal.atmosphere.what_is_atmosphere') }}
           </summary>
           <div class="mt-3">
-            <i18n-t keypath="auth.modal.atmosphere_explanation" tag="p" scope="global">
+            <i18n-t keypath="auth.modal.atmosphere.explanation" tag="p" scope="global">
               <template #npmx>
                 <span class="font-bold">npmx.dev</span>
               </template>
@@ -125,7 +125,7 @@ watch(handleInput, newHandleInput => {
         {{ $t('auth.modal.connect') }}
       </ButtonBase>
       <ButtonBase type="button" class="w-full" @click="handleCreateAccount">
-        {{ $t('auth.modal.create_account') }}
+        {{ $t('auth.modal.atmosphere.create_account') }}
       </ButtonBase>
       <hr class="color-border" />
       <ButtonBase
@@ -134,7 +134,7 @@ watch(handleInput, newHandleInput => {
         @click="handleBlueskySignIn"
         classicon="i-simple-icons:bluesky"
       >
-        {{ $t('auth.modal.connect_bluesky') }}
+        {{ $t('auth.modal.atmosphere.connect_bluesky') }}
       </ButtonBase>
     </form>
   </Modal>

app/components/Header/GitHubModal.client.vue

@@ -8,14 +8,14 @@ function handleConnect() {
 </script>
 
 <template>
-  <Modal :modalTitle="$t('auth.github.title')" class="max-w-lg" id="github-modal">
+  <Modal :modalTitle="$t('auth.modal.github.title')" class="max-w-lg" id="github-modal">
     <!-- Connected state -->
     <div v-if="isConnected && user" class="space-y-4">
       <div class="flex items-center gap-3 p-4 bg-bg-subtle border border-border rounded-lg">
         <span class="w-3 h-3 rounded-full bg-green-500" aria-hidden="true" />
         <div>
           <p class="font-mono text-xs text-fg-muted">
-            {{ $t('auth.github.connected_as', { username: user.username }) }}
+            {{ $t('auth.modal.github.connected_as', { username: user.username }) }}
           </p>
         </div>
       </div>
@@ -26,7 +26,7 @@ function handleConnect() {
 
     <!-- Disconnected state -->
     <div v-else class="space-y-4">
-      <p class="text-sm text-fg-muted">{{ $t('auth.github.connect_prompt') }}</p>
+      <p class="text-sm text-fg-muted">{{ $t('auth.modal.github.connect_prompt') }}</p>
       <ButtonBase
         variant="primary"
         class="w-full"

i18n/locales/en.json

@@ -877,23 +877,25 @@
   },
   "auth": {
     "modal": {
-      "title": "Atmosphere",
-      "connected_as": "Connected as {'@'}{handle}",
-      "disconnect": "Disconnect",
-      "connect_prompt": "Connect with your Atmosphere account",
-      "handle_label": "Handle",
-      "handle_placeholder": "alice.npmx.social",
       "connect": "Connect",
-      "create_account": "Create a new account",
-      "connect_bluesky": "Connect with Bluesky",
-      "what_is_atmosphere": "What is an Atmosphere account?",
-      "atmosphere_explanation": "{npmx} uses the {atproto} to power many of its social features, allowing users to own their data and use one account for all compatible applications. Once you create an account, you can use other apps like {bluesky} and {tangled} with the same account.",
-      "default_input_error": "Please enter a valid handle, DID, or a full PDS URL"
-    },
-    "github": {
-      "title": "GitHub",
-      "connected_as": "Connected as {username}",
-      "connect_prompt": "Connect your GitHub account to star repositories directly from npmx."
+      "disconnect": "Disconnect",
+      "atmosphere": {
+        "title": "Atmosphere",
+        "connected_as": "Connected as {'@'}{handle}",
+        "connect_prompt": "Connect with your Atmosphere account",
+        "handle_label": "Handle",
+        "handle_placeholder": "alice.npmx.social",
+        "create_account": "Create a new account",
+        "connect_bluesky": "Connect with Bluesky",
+        "what_is_atmosphere": "What is an Atmosphere account?",
+        "explanation": "{npmx} uses the {atproto} to power many of its social features, allowing users to own their data and use one account for all compatible applications. Once you create an account, you can use other apps like {bluesky} and {tangled} with the same account.",
+        "default_input_error": "Please enter a valid handle, DID, or a full PDS URL"
+      },
+      "github": {
+        "title": "GitHub",
+        "connected_as": "Connected as {username}",
+        "connect_prompt": "Connect your GitHub account to star repositories directly from npmx."
+      }
     }
   },
   "header": {

i18n/schema.json

@@ -2635,56 +2635,62 @@
         "modal": {
           "type": "object",
           "properties": {
-            "title": {
-              "type": "string"
-            },
-            "connected_as": {
-              "type": "string"
-            },
-            "disconnect": {
-              "type": "string"
-            },
-            "connect_prompt": {
-              "type": "string"
-            },
-            "handle_label": {
-              "type": "string"
-            },
-            "handle_placeholder": {
-              "type": "string"
-            },
             "connect": {
               "type": "string"
             },
-            "create_account": {
-              "type": "string"
-            },
-            "connect_bluesky": {
-              "type": "string"
-            },
-            "what_is_atmosphere": {
-              "type": "string"
-            },
-            "atmosphere_explanation": {
-              "type": "string"
-            },
-            "default_input_error": {
-              "type": "string"
-            }
-          },
-          "additionalProperties": false
-        },
-        "github": {
-          "type": "object",
-          "properties": {
-            "title": {
+            "disconnect": {
               "type": "string"
             },
-            "connected_as": {
-              "type": "string"
+            "atmosphere": {
+              "type": "object",
+              "properties": {
+                "title": {
+                  "type": "string"
+                },
+                "connected_as": {
+                  "type": "string"
+                },
+                "connect_prompt": {
+                  "type": "string"
+                },
+                "handle_label": {
+                  "type": "string"
+                },
+                "handle_placeholder": {
+                  "type": "string"
+                },
+                "create_account": {
+                  "type": "string"
+                },
+                "connect_bluesky": {
+                  "type": "string"
+                },
+                "what_is_atmosphere": {
+                  "type": "string"
+                },
+                "explanation": {
+                  "type": "string"
+                },
+                "default_input_error": {
+                  "type": "string"
+                }
+              },
+              "additionalProperties": false
             },
-            "connect_prompt": {
-              "type": "string"
+            "github": {
+              "type": "object",
+              "properties": {
+                "title": {
+                  "type": "string"
+                },
+                "connected_as": {
+                  "type": "string"
+                },
+                "connect_prompt": {
+                  "type": "string"
+                }
+              },
+              "additionalProperties": false
             }
           },
           "additionalProperties": false

lunaria/files/en-GB.json

@@ -876,23 +876,25 @@
   },
   "auth": {
     "modal": {
-      "title": "Atmosphere",
-      "connected_as": "Connected as {'@'}{handle}",
-      "disconnect": "Disconnect",
-      "connect_prompt": "Connect with your Atmosphere account",
-      "handle_label": "Handle",
-      "handle_placeholder": "alice.npmx.social",
       "connect": "Connect",
-      "create_account": "Create a new account",
-      "connect_bluesky": "Connect with Bluesky",
-      "what_is_atmosphere": "What is an Atmosphere account?",
-      "atmosphere_explanation": "{npmx} uses the {atproto} to power many of its social features, allowing users to own their data and use one account for all compatible applications. Once you create an account, you can use other apps like {bluesky} and {tangled} with the same account.",
-      "default_input_error": "Please enter a valid handle, DID, or a full PDS URL"
-    },
-    "github": {
-      "title": "GitHub",
-      "connected_as": "Connected as {username}",
-      "connect_prompt": "Connect your GitHub account to star repositories directly from npmx."
+      "disconnect": "Disconnect",
+      "atmosphere": {
+        "title": "Atmosphere",
+        "connected_as": "Connected as {'@'}{handle}",
+        "connect_prompt": "Connect with your Atmosphere account",
+        "handle_label": "Handle",
+        "handle_placeholder": "alice.npmx.social",
+        "create_account": "Create a new account",
+        "connect_bluesky": "Connect with Bluesky",
+        "what_is_atmosphere": "What is an Atmosphere account?",
+        "explanation": "{npmx} uses the {atproto} to power many of its social features, allowing users to own their data and use one account for all compatible applications. Once you create an account, you can use other apps like {bluesky} and {tangled} with the same account.",
+        "default_input_error": "Please enter a valid handle, DID, or a full PDS URL"
+      },
+      "github": {
+        "title": "GitHub",
+        "connected_as": "Connected as {username}",
+        "connect_prompt": "Connect your GitHub account to star repositories directly from npmx."
+      }
     }
   },
   "header": {

lunaria/files/en-US.json

@@ -876,23 +876,25 @@
   },
   "auth": {
     "modal": {
-      "title": "Atmosphere",
-      "connected_as": "Connected as {'@'}{handle}",
-      "disconnect": "Disconnect",
-      "connect_prompt": "Connect with your Atmosphere account",
-      "handle_label": "Handle",
-      "handle_placeholder": "alice.npmx.social",
       "connect": "Connect",
-      "create_account": "Create a new account",
-      "connect_bluesky": "Connect with Bluesky",
-      "what_is_atmosphere": "What is an Atmosphere account?",
-      "atmosphere_explanation": "{npmx} uses the {atproto} to power many of its social features, allowing users to own their data and use one account for all compatible applications. Once you create an account, you can use other apps like {bluesky} and {tangled} with the same account.",
-      "default_input_error": "Please enter a valid handle, DID, or a full PDS URL"
-    },
-    "github": {
-      "title": "GitHub",
-      "connected_as": "Connected as {username}",
-      "connect_prompt": "Connect your GitHub account to star repositories directly from npmx."
+      "disconnect": "Disconnect",
+      "atmosphere": {
+        "title": "Atmosphere",
+        "connected_as": "Connected as {'@'}{handle}",
+        "connect_prompt": "Connect with your Atmosphere account",
+        "handle_label": "Handle",
+        "handle_placeholder": "alice.npmx.social",
+        "create_account": "Create a new account",
+        "connect_bluesky": "Connect with Bluesky",
+        "what_is_atmosphere": "What is an Atmosphere account?",
+        "explanation": "{npmx} uses the {atproto} to power many of its social features, allowing users to own their data and use one account for all compatible applications. Once you create an account, you can use other apps like {bluesky} and {tangled} with the same account.",
+        "default_input_error": "Please enter a valid handle, DID, or a full PDS URL"
+      },
+      "github": {
+        "title": "GitHub",
+        "connected_as": "Connected as {username}",
+        "connect_prompt": "Connect your GitHub account to star repositories directly from npmx."
+      }
     }
   },
   "header": {