From 06e906f95e4bf1502d45516cb78251265e6aa1b8 Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Mon, 8 Apr 2024 02:19:35 +0900
Subject: [PATCH 1/3] feat: show pinned posts on individual account page

---
 components/status/StatusCard.vue            | 14 ++++++++++++++
 pages/[[server]]/@[account]/index/index.vue | 17 +++++++++++++++--
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index 76cd88d102..3e211c47ac 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -62,6 +62,7 @@ const timeago = useTimeAgo(() => status.value.createdAt, timeAgoOptions)
 const isSelfReply = computed(() => status.value.inReplyToAccountId === status.value.account.id)
 const collapseRebloggedBy = computed(() => rebloggedBy.value?.id === status.value.account.id)
 const isDM = computed(() => status.value.visibility === 'direct')
+const isPinned = computed(() => status.value.pinned)
 
 const showUpperBorder = computed(() => props.newer && !directReply.value)
 const showReplyTo = computed(() => !replyToMain.value && !directReply.value)
@@ -113,6 +114,19 @@ const forceShow = ref(false)
           <AccountInlineInfo font-bold :account="rebloggedBy" :avatar="false" text-sm />
         </div>
       </div>
+
+      <!-- Pinned status -->
+      <div flex="~ col" justify-between>
+        <div
+          v-if="isPinned"
+          flex="~" items-center
+          p="t-1 b-0.5 x-1px"
+          relative text-secondary ws-nowrap
+        >
+          <div i-ri:pushpin-line mx-1 text-orange w-16px h-16px />
+          <span text-primary>Pinned post</span>
+        </div>
+      </div>
     </slot>
 
     <div flex gap-3 :class="{ 'text-secondary': inNotification }">
diff --git a/pages/[[server]]/@[account]/index/index.vue b/pages/[[server]]/@[account]/index/index.vue
index 506f722d5c..0728dbc4e8 100644
--- a/pages/[[server]]/@[account]/index/index.vue
+++ b/pages/[[server]]/@[account]/index/index.vue
@@ -10,11 +10,21 @@ const { t } = useI18n()
 
 const account = await fetchAccountByHandle(handle.value)
 
+// we need to ensure `pinned === true` on status
+// because this prop is appeared only on current account's posts
+function applyPinned(statuses: mastodon.v1.Status[]) {
+  return statuses.map((status) => {
+    status.pinned = true
+    return status
+  })
+}
+
 function reorderAndFilter(items: mastodon.v1.Status[]) {
   return reorderedTimeline(items, 'account')
 }
 
-const paginator = useMastoClient().v1.accounts.$select(account.id).statuses.list({ limit: 30, excludeReplies: true })
+const pinnedPaginator = useMastoClient().v1.accounts.$select(account.id).statuses.list({ pinned: true })
+const accountPaginator = useMastoClient().v1.accounts.$select(account.id).statuses.list({ limit: 30, excludeReplies: true })
 
 if (account) {
   useHydratedHead({
@@ -26,6 +36,9 @@ if (account) {
 <template>
   <div>
     <AccountTabs />
-    <TimelinePaginator :paginator="paginator" :preprocess="reorderAndFilter" context="account" :account="account" />
+    <TimelinePaginator :paginator="pinnedPaginator" :preprocess="applyPinned" context="account" :account="account" :end-message="false" />
+    <!-- Upper border -->
+    <div h="1px" w-auto bg-border mb-1 />
+    <TimelinePaginator :paginator="accountPaginator" :preprocess="reorderAndFilter" context="account" :account="account" />
   </div>
 </template>

From c874b3d6c5463e3ba4e90c3c79e98ad1747ed797 Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Tue, 9 Apr 2024 00:05:31 +0900
Subject: [PATCH 2/3] fix: adjust "Pinned post" position and styling

---
 components/status/StatusCard.vue | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index 3e211c47ac..c1b9f720d5 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -76,6 +76,19 @@ const forceShow = ref(false)
     <div :h="showUpperBorder ? '1px' : '0'" w-auto bg-border mb-1 />
 
     <slot name="meta">
+      <!-- Pinned status -->
+      <div flex="~ col" justify-between>
+        <div
+          v-if="isPinned"
+          flex="~ gap2" items-center h-auto text-sm text-orange
+          m="is-5" p="t-1 is-5"
+          relative text-secondary ws-nowrap
+        >
+          <div i-ri:pushpin-line />
+          <span>Pinned post</span>
+        </div>
+      </div>
+
       <!-- Line connecting to previous status -->
       <template v-if="status.inReplyToAccountId">
         <StatusReplyingTo
@@ -114,19 +127,6 @@ const forceShow = ref(false)
           <AccountInlineInfo font-bold :account="rebloggedBy" :avatar="false" text-sm />
         </div>
       </div>
-
-      <!-- Pinned status -->
-      <div flex="~ col" justify-between>
-        <div
-          v-if="isPinned"
-          flex="~" items-center
-          p="t-1 b-0.5 x-1px"
-          relative text-secondary ws-nowrap
-        >
-          <div i-ri:pushpin-line mx-1 text-orange w-16px h-16px />
-          <span text-primary>Pinned post</span>
-        </div>
-      </div>
     </slot>
 
     <div flex gap-3 :class="{ 'text-secondary': inNotification }">

From 5e1a8183c33f7a84ffaa672baf13746ecc2a4181 Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Tue, 9 Apr 2024 00:06:43 +0900
Subject: [PATCH 3/3] i18n: allow localizing "Pinned post"

---
 components/status/StatusCard.vue | 2 +-
 locales/en.json                  | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index c1b9f720d5..daaa37110e 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -85,7 +85,7 @@ const forceShow = ref(false)
           relative text-secondary ws-nowrap
         >
           <div i-ri:pushpin-line />
-          <span>Pinned post</span>
+          <span>{{ $t('status.pinned') }}</span>
         </div>
       </div>
 
diff --git a/locales/en.json b/locales/en.json
index 3f5194ad55..aa110367aa 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -632,6 +632,7 @@
       "dismiss": "Dismiss",
       "read": "Read {0} description"
     },
+    "pinned": "Pinned post",
     "poll": {
       "count": "{0} votes|{0} vote|{0} votes",
       "ends": "ends {0}",