Profile: pinned toots

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;
     },
   );

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>

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 (