Compare commits

..

No commits in common. "1a1fee8918e181c3adeff0bb71566fa0b8cd4e97" and "7181fdf154ea8c1e240b8e308d0cbc2f336c15e1" have entirely different histories.

5 changed files with 67 additions and 202 deletions

BIN
bun.lockb

Binary file not shown.

View file

@ -33,7 +33,6 @@
"@solid-primitives/event-listener": "^2.3.3", "@solid-primitives/event-listener": "^2.3.3",
"@solid-primitives/i18n": "^2.1.1", "@solid-primitives/i18n": "^2.1.1",
"@solid-primitives/intersection-observer": "^2.1.6", "@solid-primitives/intersection-observer": "^2.1.6",
"@solid-primitives/map": "^0.4.13",
"@solid-primitives/resize-observer": "^2.0.26", "@solid-primitives/resize-observer": "^2.0.26",
"@solidjs/router": "^0.14.5", "@solidjs/router": "^0.14.5",
"@suid/icons-material": "^0.8.0", "@suid/icons-material": "^0.8.0",

View file

@ -1,14 +1,5 @@
import { ReactiveMap } from "@solid-primitives/map";
import { type mastodon } from "masto"; import { type mastodon } from "masto";
import { import { Accessor, catchError, createEffect, createResource } from "solid-js";
Accessor,
batch,
catchError,
createEffect,
createResource,
untrack,
type ResourceFetcherInfo,
} from "solid-js";
import { createStore } from "solid-js/store"; import { createStore } from "solid-js/store";
type TimelineFetchTips = { type TimelineFetchTips = {
@ -173,148 +164,6 @@ export function createTimelineSnapshot(
] as const; ] as const;
} }
export type TimelineFetchDirection = mastodon.Direction; export function createTimeline(timeline: Accessor<Timeline>) {
// TODO
export type TimelineChunk = {
pager: mastodon.Paginator<mastodon.v1.Status[], unknown>;
chunk: readonly mastodon.v1.Status[];
done?: boolean;
direction: TimelineFetchDirection;
limit: number;
};
function checkOrCreatePager(
timeline: Timeline,
limit: number,
lastPager: TimelineChunk["pager"] | undefined,
newDirection: TimelineFetchDirection,
) {
if (!lastPager) {
return timeline.list({ }).setDirection(newDirection);
} else {
let pager = lastPager;
if (pager.getDirection() !== newDirection) {
pager = pager.setDirection(newDirection);
}
return pager;
}
}
type TreeNode<T> = {
parent?: TreeNode<T>;
value: T;
children?: TreeNode<T>[];
};
/** Collect the path of a node for the root.
* The first element is the node itself, the last element is the root.
*/
function collectPath<T>(node: TreeNode<T>) {
const path = [node] as TreeNode<T>[];
let current = node;
while (current.parent) {
path.push(current.parent);
current = current.parent;
}
return path;
}
export function createTimeline(
timeline: Accessor<Timeline>,
limit: Accessor<number>,
) {
const lookup = new ReactiveMap<string, TreeNode<mastodon.v1.Status>>();
const [threads, setThreads] = createStore([] as mastodon.v1.Status["id"][]);
const [chunk, { refetch }] = createResource(
() => [timeline(), limit()] as const,
async (
[tl, limit],
info: ResourceFetcherInfo<
Readonly<TimelineChunk>,
TimelineFetchDirection
>,
) => {
const direction =
typeof info.refetching === "boolean" ? "prev" : info.refetching;
const rebuildTimeline = limit !== info.value?.limit;
const pager = rebuildTimeline
? checkOrCreatePager(tl, limit, undefined, direction)
: checkOrCreatePager(tl, limit, info.value?.pager, direction);
if (rebuildTimeline) {
lookup.clear();
setThreads([]);
}
const posts = await pager.next();
return {
pager,
chunk: posts.value ?? [],
done: posts.done,
direction,
limit,
};
},
);
createEffect(() => {
const chk = catchError(chunk, (e) => console.error(e));
if (!chk) {
return;
}
console.debug("fetched chunk", chk);
batch(() => {
for (const status of chk.chunk) {
lookup.set(status.id, {
value: status,
});
}
for (const status of chk.chunk) {
const node = lookup.get(status.id)!;
if (status.inReplyToId) {
const parent = lookup.get(status.inReplyToId);
if (parent) {
const children = parent.children ?? [];
if (!children.find((x) => x.value.id == status.id)) {
children.push(node);
}
parent.children = children;
node.parent = parent;
}
}
}
if (chk.direction === "next") {
setThreads((threads) => [...threads, ...chk.chunk.map((x) => x.id)]);
} else if (chk.direction === "prev") {
setThreads((threads) => [...chk.chunk.map((x) => x.id), ...threads]);
}
setThreads((threads) =>
threads.filter((id) => (lookup.get(id)!.children?.length ?? 0) === 0),
);
});
});
return [
{
list: threads,
get(id: string) {
return lookup.get(id);
},
getPath(id: string) {
const node = lookup.get(id);
if (!node) return;
return collectPath(node);
},
set(id: string, value: mastodon.v1.Status) {
const node = untrack(() => lookup.get(id));
if (!node) return;
node.value = value;
lookup.set(id, node);
},
},
chunk,
{ refetch },
] as const;
} }

