open-vault/ui/app/templates/components/diff-version-selector.hbs

<Toolbar>
  <div class="version-diff-toolbar" data-test-version-diff-toolbar>
    {{! Left side version }}
    <BasicDropdown @class="popup-menu" @horizontalPosition="auto-right" @verticalPosition="below" as |D|>
      <D.Trigger
        data-test-popup-menu-trigger="left-version"
        class={{concat "toolbar-link" (if D.isOpen " is-active")}}
        @htmlTag="button"
      >
        Version
        {{or this.leftSideVersionSelected @model.currentVersion}}
        <Chevron @direction="down" @isButton={{true}} />
      </D.Trigger>
      <D.Content @defaultClass="popup-menu-content">
        <nav class="box menu" aria-label="version">
          <ul class="menu-list">
            {{#each (reverse @model.versions) as |leftSideSecretVersion|}}
              <li class="action" data-test-leftSide-version={{leftSideSecretVersion.version}}>
                <button
                  type="button"
                  class="link"
                  {{on "click" (fn this.selectVersion leftSideSecretVersion.version D.actions "left")}}
                >
                  Version
                  {{leftSideSecretVersion.version}}
                  {{#if
                    (and
                      (eq leftSideSecretVersion.version (or this.leftSideVersionSelected @model.currentVersion))
                      (not leftSideSecretVersion.destroyed)
                      (not leftSideSecretVersion.deleted)
                    )
                  }}
                    <Icon @name="check-circle" class="has-text-success is-pulled-right" />
                  {{else if leftSideSecretVersion.destroyed}}
                    <Icon @name="x-square" class="has-text-danger is-pulled-right" />
                  {{else if leftSideSecretVersion.deleted}}
                    <Icon @name="x-square" class="has-text-grey is-pulled-right" />
                  {{/if}}
                </button>
              </li>
            {{/each}}
          </ul>
        </nav>
      </D.Content>
    </BasicDropdown>
    {{! Right side version }}
    <BasicDropdown @class="popup-menu" @horizontalPosition="right" @verticalPosition="below" as |D|>
      <D.Trigger
        class={{concat "toolbar-link" (if D.isOpen " is-active")}}
        @htmlTag="button"
        data-test-popup-menu-trigger="right-version"
      >
        Version
        {{or this.rightSideVersionSelected this.rightSideVersionInit}}
        <Chevron @direction="down" @isButton={{true}} />
      </D.Trigger>
      <D.Content @defaultClass="popup-menu-content">
        <nav class="box menu" aria-label="versions to diff">
          <ul class="menu-list">
            {{#each (reverse @model.versions) as |rightSideSecretVersion|}}
              <li class="action">
                <button
                  type="button"
                  class="link"
                  {{on "click" (fn this.selectVersion rightSideSecretVersion.version D.actions "right")}}
                  data-test-rightSide-version={{rightSideSecretVersion.version}}
                >
                  Version
                  {{rightSideSecretVersion.version}}
                  {{#if
                    (and
                      (eq rightSideSecretVersion.version (or this.rightSideVersionSelected this.rightSideVersionInit))
                      (not rightSideSecretVersion.destroyed)
                      (not rightSideSecretVersion.deleted)
                    )
                  }}
                    <Icon @name="check-circle" class="has-text-success is-pulled-right" />
                  {{else if rightSideSecretVersion.destroyed}}
                    <Icon @name="x-square" class="has-text-danger is-pulled-right" />
                  {{else if rightSideSecretVersion.deleted}}
                    <Icon @name="x-square" class="has-text-grey is-pulled-right" />
                  {{/if}}
                </button>
              </li>
            {{/each}}
          </ul>
        </nav>
      </D.Content>
    </BasicDropdown>
    {{! Status }}
    {{#if this.statesMatch}}
      <div class="diff-status">
        <span>States match</span>
        <Icon @name="check-circle-fill" class="has-text-success" />
      </div>
    {{/if}}
  </div>
</Toolbar>

<div class="form-section visual-diff">
  <pre>{{sanitized-html this.visualDiff}}</pre>
</div>