From c37df11a25ab70a473d71f87d7a964c786606ae1 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 17 Feb 2023 10:12:59 +0800
Subject: [PATCH] Show pinned posts

---
 src/components/icon.jsx        |  1 +
 src/components/status.css      |  3 +++
 src/components/status.jsx      |  5 ++++-
 src/pages/account-statuses.jsx | 23 ++++++++++++++++++++++-
 4 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/components/icon.jsx b/src/components/icon.jsx
index 7701a743..82221ee1 100644
--- a/src/components/icon.jsx
+++ b/src/components/icon.jsx
@@ -56,6 +56,7 @@ const ICONS = {
   shortcut: 'mingcute:lightning-line',
   user: 'mingcute:user-4-line',
   following: 'mingcute:walk-line',
+  pin: 'mingcute:pin-line',
 };
 
 const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js');
diff --git a/src/components/status.css b/src/components/status.css
index 4ddc3ba6..e975ac15 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -922,6 +922,9 @@ a.card:is(:hover, :focus) {
 .status-badge .bookmark {
   color: var(--link-color);
 }
+.status-badge .pin {
+  color: var(--red-color);
+}
 
 /* MISC */
 
diff --git a/src/components/status.jsx b/src/components/status.jsx
index d3c3db14..8541342e 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -106,7 +106,9 @@ function Status({
     reblog,
     uri,
     emojis,
+    // Non-API props
     _deleted,
+    _pinned,
   } = status;
 
   console.debug('RENDER Status', id, status?.account.displayName);
@@ -203,7 +205,7 @@ function Status({
       tabindex="-1"
       class={`status ${
         !withinContext && inReplyToAccount ? 'status-reply-to' : ''
-      } visibility-${visibility} ${
+      } visibility-${visibility} ${_pinned ? 'status-pinned' : ''} ${
         {
           s: 'small',
           m: 'medium',
@@ -217,6 +219,7 @@ function Status({
           {reblogged && <Icon class="reblog" icon="rocket" size="s" />}
           {favourited && <Icon class="favourite" icon="heart" size="s" />}
           {bookmarked && <Icon class="bookmark" icon="bookmark" size="s" />}
+          {_pinned && <Icon class="pin" icon="pin" size="s" />}
         </div>
       )}
       {size !== 's' && (
diff --git a/src/pages/account-statuses.jsx b/src/pages/account-statuses.jsx
index 77fada8d..0008b1fa 100644
--- a/src/pages/account-statuses.jsx
+++ b/src/pages/account-statuses.jsx
@@ -16,12 +16,33 @@ function AccountStatuses() {
   const { masto, instance } = api({ instance: params.instance });
   const accountStatusesIterator = useRef();
   async function fetchAccountStatuses(firstLoad) {
+    const results = [];
+    if (firstLoad) {
+      const { value: pinnedStatuses } = await masto.v1.accounts
+        .listStatuses(id, {
+          pinned: true,
+        })
+        .next();
+      if (pinnedStatuses?.length) {
+        pinnedStatuses.forEach((status) => {
+          status._pinned = true;
+        });
+        results.push(...pinnedStatuses);
+      }
+    }
     if (firstLoad || !accountStatusesIterator.current) {
       accountStatusesIterator.current = masto.v1.accounts.listStatuses(id, {
         limit: LIMIT,
       });
     }
-    return await accountStatusesIterator.current.next();
+    const { value, done } = await accountStatusesIterator.current.next();
+    if (value?.length) {
+      results.push(...value);
+    }
+    return {
+      value: results,
+      done,
+    };
   }
 
   const [account, setAccount] = useState({});