Rubicon/tutu
1
0
Fork 0
Code Issues 19 Pull requests Projects Activity Actions

TimelinePanel: rewrite thread expand algorithm

Browse source
This commit is contained in:
thislight 2024-08-12 12:22:13 +08:00
parent 8787cb7ad0
commit 7c0fac95a0
2 changed files with 36 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/timelines/Home.tsx
View file

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

11
src/timelines/TootThread.tsx
View file

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