useTimeline: use masto's Paginator

update packages
BottomSheet: backward animation
2024-08-12 22:29:55 +08:00 · 2024-08-12 22:01:57 +08:00 · 2024-08-12 21:55:26 +08:00 · 2024-08-12 20:39:12 +08:00 · 2024-08-12 17:25:03 +08:00
19 changed files with 351 additions and 98 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/index.html
+++ b/index.html
@ -7,6 +7,7 @@
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>Tutu</title>
    <link rel="stylesheet" href="/src/App.css" />
    <script src="/src/platform/polyfills.ts" type="module"></script>
    <script src="/src/index.tsx" type="module"></script>
  </head>
  <body>
--- a/package.json
+++ b/package.json
@ -16,22 +16,22 @@
  "devDependencies": {
    "@suid/vite-plugin": "^0.2.0",
    "@types/hammerjs": "^2.0.45",
-    "postcss": "^8.4.39",
+    "postcss": "^8.4.41",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
-    "typescript": "^5.5.2",
+    "typescript": "^5.5.4",
-    "vite": "^5.3.2",
+    "vite": "^5.4.0",
    "vite-plugin-package-version": "^1.1.0",
-    "vite-plugin-pwa": "^0.20.0",
+    "vite-plugin-pwa": "^0.20.1",
    "vite-plugin-solid": "^2.10.2",
    "vite-plugin-solid-styled": "^0.11.1",
-    "wrangler": "^3.64.0"
+    "wrangler": "^3.70.0"
  },
  "dependencies": {
    "@nanostores/persistent": "^0.9.1",
    "@nanostores/solid": "^0.4.2",
    "@solid-primitives/event-listener": "^2.3.3",
    "@solid-primitives/intersection-observer": "^2.1.6",
-    "@solid-primitives/resize-observer": "^2.0.25",
+    "@solid-primitives/resize-observer": "^2.0.26",
    "@solidjs/router": "^0.11.5",
    "@suid/icons-material": "^0.7.0",
    "@suid/material": "^0.16.0",
@ -40,9 +40,10 @@
    "hammerjs": "^2.0.8",
    "masto": "^6.8.0",
    "nanostores": "^0.9.5",
-    "solid-js": "^1.8.18",
+    "solid-js": "^1.8.20",
    "solid-styled": "^0.11.1",
-    "stacktrace-js": "^2.0.2"
+    "stacktrace-js": "^2.0.2",
    "web-animations-js": "^2.3.2"
  },
  "packageManager": "bun@1.1.21"
 }
