Profile: subscribe menu show entries

src/material/Menu.css

@@ -7,6 +7,22 @@
   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,8 +3,9 @@ import { MenuList } from "@suid/material";
 import {
   createEffect,
   createSignal,
+  type Component,
   type JSX,
-  type ParentComponent,
+  type ParentProps,
 } from "solid-js";
 import { ANIM_CURVE_STD } from "./theme";
 import "./Menu.css";
@@ -13,13 +14,13 @@ import {
   animateShrinkToTopRight,
 } from "../platform/anim";
 
-type Anchor = Pick<DOMRect, "top" | "left" | "right">
+export type Anchor = Pick<DOMRect, "top" | "left" | "right"> & { e?: number };
 
-type Props = {
+export type MenuProps = ParentProps<{
   open?: boolean;
   onClose?: JSX.EventHandlerUnion<HTMLDialogElement, Event>;
   anchor: () => Anchor;
-};
+}>;
 
 function px(n?: number) {
   if (n) {
@@ -29,15 +30,71 @@ 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(() => {
@@ -49,18 +106,19 @@ const Menu: ParentComponent<Props> = (props) => {
         const rend = root.getBoundingClientRect();
 
         const { width } = windowSize;
-        const { left, top, right } = a;
+        const { left, top, right, e } = 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 });
+          setAnchorPos({ left, top, e });
 
           const overflow = root.style.overflow;
           root.style.overflow = "hidden";
@@ -138,7 +196,7 @@ const Menu: ParentComponent<Props> = (props) => {
           e.stopPropagation();
         }
       }}
-      class="Menu"
+      class={`Menu e${anchorPos().e || 0}`}
       style={{
         left: px(anchorPos().left),
         top: px(anchorPos().top),
@@ -148,6 +206,7 @@ const Menu: ParentComponent<Props> = (props) => {
       <div
         style={{
           background: "var(--tutu-color-surface)",
+          display: "contents"
         }}
       >
         <MenuList>{props.children}</MenuList>

src/material/Scaffold.css

@@ -0,0 +1,22 @@
+
+.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,66 +1,67 @@
 import { createElementSize } from "@solid-primitives/resize-observer";
 import {
+  JSX,
   Show,
   createRenderEffect,
   createSignal,
-  onCleanup,
+  splitProps,
-  type JSX,
+  type Component,
-  type ParentComponent,
+  type ParentProps,
 } from "solid-js";
-import { css } from "solid-styled";
+import "./Scaffold.css";
 
-interface ScaffoldProps {
+type ScaffoldProps = ParentProps<
+  {
     topbar?: JSX.Element;
     fab?: 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="topbar" ref={setTopbarElement}>
+        <div class="Scaffold__topbar" ref={setTopbarElement}>
           {props.topbar}
         </div>
       </Show>
       <Show when={props.fab}>
-        <div class="fab-dock">{props.fab}</div>
+        <div class="Scaffold__fab-dock">{props.fab}</div>
       </Show>
-      <div class="scaffold-content">{props.children}</div>
+      <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="bottom-dock">{props.bottom}</div>
+        <div class="Scaffold__bottom-dock">{props.bottom}</div>
       </Show>
     </>
   );

src/material/theme.css

@@ -106,6 +106,8 @@
 
   /* 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

@@ -0,0 +1,82 @@
+.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,6 +5,8 @@ import {
   createSignal,
   createUniqueId,
   For,
+  Switch,
+  Match,
   onCleanup,
   Show,
   type Component,
@@ -17,6 +19,7 @@ import {
   CircularProgress,
   Divider,
   IconButton,
+  ListItemAvatar,
   ListItemIcon,
   ListItemText,
   MenuItem,
@@ -42,13 +45,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 from "../material/Menu";
+import Menu, { createManagedMenuState } from "../material/Menu";
 import { share } from "../platform/share";
+import "./Profile.css";
 
 const Profile: Component = () => {
   const navigate = useNavigate();
@@ -66,6 +69,8 @@ const Profile: Component = () => {
 
   const [menuOpen, setMenuOpen] = createSignal(false);
 
+  const [openSubscribeMenu, subscribeMenuState] = createManagedMenuState();
+
   const [scrolledPastBanner, setScrolledPastBanner] = createSignal(false);
   const obx = new IntersectionObserver(
     (entries) => {
@@ -132,89 +137,6 @@ 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={
@@ -241,8 +163,7 @@ const Profile: Component = () => {
               <Close />
             </IconButton>
             <Title
-              use:solid-styled
+              class="Profile__page-title"
-              class="page-title"
               style={{
                 visibility: scrolledPastBanner() ? undefined : "hidden",
               }}
@@ -261,6 +182,7 @@ const Profile: Component = () => {
           </Toolbar>
         </AppBar>
       }
+      class="Profile"
     >
       <Menu
         open={menuOpen()}
@@ -269,10 +191,22 @@ const Profile: Component = () => {
           document.getElementById(menuButId)!.getBoundingClientRect()
         }
       >
+        <Show when={session().account && profile()}>
           <Show
             when={isCurrentSessionProfile()}
             fallback={
-            <MenuItem disabled>
+              <MenuItem
+                onClick={(event) => {
+                  const { left, right, top } =
+                    event.currentTarget.getBoundingClientRect();
+                  openSubscribeMenu({
+                    left,
+                    right,
+                    top,
+                    e: 1,
+                  });
+                }}
+              >
                 <ListItemIcon>
                   <PlaylistAdd />
                 </ListItemIcon>
@@ -288,6 +222,7 @@ const Profile: Component = () => {
             </MenuItem>
           </Show>
           <Divider />
+        </Show>
         <MenuItem disabled>
           <ListItemIcon>
             <Group />
@@ -360,6 +295,27 @@ 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={{
@@ -385,9 +341,29 @@ const Profile: Component = () => {
             <span>{fullUsername()}</span>
           </div>
           <div>
-            <Button variant="contained" color="secondary">
+            <Switch>
+              <Match when={!session().account || profileErrorUncaught.loading}>
+                {<></>}
+              </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,7 +123,6 @@
   overflow: hidden;
   z-index: 1;
   position: relative;
-  contain: content;
 
   >img {
     max-width: 100%;