diff --git a/src/timelines/Home.tsx b/src/timelines/Home.tsx index 2330354..901fc37 100644 --- a/src/timelines/Home.tsx +++ b/src/timelines/Home.tsx @@ -55,6 +55,7 @@ const TimelinePanel: Component<{ ? props.client.v1.timelines[props.name] : props.client.v1.trends.statuses, ); + const [expandedThreadId, setExpandedThreadId] = createSignal(); 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<{
tlEndObserver.observe(e)}>
-
+
- -
+ -
-
- -
- -
-
+ + +
); }; diff --git a/src/timelines/TootThread.tsx b/src/timelines/TootThread.tsx index c23b8f4..bde32d4 100644 --- a/src/timelines/TootThread.tsx +++ b/src/timelines/TootThread.tsx @@ -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 = (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 = (props) => { } `; + const nextExpandLevel = [1, 2, 2] as const; + return (
setExpanded((x) => !x)} + classList={{ "thread-line": !!inReplyTo(), expanded: expanded() > 0 }} + onClick={() => props.onExpandChange?.(nextExpandLevel[expanded()])} > = (props) => { 0} onBookmark={(s) => bookmark(s)} onRetoot={(s) => boost(s)} />