src/material/Menu.css

@@ -7,22 +7,6 @@
   width: max-content;
   box-shadow: var(--tutu-shadow-e8);
   contain: content;
-
-  &.e1 {
-    box-shadow: var(--tutu-shadow-e9);
-  }
-
-  &.e2 {
-    box-shadow: var(--tutu-shadow-e10);
-  }
-
-  &.e3 {
-    box-shadow: var(--tutu-shadow-e11);
-  }
-
-  &.e4 {
-    box-shadow: var(--tutu-shadow-e12);
-  }
 }
 
 dialog.Menu::backdrop {

src/material/Menu.tsx

@@ -3,9 +3,8 @@ import { MenuList } from "@suid/material";
 import {
   createEffect,
   createSignal,
-  type Component,
   type JSX,
-  type ParentProps,
+  type ParentComponent,
 } from "solid-js";
 import { ANIM_CURVE_STD } from "./theme";
 import "./Menu.css";
@@ -14,13 +13,13 @@ import {
   animateShrinkToTopRight,
 } from "../platform/anim";
 
-export type Anchor = Pick<DOMRect, "top" | "left" | "right"> & { e?: number };
+type Anchor = Pick<DOMRect, "top" | "left" | "right">
 
-export type MenuProps = ParentProps<{
+type Props = {
   open?: boolean;
   onClose?: JSX.EventHandlerUnion<HTMLDialogElement, Event>;
   anchor: () => Anchor;
-}>;
+};
 
 function px(n?: number) {
   if (n) {
@@ -30,71 +29,15 @@ function px(n?: number) {
   }
 }
 
-/**
+const Menu: ParentComponent<Props> = (props) => {
- * Create managed state for {@link Menu}. This function
- * expose an "open" closure for you to open the menu. The
- * opening and closing is automatically managed internally.
- *
- * @returns The first element is the "open" closure, calls
- *   with anchor infomation to open the menu.
- *   The second element is the state props for {@link Menu}, use
- *   spread syntax to set the props.
- * @example
- * ````tsx
- * const [openMenu, menuState] = createManagedMenuState();
- *
- * <Menu {...menuState}></Menu>
- *
- * <Button onClick={event => openMenu(event.currectTarget.getBoundingClientRect())} />
- * ````
- */
-export function createManagedMenuState() {
-  const [anchor, setAnchor] = createSignal<Anchor>();
-
-  return [
-    setAnchor,
-    {
-      get open() {
-        return !!anchor();
-      },
-      anchor: anchor as () => Anchor,
-      onClose: () => setAnchor(),
-    },
-  ] as const;
-}
-
-/**
- * Material Menu Component. This component is
- * implemented with dialog and {@link MenuList} from SUID.
- *
- * Notes:
- * - Use {@link createManagedMenuState} and you don't need to manage the open and close.
- * - Use {@link MenuItem} from SUID as children.
- */
-const Menu: Component<MenuProps> = (props) => {
   let root: HTMLDialogElement;
   const windowSize = useWindowSize();
 
   const [anchorPos, setAnchorPos] = createSignal<{
     left?: number;
     top?: number;
-    e?: number;
   }>({});
 
-  if (import.meta.env.DEV) {
-    createEffect(() => {
-      switch (anchorPos().e) {
-        case 1:
-        case 2:
-        case 3:
-        case 3:
-          return;
-        default:
-          console.warn('value %s is invalid for param "e"', anchorPos().e);
-      }
-    });
-  }
-
   let openAnimationOrigin: "lt" | "rt" = "lt";
 
   createEffect(() => {
@@ -106,19 +49,18 @@ const Menu: Component<MenuProps> = (props) => {
         const rend = root.getBoundingClientRect();
 
         const { width } = windowSize;
-        const { left, top, right, e } = a;
+        const { left, top, right } = a;
         if (left > width / 2) {
           openAnimationOrigin = "rt";
           setAnchorPos({
             left: right - rend.width,
             top,
-            e,
           });
 
           animateGrowFromTopRight(root, { easing: ANIM_CURVE_STD });
         } else {
           openAnimationOrigin = "lt";
-          setAnchorPos({ left, top, e });
+          setAnchorPos({ left, top });
 
           const overflow = root.style.overflow;
           root.style.overflow = "hidden";
@@ -196,7 +138,7 @@ const Menu: Component<MenuProps> = (props) => {
           e.stopPropagation();
         }
       }}
-      class={`Menu e${anchorPos().e || 0}`}
+      class="Menu"
       style={{
         left: px(anchorPos().left),
         top: px(anchorPos().top),
@@ -206,7 +148,6 @@ const Menu: Component<MenuProps> = (props) => {
       <div
         style={{
           background: "var(--tutu-color-surface)",
-          display: "contents"
         }}
       >
         <MenuList>{props.children}</MenuList>

src/material/Scaffold.css

@@ -1,22 +0,0 @@
-
-.Scaffold__topbar {
-  position: sticky;
-  top: 0px;
-  z-index: var(--tutu-zidx-nav, auto);
-}
-
-.Scaffold__fab-dock {
-  position: fixed;
-  bottom: 40px;
-  right: 40px;
-  z-index: var(--tutu-zidx-nav, auto);
-}
-
-.Scaffold__bottom-dock {
-  position: sticky;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: var(--tutu-zidx-nav, auto);
-  padding-bottom: var(--safe-area-inset-bottom, 0);
-}

src/material/Scaffold.tsx

@@ -1,67 +1,66 @@
 import { createElementSize } from "@solid-primitives/resize-observer";
 import {
-  JSX,
   Show,
   createRenderEffect,
   createSignal,
-  splitProps,
+  onCleanup,
-  type Component,
+  type JSX,
-  type ParentProps,
+  type ParentComponent,
 } from "solid-js";
-import "./Scaffold.css";
+import { css } from "solid-styled";
 
-type ScaffoldProps = ParentProps<
+interface ScaffoldProps {
-  {
+  topbar?: JSX.Element;
-    topbar?: JSX.Element;
+  fab?: JSX.Element;
-    fab?: JSX.Element;
+  bottom?: JSX.Element;
-    bottom?: JSX.Element;
+}
-  } & JSX.HTMLElementTags["div"]
->;
 
-/**
+const Scaffold: ParentComponent<ScaffoldProps> = (props) => {
- * The passthrough props are passed to the content container.
- */
-const Scaffold: Component<ScaffoldProps> = (props) => {
-  const [managed, rest] = splitProps(props, [
-    "topbar",
-    "fab",
-    "bottom",
-    "children",
-    "ref",
-  ]);
   const [topbarElement, setTopbarElement] = createSignal<HTMLElement>();
 
   const topbarSize = createElementSize(topbarElement);
 
+  css`
+    .scaffold-content {
+      --scaffold-topbar-height: ${(topbarSize.height?.toString() ?? 0) + "px"};
+    }
+
+    .topbar {
+      position: sticky;
+      top: 0px;
+      z-index: var(--tutu-zidx-nav, auto);
+    }
+
+    .fab-dock {
+      position: fixed;
+      bottom: 40px;
+      right: 40px;
+      z-index: var(--tutu-zidx-nav, auto);
+    }
+
+    .bottom-dock {
+      position: sticky;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: var(--tutu-zidx-nav, auto);
+      padding-bottom: var(--safe-area-inset-bottom, 0);
+
+    }
+  `;
   return (
     <>
       <Show when={props.topbar}>
-        <div class="Scaffold__topbar" ref={setTopbarElement}>
+        <div class="topbar" ref={setTopbarElement}>
           {props.topbar}
         </div>
       </Show>
       <Show when={props.fab}>
-        <div class="Scaffold__fab-dock">{props.fab}</div>
+        <div class="fab-dock">{props.fab}</div>
       </Show>
-      <div
+      <div class="scaffold-content">{props.children}</div>
-        ref={(e) => {
-          createRenderEffect(() => {
-            e.style.setProperty(
-              "--scaffold-topbar-height",
-              (topbarSize.height?.toString() ?? 0) + "px",
-            );
-          });
-
-          if (managed.ref) {
-            (managed.ref as (val: typeof e) => void)(e);
-          }
-        }}
-        {...rest}
-      >
-        {managed.children}
-      </div>
       <Show when={props.bottom}>
-        <div class="Scaffold__bottom-dock">{props.bottom}</div>
+        <div class="bottom-dock">{props.bottom}</div>
       </Show>
     </>
   );

src/material/theme.css

@@ -106,8 +106,6 @@
 
   /* Submenu (+1dp for each submenu) */
   --tutu-shadow-e9: 0px 9px 18px 0px var(--tutu-color-shadow);
-  --tutu-shadow-e10: 0px 10px 18px 0px var(--tutu-color-shadow);
-  --tutu-shadow-e11: 0px 11px 18px 0px var(--tutu-color-shadow-l1);
 
   /* (pressed) FAB */
   --tutu-shadow-e12: 0px 12px 24px 0px var(--tutu-color-shadow-l1);

src/profiles/Profile.css

@@ -1,82 +0,0 @@
-.Profile {
-  .intro {
-    background-color: var(--tutu-color-surface-d);
-    color: var(--tutu-color-on-surface);
-    padding: 16px 12px;
-    display: flex;
-    flex-flow: column nowrap;
-    gap: 16px;
-  }
-
-  .description {
-    & a {
-      color: inherit;
-      font-style: italic;
-    }
-
-    word-break: break-all;
-  }
-
-  .acct-grp {
-    display: flex;
-    flex-flow: row wrap;
-    gap: 16px;
-    align-items: center;
-
-    & > :nth-child(2) {
-      flex-grow: 1;
-    }
-
-    & > :last-child {
-      flex-grow: 1;
-      text-align: right;
-    }
-  }
-
-  .name-grp {
-    display: flex;
-    flex-flow: column nowrap;
-  }
-
-  table.acct-fields {
-    word-break: break-all;
-
-    & td > a {
-      display: inline-flex;
-      align-items: center;
-      color: inherit;
-      min-height: 44px;
-    }
-
-    & a > .invisible {
-      display: none;
-    }
-
-    & svg {
-      vertical-align: middle;
-    }
-  }
-
-  .toot-list-toolbar {
-    position: sticky;
-    top: var(--scaffold-topbar-height);
-    z-index: calc(var(--tutu-zidx-nav, 1) - 1);
-    background: var(--tutu-color-surface);
-    border-bottom: 1px solid var(--tutu-color-surface-d);
-    contain: content;
-    /* TODO: box-shadow is needed here (same as app bar, e6).
-    There is no good way to detect if the sticky is "sticked" -
-    so let's leave it for future.
-
-    For now we use a trick to make it looks better.
-    */
-    box-shadow: 0px -2px 4px 0px var(--tutu-color-shadow);
-  }
-}
-
-.Profile__page-title {
-  flex-grow: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}

src/profiles/Profile.tsx

@@ -5,8 +5,6 @@ import {
   createSignal,
   createUniqueId,
   For,
-  Switch,
-  Match,
   onCleanup,
   Show,
   type Component,
@@ -19,7 +17,6 @@ import {
   CircularProgress,
   Divider,
   IconButton,
-  ListItemAvatar,
   ListItemIcon,
   ListItemText,
   MenuItem,
@@ -45,13 +42,13 @@ import { useSessionForAcctStr } from "../masto/clients";
 import { resolveCustomEmoji } from "../masto/toot";
 import { FastAverageColor } from "fast-average-color";
 import { useWindowSize } from "@solid-primitives/resize-observer";
+import { css } from "solid-styled";
 import { createTimeline, createTimelineSnapshot } from "../masto/timelines";
 import TootList from "../timelines/TootList";
 import { createTimeSource, TimeSourceProvider } from "../platform/timesrc";
 import TootFilterButton from "./TootFilterButton";
-import Menu, { createManagedMenuState } from "../material/Menu";
+import Menu from "../material/Menu";
 import { share } from "../platform/share";
-import "./Profile.css";
 
 const Profile: Component = () => {
   const navigate = useNavigate();
@@ -69,8 +66,6 @@ const Profile: Component = () => {
 
   const [menuOpen, setMenuOpen] = createSignal(false);
 
-  const [openSubscribeMenu, subscribeMenuState] = createManagedMenuState();
-
   const [scrolledPastBanner, setScrolledPastBanner] = createSignal(false);
   const obx = new IntersectionObserver(
     (entries) => {
@@ -137,6 +132,89 @@ const Profile: Component = () => {
     recentTootChunk.loading ||
     (recentTootFilter().pinned && pinnedTootChunk.loading);
 
+  css`
+    .intro {
+      background-color: var(--tutu-color-surface-d);
+      color: var(--tutu-color-on-surface);
+      padding: 16px 12px;
+      display: flex;
+      flex-flow: column nowrap;
+      gap: 16px;
+    }
+
+    .description {
+      & :global(a) {
+        color: inherit;
+        font-style: italic;
+      }
+
+      word-break: break-all;
+    }
+
+    .acct-grp {
+      display: flex;
+      flex-flow: row wrap;
+      gap: 16px;
+      align-items: center;
+
+      & > :nth-child(2) {
+        flex-grow: 1;
+      }
+
+      & > :last-child {
+        flex-grow: 1;
+        text-align: right;
+      }
+    }
+
+    .name-grp {
+      display: flex;
+      flex-flow: column nowrap;
+    }
+
+    table.acct-fields {
+      word-break: break-all;
+
+      & td > :global(a) {
+        display: inline-flex;
+        align-items: center;
+        color: inherit;
+        min-height: 44px;
+      }
+
+      & :global(a > .invisible) {
+        display: none;
+      }
+
+      & :global(svg) {
+        vertical-align: middle;
+      }
+    }
+
+    .page-title {
+      flex-grow: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .toot-list-toolbar {
+      position: sticky;
+      top: var(--scaffold-topbar-height);
+      z-index: calc(var(--tutu-zidx-nav, 1) - 1);
+      background: var(--tutu-color-surface);
+      border-bottom: 1px solid var(--tutu-color-surface-d);
+      contain: content;
+      /* TODO: box-shadow is needed here (same as app bar, e6).
+      There is no good way to detect if the sticky is "sticked" -
+      so let's leave it for future.
+
+      For now we use a trick to make it looks better.
+      */
+      box-shadow: 0px -2px 4px 0px var(--tutu-color-shadow);
+    }
+  `;
+
   return (
     <Scaffold
       topbar={
@@ -163,7 +241,8 @@ const Profile: Component = () => {
               <Close />
             </IconButton>
             <Title
-              class="Profile__page-title"
+              use:solid-styled
+              class="page-title"
               style={{
                 visibility: scrolledPastBanner() ? undefined : "hidden",
               }}
@@ -182,7 +261,6 @@ const Profile: Component = () => {
           </Toolbar>
         </AppBar>
       }
-      class="Profile"
     >
       <Menu
         open={menuOpen()}
@@ -191,38 +269,25 @@ const Profile: Component = () => {
           document.getElementById(menuButId)!.getBoundingClientRect()
         }
       >
-        <Show when={session().account && profile()}>
+        <Show
-          <Show
+          when={isCurrentSessionProfile()}
-            when={isCurrentSessionProfile()}
+          fallback={
-            fallback={
-              <MenuItem
-                onClick={(event) => {
-                  const { left, right, top } =
-                    event.currentTarget.getBoundingClientRect();
-                  openSubscribeMenu({
-                    left,
-                    right,
-                    top,
-                    e: 1,
-                  });
-                }}
-              >
-                <ListItemIcon>
-                  <PlaylistAdd />
-                </ListItemIcon>
-                <ListItemText>Subscribe...</ListItemText>
-              </MenuItem>
-            }
-          >
             <MenuItem disabled>
               <ListItemIcon>
-                <Edit />
+                <PlaylistAdd />
               </ListItemIcon>
-              <ListItemText>Edit...</ListItemText>
+              <ListItemText>Subscribe...</ListItemText>
             </MenuItem>
-          </Show>
+          }
-          <Divider />
+        >
+          <MenuItem disabled>
+            <ListItemIcon>
+              <Edit />
+            </ListItemIcon>
+            <ListItemText>Edit...</ListItemText>
+          </MenuItem>
         </Show>
+        <Divider />
         <MenuItem disabled>
           <ListItemIcon>
             <Group />
@@ -295,27 +360,6 @@ const Profile: Component = () => {
         ></img>
       </div>
 
-      <Menu {...subscribeMenuState}>
-        <MenuItem disabled>
-          <ListItemAvatar>
-            <Avatar src={session().account?.inf?.avatar}></Avatar>
-          </ListItemAvatar>
-          <ListItemText>
-            <span
-              ref={(e) =>
-                createRenderEffect(() => {
-                  e.innerHTML = resolveCustomEmoji(
-                    session().account?.inf?.displayName || "",
-                    session().account?.inf?.emojis ?? [],
-                  );
-                })
-              }
-            ></span>
-            <span>'s Home</span>
-          </ListItemText>
-        </MenuItem>
-      </Menu>
-
       <div
         class="intro"
         style={{
@@ -341,29 +385,9 @@ const Profile: Component = () => {
             <span>{fullUsername()}</span>
           </div>
           <div>
-            <Switch>
+            <Button variant="contained" color="secondary">
-              <Match when={!session().account || profileErrorUncaught.loading}>
+              Subscribe
-                {<></>}
+            </Button>
-              </Match>
-              <Match when={isCurrentSessionProfile()}>
-                <IconButton color="inherit">
-                  <Edit />
-                </IconButton>
-              </Match>
-              <Match when={true}>
-                <Button
-                  variant="contained"
-                  color="secondary"
-                  onClick={(event) => {
-                    openSubscribeMenu(
-                      event.currentTarget.getBoundingClientRect(),
-                    );
-                  }}
-                >
-                  Subscribe
-                </Button>
-              </Match>
-            </Switch>
           </div>
         </div>
         <div

src/timelines/toot.module.css

@@ -123,6 +123,7 @@
   overflow: hidden;
   z-index: 1;
   position: relative;
+  contain: content;
 
   >img {
     max-width: 100%;