nicolium: add connectors to ancestors in indented tree mode

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

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 && (

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-/, '');