[Glitch] Add a border above the timeline hint for statuses with replies

Port 7e501c59c2 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

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'

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 = {

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;