From 49981b34a78f33d2eaaa7a6b296db64f8eced87f Mon Sep 17 00:00:00 2001
From: VT Social <admin@vt.social>
Date: Wed, 10 Jul 2024 09:47:33 +0000
Subject: [PATCH] th: quotes: Show left bar in indicator

Makes the quote/reply distinction clearer

Cherry-picked-from: https://gitea.treehouse.systems/mirrors/vt-social/commit/f7d787f798ba3a0b71179e54ad9fcaab3932f3b3
---
 .../glitch/features/compose/components/reply_indicator.jsx   | 2 +-
 app/javascript/flavours/glitch/styles/components.scss        | 5 +++++
 .../mastodon/features/compose/components/reply_indicator.jsx | 2 +-
 app/javascript/styles/mastodon/components.scss               | 5 +++++
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx b/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx
index fd399e9871..5d1557e8f6 100644
--- a/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx
@@ -22,7 +22,7 @@ export const ReplyIndicator = () => {
   }
 
   return (
-    <div className='reply-indicator'>
+    <div className={'reply-indicator' + (quoteId ? ' reply-indicator__quote' : '')}>
       {inReplyToId && (<div className='reply-indicator__line' />)}
 
       <Permalink href={account.get('url')} to={`/@${account.get('acct')}`} className='detailed-status__display-avatar'>
diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index c28793ea5b..0a9dbd9986 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -1246,6 +1246,11 @@ body > [data-popper-placement] {
   }
 }
 
+.reply-indicator__quote {
+  padding-inline-start: 10px;
+  border-inline-start: 3px solid $darker-text-color;
+}
+
 .edit-indicator {
   border-radius: 4px 4px 0 0;
   background: lighten($ui-base-color, 4%);
diff --git a/app/javascript/mastodon/features/compose/components/reply_indicator.jsx b/app/javascript/mastodon/features/compose/components/reply_indicator.jsx
index 5ea85c9179..109769b29b 100644
--- a/app/javascript/mastodon/features/compose/components/reply_indicator.jsx
+++ b/app/javascript/mastodon/features/compose/components/reply_indicator.jsx
@@ -23,7 +23,7 @@ export const ReplyIndicator = () => {
   }
 
   return (
-    <div className='reply-indicator'>
+    <div className={'reply-indicator' + (quoteId ? ' reply-indicator__quote' : '')}>
       {inReplyToId && (<div className='reply-indicator__line' />)}
 
       <Link to={`/@${account.get('acct')}`} className='detailed-status__display-avatar'>
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 80bbaa887d..1bc8fe38fb 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1185,6 +1185,11 @@ body > [data-popper-placement] {
   }
 }
 
+.reply-indicator__quote {
+  padding-inline-start: 10px;
+  border-inline-start: 3px solid $darker-text-color;
+}
+
 .edit-indicator {
   border-radius: 4px 4px 0 0;
   background: lighten($ui-base-color, 4%);