RegularToot: open profile

src/timelines/RegularToot.tsx

@@ -39,6 +39,8 @@ import { FastAverageColor } from "fast-average-color";
 import Color from "colorjs.io";
 import { useDateFnLocale } from "../platform/i18n";
 import { canShare, share } from "../platform/share";
+import { makeAcctText, useDefaultSession } from "../masto/clients";
+import { useNavigate } from "@solidjs/router";
 
 type TootContentViewProps = {
   source?: string;
@@ -209,12 +211,16 @@ function TootActionGroup<T extends mastodon.v1.Status>(
   );
 }
 
-function TootAuthorGroup(props: { status: mastodon.v1.Status; now: Date }) {
+function TootAuthorGroup(props: {
+  status: mastodon.v1.Status;
+  now: Date;
+  onClick?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>;
+}) {
   const toot = () => props.status;
   const dateFnLocale = useDateFnLocale();
 
   return (
-    <div class={tootStyle.tootAuthorGrp}>
+    <div class={tootStyle.tootAuthorGrp} onClick={props.onClick}>
       <Img src={toot().account.avatar} class={tootStyle.tootAvatar} />
       <div class={tootStyle.tootAuthorNameGrp}>
         <Body2
@@ -309,6 +315,13 @@ export function TootPreviewCard(props: {
   );
 }
 
+/**
+ * Component for a toot.
+ *
+ * If the session involved is not the first session, you must wrap
+ * this component under a `<DefaultSessionProvier />` with correct
+ * session.
+ */
 const RegularToot: Component<TootCardProps> = (props) => {
   let rootRef: HTMLElement;
   const [managed, managedActionGroup, rest] = splitProps(
@@ -319,6 +332,25 @@ const RegularToot: Component<TootCardProps> = (props) => {
   const now = useTimeSource();
   const status = () => managed.status;
   const toot = () => status().reblog ?? status();
+  const session = useDefaultSession();
+  const navigate = useNavigate();
+
+  const openProfile = (event: MouseEvent) => {
+    if (!managed.evaluated) return;
+    event.stopPropagation();
+
+    const s = session();
+    if (!s) {
+      console.warn("No session is provided");
+      return;
+    }
+
+    const acct = makeAcctText(s);
+
+    navigate(
+      `/${encodeURIComponent(acct)}/profile/${managed.status.account.id}`,
+    );
+  };
 
   css`
     .reply-sep {
@@ -396,7 +428,7 @@ const RegularToot: Component<TootCardProps> = (props) => {
             </span>
           </div>
         </Show>
-        <TootAuthorGroup status={toot()} now={now()} />
+        <TootAuthorGroup status={toot()} now={now()} onClick={openProfile} />
         <TootContentView
           source={toot().content}
           emojis={toot().emojis}