{Trend,}TimelinePanel: use TootList

2024-10-29 15:22:25 +08:00 · 2024-10-29 15:22:25 +08:00 · 73a56357d9
commit 73a56357d9
parent f1197d6ba0
8 changed files with 153 additions and 267 deletions
--- a/src/timelines/Home.tsx
+++ b/src/timelines/Home.tsx
@ -178,7 +178,7 @@ const Home: ParentComponent = (props) => {
      display: grid;
      grid-auto-columns: 560px;
      grid-auto-flow: column;
-      overflow-x: auto;
+      overflow: auto hidden;
      scroll-snap-type: x mandatory;
      scroll-snap-stop: always;
      height: calc(100vh - var(--scaffold-topbar-height, 0px));
@ -232,48 +232,48 @@ const Home: ParentComponent = (props) => {
          </AppBar>
        }
      >
-        <TimeSourceProvider value={now}>
-          <Show when={!!client()}>
-            <div class="panel-list" ref={panelList!}>
-              <div class="tab-panel">
-                <div>
-                  <TimelinePanel
-                    client={client()}
-                    name="home"
-                    prefetch={prefetching()}
-                    openFullScreenToot={openFullScreenToot}
-                  />
+        <HeroSourceProvider value={[heroSrc, setHeroSrc]}>
+          <TimeSourceProvider value={now}>
+            <Show when={!!client()}>
+              <div class="panel-list" ref={panelList!}>
+                <div class="tab-panel">
+                  <div>
+                    <TimelinePanel
+                      client={client()}
+                      name="home"
+                      prefetch={prefetching()}
+                      openFullScreenToot={openFullScreenToot}
+                    />
+                  </div>
                </div>
-              </div>
-              <div class="tab-panel">
-                <div>
-                  <TrendTimelinePanel
-                    client={client()}
-                    openFullScreenToot={openFullScreenToot}
-                  />
+                <div class="tab-panel">
+                  <div>
+                    <TrendTimelinePanel
+                      client={client()}
+                      openFullScreenToot={openFullScreenToot}
+                    />
+                  </div>
                </div>
-              </div>
-              <div class="tab-panel">
-                <div>
-                  <TimelinePanel
-                    client={client()}
-                    name="public"
-                    prefetch={prefetching()}
-                    openFullScreenToot={openFullScreenToot}
-                  />
+                <div class="tab-panel">
+                  <div>
+                    <TimelinePanel
+                      client={client()}
+                      name="public"
+                      prefetch={prefetching()}
+                      openFullScreenToot={openFullScreenToot}
+                    />
+                  </div>
                </div>
+                <div></div>
              </div>
-              <div></div>
-            </div>
-          </Show>
-        </TimeSourceProvider>
-        <Suspense>
-          <HeroSourceProvider value={[heroSrc, setHeroSrc]}>
+            </Show>
+          </TimeSourceProvider>
+          <Suspense>
            <BottomSheet open={!!child()} onClose={() => navigate(-1)}>
              {child()}
            </BottomSheet>
-          </HeroSourceProvider>
-        </Suspense>
+          </Suspense>
+        </HeroSourceProvider>
      </Scaffold>
    </>
  );
--- a/src/timelines/PullDownToRefresh.tsx
+++ b/src/timelines/PullDownToRefresh.tsx
@ -1,24 +1,15 @@
 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 {
-  createEventListener,
-  makeEventListener,
-} from "@solid-primitives/event-listener";
-import {
-  createViewportObserver,
-  createVisibilityObserver,
-} from "@solid-primitives/intersection-observer";
+import { makeEventListener } from "@solid-primitives/event-listener";
+import { createVisibilityObserver } from "@solid-primitives/intersection-observer";

 const PullDownToRefresh: Component<{
  loading?: boolean;
@ -114,14 +105,13 @@ const PullDownToRefresh: Component<{
    }
  };

