Portfolio/src/app/shared/terminal/terminal-dock.html

<div class="terminal-dock" [class.is-open]="open()" [class.is-maximized]="maximized()">
  <button
    #trigger
    type="button"
    class="terminal-dock-trigger"
    [attr.aria-expanded]="open()"
    [attr.aria-controls]="open() ? panelId : null"
    [attr.aria-label]="copy().triggerAccessibleName"
    [attr.title]="triggerTooltip()"
    [hidden]="open()"
    (click)="onTriggerClick()"
  >
    <span>{{ copy().triggerLabel }}</span>
    <kbd>{{ shortcutHint() }}</kbd>
  </button>

  @if (open()) {
    <section
      class="terminal-dock-panel"
      [id]="panelId"
      tabindex="-1"
      [attr.aria-label]="copy().panelLabel"
      (keydown)="onPanelKeydown($event)"
    >
      <div class="terminal-dock-toolbar cluster">
        <p class="terminal-dock-title">{{ copy().panelLabel }}</p>
        <div class="terminal-dock-actions cluster">
          <button
            type="button"
            class="terminal-dock-control"
            [attr.aria-label]="sizeLabel()"
            [attr.title]="sizeTooltip()"
            [attr.aria-pressed]="maximized()"
            (click)="toggleMaximized()"
          >
            <span aria-hidden="true">{{ maximized() ? '▭' : '▢' }}</span>
          </button>
          <button
            type="button"
            class="terminal-dock-control"
            [attr.aria-label]="copy().collapseLabel"
            [attr.title]="copy().collapseTooltip"
            (click)="collapse()"
          >
            <span aria-hidden="true">–</span>
          </button>
        </div>
      </div>

      <div
        #outputLog
        class="terminal-dock-session"
        [id]="logId"
        role="log"
        aria-live="polite"
        aria-atomic="false"
        [attr.aria-label]="copy().outputLabel"
        (scroll)="onSessionScroll()"
      >
        @for (line of log(); track line.id) {
          <p [class.echo]="line.kind === 'echo'">{{ line.text }}</p>
        }
        <form class="terminal-dock-form" (submit)="onSubmit($event)">
          <label class="terminal-dock-prompt" [attr.for]="inputId">
            <span aria-hidden="true">{{ copy().prompt }}</span>
            <span class="visually-hidden">{{ copy().inputLabel }}</span>
          </label>
          <input
            #commandInput
            [id]="inputId"
            type="text"
            autocomplete="off"
            autocapitalize="off"
            spellcheck="false"
            [attr.placeholder]="copy().inputPlaceholder"
            [value]="query()"
            (input)="onQueryInput($event)"
            (keydown)="onInputKeydown($event)"
          />
        </form>
      </div>
    </section>
  }
</div>