Toju/toju-app/src/app/app.html

<div
  appThemeNode="appRoot"
  class="workspace-bright-theme relative h-full overflow-hidden bg-background text-foreground"
>
  <div
    class="h-full min-h-0 min-w-0 overflow-hidden"
    [class.grid]="!isMobile()"
    [class.flex]="isMobile()"
    [ngStyle]="isMobile() ? null : appShellLayoutStyles()"
  >
    <aside
      appThemeNode="serversRail"
      class="min-h-0 shrink-0 overflow-hidden bg-transparent"
      [class.hidden]="hideAppServersRail()"
      [class.w-16]="showMobileAppServersRail()"
      [ngStyle]="isMobile() ? null : serversRailLayoutStyles()"
    >
      <app-servers-rail class="block h-full w-full" />
    </aside>

    <main
      appThemeNode="appWorkspace"
      class="relative flex min-h-0 min-w-0 flex-col overflow-hidden bg-background"
      [class.flex-1]="isMobile()"
      [ngStyle]="isMobile() ? null : appWorkspaceShellStyles()"
    >
      @if (!isMobile()) {
      <app-title-bar class="block shrink-0" />
      }

      <div class="relative min-h-0 flex-1 overflow-hidden">
        @if (isThemeStudioFullscreen()) {
        <div class="theme-studio-fullscreen-shell absolute inset-0 overflow-y-auto overflow-x-hidden bg-background">
          @if (themeStudioFullscreenComponent()) {
          <ng-container *ngComponentOutlet="themeStudioFullscreenComponent()" />
          } @else {
          <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()) {
        <div class="pointer-events-none absolute inset-x-0 top-0 z-20 px-4 pt-4">
          <div class="pointer-events-auto mx-auto w-full max-w-xl">
            <div class="relative rounded-xl border border-border/80 bg-card/95 px-4 py-3 shadow-lg backdrop-blur">
              <button
                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"
                [attr.aria-label]="'app.desktopUpdate.dismissAriaLabel' | translate"
              >
                <ng-icon
                  name="lucideX"
                  class="h-4 w-4"
                />
              </button>

              <div class="pr-10">
                <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">
                  @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">{{ 'app.desktopUpdate.downloadedMessage' | translate }}</p>

              <div class="mt-3 flex flex-wrap gap-2">
                <button
                  type="button"
                  (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"
                >
                  {{ 'app.desktopUpdate.updateSettings' | translate }}
                </button>

                <button
                  type="button"
                  (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"
                >
                  {{ 'app.desktopUpdate.restartNow' | translate }}
                </button>
              </div>
            </div>
          </div>
        </div>
        }

        <div class="absolute inset-0 min-w-0 overflow-x-hidden overflow-y-auto">
          <router-outlet />
        </div>
        }
      </div>
    </main>
  </div>

  @if (isMobile() && directCalls.mobileOverlaySession(); as call) {
  <div class="absolute inset-0 z-[70]">
    <app-private-call
      class="block h-full w-full"
      [callIdInput]="call.callId"
      [overlayMode]="true"
    />
  </div>
  } @if (isThemeStudioFullscreen()) {
  <div
    #themeStudioControlsRef
    class="pointer-events-none absolute z-[80]"
    [ngStyle]="themeStudioControlsPositionStyles()"
  >
    <div class="pointer-events-auto flex items-center gap-2 rounded-lg border border-border bg-card px-2 py-2 shadow-lg backdrop-blur">
      <div
        class="rounded-md border border-border bg-secondary px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground select-none cursor-grab"
        [class.cursor-grabbing]="isDraggingThemeStudioControls()"
        (pointerdown)="startThemeStudioControlsDrag($event, themeStudioControlsRef)"
      >
        {{ 'app.themeStudio.title' | translate }}
      </div>

      <button
        type="button"
        (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"
      >
        {{ 'app.themeStudio.minimize' | translate }}
      </button>

      <button
        type="button"
        (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"
      >
        {{ 'common.close' | translate }}
      </button>
    </div>
  </div>
  } @if (isThemeStudioMinimized()) {
  <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">{{ 'app.themeStudio.title' | translate }}</p>
        <p class="mt-1 text-sm font-medium text-foreground">{{ 'app.themeStudio.minimized' | translate }}</p>
      </div>

      <button
        type="button"
        (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"
      >
        {{ 'app.themeStudio.reopen' | translate }}
      </button>

      <button
        type="button"
        (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"
      >
        {{ 'common.dismiss' | translate }}
      </button>
    </div>
  </div>
  } @if (!isThemeStudioFullscreen() && !isDirectMessageRoute()) {
  <app-floating-voice-controls />
  }
  <app-settings-modal />
  <app-incoming-call-modal />
  <app-screen-share-source-picker />
  <app-native-context-menu />
  <app-debug-console [showLauncher]="false" />
  <app-theme-picker-overlay />
</div>