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

---
 app/javascript/mastodon/components/timeline_hint.tsx | 7 +++++--
 app/javascript/mastodon/features/status/index.jsx    | 2 +-
 app/javascript/styles/mastodon/components.scss       | 4 ++++
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/javascript/mastodon/components/timeline_hint.tsx b/app/javascript/mastodon/components/timeline_hint.tsx
index bf2a2d8bba..6faad2fbb8 100644
--- a/app/javascript/mastodon/components/timeline_hint.tsx
+++ b/app/javascript/mastodon/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/mastodon/features/status/index.jsx b/app/javascript/mastodon/features/status/index.jsx
index 8f36c44271..1d15b13bd4 100644
--- a/app/javascript/mastodon/features/status/index.jsx
+++ b/app/javascript/mastodon/features/status/index.jsx
@@ -629,7 +629,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/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 90881b0f19..7ffbf482c2 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -4248,6 +4248,10 @@ a.status-card {
   }
 }
 
+.timeline-hint--with-descendants {
+  border-top: 1px solid var(--background-border-color);
+}
+
 .regeneration-indicator {
   text-align: center;
   font-size: 16px;