Compare commits

..

No commits in common. "29eaf1a02bee404a5c3f8bcb3f4a5d7c91125d9d" and "5afaf21f4b9ab93c0793c7cf86a7d3ba386bda12" have entirely different histories.

6 changed files with 185 additions and 141 deletions

View file

@ -18,9 +18,9 @@ type Timeline<T extends mastodon.DefaultPaginationParams> = {
type TimelineParamsOf<T> = T extends Timeline<infer P> ? P : never; type TimelineParamsOf<T> = T extends Timeline<infer P> ? P : never;
export type ThreadNode = TreeNode<mastodon.v1.Status>; function createControlsForLookup(
lookup: ReactiveMap<string, TreeNode<mastodon.v1.Status>>,
function createControlsForLookup(lookup: ReactiveMap<string, ThreadNode>) { ) {
return { return {
get(id: string) { get(id: string) {
return lookup.get(id); return lookup.get(id);
@ -37,7 +37,7 @@ function createControlsForLookup(lookup: ReactiveMap<string, ThreadNode>) {
set(id: string, value: mastodon.v1.Status) { set(id: string, value: mastodon.v1.Status) {
const node = untrack(() => lookup.get(id)); const node = untrack(() => lookup.get(id));
if (!node) return; if (!node) return;
lookup.set(id, { ...node, value }); lookup.set(id, {...node, value});
}, },
}; };
} }
@ -45,7 +45,7 @@ function createControlsForLookup(lookup: ReactiveMap<string, ThreadNode>) {
export function createTimelineControlsForArray( export function createTimelineControlsForArray(
status: () => mastodon.v1.Status[] | undefined, status: () => mastodon.v1.Status[] | undefined,
): TimelineControls { ): TimelineControls {
const lookup = new ReactiveMap<string, ThreadNode>(); const lookup = new ReactiveMap<string, TreeNode<mastodon.v1.Status>>();
const [threads, setThreads] = createStore([] as mastodon.v1.Status["id"][]); const [threads, setThreads] = createStore([] as mastodon.v1.Status["id"][]);
@ -55,24 +55,22 @@ export function createTimelineControlsForArray(
}); });
if (!nls) return; if (!nls) return;
batch(() => { setThreads([]);
setThreads([]); lookup.clear();
lookup.clear();
for (const status of nls) { const existence = [] as boolean[];
lookup.set(status.id, {
value: status,
});
}
});
untrack(() => { for (const [idx, status] of nls.entries()) {
for (const status of nls) { existence[idx] = !!untrack(() => lookup.get(status.id));
const node = lookup.get(status.id)!; lookup.set(status.id, {
const parent = status.inReplyToId value: status,
? lookup.get(status.inReplyToId) });
: undefined; }
for (const status of nls) {
const node = untrack(() => lookup.get(status.id))!;
if (status.inReplyToId) {
const parent = lookup.get(status.inReplyToId);
if (parent) { if (parent) {
const children = parent.children ?? []; const children = parent.children ?? [];
if (!children.find((x) => x.value.id == status.id)) { if (!children.find((x) => x.value.id == status.id)) {
@ -82,13 +80,12 @@ export function createTimelineControlsForArray(
node.parent = parent; node.parent = parent;
} }
} }
}); }
const newThreads = untrack(() => const newThreads = nls
nls .filter((x, i) => !existence[i])
.map((x) => x.id) .map((x) => x.id)
.filter((id) => (lookup.get(id)!.children?.length ?? 0) === 0), .filter((id) => (lookup.get(id)!.children?.length ?? 0) === 0);
);
setThreads(newThreads); setThreads(newThreads);
}); });
@ -272,34 +269,32 @@ export function createTimeline<
return; return;
} }
if (chk.rebuilt) {
lookup.clear();
setThreads([]);
}
const existence = [] as boolean[]; const existence = [] as boolean[];
batch(() => { for (const [idx, status] of chk.chunk.entries()) {
if (chk.rebuilt) { existence[idx] = !!untrack(() => lookup.get(status.id));
lookup.clear(); lookup.set(status.id, {
setThreads([]); value: status,
} });
}
for (const [idx, status] of chk.chunk.entries()) {
existence[idx] = !!untrack(() => lookup.get(status.id));
lookup.set(status.id, {
value: status,
});
}
});
for (const status of chk.chunk) { for (const status of chk.chunk) {
const node = untrack(() => lookup.get(status.id))!; const node = untrack(() => lookup.get(status.id))!;
const parent = untrack(() => if (status.inReplyToId) {
status.inReplyToId ? lookup.get(status.inReplyToId) : undefined, const parent = lookup.get(status.inReplyToId);
); if (parent) {
if (parent) { const children = parent.children ?? [];
const children = parent.children ?? []; if (!children.find((x) => x.value.id == status.id)) {
if (!children.find((x) => x.value.id == status.id)) { children.push(node);
children.push(node); }
parent.children = children;
node.parent = parent;
} }
parent.children = children;
node.parent = parent;
} }
} }

90
src/timelines/Thread.tsx Normal file
View file

@ -0,0 +1,90 @@
import type { mastodon } from "masto";
import { Index, type Component, type Ref } from "solid-js";
import RegularToot, { findRootToot } from "./RegularToot";
import cardStyle from "../material/cards.module.css";
import { css } from "solid-styled";
type TootActionTarget = {
client: mastodon.rest.Client;
status: mastodon.v1.Status;
};
type TootActions = {
onBoost(client: mastodon.rest.Client, status: mastodon.v1.Status): void;
onBookmark(client: mastodon.rest.Client, status: mastodon.v1.Status): void;
onReply(target: TootActionTarget, element: HTMLElement): void;
onFavourite(status: mastodon.v1.Status): void
};
type ThreadProps = {
ref?: Ref<HTMLElement>;
client: mastodon.rest.Client;
toots: readonly mastodon.v1.Status[];
isExpended: (status: mastodon.v1.Status) => boolean;
onItemClick(status: mastodon.v1.Status, event: MouseEvent): void;
} & TootActions;
const Thread: Component<ThreadProps> = (props) => {
const boost = (status: mastodon.v1.Status) => {
props.onBoost(props.client, status);
};
const bookmark = (status: mastodon.v1.Status) => {
props.onBookmark(props.client, status);
};
const reply = (
status: mastodon.v1.Status,
event: MouseEvent & { currentTarget: HTMLElement },
) => {
const element = findRootToot(event.currentTarget);
props.onReply({ client: props.client, status }, element);
};
const threading = () => props.toots.length > 1;
const posThread = (index: number) => {
if (!threading()) return;
if (index === 0) {
return "top";
} else if (index === props.toots.length - 1) {
return "bottom";
}
return "middle";
};
css`
.thread {
user-select: none;
cursor: pointer;
}
`;
return (
<article ref={props.ref} class="thread" aria-setsize={props.toots.length}>
<Index each={props.toots}>
{(status, index) => {
return (
<RegularToot
data-status-id={status().id}
data-thread-sort={index}
status={status()}
thread={posThread(index)}
class={cardStyle.card}
evaluated={props.isExpended(status())}
actionable={props.isExpended(status())}
onBookmark={(s) => bookmark(s)}
onRetoot={(s) => boost(s)}
onFavourite={props.onFavourite}
onReply={reply}
onClick={[props.onItemClick, status()]}
/>
);
}}
</Index>
</article>
);
};
export default Thread;

View file

@ -58,10 +58,9 @@ const TootBottomSheet: Component = (props) => {
}, },
); );
const toot = () => const toot = () => catchError(remoteToot, (error) => {
catchError(remoteToot, (error) => { console.error(error)
console.error(error); }) ?? getCache(acctText(), params.id);
}) ?? getCache(acctText(), params.id);
createEffect((lastTootId?: string) => { createEffect((lastTootId?: string) => {
const tootId = toot()?.id; const tootId = toot()?.id;

View file

@ -5,38 +5,22 @@ import {
ErrorBoundary, ErrorBoundary,
type Ref, type Ref,
createSelector, createSelector,
Index,
createMemo,
} from "solid-js"; } from "solid-js";
import { type mastodon } from "masto"; import { type mastodon } from "masto";
import { vibrate } from "../platform/hardware"; import { vibrate } from "../platform/hardware";
import Thread from "./Thread.jsx";
import { useDefaultSession } from "../masto/clients"; import { useDefaultSession } from "../masto/clients";
import { useHeroSource } from "../platform/anim"; import { useHeroSource } from "../platform/anim";
import { HERO as BOTTOM_SHEET_HERO } from "../material/BottomSheet"; import { HERO as BOTTOM_SHEET_HERO } from "../material/BottomSheet";
import { setCache as setTootBottomSheetCache } from "./TootBottomSheet"; import { setCache as setTootBottomSheetCache } from "./TootBottomSheet";
import { useNavigate } from "@solidjs/router"; import { useNavigate } from "@solidjs/router";
import RegularToot, { import { findElementActionable } from "./RegularToot";
findElementActionable,
findRootToot,
} from "./RegularToot";
import cardStyle from "../material/cards.module.css";
import type { ReactiveMap } from "@solid-primitives/map";
import type { ThreadNode } from "../masto/timelines";
function positionTootInThread(index: number, threadLength: number) {
if (index === 0) {
return "top";
} else if (index === threadLength - 1) {
return "bottom";
}
return "middle";
}
const TootList: Component<{ const TootList: Component<{
ref?: Ref<HTMLDivElement>; ref?: Ref<HTMLDivElement>;
id?: string; id?: string;
threads: readonly string[]; threads: readonly string[];
onUnknownThread: (id: string) => ThreadNode[] | undefined; onUnknownThread: (id: string) => { value: mastodon.v1.Status }[] | undefined;
onChangeToot: (id: string, value: mastodon.v1.Status) => void; onChangeToot: (id: string, value: mastodon.v1.Status) => void;
}> = (props) => { }> = (props) => {
const session = useDefaultSession(); const session = useDefaultSession();
@ -44,20 +28,20 @@ const TootList: Component<{
const [expandedThreadId, setExpandedThreadId] = createSignal<string>(); const [expandedThreadId, setExpandedThreadId] = createSignal<string>();
const navigate = useNavigate(); const navigate = useNavigate();
const onBookmark = async (status: mastodon.v1.Status) => { const onBookmark = async (
const client = session()?.client; client: mastodon.rest.Client,
if (!client) return; status: mastodon.v1.Status,
) => {
const result = await (status.bookmarked const result = await (status.bookmarked
? client.v1.statuses.$select(status.id).unbookmark() ? client.v1.statuses.$select(status.id).unbookmark()
: client.v1.statuses.$select(status.id).bookmark()); : client.v1.statuses.$select(status.id).bookmark());
props.onChangeToot(result.id, result); props.onChangeToot(result.id, result);
}; };
const toggleBoost = async (status: mastodon.v1.Status) => { const toggleBoost = async (
const client = session()?.client; client: mastodon.rest.Client,
if (!client) return; status: mastodon.v1.Status,
) => {
vibrate(50); vibrate(50);
const rootStatus = status.reblog ? status.reblog : status; const rootStatus = status.reblog ? status.reblog : status;
const reblogged = rootStatus.reblogged; const reblogged = rootStatus.reblogged;
@ -73,7 +57,7 @@ const TootList: Component<{
}); });
} }
/* const result = reblogged const result = reblogged
? await client.v1.statuses.$select(status.id).unreblog() ? await client.v1.statuses.$select(status.id).unreblog()
: (await client.v1.statuses.$select(status.id).reblog()).reblog!; : (await client.v1.statuses.$select(status.id).reblog()).reblog!;
@ -84,15 +68,13 @@ const TootList: Component<{
}); });
} else { } else {
props.onChangeToot(status.id, result); props.onChangeToot(status.id, result);
} */ }
}; };
const toggleFavourite = async (status: mastodon.v1.Status) => { const toggleFavourite = async (status: mastodon.v1.Status) => {
const client = session()?.client; const client = session()?.client;
if (!client) return; if (!client) return;
const ovalue = status.favourited; const ovalue = status.favourited;
props.onChangeToot(status.id, { ...status, favourited: !ovalue });
const result = ovalue const result = ovalue
? await client.v1.statuses.$select(status.id).unfavourite() ? await client.v1.statuses.$select(status.id).unfavourite()
: await client.v1.statuses.$select(status.id).favourite(); : await client.v1.statuses.$select(status.id).favourite();
@ -128,11 +110,8 @@ const TootList: Component<{
const onItemClick = ( const onItemClick = (
status: mastodon.v1.Status, status: mastodon.v1.Status,
event: MouseEvent & { target: EventTarget; currentTarget: HTMLElement }, event: MouseEvent & { target: HTMLElement; currentTarget: HTMLElement },
) => { ) => {
if (!(event.target instanceof HTMLElement)) {
throw new Error("target is not an element");
}
const actionableElement = findElementActionable( const actionableElement = findElementActionable(
event.target, event.target,
event.currentTarget, event.currentTarget,
@ -174,14 +153,20 @@ const TootList: Component<{
const checkIsExpended = (status: mastodon.v1.Status) => const checkIsExpended = (status: mastodon.v1.Status) =>
checkIsExpendedId(status.id); checkIsExpendedId(status.id);
const reply = ( const onReply = (
status: mastodon.v1.Status, { status }: { status: mastodon.v1.Status },
event: { currentTarget: HTMLElement }, element: HTMLElement,
) => { ) => {
const element = findRootToot(event.currentTarget);
openFullScreenToot(status, element, true); openFullScreenToot(status, element, true);
}; };
const getPath = (itemId: string) => {
return props
.onUnknownThread(itemId)!
.reverse()
.map((x) => x.value);
};
return ( return (
<ErrorBoundary <ErrorBoundary
fallback={(err, reset) => { fallback={(err, reset) => {
@ -189,46 +174,22 @@ const TootList: Component<{
}} }}
> >
<div ref={props.ref} id={props.id} class="toot-list"> <div ref={props.ref} id={props.id} class="toot-list">
<Index each={props.threads}> <For each={props.threads}>
{(threadId, threadIdx) => { {(itemId) => {
const thread = createMemo(() =>
props.onUnknownThread(threadId())?.reverse(),
);
const threadLength = () => thread()?.length ?? 0;
return ( return (
<Index each={thread()}> <Thread
{(threadNode, index) => { toots={getPath(itemId)}
const status = () => threadNode().value; onBoost={toggleBoost}
onBookmark={onBookmark}
return ( onReply={onReply}
<RegularToot onFavourite={toggleFavourite}
data-status-id={status().id} client={session()?.client!}
data-thread={threadIdx} isExpended={checkIsExpended}
data-thread-len={threadLength()} onItemClick={onItemClick}
data-thread-sort={index} />
status={status()}
thread={
threadLength() > 1
? positionTootInThread(index, threadLength())
: undefined
}
class={cardStyle.card}
evaluated={checkIsExpended(status())}
actionable={checkIsExpended(status())}
onBookmark={onBookmark}
onRetoot={toggleBoost}
onFavourite={toggleFavourite}
onReply={reply}
onClick={[onItemClick, status()]}
/>
);
}}
</Index>
); );
}} }}
</Index> </For>
</div> </div>
</ErrorBoundary> </ErrorBoundary>
); );

View file

@ -1,14 +1,18 @@
import { import {
Component, Component,
For,
createSignal, createSignal,
Match, Match,
Switch as JsSwitch, Switch as JsSwitch,
ErrorBoundary, ErrorBoundary,
createSelector,
} from "solid-js"; } from "solid-js";
import { type mastodon } from "masto"; import { type mastodon } from "masto";
import { Button } from "@suid/material"; import { Button } from "@suid/material";
import { createTimelineSnapshot } from "../masto/timelines.js"; import { createTimelineSnapshot } from "../masto/timelines.js";
import { vibrate } from "../platform/hardware.js";
import PullDownToRefresh from "./PullDownToRefresh.jsx"; import PullDownToRefresh from "./PullDownToRefresh.jsx";
import Thread from "./Thread.jsx";
import TootList from "./TootList.jsx"; import TootList from "./TootList.jsx";
const TrendTimelinePanel: Component<{ const TrendTimelinePanel: Component<{
@ -21,10 +25,11 @@ const TrendTimelinePanel: Component<{
) => void; ) => void;
}> = (props) => { }> = (props) => {
const [scrollLinked, setScrollLinked] = createSignal<HTMLElement>(); const [scrollLinked, setScrollLinked] = createSignal<HTMLElement>();
const [tl, snapshot, { refetch: refetchTimeline }] = createTimelineSnapshot( const [timeline, snapshot, { refetch: refetchTimeline }] =
() => props.client.v1.trends.statuses, createTimelineSnapshot(
() => ({ limit: 120 }), () => props.client.v1.trends.statuses,
); () => ({ limit: 120 }),
);
return ( return (
<ErrorBoundary <ErrorBoundary
@ -45,9 +50,9 @@ const TrendTimelinePanel: Component<{
} }
> >
<TootList <TootList
threads={tl.list} threads={timeline.list}
onUnknownThread={tl.getPath} onUnknownThread={timeline.getPath}
onChangeToot={tl.set} onChangeToot={timeline.set}
/> />
</div> </div>
<div <div

View file

@ -6,12 +6,6 @@
position: relative; position: relative;
contain: content; contain: content;
&:not(.expanded) {
user-select: none;
cursor: pointer;
}
&.toot { &.toot {
/* fix composition ordering: I think the css module processor should aware the overriding and behaves, but no */ /* fix composition ordering: I think the css module processor should aware the overriding and behaves, but no */
transition: transition: