feat: Rename to Toju and add translation

toju-app/src/app/features/room/voice-workspace/voice-workspace.component.html

@@ -30,16 +30,16 @@
                   <div class="flex flex-wrap items-center gap-2">
                     <h2 class="truncate text-sm font-semibold text-white sm:text-base">{{ connectedVoiceChannelName() }}</h2>
                     <span class="rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.18em] text-primary">
-                      Streams
+                      {{ 'voice.workspace.streams' | translate }}
                     </span>
                   </div>
 
                   <div class="mt-1 flex flex-wrap items-center gap-2 text-xs text-white/65">
                     <span>{{ serverName() }}</span>
                     <span class="h-1 w-1 rounded-full bg-white/25"></span>
-                    <span>{{ connectedVoiceUsers().length }} in voice</span>
+                    <span>{{ 'voice.workspace.inVoice' | translate: { count: connectedVoiceUsers().length } }}</span>
                     <span class="h-1 w-1 rounded-full bg-white/25"></span>
-                    <span>{{ liveShareCount() }} live {{ liveShareCount() === 1 ? 'stream' : 'streams' }}</span>
+                    <span>{{ liveStreamCountLabel(liveShareCount()) }}</span>
                   </div>
                 </div>
               </div>
@@ -74,7 +74,7 @@
                   <div class="min-w-0">
                     <p class="truncate text-xs font-semibold text-white">{{ focusedShareTitle() }}</p>
                     <p class="text-[10px] uppercase tracking-[0.18em] text-white/55">
-                      {{ widescreenShare()!.isLocal ? 'Local preview' : 'Focused stream' }}
+                      {{ widescreenShare()!.isLocal ? ('voice.workspace.localPreview' | translate) : ('voice.workspace.focusedStream' | translate) }}
                     </p>
                   </div>
 
@@ -85,7 +85,9 @@
                       <button
                         type="button"
                         class="inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/10 bg-black/45 text-white/75 transition hover:bg-black/60 hover:text-white"
-                        [title]="focusedShareMuted() ? 'Unmute stream audio' : 'Mute stream audio'"
+                        [title]="
+                          focusedShareMuted() ? ('voice.workspace.unmuteStreamAudio' | translate) : ('voice.workspace.muteStreamAudio' | translate)
+                        "
                         (click)="toggleFocusedShareMuted()"
                       >
                         <ng-icon
@@ -104,7 +106,7 @@
                       />
 
                       <span class="w-10 text-right text-[11px] text-white/65">
-                        {{ focusedShareMuted() ? 'Muted' : focusedShareVolume() + '%' }}
+                        {{ focusedShareMuted() ? ('common.muted' | translate) : focusedShareVolume() + '%' }}
                       </span>
                     </div>
                   }
@@ -116,21 +118,21 @@
                   <button
                     type="button"
                     class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-black/35 px-3 py-2 text-xs font-medium text-white/80 transition hover:bg-black/55 hover:text-white"
-                    title="Show all streams"
+                    [title]="'voice.workspace.showAllStreams' | translate"
                     (click)="showAllStreams()"
                   >
                     <ng-icon
                       name="lucideUsers"
                       class="h-3.5 w-3.5"
                     />
-                    All streams
+                    {{ 'voice.workspace.allStreams' | translate }}
                   </button>
                 }
 
                 <button
                   type="button"
                   class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-black/35 text-white/70 transition hover:bg-black/55 hover:text-white"
-                  title="Minimize stream workspace"
+                  [title]="'voice.workspace.minimizeWorkspace' | translate"
                   (click)="minimizeWorkspace()"
                 >
                   <ng-icon
@@ -142,7 +144,7 @@
                 <button
                   type="button"
                   class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/10 bg-black/35 text-white/70 transition hover:bg-black/55 hover:text-white"
-                  title="Return to chat"
+                  [title]="'voice.workspace.returnToChat' | translate"
                   (click)="closeWorkspace()"
                 >
                   <ng-icon
