src/material/BottomSheet.tsx

@@ -11,15 +11,6 @@ import {
 import "./BottomSheet.css";
 import { useHeroSignal } from "../platform/anim";
 import material from "./material.module.css";
-import {
-  ANIM_CURVE_ACELERATION,
-  ANIM_CURVE_DECELERATION,
-  ANIM_CURVE_STD,
-} from "./theme";
-import {
-  animateSlideInFromRight,
-  animateSlideOutToRight,
-} from "../platform/anim";
 
 export type BottomSheetProps = {
   open?: boolean;
@@ -48,7 +39,7 @@ function composeAnimationFrame(
   };
 }
 
-const MOVE_SPEED = 1600;
+const MOVE_SPEED = 1200;
 
 const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
   let element: HTMLDialogElement;
@@ -96,16 +87,11 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
         onClose();
         return;
       }
-      const onAnimationEnd = () => {
+      const animation = props.bottomUp
-        element.classList.remove("animated");
-        onClose();
-      };
-      element.classList.add("animated");
-      animation = props.bottomUp
         ? animateSlideInFromBottom(element, true)
-        : animateSlideOutToRight(element, { easing: ANIM_CURVE_ACELERATION });
+        : animateSlideInFromRight(element, true);
-      animation.addEventListener("finish", onAnimationEnd);
+      animation.addEventListener("finish", onClose);
-      animation.addEventListener("cancel", onAnimationEnd);
+      animation.addEventListener("cancel", onClose);
     }
   };
 
@@ -123,18 +109,37 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
     } else if (props.bottomUp) {
       animateSlideInFromBottom(element);
     } else if (window.innerWidth <= 560) {
-      element.classList.add("animated");
+      animateSlideInFromRight(element);
-      const onAnimationEnd = () => {
-        element.classList.remove("animated");
-      };
-      animation = animateSlideInFromRight(element, {
-        easing: ANIM_CURVE_DECELERATION,
-      });
-      animation.addEventListener("finish", onAnimationEnd);
-      animation.addEventListener("cancel", onAnimationEnd);
     }
   };
 