--- a/src/App.tsx
+++ b/src/App.tsx
@ -22,6 +22,7 @@ const AccountMastodonOAuth2Callback = lazy(
 );
 const TimelineHome = lazy(() => import("./timelines/Home.js"));
 const Settings = lazy(() => import("./settings/Settings.js"));
 const TootBottomSheet = lazy(() => import("./timelines/TootBottomSheet.js"));
 const Routing: Component = () => {
  return (
@ -29,6 +30,7 @@ const Routing: Component = () => {
      <Route path="/" component={TimelineHome}>
        <Route path=""></Route>
        <Route path="/settings" component={Settings}></Route>
        <Route path="/:acct/:id" component={TootBottomSheet}></Route>
      </Route>
      <Route path={"/accounts"}>
        <Route path={"/sign-in"} component={AccountSignIn} />
@ -53,7 +55,7 @@ const App: Component = () => {
    );
  });
-const UnexpectedError = lazy(() => import("./UnexpectedError.js"))
+  const UnexpectedError = lazy(() => import("./UnexpectedError.js"));
  return (
    <ErrorBoundary
--- a/src/masto/acct.ts
+++ b/src/masto/acct.ts
@ -3,18 +3,6 @@ import type { mastodon } from "masto";
 import { useSessions } from "./clients";
 import { updateAcctInf } from "../accounts/stores";
 export function useAcctProfile(client: Accessor<mastodon.rest.Client>) {
  return createResource(
    client,
    (client) => {
      return client.v1.accounts.verifyCredentials();
    },
    {
      name: "MastodonAccountProfile",
    },
  );
 }
 export function useSignedInProfiles() {
  const sessions = useSessions();
  const [accessor, tools] = createResource(sessions, async (all) => {
@ -24,11 +12,11 @@ export function useSignedInProfiles() {
  });
  return [
    () => {
-      if (accessor.loading) {
+      const value = accessor();
-        accessor();
+      if (!value) {
        return sessions().map((x) => ({ ...x, inf: x.account.inf }));
      }
-      return accessor();
+      return value;
    },
    tools,
  ] as const;
--- a/src/masto/timelines.ts
+++ b/src/masto/timelines.ts
@ -14,55 +14,49 @@ type Timeline = {
 };
 export function useTimeline(timeline: Accessor<Timeline>) {
  let minId: string | undefined;
  let maxId: string | undefined;
  let otl: Timeline | undefined;
-  const idSet = new Set<string>();
+  let npager: mastodon.Paginator<mastodon.v1.Status[], unknown> | undefined;
  let opager: mastodon.Paginator<mastodon.v1.Status[], unknown> | undefined;
  const [snapshot, { refetch }] = createResource<
-    { records: mastodon.v1.Status[]; direction: "old" | "new" },
+    {
      records: mastodon.v1.Status[];
      direction: "new" | "old";
      tlChanged: boolean;
    },
    [Timeline],
    TimelineFetchTips | undefined
  >(
    () => [timeline()] as const,
    async ([tl], info) => {
      let tlChanged = false;
      if (otl !== tl) {
-        minId = undefined;
+        console.debug("timeline reset");
-        maxId = undefined;
+        npager = opager = undefined;
        idSet.clear();
        otl = tl;
        tlChanged = true;
      }
      const direction =
        typeof info.refetching !== "boolean"
-          ? info.refetching?.direction
+          ? (info.refetching?.direction ?? "old")
          : "old";
      const pager = await tl.list(
        direction === "old"
          ? {
              maxId: minId,
            }
          : {
              minId: maxId,
            },
      );
      const diff = pager.filter((x) => !idSet.has(x.id));
      for (const v of diff.map((x) => x.id)) {
        idSet.add(v);
      }
      if (direction === "old") {
-        minId = pager[pager.length - 1]?.id;
+        if (!opager) {
-        if (!maxId && pager.length > 0) {
+          opager = tl.list({}).setDirection("next");
          maxId = pager[0].id;
        }
        const next = await opager.next();
        return {
-          direction: "old" as const,
+          direction,
-          records: diff,
+          records: next.value ?? [],
          end: next.done,
          tlChanged,
        };
      } else {
-        maxId = pager.length > 0 ? pager[0].id : undefined;
+        if (!npager) {
-        if (!minId && pager.length > 0) {
+          npager = tl.list({}).setDirection("prev");
          minId = pager[pager.length - 1]?.id;
        }
-        return { direction: "new" as const, records: diff };
+        const next = await npager.next();
        const page = next.value ?? [];
        return { direction, records: page, end: next.done, tlChanged };
      }
    },
  );
@ -72,7 +66,10 @@ export function useTimeline(timeline: Accessor<Timeline>) {
  createEffect(() => {
    const shot = snapshot();
    if (!shot) return;
-    const { direction, records } = shot;
+    const { direction, records, tlChanged } = shot;
    if (tlChanged) {
      setStore(() => []);
    }
    if (direction == "new") {
      setStore((x) => [...records, ...x]);
    } else if (direction == "old") {
--- a/src/masto/toot.ts
+++ b/src/masto/toot.ts
@ -1,3 +1,4 @@
 import { cache } from "@solidjs/router";
 import type { mastodon } from "masto";
 import { createRenderEffect, createResource, type Accessor } from "solid-js";
--- a/src/material/BottomSheet.module.css
+++ b/src/material/BottomSheet.module.css
@ -11,10 +11,14 @@
  border-radius: 2px;
  overscroll-behavior: contain;
  &::backdrop {
    background-color: black;
    opacity: 0.5;
  }
  box-shadow: var(--tutu-shadow-e16);
  :global(.MuiToolbar-root) > :global(.MuiButtonBase-root):first-child {
    color: white;
    margin-left: -0.5em;
    margin-right: 24px;
  }
@ -30,4 +34,9 @@
      max-height: 100%;
    }
  }
  &.animated {
    position: absolute;
    transform: none;
  }
 }
--- a/src/material/BottomSheet.tsx
+++ b/src/material/BottomSheet.tsx
@ -1,25 +1,118 @@
-import { createEffect, type ParentComponent } from "solid-js";
+import {
  createEffect,
  createRenderEffect,
  onCleanup,
  onMount,
  startTransition,
  useTransition,
  type ParentComponent,
 } from "solid-js";
 import styles from "./BottomSheet.module.css";
 import { useHeroSignal } from "../platform/anim";
 export type BottomSheetProps = {
  open?: boolean;
 };
 export const HERO = Symbol("BottomSheet Hero Symbol");
 function composeAnimationFrame(
  {
    top,
    left,
    height,
    width,
  }: Record<"top" | "left" | "height" | "width", number>,
  x: Record<string, unknown>,
 ) {
  return {
    top: `${top}px`,
    left: `${left}px`,
    height: `${height}px`,
    width: `${width}px`,
    ...x,
  };
 }
 const MOVE_SPEED = 1400; // 1400px/s, bottom sheet is big and a bit heavier than small papers
 const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
  let element: HTMLDialogElement;
  let animation: Animation | undefined;
  const hero = useHeroSignal(HERO);
  const [pending] = useTransition()
  createEffect(() => {
    if (props.open) {
-      if (!element.open) {
+      if (!element.open && !pending()) {
-        element.showModal();
+        animatedOpen();
      }
    } else {
      if (element.open) {
-        element.close();
+        animatedClose();
      }
    }
  });
  const animatedClose = () => {
    const endRect = hero();
    if (endRect) {
      const startRect = element.getBoundingClientRect();
      const animation = animateHero(startRect, endRect, element, true);
      const onClose = () => {
        element.close();
      };
      animation.addEventListener("finish", onClose);
      animation.addEventListener("cancel", onClose);
    } else {
      element.close();
    }
  };
  const animatedOpen = () => {
    element.showModal();
    const startRect = hero();
    if (!startRect) return;
    const endRect = element.getBoundingClientRect();
    animateHero(startRect, endRect, element);
  };
  const animateHero = (
    startRect: DOMRect,
    endRect: DOMRect,
    element: HTMLElement,
    reserve?: boolean,
  ) => {
    const easing = "cubic-bezier(0.4, 0, 0.2, 1)";
    element.classList.add(styles.animated);
    const distance = Math.sqrt(
      Math.pow(Math.abs(startRect.top - endRect.top), 2) +
        Math.pow(Math.abs(startRect.left - startRect.top), 2),
    );
    const duration = (distance / MOVE_SPEED) * 1000;
    animation = element.animate(
      [
        composeAnimationFrame(startRect, { opacity: reserve ? 1 : 0.5 }),
        composeAnimationFrame(endRect, { opacity: reserve ? 0.5 : 1 }),
      ],
      { easing, duration },
    );
    const onAnimationEnd = () => {
      element.classList.remove(styles.animated);
      animation = undefined;
    };
    animation.addEventListener("finish", onAnimationEnd);
    animation.addEventListener("cancel", onAnimationEnd);
    return animation;
  };
  onCleanup(() => {
    if (animation) {
      animation.cancel();
    }
  });
  return (
    <dialog class={styles.bottomSheet} ref={element!}>
      {props.children}
--- a/src/platform/anim.ts
+++ b/src/platform/anim.ts
@ -1,13 +1,49 @@
-import { createContext, useContext, type Accessor } from "solid-js";
+import {
  createContext,
  createRenderEffect,
  createSignal,
  untrack,
  useContext,
  type Accessor,
  type Signal,
 } from "solid-js";
 export type HeroSource = {
-  [key: string | symbol | number]: HTMLElement | undefined;
+  [key: string | symbol | number]: DOMRect | undefined;
 };
-const HeroSourceContext = createContext<Accessor<HeroSource>>(() => ({}));
+const HeroSourceContext = createContext<Signal<HeroSource>>(/* __@PURE__ */undefined);
 export const HeroSourceProvider = HeroSourceContext.Provider;
-export function useHeroSource() {
+function useHeroSource() {
  return useContext(HeroSourceContext);
 }
 /**
 * Use hero value for the {@link key}.
 */
 export function useHeroSignal(
  key: string | symbol | number,
 ): Accessor<DOMRect | undefined> {
  const source = useHeroSource();
  if (source) {
    const [get, set] = createSignal<DOMRect>();
    createRenderEffect(() => {
      const value = source[0]();
      if (value[key]) {
        set(value[key]);
        source[1]((x) => {
          const cpy = Object.assign({}, x);
          delete cpy[key];
          return cpy;
        });
      }
    });
    return get;
  } else {
    return () => undefined;
  }
 }
--- a/src/platform/host.ts
+++ b/src/platform/host.ts
@ -0,0 +1,12 @@
 export function isiOS() {
  return [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ].includes(navigator.platform)
  // iPad on iOS 13 detection
  || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
 }
--- a/src/platform/polyfills.ts
+++ b/src/platform/polyfills.ts
@ -0,0 +1,8 @@
 //! This module has side effect.
 //! It recommended to include the module by <script> tag.
 if (!document.body.animate) {
  // @ts-ignore: this file is polyfill, no exposed decls
  import("web-animations-js").then(() => {
    console.warn("web animation polyfill is included");
  });
 }
--- a/src/settings/Settings.tsx
+++ b/src/settings/Settings.tsx
@ -50,7 +50,7 @@ const Settings: ParentComponent = () => {
      topbar={
        <AppBar position="static">
          <Toolbar variant="dense" sx={{paddingTop: "var(--safe-area-inset-top, 0px)"}}>
-            <IconButton onClick={[navigate, -1]}>
+            <IconButton color="inherit" onClick={[navigate, -1]}>
              <CloseIcon />
            </IconButton>
            <Title>Settings</Title>
--- a/src/timelines/Home.tsx
+++ b/src/timelines/Home.tsx
@ -8,9 +8,9 @@ import {
  onMount,
  type ParentComponent,
  children,
  Suspense,
 } from "solid-js";
 import { useDocumentTitle } from "../utils";
 import { useSessions } from "../masto/clients";
 import { type mastodon } from "masto";
 import Scaffold from "../material/Scaffold";
 import {
@ -27,23 +27,32 @@ import {
 import { css } from "solid-styled";
 import { TimeSourceProvider, createTimeSource } from "../platform/timesrc";
 import TootThread from "./TootThread.js";
 import { useAcctProfile } from "../masto/acct";
 import ProfileMenuButton from "./ProfileMenuButton";
 import Tabs from "../material/Tabs";
 import Tab from "../material/Tab";
 import { Create as CreateTootIcon } from "@suid/icons-material";
 import { useTimeline } from "../masto/timelines";
 import { makeEventListener } from "@solid-primitives/event-listener";
-import BottomSheet from "../material/BottomSheet";
+import BottomSheet, {
  HERO as BOTTOM_SHEET_HERO,
 } from "../material/BottomSheet";
 import { $settings } from "../settings/stores";
 import { useStore } from "@nanostores/solid";
 import { vibrate } from "../platform/hardware";
 import PullDownToRefresh from "./PullDownToRefresh";
 import { HeroSourceProvider, type HeroSource } from "../platform/anim";
 import { useNavigate } from "@solidjs/router";
 import { useSignedInProfiles } from "../masto/acct";
 const TimelinePanel: Component<{
  client: mastodon.rest.Client;
  name: "home" | "public" | "trends";
  prefetch?: boolean;
  openFullScreenToot: (
    toot: mastodon.v1.Status,
    srcElement?: HTMLElement,
  ) => void;
 }> = (props) => {
  const [scrollLinked, setScrollLinked] = createSignal<HTMLElement>();
  const [
@ -125,18 +134,22 @@ const TimelinePanel: Component<{
      >
        <For each={timeline}>
          {(item, index) => {
            let element: HTMLElement | undefined;
            return (
              <TootThread
                ref={element}
                status={item}
                onBoost={(...args) => onBoost(index(), ...args)}
                onBookmark={(...args) => onBookmark(index(), ...args)}
                client={props.client}
                expanded={item.id === expandedThreadId() ? 1 : 0}
-                onExpandChange={() =>
+                onExpandChange={(x) => {
-                  setExpandedThreadId(
+                  if (item.id !== expandedThreadId()) {
-                    item.id !== expandedThreadId() ? item.id : undefined,
+                    setExpandedThreadId(item.id);
-                  )
+                  } else if (x === 2) {
-                }
+                    props.openFullScreenToot(item, element);
                  }
                }}
              />
            );
          }}
@ -182,10 +195,13 @@ const Home: ParentComponent = (props) => {
  const now = createTimeSource();
  const settings$ = useStore($settings);
  const sessions = useSessions();
  const client = () => sessions()[0].client;
  const [profile] = useAcctProfile(client);
  const [profiles] = useSignedInProfiles();
  const profile = () => profiles()[0].inf;
  const client = () => profiles()[0].client;
  const navigate = useNavigate();
  const [heroSrc, setHeroSrc] = createSignal<HeroSource>({});
  const [panelOffset, setPanelOffset] = createSignal(0);
  const prefetching = () => !settings$().prefetchTootsDisabled;
  const [currentFocusOn, setCurrentFocusOn] = createSignal<HTMLElement[]>([]);
@ -259,6 +275,22 @@ const Home: ParentComponent = (props) => {
    }
  };
  const openFullScreenToot = (
    toot: mastodon.v1.Status,
    srcElement?: HTMLElement,
  ) => {
    const p = profiles()[0];
    const inf = p.account.inf ?? profile();
    if (!inf) {
      console.warn("no account info?");
      return;
    }
    const rect = srcElement?.getBoundingClientRect();
    setHeroSrc((x) => Object.assign({}, x, { [BOTTOM_SHEET_HERO]: rect }));
    const acct = `${inf.username}@${p.account.site}`;
    navigate(`/${encodeURIComponent(acct)}/${toot.id}`);
  };
  css`
    .tab-panel {
      overflow: visible auto;
@ -344,6 +376,7 @@ const Home: ParentComponent = (props) => {
                  client={client()}
                  name="home"
                  prefetch={prefetching()}
                  openFullScreenToot={openFullScreenToot}
                />
              </div>
            </div>
@ -353,6 +386,7 @@ const Home: ParentComponent = (props) => {
                  client={client()}
                  name="trends"
                  prefetch={prefetching()}
                  openFullScreenToot={openFullScreenToot}
                />
              </div>
            </div>
@ -362,13 +396,18 @@ const Home: ParentComponent = (props) => {
                  client={client()}
                  name="public"
                  prefetch={prefetching()}
                  openFullScreenToot={openFullScreenToot}
                />
              </div>
            </div>
            <div></div>
          </div>
        </TimeSourceProvider>
-        <BottomSheet open={!!child()}>{child()}</BottomSheet>
+        <Suspense>
          <HeroSourceProvider value={[heroSrc, setHeroSrc]}>
            <BottomSheet open={!!child()}>{child()}</BottomSheet>
          </HeroSourceProvider>
        </Suspense>
      </Scaffold>
    </>
  );
--- a/src/timelines/MediaAttachmentGrid.tsx
+++ b/src/timelines/MediaAttachmentGrid.tsx
@ -2,9 +2,7 @@ import type { mastodon } from "masto";
 import { type Component, For, createSignal } from "solid-js";
 import { css } from "solid-styled";
 import tootStyle from "./toot.module.css";
-import { Portal } from "solid-js/web";
+import MediaViewer from "./MediaViewer";
 import MediaViewer, { MEDIA_VIEWER_HEROSRC } from "./MediaViewer";
 import { HeroSourceProvider } from "../platform/anim";
 const MediaAttachmentGrid: Component<{
  attachments: mastodon.v1.MediaAttachment[];
@ -58,13 +56,6 @@ const MediaAttachmentGrid: Component<{
          }
        }}
      </For>
      <HeroSourceProvider
        value={() => ({
          [MEDIA_VIEWER_HEROSRC]: rootRef.children.item(
            viewerIndex() || 0,
          ) as HTMLElement,
        })}
      >
        <MediaViewer
          show={viewerOpened()}
          index={viewerIndex() || 0}
@ -72,7 +63,6 @@ const MediaAttachmentGrid: Component<{
          media={props.attachments}
          onClose={() => setViewerIndex(undefined)}
        />
      </HeroSourceProvider>
    </section>
  );
 };
--- a/src/timelines/MediaViewer.tsx
+++ b/src/timelines/MediaViewer.tsx
@ -15,8 +15,6 @@ import {
  untrack,
 } from "solid-js";
 import { css } from "solid-styled";
 import { useHeroSource } from "../platform/anim";
 import { Portal } from "solid-js/web";
 import { createStore } from "solid-js/store";
 import { IconButton, Toolbar } from "@suid/material";
 import { ArrowLeft, ArrowRight, Close } from "@suid/icons-material";
@ -42,8 +40,6 @@ function clamp(input: number, min: number, max: number) {
 const MediaViewer: ParentComponent<MediaViewerProps> = (props) => {
  let rootRef: HTMLDialogElement;
  const heroSource = useHeroSource();
  const heroSourceEl = () => heroSource()[MEDIA_VIEWER_HEROSRC];
  type State = {
    ref?: HTMLElement;
    media: mastodon.v1.MediaAttachment;
--- a/src/timelines/PullDownToRefresh.tsx
+++ b/src/timelines/PullDownToRefresh.tsx
@ -103,7 +103,7 @@ const PullDownToRefresh: Component<{
  const handleTouch = (event: TouchEvent) => {
    if (event.targetTouches.length > 1) {
      lastTouchId = 0;
-      lastTouchScreenY;
+      lastTouchScreenY = 0;
      return;
    }
    const item = event.targetTouches.item(0)!;
@ -128,7 +128,12 @@ const PullDownToRefresh: Component<{
    lastTouchScreenY = 0;
    holding = false;
    if (untrack(pullDownDistance) >= 160 && !props.loading && props.onRefresh) {
-      setTimeout(props.onRefresh, 0)
+      setTimeout(props.onRefresh, 0);
    } else {
      if (released) {
        released = false;
        requestAnimationFrame(updatePullDown);
      }
    }
  };
--- a/src/timelines/TootBottomSheet.tsx
+++ b/src/timelines/TootBottomSheet.tsx
@ -1,7 +1,80 @@
-import type { Component } from "solid-js";
+import { useNavigate, useParams } from "@solidjs/router";
 import { createResource, Show, type Component } from "solid-js";
 import Scaffold from "../material/Scaffold";
 import TootThread from "./TootThread";
 import { AppBar, IconButton, Toolbar } from "@suid/material";
 import { Title } from "../material/typography";
 import { Close as CloseIcon } from "@suid/icons-material";
 import { isiOS } from "../platform/host";
 import { createUnauthorizedClient, useSessions } from "../masto/clients";
 import { resolveCustomEmoji } from "../masto/toot";
 import RegularToot from "./RegularToot";
 const TootBottomSheet: Component = (props) => {
-  return <></>;
+  const params = useParams<{ acct: string; id: string }>();
  const navigate = useNavigate();
  const allSession = useSessions();
  const session = () => {
    const [inputUsername, inputSite] = decodeURIComponent(params.acct).split(
      "@",
      2,
    );
    const authedSession = allSession().find(
      (x) =>
        x.account.site === inputSite &&
        x.account.inf?.username === inputUsername,
    );
    return authedSession ?? { client: createUnauthorizedClient(inputSite) };
  };
  const [remoteToot] = createResource(
    () => [session().client, params.id] as const,
    async ([client, id]) => {
      return await client.v1.statuses.$select(id).fetch();
    },
  );
  const toot = remoteToot;
  const tootTitle = () => {
    const t = toot();
    if (t) {
      const name = resolveCustomEmoji(t.account.displayName, t.account.emojis);
      return `${name}'s toot`;
    }
    return "A toot";
  };
  return (
    <Scaffold
      topbar={
        <AppBar
          sx={{
            backgroundColor: "var(--tutu-color-surface)",
            color: "var(--tutu-color-on-surface)",
          }}
          elevation={1}
          position="static"
        >
          <Toolbar
            variant="dense"
            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
          >
            <IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
              <CloseIcon />
            </IconButton>
            <Title>{tootTitle}</Title>
          </Toolbar>
        </AppBar>
      }
    >
      <div>
        <Show when={toot()}>
          <RegularToot status={toot()!}></RegularToot>
        </Show>
      </div>
    </Scaffold>
  );
 };
 export default TootBottomSheet;
--- a/src/timelines/TootThread.tsx
+++ b/src/timelines/TootThread.tsx
@ -1,5 +1,5 @@
 import type { mastodon } from "masto";
-import { Show, createResource, createSignal, type Component } from "solid-js";
+import { Show, createResource, createSignal, type Component, type Ref } from "solid-js";
 import CompactToot from "./CompactToot";
 import { useTimeSource } from "../platform/timesrc";
 import RegularToot from "./RegularToot";
@ -7,6 +7,7 @@ import cardStyle from "../material/cards.module.css";
 import { css } from "solid-styled";
 type TootThreadProps = {
  ref?: Ref<HTMLElement>,
  status: mastodon.v1.Status;
  client: mastodon.rest.Client;
  expanded?: 0 | 1 | 2;
@ -70,6 +71,7 @@ const TootThread: Component<TootThreadProps> = (props) => {
  return (
    <article
      ref={props.ref}
      classList={{ "thread-line": !!inReplyTo(), expanded: expanded() > 0 }}
      onClick={() => props.onExpandChange?.(nextExpandLevel[expanded()])}
    >
Author	SHA1	Message	Date
thislight	c7f26053ca	useTimeline: use masto's Paginator All checks were successful / depoly (push) Successful in 1m6s Details	2024-08-12 22:29:55 +08:00
thislight	cb6dce074d	update packages	2024-08-12 22:01:57 +08:00
thislight	c461ae72f8	BottomSheet: backward animation	2024-08-12 21:55:26 +08:00
thislight	0d856c61c7	PullDownToRefresh:fix wont pull back when touchend	2024-08-12 20:39:12 +08:00
thislight	2d7b931ef8	BottomSheet: first attempt for animation	2024-08-12 17:25:03 +08:00