TootActionGroup: remove css module

src/timelines/toots/TootActionGroup.tsx

@@ -0,0 +1,89 @@
+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;