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="onClick(event, 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">
            <AccountDisplayName account={item} />
        </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'
  import AccountDisplayName from '../profile/AccountDisplayName.html'

  export default {
    store: () => store,
    methods: {
      onClick (event, item) {
        event.preventDefault()
        event.stopPropagation()
        this.fire('click', item)
      }
    },
    components: {
      Avatar,
      AccountDisplayName
    }
  }
</script>