feat: Rename to Toju and add translation

toju-app/src/app/domains/custom-emoji/feature/custom-emoji-picker/custom-emoji-picker.component.html

@@ -23,8 +23,8 @@
       <button
         type="button"
         class="grid h-10 w-10 place-items-center rounded text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
-        aria-label="Open emoji selector"
-        title="Open emoji selector"
+        aria-label="{{ 'emoji.picker.openAria' | translate }}"
+        title="{{ 'emoji.picker.openAria' | translate }}"
         (click)="openModal()"
       >
         <ng-icon
@@ -48,7 +48,7 @@
     >
       @if (!inline()) {
         <div class="mb-2 flex items-center justify-between gap-2">
-          <p class="text-sm font-semibold text-foreground">Emoji</p>
+          <p class="text-sm font-semibold text-foreground">{{ 'emoji.picker.title' | translate }}</p>
           @if (compact()) {
             <button
               type="button"
@@ -73,8 +73,8 @@
         <input
           type="search"
           class="w-full rounded-md border border-border bg-background py-2 pl-8 pr-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
-          placeholder="Search emoji"
-          aria-label="Search emoji"
+          placeholder="{{ 'emoji.picker.searchPlaceholder' | translate }}"
+          aria-label="{{ 'emoji.picker.searchAria' | translate }}"
           [value]="searchQuery()"
           (input)="onSearchInput($event)"
         />
@@ -87,7 +87,7 @@
           name="lucideUpload"
           class="h-4 w-4"
         />
-        <span>{{ uploading() ? 'Uploading...' : 'Upload emoji' }}</span>
+        <span>{{ uploading() ? ('emoji.picker.uploading' | translate) : ('emoji.picker.upload' | translate) }}</span>
         <input
           type="file"
           class="hidden"
@@ -105,7 +105,7 @@
 
       @if (showEmptySearchState()) {
         <div class="mb-3 rounded-md border border-border/70 bg-secondary/20 px-3 py-4 text-center text-xs text-muted-foreground">
-          No emoji match your search.
+          {{ 'emoji.picker.emptySearch' | translate }}
         </div>
       }
 

toju-app/src/app/domains/custom-emoji/feature/custom-emoji-picker/custom-emoji-picker.component.spec.ts

@@ -8,6 +8,7 @@ import {
 } from '@angular/core';
 import { CustomEmoji } from '../../../../shared-kernel';
 import { CustomEmojiService } from '../../application/custom-emoji.service';
+import { initializeAppI18nForTests, provideAppI18nForTests } from '../../../../core/i18n/app-i18n.testing';
 import { CustomEmojiPickerComponent } from './custom-emoji-picker.component';
 
 const savedEmojis: CustomEmoji[] = [
@@ -67,6 +68,7 @@ describe('CustomEmojiPickerComponent', () => {
   ): CustomEmojiPickerComponent {
     const injector = Injector.create({
       providers: [
+        ...provideAppI18nForTests(),
         CustomEmojiPickerComponent,
         {
           provide: ChangeDetectionScheduler,
@@ -92,6 +94,7 @@ describe('CustomEmojiPickerComponent', () => {
         }
       ]
     });
+    initializeAppI18nForTests(injector);
 
     return runInInjectionContext(injector, () => injector.get(CustomEmojiPickerComponent));
   }

toju-app/src/app/domains/custom-emoji/feature/custom-emoji-picker/custom-emoji-picker.component.ts

@@ -21,6 +21,7 @@ import {
 } from '@ng-icons/lucide';
 import { CustomEmoji, EmojiShortcutEntry } from '../../../../shared-kernel';
 import { CustomEmojiService } from '../../application/custom-emoji.service';
+import { APP_TRANSLATE_IMPORTS, AppI18nService } from '../../../../core/i18n';
 import {
   CUSTOM_EMOJI_ACCEPT_ATTRIBUTE,
   UNICODE_EMOJI_PICKER_ENTRIES,
@@ -33,12 +34,13 @@ import {
 @Component({
   selector: 'app-custom-emoji-picker',
   standalone: true,
-  imports: [CommonModule, NgIcon],
+  imports: [CommonModule, NgIcon, ...APP_TRANSLATE_IMPORTS],
   viewProviders: [provideIcons({ lucidePlus, lucideSearch, lucideSmile, lucideUpload, lucideX })],
   templateUrl: './custom-emoji-picker.component.html'
 })
 export class CustomEmojiPickerComponent {
   private readonly customEmoji = inject(CustomEmojiService);
+  private readonly appI18n = inject(AppI18nService);
   private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
 
   readonly currentUserId = input<string | null>(null);
@@ -154,7 +156,7 @@ export class CustomEmojiPickerComponent {
 
       this.selectCustom(emoji);
     } catch (error) {
-      this.uploadError.set(error instanceof Error ? error.message : 'Unable to upload emoji.');
+      this.uploadError.set(error instanceof Error ? error.message : this.appI18n.instant('emoji.picker.uploadFailed'));
     } finally {
       this.uploading.set(false);
     }