From e7410c729679af7744170990d0e87eb0d0242e0c Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Thu, 31 Oct 2024 00:18:47 +0800
Subject: [PATCH] Profile: pinned toots

---
 src/masto/timelines.ts               |  6 +++---
 src/profiles/Profile.tsx             | 27 ++++++++++++++++++++++++---
 src/timelines/TrendTimelinePanel.tsx |  2 +-
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/masto/timelines.ts b/src/masto/timelines.ts
index bbc884e..1aaefb1 100644
--- a/src/masto/timelines.ts
+++ b/src/masto/timelines.ts
@@ -87,12 +87,12 @@ export function createTimelineSnapshot<
   T extends Timeline<mastodon.DefaultPaginationParams>,
 >(
   timeline: Accessor<T>,
-  limit: Accessor<number>,
+  params: Accessor<TimelineParamsOf<T>>,
 ): TimelineResource<mastodon.v1.Status[] | undefined> {
   const [shot, { refetch }] = createResource(
-    () => [timeline(), limit()] as const,
+    () => [timeline(), params()] as const,
     async ([tl, limit]) => {
-      const ls = await tl.list({ limit }).next();
+      const ls = await tl.list(limit).next();
       return ls.value;
     },
   );
diff --git a/src/profiles/Profile.tsx b/src/profiles/Profile.tsx
index ca8324a..9015e8b 100644
--- a/src/profiles/Profile.tsx
+++ b/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>
diff --git a/src/timelines/TrendTimelinePanel.tsx b/src/timelines/TrendTimelinePanel.tsx
index 04f98b0..e34edcf 100644
--- a/src/timelines/TrendTimelinePanel.tsx
+++ b/src/timelines/TrendTimelinePanel.tsx
@@ -28,7 +28,7 @@ const TrendTimelinePanel: Component<{
   const [timeline, snapshot, { refetch: refetchTimeline }] =
     createTimelineSnapshot(
       () => props.client.v1.trends.statuses,
-      () => 120,
+      () => ({ limit: 120 }),
     );
 
   return (