TMP: incomplete 3 columns grid view (need refactoring / do not copy many code in the end!)

components/status/StatusCardOnlyMedia.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+
+const props = withDefaults(
+  defineProps<{
+    status: mastodon.v1.Status
+    actions?: boolean
+    context?: mastodon.v2.FilterContext
+    hover?: boolean
+    inNotification?: boolean
+    isPreview?: boolean
+
+    // If we know the prev and next status in the timeline, we can simplify the card
+    older?: mastodon.v1.Status
+    newer?: mastodon.v1.Status
+    // Manual overrides
+    hasOlder?: boolean
+    hasNewer?: boolean
+
+    // When looking into a detailed view of a post, we can simplify the replying badges
+    // to the main expanded post
+    main?: mastodon.v1.Status
+  }>(),
+  { actions: true },
+)
+
+const status = computed(() => {
+  if (props.status.reblog && (!props.status.content || props.status.content === props.status.reblog.content))
+    return props.status.reblog
+  return props.status
+})
+
+const isDM = computed(() => status.value.visibility === 'direct')
+</script>
+
+<template>
+  <StatusMediaWithoutContainer
+    :status="status"
+    :newer="newer"
+    :context="context"
+    :is-preview="isPreview"
+    :in-notification="inNotification"
+    mb2 :class="{ 'mt-2 mb1': isDM }"
+  />
+</template>

components/status/StatusMediaWithoutContainer.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+
+const { status, isPreview = false } = defineProps<{
+  status: mastodon.v1.Status | mastodon.v1.StatusEdit
+  fullSize?: boolean
+  isPreview?: boolean
+}>()
+
+const gridColumnNumber = computed(() => {
+  const num = status.mediaAttachments.length
+  if (num <= 1)
+    return 1
+  else if (num <= 4)
+    return 2
+  else
+    return 3
+})
+</script>
+
+<template>
+  <!--  <div class="status-media-container"> -->
+  <template v-for="attachment of status.mediaAttachments" :key="attachment.id">
+    <StatusAttachment
+      :attachment="attachment"
+      :attachments="status.mediaAttachments"
+      :full-size="fullSize"
+      w-full
+      h-full
+      :is-preview="isPreview"
+    />
+  </template>
+<!--  </div> -->
+</template>
+
+<style lang="postcss">
+.status-media-container {
+  --grid-cols: v-bind(gridColumnNumber);
+  display: grid;
+  grid-template-columns: repeat(var(--grid-cols, 1), 1fr);
+  --at-apply: gap-2;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+</style>

components/timeline/TimelineMediaPaginator.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+// @ts-expect-error missing types
+import { DynamicScrollerItem } from 'vue-virtual-scroller'
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+import type { mastodon } from 'masto'
+
+const { paginator, stream, account, buffer = 10, endMessage = true } = defineProps<{
+  paginator: mastodon.Paginator<mastodon.v1.Status[], mastodon.rest.v1.ListAccountStatusesParams>
+  stream?: mastodon.streaming.Subscription
+  context?: mastodon.v2.FilterContext
+  account?: mastodon.v1.Account
+  preprocess?: (items: mastodon.v1.Status[]) => mastodon.v1.Status[]
+  buffer?: number
+  endMessage?: boolean | string
+}>()
+
+const { formatNumber } = useHumanReadableNumber()
+const virtualScroller = usePreferences('experimentalVirtualScroller')
+
+const showOriginSite = computed(() =>
+  account && account.id !== currentUser.value?.account.id && getServerName(account) !== currentServer.value,
+)
+</script>
+
+<template>
+  <CommonPaginator grid grid-cols-3 gap-2 v-bind="{ paginator, stream, preprocess, buffer, endMessage }" :virtual-scroller="virtualScroller">
+    <template #updater="{ number, update }">
+      <button id="elk_show_new_items" py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="update">
+        {{ $t('timeline.show_new_items', number, { named: { v: formatNumber(number) } }) }}
+      </button>
+    </template>
+    <template #default="{ item, older, newer, active }">
+      <template v-if="virtualScroller">
+        <DynamicScrollerItem :item="item" :active="active" tag="article">
+          <StatusCardOnlyMedia :status="item" :context="context" :older="older" :newer="newer" />
+        </DynamicScrollerItem>
+      </template>
+      <template v-else>
+        <StatusCardOnlyMedia :status="item" :context="context" :older="older" :newer="newer" />
+      </template>
+    </template>
+    <template v-if="context === 'account' " #done="{ items }">
+      <div
+        v-if="showOriginSite || items.length === 0"
+        p5 text-secondary text-center flex flex-col items-center gap1
+      >
+        <template v-if="showOriginSite">
+          <span italic>{{ $t('timeline.view_older_posts') }}</span>
+          <NuxtLink
+            :href="account!.url" target="_blank" external
+            flex="~ gap-1" items-center text-primary
+            hover="underline text-primary-active"
+          >
+            <div i-ri:external-link-fill />
+            {{ $t('menu.open_in_original_site') }}
+          </NuxtLink>
+        </template>
+        <span v-else-if="items.length === 0">No posts here!</span>
+      </div>
+    </template>
+  </CommonPaginator>
+</template>

pages/[[server]]/@[account]/index/media.vue

@@ -19,6 +19,6 @@ if (account) {
 <template>
   <div>
     <AccountTabs />
-    <TimelinePaginator :paginator="paginator" :preprocess="reorderedTimeline" context="account" :account="account" />
+    <TimelineMediaPaginator :paginator="paginator" :preprocess="reorderedTimeline" context="account" :account="account" />
   </div>
 </template>