src/masto/timelines.ts

@@ -20,77 +20,52 @@ type TimelineParamsOf<T> = T extends Timeline<infer P> ? P : never;
 export function createTimelineSnapshot<
   T extends Timeline<mastodon.DefaultPaginationParams>,
 >(timeline: Accessor<T>, limit: Accessor<number>) {
-  const lookup = new ReactiveMap<string, TreeNode<mastodon.v1.Status>>();
   const [shot, { refetch }] = createResource(
     () => [timeline(), limit()] as const,
     async ([tl, limit]) => {
       const ls = await tl.list({ limit }).next();
-      return ls.value;
+      return ls.value?.map((x) => [x]) ?? [];
     },
   );
 
-  const [threads, setThreads] = createStore([] as mastodon.v1.Status["id"][]);
+  const [snapshot, setSnapshot] = createStore([] as mastodon.v1.Status[][]);
 
   createEffect(() => {
     const nls = catchError(shot, (e) => console.error(e));
     if (!nls) return;
-
+    const ols = Array.from(snapshot);
-    setThreads([]);
+    // The algorithm below assumes the snapshot is not changing
-    lookup.clear();
+    for (let i = 0; i < nls.length; i++) {
-
+      if (i >= ols.length) {
-    const existence = [] as boolean[];
+        setSnapshot(i, nls[i]);
-
+      } else {
-    for (const [idx, status] of nls.entries()) {
+        if (nls[i].length !== ols[i].length) {
-      existence[idx] = !!untrack(() => lookup.get(status.id));
+          setSnapshot(i, nls[i]);
-      lookup.set(status.id, {
+        } else {
-        value: status,
+          const oth = ols[i],
-      });
+            nth = nls[i];
-    }
+          for (let j = 0; j < oth.length; j++) {
-
+            const ost = oth[j],
-    for (const status of nls) {
+              nst = nth[j];
-      const node = untrack(() => lookup.get(status.id))!;
+            for (const key of Object.keys(
-      if (status.inReplyToId) {
+              nst,
-        const parent = lookup.get(status.inReplyToId);
+            ) as unknown as (keyof mastodon.v1.Status)[]) {
-        if (parent) {
+              if (ost[key] !== nst[key]) {
-          const children = parent.children ?? [];
+                setSnapshot(i, j, key, nst[key]);
-          if (!children.find((x) => x.value.id == status.id)) {
+              }
-            children.push(node);
+            }
-          }
+          }
-          parent.children = children;
-          node.parent = parent;
         }
       }
     }
-
-    const newThreads = nls
-      .filter((x, i) => !existence[i])
-      .map((x) => x.id)
-      .filter((id) => (lookup.get(id)!.children?.length ?? 0) === 0);
-
-    setThreads(newThreads);
   });
 
   return [
-    {
+    snapshot,
-      list: threads,
-      get(id: string) {
-        return lookup.get(id);
-      },
-      getPath(id: string) {
-        const node = lookup.get(id);
-        if (!node) return;
-        return collectPath(node);
-      },
-      set(id: string, value: mastodon.v1.Status) {
-        const node = untrack(() => lookup.get(id));
-        if (!node) return;
-        node.value = value;
-        lookup.set(id, node);
-      },
-    },
     shot,
     {
       refetch,
+      mutate: setSnapshot,
     },
   ] as const;
 }
@@ -125,9 +100,10 @@ function collectPath<T>(node: TreeNode<T>) {
   return path;
 }
 
-function createTimelineChunk<
+function createTimelineChunk<T extends Timeline<mastodon.DefaultPaginationParams>>(
-  T extends Timeline<mastodon.DefaultPaginationParams>,
+  timeline: Accessor<T>,
->(timeline: Accessor<T>, params: Accessor<TimelineParamsOf<T>>) {
+  params: Accessor<TimelineParamsOf<T>>,
+) {
   let vpMaxId: string | undefined, vpMinId: string | undefined;
 
   const fetchExtendingPage = async (

src/material/BottomSheet.tsx

@@ -96,9 +96,6 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
     element.showModal();
     const srcElement = hero();
     const startRect = srcElement?.getBoundingClientRect();
-    if (!startRect) {
-      console.debug("no source element")
-    }
     if (startRect) {
       srcElement!.style.visibility = "hidden";
       const endRect = element.getBoundingClientRect();

src/platform/anim.ts

@@ -18,15 +18,12 @@ const HeroSourceContext = createContext<Signal<HeroSource>>(
 
 export const HeroSourceProvider = HeroSourceContext.Provider;
 
-export function useHeroSource() {
+function useHeroSource() {
   return useContext(HeroSourceContext);
 }
 
 /**
  * Use hero value for the {@link key}.
- *
- * Note: the setter here won't set the value of the hero source.
- * To set hero source, use {@link useHeroSource} and set the corresponding key.
  */
 export function useHeroSignal(
   key: string | symbol | number,
@@ -49,7 +46,6 @@ export function useHeroSignal(
 
     return [get, set];
   } else {
-    console.debug("no hero source")
     return [() => undefined, () => undefined];
   }
 }

src/timelines/Home.tsx

@@ -178,7 +178,7 @@ const Home: ParentComponent = (props) => {
       display: grid;
       grid-auto-columns: 560px;
       grid-auto-flow: column;
-      overflow: auto hidden;
+      overflow-x: auto;
       scroll-snap-type: x mandatory;
       scroll-snap-stop: always;
       height: calc(100vh - var(--scaffold-topbar-height, 0px));
@@ -232,7 +232,6 @@ const Home: ParentComponent = (props) => {
           </AppBar>
         }
       >
-        <HeroSourceProvider value={[heroSrc, setHeroSrc]}>
         <TimeSourceProvider value={now}>
           <Show when={!!client()}>
             <div class="panel-list" ref={panelList!}>
@@ -269,11 +268,12 @@ const Home: ParentComponent = (props) => {
           </Show>
         </TimeSourceProvider>
         <Suspense>
+          <HeroSourceProvider value={[heroSrc, setHeroSrc]}>
             <BottomSheet open={!!child()} onClose={() => navigate(-1)}>
               {child()}
             </BottomSheet>
-          </Suspense>
           </HeroSourceProvider>
+        </Suspense>
       </Scaffold>
     </>
   );

src/timelines/PullDownToRefresh.tsx

@@ -1,15 +1,24 @@
 import {
   createEffect,
+  createRenderEffect,
   createSignal,
+  onCleanup,
   Show,
   untrack,
   type Component,
+  type Signal,
 } from "solid-js";
 import { css } from "solid-styled";
 import { Refresh as RefreshIcon } from "@suid/icons-material";
 import { CircularProgress } from "@suid/material";
-import { makeEventListener } from "@solid-primitives/event-listener";
+import {
-import { createVisibilityObserver } from "@solid-primitives/intersection-observer";
+  createEventListener,
+  makeEventListener,
+} from "@solid-primitives/event-listener";
+import {
+  createViewportObserver,
+  createVisibilityObserver,
+} from "@solid-primitives/intersection-observer";
 
 const PullDownToRefresh: Component<{
   loading?: boolean;
@@ -105,13 +114,14 @@ const PullDownToRefresh: Component<{
     }
   };
 
-  createEffect(() => {
+  createEffect((cleanup?: () => void) => {
     if (!rootVisible()) {
       return;
     }
+    cleanup?.();
     const element = props.linkedElement;
     if (!element) return;
-    makeEventListener(element, "wheel", handleLinkedWheel);
+    return makeEventListener(element, "wheel", handleLinkedWheel);
   });
 
   let lastTouchId: number | undefined = undefined;
@@ -155,14 +165,16 @@ const PullDownToRefresh: Component<{
     }
   };
 
-  createEffect(() => {
+  createEffect((cleanup?: () => void) => {
     if (!rootVisible()) {
       return;
     }
+    cleanup?.();
     const element = props.linkedElement;
     if (!element) return;
-    makeEventListener(element, "touchmove", handleTouch);
+    const cleanup0 = makeEventListener(element, "touchmove", handleTouch);
-    makeEventListener(element, "touchend", handleTouchEnd);
+    const cleanup1 = makeEventListener(element, "touchend", handleTouchEnd);
+    return () => (cleanup0(), cleanup1());
   });
 
   css`

src/timelines/TimelinePanel.tsx

@@ -12,10 +12,10 @@ import {
 import { type mastodon } from "masto";
 import { Button, LinearProgress } from "@suid/material";
 import { createTimeline } from "../masto/timelines";
-
+import { vibrate } from "../platform/hardware";
 import PullDownToRefresh from "./PullDownToRefresh";
 import TootComposer from "./TootComposer";
-import TootList from "./TootList";
+import Thread from "./Thread.jsx";
 
 const TimelinePanel: Component<{
   client: mastodon.rest.Client;
@@ -32,17 +32,55 @@ const TimelinePanel: Component<{
 
   const [timeline, snapshot, { refetch: refetchTimeline }] = createTimeline(
     () => props.client.v1.timelines[props.name],
-    () => ({ limit: 20 }),
+    () => ({limit: 20}),
   );
+  const [expandedThreadId, setExpandedThreadId] = createSignal<string>();
   const [typing, setTyping] = createSignal(false);
 
   const tlEndObserver = new IntersectionObserver(() => {
     if (untrack(() => props.prefetch) && !snapshot.loading)
-      refetchTimeline("prev");
+      refetchTimeline("next");
   });
 
   onCleanup(() => tlEndObserver.disconnect());
 
+  const onBookmark = async (
+    client: mastodon.rest.Client,
+    status: mastodon.v1.Status,
+  ) => {
+    const result = await (status.bookmarked
+      ? client.v1.statuses.$select(status.id).unbookmark()
+      : client.v1.statuses.$select(status.id).bookmark());
+    timeline.set(result.id, result);
+  };
+
+  const onBoost = async (
+    client: mastodon.rest.Client,
+    status: mastodon.v1.Status,
+  ) => {
+    vibrate(50);
+    const rootStatus = status.reblog ? status.reblog : status;
+    const reblogged = rootStatus.reblogged;
+    if (status.reblog) {
+      status.reblog = { ...status.reblog, reblogged: !reblogged };
+      timeline.set(status.id, status);
+    } else {
+      timeline.set(
+        status.id,
+        Object.assign(status, {
+          reblogged: !reblogged,
+        }),
+      );
+    }
+    const result = reblogged
+      ? await client.v1.statuses.$select(status.id).unreblog()
+      : (await client.v1.statuses.$select(status.id).reblog()).reblog!;
+    timeline.set(
+      status.id,
+      Object.assign(status.reblog ?? status, result.reblog),
+    );
+  };
+
   return (
     <ErrorBoundary
       fallback={(err, reset) => {
@@ -72,12 +110,36 @@ const TimelinePanel: Component<{
             onSent={() => refetchTimeline("prev")}
           />
         </Show>
+        <For each={timeline.list}>
+          {(itemId, index) => {
+            const path = timeline.getPath(itemId)!;
+            const toots = path.reverse().map((x) => x.value);
 
-        <TootList
+            return (
-          threads={timeline.list}
+              <Thread
-          onUnknownThread={timeline.getPath}
+                toots={toots}
-          onChangeToot={timeline.set}
+                onBoost={onBoost}
-        ></TootList>
+                onBookmark={onBookmark}
+                onReply={({ status }, element) =>
+                  props.openFullScreenToot(status, element, true)
+                }
+                client={props.client}
+                isExpended={(status) => status.id === expandedThreadId()}
+                onItemClick={(status, event) => {
+                  setTyping(false);
+                  if (status.id !== expandedThreadId()) {
+                    setExpandedThreadId((x) => (x ? undefined : status.id));
+                  } else {
+                    props.openFullScreenToot(
+                      status,
+                      event.currentTarget as HTMLElement,
+                    );
+                  }
+                }}
+              />
+            );
+          }}
+        </For>
       </div>
 
       <div ref={(e) => tlEndObserver.observe(e)}></div>

src/timelines/TootList.tsx

@@ -1,16 +1,24 @@
 import {
   Component,
   For,
+  onCleanup,
   createSignal,
+  Show,
+  untrack,
+  Match,
+  Switch as JsSwitch,
   ErrorBoundary,
   type Ref,
-  createSelector,
 } from "solid-js";
 import { type mastodon } from "masto";
+import { Button, LinearProgress } from "@suid/material";
+import { createTimeline } from "../masto/timelines";
 import { vibrate } from "../platform/hardware";
+import PullDownToRefresh from "./PullDownToRefresh";
+import TootComposer from "./TootComposer";
 import Thread from "./Thread.jsx";
 import { useDefaultSession } from "../masto/clients";
-import { useHeroSignal, useHeroSource } from "../platform/anim";
+import { useHeroSignal } from "../platform/anim";
 import { HERO as BOTTOM_SHEET_HERO } from "../material/BottomSheet";
 import { setCache as setTootBottomSheetCache } from "./TootBottomSheet";
 import { useNavigate } from "@solidjs/router";
@@ -22,7 +30,7 @@ const TootList: Component<{
   onChangeToot: (id: string, value: mastodon.v1.Status) => void;
 }> = (props) => {
   const session = useDefaultSession();
-  const heroSrc = useHeroSource();
+  const [, setHeroSrc] = useHeroSignal(BOTTOM_SHEET_HERO);
   const [expandedThreadId, setExpandedThreadId] = createSignal<string>();
   const navigate = useNavigate();
 
@@ -75,10 +83,7 @@ const TootList: Component<{
       console.warn("no account info?");
       return;
     }
-    if (heroSrc) {
+    setHeroSrc(srcElement);
-      heroSrc[1]((x) => ({ ...x, [BOTTOM_SHEET_HERO]: srcElement }));
-    }
-
     const acct = `${inf.username}@${p.site}`;
     setTootBottomSheetCache(acct, toot);
     navigate(`/${encodeURIComponent(acct)}/toot/${toot.id}`, {
@@ -90,26 +95,6 @@ const TootList: Component<{
     });
   };
 
-  const onItemClick = (status: mastodon.v1.Status, event: MouseEvent) => {
-    if (status.id !== expandedThreadId()) {
-      setExpandedThreadId((x) => (x ? undefined : status.id));
-    } else {
-      openFullScreenToot(status, event.currentTarget as HTMLElement);
-    }
-  };
-
-  const checkIsExpendedId = createSelector(expandedThreadId);
-
-  const checkIsExpended = (status: mastodon.v1.Status) =>
-    checkIsExpendedId(status.id);
-
-  const onReply = (
-    { status }: { status: mastodon.v1.Status },
-    element: HTMLElement,
-  ) => {
-    openFullScreenToot(status, element, true);
-  };
-
   return (
     <ErrorBoundary
       fallback={(err, reset) => {
@@ -127,10 +112,21 @@ const TootList: Component<{
                 toots={toots}
                 onBoost={onBoost}
                 onBookmark={onBookmark}
-                onReply={onReply}
+                onReply={({ status }, element) =>
+                  openFullScreenToot(status, element, true)
+                }
                 client={session()?.client!}
-                isExpended={checkIsExpended}
+                isExpended={(status) => status.id === expandedThreadId()}
-                onItemClick={onItemClick}
+                onItemClick={(status, event) => {
+                  if (status.id !== expandedThreadId()) {
+                    setExpandedThreadId((x) => (x ? undefined : status.id));
+                  } else {
+                    openFullScreenToot(
+                      status,
+                      event.currentTarget as HTMLElement,
+                    );
+                  }
+                }}
               />
             );
           }}

src/timelines/TrendTimelinePanel.tsx

@@ -13,7 +13,6 @@ import { createTimelineSnapshot } from "../masto/timelines.js";
 import { vibrate } from "../platform/hardware.js";
 import PullDownToRefresh from "./PullDownToRefresh.jsx";
 import Thread from "./Thread.jsx";
-import TootList from "./TootList.jsx";
 
 const TrendTimelinePanel: Component<{
   client: mastodon.rest.Client;
@@ -25,11 +24,67 @@ const TrendTimelinePanel: Component<{
   ) => void;
 }> = (props) => {
   const [scrollLinked, setScrollLinked] = createSignal<HTMLElement>();
-  const [timeline, snapshot, { refetch: refetchTimeline }] =
+  const [
-    createTimelineSnapshot(
+    timeline,
+    snapshot,
+    { refetch: refetchTimeline, mutate: mutateTimeline },
+  ] = createTimelineSnapshot(
     () => props.client.v1.trends.statuses,
     () => 120,
   );
+  const [expandedId, setExpandedId] = createSignal<string>();
+
+  const isExpandedId = createSelector(expandedId);
+
+  const isExpanded = (st: mastodon.v1.Status) => isExpandedId(st.id);
+
+  const onBookmark = async (
+    index: number,
+    client: mastodon.rest.Client,
+    status: mastodon.v1.Status,
+  ) => {
+    const result = await (status.bookmarked
+      ? client.v1.statuses.$select(status.id).unbookmark()
+      : client.v1.statuses.$select(status.id).bookmark());
+    mutateTimeline((o) => {
+      o![index] = [result];
+      return o;
+    });
+  };
+
+  const onBoost = async (
+    index: number,
+    client: mastodon.rest.Client,
+    status: mastodon.v1.Status,
+  ) => {
+    const reblogged = status.reblog
+      ? status.reblog.reblogged
+      : status.reblogged;
+    vibrate(50);
+    mutateTimeline(index, (th) => {
+      const x = th[0];
+      if (x.reblog) {
+        x.reblog = { ...x.reblog, reblogged: !reblogged };
+        return [Object.assign({}, x)];
+      } else {
+        return [
+          Object.assign({}, x, {
+            reblogged: !reblogged,
+          }),
+        ];
+      }
+    });
+    const result = reblogged
+      ? await client.v1.statuses.$select(status.id).unreblog()
+      : (await client.v1.statuses.$select(status.id).reblog()).reblog!;
+    mutateTimeline(index, (th) => {
+      Object.assign(th[0].reblog ?? th[0], {
+        reblogged: result.reblogged,
+        reblogsCount: result.reblogsCount,
+      });
+      return th;
+    });
+  };
 
   return (
     <ErrorBoundary
@@ -49,11 +104,31 @@ const TrendTimelinePanel: Component<{
           }, 0)
         }
       >
-        <TootList
+        <For each={timeline}>
-          threads={timeline.list}
+          {(item, index) => {
-          onUnknownThread={timeline.getPath}
+            let element: HTMLElement | undefined;
-          onChangeToot={timeline.set}
+            return (
+              <Thread
+                ref={element}
+                toots={item}
+                onBoost={(...args) => onBoost(index(), ...args)}
+                onBookmark={(...args) => onBookmark(index(), ...args)}
+                onReply={({ status }, element) =>
+                  props.openFullScreenToot(status, element, true)
+                }
+                client={props.client}
+                isExpended={isExpanded}
+                onItemClick={(x) => {
+                  if (x.id !== expandedId()) {
+                    setExpandedId((o) => (o ? undefined : x.id));
+                  } else {
+                    props.openFullScreenToot(x, element);
+                  }
+                }}
               />
+            );
+          }}
+        </For>
       </div>
       <div
         style={{