From 964298f407ede29b1fb5e50723404d3add2ab2b2 Mon Sep 17 00:00:00 2001 From: thislight Date: Sat, 17 Aug 2024 19:03:26 +0800 Subject: [PATCH 1/5] start of v1.0.5 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7284ff7..46dd161 100644 --- a/package.json +++ b/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", From 8dc261a86308e985036834d20dfdfa0737a2cde9 Mon Sep 17 00:00:00 2001 From: thislight Date: Thu, 22 Aug 2024 15:31:15 +0800 Subject: [PATCH 2/5] Home: ignore paging for trending panel --- src/masto/timelines.ts | 38 ++++++++++++++++++++++++++++++------- src/timelines/Home.tsx | 43 +++++++++++++++++++++++++++++------------- 2 files changed, 61 insertions(+), 20 deletions(-) diff --git a/src/masto/timelines.ts b/src/masto/timelines.ts index 917ecf7..ce73490 100644 --- a/src/masto/timelines.ts +++ b/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; }; -export function useTimeline(timeline: Accessor) { +export function useTimeline( + timeline: Accessor, + 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 | undefined; let opager: mastodon.Paginator | 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) { 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) { 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); } }); diff --git a/src/timelines/Home.tsx b/src/timelines/Home.tsx index d303c72..c09023d 100644 --- a/src/timelines/Home.tsx +++ b/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(() => - props.name !== "trends" - ? props.client.v1.timelines[props.name] - : props.client.v1.trends.statuses, + ] = useTimeline( + () => + props.name !== "trends" + ? props.client.v1.timelines[props.name] + : props.client.v1.trends.statuses, + { fullRefresh: props.fullRefetch }, ); const [expandedThreadId, setExpandedThreadId] = createSignal(); @@ -176,15 +181,26 @@ const TimelinePanel: Component<{ "justify-content": "center", }} > - + + + + + + + + ); @@ -403,6 +419,7 @@ const Home: ParentComponent = (props) => { name="trends" prefetch={prefetching()} openFullScreenToot={openFullScreenToot} + fullRefetch={120} /> From e74ae23612c326c6dc707232dc547ea25ca3263f Mon Sep 17 00:00:00 2001 From: thislight Date: Thu, 22 Aug 2024 16:49:27 +0800 Subject: [PATCH 3/5] TootBottomSheet: add replys --- src/timelines/TootBottomSheet.tsx | 59 ++++++++++++++++++++++++++++++- 1 file changed, 58 insertions(+), 1 deletion(-) diff --git a/src/timelines/TootBottomSheet.tsx b/src/timelines/TootBottomSheet.tsx index a4d72c6..6408e69 100644 --- a/src/timelines/TootBottomSheet.tsx +++ b/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) => { } > + + {(item) => ( + + )} + +
{
+ +
+ +
+ + + + {(item) => ( + + )} + +
From a24319911b9dea9e66528c3130d12c357a5e444b Mon Sep 17 00:00:00 2001 From: thislight Date: Thu, 22 Aug 2024 16:50:12 +0800 Subject: [PATCH 4/5] BottomSheet: sets max-height to 100vh on desktop --- src/material/BottomSheet.module.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/material/BottomSheet.module.css b/src/material/BottomSheet.module.css index 5693423..d096fff 100644 --- a/src/material/BottomSheet.module.css +++ b/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; + } } } From c62839767540aceeac125cbcc024ca260886a261 Mon Sep 17 00:00:00 2001 From: thislight Date: Thu, 22 Aug 2024 17:11:45 +0800 Subject: [PATCH 5/5] 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. --- src/timelines/toot.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/timelines/toot.module.css b/src/timelines/toot.module.css index 92c4143..59aac3e 100644 --- a/src/timelines/toot.module.css +++ b/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; }