src/App.tsx

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

src/platform/i18n.tsx

@@ -1,12 +1,12 @@
 import {
-  catchError,
+  ParentComponent,
   createContext,
   createMemo,
   createResource,
   useContext,
 } from "solid-js";
 import { match } from "@formatjs/intl-localematcher";
-import { Accessor } from "solid-js";
+import { Accessor, createEffect, createSignal } from "solid-js";
 import { $settings } from "../settings/stores";
 import { enGB } from "date-fns/locale/en-GB";
 import { useStore } from "@nanostores/solid";
@@ -17,6 +17,13 @@ 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;
@@ -31,6 +38,14 @@ 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("-"));
 
@@ -55,7 +70,7 @@ export function autoMatchRegion() {
   return "en_GB";
 }
 
-export function createCurrentRegion() {
+export function useRegion() {
   const appSettings = useStore($settings);
 
   return createMemo(
@@ -85,6 +100,53 @@ 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.
  *
@@ -93,11 +155,11 @@ async function importDateFnLocale(tag: string): Promise<Locale> {
  * @returns Accessor for Locale
  */
 export function useDateFnLocale(): Accessor<Locale> {
-  const { dateFn } = useAppLocale();
+  const cx = useContext(DateFnLocaleCx);
-  return dateFn;
+  return cx;
 }
 
-export function createCurrentLanguage() {
+export function useLanguage() {
   const settings = useStore($settings);
   return () => settings().language || autoMatchLangTag();
 }
@@ -117,7 +179,7 @@ type MergedImportedModule<T> = T extends []
 export function createStringResource<
   T extends ImportFn<Record<string, string | Template<any> | undefined>>[],
 >(...importFns: T) {
-  const language = createCurrentLanguage();
+  const language = useLanguage(); // TODO: this function costs to much, provide a global cache
   const cache: Record<string, MergedImportedModule<T>> = {};
 
   return createResource(
@@ -147,38 +209,3 @@ 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

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

@@ -1,78 +0,0 @@
-.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,62 +7,63 @@ import {
   createRenderEffect,
   createSignal,
   type Setter,
-  createContext,
-  useContext,
 } from "solid-js";
 import tootStyle from "./toot.module.css";
-import { formatRelative } from "date-fns";
+import { formatRelative, parseISO } from "date-fns";
 import Img from "~material/Img.js";
 import { Body2 } from "~material/typography.js";
-import { SmartToySharp, Lock } from "@suid/icons-material";
+import { css } from "solid-styled";
+import {
+  BookmarkAddOutlined,
+  Repeat,
+  ReplyAll,
+  Star,
+  StarOutline,
+  Bookmark,
+  Share,
+  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";
 
-export type TootEnv = {
+type TootActionGroupProps<T extends mastodon.v1.Status> = {
-  boost: (value: mastodon.v1.Status) => void;
+  onRetoot?: (value: T) => void;
-  favourite: (value: mastodon.v1.Status) => void;
+  onFavourite?: (value: T) => void;
-  bookmark: (value: mastodon.v1.Status) => void;
+  onBookmark?: (value: T) => void;
-  reply?: (
+  onReply?: (
-    value: mastodon.v1.Status,
+    value: T,
     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";
-} & JSX.HTMLElementTags["article"];
+
+  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();
+}
 
 export function findRootToot(element: HTMLElement) {
   let current: HTMLElement | null = element;
@@ -77,6 +78,73 @@ 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;
@@ -152,8 +220,6 @@ 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.
@@ -175,39 +241,80 @@ 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> = (oprops) => {
+const RegularToot: Component<RegularTootProps> = (props) => {
   let rootRef: HTMLElement;
-  const [props, rest] = splitProps(oprops, [
+  const [managed, managedActionGroup, pollProps, rest] = splitProps(
-    "status",
+    props,
-    "lang",
+    ["status", "lang", "class", "actionable", "evaluated", "thread"],
-    "class",
+    ["onRetoot", "onFavourite", "onBookmark", "onReply"],
-    "actionable",
+    ["onVote"],
-    "evaluated",
+  );
-    "thread",
-  ]);
   const now = useTimeSource();
-  const status = () => props.status;
+  const status = () => managed.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={{
-          "RegularToot": true,
+          [tootStyle.toot]: true,
-          "expanded": props.evaluated,
+          [tootStyle.expanded]: managed.evaluated,
-          "thread-top": props.thread === "top",
+          "thread-top": managed.thread === "top",
-          "thread-mid": props.thread === "middle",
+          "thread-mid": managed.thread === "middle",
-          "thread-btm": props.thread === "bottom",
+          "thread-btm": managed.thread === "bottom",
-          [props.class || ""]: true,
+          [managed.class || ""]: true,
         }}
         ref={rootRef!}
-        lang={toot().language || props.lang}
+        lang={toot().language || managed.lang}
         {...rest}
       >
         <Show when={!!status().reblog}>
-          <div class="retoot-grp">
+          <div class={tootStyle.tootRetootGrp}>
             <BoostIcon />
             <Body2
               ref={(e: { innerHTML: string }) => {
@@ -253,14 +360,27 @@ const RegularToot: Component<RegularTootProps> = (oprops) => {
           />
         </Show>
         <Show when={toot().poll}>
-          <TootPoll value={toot().poll!} status={toot()} />
+          <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 })}
+          />
         </Show>
-        <Show when={props.actionable}>
+        <Show when={managed.actionable}>
           <Divider
             class={cardStyle.cardNoPad}
             style={{ "margin-top": "8px" }}
           />
-          <TootActionGroup value={toot()} class={cardStyle.cardGutSkip} />
+          <TootActionGroup value={toot()} {...managedActionGroup} />
         </Show>
       </article>
     </>

src/timelines/TootBottomSheet.tsx

@@ -13,10 +13,7 @@ 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, {
+import RegularToot, { findElementActionable } from "./RegularToot";
-  findElementActionable,
-  TootEnvProvider,
-} from "./RegularToot";
 import type { mastodon } from "masto";
 import cards from "~material/cards.module.css";
 import { css } from "solid-styled";
@@ -172,33 +169,6 @@ 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 },
   ) => {
@@ -285,29 +255,23 @@ const TootBottomSheet: Component = (props) => {
 
           <article>
             <Show when={toot()}>
-              <TootEnvProvider
+              <RegularToot
-                value={{
+                id={`toot-${toot()!.id}`}
-                  bookmark: onBookmark,
+                class={cards.card}
-                  boost: onBoost,
+                style={{
-                  favourite: onFav,
+                  "scroll-margin-top":
-                  vote,
+                    "calc(var(--scaffold-topbar-height) + 20px)",
+                  "cursor": "auto",
+                  "user-select": "auto",
                 }}
-              >
+                status={toot()!}
-                <RegularToot
+                actionable={!!actSession()}
-                  id={`toot-${toot()!.id}`}
+                evaluated={true}
-                  class={cards.card}
+                onBookmark={onBookmark}
-                  style={{
+                onRetoot={onBoost}
-                    "scroll-margin-top":
+                onFavourite={onFav}
-                      "calc(var(--scaffold-topbar-height) + 20px)",
+                onClick={handleMainTootClick}
-                    cursor: "auto",
+              ></RegularToot>
-                    "user-select": "auto",
-                  }}
-                  status={toot()!}
-                  actionable={!!actSession()}
-                  evaluated={true}
-                  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 { useAppLocale } from "~platform/i18n";
+import { useLanguage } from "~platform/i18n";
 import iso639_1 from "iso-639-1";
 import ChooseTootLang from "./ChooseTootLang";
 import type { mastodon } from "masto";
@@ -98,8 +98,7 @@ const TootVisibilityPickerDialog: Component<{
             style={{
               "border-top": "1px solid #ddd",
               background: "var(--tutu-color-surface)",
-              padding:
+              padding: "8px 16px calc(8px + var(--safe-area-inset-bottom, 0px))",
-                "8px 16px calc(8px + var(--safe-area-inset-bottom, 0px))",
               width: "100%",
               "text-align": "end",
             }}
@@ -233,7 +232,7 @@ const TootComposer: Component<{
   const [permPicker, setPermPicker] = createSignal(false);
   const [language, setLanguage] = createSignal("en");
   const [langPickerOpen, setLangPickerOpen] = createSignal(false);
-  const { language: appLanguage } = useAppLocale();
+  const appLanguage = useLanguage();
   const [openMenu, menuState] = createManagedMenuState();
 
   const randomPlaceholder = useRandomChoice(() => [

src/timelines/TootList.tsx

@@ -6,7 +6,6 @@ import {
   createSelector,
   Index,
   createMemo,
-  For,
 } from "solid-js";
 import { type mastodon } from "masto";
 import { vibrate } from "~platform/hardware";
@@ -15,7 +14,6 @@ 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";
@@ -234,10 +232,13 @@ const TootList: Component<{
     openFullScreenToot(status, element, true);
   };
 
-  const vote = async (
+  const vote = async ({
-    status: mastodon.v1.Status,
+    status,
-    votes: readonly number[]
+    votes,
-  ) => {
+  }: {
+    status: mastodon.v1.Status;
+    votes: readonly number[];
+  }) => {
     const client = session()?.client;
     if (!client) return;
 
@@ -262,6 +263,7 @@ const TootList: Component<{
         poll: npoll,
       });
     }
+
   };
 
   return (
@@ -271,50 +273,49 @@ const TootList: Component<{
         return <p>Oops: {String(err)}</p>;
       }}
     >
-      <TootEnvProvider value={{
+      <div ref={props.ref} id={props.id} class="toot-list">
-        boost: toggleBoost,
+        <Index each={props.threads}>
-        bookmark: onBookmark,
+          {(threadId, threadIdx) => {
-        favourite: toggleFavourite,
+            const thread = createMemo(() =>
-        reply: reply,
+              props.onUnknownThread(threadId())?.reverse(),
-        vote: vote
+            );
-      }}>
-        <div ref={props.ref} id={props.id} class="toot-list">
-          <For each={props.threads}>
-            {(threadId, threadIdx) => {
-              const thread = createMemo(() =>
-                props.onUnknownThread(threadId)?.reverse(),
-              );
 
-              const threadLength = () => thread()?.length ?? 0;
+            const threadLength = () => thread()?.length ?? 0;
 
-              return (
+            return (
-                <Index each={thread()}>
+              <Index each={thread()}>
-                  {(threadNode, index) => {
+                {(threadNode, index) => {
-                    const status = () => threadNode().value;
+                  const status = () => threadNode().value;
 
-                    return (
+                  return (
-                      <RegularToot
+                    <RegularToot
-                        data-status-id={status().id}
+                      data-status-id={status().id}
-                        data-thread-sort={index}
+                      data-thread={threadIdx}
-                        status={status()}
+                      data-thread-len={threadLength()}
-                        thread={
+                      data-thread-sort={index}
-                          threadLength() > 1
+                      status={status()}
-                            ? positionTootInThread(index, threadLength())
+                      thread={
-                            : undefined
+                        threadLength() > 1
-                        }
+                          ? positionTootInThread(index, threadLength())
-                        class={cardStyle.card}
+                          : undefined
-                        evaluated={checkIsExpended(status())}
+                      }
-                        actionable={checkIsExpended(status())}
+                      class={cardStyle.card}
-                        onClick={[onItemClick, status()]}
+                      evaluated={checkIsExpended(status())}
-                      />
+                      actionable={checkIsExpended(status())}
-                    );
+                      onBookmark={onBookmark}
-                  }}
+                      onRetoot={toggleBoost}
-                </Index>
+                      onFavourite={toggleFavourite}
-              );
+                      onReply={reply}
-            }}
+                      onVote={vote}
-          </For>
+                      onClick={[onItemClick, status()]}
-        </div>
+                    />
-      </TootEnvProvider>
+                  );
+                }}
+              </Index>
+            );
+          }}
+        </Index>
+      </div>
     </ErrorBoundary>
   );
 };

src/timelines/toot.module.css

@@ -1,3 +1,41 @@
+.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;
@@ -50,3 +88,90 @@
   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

@@ -1,41 +0,0 @@
-.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

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

src/timelines/toots/TootPollDialog.tsx

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