@@ -165,7 +167,9 @@
                 [class.pointer-events-none]="!showWorkspaceHeader()"
               >
                 <div class="mb-2 flex items-center justify-between px-1">
-                  <span class="text-[10px] font-semibold uppercase tracking-[0.18em] text-white/55">Other live streams</span>
+                  <span class="text-[10px] font-semibold uppercase tracking-[0.18em] text-white/55">{{
+                    'voice.workspace.otherLiveStreams' | translate
+                  }}</span>
                   <span class="text-[10px] text-white/40">{{ thumbnailShares().length }}</span>
                 </div>
 
@@ -226,9 +230,9 @@
                     />
                   </div>
 
-                  <h2 class="text-2xl font-semibold text-foreground">No live streams yet</h2>
+                  <h2 class="text-2xl font-semibold text-foreground">{{ 'voice.workspace.noLiveStreams' | translate }}</h2>
                   <p class="mx-auto mt-3 max-w-2xl text-sm leading-6 text-muted-foreground">
-                    Turn on your camera, click Screen Share below, or wait for someone in {{ connectedVoiceChannelName() }} to go live.
+                    {{ 'voice.workspace.noLiveStreamsDescription' | translate: { channel: connectedVoiceChannelName() } }}
                   </p>
 
                   @if (connectedVoiceUsers().length > 0) {
@@ -252,7 +256,7 @@
                         name="lucideUsers"
                         class="h-4 w-4"
                       />
-                      {{ connectedVoiceUsers().length }} participants ready
+                      {{ 'voice.workspace.participantsReady' | translate: { count: connectedVoiceUsers().length } }}
                     </span>
                     <button
                       type="button"
@@ -264,7 +268,7 @@
                         name="lucideMonitor"
                         class="h-4 w-4"
                       />
-                      Start screen sharing
+                      {{ 'voice.workspace.startScreenShare' | translate }}
                     </button>
                   </div>
                 </div>
@@ -298,14 +302,14 @@
         <div class="min-w-0 flex-1">
           <p class="truncate text-sm font-semibold text-foreground">{{ connectedVoiceChannelName() }}</p>
           <p class="truncate text-xs text-muted-foreground">
-            {{ liveShareCount() }} live {{ liveShareCount() === 1 ? 'stream' : 'streams' }} · double-click to expand
+            {{ miniWindowStreamHint(liveShareCount()) }}
           </p>
         </div>
 
         <button
           type="button"
           class="inline-flex h-8 w-8 items-center justify-center rounded-full text-muted-foreground transition hover:bg-black/30 hover:text-foreground"
-          title="Expand"
+          [title]="'voice.workspace.expand' | translate"
           (click)="restoreWorkspace()"
         >
           <ng-icon
@@ -317,7 +321,7 @@
         <button
           type="button"
           class="inline-flex h-8 w-8 items-center justify-center rounded-full text-muted-foreground transition hover:bg-black/30 hover:text-foreground"
-          title="Close"
+          [title]="'voice.workspace.close' | translate"
           (click)="closeWorkspace()"
         >
           <ng-icon
@@ -342,7 +346,7 @@
                 name="lucideMonitor"
                 class="mx-auto h-8 w-8 opacity-50"
               />
-              <p class="mt-2 text-sm">Waiting for a live stream</p>
+              <p class="mt-2 text-sm">{{ 'voice.workspace.waitingForStream' | translate }}</p>
             </div>
           </div>
         }
@@ -351,7 +355,7 @@
           <p class="truncate text-sm font-semibold">
             {{ miniPreviewTitle() }}
           </p>
-          <p class="truncate text-xs text-white/75">Connected to {{ serverName() }}</p>
+          <p class="truncate text-xs text-white/75">{{ 'voice.workspace.connectedTo' | translate: { server: serverName() } }}</p>
         </div>
       </div>
     </div>