89 lines
2.2 KiB
TypeScript
89 lines
2.2 KiB
TypeScript
import type { mastodon } from "masto";
|
|
import { useTootEnv } from "../RegularToot";
|
|
import { Button } from "@suid/material";
|
|
import { Show } from "solid-js";
|
|
import {
|
|
Bookmark,
|
|
BookmarkAddOutlined,
|
|
Repeat,
|
|
ReplyAll,
|
|
Share,
|
|
Star,
|
|
StarOutline,
|
|
} from "@suid/icons-material";
|
|
import { canShare, share } from "~platform/share";
|
|
import "./TootActionGroup.css";
|
|
|
|
async function shareContent(toot: mastodon.v1.Status) {
|
|
return await share({
|
|
url: toot.url ?? undefined,
|
|
});
|
|
}
|
|
|
|
function isolatedCallback(e: MouseEvent) {
|
|
e.stopPropagation();
|
|
}
|
|
|
|
function TootActionGroup<T extends mastodon.v1.Status>(props: {
|
|
value: T;
|
|
class?: string;
|
|
}) {
|
|
const { reply, boost, favourite, bookmark } = useTootEnv();
|
|
let actGrpElement: HTMLDivElement;
|
|
const toot = () => props.value;
|
|
return (
|
|
<div
|
|
ref={actGrpElement!}
|
|
class={`TootActionGroup ${props.class || ""}`}
|
|
onClick={isolatedCallback}
|
|
>
|
|
<Show when={reply}>
|
|
<Button class="with-count" onClick={[reply!, props.value]}>
|
|
<ReplyAll />
|
|
<span>{toot().repliesCount}</span>
|
|
</Button>
|
|
</Show>
|
|
|
|
<Button
|
|
class="with-count"
|
|
style={{
|
|
color: toot().reblogged ? "var(--tutu-color-primary)" : undefined,
|
|
}}
|
|
onClick={[boost, props.value]}
|
|
>
|
|
<Repeat />
|
|
<span>{toot().reblogsCount}</span>
|
|
</Button>
|
|
<Button
|
|
class="with-count"
|
|
style={{
|
|
color: toot().favourited ? "var(--tutu-color-primary)" : undefined,
|
|
}}
|
|
onClick={[favourite, props.value]}
|
|
>
|
|
{toot().favourited ? <Star /> : <StarOutline />}
|
|
<span>{toot().favouritesCount}</span>
|
|
</Button>
|
|
<Button
|
|
class="plain"
|
|
style={{
|
|
color: toot().bookmarked ? "var(--tutu-color-primary)" : undefined,
|
|
}}
|
|
onClick={[bookmark, props.value]}
|
|
>
|
|
{toot().bookmarked ? <Bookmark /> : <BookmarkAddOutlined />}
|
|
</Button>
|
|
<Show when={canShare({ url: toot().url ?? undefined })}>
|
|
<Button
|
|
class="plain"
|
|
aria-label="Share"
|
|
onClick={[shareContent, toot()]}
|
|
>
|
|
<Share />
|
|
</Button>
|
|
</Show>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default TootActionGroup;
|