adjust thread visual

src/timelines/RegularToot.tsx

@@ -111,13 +111,17 @@ type TootActionGroupProps<T extends mastodon.v1.Status> = {
   onRetoot?: (value: T) => void;
   onFavourite?: (value: T) => void;
   onBookmark?: (value: T) => void;
-  onReply?: (value: T) => void;
+  onReply?: (
+    value: T,
+    event: MouseEvent & { currentTarget: HTMLButtonElement },
+  ) => void;
 };
 
 type TootCardProps = {
   status: mastodon.v1.Status;
   actionable?: boolean;
   evaluated?: boolean;
+  thread?: "top" | "bottom" | "middle";
 } & TootActionGroupProps<mastodon.v1.Status> &
   JSX.HTMLElementTags["article"];
 
@@ -125,19 +129,40 @@ function isolatedCallback(e: MouseEvent) {
   e.stopPropagation();
 }
 
+export function findRootToot(element: HTMLElement) {
+  let current: HTMLElement | null = element;
+  while (current && !current.classList.contains(tootStyle.toot)) {
+    current = current.parentElement;
+  }
+  if (!current) {
+    throw Error(
+      `the element must be placed under a element with ${tootStyle.toot}`,
+    );
+  }
+  return current;
+}
+
 function TootActionGroup<T extends mastodon.v1.Status>(
   props: TootActionGroupProps<T> & { value: T },
 ) {
+  let actGrpElement: HTMLDivElement;
   const toot = () => props.value;
   return (
-    <div class={tootStyle.tootBottomActionGrp} onClick={isolatedCallback}>
-      <Button
-        class={tootStyle.tootActionWithCount}
-        onClick={() => props.onReply?.(toot())}
-      >
-        <ReplyAll />
-        <span>{toot().repliesCount}</span>
-      </Button>
+    <div
+      ref={actGrpElement!}
+      class={tootStyle.tootBottomActionGrp}
+      onClick={isolatedCallback}
+    >
+      <Show when={props.onReply}>
+        <Button
+          class={tootStyle.tootActionWithCount}
+          onClick={[props.onReply!, props.value]}
+        >
+          <ReplyAll />
+          <span>{toot().repliesCount}</span>
+        </Button>
+      </Show>
+
       <Button
         class={tootStyle.tootActionWithCount}
         style={{
@@ -288,7 +313,7 @@ const RegularToot: Component<TootCardProps> = (props) => {
   let rootRef: HTMLElement;
   const [managed, managedActionGroup, rest] = splitProps(
     props,
-    ["status", "lang", "class", "actionable", "evaluated"],
+    ["status", "lang", "class", "actionable", "evaluated", "thread"],
     ["onRetoot", "onFavourite", "onBookmark", "onReply"],
   );
   const now = useTimeSource();
@@ -300,6 +325,42 @@ const RegularToot: Component<TootCardProps> = (props) => {
       margin-left: calc(var(--toot-avatar-size) + var(--card-pad) + 8px);
       margin-block: 8px;
     }
+
+    .thread-top,
+    .thread-mid,
+    .thread-btm {
+      position: relative;
+
+      &::before {
+        content: "";
+        position: absolute;
+        left: 36px;
+        background-color: var(--tutu-color-secondary);
+        width: 2px;
+        display: block;
+      }
+    }
+
+    .thread-mid {
+      &::before {
+        top: 0;
+        bottom: 0;
+      }
+    }
+
+    .thread-top {
+      &::before {
+        top: 16px;
+        bottom: 0;
+      }
+    }
+
+    .thread-btm {
+      &::before {
+        top: 0;
+        height: 16px;
+      }
+    }
   `;
 
   return (
@@ -308,6 +369,9 @@ const RegularToot: Component<TootCardProps> = (props) => {
         classList={{
           [tootStyle.toot]: true,
           [tootStyle.expanded]: managed.evaluated,
+          "thread-top": managed.thread === "top",
+          "thread-mid": managed.thread === "middle",
+          "thread-btm": managed.thread === "bottom",
           [managed.class || ""]: true,
         }}
         ref={rootRef!}