View file

@ -10,16 +10,19 @@ import {
ErrorBoundary, ErrorBoundary,
} from "solid-js"; } from "solid-js";
import { type mastodon } from "masto"; import { type mastodon } from "masto";
import { Button, LinearProgress } from "@suid/material"; import {
import { createTimeline } from "../masto/timelines"; Button,
LinearProgress,
} from "@suid/material";
import TootThread from "./TootThread.js";
import { useTimeline } from "../masto/timelines";
import { vibrate } from "../platform/hardware"; import { vibrate } from "../platform/hardware";
import PullDownToRefresh from "./PullDownToRefresh"; import PullDownToRefresh from "./PullDownToRefresh";
import TootComposer from "./TootComposer"; import TootComposer from "./TootComposer";
import Thread from "./Thread.jsx";
const TimelinePanel: Component<{ const TimelinePanel: Component<{
client: mastodon.rest.Client; client: mastodon.rest.Client;
name: "home" | "public"; name: "home" | "public" | "trends";
prefetch?: boolean; prefetch?: boolean;
fullRefetch?: number; fullRefetch?: number;
@ -30,56 +33,70 @@ const TimelinePanel: Component<{
) => void; ) => void;
}> = (props) => { }> = (props) => {
const [scrollLinked, setScrollLinked] = createSignal<HTMLElement>(); const [scrollLinked, setScrollLinked] = createSignal<HTMLElement>();
const [
const [timeline, snapshot, { refetch: refetchTimeline }] = createTimeline( timeline,
() => props.client.v1.timelines[props.name], snapshot,
() => 20, { refetch: refetchTimeline, mutate: mutateTimeline },
] = useTimeline(
() =>
props.name !== "trends"
? props.client.v1.timelines[props.name]
: props.client.v1.trends.statuses,
{ fullRefresh: props.fullRefetch },
); );
const [expandedThreadId, setExpandedThreadId] = createSignal<string>(); const [expandedThreadId, setExpandedThreadId] = createSignal<string>();
const [typing, setTyping] = createSignal(false); const [typing, setTyping] = createSignal(false);
const tlEndObserver = new IntersectionObserver(() => { const tlEndObserver = new IntersectionObserver(() => {
if (untrack(() => props.prefetch) && !snapshot.loading) if (untrack(() => props.prefetch) && !snapshot.loading)
refetchTimeline("next"); refetchTimeline({ direction: "old" });
}); });
onCleanup(() => tlEndObserver.disconnect()); onCleanup(() => tlEndObserver.disconnect());
const onBookmark = async ( const onBookmark = async (
index: number,
client: mastodon.rest.Client, client: mastodon.rest.Client,
status: mastodon.v1.Status, 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());
timeline.set(result.id, result); mutateTimeline((o) => {
o[index] = result;
return o;
});
}; };
const onBoost = async ( const onBoost = async (
index: number,
client: mastodon.rest.Client, client: mastodon.rest.Client,
status: mastodon.v1.Status, status: mastodon.v1.Status,
) => { ) => {
const reblogged = status.reblog
? status.reblog.reblogged
: status.reblogged;
vibrate(50); vibrate(50);
const rootStatus = status.reblog ? status.reblog : status; mutateTimeline(index, (x) => {
const reblogged = rootStatus.reblogged; if (x.reblog) {
if (status.reblog) { x.reblog = { ...x.reblog, reblogged: !reblogged };
status.reblog = { ...status.reblog, reblogged: !reblogged }; return Object.assign({}, x);
timeline.set(status.id, status); } else {
} else { return Object.assign({}, x, {
timeline.set(
status.id,
Object.assign(status, {
reblogged: !reblogged, reblogged: !reblogged,
}), });
); }
} });
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!;
timeline.set( mutateTimeline((o) => {
status.id, Object.assign(o[index].reblog ?? o[index], {
Object.assign(status.reblog ?? status, result.reblog), reblogged: result.reblogged,
); reblogsCount: result.reblogsCount,
});
return o;
});
}; };
return ( return (
@ -91,7 +108,7 @@ const TimelinePanel: Component<{
<PullDownToRefresh <PullDownToRefresh
linkedElement={scrollLinked()} linkedElement={scrollLinked()}
loading={snapshot.loading} loading={snapshot.loading}
onRefresh={() => refetchTimeline("prev")} onRefresh={() => refetchTimeline({ direction: "new" })}
/> />
<div <div
ref={(e) => ref={(e) =>
@ -108,32 +125,29 @@ const TimelinePanel: Component<{
isTyping={typing()} isTyping={typing()}
onTypingChange={setTyping} onTypingChange={setTyping}
client={props.client} client={props.client}
onSent={() => refetchTimeline("prev")} onSent={() => refetchTimeline({ direction: "new" })}
/> />
</Show> </Show>
<For each={timeline.list}> <For each={timeline}>
{(itemId, index) => { {(item, index) => {
let element: HTMLElement | undefined; let element: HTMLElement | undefined;
const path = timeline.getPath(itemId)!;
const toots = path.reverse().map((x) => x.value);
return ( return (
<Thread <TootThread
ref={element} ref={element}
toots={toots} status={item}
onBoost={onBoost} onBoost={(...args) => onBoost(index(), ...args)}
onBookmark={onBookmark} onBookmark={(...args) => onBookmark(index(), ...args)}
onReply={(client, status) => onReply={(client, status) =>
props.openFullScreenToot(status, element, true) props.openFullScreenToot(status, element, true)
} }
client={props.client} client={props.client}
isExpended={(status) => status.id === expandedThreadId()} expanded={item.id === expandedThreadId() ? 1 : 0}
onItemClick={(status) => { onExpandChange={(x) => {
setTyping(false); setTyping(false)
if (status.id !== expandedThreadId()) { if (item.id !== expandedThreadId()) {
setExpandedThreadId((x) => (x ? undefined : status.id)); setExpandedThreadId((x) => (x ? undefined : item.id));
} else { } else if (x === 2) {
props.openFullScreenToot(status, element); props.openFullScreenToot(item, element);
} }
}} }}
/> />
@ -165,7 +179,7 @@ const TimelinePanel: Component<{
<Match when={snapshot.error}> <Match when={snapshot.error}>
<Button <Button
variant="contained" variant="contained"
onClick={[refetchTimeline, "next"]} onClick={[refetchTimeline, "old"]}
disabled={snapshot.loading} disabled={snapshot.loading}
> >
Retry Retry
@ -174,7 +188,7 @@ const TimelinePanel: Component<{
<Match when={typeof props.fullRefetch === "undefined"}> <Match when={typeof props.fullRefetch === "undefined"}>
<Button <Button
variant="contained" variant="contained"
onClick={[refetchTimeline, "next"]} onClick={[refetchTimeline, "old"]}
disabled={snapshot.loading} disabled={snapshot.loading}
> >
Load More Load More
@ -186,4 +200,4 @@ const TimelinePanel: Component<{
); );
}; };
export default TimelinePanel; export default TimelinePanel

View file

@ -62,6 +62,9 @@ const TootBottomSheet: Component = (props) => {
} }
); );
}; };
const profile = () => {
return session().account;
};
const pushedCount = () => { const pushedCount = () => {
return location.state?.tootBottomSheetPushedCount || 0; return location.state?.tootBottomSheetPushedCount || 0;