<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; } .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>