TimelinePanel: rewrite thread expand algorithm
All checks were successful
/ depoly (push) Successful in 1m3s

This commit is contained in:
thislight 2024-08-12 12:22:13 +08:00
parent 1e6d4933b9
commit 1c0a83dbab
No known key found for this signature in database
GPG key ID: A50F9451AC56A63E
2 changed files with 36 additions and 31 deletions

View file

@ -55,6 +55,7 @@ const TimelinePanel: Component<{
? props.client.v1.timelines[props.name]
: props.client.v1.trends.statuses,
);
const [expandedThreadId, setExpandedThreadId] = createSignal<string>();
const tlEndObserver = new IntersectionObserver(() => {
if (untrack(() => props.prefetch) && !snapshot.loading)
@ -130,6 +131,12 @@ const TimelinePanel: Component<{
onBoost={(...args) => onBoost(index(), ...args)}
onBookmark={(...args) => onBookmark(index(), ...args)}
client={props.client}
expanded={item.id === expandedThreadId() ? 1 : 0}
onExpandChange={() =>
setExpandedThreadId(
item.id !== expandedThreadId() ? item.id : undefined,
)
}
/>
);
}}
@ -138,38 +145,33 @@ const TimelinePanel: Component<{
<div ref={(e) => tlEndObserver.observe(e)}></div>
<Show when={snapshot.loading}>
<div class="loading-line" style={{ width: "100%" }}>
<div
class="loading-line"
style={{
width: "100%",
}}
>
<LinearProgress />
</div>
</Show>
<Show when={snapshot.error}>
<div
style={{
display: "flex",
padding: "20px 0 var(--safe-area-inset-bottom, 20px)",
padding: "20px 0 calc(20px + var(--safe-area-inset-bottom, 0px))",
"align-items": "center",
"justify-content": "center",
}}
>
<Button variant="contained" onClick={[refetchTimeline, "old"]}>
<Button
variant="contained"
onClick={[refetchTimeline, "old"]}
disabled={snapshot.loading}
>
<Show when={snapshot.error} fallback={<>Load More</>}>
Retry
</Show>
</Button>
</div>
</Show>
<Show when={!props.prefetch && !snapshot.loading}>
<div
style={{
display: "flex",
padding: "20px 0 var(--safe-area-inset-bottom, 20px)",
"align-items": "center",
"justify-content": "center",
}}
>
<Button variant="contained" onClick={[refetchTimeline, "old"]}>
Load More
</Button>
</div>
</Show>
</>
);
};

View file

@ -13,12 +13,13 @@ type TootThreadProps = {
onBoost?(client: mastodon.rest.Client, status: mastodon.v1.Status): void;
onBookmark?(client: mastodon.rest.Client, status: mastodon.v1.Status): void;
onExpandChange?(level: 0 | 1 | 2): void;
};
const TootThread: Component<TootThreadProps> = (props) => {
const status = () => props.status;
const now = useTimeSource();
const [expanded, setExpanded] = createSignal(false);
const expanded = () => props.expanded ?? 0;
const [inReplyTo] = createResource(
() => [props.client, status().inReplyToId || null] as const,
@ -65,10 +66,12 @@ const TootThread: Component<TootThreadProps> = (props) => {
}
`;
const nextExpandLevel = [1, 2, 2] as const;
return (
<article
classList={{ "thread-line": !!inReplyTo(), expanded: expanded() }}
onClick={() => setExpanded((x) => !x)}
classList={{ "thread-line": !!inReplyTo(), expanded: expanded() > 0 }}
onClick={() => props.onExpandChange?.(nextExpandLevel[expanded()])}
>
<Show when={inReplyTo()}>
<CompactToot
@ -80,7 +83,7 @@ const TootThread: Component<TootThreadProps> = (props) => {
<RegularToot
status={status()}
class={cardStyle.card}
actionable={expanded()}
actionable={expanded() > 0}
onBookmark={(s) => bookmark(s)}
onRetoot={(s) => boost(s)}
/>