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

<div
  appThemeNode="appRoot"
  class="workspace-bright-theme relative h-screen overflow-hidden bg-background text-foreground"
>
  <div
    class="grid h-full min-h-0 min-w-0 overflow-hidden"
    [ngStyle]="appShellLayoutStyles()"
  >
    <aside
      appThemeNode="serversRail"
      class="min-h-0 overflow-hidden bg-transparent"
      [class.hidden]="isThemeStudioFullscreen()"
      [ngStyle]="serversRailLayoutStyles()"
    >
      <app-servers-rail class="block h-full" />
    </aside>

    <main
      appThemeNode="appWorkspace"
      class="relative flex min-h-0 min-w-0 flex-col overflow-hidden bg-background"
      [ngStyle]="appWorkspaceShellStyles()"
    >
      <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">Loading Theme Studio…</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"
                aria-label="Dismiss update notice"
              >
                <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">Update Ready</p>
                <p class="mt-1 text-sm font-semibold text-foreground">
                  Restart to install {{ desktopUpdateState().targetVersion || 'the latest update' }}
                </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>

              <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"
                >
                  Update settings
                </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"
                >
                  Restart now
                </button>
              </div>
            </div>
          </div>
        </div>
        }

        <div class="absolute inset-0 overflow-auto">
          <router-outlet />
        </div>
        }
      </div>
    </main>
  </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)"
      >
        Theme Studio
      </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"
      >
        Minimize
      </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"
      >
        Close
      </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">Theme Studio</p>
        <p class="mt-1 text-sm font-medium text-foreground">Minimized</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"
      >
        Re-open
      </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"
      >
        Dismiss
      </button>
    </div>
  </div>
  } @if (!isThemeStudioFullscreen()) {
  <app-floating-voice-controls />
  }
  <app-settings-modal />
  <app-screen-share-source-picker />
  <app-debug-console [showLauncher]="false" />
  <app-theme-picker-overlay />
</div>