+  const animateSlideInFromRight = (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.left - window.innerWidth);
+    const duration = (distance / MOVE_SPEED) * 1000;
+
+    animation = element.animate(
+      {
+        left: reserve
+          ? [`${rect.left}px`, `${window.innerWidth}px`]
+          : [`${window.innerWidth}px`, `${rect.left}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;
+  };
+
   const animateSlideInFromBottom = (
     element: HTMLElement,
     reserve?: boolean,
@@ -171,19 +176,13 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
     element: HTMLElement,
     reserve?: boolean,
   ) => {
-    const easing = ANIM_CURVE_STD;
+    const easing = "cubic-bezier(0.4, 0, 0.2, 1)";
     element.classList.add("animated");
-    // distance_lt = (|top_start - top_end|^2 + |left_end - left_end|^2)^(-2)
+    const distance = Math.sqrt(
-    const distancelt = Math.sqrt(
       Math.pow(Math.abs(startRect.top - endRect.top), 2) +
-        Math.pow(Math.abs(startRect.left - endRect.left), 2),
+        Math.pow(Math.abs(startRect.left - startRect.top), 2),
     );
-    const distancerb = Math.sqrt(
+    const duration = (distance / MOVE_SPEED) * 1000;
-      Math.pow(Math.abs(startRect.bottom - endRect.bottom), 2) +
-        Math.pow(Math.abs(startRect.right - endRect.right), 2),
-    );
-    const distance = distancelt + distancerb;
-    const duration = distance / 1.6;
     animation = element.animate(
       [
         composeAnimationFrame(startRect, { transform: "none" }),

src/material/Menu.tsx

@@ -13,12 +13,10 @@ import {
   animateShrinkToTopRight,
 } from "../platform/anim";
 
-type Anchor = Pick<DOMRect, "top" | "left" | "right">
-
 type Props = {
   open?: boolean;
   onClose?: JSX.EventHandlerUnion<HTMLDialogElement, Event>;
-  anchor: () => Anchor;
+  anchor: () => DOMRect;
 };
 
 function px(n?: number) {

src/platform/anim.ts

@@ -49,7 +49,7 @@ export function useHeroSignal(
 
     return [get, set];
   } else {
-    console.debug("no hero source");
+    console.debug("no hero source")
     return [() => undefined, () => undefined];
   }
 }
@@ -85,6 +85,7 @@ export function animateRollOutFromTop(
   return animation;
 }
 
+
 export function animateRollInFromBottom(
   root: HTMLElement,
   options?: Omit<KeyframeAnimationOptions, "duration">,
@@ -125,10 +126,8 @@ export function animateGrowFromTopRight(
 
   const { width, height } = root.getBoundingClientRect();
 
-  const speed = transitionSpeedForEnter(window.innerHeight);
+  const durationX = Math.floor((height / 1600) * 1000);
-
+  const durationY = Math.floor((width / 1600) * 1000);
-  const durationX = Math.floor(height / speed);
-  const durationY = Math.floor(width / speed);
 
   // finds the offset for the center frame,
   // it will stops at the (minDuration / maxDuration)%
@@ -138,19 +137,20 @@ export function animateGrowFromTopRight(
   const centerOffset = minDuration / maxDuration;
 
   const keyframes = [
-    { transform: "scaleX(0.5)", opacity: 0, height: "0px", offset: 0 },
+    { transform: "scaleX(0)", opacity: 0, height: "0px", offset: 0 },
     {
-      transform: `scaleX(${minDuration === durationX ? "1" : centerOffset / 2 + 0.5})`,
+      transform: `scaleX(${minDuration === durationX ? "1" : centerOffset})`,
       height: `${(minDuration === durationY ? 1 : centerOffset) * height}px`,
       offset: centerOffset,
+      opacity: 1,
     },
-    { transform: "scaleX(1)", height: `${height}px`, opacity: 1, offset: 1 },
+    { transform: "scaleX(1)", height: `${height}px`, offset: 1 },
   ];
 
-  const animation = root.animate(keyframes, {
+  const animation = root.animate(
-    ...options,
+    keyframes,
-    duration: maxDuration,
+    { ...options, duration: maxDuration },
-  });
+  );
 
   const restore = () => {
     root.style.transformOrigin = transformOrigin;
@@ -173,9 +173,9 @@ export function animateShrinkToTopRight(
 
   const { width, height } = root.getBoundingClientRect();
 
-  const speed = transitionSpeedForLeave(window.innerWidth);
+  const duration = Math.floor(
-
+    Math.max((width / 1600) * 1000, (height / 1600) * 1000),
-  const duration = Math.floor(Math.max(width / speed, height / speed));
+  );
 
   const animation = root.animate(
     {
@@ -195,105 +195,3 @@ export function animateShrinkToTopRight(
 
   return animation;
 }
-
-// Contribution to the animation speed:
-// - the screen size: mobiles should have longer transition,
-//   the transition time should be longer as the travelling distance longer,
-//   but it's not linear. The larger screen should have higher velocity,
-//   to avoid the transition is too long.
-//   As the screen larger, on desktops, the transition should be simpler and
-//   signficantly faster.
-//   On much smaller screens, like wearables, the transition should be shorter
-//   than on mobiles.
-// - Animation complexity: On mobile:
-//   - large, complex, full-screen transitions may have longer durations, over 375ms
-//   - entering screen over 225ms
-//   - leaving screen over 195ms
-
-function transitionSpeedForEnter(innerWidth: number) {
-  if (innerWidth < 300) {
-    return 2.4;
-  } else if (innerWidth < 560) {
-    return 1.6;
-  } else if (innerWidth < 1200) {
-    return 2.4;
-  } else {
-    return 2.55;
-  }
-}
-
-function transitionSpeedForLeave(innerWidth: number) {
-  if (innerWidth < 300) {
-    return 2.8;
-  } else if (innerWidth < 560) {
-    return 1.96;
-  } else if (innerWidth < 1200) {
-    return 2.8;
-  } else {
-    return 2.55;
-  }
-}
-
-export function animateSlideInFromRight(
-  root: HTMLElement,
-  options?: Omit<KeyframeAnimationOptions, "duration">,
-) {
-  const { left } = root.getBoundingClientRect();
-  const { innerWidth } = window;
-
-  const oldOverflow = document.body.style.overflow;
-  document.body.style.overflow = "hidden";
-
-  const distance = Math.abs(left - innerWidth);
-  const duration = Math.floor(distance / transitionSpeedForEnter(innerWidth));
-
-  const opts = Object.assign({ duration }, options);
-
-  const animation = root.animate(
-    {
-      left: [`${innerWidth}px`, `${left}px`],
-    },
-    opts,
-  );
-
-  const restore = () => {
-    document.body.style.overflow = oldOverflow;
-  };
-
-  animation.addEventListener("cancel", restore);
-  animation.addEventListener("finish", restore);
-
-  return animation;
-}
-
-export function animateSlideOutToRight(
-  root: HTMLElement,
-  options?: Omit<KeyframeAnimationOptions, "duration">,
-) {
-  const { left } = root.getBoundingClientRect();
-  const { innerWidth } = window;
-
-  const oldOverflow = document.body.style.overflow;
-  document.body.style.overflow = "hidden";
-
-  const distance = Math.abs(left - innerWidth);
-  const duration = Math.floor(distance / transitionSpeedForLeave(innerWidth));
-
-  const opts = Object.assign({ duration }, options);
-
-  const animation = root.animate(
-    {
-      left: [`${left}px`, `${innerWidth}px`],
-    },
-    opts,
-  );
-
-  const restore = () => {
-    document.body.style.overflow = oldOverflow;
-  };
-
-  animation.addEventListener("cancel", restore);
-  animation.addEventListener("finish", restore);
-
-  return animation;
-}

src/profiles/Profile.tsx

@@ -26,14 +26,10 @@ import {
   Close,
   Edit,
   ExpandMore,
-  Group,
   MoreVert,
   OpenInBrowser,
-  PersonOff,
-  PlaylistAdd,
   Send,
   Share,
-  Translate,
   Verified,
 } from "@suid/icons-material";
 import { Title } from "../material/typography";
@@ -94,10 +90,6 @@ const Profile: Component = () => {
       console.error(err);
     });
 
-  const isCurrentSessionProfile = () => {
-    return session().account?.inf?.url === profile()?.url;
-  };
-
   const [recentTootFilter, setRecentTootFilter] = createSignal({
     pinned: true,
     boost: false,
@@ -269,48 +261,18 @@ const Profile: Component = () => {
           document.getElementById(menuButId)!.getBoundingClientRect()
         }
       >
-        <Show
+        <MenuItem disabled>
-          when={isCurrentSessionProfile()}
+          <ListItemIcon>
-          fallback={
+            <Edit />
-            <MenuItem disabled>
+          </ListItemIcon>
-              <ListItemIcon>
+          <ListItemText>Edit...</ListItemText>
-                <PlaylistAdd />
+        </MenuItem>
-              </ListItemIcon>
-              <ListItemText>Subscribe...</ListItemText>
-            </MenuItem>
-          }
-        >
-          <MenuItem disabled>
-            <ListItemIcon>
-              <Edit />
-            </ListItemIcon>
-            <ListItemText>Edit...</ListItemText>
-          </MenuItem>
-        </Show>
         <Divider />
-        <MenuItem disabled>
-          <ListItemIcon>
-            <Group />
-          </ListItemIcon>
-          <ListItemText>Subscribers</ListItemText>
-        </MenuItem>
-        <MenuItem disabled>
-          <ListItemIcon>
-            <PersonOff />
-          </ListItemIcon>
-          <ListItemText>Blocklist</ListItemText>
-        </MenuItem>
-        <MenuItem disabled>
-          <ListItemIcon>
-            <Translate />
-          </ListItemIcon>
-          <ListItemText>Translate Name and Bio...</ListItemText>
-        </MenuItem>
         <MenuItem disabled>
           <ListItemIcon>
             <Send />
           </ListItemIcon>
-          <ListItemText>Mention in...</ListItemText>
+          <ListItemText>Mention {profile()?.displayName || ""}...</ListItemText>
         </MenuItem>
         <Divider />
         <MenuItem
@@ -437,7 +399,7 @@ const Profile: Component = () => {
       </div>
 
       <TimeSourceProvider value={time}>
-        <Show when={recentTootFilter().pinned && pinnedToots.list.length > 0}>
+        <Show when={recentTootFilter().pinned}>
           <TootList
             threads={pinnedToots.list}
             onUnknownThread={pinnedToots.getPath}

src/profiles/TootFilterButton.tsx

@@ -1,5 +1,15 @@
-import { Button, MenuItem, Checkbox, ListItemText } from "@suid/material";
+import {
-import { createMemo, createSignal, createUniqueId, For } from "solid-js";
+  Button,
+  MenuItem,
+  Checkbox,
+  ListItemText,
+} from "@suid/material";
+import {
+  createMemo,
+  createSignal,
+  createUniqueId,
+  For,
+} from "solid-js";
 import Menu from "../material/Menu";
 import { FilterList, FilterListOff } from "@suid/icons-material";
 
@@ -58,20 +68,9 @@ function TootFilterButton<F extends Record<string, string>>(props: Props<F>) {
     );
   };
 
-  let anchor: { left: number; top: number; right: number };
-
-  const onClick = (event: MouseEvent) => {
-    anchor = {
-      left: event.clientX,
-      right: event.clientX,
-      top: event.clientY,
-    };
-    setOpen(true);
-  };
-
   return (
     <>
-      <Button size="large" onClick={onClick} id={buttonId}>
+      <Button size="large" onClick={[setOpen, true]} id={buttonId}>
         {appliedKeys().length === optionKeys().length ? (
           <FilterListOff />
         ) : (
@@ -80,7 +79,13 @@ function TootFilterButton<F extends Record<string, string>>(props: Props<F>) {
 
         <span style={{ "margin-left": "0.5em" }}>{text()}</span>
       </Button>
-      <Menu open={open()} onClose={[setOpen, false]} anchor={() => anchor}>
+      <Menu
+        open={open()}
+        onClose={[setOpen, false]}
+        anchor={() =>
+          document.getElementById(buttonId)!.getBoundingClientRect()
+        }
+      >
         <For each={Object.keys(props.options)}>
           {(item, idx) => (
             <>