Profile: subscribe menu show entries

src/profiles/Profile.tsx

@@ -19,6 +19,7 @@ import {
   CircularProgress,
   Divider,
   IconButton,
+  ListItemAvatar,
   ListItemIcon,
   ListItemText,
   MenuItem,
@@ -67,8 +68,6 @@ 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();
 
@@ -192,11 +191,22 @@ const Profile: Component = () => {
           document.getElementById(menuButId)!.getBoundingClientRect()
         }
       >
-        <Show when={session().account}>
+        <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>
@@ -287,9 +297,21 @@ const Profile: Component = () => {
 
       <Menu {...subscribeMenuState}>
         <MenuItem disabled>
+          <ListItemAvatar>
+            <Avatar src={session().account?.inf?.avatar}></Avatar>
+          </ListItemAvatar>
           <ListItemText>
-            <span>{session().account?.inf?.displayName || ""}</span>
-            <span>'s timeline</span>
+            <span
+              ref={(e) =>
+                createRenderEffect(() => {
+                  e.innerHTML = resolveCustomEmoji(
+                    session().account?.inf?.displayName || "",
+                    session().account?.inf?.emojis ?? [],
+                  );
+                })
+              }
+            ></span>
+            <span>'s Home</span>
           </ListItemText>
         </MenuItem>
       </Menu>
@@ -320,7 +342,9 @@ const Profile: Component = () => {
           </div>
           <div>
             <Switch>
-              <Match when={!session().account}>{<></>}</Match>
+              <Match when={!session().account || profileErrorUncaught.loading}>
+                {<></>}
+              </Match>
               <Match when={isCurrentSessionProfile()}>
                 <IconButton color="inherit">
                   <Edit />