diff --git a/package.json b/package.json index 46dd161..7284ff7 100644 --- a/package.json +++ b/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", diff --git a/src/masto/timelines.ts b/src/masto/timelines.ts index ce73490..917ecf7 100644 --- a/src/masto/timelines.ts +++ b/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; }; -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; - }, -) { +export function useTimeline(timeline: Accessor) { 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" | "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); } }); diff --git a/src/material/BottomSheet.module.css b/src/material/BottomSheet.module.css index d096fff..5693423 100644 --- a/src/material/BottomSheet.module.css +++ b/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; - } } } diff --git a/src/timelines/Home.tsx b/src/timelines/Home.tsx index c09023d..d303c72 100644 --- a/src/timelines/Home.tsx +++ b/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( - () => - props.name !== "trends" - ? props.client.v1.timelines[props.name] - : props.client.v1.trends.statuses, - { fullRefresh: props.fullRefetch }, + ] = useTimeline(() => + props.name !== "trends" + ? props.client.v1.timelines[props.name] + : props.client.v1.trends.statuses, ); const [expandedThreadId, setExpandedThreadId] = createSignal(); @@ -181,26 +176,15 @@ const TimelinePanel: Component<{ "justify-content": "center", }} > - - - - - - - - + ); @@ -419,7 +403,6 @@ const Home: ParentComponent = (props) => { name="trends" prefetch={prefetching()} openFullScreenToot={openFullScreenToot} - fullRefetch={120} /> diff --git a/src/timelines/TootBottomSheet.tsx b/src/timelines/TootBottomSheet.tsx index 6408e69..a4d72c6 100644 --- a/src/timelines/TootBottomSheet.tsx +++ b/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 { - AppBar, - Avatar, - CircularProgress, - IconButton, - Toolbar, -} from "@suid/material"; +import { AppBar, Avatar, 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) => { } > - - {(item) => ( - - )} - -
{
- -
- -
-
- - - {(item) => ( - - )} - -
diff --git a/src/timelines/toot.module.css b/src/timelines/toot.module.css index 59aac3e..92c4143 100644 --- a/src/timelines/toot.module.css +++ b/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; }