Compare commits
4 commits
1a1fee8918
...
6592d71a46
Author | SHA1 | Date | |
---|---|---|---|
|
6592d71a46 | ||
|
82a9c9b468 | ||
|
e16fdbe579 | ||
|
196a7d10ac |
7 changed files with 225 additions and 237 deletions
|
@ -11,114 +11,19 @@ import {
|
||||||
} from "solid-js";
|
} from "solid-js";
|
||||||
import { createStore } from "solid-js/store";
|
import { createStore } from "solid-js/store";
|
||||||
|
|
||||||
type TimelineFetchTips = {
|
|
||||||
direction?: "new" | "old";
|
|
||||||
};
|
|
||||||
|
|
||||||
type Timeline = {
|
type Timeline = {
|
||||||
list(params: {
|
list(params: {
|
||||||
|
/** Return results older than this ID. */
|
||||||
|
readonly maxId?: string;
|
||||||
|
/** Return results newer than this ID. */
|
||||||
|
readonly sinceId?: string;
|
||||||
|
/** Get a list of items with ID greater than this value excluding this ID */
|
||||||
|
readonly minId?: string;
|
||||||
|
/** Maximum number of results to return per page. Defaults to 40. NOTE: Pagination is done with the Link header from the response. */
|
||||||
readonly limit?: number;
|
readonly limit?: number;
|
||||||
}): mastodon.Paginator<mastodon.v1.Status[], unknown>;
|
}): mastodon.Paginator<mastodon.v1.Status[], unknown>;
|
||||||
};
|
};
|
||||||
|
|
||||||
export function useTimeline(
|
|
||||||
timeline: Accessor<Timeline>,
|
|
||||||
cfg?: {
|
|
||||||
/**
|
|
||||||
* Use full refresh mode. This mode ignores paging, it will refetch the specified number
|
|
||||||
* of toots at every refetch().
|
|
||||||
*/
|
|
||||||
fullRefresh?: number;
|
|
||||||
},
|
|
||||||
) {
|
|
||||||
let otl: Timeline | undefined;
|
|
||||||
let npager: mastodon.Paginator<mastodon.v1.Status[], unknown> | undefined;
|
|
||||||
let opager: mastodon.Paginator<mastodon.v1.Status[], unknown> | undefined;
|
|
||||||
const [snapshot, { refetch }] = createResource<
|
|
||||||
{
|
|
||||||
records: mastodon.v1.Status[];
|
|
||||||
direction: "new" | "old" | "items";
|
|
||||||
tlChanged: boolean;
|
|
||||||
},
|
|
||||||
[Timeline],
|
|
||||||
TimelineFetchTips | undefined
|
|
||||||
>(
|
|
||||||
() => [timeline()] as const,
|
|
||||||
async ([tl], info) => {
|
|
||||||
let tlChanged = false;
|
|
||||||
if (otl !== tl) {
|
|
||||||
npager = opager = undefined;
|
|
||||||
otl = tl;
|
|
||||||
tlChanged = true;
|
|
||||||
}
|
|
||||||
const fullRefresh = cfg?.fullRefresh;
|
|
||||||
if (typeof fullRefresh !== "undefined") {
|
|
||||||
const records = await tl
|
|
||||||
.list({
|
|
||||||
limit: fullRefresh,
|
|
||||||
})
|
|
||||||
.next();
|
|
||||||
return {
|
|
||||||
direction: "items",
|
|
||||||
records: records.value ?? [],
|
|
||||||
end: records.done,
|
|
||||||
tlChanged,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
const direction =
|
|
||||||
typeof info.refetching !== "boolean"
|
|
||||||
? (info.refetching?.direction ?? "old")
|
|
||||||
: "old";
|
|
||||||
if (direction === "old") {
|
|
||||||
if (!opager) {
|
|
||||||
opager = tl.list({}).setDirection("next");
|
|
||||||
}
|
|
||||||
const next = await opager.next();
|
|
||||||
return {
|
|
||||||
direction,
|
|
||||||
records: next.value ?? [],
|
|
||||||
end: next.done,
|
|
||||||
tlChanged,
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
if (!npager) {
|
|
||||||
npager = tl.list({}).setDirection("prev");
|
|
||||||
}
|
|
||||||
const next = await npager.next();
|
|
||||||
const page = next.value ?? [];
|
|
||||||
return { direction, records: page, end: next.done, tlChanged };
|
|
||||||
}
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
const [store, setStore] = createStore([] as mastodon.v1.Status[]);
|
|
||||||
|
|
||||||
createEffect(() => {
|
|
||||||
const shot = snapshot();
|
|
||||||
if (!shot) return;
|
|
||||||
const { direction, records, tlChanged } = shot;
|
|
||||||
if (tlChanged) {
|
|
||||||
setStore(() => []);
|
|
||||||
}
|
|
||||||
if (direction === "new") {
|
|
||||||
setStore((x) => [...records, ...x]);
|
|
||||||
} else if (direction === "old") {
|
|
||||||
setStore((x) => [...x, ...records]);
|
|
||||||
} else if (direction === "items") {
|
|
||||||
setStore(() => records);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return [
|
|
||||||
store,
|
|
||||||
snapshot,
|
|
||||||
{
|
|
||||||
refetch,
|
|
||||||
mutate: setStore,
|
|
||||||
},
|
|
||||||
] as const;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function createTimelineSnapshot(
|
export function createTimelineSnapshot(
|
||||||
timeline: Accessor<Timeline>,
|
timeline: Accessor<Timeline>,
|
||||||
limit: Accessor<number>,
|
limit: Accessor<number>,
|
||||||
|
@ -176,30 +81,13 @@ export function createTimelineSnapshot(
|
||||||
export type TimelineFetchDirection = mastodon.Direction;
|
export type TimelineFetchDirection = mastodon.Direction;
|
||||||
|
|
||||||
export type TimelineChunk = {
|
export type TimelineChunk = {
|
||||||
pager: mastodon.Paginator<mastodon.v1.Status[], unknown>;
|
tl: Timeline;
|
||||||
chunk: readonly mastodon.v1.Status[];
|
chunk: readonly mastodon.v1.Status[];
|
||||||
done?: boolean;
|
done?: boolean;
|
||||||
direction: TimelineFetchDirection;
|
direction: TimelineFetchDirection;
|
||||||
limit: number;
|
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> = {
|
type TreeNode<T> = {
|
||||||
parent?: TreeNode<T>;
|
parent?: TreeNode<T>;
|
||||||
value: T;
|
value: T;
|
||||||
|
@ -226,6 +114,38 @@ export function createTimeline(
|
||||||
const lookup = new ReactiveMap<string, TreeNode<mastodon.v1.Status>>();
|
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"][]);
|
||||||
|
|
||||||
|
let vpMaxId: string | undefined, vpMinId: string | undefined;
|
||||||
|
|
||||||
|
const fetchExtendingPage = async (
|
||||||
|
tl: Timeline,
|
||||||
|
direction: TimelineFetchDirection,
|
||||||
|
limit: number,
|
||||||
|
) => {
|
||||||
|
switch (direction) {
|
||||||
|
case "next": {
|
||||||
|
const page = await tl
|
||||||
|
.list({ limit, sinceId: vpMaxId })
|
||||||
|
.setDirection(direction)
|
||||||
|
.next();
|
||||||
|
if ((page.value?.length ?? 0) > 0) {
|
||||||
|
vpMaxId = page.value![0].id;
|
||||||
|
}
|
||||||
|
return page;
|
||||||
|
}
|
||||||
|
|
||||||
|
case "prev": {
|
||||||
|
const page = await tl
|
||||||
|
.list({ limit, maxId: vpMinId })
|
||||||
|
.setDirection(direction)
|
||||||
|
.next();
|
||||||
|
if ((page.value?.length ?? 0) > 0) {
|
||||||
|
vpMinId = page.value![page.value!.length - 1].id;
|
||||||
|
}
|
||||||
|
return page;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const [chunk, { refetch }] = createResource(
|
const [chunk, { refetch }] = createResource(
|
||||||
() => [timeline(), limit()] as const,
|
() => [timeline(), limit()] as const,
|
||||||
async (
|
async (
|
||||||
|
@ -237,17 +157,16 @@ export function createTimeline(
|
||||||
) => {
|
) => {
|
||||||
const direction =
|
const direction =
|
||||||
typeof info.refetching === "boolean" ? "prev" : info.refetching;
|
typeof info.refetching === "boolean" ? "prev" : info.refetching;
|
||||||
const rebuildTimeline = limit !== info.value?.limit;
|
const rebuildTimeline = tl !== info.value?.tl;
|
||||||
const pager = rebuildTimeline
|
|
||||||
? checkOrCreatePager(tl, limit, undefined, direction)
|
|
||||||
: checkOrCreatePager(tl, limit, info.value?.pager, direction);
|
|
||||||
if (rebuildTimeline) {
|
if (rebuildTimeline) {
|
||||||
|
vpMaxId = undefined;
|
||||||
|
vpMinId = undefined;
|
||||||
lookup.clear();
|
lookup.clear();
|
||||||
setThreads([]);
|
setThreads([]);
|
||||||
}
|
}
|
||||||
const posts = await pager.next();
|
const posts = await fetchExtendingPage(tl, direction, limit);
|
||||||
return {
|
return {
|
||||||
pager,
|
tl,
|
||||||
chunk: posts.value ?? [],
|
chunk: posts.value ?? [],
|
||||||
done: posts.done,
|
done: posts.done,
|
||||||
direction,
|
direction,
|
||||||
|
@ -261,17 +180,18 @@ export function createTimeline(
|
||||||
if (!chk) {
|
if (!chk) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
console.debug("fetched chunk", chk);
|
|
||||||
|
|
||||||
batch(() => {
|
const existence = [] as boolean[];
|
||||||
for (const status of chk.chunk) {
|
|
||||||
|
for (const [idx, status] of chk.chunk.entries()) {
|
||||||
|
existence[idx] = !!untrack(() => lookup.get(status.id));
|
||||||
lookup.set(status.id, {
|
lookup.set(status.id, {
|
||||||
value: status,
|
value: status,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
for (const status of chk.chunk) {
|
for (const status of chk.chunk) {
|
||||||
const node = lookup.get(status.id)!;
|
const node = untrack(() => lookup.get(status.id))!;
|
||||||
if (status.inReplyToId) {
|
if (status.inReplyToId) {
|
||||||
const parent = lookup.get(status.inReplyToId);
|
const parent = lookup.get(status.inReplyToId);
|
||||||
if (parent) {
|
if (parent) {
|
||||||
|
@ -284,10 +204,16 @@ export function createTimeline(
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (chk.direction === "next") {
|
|
||||||
setThreads((threads) => [...threads, ...chk.chunk.map((x) => x.id)]);
|
const nThreadIds = chk.chunk
|
||||||
} else if (chk.direction === "prev") {
|
.filter((x, i) => !existence[i])
|
||||||
setThreads((threads) => [...chk.chunk.map((x) => x.id), ...threads]);
|
.map((x) => x.id);
|
||||||
|
|
||||||
|
batch(() => {
|
||||||
|
if (chk.direction === "prev") {
|
||||||
|
setThreads((threads) => [...threads, ...nThreadIds]);
|
||||||
|
} else if (chk.direction === "next") {
|
||||||
|
setThreads((threads) => [...nThreadIds, ...threads]);
|
||||||
}
|
}
|
||||||
|
|
||||||
setThreads((threads) =>
|
setThreads((threads) =>
|
||||||
|
|
|
@ -270,7 +270,9 @@ const Home: ParentComponent = (props) => {
|
||||||
</TimeSourceProvider>
|
</TimeSourceProvider>
|
||||||
<Suspense>
|
<Suspense>
|
||||||
<HeroSourceProvider value={[heroSrc, setHeroSrc]}>
|
<HeroSourceProvider value={[heroSrc, setHeroSrc]}>
|
||||||
<BottomSheet open={!!child()}>{child()}</BottomSheet>
|
<BottomSheet open={!!child()} onClose={() => navigate(-1)}>
|
||||||
|
{child()}
|
||||||
|
</BottomSheet>
|
||||||
</HeroSourceProvider>
|
</HeroSourceProvider>
|
||||||
</Suspense>
|
</Suspense>
|
||||||
</Scaffold>
|
</Scaffold>
|
||||||
|
|
|
@ -66,7 +66,7 @@ const MediaAttachmentGrid: Component<{
|
||||||
|
|
||||||
css`
|
css`
|
||||||
.attachments {
|
.attachments {
|
||||||
column-count: ${columnCount.toString()};
|
column-count: ${columnCount().toString()};
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -52,7 +52,7 @@ const PullDownToRefresh: Component<{
|
||||||
let lts = -1;
|
let lts = -1;
|
||||||
let ds = 0;
|
let ds = 0;
|
||||||
let holding = false;
|
let holding = false;
|
||||||
const K = 10;
|
const K = 20;
|
||||||
const updatePullDown = (ts: number) => {
|
const updatePullDown = (ts: number) => {
|
||||||
released = false;
|
released = false;
|
||||||
try {
|
try {
|
||||||
|
@ -60,8 +60,9 @@ const PullDownToRefresh: Component<{
|
||||||
const dt = lts !== -1 ? ts - lts : 1 / 60;
|
const dt = lts !== -1 ? ts - lts : 1 / 60;
|
||||||
const vspring = holding ? 0 : K * x * dt;
|
const vspring = holding ? 0 : K * x * dt;
|
||||||
v = ds / dt - vspring;
|
v = ds / dt - vspring;
|
||||||
|
const final = Math.max(Math.min(x + v * dt, stopPos()), 0);
|
||||||
|
|
||||||
setPullDown(Math.max(Math.min(x + v * dt, stopPos()), 0));
|
setPullDown(final);
|
||||||
|
|
||||||
if (Math.abs(x) > 1 || Math.abs(v) > 1) {
|
if (Math.abs(x) > 1 || Math.abs(v) > 1) {
|
||||||
requestAnimationFrame(updatePullDown);
|
requestAnimationFrame(updatePullDown);
|
||||||
|
@ -69,15 +70,6 @@ const PullDownToRefresh: Component<{
|
||||||
v = 0;
|
v = 0;
|
||||||
lts = -1;
|
lts = -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (
|
|
||||||
!holding &&
|
|
||||||
untrack(pullDown) >= stopPos() &&
|
|
||||||
!props.loading &&
|
|
||||||
props.onRefresh
|
|
||||||
) {
|
|
||||||
setTimeout(props.onRefresh, 0);
|
|
||||||
}
|
|
||||||
} finally {
|
} finally {
|
||||||
ds = 0;
|
ds = 0;
|
||||||
released = true;
|
released = true;
|
||||||
|
@ -89,6 +81,11 @@ const PullDownToRefresh: Component<{
|
||||||
const onWheelNotUpdated = () => {
|
const onWheelNotUpdated = () => {
|
||||||
wheelTimeout = undefined;
|
wheelTimeout = undefined;
|
||||||
holding = false;
|
holding = false;
|
||||||
|
|
||||||
|
if (released) {
|
||||||
|
released = false;
|
||||||
|
requestAnimationFrame(updatePullDown);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleLinkedWheel = (event: WheelEvent) => {
|
const handleLinkedWheel = (event: WheelEvent) => {
|
||||||
|
@ -97,11 +94,18 @@ const PullDownToRefresh: Component<{
|
||||||
const d = untrack(pullDown);
|
const d = untrack(pullDown);
|
||||||
if (d > 1) event.preventDefault();
|
if (d > 1) event.preventDefault();
|
||||||
ds = -(event.deltaY / window.devicePixelRatio / 2);
|
ds = -(event.deltaY / window.devicePixelRatio / 2);
|
||||||
holding = d < stopPos();
|
|
||||||
if (wheelTimeout) {
|
if (wheelTimeout) {
|
||||||
clearTimeout(wheelTimeout);
|
clearTimeout(wheelTimeout);
|
||||||
}
|
}
|
||||||
|
if (d >= stopPos() && !props.loading) {
|
||||||
|
props.onRefresh?.();
|
||||||
|
|
||||||
|
holding = false;
|
||||||
|
wheelTimeout = undefined;
|
||||||
|
} else {
|
||||||
|
holding = true;
|
||||||
wheelTimeout = setTimeout(onWheelNotUpdated, 200);
|
wheelTimeout = setTimeout(onWheelNotUpdated, 200);
|
||||||
|
}
|
||||||
|
|
||||||
if (released) {
|
if (released) {
|
||||||
released = false;
|
released = false;
|
||||||
|
@ -151,12 +155,8 @@ const PullDownToRefresh: Component<{
|
||||||
lastTouchId = undefined;
|
lastTouchId = undefined;
|
||||||
lastTouchScreenY = 0;
|
lastTouchScreenY = 0;
|
||||||
holding = false;
|
holding = false;
|
||||||
if (
|
if (untrack(pullDown) >= stopPos() && !props.loading) {
|
||||||
untrack(indicatorOfsY) >= stopPos() &&
|
props.onRefresh?.();
|
||||||
!props.loading &&
|
|
||||||
props.onRefresh
|
|
||||||
) {
|
|
||||||
setTimeout(props.onRefresh, 0);
|
|
||||||
} else {
|
} else {
|
||||||
if (released) {
|
if (released) {
|
||||||
released = false;
|
released = false;
|
||||||
|
@ -203,9 +203,7 @@ const PullDownToRefresh: Component<{
|
||||||
background-color: var(--tutu-color-surface);
|
background-color: var(--tutu-color-surface);
|
||||||
|
|
||||||
> :global(.refresh-icon) {
|
> :global(.refresh-icon) {
|
||||||
transform: rotate(
|
transform: rotate(${`${(indicatorOfsY() / 160 / 2).toString()}turn`});
|
||||||
${`${((indicatorOfsY() / 160) * 180).toString()}deg`}
|
|
||||||
);
|
|
||||||
will-change: transform;
|
will-change: transform;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -111,13 +111,17 @@ type TootActionGroupProps<T extends mastodon.v1.Status> = {
|
||||||
onRetoot?: (value: T) => void;
|
onRetoot?: (value: T) => void;
|
||||||
onFavourite?: (value: T) => void;
|
onFavourite?: (value: T) => void;
|
||||||
onBookmark?: (value: T) => void;
|
onBookmark?: (value: T) => void;
|
||||||
onReply?: (value: T) => void;
|
onReply?: (
|
||||||
|
value: T,
|
||||||
|
event: MouseEvent & { currentTarget: HTMLButtonElement },
|
||||||
|
) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
type TootCardProps = {
|
type TootCardProps = {
|
||||||
status: mastodon.v1.Status;
|
status: mastodon.v1.Status;
|
||||||
actionable?: boolean;
|
actionable?: boolean;
|
||||||
evaluated?: boolean;
|
evaluated?: boolean;
|
||||||
|
thread?: "top" | "bottom" | "middle";
|
||||||
} & TootActionGroupProps<mastodon.v1.Status> &
|
} & TootActionGroupProps<mastodon.v1.Status> &
|
||||||
JSX.HTMLElementTags["article"];
|
JSX.HTMLElementTags["article"];
|
||||||
|
|
||||||
|
@ -125,19 +129,40 @@ function isolatedCallback(e: MouseEvent) {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function findRootToot(element: HTMLElement) {
|
||||||
|
let current: HTMLElement | null = element;
|
||||||
|
while (current && !current.classList.contains(tootStyle.toot)) {
|
||||||
|
current = current.parentElement;
|
||||||
|
}
|
||||||
|
if (!current) {
|
||||||
|
throw Error(
|
||||||
|
`the element must be placed under a element with ${tootStyle.toot}`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return current;
|
||||||
|
}
|
||||||
|
|
||||||
function TootActionGroup<T extends mastodon.v1.Status>(
|
function TootActionGroup<T extends mastodon.v1.Status>(
|
||||||
props: TootActionGroupProps<T> & { value: T },
|
props: TootActionGroupProps<T> & { value: T },
|
||||||
) {
|
) {
|
||||||
|
let actGrpElement: HTMLDivElement;
|
||||||
const toot = () => props.value;
|
const toot = () => props.value;
|
||||||
return (
|
return (
|
||||||
<div class={tootStyle.tootBottomActionGrp} onClick={isolatedCallback}>
|
<div
|
||||||
|
ref={actGrpElement!}
|
||||||
|
class={tootStyle.tootBottomActionGrp}
|
||||||
|
onClick={isolatedCallback}
|
||||||
|
>
|
||||||
|
<Show when={props.onReply}>
|
||||||
<Button
|
<Button
|
||||||
class={tootStyle.tootActionWithCount}
|
class={tootStyle.tootActionWithCount}
|
||||||
onClick={() => props.onReply?.(toot())}
|
onClick={[props.onReply!, props.value]}
|
||||||
>
|
>
|
||||||
<ReplyAll />
|
<ReplyAll />
|
||||||
<span>{toot().repliesCount}</span>
|
<span>{toot().repliesCount}</span>
|
||||||
</Button>
|
</Button>
|
||||||
|
</Show>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
class={tootStyle.tootActionWithCount}
|
class={tootStyle.tootActionWithCount}
|
||||||
style={{
|
style={{
|
||||||
|
@ -288,7 +313,7 @@ const RegularToot: Component<TootCardProps> = (props) => {
|
||||||
let rootRef: HTMLElement;
|
let rootRef: HTMLElement;
|
||||||
const [managed, managedActionGroup, rest] = splitProps(
|
const [managed, managedActionGroup, rest] = splitProps(
|
||||||
props,
|
props,
|
||||||
["status", "lang", "class", "actionable", "evaluated"],
|
["status", "lang", "class", "actionable", "evaluated", "thread"],
|
||||||
["onRetoot", "onFavourite", "onBookmark", "onReply"],
|
["onRetoot", "onFavourite", "onBookmark", "onReply"],
|
||||||
);
|
);
|
||||||
const now = useTimeSource();
|
const now = useTimeSource();
|
||||||
|
@ -300,6 +325,42 @@ const RegularToot: Component<TootCardProps> = (props) => {
|
||||||
margin-left: calc(var(--toot-avatar-size) + var(--card-pad) + 8px);
|
margin-left: calc(var(--toot-avatar-size) + var(--card-pad) + 8px);
|
||||||
margin-block: 8px;
|
margin-block: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.thread-top,
|
||||||
|
.thread-mid,
|
||||||
|
.thread-btm {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 36px;
|
||||||
|
background-color: var(--tutu-color-secondary);
|
||||||
|
width: 2px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.thread-mid {
|
||||||
|
&::before {
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.thread-top {
|
||||||
|
&::before {
|
||||||
|
top: 16px;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.thread-btm {
|
||||||
|
&::before {
|
||||||
|
top: 0;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -308,6 +369,9 @@ const RegularToot: Component<TootCardProps> = (props) => {
|
||||||
classList={{
|
classList={{
|
||||||
[tootStyle.toot]: true,
|
[tootStyle.toot]: true,
|
||||||
[tootStyle.expanded]: managed.evaluated,
|
[tootStyle.expanded]: managed.evaluated,
|
||||||
|
"thread-top": managed.thread === "top",
|
||||||
|
"thread-mid": managed.thread === "middle",
|
||||||
|
"thread-btm": managed.thread === "bottom",
|
||||||
[managed.class || ""]: true,
|
[managed.class || ""]: true,
|
||||||
}}
|
}}
|
||||||
ref={rootRef!}
|
ref={rootRef!}
|
||||||
|
|
|
@ -9,14 +9,19 @@ import {
|
||||||
} from "solid-js";
|
} from "solid-js";
|
||||||
import CompactToot from "./CompactToot";
|
import CompactToot from "./CompactToot";
|
||||||
import { useTimeSource } from "../platform/timesrc";
|
import { useTimeSource } from "../platform/timesrc";
|
||||||
import RegularToot from "./RegularToot";
|
import RegularToot, { findRootToot } from "./RegularToot";
|
||||||
import cardStyle from "../material/cards.module.css";
|
import cardStyle from "../material/cards.module.css";
|
||||||
import { css } from "solid-styled";
|
import { css } from "solid-styled";
|
||||||
|
|
||||||
|
type TootActionTarget = {
|
||||||
|
client: mastodon.rest.Client;
|
||||||
|
status: mastodon.v1.Status;
|
||||||
|
};
|
||||||
|
|
||||||
type TootActions = {
|
type TootActions = {
|
||||||
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;
|
||||||
onReply(client: mastodon.rest.Client, status: mastodon.v1.Status): void;
|
onReply(target: TootActionTarget, element: HTMLElement): void;
|
||||||
};
|
};
|
||||||
|
|
||||||
type ThreadProps = {
|
type ThreadProps = {
|
||||||
|
@ -37,55 +42,48 @@ const Thread: Component<ThreadProps> = (props) => {
|
||||||
props.onBookmark(props.client, status);
|
props.onBookmark(props.client, status);
|
||||||
};
|
};
|
||||||
|
|
||||||
const reply = (status: mastodon.v1.Status) => {
|
const reply = (
|
||||||
props.onReply(props.client, status);
|
status: mastodon.v1.Status,
|
||||||
|
event: MouseEvent & { currentTarget: HTMLElement },
|
||||||
|
) => {
|
||||||
|
const element = findRootToot(event.currentTarget);
|
||||||
|
props.onReply({ client: props.client, status }, element);
|
||||||
};
|
};
|
||||||
|
|
||||||
css`
|
css`
|
||||||
article {
|
.thread {
|
||||||
transition:
|
|
||||||
margin 90ms var(--tutu-anim-curve-sharp),
|
|
||||||
var(--tutu-transition-shadow);
|
|
||||||
user-select: none;
|
user-select: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
`
|
||||||
.thread-line {
|
|
||||||
position: relative;
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: 36px;
|
|
||||||
top: 16px;
|
|
||||||
bottom: 0;
|
|
||||||
background-color: var(--tutu-color-secondary);
|
|
||||||
width: 2px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
return (
|
return (
|
||||||
<article
|
<article ref={props.ref} class="thread">
|
||||||
ref={props.ref}
|
|
||||||
classList={{
|
|
||||||
"thread-line": props.toots.length > 1,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<For each={props.toots}>
|
<For each={props.toots}>
|
||||||
{(status, index) => (
|
{(status, index) => {
|
||||||
|
const useThread = props.toots.length > 1;
|
||||||
|
const threadPosition = useThread
|
||||||
|
? index() === 0
|
||||||
|
? "top"
|
||||||
|
: index() === props.toots.length - 1
|
||||||
|
? "bottom"
|
||||||
|
: "middle"
|
||||||
|
: undefined;
|
||||||
|
return (
|
||||||
<RegularToot
|
<RegularToot
|
||||||
data-status-id={status.id}
|
data-status-id={status.id}
|
||||||
data-thread-sort={index()}
|
data-thread-sort={index()}
|
||||||
status={status}
|
status={status}
|
||||||
class={`${cardStyle.card}`}
|
thread={threadPosition}
|
||||||
|
class={cardStyle.card}
|
||||||
evaluated={props.isExpended(status)}
|
evaluated={props.isExpended(status)}
|
||||||
actionable={props.isExpended(status)}
|
actionable={props.isExpended(status)}
|
||||||
onBookmark={(s) => bookmark(s)}
|
onBookmark={(s) => bookmark(s)}
|
||||||
onRetoot={(s) => boost(s)}
|
onRetoot={(s) => boost(s)}
|
||||||
onReply={(s) => reply(s)}
|
onReply={reply}
|
||||||
onClick={[props.onItemClick, status]}
|
onClick={[props.onItemClick, status]}
|
||||||
/>
|
/>
|
||||||
)}
|
);
|
||||||
|
}}
|
||||||
</For>
|
</For>
|
||||||
</article>
|
</article>
|
||||||
);
|
);
|
||||||
|
|
|
@ -21,7 +21,6 @@ const TimelinePanel: Component<{
|
||||||
client: mastodon.rest.Client;
|
client: mastodon.rest.Client;
|
||||||
name: "home" | "public";
|
name: "home" | "public";
|
||||||
prefetch?: boolean;
|
prefetch?: boolean;
|
||||||
fullRefetch?: number;
|
|
||||||
|
|
||||||
openFullScreenToot: (
|
openFullScreenToot: (
|
||||||
toot: mastodon.v1.Status,
|
toot: mastodon.v1.Status,
|
||||||
|
@ -91,7 +90,7 @@ const TimelinePanel: Component<{
|
||||||
<PullDownToRefresh
|
<PullDownToRefresh
|
||||||
linkedElement={scrollLinked()}
|
linkedElement={scrollLinked()}
|
||||||
loading={snapshot.loading}
|
loading={snapshot.loading}
|
||||||
onRefresh={() => refetchTimeline("prev")}
|
onRefresh={() => refetchTimeline("next")}
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
ref={(e) =>
|
ref={(e) =>
|
||||||
|
@ -113,27 +112,28 @@ const TimelinePanel: Component<{
|
||||||
</Show>
|
</Show>
|
||||||
<For each={timeline.list}>
|
<For each={timeline.list}>
|
||||||
{(itemId, index) => {
|
{(itemId, index) => {
|
||||||
let element: HTMLElement | undefined;
|
|
||||||
const path = timeline.getPath(itemId)!;
|
const path = timeline.getPath(itemId)!;
|
||||||
const toots = path.reverse().map((x) => x.value);
|
const toots = path.reverse().map((x) => x.value);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Thread
|
<Thread
|
||||||
ref={element}
|
|
||||||
toots={toots}
|
toots={toots}
|
||||||
onBoost={onBoost}
|
onBoost={onBoost}
|
||||||
onBookmark={onBookmark}
|
onBookmark={onBookmark}
|
||||||
onReply={(client, status) =>
|
onReply={({ status }, element) =>
|
||||||
props.openFullScreenToot(status, element, true)
|
props.openFullScreenToot(status, element, true)
|
||||||
}
|
}
|
||||||
client={props.client}
|
client={props.client}
|
||||||
isExpended={(status) => status.id === expandedThreadId()}
|
isExpended={(status) => status.id === expandedThreadId()}
|
||||||
onItemClick={(status) => {
|
onItemClick={(status, event) => {
|
||||||
setTyping(false);
|
setTyping(false);
|
||||||
if (status.id !== expandedThreadId()) {
|
if (status.id !== expandedThreadId()) {
|
||||||
setExpandedThreadId((x) => (x ? undefined : status.id));
|
setExpandedThreadId((x) => (x ? undefined : status.id));
|
||||||
} else {
|
} else {
|
||||||
props.openFullScreenToot(status, element);
|
props.openFullScreenToot(
|
||||||
|
status,
|
||||||
|
event.currentTarget as HTMLElement,
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
@ -171,10 +171,10 @@ const TimelinePanel: Component<{
|
||||||
Retry
|
Retry
|
||||||
</Button>
|
</Button>
|
||||||
</Match>
|
</Match>
|
||||||
<Match when={typeof props.fullRefetch === "undefined"}>
|
<Match when={true}>
|
||||||
<Button
|
<Button
|
||||||
variant="contained"
|
variant="contained"
|
||||||
onClick={[refetchTimeline, "next"]}
|
onClick={[refetchTimeline, "prev"]}
|
||||||
disabled={snapshot.loading}
|
disabled={snapshot.loading}
|
||||||
>
|
>
|
||||||
Load More
|
Load More
|
||||||
|
|
Loading…
Reference in a new issue