TootActionGroup: remove css module

src/timelines/CompactToot.tsx

@@ -1,57 +0,0 @@
-import type { mastodon } from "masto";
-import { Show, type Component } from "solid-js";
-import tootStyle from "./toot.module.css";
-import { formatRelative } from "date-fns";
-import Img from "~material/Img";
-import { Body2 } from "~material/typography";
-import { appliedCustomEmoji } from "../masto/toot";
-import { TootPreviewCard } from "./RegularToot";
-
-type CompactTootProps = {
-  status: mastodon.v1.Status;
-  now: Date;
-  class?: string;
-};
-
-const CompactToot: Component<CompactTootProps> = (props) => {
-  const toot = () => props.status;
-  return (
-    <section
-      class={[tootStyle.toot, tootStyle.compact, props.class || ""].join(" ")}
-      lang={toot().language || undefined}
-    >
-      <Img
-        src={toot().account.avatar}
-        class={[tootStyle.tootAvatar].join(" ")}
-      />
-      <div class={[tootStyle.compactAuthorGroup].join(" ")}>
-        <Body2
-          ref={(e: { innerHTML: string }) => {
-            appliedCustomEmoji(
-              e,
-              toot().account.displayName,
-              toot().account.emojis,
-            );
-          }}
-        ></Body2>
-        <span class={tootStyle.compactAuthorUsername}>
-          @{toot().account.username}@{new URL(toot().account.url).hostname}
-        </span>
-        <time datetime={toot().createdAt}>
-          {formatRelative(props.now, toot().createdAt)}
-        </time>
-      </div>
-      <div
-        ref={(e: { innerHTML: string }) => {
-          appliedCustomEmoji(e, toot().content, toot().emojis);
-        }}
-        class={[tootStyle.compactTootContent].join(" ")}
-      ></div>
-      <Show when={toot().card}>
-        <TootPreviewCard src={toot().card!} alwaysCompact />
-      </Show>
-    </section>
-  );
-};
-
-export default CompactToot;

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>
     </>

src/timelines/TootList.tsx

@@ -6,6 +6,7 @@ import {
   createSelector,
   Index,
   createMemo,
+  For,
 } from "solid-js";
 import { type mastodon } from "masto";
 import { vibrate } from "~platform/hardware";
@@ -278,10 +279,10 @@ const TootList: Component<{
         vote: vote
       }}>
         <div ref={props.ref} id={props.id} class="toot-list">
-          <Index each={props.threads}>
+          <For each={props.threads}>
             {(threadId, threadIdx) => {
               const thread = createMemo(() =>
-                props.onUnknownThread(threadId())?.reverse(),
+                props.onUnknownThread(threadId)?.reverse(),
               );
 
               const threadLength = () => thread()?.length ?? 0;
@@ -311,7 +312,7 @@ const TootList: Component<{
                 </Index>
               );
             }}
-          </Index>
+          </For>
         </div>
       </TootEnvProvider>
     </ErrorBoundary>

src/timelines/toot.module.css

@@ -17,10 +17,6 @@
     border-radius: 0;
   }
 
-  &>.toot {
-    box-shadow: none;
-  }
-
   time {
     color: var(--tutu-color-secondary-text-on-surface);
   }
@@ -89,41 +85,6 @@
   background-color: var(--tutu-color-surface-d);
 }
 
-.toot.compact {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 8px;
-  row-gap: 0;
-  padding-block: var(--card-gut, 16px);
-  padding-inline: var(--card-pad, 16px);
-
-  > :first-child {
-    grid-row: 1/3;
-  }
-
-  > :last-child {
-    grid-column: 2 /3;
-  }
-}
-
-.compactAuthorGroup {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  margin-bottom: 8px;
-  flex-flow: row wrap;
-  justify-content: flex-end;
-
-  >.compactAuthorUsername {
-    color: var(--tutu-color-secondary-text-on-surface);
-    flex-grow: 1;
-  }
-
-  >time {
-    color: var(--tutu-color-secondary-text-on-surface);
-  }
-}
-
 .tootRetootGrp {
   display: flex;
   gap: 0.25em;
@@ -134,44 +95,3 @@
     margin-right: 0.25em;
   }
 }
-
-.tootBottomActionGrp {
-  composes: cardGutSkip from "~material/cards.module.css";
-  padding-block: calc((var(--card-gut) - 10px) / 2);
-
-  animation: 225ms var(--tutu-anim-curve-std) tootBottomExpanding;
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-evenly;
-
-  >button {
-    color: var(--tutu-color-on-surface);
-    padding: 10px 8px;
-
-    >svg {
-      font-size: 20px;
-    }
-  }
-}
-
-.tootActionWithCount {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.tootAction {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-@keyframes tootBottomExpanding {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}

src/timelines/toots/TootActionGroup.css

@@ -0,0 +1,41 @@
+.TootActionGroup {
+  padding-block: calc((var(--card-gut) - 10px) / 2);
+  contain: layout style;
+
+  animation: 225ms var(--tutu-anim-curve-std) TootActionGroup_fade-in;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-evenly;
+
+  >button {
+    color: var(--tutu-color-on-surface);
+    padding: 10px 8px;
+
+    >svg {
+      font-size: 20px;
+    }
+  }
+
+  >* {
+    display: flex;
+    align-items: center;
+  }
+
+  >.with-count {
+    gap: 8px;
+  }
+
+  >.plain {
+    justify-content: center;
+  }
+}
+
+@keyframes TootActionGroup_fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

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;