From d3db2d04adfd14561b77006e9e0c99817475874f Mon Sep 17 00:00:00 2001
From: Renaud Chaput <renchap@gmail.com>
Date: Tue, 13 Aug 2024 09:14:41 +0200
Subject: [PATCH] [Glitch] Add a border above the timeline hint for statuses
 with replies

Port 7e501c59c2acc0bba7fb5b3d1b6ca43171c89f02 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/components/timeline_hint.tsx           | 7 +++++--
 app/javascript/flavours/glitch/features/status/index.jsx   | 2 +-
 app/javascript/flavours/glitch/styles/components.scss      | 4 ++++
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/timeline_hint.tsx b/app/javascript/flavours/glitch/components/timeline_hint.tsx
index bf2a2d8bba..6faad2fbb8 100644
--- a/app/javascript/flavours/glitch/components/timeline_hint.tsx
+++ b/app/javascript/flavours/glitch/components/timeline_hint.tsx
@@ -1,12 +1,15 @@
 import { FormattedMessage } from 'react-intl';
 
+import classNames from 'classnames';
+
 interface Props {
   resource: JSX.Element;
   url: string;
+  className?: string;
 }
 
-export const TimelineHint: React.FC<Props> = ({ resource, url }) => (
-  <div className='timeline-hint'>
+export const TimelineHint: React.FC<Props> = ({ className, resource, url }) => (
+  <div className={classNames('timeline-hint', className)}>
     <strong>
       <FormattedMessage
         id='timeline_hint.remote_resource_not_displayed'
diff --git a/app/javascript/flavours/glitch/features/status/index.jsx b/app/javascript/flavours/glitch/features/status/index.jsx
index cdc567d9c6..382f0ae037 100644
--- a/app/javascript/flavours/glitch/features/status/index.jsx
+++ b/app/javascript/flavours/glitch/features/status/index.jsx
@@ -655,7 +655,7 @@ class Status extends ImmutablePureComponent {
     const isIndexable = !status.getIn(['account', 'noindex']);
 
     if (!isLocal) {
-      remoteHint = <TimelineHint url={status.get('url')} resource={<FormattedMessage id='timeline_hint.resources.replies' defaultMessage='Some replies' />} />;
+      remoteHint = <TimelineHint className={classNames(!!descendants && 'timeline-hint--with-descendants')} url={status.get('url')} resource={<FormattedMessage id='timeline_hint.resources.replies' defaultMessage='Some replies' />} />;
     }
 
     const handlers = {
diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index 601666ac05..0dac18b07e 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -4453,6 +4453,10 @@ a.status-card {
   }
 }
 
+.timeline-hint--with-descendants {
+  border-top: 1px solid var(--background-border-color);
+}
+
 .regeneration-indicator {
   text-align: center;
   font-size: 16px;