-  createEffect((cleanup?: () => void) => {
+  createEffect(() => {
    if (!rootVisible()) {
      return;
    }
-    cleanup?.();
    const element = props.linkedElement;
    if (!element) return;
-    return makeEventListener(element, "wheel", handleLinkedWheel);
+    makeEventListener(element, "wheel", handleLinkedWheel);
  });

  let lastTouchId: number | undefined = undefined;
@ -165,16 +155,14 @@ const PullDownToRefresh: Component<{
    }
  };

-  createEffect((cleanup?: () => void) => {
+  createEffect(() => {
    if (!rootVisible()) {
      return;
    }
-    cleanup?.();
    const element = props.linkedElement;
    if (!element) return;
-    const cleanup0 = makeEventListener(element, "touchmove", handleTouch);
-    const cleanup1 = makeEventListener(element, "touchend", handleTouchEnd);
-    return () => (cleanup0(), cleanup1());
+    makeEventListener(element, "touchmove", handleTouch);
+    makeEventListener(element, "touchend", handleTouchEnd);
  });

  css`
--- a/src/timelines/TimelinePanel.tsx
+++ b/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 Thread from "./Thread.jsx";
+import TootList from "./TootList";

 const TimelinePanel: Component<{
  client: mastodon.rest.Client;
@ -32,9 +32,8 @@ 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(() => {
@ -44,43 +43,6 @@ const TimelinePanel: Component<{

  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) => {
@ -110,36 +72,12 @@ 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);

-            return (
-              <Thread
-                toots={toots}
-                onBoost={onBoost}
-                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>
+        <TootList
+          threads={timeline.list}
+          onUnknownThread={timeline.getPath}
+          onChangeToot={timeline.set}
+        ></TootList>
      </div>

      <div ref={(e) => tlEndObserver.observe(e)}></div>
--- a/src/timelines/TootList.tsx
+++ b/src/timelines/TootList.tsx
@ -1,24 +1,16 @@
 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 } from "../platform/anim";
+import { useHeroSignal, useHeroSource } from "../platform/anim";
 import { HERO as BOTTOM_SHEET_HERO } from "../material/BottomSheet";
 import { setCache as setTootBottomSheetCache } from "./TootBottomSheet";
 import { useNavigate } from "@solidjs/router";
@ -30,7 +22,7 @@ const TootList: Component<{
  onChangeToot: (id: string, value: mastodon.v1.Status) => void;
 }> = (props) => {
  const session = useDefaultSession();
-  const [, setHeroSrc] = useHeroSignal(BOTTOM_SHEET_HERO);
+  const heroSrc = useHeroSource();
  const [expandedThreadId, setExpandedThreadId] = createSignal<string>();
  const navigate = useNavigate();

@ -83,7 +75,10 @@ const TootList: Component<{
      console.warn("no account info?");
      return;
    }
-    setHeroSrc(srcElement);
+    if (heroSrc) {
+      heroSrc[1]((x) => ({ ...x, [BOTTOM_SHEET_HERO]: srcElement }));
+    }
+
    const acct = `${inf.username}@${p.site}`;
    setTootBottomSheetCache(acct, toot);
    navigate(`/${encodeURIComponent(acct)}/toot/${toot.id}`, {
@ -95,6 +90,26 @@ 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) => {
@ -112,21 +127,10 @@ const TootList: Component<{
                toots={toots}
                onBoost={onBoost}
                onBookmark={onBookmark}
-                onReply={({ status }, element) =>
-                  openFullScreenToot(status, element, true)
-                }
+                onReply={onReply}
                client={session()?.client!}
-                isExpended={(status) => status.id === expandedThreadId()}
-                onItemClick={(status, event) => {
-                  if (status.id !== expandedThreadId()) {
-                    setExpandedThreadId((x) => (x ? undefined : status.id));
-                  } else {
-                    openFullScreenToot(
-                      status,
-                      event.currentTarget as HTMLElement,
-                    );
-                  }
-                }}
+                isExpended={checkIsExpended}
+                onItemClick={onItemClick}
              />
            );
          }}
--- a/src/timelines/TrendTimelinePanel.tsx
+++ b/src/timelines/TrendTimelinePanel.tsx
@ -13,6 +13,7 @@ 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;
@ -24,67 +25,11 @@ const TrendTimelinePanel: Component<{
  ) => void;
 }> = (props) => {
  const [scrollLinked, setScrollLinked] = createSignal<HTMLElement>();
-  const [
-    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;
-    });
-  };
+  const [timeline, snapshot, { refetch: refetchTimeline }] =
+    createTimelineSnapshot(
+      () => props.client.v1.trends.statuses,
+      () => 120,
+    );

  return (
    <ErrorBoundary
@ -104,31 +49,11 @@ const TrendTimelinePanel: Component<{
          }, 0)
        }
      >
-        <For each={timeline}>
-          {(item, index) => {
-            let element: HTMLElement | undefined;
-            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>
+        <TootList
+          threads={timeline.list}
+          onUnknownThread={timeline.getPath}
+          onChangeToot={timeline.set}
+        />
      </div>
      <div
        style={{