feat: Rename to Toju and add translation

toju-app/src/app/features/settings/settings-modal/members-settings/members-settings.component.html

@@ -1,7 +1,7 @@
 @if (server()) {
   <div class="space-y-3 max-w-3xl">
     @if (members().length === 0) {
-      <p class="text-sm text-muted-foreground text-center py-8">No other members found for this server</p>
+      <p class="text-sm text-muted-foreground text-center py-8">{{ 'settings.members.empty' | translate }}</p>
     } @else {
       @for (member of members(); track member.oderId || member.id) {
         <div class="space-y-3 rounded-lg bg-secondary/50 p-3">
@@ -16,7 +16,7 @@
                   {{ member.displayName }}
                 </p>
                 @if (member.isOnline) {
-                  <span class="rounded bg-emerald-500/20 px-1 py-0.5 text-[10px] text-emerald-400">Online</span>
+                  <span class="rounded bg-emerald-500/20 px-1 py-0.5 text-[10px] text-emerald-400">{{ 'settings.members.online' | translate }}</span>
                 }
                 <span class="rounded bg-primary/10 px-1 py-0.5 text-[10px] text-primary">{{ member.displayRoleName }}</span>
               </div>
@@ -28,7 +28,7 @@
                   type="button"
                   (click)="kickMember(member)"
                   class="grid h-8 w-8 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-destructive/20 hover:text-destructive"
-                  title="Kick"
+                  [title]="'settings.members.kick' | translate"
                 >
                   <ng-icon
                     name="lucideUserX"
@@ -41,7 +41,7 @@
                   type="button"
                   (click)="banMember(member)"
                   class="grid h-8 w-8 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-destructive/20 hover:text-destructive"
-                  title="Ban"
+                  [title]="'settings.members.ban' | translate"
                 >
                   <ng-icon
                     name="lucideBan"
@@ -54,7 +54,7 @@
 
           @if (assignableRoles().length > 0 && canChangeRoles(member)) {
             <div class="space-y-2 border-t border-border/50 pt-3">
-              <p class="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">Assigned Roles</p>
+              <p class="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">{{ 'settings.members.assignedRoles' | translate }}</p>
               <div class="flex flex-wrap gap-2">
                 @for (role of assignableRoles(); track role.id) {
                   <label class="flex items-center gap-2 rounded-full border border-border bg-background/70 px-3 py-1 text-xs text-foreground">
@@ -75,7 +75,7 @@
             </div>
           } @else if (assignableRoles().length > 0) {
             <p class="border-t border-border/50 pt-3 text-xs text-muted-foreground">
-              You can view this member's roles, but you do not have permission to change them.
+              {{ 'settings.members.readOnlyRoles' | translate }}
             </p>
           }
         </div>
@@ -83,5 +83,5 @@
     }
   </div>
 } @else {
-  <div class="flex items-center justify-center h-40 text-muted-foreground text-sm">Select a server from the sidebar to manage</div>
+  <div class="flex items-center justify-center h-40 text-muted-foreground text-sm">{{ 'settings.members.selectServer' | translate }}</div>
 }

toju-app/src/app/features/settings/settings-modal/members-settings/members-settings.component.ts

@@ -29,6 +29,7 @@ import {
   normalizeRoomAccessControl,
   setRoleAssignmentsForMember
 } from '../../../../domains/access-control';
+import { AppI18nService, APP_TRANSLATE_IMPORTS } from '../../../../core/i18n';
 
 interface ServerMemberView extends RoomMember {
   assignedRoleIds: string[];
@@ -43,7 +44,8 @@ interface ServerMemberView extends RoomMember {
     CommonModule,
     FormsModule,
     NgIcon,
-    UserAvatarComponent
+    UserAvatarComponent,
+    ...APP_TRANSLATE_IMPORTS
   ],
   viewProviders: [
     provideIcons({
@@ -55,6 +57,7 @@ interface ServerMemberView extends RoomMember {
 })
 export class MembersSettingsComponent {
   private store = inject(Store);
+  private readonly i18n = inject(AppI18nService);
 
   /** The currently selected server, passed from the parent. */
   server = input<Room | null>(null);
@@ -93,7 +96,7 @@ export class MembersSettingsComponent {
         return {
           ...member,
           assignedRoleIds: getRoleIdsForMember(room, member),
-          displayRoleName: getDisplayRoleName(room, member),
+          displayRoleName: getDisplayRoleName(room, member, (key) => this.i18n.instant(key)),
           avatarUrl: liveUser?.avatarUrl || member.avatarUrl,
           displayName: liveUser?.displayName || member.displayName,
           isOnline: !!liveUser && (liveUser.isOnline === true || liveUser.status !== 'offline')