Profile: add current default account into menu

src/profiles/Profile.tsx

@@ -10,6 +10,7 @@ import {
   onCleanup,
   Show,
   type Component,
+  createMemo,
 } from "solid-js";
 import Scaffold from "../material/Scaffold";
 import {
@@ -137,6 +138,17 @@ const Profile: Component = () => {
     recentTootChunk.loading ||
     (recentTootFilter().pinned && pinnedTootChunk.loading);
 
+  const sessionDisplayName = createMemo(() =>
+    resolveCustomEmoji(
+      session().account?.inf?.displayName || "",
+      session().account?.inf?.emojis ?? [],
+    ),
+  );
+
+  const useSessionDisplayName = (e: HTMLElement) => {
+    createRenderEffect(() => (e.innerHTML = sessionDisplayName()));
+  };
+
   return (
     <Scaffold
       topbar={
@@ -191,6 +203,17 @@ const Profile: Component = () => {
           document.getElementById(menuButId)!.getBoundingClientRect()
         }
       >
+        <Show when={session().account}>
+          <MenuItem>
+            <ListItemAvatar>
+              <Avatar src={session().account?.inf?.avatar} />
+            </ListItemAvatar>
+            <ListItemText secondary={"Default account"}>
+              <span ref={useSessionDisplayName}></span>
+            </ListItemText>
+            {/* <ArrowRight /> // for future */}
+          </MenuItem>
+        </Show>
         <Show when={session().account && profile()}>
           <Show
             when={isCurrentSessionProfile()}
@@ -283,7 +306,7 @@ const Profile: Component = () => {
             height: "100%",
           }}
           crossOrigin="anonymous"
-          onLoad={async (event) => {
+          onLoad={(event) => {
             const ins = new FastAverageColor();
             const colors = ins.getColor(event.currentTarget);
             setBannerSampledColors({
@@ -301,16 +324,7 @@ const Profile: Component = () => {
             <Avatar src={session().account?.inf?.avatar}></Avatar>
           </ListItemAvatar>
           <ListItemText>
-            <span
+            <span ref={useSessionDisplayName}></span>
-              ref={(e) =>
-                createRenderEffect(() => {
-                  e.innerHTML = resolveCustomEmoji(
-                    session().account?.inf?.displayName || "",
-                    session().account?.inf?.emojis ?? [],
-                  );
-                })
-              }
-            ></span>
             <span>'s Home</span>
           </ListItemText>
         </MenuItem>