feat: Rename to Toju and add translation

toju-app/src/app/domains/screen-share/feature/screen-share-viewer/screen-share-viewer.component.html

@@ -22,16 +22,12 @@
           name="lucideMonitor"
           class="w-4 h-4"
         />
-        @if (activeScreenSharer()) {
-          <span class="text-sm font-medium"> {{ activeScreenSharer()?.displayName }} is sharing their screen </span>
-        } @else {
-          <span class="text-sm font-medium">Someone is sharing their screen</span>
-        }
+        <span class="text-sm font-medium">{{ sharingLabel() }}</span>
       </div>
       <div class="flex items-center gap-3">
         <!-- Viewer volume -->
         <div class="flex items-center gap-2 text-white">
-          <span class="text-xs opacity-80">Volume: {{ screenVolume() }}%</span>
+          <span class="text-xs opacity-80">{{ 'screenShare.viewer.volume' | translate: { volume: screenVolume() } }}</span>
           <input
             type="range"
             min="0"
@@ -63,7 +59,7 @@
             (click)="stopSharing()"
             type="button"
             class="grid h-9 w-9 place-items-center rounded-lg bg-destructive transition-colors hover:bg-destructive/90"
-            title="Stop sharing"
+            [title]="'screenShare.viewer.stopSharing' | translate"
           >
             <ng-icon
               name="lucideX"
@@ -75,7 +71,7 @@
             (click)="stopWatching()"
             type="button"
             class="grid h-9 w-9 place-items-center rounded-lg bg-destructive transition-colors hover:bg-destructive/90"
-            title="Stop watching"
+            [title]="'screenShare.viewer.stopWatching' | translate"
           >
             <ng-icon
               name="lucideX"
@@ -95,7 +91,7 @@
           name="lucideMonitor"
           class="w-12 h-12 mx-auto mb-2 opacity-50"
         />
-        <p>Waiting for screen share...</p>
+        <p>{{ 'screenShare.viewer.waiting' | translate }}</p>
       </div>
     </div>
   }

toju-app/src/app/domains/screen-share/feature/screen-share-viewer/screen-share-viewer.component.ts

@@ -24,11 +24,16 @@ import { selectOnlineUsers } from '../../../../store/users/users.selectors';
 import { User } from '../../../../shared-kernel';
 import { DEFAULT_VOLUME } from '../../../../core/constants';
 import { VoicePlaybackService } from '../../../../domains/voice-connection';
+import { APP_TRANSLATE_IMPORTS, AppI18nService } from '../../../../core/i18n';
 
 @Component({
   selector: 'app-screen-share-viewer',
   standalone: true,
-  imports: [CommonModule, NgIcon],
+  imports: [
+    CommonModule,
+    NgIcon,
+    ...APP_TRANSLATE_IMPORTS
+  ],
   viewProviders: [
     provideIcons({
       lucideMaximize,
@@ -49,6 +54,7 @@ export class ScreenShareViewerComponent implements OnDestroy {
   private readonly screenShareService = inject(ScreenShareFacade);
   private readonly voicePlayback = inject(VoicePlaybackService);
   private readonly store = inject(Store);
+  private readonly appI18n = inject(AppI18nService);
   private remoteStreamSub: Subscription | null = null;
 
   onlineUsers = this.store.selectSignal(selectOnlineUsers);
@@ -262,6 +268,16 @@ export class ScreenShareViewerComponent implements OnDestroy {
   }
 
   /** Handle volume slider changes, applying only to remote streams. */
+  sharingLabel(): string {
+    const sharer = this.activeScreenSharer();
+
+    if (sharer?.displayName) {
+      return this.appI18n.instant('screenShare.viewer.userSharing', { name: sharer.displayName });
+    }
+
+    return this.appI18n.instant('screenShare.viewer.someoneSharing');
+  }
+
   onScreenVolumeChange(event: Event): void {
     const input = event.target as HTMLInputElement;
     const val = Math.max(0, Math.min(200, parseInt(input.value, 10)));