package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package",
   "name": "tutu",
-  "version": "1.0.5",
+  "version": "1.0.4",
   "description": "",
   "private": true,
   "type": "module",

src/masto/timelines.ts

@@ -1,5 +1,5 @@
 import { type mastodon } from "masto";
-import { Accessor, createEffect, createResource } from "solid-js";
+import { Accessor, createEffect, createResource, createSignal } from "solid-js";
 import { createStore } from "solid-js/store";
 
 type TimelineFetchTips = {
@@ -8,27 +8,19 @@ type TimelineFetchTips = {
 
 type Timeline = {
   list(params: {
-    readonly limit?: number;
+    maxId?: string;
+    minId?: string;
   }): mastodon.Paginator<mastodon.v1.Status[], unknown>;
 };
 
-export function useTimeline(
+export function useTimeline(timeline: Accessor<Timeline>) {
-  timeline: Accessor<Timeline>,
-  cfg?: {
-    /**
-     * Use full refresh mode. This mode ignores paging, it will refetch the specified number
-     * of toots at every refetch().
-     */
-    fullRefresh?: number;
-  },
-) {
   let otl: Timeline | undefined;
   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: "new" | "old" | "items";
+      direction: "new" | "old";
       tlChanged: boolean;
     },
     [Timeline],
@@ -43,20 +35,6 @@ export function useTimeline(
         otl = tl;
         tlChanged = true;
       }
-      const fullRefresh = cfg?.fullRefresh;
-      if (typeof fullRefresh !== "undefined") {
-        const records = await tl
-          .list({
-            limit: fullRefresh,
-          })
-          .next();
-        return {
-          direction: "items",
-          records: records.value ?? [],
-          end: records.done,
-          tlChanged,
-        };
-      }
       const direction =
         typeof info.refetching !== "boolean"
           ? (info.refetching?.direction ?? "old")
@@ -92,12 +70,10 @@ export function useTimeline(
     if (tlChanged) {
       setStore(() => []);
     }
-    if (direction === "new") {
+    if (direction == "new") {
       setStore((x) => [...records, ...x]);
-    } else if (direction === "old") {
+    } else if (direction == "old") {
       setStore((x) => [...x, ...records]);
-    } else if (direction === "items") {
-      setStore(() => records);
     }
   });
 

src/material/BottomSheet.module.css

@@ -10,13 +10,10 @@
   max-width: 560px;
   border-radius: 2px;
   overscroll-behavior: contain;
-  max-height: 100vh;
-  max-height: 100dvh;
 
   &::backdrop {
     background-color: black;
     opacity: 0.5;
-    transition: opacity 220ms var(--tutu-anim-curve-std);
   }
 
   box-shadow: var(--tutu-shadow-e16);
@@ -42,9 +39,5 @@
   &.animated {
     position: absolute;
     transform: none;
-
-    &::backdrop {
-      opacity: 0;
-    }
   }
 }

src/timelines/Home.tsx

@@ -9,8 +9,6 @@ import {
   type ParentComponent,
   children,
   Suspense,
-  Match,
-  Switch as JsSwitch
 } from "solid-js";
 import { useDocumentTitle } from "../utils";
 import { type mastodon } from "masto";
@@ -51,7 +49,6 @@ const TimelinePanel: Component<{
   client: mastodon.rest.Client;
   name: "home" | "public" | "trends";
   prefetch?: boolean;
-  fullRefetch?: number;
 
   openFullScreenToot: (
     toot: mastodon.v1.Status,
@@ -63,12 +60,10 @@ const TimelinePanel: Component<{
     timeline,
     snapshot,
     { refetch: refetchTimeline, mutate: mutateTimeline },
-  ] = useTimeline(
+  ] = useTimeline(() =>
-    () =>
     props.name !== "trends"
       ? props.client.v1.timelines[props.name]
       : props.client.v1.trends.statuses,
-    { fullRefresh: props.fullRefetch },
   );
   const [expandedThreadId, setExpandedThreadId] = createSignal<string>();
 
@@ -181,26 +176,15 @@ const TimelinePanel: Component<{
           "justify-content": "center",
         }}
       >
-        <JsSwitch>
-          <Match when={snapshot.error}>
         <Button
           variant="contained"
           onClick={[refetchTimeline, "old"]}
           disabled={snapshot.loading}
         >
+          <Show when={snapshot.error} fallback={<>Load More</>}>
             Retry
+          </Show>
         </Button>
-          </Match>
-          <Match when={typeof props.fullRefetch === "undefined"}>
-            <Button
-              variant="contained"
-              onClick={[refetchTimeline, "old"]}
-              disabled={snapshot.loading}
-            >
-              Load More
-            </Button>
-          </Match>
-        </JsSwitch>
       </div>
     </>
   );
@@ -419,7 +403,6 @@ const Home: ParentComponent = (props) => {
                   name="trends"
                   prefetch={prefetching()}
                   openFullScreenToot={openFullScreenToot}
-                  fullRefetch={120}
                 />
               </div>
             </div>

src/timelines/TootBottomSheet.tsx

@@ -3,19 +3,12 @@ import {
   createEffect,
   createRenderEffect,
   createResource,
-  For,
   Show,
   type Component,
 } from "solid-js";
 import Scaffold from "../material/Scaffold";
 import TootThread from "./TootThread";
-import {
+import { AppBar, Avatar, IconButton, Toolbar } from "@suid/material";
-  AppBar,
-  Avatar,
-  CircularProgress,
-  IconButton,
-  Toolbar,
-} from "@suid/material";
 import { Title } from "../material/typography";
 import { Close as CloseIcon, Send } from "@suid/icons-material";
 import { isiOS } from "../platform/host";
@@ -70,22 +63,6 @@ const TootBottomSheet: Component = (props) => {
 
   const toot = () => remoteToot() ?? getCache(acctText(), params.id);
 
-  const [tootContext] = createResource(
-    () => [session().client, params.id] as const,
-    async ([client, id]) => {
-      return await client.v1.statuses.$select(id).context.fetch();
-    },
-  );
-
-  const ancestors = () => tootContext()?.ancestors ?? [];
-  const descendants = () => tootContext()?.descendants ?? [];
-
-  createEffect(() => {
-    if (ancestors().length > 0) {
-      document.querySelector(`#toot-${toot()!.id}`)?.scrollIntoView();
-    }
-  });
-
   const tootTitle = () => {
     const t = toot();
     if (t) {
@@ -134,22 +111,10 @@ const TootBottomSheet: Component = (props) => {
         </AppBar>
       }
     >
-      <For each={ancestors()}>
-        {(item) => (
-          <RegularToot
-            id={`toot-${item.id}`}
-            class={cards.card}
-            status={item}
-          ></RegularToot>
-        )}
-      </For>
-
       <article>
         <Show when={toot()}>
           <RegularToot
-            id={`toot-${toot()!.id}`}
             class={cards.card}
-            style={{ "scroll-margin-top": "calc(var(--scaffold-topbar-height) + 20px)" }}
             status={toot()!}
             actionable={true}
             evaluated={true}
@@ -157,28 +122,6 @@ const TootBottomSheet: Component = (props) => {
         </Show>
       </article>
 
-      <Show when={tootContext.loading}>
-        <div
-          style={{
-            display: "flex",
-            "justify-content": "center",
-            "margin-block": "12px",
-          }}
-        >
-          <CircularProgress style="width: 1.5em; height: 1.5em;" />
-        </div>
-      </Show>
-
-      <For each={descendants()}>
-        {(item) => (
-          <RegularToot
-            id={`toot-${item.id}`}
-            class={cards.card}
-            status={item}
-          ></RegularToot>
-        )}
-      </For>
-
       <div class="bottom-dock">
         <Show when={profile()}>
           <div style="display: flex; gap: 8px; background: var(--tutu-color-surface); padding: 8px 8px calc(var(--safe-area-inset-bottom, 0px) + 8px);">

src/timelines/toot.module.css

@@ -117,7 +117,6 @@
   color: var(--tutu-color-secondary-text-on-surface);
   transition: color 220ms var(--tutu-anim-curve-std), background-color 220ms var(--tutu-anim-curve-std);
   padding-bottom: 8px;
-  overflow: hidden;
 
   >img {
     max-width: 100%;
@@ -152,6 +151,7 @@
 
     >img:first-child {
       grid-row: 1 / 3;
+      height: 100%;
       object-fit: contain;
     }