Profile: pinned toots

src/profiles/Profile.tsx

@@ -39,7 +39,7 @@ import { resolveCustomEmoji } from "../masto/toot";
 import { FastAverageColor } from "fast-average-color";
 import { useWindowSize } from "@solid-primitives/resize-observer";
 import { css } from "solid-styled";
-import { createTimeline } from "../masto/timelines";
+import { createTimeline, createTimelineSnapshot } from "../masto/timelines";
 import TootList from "../timelines/TootList";
 import { createTimeSource, TimeSourceProvider } from "../platform/timesrc";
 import TootFilterButton from "./TootFilterButton";
@@ -91,6 +91,7 @@ const Profile: Component = () => {
     });
 
   const [recentTootFilter, setRecentTootFilter] = createSignal({
+    pinned: true,
     boost: false,
     reply: true,
     original: true,
@@ -105,6 +106,13 @@ const Profile: Component = () => {
       },
     );
 
+  const [pinnedToots, pinnedTootChunk] = createTimelineSnapshot(
+    () => session().client.v1.accounts.$select(params.id).statuses,
+    () => {
+      return { limit: 20, pinned: true };
+    },
+  );
+
   const bannerImg = () => profile()?.header;
   const avatarImg = () => profile()?.avatar;
   const displayName = () =>
@@ -112,6 +120,10 @@ const Profile: Component = () => {
   const fullUsername = () => (profile()?.acct ? `@${profile()!.acct!}` : ""); // TODO: full user name
   const description = () => profile()?.note;
 
+  const isTootListLoading = () =>
+    recentTootChunk.loading ||
+    (recentTootFilter().pinned && pinnedTootChunk.loading);
+
   css`
     .intro {
       background-color: var(--tutu-color-surface-d);
@@ -375,6 +387,7 @@ const Profile: Component = () => {
       <div class="toot-list-toolbar">
         <TootFilterButton
           options={{
+            pinned: "Pinneds",
             boost: "Boosts",
             reply: "Replies",
             original: "Originals",
@@ -386,6 +399,14 @@ const Profile: Component = () => {
       </div>
 
       <TimeSourceProvider value={time}>
+        <Show when={recentTootFilter().pinned}>
+          <TootList
+            threads={pinnedToots.list}
+            onUnknownThread={pinnedToots.getPath}
+            onChangeToot={pinnedToots.set}
+          />
+          <Divider />
+        </Show>
         <TootList
           threads={recentToots.list}
           onUnknownThread={recentToots.getPath}
@@ -405,9 +426,9 @@ const Profile: Component = () => {
             size="large"
             color="primary"
             onClick={[refetchRecentToots, "prev"]}
-            disabled={recentTootChunk.loading}
+            disabled={isTootListLoading()}
           >
-            <Show when={recentTootChunk.loading} fallback={<ExpandMore />}>
+            <Show when={isTootListLoading()} fallback={<ExpandMore />}>
               <CircularProgress sx={{ width: "24px", height: "24px" }} />
             </Show>
           </IconButton>