pinafore/routes/_components/compose/ComposeAutosuggestionList.html

<ul class="compose-autosuggest-list">
  {{#each items as item, i}}
  <li class="compose-autosuggest-list-item">
    <button class="compose-autosuggest-list-button {{i === selected ? 'selected' : ''}}"
            tabindex="0"
            on:click="fire('click', item)">
      <div class="compose-autosuggest-list-grid">
        {{#if type === 'account'}}
        <Avatar
          className="compose-autosuggest-list-item-avatar"
          size="small"
          account={{item}}
        />
        <span class="compose-autosuggest-list-display-name">
            {{item.display_name || item.acct}}
        </span>
        <span class="compose-autosuggest-list-username">
            {{'@' + item.acct}}
        </span>
        {{else}}
          <img src={{$autoplayGifs ? item.url : item.static_url}}
               class="compose-autosuggest-list-item-icon"
               alt="{{':' + item.shortcode + ':'}}"
          />
          <span class="compose-autosuggest-list-display-name">
              {{':' + item.shortcode + ':'}}
          </span>
        {{/if}}
      </div>
    </button>
  </li>
  {{/each}}
</ul>
<style>
  .compose-autosuggest-list {
    list-style: none;
    width: 100%;
    border-radius: 2px;
    box-sizing: border-box;
    border: 1px solid var(--compose-autosuggest-outline);
  }
  .compose-autosuggest-list-item {
    border-bottom: 1px solid var(--compose-autosuggest-outline);
    display: flex;
  }
  .compose-autosuggest-list-item:last-child {
    border-bottom: none;
  }
  .compose-autosuggest-list-button {
    padding: 10px;
    background: var(--settings-list-item-bg);
    border: none;
    margin: 0;
    flex: 1;
  }
  .compose-autosuggest-list-grid {
    display: grid;
    width: 100%;
    grid-template-areas: "icon     display-name"
                         "icon     username";
    grid-template-columns: min-content 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 5px;
  }
  :global(.compose-autosuggest-list-item-avatar) {
    grid-area: icon;
  }
  .compose-autosuggest-list-item-icon {
    grid-area: icon;
    width: 48px;
    height: 48px;
    object-fit: contain;
  }
  .compose-autosuggest-list-display-name {
    grid-area: display-name;
    font-size: 1.1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    text-align: left;
  }
  .compose-autosuggest-list-username {
    grid-area: username;
    font-size: 1em;
    color: var(--deemphasized-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
  }
  .compose-autosuggest-list-button:hover, .compose-autosuggest-list-button.selected {
    background: var(--compose-autosuggest-item-hover);
  }
  .compose-autosuggest-list-button:active {
    background: var(--compose-autosuggest-item-active);
  }
</style>
<script>
  import Avatar from '../Avatar.html'
  import { store } from '../../_store/store'

  export default {
    store: () => store,
    components: {
      Avatar
    }
  }
</script>