TootBottomSheet: fix main toot not links profile

src/timelines/RegularToot.tsx

@@ -6,7 +6,6 @@ import {
   Show,
   createRenderEffect,
   createEffect,
-  createMemo,
 } from "solid-js";
 import tootStyle from "./toot.module.css";
 import { formatRelative } from "date-fns";
@@ -20,7 +19,6 @@ import {
   Star,
   StarOutline,
   Bookmark,
-  Reply,
   Share,
 } from "@suid/icons-material";
 import { useTimeSource } from "../platform/timesrc.js";
@@ -34,100 +32,8 @@ 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";
-
-function preventDefault(event: Event) {
-  event.preventDefault();
-}
-
-type TootContentViewProps = {
-  source?: string;
-  emojis?: mastodon.v1.CustomEmoji[];
-  mentions: mastodon.v1.StatusMention[];
-} & JSX.HTMLAttributes<HTMLDivElement>;
-
-const TootContentView: Component<TootContentViewProps> = (props) => {
-  const session = useDefaultSession();
-  const [managed, rest] = splitProps(props, ["source", "emojis", "mentions"]);
-
-  const clientFinder = createMemo(() =>
-    session() ? makeAcctText(session()!) : undefined,
-  );
-
-  return (
-    <div
-      ref={(ref) => {
-        createRenderEffect(() => {
-          ref.innerHTML = managed.source
-            ? managed.emojis
-              ? resolveCustomEmoji(managed.source, managed.emojis)
-              : managed.source
-            : "";
-        });
-
-        createRenderEffect(() => {
-          const finder = clientFinder();
-          for (const mention of props.mentions) {
-            const elements = ref.querySelectorAll<HTMLAnchorElement>(
-              `a[href='${mention.url}']`,
-            );
-            for (const e of elements) {
-              e.onclick = preventDefault;
-              e.dataset.rel = "acct";
-              e.dataset.client = finder;
-              e.dataset.acctId = mention.id.toString();
-            }
-          }
-        });
-      }}
-      {...rest}
-    ></div>
-  );
-};
-
-const RetootIcon: Component<JSX.HTMLElementTags["i"]> = (props) => {
-  const [managed, rest] = splitProps(props, ["class"]);
-  css`
-    .retoot-icon {
-      padding: 0;
-      display: inline-block;
-      border-radius: 2px;
-
-      > :global(svg) {
-        color: green;
-        font-size: 1rem;
-        vertical-align: middle;
-      }
-    }
-  `;
-  return (
-    <i class={["retoot-icon", managed.class].join(" ")} {...rest}>
-      <Repeat />
-    </i>
-  );
-};
-
-const ReplyIcon: Component<JSX.HTMLElementTags["i"]> = (props) => {
-  const [managed, rest] = splitProps(props, ["class"]);
-  css`
-    .retoot-icon {
-      padding: 0;
-      display: inline-block;
-      border-radius: 2px;
-
-      > :global(svg) {
-        color: var(--tutu-color-primary);
-        font-size: 1rem;
-        vertical-align: middle;
-      }
-    }
-  `;
-  return (
-    <i class={["retoot-icon", managed.class].join(" ")} {...rest}>
-      <Reply />
-    </i>
-  );
-};
+import TootContent from "./toot-components/TootContent";
+import BoostIcon from "./toot-components/BoostIcon";
 
 type TootActionGroupProps<T extends mastodon.v1.Status> = {
   onRetoot?: (value: T) => void;
@@ -339,12 +245,50 @@ export function TootPreviewCard(props: {
   );
 }
 
+/**
+ * find bottom-to-top the element with `data-action`.
+ */
+export function findElementActionable(
+  element: HTMLElement,
+  top: HTMLElement,
+): HTMLElement | undefined {
+  let current = element;
+  while (!current.dataset.action) {
+    if (!current.parentElement || current.parentElement === top) {
+      return undefined;
+    }
+    current = current.parentElement;
+  }
+  return current;
+}
+
 /**
  * Component for a toot.
  *
  * If the session involved is not the first session, you must wrap
  * this component under a `<DefaultSessionProvier />` with correct
  * session.
+ *
+ * **Handling Clicks**
+ * There are multiple actions supported in the component. Some handlers
+ * are passed in, some should be handled as the click event.
+ *
+ * For those handler directly passed in, see the props starts with "on".
+ * We are moving to the new method below.
+ *
+ * The following actions are handled by the click event:
+ * - `[data-action="acct"]`: open the profile page of a account
+ *   - `[data-acct-id]` is the account id for the client
+ *   - `[data-client]` is the client perferred
+ *   - `[href]` is the url of the account
+ *
+ * Handling the click event for this component, you should use
+ * {@link findElementActionable} to find out if the click event has
+ * additional intent. If the event's target is any from
+ * the subtree of any "actionable" element, the function returns the element.
+ *
+ * You can extract the intent from the attributes of the "actionable" element.
+ * The action type is the dataset's `action`.
  */
 const RegularToot: Component<TootCardProps> = (props) => {
   let rootRef: HTMLElement;
@@ -357,24 +301,6 @@ const RegularToot: Component<TootCardProps> = (props) => {
   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 {
@@ -436,7 +362,7 @@ const RegularToot: Component<TootCardProps> = (props) => {
       >
         <Show when={!!status().reblog}>
           <div class={tootStyle.tootRetootGrp}>
-            <RetootIcon />
+            <BoostIcon />
             <span>
               <Body2
                 ref={(e: { innerHTML: string }) => {
@@ -455,11 +381,11 @@ const RegularToot: Component<TootCardProps> = (props) => {
         <TootAuthorGroup
           status={toot()}
           now={now()}
-          data-rel="acct"
+          data-action="acct"
           data-client={session() ? makeAcctText(session()!) : undefined}
           data-acct-id={toot().account.id}
         />
-        <TootContentView
+        <TootContent
           source={toot().content}
           emojis={toot().emojis}
           mentions={toot().mentions}

src/timelines/Thread.tsx

@@ -1,14 +1,9 @@
 import type { mastodon } from "masto";
 import {
   For,
-  Show,
-  createResource,
-  createSignal,
   type Component,
   type Ref,
 } from "solid-js";
-import CompactToot from "./CompactToot";
-import { useTimeSource } from "../platform/timesrc";
 import RegularToot, { findRootToot } from "./RegularToot";
 import cardStyle from "../material/cards.module.css";
 import { css } from "solid-styled";
@@ -57,7 +52,7 @@ const Thread: Component<ThreadProps> = (props) => {
   }
   `
   return (
-    <article ref={props.ref} class="thread">
+    <article ref={props.ref} class="thread" aria-setsize={props.toots.length}>
       <For each={props.toots}>
         {(status, index) => {
           const useThread = props.toots.length > 1;

src/timelines/TootBottomSheet.tsx

@@ -4,7 +4,6 @@ import {
   createRenderEffect,
   createResource,
   createSignal,
-  For,
   Show,
   type Component,
 } from "solid-js";
@@ -17,7 +16,7 @@ import {
 } from "@suid/icons-material";
 import { useSessionForAcctStr } from "../masto/clients";
 import { resolveCustomEmoji } from "../masto/toot";
-import RegularToot from "./RegularToot";
+import RegularToot, { findElementActionable } from "./RegularToot";
 import type { mastodon } from "masto";
 import cards from "../material/cards.module.css";
 import { css } from "solid-styled";
@@ -186,6 +185,33 @@ const TootBottomSheet: Component = (props) => {
     return Array.from(new Set(values).keys());
   };
 
+  const handleMainTootClick = (
+    event: MouseEvent & { currentTarget: HTMLElement },
+  ) => {
+    const actionableElement = findElementActionable(
+      event.target as HTMLElement,
+      event.currentTarget,
+    );
+
+    if (actionableElement) {
+      if (actionableElement.dataset.action === "acct") {
+        event.stopPropagation();
+
+        const target = actionableElement as HTMLAnchorElement;
+
+        const acct = encodeURIComponent(
+          target.dataset.client || `@${new URL(target.href).origin}`,
+        );
+
+        navigate(`/${acct}/profile/${target.dataset.acctId}`);
+
+        return;
+      } else {
+        console.warn("unknown action", actionableElement.dataset.rel);
+      }
+    }
+  };
+
   css`
     .name :global(img) {
       max-height: 1em;
@@ -258,6 +284,7 @@ const TootBottomSheet: Component = (props) => {
               onBookmark={onBookmark}
               onRetoot={onBoost}
               onFavourite={onFav}
+              onClick={handleMainTootClick}
             ></RegularToot>
           </Show>
         </article>

src/timelines/TootList.tsx

@@ -9,28 +9,12 @@ import {
 import { type mastodon } from "masto";
 import { vibrate } from "../platform/hardware";
 import Thread from "./Thread.jsx";
-import { makeAcctText, useDefaultSession } from "../masto/clients";
+import { useDefaultSession } from "../masto/clients";
 import { useHeroSource } from "../platform/anim";
 import { HERO as BOTTOM_SHEET_HERO } from "../material/BottomSheet";
 import { setCache as setTootBottomSheetCache } from "./TootBottomSheet";
 import { useNavigate } from "@solidjs/router";
-
-/**
- * find bottom-to-top the element with `data-rel`.
- */
-function findElementActionable(
-  element: HTMLElement,
-  top: HTMLElement,
-): HTMLElement | undefined {
-  let current = element;
-  while (!current.dataset.rel) {
-    if (!current.parentElement || current.parentElement === top) {
-      return undefined;
-    }
-    current = current.parentElement;
-  }
-  return current;
-}
+import { findElementActionable } from "./RegularToot";
 
 const TootList: Component<{
   ref?: Ref<HTMLDivElement>;
@@ -116,8 +100,8 @@ const TootList: Component<{
       event.currentTarget,
     );
 
-    if (actionableElement) {
-      if (actionableElement.dataset.rel === "acct") {
+    if (actionableElement && checkIsExpended(status)) {
+      if (actionableElement.dataset.action === "acct") {
         event.stopPropagation();
 
         const target = actionableElement as HTMLAnchorElement;
@@ -127,16 +111,19 @@ const TootList: Component<{
           `@${new URL(target.href).origin}`);
 
         navigate(`/${acct}/profile/${target.dataset.acctId}`);
+
+        return;
       } else {
         console.warn("unknown action", actionableElement.dataset.rel);
       }
-    } else {
+    }
+
+    // else if (!actionableElement || !checkIsExpended(status) || <rel is not one of known action>)
     if (status.id !== expandedThreadId()) {
       setExpandedThreadId((x) => (x ? undefined : status.id));
     } else {
       openFullScreenToot(status, event.currentTarget as HTMLElement);
     }
-    }
   };
 
   const checkIsExpendedId = createSelector(expandedThreadId);

src/timelines/toot-components/BoostIcon.css

@@ -0,0 +1,11 @@
+.icon__boost {
+  padding: 0;
+  display: inline-block;
+  border-radius: 2px;
+
+  > :global(svg) {
+    color: green;
+    font-size: 1rem;
+    vertical-align: middle;
+  }
+}

src/timelines/toot-components/BoostIcon.tsx

@@ -0,0 +1,22 @@
+import {
+  splitProps,
+  type Component,
+  type JSX,
+} from "solid-js";
+
+import {
+  Repeat,
+} from "@suid/icons-material";
+import "./BoostIcon.css";
+
+
+const BoostIcon: Component<JSX.HTMLElementTags["i"]> = (props) => {
+  const [managed, rest] = splitProps(props, ["class"]);
+  return (
+    <i class={["icon__boost", managed.class].join(" ")} {...rest}>
+      <Repeat />
+    </i>
+  );
+};
+
+export default BoostIcon;

src/timelines/toot-components/TootContent.tsx

@@ -0,0 +1,61 @@
+import type { mastodon } from "masto";
+import {
+  splitProps,
+  type Component,
+  type JSX,
+  createRenderEffect,
+  createMemo,
+} from "solid-js";
+import { resolveCustomEmoji } from "../../masto/toot.js";
+import { makeAcctText, useDefaultSession } from "../../masto/clients";
+
+function preventDefault(event: Event) {
+  event.preventDefault();
+}
+
+export type TootContentProps = {
+  source?: string;
+  emojis?: mastodon.v1.CustomEmoji[];
+  mentions: mastodon.v1.StatusMention[];
+} & JSX.HTMLAttributes<HTMLDivElement>;
+
+const TootContent: Component<TootContentProps> = (props) => {
+  const session = useDefaultSession();
+  const [managed, rest] = splitProps(props, ["source", "emojis", "mentions"]);
+
+  const clientFinder = createMemo(() =>
+    session() ? makeAcctText(session()!) : undefined,
+  );
+
+  return (
+    <div
+      ref={(ref) => {
+        createRenderEffect(() => {
+          ref.innerHTML = managed.source
+            ? managed.emojis
+              ? resolveCustomEmoji(managed.source, managed.emojis)
+              : managed.source
+            : "";
+        });
+
+        createRenderEffect(() => {
+          const finder = clientFinder();
+          for (const mention of props.mentions) {
+            const elements = ref.querySelectorAll<HTMLAnchorElement>(
+              `a[href='${mention.url}']`,
+            );
+            for (const e of elements) {
+              e.onclick = preventDefault;
+              e.dataset.action = "acct";
+              e.dataset.client = finder;
+              e.dataset.acctId = mention.id.toString();
+            }
+          }
+        });
+      }}
+      {...rest}
+    ></div>
+  );
+};
+
+export default TootContent;