From 161d422dabd076194bd23215256cbacacd666f31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Tue, 17 Mar 2026 10:41:40 +0100
Subject: [PATCH] nicolium: add connectors to ancestors in indented tree mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 .../status/components/thread-status.tsx       | 10 +++++--
 .../src/features/status/components/thread.tsx | 28 +++++++++++--------
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/packages/nicolium/src/features/status/components/thread-status.tsx b/packages/nicolium/src/features/status/components/thread-status.tsx
index a4b0c42a3..56b0a8ee1 100644
--- a/packages/nicolium/src/features/status/components/thread-status.tsx
+++ b/packages/nicolium/src/features/status/components/thread-status.tsx
@@ -19,6 +19,7 @@ interface IThreadStatus {
   onMoveDown: (id: string) => void;
   linear?: boolean;
   depth?: number;
+  isAncestor?: boolean;
 }
 
 /** Status with reply-connector in threads. */
@@ -46,7 +47,7 @@ const ThreadStatus: React.FC<IThreadStatus> = (props): React.JSX.Element => {
   }
 
   const renderTreeConnector = (): React.JSX.Element | null => {
-    if (props.linear || isIndentMode) return null;
+    if (props.linear || (isIndentMode && !props.isAncestor)) return null;
 
     const isConnectedTop = replyToId && replyToId !== focusedStatusId;
     const isConnectedBottom = replyCount > 0;
@@ -74,9 +75,12 @@ const ThreadStatus: React.FC<IThreadStatus> = (props): React.JSX.Element => {
 
   return (
     <div
-      className={clsx('thread__status relative pb-4', { 'thread__status--linear': props.linear })}
+      className={clsx('thread__status relative pb-4', {
+        'thread__status--linear': props.linear,
+        'thread__status--ancestor': props.isAncestor,
+      })}
     >
-      {isIndentMode && depth > 0 && <DepthBorders depth={depth} />}
+      {isIndentMode && depth > 0 && !props.isAncestor && <DepthBorders depth={depth} />}
       {renderTreeConnector()}
       <div style={depth > 0 ? { marginInlineStart: `${depth}rem` } : undefined}>{status}</div>
       {props.linear && (
diff --git a/packages/nicolium/src/features/status/components/thread.tsx b/packages/nicolium/src/features/status/components/thread.tsx
index 90fe28466..e6db1dcbe 100644
--- a/packages/nicolium/src/features/status/components/thread.tsx
+++ b/packages/nicolium/src/features/status/components/thread.tsx
@@ -218,18 +218,22 @@ const Thread = ({
     </div>
   );
 
-  const renderStatus = (id: string) => (
-    <ThreadStatus
-      key={id}
-      id={id}
-      focusedStatusId={status.id}
-      onMoveUp={handleMoveUp}
-      onMoveDown={handleMoveDown}
-      contextType='thread'
-      linear={linear}
-      depth={treeIndent ? depths[id] : undefined}
-    />
-  );
+  const renderStatus = (id: string) => {
+    const isAncestor = treeIndent && thread.indexOf(id) < statusIndex;
+    return (
+      <ThreadStatus
+        key={id}
+        id={id}
+        focusedStatusId={status.id}
+        onMoveUp={handleMoveUp}
+        onMoveDown={handleMoveDown}
+        contextType='thread'
+        linear={linear}
+        depth={treeIndent ? depths[id] : undefined}
+        isAncestor={isAncestor}
+      />
+    );
+  };
 
   const renderPendingStatus = (id: string) => {
     const idempotencyKey = id.replace(/^末pending-/, '');