Added new MeetStatus component for the meet timeline (/federated)

The idea is to make items 100% viewport height and implement a sliding
effect which will show the persons profile (which profile shows just images)
The way to go to the next person is to dismiss (kind of like a NOPE in Tinder)

src/routes/_components/status/MeetStatus.html

@@ -0,0 +1,270 @@
+<article id={elementId}
+         class={className}
+         tabindex="0"
+         aria-posinset={index + 1}
+         aria-setsize={length}
+         aria-label={ariaLabel}
+         style="background: url({avatarHeader}"
+         on:recalculateHeight
+         ref:article
+>
+  <div class="meet-content">
+    <StatusSidebar {...params} />
+    {#if content && (showContent || preloadHiddenContent)}
+      <StatusContent {...params} shown={showContent}/>
+    {/if}
+  </div>
+  <div class="meet-footer">
+    <StatusAuthorName {...params} />
+    <StatusAuthorHandle {...params} />
+    <StatusRelativeDate {...params} {...timestampParams} />
+    {#if showCard }
+      <StatusCard {...params} />
+    {/if}
+  </div>
+</article>
+
+<script>
+  import StatusSidebar from './StatusSidebar.html'
+  import StatusAuthorName from './StatusAuthorName.html'
+  import StatusAuthorHandle from './StatusAuthorHandle.html'
+  import StatusRelativeDate from './StatusRelativeDate.html'
+  import StatusCard from './StatusCard.html'
+  import StatusContent from './StatusContent.html'
+  import { store } from '../../_store/store'
+  import { goto } from '../../../../__sapper__/client'
+  import { registerClickDelegate } from '../../_utils/delegate'
+  import { classname } from '../../_utils/classname'
+  import { checkDomAncestors } from '../../_utils/checkDomAncestors'
+  import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
+  import { getAccountAccessibleName } from '../../_a11y/getAccountAccessibleName'
+  import { getAccessibleLabelForStatus } from '../../_a11y/getAccessibleLabelForStatus'
+  import { formatTimeagoDate } from '../../_intl/formatTimeagoDate'
+  import { measureText } from '../../_utils/measureText'
+  import { LONG_POST_LENGTH, LONG_POST_TEXT } from '../../_static/statuses'
+  import { absoluteDateFormatter } from '../../_utils/formatters'
+  import { composeNewStatusMentioning } from '../../_actions/mention'
+  import { createStatusOrNotificationUuid } from '../../_utils/createStatusOrNotificationUuid'
+  import { addEmojiTooltips } from '../../_utils/addEmojiTooltips'
+  import { formatIntl } from '../../_utils/formatIntl'
+
+  const INPUT_TAGS = new Set(['a', 'button', 'input', 'textarea', 'label'])
+  const isUserInputElement = node => INPUT_TAGS.has(node.localName)
+  const isToolbar = node => node.classList.contains('status-toolbar')
+  const isStatusArticle = node => node.classList.contains('status-article')
+
+  export default {
+    oncreate () {
+      const { elementId, showContent } = this.get()
+      const { disableTapOnStatus } = this.store.get()
+      if (typeof window !== "undefined") {
+        if (!window.location.pathname.startsWith('/statuses/')) {
+          registerClickDelegate(this, elementId, (e) => this.onClickOrKeydown(e))
+        }
+      }
+      if (!showContent) {
+        scheduleIdleTask(() => {
+          // Perf optimization: lazily load the StatusContent when the user is idle so that
+          // it's fast when they click the "show more" button
+          this.set({ preloadHiddenContent: true })
+        })
+      }
+      scheduleIdleTask(() => addEmojiTooltips(this.refs.article))
+    },
+    components: {
+      StatusSidebar,
+      StatusAuthorName,
+      StatusAuthorHandle,
+      StatusRelativeDate,
+      StatusContent,
+      StatusCard
+    },
+    data: () => ({
+      notification: undefined,
+      replyVisibility: undefined,
+      preloadHiddenContent: false,
+      enableShortcuts: null
+    }),
+    store: () => store,
+    methods: {
+      onClickOrKeydown (e) {
+        const { type, keyCode, target } = e
+
+        const isClick = type === 'click'
+        const isEnter = type === 'keydown' && keyCode === 13
+        if (!isClick && !isEnter) {
+          return false
+        }
+        if (checkDomAncestors(target, isUserInputElement, isStatusArticle)) {
+          // this element or any ancestors up to the status-article element is
+          // a user input element
+          return false
+        }
+        if (checkDomAncestors(target, isToolbar, isStatusArticle)) {
+          // this element or any of its ancestors is the toolbar
+          return false
+        }
+
+        this.open()
+        return true
+      },
+      open () {
+        const { originalStatusId } = this.get()
+        goto(`/statuses/${originalStatusId}`)
+      },
+      openAuthorProfile () {
+        const { accountForShortcut } = this.get()
+        goto(`/accounts/${accountForShortcut.id}`)
+      },
+      async mentionAuthor () {
+        const { accountForShortcut } = this.get()
+        await composeNewStatusMentioning(accountForShortcut)
+      }
+    },
+    computed: {
+      originalStatus: ({ status }) => status.reblog ? status.reblog : status,
+      originalStatusId: ({ originalStatus }) => originalStatus.id,
+      statusId: ({ status }) => status.id,
+      notificationId: ({ notification }) => notification && notification.id,
+      account: ({ notification, status }) => (
+        (notification && notification.account) || status.account
+      ),
+      accountId: ({ account }) => account.id,
+      avatarHeader: ({ account }) => account.header,
+      originalAccount: ({ originalStatus }) => originalStatus.account,
+      originalAccountId: ({ originalAccount }) => originalAccount.id,
+      accountForShortcut: ({ originalAccount, notification }) => notification ? notification.account : originalAccount,
+      visibility: ({ originalStatus }) => originalStatus.visibility,
+      plainTextContent: ({ originalStatus }) => originalStatus.plainTextContent || '',
+      plainTextContentOverLength: ({ plainTextContent }) => (
+        // measureText() is expensive, so avoid doing it when possible.
+        // Also measureText() typically only makes text shorter, not longer, so we can measure the raw length
+        // as a shortcut. (The only case where it makes text longer is with short URLs which get expanded to a longer
+        // placeholder.) This isn't 100% accurate, but we don't need perfect accuracy here because this is just
+        // to show a "long post" content warning.
+        plainTextContent.length > LONG_POST_LENGTH && measureText(plainTextContent) > LONG_POST_LENGTH
+      ),
+      spoilerText: ({ originalStatus, plainTextContentOverLength }) => (
+        originalStatus.spoiler_text || (plainTextContentOverLength && LONG_POST_TEXT)
+      ),
+      inReplyToId: ({ originalStatus }) => originalStatus.in_reply_to_id,
+      uuid: ({ $currentInstance, timelineType, timelineValue, notificationId, statusId }) => (
+        createStatusOrNotificationUuid($currentInstance, timelineType, timelineValue, notificationId, statusId)
+      ),
+      elementId: ({ uuid }) => uuid,
+      shortcutScope: ({ elementId }) => elementId,
+      isStatusInNotification: ({ originalStatusId, notification }) => (
+        notification && notification.status &&
+          notification.type !== 'mention' && notification.status.id === originalStatusId
+      ),
+      spoilerShown: ({ $spoilersShown, uuid }) => !!$spoilersShown[uuid],
+      replyShown: ({ $repliesShown, uuid }) => !!$repliesShown[uuid],
+      showCard: ({ originalStatus, isStatusInNotification, showMedia, $hideCards }) => (
+        !$hideCards &&
+        !isStatusInNotification &&
+        !showMedia &&
+        originalStatus.card &&
+        originalStatus.card.title
+      ),
+      showPoll: ({ originalStatus }) => (
+        originalStatus.poll
+      ),
+      showMedia: ({ originalStatus, isStatusInNotification }) => (
+        !isStatusInNotification &&
+        originalStatus.media_attachments &&
+        originalStatus.media_attachments.length
+      ),
+      numFavs: ({ $disableFavCounts, overrideNumFavs, originalStatus }) => {
+        if ($disableFavCounts) {
+          return 0
+        }
+        if (typeof overrideNumFavs === 'number') {
+          return overrideNumFavs
+        }
+        return originalStatus.favourites_count || 0
+      },
+      favoritesLabel: ({ $disableFavCounts, numFavs }) => {
+        if ($disableFavCounts) {
+          return 'intl.favoriteCountsHidden'
+        }
+        return formatIntl('intl.favoritedTimes', { count: numFavs })
+      },
+      originalAccountEmojis: ({ originalAccount }) => (originalAccount.emojis || []),
+      originalStatusEmojis: ({ originalStatus }) => (originalStatus.emojis || []),
+      originalAccountDisplayName: ({ originalAccount }) => (originalAccount.display_name || originalAccount.username),
+      originalAccountAccessibleName: ({ originalAccount, $omitEmojiInDisplayNames }) => {
+        return getAccountAccessibleName(originalAccount, $omitEmojiInDisplayNames)
+      },
+      createdAtDate: ({ originalStatus }) => originalStatus.created_at,
+      createdAtDateTS: ({ createdAtDate }) => new Date(createdAtDate).getTime(),
+      absoluteFormattedDate: ({ createdAtDateTS }) => absoluteDateFormatter.format(createdAtDateTS),
+      timeagoFormattedDate: ({ createdAtDateTS, $now }) => formatTimeagoDate(createdAtDateTS, $now),
+      reblog: ({ status }) => status.reblog,
+      ariaLabel: ({
+        originalAccount, account, plainTextContent, timeagoFormattedDate, spoilerText,
+        showContent, reblog, notification, visibility, $omitEmojiInDisplayNames, $disableLongAriaLabels,
+        showMedia, showPoll
+      }) => (
+        getAccessibleLabelForStatus(originalAccount, account, plainTextContent,
+          timeagoFormattedDate, spoilerText, showContent,
+          reblog, notification, visibility, $omitEmojiInDisplayNames, $disableLongAriaLabels,
+          showMedia, showPoll
+        )
+      ),
+      showHeader: ({ notification, status, timelineType }) => (
+        (notification && ['reblog', 'favourite', 'poll'].includes(notification.type)) ||
+        status.reblog ||
+        timelineType === 'pinned'
+      ),
+      className: ({ visibility, timelineType, $underlineLinks, $disableTapOnStatus }) => (classname(
+        'status-article',
+        'shortcut-list-item',
+        'focus-fix',
+        timelineType !== 'direct' && visibility === 'direct' && 'status-direct',
+        timelineType !== 'search' && 'status-in-timeline',
+        $underlineLinks && 'underline-links'
+      )),
+      content: ({ originalStatus }) => originalStatus.content || '',
+      showContent: ({ spoilerText, spoilerShown }) => !spoilerText || spoilerShown,
+      // These timestamp params may change every 10 seconds due to now() polling, so keep them
+      // separate from the generic `params` list to avoid costly recomputes.
+      timestampParams: ({ createdAtDate, createdAtDateTS, timeagoFormattedDate, absoluteFormattedDate }) => ({
+        createdAtDate,
+        createdAtDateTS,
+        timeagoFormattedDate,
+        absoluteFormattedDate
+      }),
+      // This params list deliberately does *not* include `spoilersShown` or `replyShown`, because these
+      // change frequently and would therefore cause costly recomputes if included here.
+      // The main goal here is to avoid typing by passing as many params as possible to child components.
+      params: ({
+        notification, notificationId, status, statusId, timelineType,
+        account, accountId, uuid, isStatusInNotification,
+        originalAccount, originalAccountId, visibility,
+        replyVisibility, spoilerText, originalStatus, originalStatusId, inReplyToId,
+        enableShortcuts, shortcutScope, originalStatusEmojis
+      }) => ({
+        notification,
+        notificationId,
+        status,
+        statusId,
+        timelineType,
+        account,
+        accountId,
+        uuid,
+        isStatusInNotification,
+        originalAccount,
+        originalAccountId,
+        visibility,
+        replyVisibility,
+        spoilerText,
+        originalStatus,
+        originalStatusId,
+        inReplyToId,
+        enableShortcuts,
+        shortcutScope,
+        originalStatusEmojis
+      })
+    }
+  }
+</script>

src/routes/_components/timeline/MeetStatusVirtualListItem.html

@@ -0,0 +1,17 @@
+<MeetStatus status={virtualProps.status}
+        timelineType={virtualProps.timelineType}
+        timelineValue={virtualProps.timelineValue}
+        focusSelector={virtualProps.focusSelector}
+        enableShortcuts={true}
+        index={virtualIndex}
+        length={virtualLength}
+        on:recalculateHeight />
+<script>
+  import MeetStatus from '../status/MeetStatus.html'
+
+  export default {
+    components: {
+      MeetStatus
+    }
+  }
+</script>

src/routes/_components/timeline/Timeline.html

@@ -34,6 +34,7 @@
   import { importVirtualList } from '../../_utils/asyncModules/importVirtualList'
   import { importList } from '../../_utils/asyncModules/importList'
   import { importStatusVirtualListItem } from '../../_utils/asyncModules/importStatusVirtualListItem'
+  import { importMeetStatusVirtualListItem } from '../../_utils/asyncModules/importMeetStatusVirtualListItem'
   import { importNotificationVirtualListItem } from '../../_utils/asyncModules/importNotificationVirtualListItem'
   import { timelines } from '../../_static/timelines'
   import {
@@ -78,7 +79,7 @@
             : importVirtualList(),
           timelineType === 'notifications'
             ? importNotificationVirtualListItem()
-            : importStatusVirtualListItem()
+            : ( timelineType === 'federated' ? importMeetStatusVirtualListItem() :  importStatusVirtualListItem())
         ]).then(results => ({
           listComponent: results[0],
           listItemComponent: results[1]

src/routes/_utils/asyncModules/importMeetStatusVirtualListItem.js

@@ -0,0 +1,3 @@
+export const importMeetStatusVirtualListItem = () => import(
+  /* webpackChunkName: 'MeetStatusVirtualListItem.html' */ '../../_components/timeline/MeetStatusVirtualListItem.html'
+).then(mod => mod.default)

src/scss/themes/ozark.scss

@@ -196,6 +196,43 @@ main {
   border: none !important;
 }
 
+div.main-content.meet {
+
+  div.virtual-list-item {
+    height: 100vh;
+
+    div.meet-content {
+      background-image: linear-gradient(transparent, #000000bf);
+
+      a.status-sidebar > img.avatar {
+        width: 10em;
+        height: 10em;
+      }
+      div.status-content {
+        color: #fff;
+      }
+    }
+
+    div.meet-footer {
+      position: absolute;
+      bottom: 0;
+      display: flex;
+      width: 100%;
+      height: 4em;
+      padding: 0 1em;
+      background-color: #000000d4;
+
+      a {
+        color: #fff !important;
+      }
+      span.status-author-handle, time {
+        color: #cecece !important;
+      }
+    }
+
+  }
+}
+
 div.main-content.chat {
 
   background: var(--main-bg);

static/fedilove-no-react.js

@@ -323,6 +323,9 @@ function fedilove_customization() {
     else if (window.location.pathname == '/direct') {
         $('div.main-content').addClass('direct');
     }
+    else if (window.location.pathname == '/federated') {
+        $('div.main-content').addClass('meet');
+    }
     else if (window.location.pathname.startsWith('/notifications/mentions')) {
         $('nav.notification-filters li > a.focus-fix').attr('onclick', 'return false;');
     }