TootPreviewCard: minor layout adjustment

Remove the image's centre in compact layout.
This helps the feeling when the text is too long.
I am still finding ways to limit the card height.

package.json

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

src/masto/timelines.ts

@@ -1,5 +1,5 @@
 import { type mastodon } from "masto";
-import { Accessor, createEffect, createResource, createSignal } from "solid-js";
+import { Accessor, createEffect, createResource } from "solid-js";
 import { createStore } from "solid-js/store";
 
 type TimelineFetchTips = {
@@ -8,19 +8,27 @@ type TimelineFetchTips = {
 
 type Timeline = {
   list(params: {
-    maxId?: string;
-    minId?: string;
+    readonly limit?: number;
   }): mastodon.Paginator<mastodon.v1.Status[], unknown>;
 };
 
-export function useTimeline(timeline: Accessor<Timeline>) {
+export function useTimeline(
+  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";
+      direction: "new" | "old" | "items";
       tlChanged: boolean;
     },
     [Timeline],
@@ -35,6 +43,20 @@ export function useTimeline(timeline: Accessor<Timeline>) {
         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")
@@ -70,10 +92,12 @@ export function useTimeline(timeline: Accessor<Timeline>) {
     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,10 +10,13 @@
   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);
@@ -39,5 +42,9 @@
   &.animated {
     position: absolute;
     transform: none;
+
+    &::backdrop {
+      opacity: 0;
+    }
   }
 }

src/timelines/Home.tsx

@@ -9,6 +9,8 @@ import {
   type ParentComponent,
   children,
   Suspense,
+  Match,
+  Switch as JsSwitch
 } from "solid-js";
 import { useDocumentTitle } from "../utils";
 import { type mastodon } from "masto";
@@ -49,6 +51,7 @@ const TimelinePanel: Component<{
   client: mastodon.rest.Client;
   name: "home" | "public" | "trends";
   prefetch?: boolean;
+  fullRefetch?: number;
 
   openFullScreenToot: (
     toot: mastodon.v1.Status,
@@ -60,10 +63,12 @@ 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>();
 
@@ -176,15 +181,26 @@ 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>
     </>
   );
@@ -403,6 +419,7 @@ const Home: ParentComponent = (props) => {
                   name="trends"
                   prefetch={prefetching()}
                   openFullScreenToot={openFullScreenToot}
+                  fullRefetch={120}
                 />
               </div>
             </div>

src/timelines/TootBottomSheet.tsx

@@ -3,12 +3,19 @@ import {
   createEffect,
   createRenderEffect,
   createResource,
+  For,
   Show,
   type Component,
 } from "solid-js";
 import Scaffold from "../material/Scaffold";
 import TootThread from "./TootThread";
-import { AppBar, Avatar, IconButton, Toolbar } from "@suid/material";
+import {
+  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";
@@ -63,6 +70,22 @@ 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) {
@@ -111,10 +134,22 @@ 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}
@@ -122,6 +157,28 @@ 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,6 +117,7 @@
   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%;
@@ -151,7 +152,6 @@
 
     >img:first-child {
       grid-row: 1 / 3;
-      height: 100%;
       object-fit: contain;
     }