Show pinned posts

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');

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 */
 

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' && (

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({});