Compare commits

..

No commits in common. "c62839767540aceeac125cbcc024ca260886a261" and "cecebda39bbc913b5bbe2f3cf4bbf17acd0f1f42" have entirely different histories.

6 changed files with 23 additions and 128 deletions

View file

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

View file

@ -1,5 +1,5 @@
import { type mastodon } from "masto"; 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"; import { createStore } from "solid-js/store";
type TimelineFetchTips = { type TimelineFetchTips = {
@ -8,27 +8,19 @@ type TimelineFetchTips = {
type Timeline = { type Timeline = {
list(params: { list(params: {
readonly limit?: number; maxId?: string;
minId?: string;
}): mastodon.Paginator<mastodon.v1.Status[], unknown>; }): 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 otl: Timeline | undefined;
let npager: mastodon.Paginator<mastodon.v1.Status[], unknown> | undefined; let npager: mastodon.Paginator<mastodon.v1.Status[], unknown> | undefined;
let opager: mastodon.Paginator<mastodon.v1.Status[], unknown> | undefined; let opager: mastodon.Paginator<mastodon.v1.Status[], unknown> | undefined;
const [snapshot, { refetch }] = createResource< const [snapshot, { refetch }] = createResource<
{ {
records: mastodon.v1.Status[]; records: mastodon.v1.Status[];
direction: "new" | "old" | "items"; direction: "new" | "old";
tlChanged: boolean; tlChanged: boolean;
}, },
[Timeline], [Timeline],
@ -43,20 +35,6 @@ export function useTimeline(
otl = tl; otl = tl;
tlChanged = true; 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 = const direction =
typeof info.refetching !== "boolean" typeof info.refetching !== "boolean"
? (info.refetching?.direction ?? "old") ? (info.refetching?.direction ?? "old")
@ -92,12 +70,10 @@ export function useTimeline(
if (tlChanged) { if (tlChanged) {
setStore(() => []); setStore(() => []);
} }
if (direction === "new") { if (direction == "new") {
setStore((x) => [...records, ...x]); setStore((x) => [...records, ...x]);
} else if (direction === "old") { } else if (direction == "old") {
setStore((x) => [...x, ...records]); setStore((x) => [...x, ...records]);
} else if (direction === "items") {
setStore(() => records);
} }
}); });

View file

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

View file

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

View file

@ -3,19 +3,12 @@ import {
createEffect, createEffect,
createRenderEffect, createRenderEffect,
createResource, createResource,
For,
Show, Show,
type Component, type Component,
} from "solid-js"; } from "solid-js";
import Scaffold from "../material/Scaffold"; import Scaffold from "../material/Scaffold";
import TootThread from "./TootThread"; 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 { Title } from "../material/typography";
import { Close as CloseIcon, Send } from "@suid/icons-material"; import { Close as CloseIcon, Send } from "@suid/icons-material";
import { isiOS } from "../platform/host"; import { isiOS } from "../platform/host";
@ -70,22 +63,6 @@ const TootBottomSheet: Component = (props) => {
const toot = () => remoteToot() ?? getCache(acctText(), params.id); 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 tootTitle = () => {
const t = toot(); const t = toot();
if (t) { if (t) {
@ -134,22 +111,10 @@ const TootBottomSheet: Component = (props) => {
</AppBar> </AppBar>
} }
> >
<For each={ancestors()}>
{(item) => (
<RegularToot
id={`toot-${item.id}`}
class={cards.card}
status={item}
></RegularToot>
)}
</For>
<article> <article>
<Show when={toot()}> <Show when={toot()}>
<RegularToot <RegularToot
id={`toot-${toot()!.id}`}
class={cards.card} class={cards.card}
style={{ "scroll-margin-top": "calc(var(--scaffold-topbar-height) + 20px)" }}
status={toot()!} status={toot()!}
actionable={true} actionable={true}
evaluated={true} evaluated={true}
@ -157,28 +122,6 @@ const TootBottomSheet: Component = (props) => {
</Show> </Show>
</article> </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"> <div class="bottom-dock">
<Show when={profile()}> <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);"> <div style="display: flex; gap: 8px; background: var(--tutu-color-surface); padding: 8px 8px calc(var(--safe-area-inset-bottom, 0px) + 8px);">

View file

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