Profile: add subscribe menu

src/profiles/Profile.tsx

@@ -5,6 +5,8 @@ import {
   createSignal,
   createUniqueId,
   For,
+  Switch,
+  Match,
   onCleanup,
   Show,
   type Component,
@@ -42,13 +44,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();
@@ -65,6 +67,10 @@ const Profile: Component = () => {
   const menuButId = createUniqueId();
 
   const [menuOpen, setMenuOpen] = createSignal(false);
+  const [subscribeMenuOpen, setSubscribeMenuOpen] = createSignal(false);
+  let subcribeMenuAnchor: { top: number; right: number; left: number };
+
+  const [openSubscribeMenu, subscribeMenuState] = createManagedMenuState();
 
   const [scrolledPastBanner, setScrolledPastBanner] = createSignal(false);
   const obx = new IntersectionObserver(
@@ -132,89 +138,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 +164,7 @@ const Profile: Component = () => {
               <Close />
             </IconButton>
             <Title
-              use:solid-styled
-              class="page-title"
+              class="Profile__page-title"
               style={{
                 visibility: scrolledPastBanner() ? undefined : "hidden",
               }}
@@ -261,6 +183,7 @@ const Profile: Component = () => {
           </Toolbar>
         </AppBar>
       }
+      class="Profile"
     >
       <Menu
         open={menuOpen()}
@@ -269,25 +192,27 @@ const Profile: Component = () => {
           document.getElementById(menuButId)!.getBoundingClientRect()
         }
       >
-        <Show
-          when={isCurrentSessionProfile()}
-          fallback={
+        <Show when={session().account}>
+          <Show
+            when={isCurrentSessionProfile()}
+            fallback={
+              <MenuItem disabled>
+                <ListItemIcon>
+                  <PlaylistAdd />
+                </ListItemIcon>
+                <ListItemText>Subscribe...</ListItemText>
+              </MenuItem>
+            }
+          >
             <MenuItem disabled>
               <ListItemIcon>
-                <PlaylistAdd />
+                <Edit />
               </ListItemIcon>
-              <ListItemText>Subscribe...</ListItemText>
+              <ListItemText>Edit...</ListItemText>
             </MenuItem>
-          }
-        >
-          <MenuItem disabled>
-            <ListItemIcon>
-              <Edit />
-            </ListItemIcon>
-            <ListItemText>Edit...</ListItemText>
-          </MenuItem>
+          </Show>
+          <Divider />
         </Show>
-        <Divider />
         <MenuItem disabled>
           <ListItemIcon>
             <Group />
@@ -360,6 +285,15 @@ const Profile: Component = () => {
         ></img>
       </div>
 
+      <Menu {...subscribeMenuState}>
+        <MenuItem disabled>
+          <ListItemText>
+            <span>{session().account?.inf?.displayName || ""}</span>
+            <span>'s timeline</span>
+          </ListItemText>
+        </MenuItem>
+      </Menu>
+
       <div
         class="intro"
         style={{
@@ -385,9 +319,27 @@ const Profile: Component = () => {
             <span>{fullUsername()}</span>
           </div>
           <div>
-            <Button variant="contained" color="secondary">
-              Subscribe
-            </Button>
+            <Switch>
+              <Match when={!session().account}>{<></>}</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