diff --git a/src/timelines/Thread.tsx b/src/timelines/Thread.tsx index f8d4932..034c126 100644 --- a/src/timelines/Thread.tsx +++ b/src/timelines/Thread.tsx @@ -1,9 +1,5 @@ import type { mastodon } from "masto"; -import { - For, - type Component, - type Ref, -} from "solid-js"; +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"; @@ -17,6 +13,7 @@ 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 = { @@ -45,41 +42,47 @@ const Thread: Component = (props) => { 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; - } - ` + .thread { + user-select: none; + cursor: pointer; + } + `; return (
- + {(status, index) => { - const useThread = props.toots.length > 1; - const threadPosition = useThread - ? index() === 0 - ? "top" - : index() === props.toots.length - 1 - ? "bottom" - : "middle" - : undefined; return ( bookmark(s)} onRetoot={(s) => boost(s)} + onFavourite={props.onFavourite} onReply={reply} - onClick={[props.onItemClick, status]} + onClick={[props.onItemClick, status()]} /> ); }} - +
); }; diff --git a/src/timelines/TootList.tsx b/src/timelines/TootList.tsx index da3f065..30304d9 100644 --- a/src/timelines/TootList.tsx +++ b/src/timelines/TootList.tsx @@ -38,7 +38,7 @@ const TootList: Component<{ props.onChangeToot(result.id, result); }; - const onBoost = async ( + const toggleBoost = async ( client: mastodon.rest.Client, status: mastodon.v1.Status, ) => { @@ -46,23 +46,39 @@ const TootList: Component<{ const rootStatus = status.reblog ? status.reblog : status; const reblogged = rootStatus.reblogged; if (status.reblog) { - status.reblog = { ...status.reblog, reblogged: !reblogged }; - props.onChangeToot(status.id, status); + props.onChangeToot(status.id, { + ...status, + reblog: { ...status.reblog, reblogged: !reblogged }, + }); } else { - props.onChangeToot( - status.id, - Object.assign(status, { - reblogged: !reblogged, - }), - ); + props.onChangeToot(status.id, { + ...status, + reblogged: !reblogged, + }); } + const result = reblogged ? await client.v1.statuses.$select(status.id).unreblog() : (await client.v1.statuses.$select(status.id).reblog()).reblog!; - props.onChangeToot( - status.id, - Object.assign(status.reblog ?? status, result.reblog), - ); + + if (status.reblog) { + props.onChangeToot(status.id, { + ...status, + reblog: result, + }); + } else { + props.onChangeToot(status.id, result); + } + }; + + const toggleFavourite = async (status: mastodon.v1.Status) => { + const client = session()?.client; + if (!client) return; + const ovalue = status.favourited; + const result = ovalue + ? await client.v1.statuses.$select(status.id).unfavourite() + : await client.v1.statuses.$select(status.id).favourite(); + props.onChangeToot(status.id, result); }; const openFullScreenToot = ( @@ -144,6 +160,13 @@ const TootList: Component<{ openFullScreenToot(status, element, true); }; + const getPath = (itemId: string) => { + return props + .onUnknownThread(itemId)! + .reverse() + .map((x) => x.value); + }; + return ( { @@ -152,16 +175,14 @@ const TootList: Component<{ >
- {(itemId, index) => { - const path = props.onUnknownThread(itemId)!; - const toots = path.reverse().map((x) => x.value); - + {(itemId) => { return (