RegularToot: supports polls

src/timelines/RegularToot.tsx

@@ -9,7 +9,7 @@ import {
   type Setter,
 } 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 { css } from "solid-styled";
@@ -36,6 +36,7 @@ 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";
 
 type TootActionGroupProps<T extends mastodon.v1.Status> = {
   onRetoot?: (value: T) => void;
@@ -52,6 +53,11 @@ type RegularTootProps = {
   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"];
 
@@ -237,10 +243,11 @@ function onToggleReveal(setValue: Setter<boolean>, event: Event) {
  */
 const RegularToot: Component<RegularTootProps> = (props) => {
   let rootRef: HTMLElement;
-  const [managed, managedActionGroup, rest] = splitProps(
+  const [managed, managedActionGroup, pollProps, rest] = splitProps(
     props,
     ["status", "lang", "class", "actionable", "evaluated", "thread"],
     ["onRetoot", "onFavourite", "onBookmark", "onReply"],
+    ["onVote"],
   );
   const now = useTimeSource();
   const status = () => managed.status;
@@ -352,6 +359,22 @@ const RegularToot: Component<RegularTootProps> = (props) => {
             sensitive={toot().sensitive}
           />
         </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 })}
+          />
+        </Show>
         <Show when={managed.actionable}>
           <Divider
             class={cardStyle.cardNoPad}