diff --git a/src/profiles/Profile.tsx b/src/profiles/Profile.tsx index 6976565..4e8a930 100644 --- a/src/profiles/Profile.tsx +++ b/src/profiles/Profile.tsx @@ -17,6 +17,7 @@ import { AppBar, Avatar, Button, + Checkbox, CircularProgress, Divider, IconButton, @@ -67,6 +68,8 @@ const Profile: Component = () => { const time = createTimeSource(); const menuButId = createUniqueId(); + const recentTootListId = createUniqueId(); + const optMenuId = createUniqueId(); const [menuOpen, setMenuOpen] = createSignal(false); @@ -88,17 +91,20 @@ const Profile: Component = () => { ); onCleanup(() => obx.disconnect()); - const [profileErrorUncaught] = createResource( + const [profileUncaught] = createResource( () => [session().client, params.id] as const, async ([client, id]) => { return await client.v1.accounts.$select(id).fetch(); }, ); - const profile = () => - catchError(profileErrorUncaught, (err) => { - console.error(err); - }); + const profile = () => { + try { + return profileUncaught(); + } catch (reason) { + console.error(reason); + } + }; const isCurrentSessionProfile = () => { return session().account?.inf?.url === profile()?.url; @@ -127,6 +133,22 @@ const Profile: Component = () => { }, ); + const [relationshipUncaught, { mutate: mutateRelationship }] = createResource( + () => [session(), params.id] as const, + async ([sess, id]) => { + if (!sess.account) return; // No account, no relation + const relations = await session().client.v1.accounts.relationships.fetch({ + id: [id], + }); + return relations.length > 0 ? relations[0] : undefined; + }, + ); + + const relationship = () => + catchError(relationshipUncaught, (reason) => { + console.error(reason); + }); + const bannerImg = () => profile()?.header; const avatarImg = () => profile()?.avatar; const displayName = () => @@ -149,10 +171,27 @@ const Profile: Component = () => { createRenderEffect(() => (e.innerHTML = sessionDisplayName())); }; + const toggleSubscribeHome = async () => { + const client = session().client; + if (!session().account) return; + const isSubscribed = relationship()?.following ?? false; + mutateRelationship((x) => Object.assign({ following: !isSubscribed }, x)); + subscribeMenuState.onClose(); + + if (isSubscribed) { + const nrel = await client.v1.accounts.$select(params.id).unfollow(); + mutateRelationship(nrel); + } else { + const nrel = await client.v1.accounts.$select(params.id).follow(); + mutateRelationship(nrel); + } + }; + return ( { @@ -197,11 +238,13 @@ const Profile: Component = () => { class="Profile" > document.getElementById(menuButId)!.getBoundingClientRect() } + aria-label="Options for the Profile" > @@ -296,6 +339,7 @@ const Profile: Component = () => { "margin-top": "calc(-1 * (var(--scaffold-topbar-height) + var(--safe-area-inset-top)))", }} + role="presentation" > obx.observe(e)} @@ -306,6 +350,7 @@ const Profile: Component = () => { height: "100%", }} crossOrigin="anonymous" + alt={`Banner image for ${profile()?.displayName || "the user"}`} onLoad={(event) => { const ins = new FastAverageColor(); const colors = ins.getColor(event.currentTarget); @@ -319,14 +364,21 @@ const Profile: Component = () => { - + - + 's Home + + @@ -337,9 +389,10 @@ const Profile: Component = () => { color: bannerSampledColors()?.text, }} > -
+
{ ref={(e) => createRenderEffect(() => (e.innerHTML = displayName())) } + aria-label="Display name" > - {fullUsername()} + {fullUsername()}
- + {<>} @@ -374,20 +434,24 @@ const Profile: Component = () => { ); }} > - Subscribe + {relationship()?.following ? "Subscribed" : "Subscribe"}
- -
+
createRenderEffect(() => (e.innerHTML = description() || "")) } - >
+ > - +
{(item, index) => { @@ -436,6 +500,7 @@ const Profile: Component = () => { { >