pinafore/routes/_components/search/AccountSearchResult.html

<SearchResult href="/accounts/{{account.id}}">
  <div class="search-result-account">
    <Avatar :account size="small" className="search-result-account-avatar"/>
    <div class="search-result-account-name">
      {{account.display_name || account.acct}}
    </div>
    <div class="search-result-account-username">
      {{'@' + account.acct}}
    </div>
    {{#if actions && actions.length}}
      <div class="search-result-account-buttons">
        {{#each actions as action}}
          <IconButton
            label="{{action.label}}"
            on:click="onButtonClick(event, action, account.id)"
            href="{{action.icon}}"
            big="true"
          />
        {{/each}}
      </div>
    {{/if}}
  </div>
</SearchResult>
<style>
  .search-result-account {
    display: grid;
    grid-template-areas:
      "avatar    name     buttons"
      "avatar    username buttons";
    grid-column-gap: 20px;
    grid-template-columns: max-content 1fr max-content;
    align-items: center;
  }
  :global(.search-result-account-avatar) {
    grid-area: avatar;
  }
  .search-result-account-name {
    grid-area: name;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.2em;
  }
  .search-result-account-username {
    grid-area: username;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--deemphasized-text-color);
  }
  .search-result-account-buttons {
    grid-area: buttons;
    display: flex;
  }
  :global(.search-result-account-buttons .icon-button) {
    margin-right: 20px;
  }
  :global(.search-result-account-buttons .icon-button:last-child) {
    margin-right: 0;
  }
  @media (max-width: 767px) {
    .search-result-account {
      grid-column-gap: 10px;
    }
    :global(.search-result-account-buttons .icon-button) {
      margin-right: 10px;
    }
  }
</style>
<script>
  import Avatar from '../Avatar.html'
  import SearchResult from './SearchResult.html'
  import IconButton from '../IconButton.html'

  export default {
    components: {
      Avatar,
      SearchResult,
      IconButton
    },
    methods: {
      onButtonClick (event, action, accountId) {
        event.preventDefault()
        event.stopPropagation()
        this.fire('click', {
          action,
          accountId
        })
      }
    }
  }
</script>