Profile: add menu and load more button

src/profiles/Profile.tsx

@@ -2,14 +2,34 @@ import {
   createRenderEffect,
   createResource,
   createSignal,
+  createUniqueId,
   For,
   onCleanup,
   Show,
   type Component,
 } from "solid-js";
 import Scaffold from "../material/Scaffold";
-import { AppBar, Avatar, Button, IconButton, Toolbar } from "@suid/material";
-import { Close, MoreVert, Verified } from "@suid/icons-material";
+import {
+  AppBar,
+  Avatar,
+  Button,
+  Divider,
+  IconButton,
+  ListItemIcon,
+  ListItemText,
+  MenuItem,
+  Toolbar,
+} from "@suid/material";
+import {
+  Close,
+  Edit,
+  ExpandMore,
+  MoreVert,
+  OpenInBrowser,
+  Send,
+  Share,
+  Verified,
+} from "@suid/icons-material";
 import { Title } from "../material/typography";
 import { useNavigate, useParams } from "@solidjs/router";
 import { useSessionForAcctStr } from "../masto/clients";
@@ -21,6 +41,8 @@ import { createTimeline } from "../masto/timelines";
 import TootList from "../timelines/TootList";
 import { createTimeSource, TimeSourceProvider } from "../platform/timesrc";
 import TootFilterButton from "./TootFilterButton";
+import Menu from "../material/Menu";
+import { share } from "../platform/share";
 
 const Profile: Component = () => {
   const navigate = useNavigate();
@@ -34,6 +56,10 @@ const Profile: Component = () => {
   const windowSize = useWindowSize();
   const time = createTimeSource();
 
+  const menuButId = createUniqueId();
+
+  const [menuOpen, setMenuOpen] = createSignal(false);
+
   const [scrolledPastBanner, setScrolledPastBanner] = createSignal(false);
   const obx = new IntersectionObserver(
     (entries) => {
@@ -58,18 +84,19 @@ const Profile: Component = () => {
   );
 
   const [recentTootFilter, setRecentTootFilter] = createSignal({
-    boost: true,
+    boost: false,
     reply: true,
     original: true,
   });
 
-  const [recentToots] = createTimeline(
-    () => session().client.v1.accounts.$select(params.id).statuses,
-    () => {
-      const { boost, reply } = recentTootFilter();
-      return { limit: 20, excludeReblogs: !boost, excludeReplies: !reply };
-    },
-  );
+  const [recentToots, recentTootChunk, { refetch: refetchRecentToots }] =
+    createTimeline(
+      () => session().client.v1.accounts.$select(params.id).statuses,
+      () => {
+        const { boost, reply } = recentTootFilter();
+        return { limit: 20, excludeReblogs: !boost, excludeReplies: !reply };
+      },
+    );
 
   const bannerImg = () => profile()?.header;
   const avatarImg = () => profile()?.avatar;
@@ -140,7 +167,11 @@ const Profile: Component = () => {
               paddingTop: "var(--safe-area-inset-top)",
             }}
           >
-            <IconButton color="inherit" onClick={[navigate, -1]}>
+            <IconButton
+              color="inherit"
+              onClick={[navigate, -1]}
+              aria-label="Close"
+            >
               <Close />
             </IconButton>
             <Title
@@ -153,13 +184,52 @@ const Profile: Component = () => {
                 createRenderEffect(() => (e.innerHTML = displayName()))
               }
             ></Title>
-            <IconButton color="inherit">
+
+            <IconButton
+              id={menuButId}
+              color="inherit"
+              onClick={[setMenuOpen, true]}
+            >
               <MoreVert />
             </IconButton>
           </Toolbar>
         </AppBar>
       }
     >
+      <Menu
+        open={menuOpen()}
+        onClose={[setMenuOpen, false]}
+        anchor={() =>
+          document.getElementById(menuButId)!.getBoundingClientRect()
+        }
+      >
+        <MenuItem disabled>
+          <ListItemIcon>
+            <Edit />
+          </ListItemIcon>
+          <ListItemText>Edit...</ListItemText>
+        </MenuItem>
+        <Divider />
+        <MenuItem disabled>
+          <ListItemIcon>
+            <Send />
+          </ListItemIcon>
+          <ListItemText>Mention {profile()?.displayName || ""}...</ListItemText>
+        </MenuItem>
+        <Divider />
+        <MenuItem component={"a"} href={profile()?.url} target="_blank" rel="noopener noreferrer">
+          <ListItemIcon>
+            <OpenInBrowser />
+          </ListItemIcon>
+          <ListItemText>Open in browser...</ListItemText>
+        </MenuItem>
+        <MenuItem onClick={() => share({ url: profile()?.url })}>
+          <ListItemIcon>
+            <Share />
+          </ListItemIcon>
+          <ListItemText>Share...</ListItemText>
+        </MenuItem>
+      </Menu>
       <div
         style={{
           width: "100%",
@@ -251,7 +321,7 @@ const Profile: Component = () => {
       <div>
         <TootFilterButton
           options={{
-            boost: "Boosteds",
+            boost: "Boosts",
             reply: "Replies",
             original: "Originals",
           }}
@@ -268,6 +338,24 @@ const Profile: Component = () => {
           onChangeToot={recentToots.set}
         />
       </TimeSourceProvider>
+
+      <Show when={!recentTootChunk()?.done}>
+        <div
+          style={{
+            "text-align": "center",
+            "padding-bottom": "var(--safe-area-inset-bottom)",
+          }}
+        >
+          <IconButton
+            aria-label="Load More"
+            size="large"
+            color="primary"
+            onClick={[refetchRecentToots, "prev"]}
+          >
+            <ExpandMore />
+          </IconButton>
+        </div>
+      </Show>
     </Scaffold>
   );
 };