pinafore/routes/_components/status/Notification.html

{{#if notification.type === 'mention' || notification.type === 'reblog' || notification.type === 'favourite'}}
  <Status :index :length :timelineType :timelineValue
          status="{{notification.status}}"
          :notification
          on:recalculateHeight
  />
{{else}}
  <article class="notification-article"
           tabindex="0"
           aria-posinset="{{index}}" aria-setsize="{{length}}"
  >
    <div class="follow-notification-offset">
      <StatusHeader :notification :notificationId :status :statusId :timelineType
                    :account :accountId :uuid isStatusInNotification="true" />
    </div>
  </article>
{{/if}}
<style>
  .notification-article {
    width: 560px;
    max-width: calc(100vw - 40px);
    padding: 10px 20px;
    border-bottom: 1px solid var(--main-border);
  }
  .follow-notification-offset {
    margin-left: 58px; /* offset for avatar, 48px + 10px */
  }
  @media (max-width: 767px) {
    .notification-article {
      padding: 10px 10px;
      max-width: calc(100vw - 20px);
      width: 580px;
    }
  }
</style>
<script>
  import Status from './Status.html'
  import StatusHeader from './StatusHeader.html'
  import { store } from '../../_store/store'

  export default {
    components: {
      Status,
      StatusHeader
    },
    store: () => store,
    computed: {
      account: (notification) => notification.account,
      accountId: (account) => account.id,
      notificationId: (notification) => notification.id,
      status: (notification) => notification.status,
      statusId: (status) => status && status.id,
      uuid: ($currentInstance, timelineType, timelineValue, notificationId, statusId) => {
        return `${$currentInstance}/${timelineType}/${timelineValue}/${notificationId}/${statusId || ''}`
      },
    }
  }
</script>