From f738022e89c025dd7ffd24f45f08e3071ebc6c94 Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Mon, 15 Apr 2024 01:01:51 +0900
Subject: [PATCH] TMP: incomplete 3 columns grid view (need refactoring / do
 not copy many code in the end!)

---
 components/status/StatusCardOnlyMedia.vue     | 45 ++++++++++++++
 .../status/StatusMediaWithoutContainer.vue    | 46 ++++++++++++++
 .../timeline/TimelineMediaPaginator.vue       | 62 +++++++++++++++++++
 pages/[[server]]/@[account]/index/media.vue   |  2 +-
 4 files changed, 154 insertions(+), 1 deletion(-)
 create mode 100644 components/status/StatusCardOnlyMedia.vue
 create mode 100644 components/status/StatusMediaWithoutContainer.vue
 create mode 100644 components/timeline/TimelineMediaPaginator.vue

diff --git a/components/status/StatusCardOnlyMedia.vue b/components/status/StatusCardOnlyMedia.vue
new file mode 100644
index 00000000..1597e65c
--- /dev/null
+++ b/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>
diff --git a/components/status/StatusMediaWithoutContainer.vue b/components/status/StatusMediaWithoutContainer.vue
new file mode 100644
index 00000000..ef14494e
--- /dev/null
+++ b/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>
diff --git a/components/timeline/TimelineMediaPaginator.vue b/components/timeline/TimelineMediaPaginator.vue
new file mode 100644
index 00000000..51aaf6a7
--- /dev/null
+++ b/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>
diff --git a/pages/[[server]]/@[account]/index/media.vue b/pages/[[server]]/@[account]/index/media.vue
index 84da07f7..60f8df58 100644
--- a/pages/[[server]]/@[account]/index/media.vue
+++ b/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>