Profile: minor changes

src/material/BottomSheet.tsx

@@ -1,19 +1,14 @@
 import {
   children,
   createEffect,
-  createSignal,
   onCleanup,
   useTransition,
   type JSX,
   type ParentComponent,
-  type ResolvedChildren,
 } from "solid-js";
 import "./BottomSheet.css";
 import material from "./material.module.css";
-import {
+import { ANIM_CURVE_ACELERATION, ANIM_CURVE_DECELERATION } from "./theme";
-  ANIM_CURVE_ACELERATION,
-  ANIM_CURVE_DECELERATION,
-} from "./theme";
 import {
   animateSlideInFromRight,
   animateSlideOutToRight,
@@ -28,11 +23,36 @@ export type BottomSheetProps = {
 
 const MOVE_SPEED = 1600;
 
+function animateSlideInFromBottom(element: HTMLElement, reverse?: boolean) {
+  const rect = element.getBoundingClientRect();
+  const easing = "cubic-bezier(0.4, 0, 0.2, 1)";
+  element.classList.add("animated");
+  const oldOverflow = document.body.style.overflow;
+  document.body.style.overflow = "hidden";
+  const distance = Math.abs(rect.top - window.innerHeight);
+  const duration = (distance / MOVE_SPEED) * 1000;
+
+  const animation = element.animate(
+    {
+      top: reverse
+        ? [`${rect.top}px`, `${window.innerHeight}px`]
+        : [`${window.innerHeight}px`, `${rect.top}px`],
+    },
+    { easing, duration },
+  );
+  const onAnimationEnd = () => {
+    element.classList.remove("animated");
+    document.body.style.overflow = oldOverflow;
+  };
+  animation.addEventListener("cancel", onAnimationEnd);
+  animation.addEventListener("finish", onAnimationEnd);
+  return animation;
+}
+
 const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
   let element: HTMLDialogElement;
   let animation: Animation | undefined;
-  const [cache, setCache] = createSignal<ResolvedChildren | undefined>();
+  const child = children(() => props.children);
-  const ochildren = children(() => props.children);
 
   const [pending] = useTransition();
 
@@ -40,12 +60,10 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
     if (props.open) {
       if (!element.open && !pending()) {
         requestAnimationFrame(animatedOpen);
-        setCache(ochildren());
       }
     } else {
       if (element.open) {
         animatedClose();
-        setCache(undefined);
       }
     }
   });
@@ -55,22 +73,21 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
   };
 
   const animatedClose = () => {
-
+    if (window.innerWidth > 560 && !props.bottomUp) {
-      if (window.innerWidth > 560 && !props.bottomUp) {
+      onClose();
-        onClose();
+      return;
-        return;
+    }
-      }
+    const onAnimationEnd = () => {
-      const onAnimationEnd = () => {
+      element.classList.remove("animated");
-        element.classList.remove("animated");
+      animation = undefined;
-        onClose();
+      onClose();
-      };
+    };
-      element.classList.add("animated");
+    element.classList.add("animated");
-      animation = props.bottomUp
+    animation = props.bottomUp
-        ? animateSlideInFromBottom(element, true)
+      ? animateSlideInFromBottom(element, true)
-        : animateSlideOutToRight(element, { easing: ANIM_CURVE_ACELERATION });
+      : animateSlideOutToRight(element, { easing: ANIM_CURVE_ACELERATION });
-      animation.addEventListener("finish", onAnimationEnd);
+    animation.addEventListener("finish", onAnimationEnd);
-      animation.addEventListener("cancel", onAnimationEnd);
+    animation.addEventListener("cancel", onAnimationEnd);
-
   };
 
   const animatedOpen = () => {
@@ -81,6 +98,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
       element.classList.add("animated");
       const onAnimationEnd = () => {
         element.classList.remove("animated");
+        animation = undefined;
       };
       animation = animateSlideInFromRight(element, {
         easing: ANIM_CURVE_DECELERATION,
@@ -90,36 +108,6 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
     }
   };
 
-  const animateSlideInFromBottom = (
-    element: HTMLElement,
-    reserve?: boolean,
-  ) => {
-    const rect = element.getBoundingClientRect();
-    const easing = "cubic-bezier(0.4, 0, 0.2, 1)";
-    element.classList.add("animated");
-    const oldOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    const distance = Math.abs(rect.top - window.innerHeight);
-    const duration = (distance / MOVE_SPEED) * 1000;
-
-    animation = element.animate(
-      {
-        top: reserve
-          ? [`${rect.top}px`, `${window.innerHeight}px`]
-          : [`${window.innerHeight}px`, `${rect.top}px`],
-      },
-      { easing, duration },
-    );
-    const onAnimationEnd = () => {
-      element.classList.remove("animated");
-      document.body.style.overflow = oldOverflow;
-      animation = undefined;
-    };
-    animation.addEventListener("cancel", onAnimationEnd);
-    animation.addEventListener("finish", onAnimationEnd);
-    return animation;
-  };
-
   onCleanup(() => {
     if (animation) {
       animation.cancel();
@@ -129,6 +117,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
   const onDialogClick = (
     event: MouseEvent & { currentTarget: HTMLDialogElement },
   ) => {
+    event.stopPropagation();
     if (event.target !== event.currentTarget) return;
     const rect = event.currentTarget.getBoundingClientRect();
     const isNotInDialog =
@@ -159,7 +148,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
       tabIndex={-1}
       role="presentation"
     >
-      {ochildren() ?? cache()}
+      {child()}
     </dialog>
   );
 };

src/material/theme.css

@@ -153,6 +153,8 @@
   --tutu-transition-shadow: box-shadow 175ms var(--tutu-anim-curve-std);
 
   --tutu-zidx-nav: 1100;
+
+  accent-color: var(--tutu-color-primary);
 }
 
 * {

src/material/theme.ts

@@ -1,5 +1,5 @@
 import { Theme, createTheme } from "@suid/material/styles";
-import { deepPurple, amber } from "@suid/material/colors";
+import { deepPurple, amber, red } from "@suid/material/colors";
 import { Accessor } from "solid-js";
 
 /**
@@ -12,6 +12,9 @@ export function useRootTheme(): Accessor<Theme> {
         primary: {
           main: deepPurple[500],
         },
+        error: {
+          main: red[900],
+        },
         secondary: {
           main: amber.A200,
         },

src/profiles/Profile.css

@@ -8,6 +8,7 @@
     display: flex;
     flex-flow: column nowrap;
     gap: 16px;
+    contain: layout style;
   }
 
   .banner {

src/profiles/Profile.tsx

@@ -237,7 +237,7 @@ const Profile: Component = () => {
       }
       class="Profile"
     >
-      <div class="details">
+      <div class="details" role="presentation">
         <Menu
           id={optMenuId}
           open={menuOpen()}
@@ -498,7 +498,7 @@ const Profile: Component = () => {
         </div>
       </div>
 
-      <div class="recent-toots">
+      <div class="recent-toots" role="presentation">
         <div class="toot-list-toolbar">
           <TootFilterButton
             options={{

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}

src/timelines/TootList.tsx

@@ -232,6 +232,40 @@ const TootList: Component<{
     openFullScreenToot(status, element, true);
   };
 
+  const vote = async ({
+    status,
+    votes,
+  }: {
+    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) {
+      props.onChangeToot(status.id, {
+        ...status,
+        reblog: {
+          ...status.reblog,
+          poll: npoll,
+        },
+      });
+    } else {
+      props.onChangeToot(status.id, {
+        ...status,
+        poll: npoll,
+      });
+    }
+
+  };
+
   return (
     <ErrorBoundary
       fallback={(err, reset) => {
@@ -272,6 +306,7 @@ const TootList: Component<{
                       onRetoot={toggleBoost}
                       onFavourite={toggleFavourite}
                       onReply={reply}
+                      onVote={vote}
                       onClick={[onItemClick, status()]}
                     />
                   );

src/timelines/toots/TootPoll.css

@@ -0,0 +1,22 @@
+.TootPoll {
+  margin-top: 12px;
+  border: 1px solid var(--tutu-color-surface-d);
+  background-color: var(--tutu-color-surface);
+  max-width: 560px;
+  contain: layout style paint;
+  padding-top: 8px;
+  padding-bottom: 8px;
+
+  >.hints,
+  >.trailers {
+    padding-right: 8px;
+    color: var(--tutu-color-secondary-text-on-surface);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  >.hints {
+    padding-left: 8px;
+  }
+}

src/timelines/toots/TootPoll.tsx

@@ -0,0 +1,193 @@
+import {
+  batch,
+  createRenderEffect,
+  createSelector,
+  createSignal,
+  Index,
+  Show,
+  untrack,
+  type Component,
+} from "solid-js";
+import "./TootPoll.css";
+import type { mastodon } from "masto";
+import { resolveCustomEmoji } from "../../masto/toot";
+import {
+  Button,
+  Checkbox,
+  Divider,
+  List,
+  ListItemButton,
+  ListItemText,
+  Radio,
+} from "@suid/material";
+import {
+  formatDistance,
+  isBefore,
+} from "date-fns";
+import { useTimeSource } from "~platform/timesrc";
+import { useDateFnLocale } from "~platform/i18n";
+import TootPollDialog from "./TootPollDialog";
+import { ANIM_CURVE_STD } from "~material/theme";
+
+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>;
+};
+
+const TootPoll: Component<TootPollProps> = (props) => {
+  let list: HTMLUListElement;
+  const now = useTimeSource();
+  const dateFnLocale = useDateFnLocale();
+  const [mustShowResult, setMustShowResult] = createSignal<boolean>();
+  const [showVoteDialog, setShowVoteDialog] = createSignal(false);
+
+  const [initialVote, setInitialVote] = createSignal(0);
+
+  const isShowResult = () => {
+    const n = mustShowResult();
+    if (typeof n !== "undefined") {
+      return n;
+    }
+
+    return props.expired || props.voted;
+  };
+
+  const isOwnVote = createSelector(
+    () => props.ownVotes,
+    (idx: number, votes) => votes?.includes(idx) || false,
+  );
+
+  const openVote = (i: number, event: Event) => {
+    event.stopPropagation();
+
+    if (props.expired || props.voted) {
+      return;
+    }
+
+    batch(() => {
+      setInitialVote(i);
+      setShowVoteDialog(true);
+    });
+  };
+
+  const animateAndSetMustShow = (event: Event) => {
+    event.stopPropagation();
+    list.animate(
+      {
+        opacity: [0.5, 0, 0.5],
+      },
+      {
+        duration: 220,
+        easing: ANIM_CURVE_STD,
+      },
+    );
+    setMustShowResult((x) => {
+      if (typeof x === "undefined") {
+        return !untrack(isShowResult);
+      } else {
+        return undefined;
+      }
+    });
+  };
+
+  return (
+    <section class="TootPoll">
+      <div class="hints">
+        <span>{props.votesCount} votes in total</span>
+        <Show when={props.expired}>
+          <span>Poll is ended</span>
+        </Show>
+      </div>
+      <List ref={list!} disablePadding class="option-list">
+        <Index each={props.options}>
+          {(option, index) => {
+            return (
+              <>
+                <Show when={index === 0}>
+                  <Divider />
+                </Show>
+                <ListItemButton
+                  onClick={[openVote, index]}
+                  class="poll-item"
+                  aria-disabled={isShowResult()}
+                >
+                  <ListItemText>
+                    <span
+                      ref={(e) =>
+                        createRenderEffect(() => {
+                          e.innerHTML = resolveCustomEmoji(
+                            option().title,
+                            option().emojis,
+                          );
+                        })
+                      }
+                    ></span>
+                  </ListItemText>
+
+                  <Show when={isShowResult()}>
+                    <span>
+                      <Show when={typeof option().votesCount !== "undefined"}>
+                        {option().votesCount} votes
+                      </Show>
+                    </span>
+                  </Show>
+
+                  <Show
+                    when={props.multiple}
+                    fallback={
+                      <Radio
+                        checked={isOwnVote(index)}
+                        disabled={isShowResult()}
+                      />
+                    }
+                  >
+                    <Checkbox
+                      checked={isOwnVote(index)}
+                      disabled={isShowResult()}
+                    />
+                  </Show>
+                </ListItemButton>
+                <Divider />
+              </>
+            );
+          }}
+        </Index>
+      </List>
+      <div class="trailers">
+        <Button onClick={animateAndSetMustShow}>
+          {isShowResult() ? "Hide result" : "Reveal result"}
+        </Button>
+        <Show when={props.expiredAt}>
+          <span>
+            <span style={{ "margin-inline-end": "0.5ch" }}>
+              {isBefore(now(), props.expiredAt!) ? "Expire in" : "Expired"}
+            </span>
+
+            <time dateTime={props.expiredAt!.toISOString()}>
+              {formatDistance(now(), props.expiredAt!, {
+                locale: dateFnLocale(),
+              })}
+            </time>
+          </span>
+        </Show>
+      </div>
+
+      <TootPollDialog
+        open={showVoteDialog()}
+        options={props.options}
+        onVote={(votes) => console.debug(votes)}
+        onClose={() => setShowVoteDialog(false)}
+        initialVotes={[initialVote()]}
+      />
+    </section>
+  );
+};
+
+export default TootPoll;

src/timelines/toots/TootPollDialog.css

@@ -0,0 +1,12 @@
+.TootPollDialog {
+  >.bottom-dock>.actions {
+    border-top: 1px solid #ddd;
+    background: var(--tutu-color-surface);
+    padding:
+      8px 16px calc(8px + var(--safe-area-inset-bottom, 0px));
+    width: 100%;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+  }
+}

src/timelines/toots/TootPollDialog.tsx

@@ -0,0 +1,121 @@
+import {
+  Button,
+  Checkbox,
+  List,
+  ListItemButton,
+  ListItemText,
+  Radio,
+} from "@suid/material";
+import type { mastodon } from "masto";
+import {
+  createEffect,
+  createRenderEffect,
+  createSignal,
+  Index,
+  Show,
+  type Component,
+} from "solid-js";
+import BottomSheet, { type BottomSheetProps } from "~material/BottomSheet";
+import Scaffold from "~material/Scaffold";
+import { resolveCustomEmoji } from "../../masto/toot";
+import "./TootPollDialog.css";
+
+export type TootPollDialogPoll = {
+  open?: boolean;
+  options: Readonly<mastodon.v1.Poll["options"]>;
+  initialVotes?: readonly number[];
+  multiple?: boolean;
+
+  onVote(votes: readonly number[]): void | Promise<void>;
+  onClose?: BottomSheetProps["onClose"] &
+    ((reason: "cancel" | "success") => void);
+};
+
+const TootPollDialog: Component<TootPollDialogPoll> = (props) => {
+  const [votes, setVotes] = createSignal([] as readonly number[]);
+  const [inProgress, setInProgress] = createSignal(false);
+
+  createEffect(() => {
+    setVotes(props.initialVotes || []);
+  });
+
+  const toggleVote = (i: number) => {
+    if (props.multiple) {
+      setVotes((o) => [...o.filter((x) => x === i), i]);
+    } else {
+      setVotes([i]);
+    }
+  };
+
+  const sendVote = async () => {
+    setInProgress(true);
+    try {
+      await props.onVote(votes());
+    } catch (reason) {
+      console.error(reason);
+      props.onClose?.("cancel");
+      return;
+    } finally {
+      setInProgress(false);
+    }
+    props.onClose?.("success");
+  };
+
+  return (
+    <BottomSheet open={props.open} onClose={props.onClose} bottomUp>
+      <Scaffold
+        class="TootPollDialog"
+        bottom={
+          <div class="actions">
+            <Button
+              color="error"
+              onClick={props.onClose ? [props.onClose, "cancel"] : undefined}
+              disabled={inProgress()}
+            >
+              Cancel
+            </Button>
+            <Button onClick={sendVote} disabled={inProgress()}>
+              Confirm
+            </Button>
+          </div>
+        }
+      >
+        <List>
+          <Index each={props.options}>
+            {(option, index) => {
+              return (
+                <ListItemButton
+                  onClick={[toggleVote, index]}
+                  disabled={inProgress()}
+                >
+                  <ListItemText>
+                    <span
+                      ref={(e) =>
+                        createRenderEffect(
+                          () =>
+                            (e.innerHTML = resolveCustomEmoji(
+                              option().title,
+                              option().emojis,
+                            )),
+                        )
+                      }
+                    ></span>
+                  </ListItemText>
+
+                  <Show
+                    when={props.multiple}
+                    fallback={<Radio checked={votes().includes(index)} />}
+                  >
+                    <Checkbox checked={votes().includes(index)} />
+                  </Show>
+                </ListItemButton>
+              );
+            }}
+          </Index>
+        </List>
+      </Scaffold>
+    </BottomSheet>
+  );
+};
+
+export default TootPollDialog;