feat: Rename to Toju and add translation

toju-app/src/app/domains/server-directory/feature/create-server/create-server.component.html

@@ -2,7 +2,7 @@
   <header class="flex items-center gap-3 border-b border-border px-4 py-3">
     <a
       routerLink="/dashboard"
-      aria-label="Back to dashboard"
+      [attr.aria-label]="'common.actions.backToDashboard' | translate"
       class="grid h-9 w-9 shrink-0 place-items-center rounded-lg border border-border bg-secondary text-muted-foreground transition-colors hover:bg-secondary/80"
     >
       <ng-icon
@@ -11,15 +11,15 @@
       />
     </a>
     <div class="min-w-0">
-      <h1 class="truncate text-lg font-semibold text-foreground">Create a server</h1>
-      <p class="truncate text-xs text-muted-foreground">Your server is where you and your community hang out.</p>
+      <h1 class="truncate text-lg font-semibold text-foreground">{{ 'servers.create.title' | translate }}</h1>
+      <p class="truncate text-xs text-muted-foreground">{{ 'servers.create.subtitle' | translate }}</p>
     </div>
   </header>
 
   <div class="min-h-0 flex-1 overflow-y-auto">
     <div class="mx-auto w-full max-w-lg space-y-6 p-4 sm:p-6">
       <div>
-        <span class="mb-2 block text-sm font-medium text-foreground">Pick a category</span>
+        <span class="mb-2 block text-sm font-medium text-foreground">{{ 'servers.create.pickCategory' | translate }}</span>
         <div class="flex flex-wrap gap-2">
           @for (category of categories; track category.id) {
             <button
@@ -33,7 +33,7 @@
               [class.text-foreground]="selectedCategoryId() !== category.id"
               (click)="selectCategory(category)"
             >
-              {{ category.label }}
+              {{ 'servers.create.categories.' + category.id | translate }}
             </button>
           }
         </div>
@@ -43,14 +43,14 @@
         <label
           for="create-server-name"
           class="mb-1 block text-sm font-medium text-foreground"
-          >Server name</label
+          >{{ 'servers.create.serverName' | translate }}</label
         >
         <input
           id="create-server-name"
           type="text"
           [ngModel]="name()"
           (ngModelChange)="name.set($event)"
-          placeholder="My Awesome Server"
+          [placeholder]="'servers.create.namePlaceholder' | translate"
           class="w-full rounded-lg border border-border bg-secondary px-3 py-2 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
         />
       </div>
@@ -59,13 +59,13 @@
         <label
           for="create-server-description"
           class="mb-1 block text-sm font-medium text-foreground"
-          >Description (optional)</label
+          >{{ 'servers.create.descriptionOptional' | translate }}</label
         >
         <textarea
           id="create-server-description"
           [ngModel]="description()"
           (ngModelChange)="description.set($event)"
-          placeholder="What's your server about?"
+          [placeholder]="'servers.create.descriptionPlaceholder' | translate"
           rows="3"
           class="w-full resize-none rounded-lg border border-border bg-secondary px-3 py-2 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
         ></textarea>
@@ -78,7 +78,7 @@
           [attr.aria-expanded]="showAdvanced()"
           (click)="toggleAdvanced()"
         >
-          <span>Advanced settings</span>
+          <span>{{ 'servers.create.advancedSettings' | translate }}</span>
           <ng-icon
             [name]="showAdvanced() ? 'lucideChevronUp' : 'lucideChevronDown'"
             class="h-4 w-4 text-muted-foreground"
@@ -91,14 +91,14 @@
               <label
                 for="create-server-topic"
                 class="mb-1 block text-sm font-medium text-foreground"
-                >Topic (optional)</label
+                >{{ 'servers.create.topicOptional' | translate }}</label
               >
               <input
                 id="create-server-topic"
                 type="text"
                 [ngModel]="topic()"
                 (ngModelChange)="topic.set($event)"
-                placeholder="gaming, music, coding..."
+                [placeholder]="'servers.create.topicPlaceholder' | translate"
                 class="w-full rounded-lg border border-border bg-secondary px-3 py-2 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
               />
             </div>
@@ -107,7 +107,7 @@
               <label
                 for="create-server-signal-endpoint"
                 class="mb-1 block text-sm font-medium text-foreground"
-                >Signal server endpoint</label
+                >{{ 'servers.create.signalEndpoint' | translate }}</label
               >
               <select
                 id="create-server-signal-endpoint"
@@ -118,7 +118,7 @@
                   <option [value]="endpoint.id">{{ endpoint.name }} ({{ endpoint.url }})</option>
                 }
               </select>
-              <p class="mt-1 text-xs text-muted-foreground">This endpoint handles all signaling for this server.</p>
+              <p class="mt-1 text-xs text-muted-foreground">{{ 'servers.create.signalEndpointHint' | translate }}</p>
             </div>
 
             <div class="flex items-center gap-2">
@@ -132,7 +132,7 @@
               <label
                 for="create-server-private"
                 class="text-sm text-foreground"
-                >Private server</label
+                >{{ 'servers.create.privateServer' | translate }}</label
               >
             </div>
 
@@ -140,17 +140,17 @@
               <label
                 for="create-server-password"
                 class="mb-1 block text-sm font-medium text-foreground"
-                >Password (optional)</label
+                >{{ 'servers.create.passwordOptional' | translate }}</label
               >
               <input
                 id="create-server-password"
                 type="password"
                 [ngModel]="password()"
                 (ngModelChange)="password.set($event)"
-                placeholder="Leave blank to allow joining without a password"
+                [placeholder]="'servers.create.passwordPlaceholder' | translate"
                 class="w-full rounded-lg border border-border bg-secondary px-3 py-2 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
               />
-              <p class="mt-1 text-xs text-muted-foreground">Users who already joined keep access even if you change the password later.</p>
+              <p class="mt-1 text-xs text-muted-foreground">{{ 'servers.create.passwordHint' | translate }}</p>
             </div>
           </div>
         }
@@ -163,7 +163,7 @@
           class="flex-1 rounded-lg bg-secondary px-4 py-2 text-foreground transition-colors hover:bg-secondary/80"
           (click)="cancel()"
         >
-          Cancel
+          {{ 'common.actions.cancel' | translate }}
         </button>
         <button
           id="create-server-submit"
@@ -172,7 +172,7 @@
           [disabled]="!canCreate"
           (click)="createServer()"
         >
-          Create server
+          {{ 'servers.create.submit' | translate }}
         </button>
       </div>
     </div>