src/material/BottomSheet.tsx

@@ -1,14 +1,19 @@
 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 { ANIM_CURVE_ACELERATION, ANIM_CURVE_DECELERATION } from "./theme";
+import {
+  ANIM_CURVE_ACELERATION,
+  ANIM_CURVE_DECELERATION,
+} from "./theme";
 import {
   animateSlideInFromRight,
   animateSlideOutToRight,
@@ -23,36 +28,11 @@ 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 child = children(() => props.children);
+  const [cache, setCache] = createSignal<ResolvedChildren | undefined>();
+  const ochildren = children(() => props.children);
 
   const [pending] = useTransition();
 
@@ -60,10 +40,12 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
     if (props.open) {
       if (!element.open && !pending()) {
         requestAnimationFrame(animatedOpen);
+        setCache(ochildren());
       }
     } else {
       if (element.open) {
         animatedClose();
+        setCache(undefined);
       }
     }
   });
@@ -73,21 +55,22 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
   };
 
   const animatedClose = () => {
-    if (window.innerWidth > 560 && !props.bottomUp) {
+
-      onClose();
+      if (window.innerWidth > 560 && !props.bottomUp) {
-      return;
+        onClose();
-    }
+        return;
-    const onAnimationEnd = () => {
+      }
-      element.classList.remove("animated");
+      const onAnimationEnd = () => {
-      animation = undefined;
+        element.classList.remove("animated");
-      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 = () => {
@@ -98,7 +81,6 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
       element.classList.add("animated");
       const onAnimationEnd = () => {
         element.classList.remove("animated");
-        animation = undefined;
       };
       animation = animateSlideInFromRight(element, {
         easing: ANIM_CURVE_DECELERATION,
@@ -108,6 +90,36 @@ 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();
@@ -117,7 +129,6 @@ 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 =
@@ -148,7 +159,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
       tabIndex={-1}
       role="presentation"
     >
-      {child()}
+      {ochildren() ?? cache()}
     </dialog>
   );
 };

src/material/theme.css

@@ -153,8 +153,6 @@
   --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, red } from "@suid/material/colors";
+import { deepPurple, amber } from "@suid/material/colors";
 import { Accessor } from "solid-js";
 
 /**
@@ -12,9 +12,6 @@ export function useRootTheme(): Accessor<Theme> {
         primary: {
           main: deepPurple[500],
         },
-        error: {
-          main: red[900],
-        },
         secondary: {
           main: amber.A200,
         },

src/profiles/Profile.css

@@ -8,7 +8,6 @@
     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" role="presentation">
+      <div class="details">
         <Menu
           id={optMenuId}
           open={menuOpen()}
@@ -498,7 +498,7 @@ const Profile: Component = () => {
         </div>
       </div>
 
-      <div class="recent-toots" role="presentation">
+      <div class="recent-toots">
         <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, 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";
@@ -36,7 +36,6 @@ 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;
@@ -53,11 +52,6 @@ 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"];
 
@@ -243,11 +237,10 @@ function onToggleReveal(setValue: Setter<boolean>, event: Event) {
  */
 const RegularToot: Component<RegularTootProps> = (props) => {
   let rootRef: HTMLElement;
-  const [managed, managedActionGroup, pollProps, rest] = splitProps(
+  const [managed, managedActionGroup, rest] = splitProps(
     props,
     ["status", "lang", "class", "actionable", "evaluated", "thread"],
     ["onRetoot", "onFavourite", "onBookmark", "onReply"],
-    ["onVote"],
   );
   const now = useTimeSource();
   const status = () => managed.status;
@@ -359,22 +352,6 @@ 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,40 +232,6 @@ 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) => {
@@ -306,7 +272,6 @@ const TootList: Component<{
                       onRetoot={toggleBoost}
                       onFavourite={toggleFavourite}
                       onReply={reply}
-                      onVote={vote}
                       onClick={[onItemClick, status()]}
                     />
                   );

src/timelines/toots/TootPoll.css

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

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

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

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