Compare commits
No commits in common. "1a1fee8918e181c3adeff0bb71566fa0b8cd4e97" and "7181fdf154ea8c1e240b8e308d0cbc2f336c15e1" have entirely different histories.
1a1fee8918
...
7181fdf154
5 changed files with 67 additions and 202 deletions
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
|
@ -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",
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue