TootComposer: use useAppLocale

src/App.tsx

@@ -1,4 +1,4 @@
-import { Route, Router } from "@solidjs/router";
+import { Route } from "@solidjs/router";
 import { ThemeProvider } from "@suid/material";
 import {
   Component,
@@ -17,7 +17,12 @@ import {
 } from "./masto/clients.js";
 import { $accounts, updateAcctInf } from "./accounts/stores.js";
 import { useStore } from "@nanostores/solid";
-import { DateFnScope, useLanguage } from "./platform/i18n.jsx";
+import {
+  AppLocaleProvider,
+  createCurrentLanguage,
+  createCurrentRegion,
+  createDateFnLocaleResource,
+} from "./platform/i18n.jsx";
 import { useRegisterSW } from "virtual:pwa-register/solid";
 import {
   isJSONRPCResult,
@@ -67,7 +72,9 @@ const Routing: Component = () => {
 const App: Component = () => {
   const theme = useRootTheme();
   const accts = useStore($accounts);
-  const lang = useLanguage();
+  const lang = createCurrentLanguage();
+  const region = createCurrentRegion();
+  const dateFnLocale = createDateFnLocaleResource(region);
   const [serviceWorker, setServiceWorker] = createSignal<
     ServiceWorker | undefined
   >(undefined, { name: "serviceWorker" });
@@ -150,7 +157,13 @@ const App: Component = () => {
       }}
     >
       <ThemeProvider theme={theme}>
-        <DateFnScope>
+        <AppLocaleProvider
+          value={{
+            language: lang,
+            region: region,
+            dateFn: dateFnLocale,
+          }}
+        >
           <ClientProvider value={clients}>
             <ServiceWorkerProvider
               value={{
@@ -162,7 +175,7 @@ const App: Component = () => {
               <Routing />
             </ServiceWorkerProvider>
           </ClientProvider>
-        </DateFnScope>
+        </AppLocaleProvider>
       </ThemeProvider>
     </ErrorBoundary>
   );

src/platform/i18n.tsx

@@ -1,12 +1,12 @@
 import {
-  ParentComponent,
+  catchError,
   createContext,
   createMemo,
   createResource,
   useContext,
 } from "solid-js";
 import { match } from "@formatjs/intl-localematcher";
-import { Accessor, createEffect, createSignal } from "solid-js";
+import { Accessor } from "solid-js";
 import { $settings } from "../settings/stores";
 import { enGB } from "date-fns/locale/en-GB";
 import { useStore } from "@nanostores/solid";
@@ -17,13 +17,6 @@ import {
   type Template,
 } from "@solid-primitives/i18n";
 
-async function synchronised(
-  name: string,
-  callback: () => Promise<void> | void,
-): Promise<void> {
-  await navigator.locks.request(name, callback);
-}
-
 export const SUPPORTED_LANGS = ["en", "zh-Hans"] as const;
 
 export const SUPPORTED_REGIONS = ["en_US", "en_GB", "zh_CN"] as const;
@@ -38,14 +31,6 @@ export function autoMatchLangTag() {
   return match(Array.from(navigator.languages), SUPPORTED_LANGS, DEFAULT_LANG);
 }
 
-const DateFnLocaleCx = /* __@PURE__ */ createContext<Accessor<Locale>>(
-  () => enGB,
-);
-
-const cachedDateFnLocale: Record<string, Locale> = {
-  enGB,
-};
-
 export function autoMatchRegion() {
   const specifiers = navigator.languages.map((x) => x.split("-"));
 
@@ -70,7 +55,7 @@ export function autoMatchRegion() {
   return "en_GB";
 }
 
-export function useRegion() {
+export function createCurrentRegion() {
   const appSettings = useStore($settings);
 
   return createMemo(
@@ -100,53 +85,6 @@ async function importDateFnLocale(tag: string): Promise<Locale> {
   }
 }
 
-/**
- * Provides runtime values and fetch dependencies for date-fns locale
- */
-export const DateFnScope: ParentComponent = (props) => {
-  const [dateFnLocale, setDateFnLocale] = createSignal(enGB, {
-    name: "dateFnLocale",
-  });
-  const region = useRegion();
-
-  createEffect(() => {
-    const dateFnLocaleName = region();
-
-    if (cachedDateFnLocale[dateFnLocaleName]) {
-      setDateFnLocale(cachedDateFnLocale[dateFnLocaleName]);
-    } else {
-      synchronised("i18n-wrapper-load-date-fns-locale", async () => {
-        if (cachedDateFnLocale[dateFnLocaleName]) {
-          setDateFnLocale(cachedDateFnLocale[dateFnLocaleName]);
-          return;
-        }
-        const target = `date-fns/locale/${dateFnLocaleName}`;
-        try {
-          const mod = await importDateFnLocale(dateFnLocaleName);
-          cachedDateFnLocale[dateFnLocaleName] = mod;
-          setDateFnLocale(mod);
-        } catch (reason) {
-          console.error(
-            {
-              act: "load-date-fns-locale",
-              stat: "failed",
-              reason,
-              target,
-            },
-            "failed to load date-fns locale",
-          );
-        }
-      });
-    }
-  });
-
-  return (
-    <DateFnLocaleCx.Provider value={dateFnLocale}>
-      {props.children}
-    </DateFnLocaleCx.Provider>
-  );
-};
-
 /**
  * Get the {@link Locale} object for date-fns.
  *
@@ -155,11 +93,11 @@ export const DateFnScope: ParentComponent = (props) => {
  * @returns Accessor for Locale
  */
 export function useDateFnLocale(): Accessor<Locale> {
-  const cx = useContext(DateFnLocaleCx);
-  return cx;
+  const { dateFn } = useAppLocale();
+  return dateFn;
 }
 
-export function useLanguage() {
+export function createCurrentLanguage() {
   const settings = useStore($settings);
   return () => settings().language || autoMatchLangTag();
 }
@@ -179,7 +117,7 @@ type MergedImportedModule<T> = T extends []
 export function createStringResource<
   T extends ImportFn<Record<string, string | Template<any> | undefined>>[],
 >(...importFns: T) {
-  const language = useLanguage(); // TODO: this function costs to much, provide a global cache
+  const language = createCurrentLanguage();
   const cache: Record<string, MergedImportedModule<T>> = {};
 
   return createResource(
@@ -209,3 +147,38 @@ export function createTranslator<
 
   return [translator(res[0], resolveTemplate), res] as const;
 }
+
+export type AppLocale = {
+  dateFn: () => Locale;
+  language: () => string;
+  region: () => string;
+};
+
+const AppLocaleContext = /* @__PURE__ */ createContext<AppLocale>();
+
+export const AppLocaleProvider = AppLocaleContext.Provider;
+
+export function useAppLocale() {
+  const l = useContext(AppLocaleContext);
+  if (!l) {
+    throw new TypeError("app locale not found");
+  }
+  return l;
+}
+
+export function createDateFnLocaleResource(region: () => string) {
+  const [localeUncaught] = createResource(
+    region,
+    async (region) => {
+      return await importDateFnLocale(region);
+    },
+    { initialValue: enGB },
+  );
+
+  return createMemo(
+    () =>
+      catchError(localeUncaught, (reason) => {
+        console.error("fetch date-fns locale", reason);
+      }) ?? enGB,
+  );
+}

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.css

@@ -0,0 +1,78 @@
+.RegularToot {
+  --card-pad: 16px;
+  --card-gut: 16px;
+  --toot-avatar-size: 40px;
+  margin-block: 0;
+  position: relative;
+  contain: layout style;
+  cursor: pointer;
+
+
+  transition:
+    margin-top 60ms var(--tutu-anim-curve-sharp),
+    margin-bottom 60ms var(--tutu-anim-curve-sharp),
+    height 60ms var(--tutu-anim-curve-sharp),
+    var(--tutu-transition-shadow);
+  border-radius: 0;
+
+  time {
+    color: var(--tutu-color-secondary-text-on-surface);
+  }
+
+  >.retoot-grp {
+    display: flex;
+    gap: 0.25em;
+    margin-bottom: 8px;
+    align-items: center;
+
+    > :first-child {
+      margin-right: 0.25em;
+    }
+  }
+
+  & .custom-emoji {
+    height: 1em;
+    object-fit: contain;
+  }
+
+  &.expanded {
+    margin-block: 20px;
+    box-shadow: var(--tutu-shadow-e9);
+  }
+
+  &.thread-top,
+  &.thread-mid,
+  &.thread-btm {
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 36px;
+      background-color: var(--tutu-color-secondary);
+      width: 2px;
+      display: block;
+    }
+  }
+
+  &.thread-mid {
+    &::before {
+      top: 0;
+      bottom: 0;
+    }
+  }
+
+  &.thread-top {
+    &::before {
+      top: 16px;
+      bottom: 0;
+    }
+  }
+
+  &.thread-btm {
+    &::before {
+      top: 0;
+      height: 16px;
+    }
+  }
+}

src/timelines/RegularToot.tsx

@@ -7,63 +7,62 @@ import {
   createRenderEffect,
   createSignal,
   type Setter,
+  createContext,
+  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";
+import { SmartToySharp, Lock } from "@suid/icons-material";
 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";
+import "./RegularToot.css";
 
-type TootActionGroupProps<T extends mastodon.v1.Status> = {
-  onRetoot?: (value: T) => void;
-  onFavourite?: (value: T) => void;
-  onBookmark?: (value: T) => void;
-  onReply?: (
-    value: T,
+export type TootEnv = {
+  boost: (value: mastodon.v1.Status) => void;
+  favourite: (value: mastodon.v1.Status) => void;
+  bookmark: (value: mastodon.v1.Status) => void;
+  reply?: (
+    value: mastodon.v1.Status,
     event: MouseEvent & { currentTarget: HTMLButtonElement },
   ) => void;
+  vote: (
+    status: mastodon.v1.Status,
+    votes: readonly number[],
+  ) => void | Promise<void>;
 };
 
+const TootEnvContext = /* @__PURE__ */ createContext<TootEnv>();
+
+export const TootEnvProvider = TootEnvContext.Provider;
+
+export function useTootEnv() {
+  const env = useContext(TootEnvContext);
+  if (!env) {
+    throw new TypeError(
+      "environment not found, use TootEnvProvider to provide",
+    );
+  }
+  return env;
+}
+
 type RegularTootProps = {
   status: mastodon.v1.Status;
   actionable?: boolean;
   evaluated?: boolean;
   thread?: "top" | "bottom" | "middle";
-
-  onVote?: (value: {
-    status: mastodon.v1.Status;
-    votes: readonly number[];
-  }) => void | Promise<void>;
-} & TootActionGroupProps<mastodon.v1.Status> &
-  JSX.HTMLElementTags["article"];
-
-function isolatedCallback(e: MouseEvent) {
-  e.stopPropagation();
-}
+} & JSX.HTMLElementTags["article"];
 
 export function findRootToot(element: HTMLElement) {
   let current: HTMLElement | null = element;
@@ -78,73 +77,6 @@ export function findRootToot(element: HTMLElement) {
   return current;
 }
 
-function TootActionGroup<T extends mastodon.v1.Status>(
-  props: TootActionGroupProps<T> & { value: T },
-) {
-  let actGrpElement: HTMLDivElement;
-  const toot = () => props.value;
-  return (
-    <div
-      ref={actGrpElement!}
-      class={tootStyle.tootBottomActionGrp}
-      onClick={isolatedCallback}
-    >
-      <Show when={props.onReply}>
-        <Button
-          class={tootStyle.tootActionWithCount}
-          onClick={[props.onReply!, props.value]}
-        >
-          <ReplyAll />
-          <span>{toot().repliesCount}</span>
-        </Button>
-      </Show>
-
-      <Button
-        class={tootStyle.tootActionWithCount}
-        style={{
-          color: toot().reblogged ? "var(--tutu-color-primary)" : undefined,
-        }}
-        onClick={() => props.onRetoot?.(toot())}
-      >
-        <Repeat />
-        <span>{toot().reblogsCount}</span>
-      </Button>
-      <Button
-        class={tootStyle.tootActionWithCount}
-        style={{
-          color: toot().favourited ? "var(--tutu-color-primary)" : undefined,
-        }}
-        onClick={() => props.onFavourite?.(toot())}
-      >
-        {toot().favourited ? <Star /> : <StarOutline />}
-        <span>{toot().favouritesCount}</span>
-      </Button>
-      <Button
-        class={tootStyle.tootAction}
-        style={{
-          color: toot().bookmarked ? "var(--tutu-color-primary)" : undefined,
-        }}
-        onClick={() => props.onBookmark?.(toot())}
-      >
-        {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;
@@ -220,6 +152,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.
@@ -241,80 +175,39 @@ function onToggleReveal(setValue: Setter<boolean>, event: Event) {
  * You can extract the intent from the attributes of the "actionable" element.
  * The action type is the dataset's `action`.
  */
-const RegularToot: Component<RegularTootProps> = (props) => {
+const RegularToot: Component<RegularTootProps> = (oprops) => {
   let rootRef: HTMLElement;
-  const [managed, managedActionGroup, pollProps, rest] = splitProps(
-    props,
-    ["status", "lang", "class", "actionable", "evaluated", "thread"],
-    ["onRetoot", "onFavourite", "onBookmark", "onReply"],
-    ["onVote"],
-  );
+  const [props, rest] = splitProps(oprops, [
+    "status",
+    "lang",
+    "class",
+    "actionable",
+    "evaluated",
+    "thread",
+  ]);
   const now = useTimeSource();
-  const status = () => managed.status;
+  const status = () => props.status;
   const toot = () => status().reblog ?? status();
   const session = useDefaultSession();
   const [reveal, setReveal] = createSignal(false);
 
-  css`
-    .reply-sep {
-      margin-left: calc(var(--toot-avatar-size) + var(--card-pad) + 8px);
-      margin-block: 8px;
-    }
-
-    .thread-top,
-    .thread-mid,
-    .thread-btm {
-      position: relative;
-
-      &::before {
-        content: "";
-        position: absolute;
-        left: 36px;
-        background-color: var(--tutu-color-secondary);
-        width: 2px;
-        display: block;
-      }
-    }
-
-    .thread-mid {
-      &::before {
-        top: 0;
-        bottom: 0;
-      }
-    }
-
-    .thread-top {
-      &::before {
-        top: 16px;
-        bottom: 0;
-      }
-    }
-
-    .thread-btm {
-      &::before {
-        top: 0;
-        height: 16px;
-      }
-    }
-  `;
-
   return (
     <>
       <article
         classList={{
-          [tootStyle.toot]: true,
-          [tootStyle.expanded]: managed.evaluated,
-          "thread-top": managed.thread === "top",
-          "thread-mid": managed.thread === "middle",
-          "thread-btm": managed.thread === "bottom",
-          [managed.class || ""]: true,
+          "RegularToot": true,
+          "expanded": props.evaluated,
+          "thread-top": props.thread === "top",
+          "thread-mid": props.thread === "middle",
+          "thread-btm": props.thread === "bottom",
+          [props.class || ""]: true,
         }}
         ref={rootRef!}
-        lang={toot().language || managed.lang}
+        lang={toot().language || props.lang}
         {...rest}
       >
         <Show when={!!status().reblog}>
-          <div class={tootStyle.tootRetootGrp}>
+          <div class="retoot-grp">
             <BoostIcon />
             <Body2
               ref={(e: { innerHTML: string }) => {
@@ -360,27 +253,14 @@ const RegularToot: Component<RegularTootProps> = (props) => {
           />
         </Show>
         <Show when={toot().poll}>
-          <TootPoll
-            options={toot().poll!.options}
-            multiple={toot().poll!.multiple}
-            votesCount={toot().poll!.votesCount}
-            expired={toot().poll!.expired}
-            expiredAt={
-              toot().poll!.expiresAt
-                ? parseISO(toot().poll!.expiresAt!)
-                : undefined
-            }
-            voted={toot().poll!.voted}
-            ownVotes={toot().poll!.ownVotes || undefined}
-            onVote={(votes) => pollProps.onVote?.({ status: status(), votes })}
-          />
+          <TootPoll value={toot().poll!} status={toot()} />
         </Show>
-        <Show when={managed.actionable}>
+        <Show when={props.actionable}>
           <Divider
             class={cardStyle.cardNoPad}
             style={{ "margin-top": "8px" }}
           />
-          <TootActionGroup value={toot()} {...managedActionGroup} />
+          <TootActionGroup value={toot()} class={cardStyle.cardGutSkip} />
         </Show>
       </article>
     </>

src/timelines/TootBottomSheet.tsx

@@ -13,7 +13,10 @@ import { Title } from "~material/typography";
 import { Close as CloseIcon } from "@suid/icons-material";
 import { useSessionForAcctStr } from "../masto/clients";
 import { resolveCustomEmoji } from "../masto/toot";
-import RegularToot, { findElementActionable } from "./RegularToot";
+import RegularToot, {
+  findElementActionable,
+  TootEnvProvider,
+} from "./RegularToot";
 import type { mastodon } from "masto";
 import cards from "~material/cards.module.css";
 import { css } from "solid-styled";
@@ -169,6 +172,33 @@ const TootBottomSheet: Component = (props) => {
     return Array.from(new Set(values).keys());
   };
 
+  const vote = async (status: mastodon.v1.Status, votes: readonly number[]) => {
+    const client = session()?.client;
+    if (!client) return;
+
+    const toot = status.reblog ?? status;
+    if (!toot.poll) return;
+
+    const npoll = await client.v1.polls.$select(toot.poll.id).votes.create({
+      choices: votes,
+    });
+
+    if (status.reblog) {
+      setRemoteToot({
+        ...status,
+        reblog: {
+          ...status.reblog,
+          poll: npoll,
+        },
+      });
+    } else {
+      setRemoteToot({
+        ...status,
+        poll: npoll,
+      });
+    }
+  };
+
   const handleMainTootClick = (
     event: MouseEvent & { currentTarget: HTMLElement },
   ) => {
@@ -255,23 +285,29 @@ const TootBottomSheet: Component = (props) => {
 
           <article>
             <Show when={toot()}>
+              <TootEnvProvider
+                value={{
+                  bookmark: onBookmark,
+                  boost: onBoost,
+                  favourite: onFav,
+                  vote,
+                }}
+              >
                 <RegularToot
                   id={`toot-${toot()!.id}`}
                   class={cards.card}
                   style={{
                     "scroll-margin-top":
                       "calc(var(--scaffold-topbar-height) + 20px)",
-                  "cursor": "auto",
+                    cursor: "auto",
                     "user-select": "auto",
                   }}
                   status={toot()!}
                   actionable={!!actSession()}
                   evaluated={true}
-                onBookmark={onBookmark}
-                onRetoot={onBoost}
-                onFavourite={onFav}
                   onClick={handleMainTootClick}
                 ></RegularToot>
+              </TootEnvProvider>
             </Show>
           </article>
 

src/timelines/TootComposer.tsx

@@ -42,7 +42,7 @@ import {
 import type { Account } from "../accounts/stores";
 import "./TootComposer.css";
 import BottomSheet from "~material/BottomSheet";
-import { useLanguage } from "~platform/i18n";
+import { useAppLocale } from "~platform/i18n";
 import iso639_1 from "iso-639-1";
 import ChooseTootLang from "./ChooseTootLang";
 import type { mastodon } from "masto";
@@ -98,7 +98,8 @@ const TootVisibilityPickerDialog: Component<{
             style={{
               "border-top": "1px solid #ddd",
               background: "var(--tutu-color-surface)",
-              padding: "8px 16px calc(8px + var(--safe-area-inset-bottom, 0px))",
+              padding:
+                "8px 16px calc(8px + var(--safe-area-inset-bottom, 0px))",
               width: "100%",
               "text-align": "end",
             }}
@@ -232,7 +233,7 @@ const TootComposer: Component<{
   const [permPicker, setPermPicker] = createSignal(false);
   const [language, setLanguage] = createSignal("en");
   const [langPickerOpen, setLangPickerOpen] = createSignal(false);
-  const appLanguage = useLanguage();
+  const { language: appLanguage } = useAppLocale();
   const [openMenu, menuState] = createManagedMenuState();
 
   const randomPlaceholder = useRandomChoice(() => [

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";
@@ -14,6 +15,7 @@ import { setCache as setTootBottomSheetCache } from "./TootBottomSheet";
 import RegularToot, {
   findElementActionable,
   findRootToot,
+  TootEnvProvider,
 } from "./RegularToot";
 import cardStyle from "~material/cards.module.css";
 import type { ThreadNode } from "../masto/timelines";
@@ -232,13 +234,10 @@ const TootList: Component<{
     openFullScreenToot(status, element, true);
   };
 
-  const vote = async ({
-    status,
-    votes,
-  }: {
-    status: mastodon.v1.Status;
-    votes: readonly number[];
-  }) => {
+  const vote = async (
+    status: mastodon.v1.Status,
+    votes: readonly number[]
+  ) => {
     const client = session()?.client;
     if (!client) return;
 
@@ -263,7 +262,6 @@ const TootList: Component<{
         poll: npoll,
       });
     }
-
   };
 
   return (
@@ -273,11 +271,18 @@ const TootList: Component<{
         return <p>Oops: {String(err)}</p>;
       }}
     >
+      <TootEnvProvider value={{
+        boost: toggleBoost,
+        bookmark: onBookmark,
+        favourite: toggleFavourite,
+        reply: reply,
+        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;
@@ -290,8 +295,6 @@ const TootList: Component<{
                     return (
                       <RegularToot
                         data-status-id={status().id}
-                      data-thread={threadIdx}
-                      data-thread-len={threadLength()}
                         data-thread-sort={index}
                         status={status()}
                         thread={
@@ -302,11 +305,6 @@ const TootList: Component<{
                         class={cardStyle.card}
                         evaluated={checkIsExpended(status())}
                         actionable={checkIsExpended(status())}
-                      onBookmark={onBookmark}
-                      onRetoot={toggleBoost}
-                      onFavourite={toggleFavourite}
-                      onReply={reply}
-                      onVote={vote}
                         onClick={[onItemClick, status()]}
                       />
                     );
@@ -314,8 +312,9 @@ const TootList: Component<{
                 </Index>
               );
             }}
-        </Index>
+          </For>
         </div>
+      </TootEnvProvider>
     </ErrorBoundary>
   );
 };

src/timelines/toot.module.css

@@ -1,41 +1,3 @@
-.toot {
-  --card-pad: 16px;
-  --card-gut: 16px;
-  --toot-avatar-size: 40px;
-  margin-block: 0;
-  position: relative;
-  contain: content;
-  cursor: pointer;
-
-  &.toot {
-    /* fix composition ordering: I think the css module processor should aware the overriding and behaves, but no */
-    transition:
-      margin-top 60ms var(--tutu-anim-curve-sharp),
-      margin-bottom 60ms var(--tutu-anim-curve-sharp),
-      height 60ms var(--tutu-anim-curve-sharp),
-      var(--tutu-transition-shadow);
-    border-radius: 0;
-  }
-
-  &>.toot {
-    box-shadow: none;
-  }
-
-  time {
-    color: var(--tutu-color-secondary-text-on-surface);
-  }
-
-  & :global(.custom-emoji) {
-    height: 1em;
-    object-fit: contain;
-  }
-
-  &.expanded {
-    margin-block: 20px;
-    box-shadow: var(--tutu-shadow-e9);
-  }
-}
-
 .tootAuthorGrp {
   display: flex;
   align-items: flex-start;
@@ -88,90 +50,3 @@
   border: 1px solid var(--tutu-color-surface);
   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;
-  margin-bottom: 8px;
-  align-items: center;
-
-  > :first-child {
-    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;

src/timelines/toots/TootPoll.tsx

@@ -28,21 +28,17 @@ import { useTimeSource } from "~platform/timesrc";
 import { useDateFnLocale } from "~platform/i18n";
 import TootPollDialog from "./TootPollDialog";
 import { ANIM_CURVE_STD } from "~material/theme";
+import { useTootEnv } from "../RegularToot";
 
 type TootPollProps = {
-  options: Readonly<mastodon.v1.Poll["options"]>;
-  multiple?: boolean;
-  votesCount: number;
-  expired?: boolean;
-  expiredAt?: Date;
-  voted?: boolean;
-  ownVotes?: readonly number[];
-
-  onVote(votes: readonly number[]): void | Promise<void>;
+  value: mastodon.v1.Poll
+  status: mastodon.v1.Status
 };
 
 const TootPoll: Component<TootPollProps> = (props) => {
   let list: HTMLUListElement;
+  const {vote}= useTootEnv()
+
   const now = useTimeSource();
   const dateFnLocale = useDateFnLocale();
   const [mustShowResult, setMustShowResult] = createSignal<boolean>();
@@ -50,24 +46,26 @@ const TootPoll: Component<TootPollProps> = (props) => {
 
   const [initialVote, setInitialVote] = createSignal(0);
 
+  const poll = () => props.value
+
   const isShowResult = () => {
     const n = mustShowResult();
     if (typeof n !== "undefined") {
       return n;
     }
 
-    return props.expired || props.voted;
+    return poll().expired || poll().voted;
   };
 
   const isOwnVote = createSelector(
-    () => props.ownVotes,
+    () => poll().ownVotes,
     (idx: number, votes) => votes?.includes(idx) || false,
   );
 
   const openVote = (i: number, event: Event) => {
     event.stopPropagation();
 
-    if (props.expired || props.voted) {
+    if (poll().expired || poll().voted) {
       return;
     }
 
@@ -100,13 +98,13 @@ const TootPoll: Component<TootPollProps> = (props) => {
   return (
     <section class="TootPoll">
       <div class="hints">
-        <span>{props.votesCount} votes in total</span>
-        <Show when={props.expired}>
+        <span>{poll().votesCount} votes in total</span>
+        <Show when={poll().expired}>
           <span>Poll is ended</span>
         </Show>
       </div>
       <List ref={list!} disablePadding class="option-list">
-        <Index each={props.options}>
+        <Index each={poll().options}>
           {(option, index) => {
             return (
               <>
@@ -140,7 +138,7 @@ const TootPoll: Component<TootPollProps> = (props) => {
                   </Show>
 
                   <Show
-                    when={props.multiple}
+                    when={poll().multiple}
                     fallback={
                       <Radio
                         checked={isOwnVote(index)}
@@ -164,14 +162,14 @@ const TootPoll: Component<TootPollProps> = (props) => {
         <Button onClick={animateAndSetMustShow}>
           {isShowResult() ? "Hide result" : "Reveal result"}
         </Button>
-        <Show when={props.expiredAt}>
+        <Show when={poll().expiresAt}>
           <span>
             <span style={{ "margin-inline-end": "0.5ch" }}>
-              {isBefore(now(), props.expiredAt!) ? "Expire in" : "Expired"}
+              {isBefore(now(), poll().expiresAt!) ? "Expire in" : "Expired"}
             </span>
 
-            <time dateTime={props.expiredAt!.toISOString()}>
-              {formatDistance(now(), props.expiredAt!, {
+            <time dateTime={poll().expiresAt!}>
+              {formatDistance(now(), poll().expiresAt!, {
                 locale: dateFnLocale(),
               })}
             </time>
@@ -181,8 +179,8 @@ const TootPoll: Component<TootPollProps> = (props) => {
 
       <TootPollDialog
         open={showVoteDialog()}
-        options={props.options}
-        onVote={(votes) => console.debug(votes)}
+        options={poll().options}
+        onVote={[vote, props.status]}
         onClose={() => setShowVoteDialog(false)}
         initialVotes={[initialVote()]}
       />

src/timelines/toots/TootPollDialog.tsx

@@ -26,7 +26,13 @@ export type TootPollDialogPoll = {
   initialVotes?: readonly number[];
   multiple?: boolean;
 
-  onVote(votes: readonly number[]): void | Promise<void>;
+  onVote: [
+    (
+      status: mastodon.v1.Status,
+      votes: readonly number[],
+    ) => void | Promise<void>,
+    mastodon.v1.Status,
+  ];
   onClose?: BottomSheetProps["onClose"] &
     ((reason: "cancel" | "success") => void);
 };
@@ -50,7 +56,7 @@ const TootPollDialog: Component<TootPollDialogPoll> = (props) => {
   const sendVote = async () => {
     setInProgress(true);
     try {
-      await props.onVote(votes());
+      await props.onVote[0](props.onVote[1], votes());
     } catch (reason) {
       console.error(reason);
       props.onClose?.("cancel");