TootActionGroup: remove css module

src/timelines/RegularToot.tsx

@@ -11,18 +11,11 @@ import {
   useContext,
 } from "solid-js";
 import tootStyle from "./toot.module.css";
-import { formatRelative, parseISO } from "date-fns";
+import { formatRelative } from "date-fns";
 import Img from "~material/Img.js";
 import { Body2 } from "~material/typography.js";
 import { css } from "solid-styled";
 import {
-  BookmarkAddOutlined,
-  Repeat,
-  ReplyAll,
-  Star,
-  StarOutline,
-  Bookmark,
-  Share,
   SmartToySharp,
   Lock,
 } from "@suid/icons-material";
@@ -30,15 +23,14 @@ import { useTimeSource } from "~platform/timesrc.js";
 import { resolveCustomEmoji } from "../masto/toot.js";
 import { Divider } from "@suid/material";
 import cardStyle from "~material/cards.module.css";
-import Button from "~material/Button.js";
 import MediaAttachmentGrid from "./toots/MediaAttachmentGrid.jsx";
 import { useDateFnLocale } from "~platform/i18n";
-import { canShare, share } from "~platform/share";
 import { makeAcctText, useDefaultSession } from "../masto/clients";
 import TootContent from "./toots/TootContent";
 import BoostIcon from "./toots/BoostIcon";
 import PreviewCard from "./toots/PreviewCard";
 import TootPoll from "./toots/TootPoll";
+import TootActionGroup from "./toots/TootActionGroup.js"
 
 export type TootEnv = {
   boost: (value: mastodon.v1.Status) => void;
@@ -61,9 +53,11 @@ export const TootEnvProvider = TootEnvContext.Provider;
 export function useTootEnv() {
   const env = useContext(TootEnvContext);
   if (!env) {
-    throw new TypeError("environment not found, use TootEnvProvider to provide")
+    throw new TypeError(
+      "environment not found, use TootEnvProvider to provide",
+    );
   }
-  return env
+  return env;
 }
 
 type RegularTootProps = {
@@ -71,12 +65,7 @@ type RegularTootProps = {
   actionable?: boolean;
   evaluated?: boolean;
   thread?: "top" | "bottom" | "middle";
-} &
-  JSX.HTMLElementTags["article"];
-
-function isolatedCallback(e: MouseEvent) {
-  e.stopPropagation();
-}
+} & JSX.HTMLElementTags["article"];
 
 export function findRootToot(element: HTMLElement) {
   let current: HTMLElement | null = element;
@@ -91,74 +80,6 @@ export function findRootToot(element: HTMLElement) {
   return current;
 }
 
-function TootActionGroup<T extends mastodon.v1.Status>(
-  props: { value: T },
-) {
-  const {reply, boost, favourite, bookmark} = useTootEnv()
-  let actGrpElement: HTMLDivElement;
-  const toot = () => props.value;
-  return (
-    <div
-      ref={actGrpElement!}
-      class={tootStyle.tootBottomActionGrp}
-      onClick={isolatedCallback}
-    >
-      <Show when={reply}>
-        <Button
-          class={tootStyle.tootActionWithCount}
-          onClick={[reply!, props.value]}
-        >
-          <ReplyAll />
-          <span>{toot().repliesCount}</span>
-        </Button>
-      </Show>
-
-      <Button
-        class={tootStyle.tootActionWithCount}
-        style={{
-          color: toot().reblogged ? "var(--tutu-color-primary)" : undefined,
-        }}
-        onClick={[boost, props.value]}
-      >
-        <Repeat />
-        <span>{toot().reblogsCount}</span>
-      </Button>
-      <Button
-        class={tootStyle.tootActionWithCount}
-        style={{
-          color: toot().favourited ? "var(--tutu-color-primary)" : undefined,
-        }}
-        onClick={[favourite, props.value]}
-      >
-        {toot().favourited ? <Star /> : <StarOutline />}
-        <span>{toot().favouritesCount}</span>
-      </Button>
-      <Button
-        class={tootStyle.tootAction}
-        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={tootStyle.tootAction}
-          aria-label="Share"
-          onClick={async () => {
-            await share({
-              url: toot().url ?? undefined,
-            });
-          }}
-        >
-          <Share />
-        </Button>
-      </Show>
-    </div>
-  );
-}
-
 function TootAuthorGroup(
   props: {
     status: mastodon.v1.Status;
@@ -234,6 +155,8 @@ function onToggleReveal(setValue: Setter<boolean>, event: Event) {
  * this component under a `<DefaultSessionProvier />` with correct
  * session.
  *
+ * This component requires be under `<TootEnvProvider />`.
+ *
  * **Handling Clicks**
  * There are multiple actions supported in the component. Some handlers
  * are passed in, some should be handled as the click event.
@@ -257,11 +180,14 @@ function onToggleReveal(setValue: Setter<boolean>, event: Event) {
  */
 const RegularToot: Component<RegularTootProps> = (props) => {
   let rootRef: HTMLElement;
-  const {vote} = useTootEnv()
-  const [managed, rest] = splitProps(
-    props,
-    ["status", "lang", "class", "actionable", "evaluated", "thread"],
-  );
+  const [managed, rest] = splitProps(props, [
+    "status",
+    "lang",
+    "class",
+    "actionable",
+    "evaluated",
+    "thread",
+  ]);
   const now = useTimeSource();
   const status = () => managed.status;
   const toot = () => status().reblog ?? status();
@@ -373,17 +299,14 @@ const RegularToot: Component<RegularTootProps> = (props) => {
           />
         </Show>
         <Show when={toot().poll}>
-          <TootPoll
-            value={toot().poll!}
-            status={toot()}
-          />
+          <TootPoll value={toot().poll!} status={toot()} />
         </Show>
         <Show when={managed.actionable}>
           <Divider
             class={cardStyle.cardNoPad}
             style={{ "margin-top": "8px" }}
           />
-          <TootActionGroup value={toot()} />
+          <TootActionGroup value={toot()} class={cardStyle.cardGutSkip} />
         </Show>
       </article>
     </>