feat: Rename to Toju and add translation

toju-app/src/app/app.html

@@ -34,7 +34,7 @@
           @if (themeStudioFullscreenComponent()) {
           <ng-container *ngComponentOutlet="themeStudioFullscreenComponent()" />
           } @else {
-          <div class="flex h-full items-center justify-center px-6 text-sm text-muted-foreground">Loading Theme Studio...</div>
+          <div class="flex h-full items-center justify-center px-6 text-sm text-muted-foreground">{{ 'app.themeStudio.loading' | translate }}</div>
           }
         </div>
         } @else { @if (showDesktopUpdateNotice()) {
@@ -45,7 +45,7 @@
                 type="button"
                 (click)="dismissDesktopUpdateNotice()"
                 class="absolute right-2 top-2 grid h-8 w-8 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
-                aria-label="Dismiss update notice"
+                [attr.aria-label]="'app.desktopUpdate.dismissAriaLabel' | translate"
               >
                 <ng-icon
                   name="lucideX"
@@ -54,15 +54,15 @@
               </button>
 
               <div class="pr-10">
-                <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-primary">Update Ready</p>
+                <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-primary">{{ 'app.desktopUpdate.readyBadge' | translate }}</p>
                 <p class="mt-1 text-sm font-semibold text-foreground">
-                  Restart to install {{ desktopUpdateState().targetVersion || 'the latest update' }}
+                  @if (desktopUpdateState().targetVersion) { {{ 'app.desktopUpdate.restartTitle' | translate:{ version:
+                  desktopUpdateState().targetVersion } }} } @else { {{ 'app.desktopUpdate.restartTitle' | translate:{ version:
+                  ('app.desktopUpdate.latestUpdateFallback' | translate) } }} }
                 </p>
               </div>
 
-              <p class="mt-1 pr-10 text-xs leading-5 text-muted-foreground">
-                The update has already been downloaded. Restart the app when you're ready to finish applying it.
-              </p>
+              <p class="mt-1 pr-10 text-xs leading-5 text-muted-foreground">{{ 'app.desktopUpdate.downloadedMessage' | translate }}</p>
 
               <div class="mt-3 flex flex-wrap gap-2">
                 <button
@@ -70,7 +70,7 @@
                   (click)="openUpdatesSettings()"
                   class="inline-flex items-center rounded-lg border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80"
                 >
-                  Update settings
+                  {{ 'app.desktopUpdate.updateSettings' | translate }}
                 </button>
 
                 <button
@@ -78,7 +78,7 @@
                   (click)="restartToApplyUpdate()"
                   class="inline-flex items-center rounded-lg bg-primary px-3 py-1.5 text-xs font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
                 >
-                  Restart now
+                  {{ 'app.desktopUpdate.restartNow' | translate }}
                 </button>
               </div>
             </div>
@@ -114,7 +114,7 @@
         [class.cursor-grabbing]="isDraggingThemeStudioControls()"
         (pointerdown)="startThemeStudioControlsDrag($event, themeStudioControlsRef)"
       >
-        Theme Studio
+        {{ 'app.themeStudio.title' | translate }}
       </div>
 
       <button
@@ -122,7 +122,7 @@
         (click)="minimizeThemeStudio()"
         class="rounded-md border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80"
       >
-        Minimize
+        {{ 'app.themeStudio.minimize' | translate }}
       </button>
 
       <button
@@ -130,7 +130,7 @@
         (click)="closeThemeStudio()"
         class="rounded-md border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80"
       >
-        Close
+        {{ 'common.close' | translate }}
       </button>
     </div>
   </div>
@@ -138,8 +138,8 @@
   <div class="pointer-events-none absolute bottom-4 right-4 z-[80]">
     <div class="pointer-events-auto flex items-center gap-3 rounded-lg border border-border bg-card px-3 py-3 shadow-lg backdrop-blur">
       <div class="min-w-0">
-        <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-primary">Theme Studio</p>
-        <p class="mt-1 text-sm font-medium text-foreground">Minimized</p>
+        <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-primary">{{ 'app.themeStudio.title' | translate }}</p>
+        <p class="mt-1 text-sm font-medium text-foreground">{{ 'app.themeStudio.minimized' | translate }}</p>
       </div>
 
       <button
@@ -147,7 +147,7 @@
         (click)="reopenThemeStudio()"
         class="rounded-md bg-primary px-3 py-1.5 text-xs font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
       >
-        Re-open
+        {{ 'app.themeStudio.reopen' | translate }}
       </button>
 
       <button
@@ -155,7 +155,7 @@
         (click)="dismissMinimizedThemeStudio()"
         class="rounded-md border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:bg-secondary/80"
       >
-        Dismiss
+        {{ 'common.dismiss' | translate }}
       </button>
     </div>
   </div>