diff --git a/src/profiles/Profile.tsx b/src/profiles/Profile.tsx index 64cf0b5..c9e7785 100644 --- a/src/profiles/Profile.tsx +++ b/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)", }} > - + { createRenderEffect(() => (e.innerHTML = displayName())) } > - + + } > + + document.getElementById(menuButId)!.getBoundingClientRect() + } + > + + + + + Edit... + + + + + + + Mention {profile()?.displayName || ""}... + + + + + + + Open in browser... + + share({ url: profile()?.url })}> + + + + Share... + +
{
{ onChangeToot={recentToots.set} /> + + +
+ + + +
+
); };