fixup! th: quotes

Make reply-indicator support quotes

app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx

@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux';
 
 import BarChart4BarsIcon from '@/material-icons/400-24px/bar_chart_4_bars.svg?react';
 import PhotoLibraryIcon from '@/material-icons/400-24px/photo_library.svg?react';
+import QuoteIcon from '@/material-icons/400-24px/format_quote-fill.svg?react';
 import { Avatar } from 'flavours/glitch/components/avatar';
 import { DisplayName } from 'flavours/glitch/components/display_name';
 import { Icon } from 'flavours/glitch/components/icon';
@@ -11,7 +12,8 @@ import { Permalink } from 'flavours/glitch/components/permalink';
 
 export const ReplyIndicator = () => {
   const inReplyToId = useSelector(state => state.getIn(['compose', 'in_reply_to']));
-  const status = useSelector(state => state.getIn(['statuses', inReplyToId]));
+  const quoteId = useSelector(state => state.getIn(['compose', 'quote_id']));
+  const status = useSelector(state => state.getIn(['statuses', inReplyToId || quoteId]));
   const account = useSelector(state => state.getIn(['accounts', status?.get('account')]));
 
   if (!status) {
@@ -22,13 +24,20 @@ export const ReplyIndicator = () => {
 
   return (
     <div className='reply-indicator'>
-      <div className='reply-indicator__line' />
+      {inReplyToId && (<div className='reply-indicator__line' />)}
 
       <Permalink href={account.get('url')} to={`/@${account.get('acct')}`} className='detailed-status__display-avatar'>
         <Avatar account={account} size={46} />
       </Permalink>
 
       <div className='reply-indicator__main'>
+	{quoteId && (
+          <Icon
+            fixedWidth
+            aria-hidden='true'
+            key='icon-quote-right'
+            icon={QuoteIcon} />
+	)}
         <Permalink href={account.get('url')} to={`/@${account.get('acct')}`} className='detailed-status__display-name'>
           <DisplayName account={account} />
         </Permalink>

app/javascript/flavours/glitch/styles/components.scss

@@ -1009,50 +1009,6 @@ body > [data-popper-placement] {
   }
 }
 
-.quote-indicator,
-.reply-indicator {
-  border-radius: 4px;
-  margin-bottom: 10px;
-  background: $ui-primary-color;
-  padding: 10px;
-  min-height: 23px;
-  overflow-y: auto;
-  flex: 0 2 auto;
-}
-
-.quote-indicator__header,
-.reply-indicator__header {
-  margin-bottom: 5px;
-  overflow: hidden;
-}
-
-.quote-indicator__cancel,
-.reply-indicator__cancel {
-  float: right;
-  line-height: 24px;
-}
-
-.quote-indicator__display-name,
-.reply-indicator__display-name {
-  color: $inverted-text-color;
-  display: block;
-  max-width: 100%;
-  line-height: 24px;
-  overflow: hidden;
-  text-decoration: none;
-
-  & > .display-name {
-    line-height: unset;
-    height: unset;
-  }
-}
-
-.quote-indicator__display-avatar,
-.reply-indicator__display-avatar {
-  float: left;
-  margin-inline-end: 5px;
-}
-
 .status__content--with-action {
   cursor: pointer;
 }
@@ -1160,7 +1116,9 @@ body > [data-popper-placement] {
   overflow: visible;
 }
 
-.reply-indicator {
+
+.reply-indicator,
+.quote-indicator {
   display: grid;
   grid-template-columns: 46px minmax(0, 1fr);
   grid-template-rows: 46px max-content;
@@ -1320,7 +1278,8 @@ body > [data-popper-placement] {
 }
 
 .edit-indicator__content,
-.reply-indicator__content {
+.reply-indicator__content,
+.quote-indicator__content {
   .emojione {
     width: 18px;
     height: 18px;
@@ -2326,9 +2285,7 @@ a .account__avatar {
   }
 }
 
-a.status__display-name,
-.quote-indicator__display-name,
-.reply-indicator__display-name,
+.status__display-name,
 .detailed-status__display-name,
 a.account__display-name {
   &:hover .display-name strong {

app/javascript/mastodon/features/compose/components/reply_indicator.jsx

@@ -6,13 +6,15 @@ import { useSelector } from 'react-redux';
 
 import BarChart4BarsIcon from '@/material-icons/400-24px/bar_chart_4_bars.svg?react';
 import PhotoLibraryIcon from '@/material-icons/400-24px/photo_library.svg?react';
+import QuoteIcon from '@/material-icons/400-24px/format_quote-fill.svg?react';
 import { Avatar } from 'mastodon/components/avatar';
 import { DisplayName } from 'mastodon/components/display_name';
 import { Icon } from 'mastodon/components/icon';
 
 export const ReplyIndicator = () => {
   const inReplyToId = useSelector(state => state.getIn(['compose', 'in_reply_to']));
-  const status = useSelector(state => state.getIn(['statuses', inReplyToId]));
+  const quoteId = useSelector(state => state.getIn(['compose', 'quote_id']));
+  const status = useSelector(state => state.getIn(['statuses', inReplyToId || quote_id]));
   const account = useSelector(state => state.getIn(['accounts', status?.get('account')]));
 
   if (!status) {
@@ -23,13 +25,21 @@ export const ReplyIndicator = () => {
 
   return (
     <div className='reply-indicator'>
-      <div className='reply-indicator__line' />
+      {inReplyToId && (<div className='reply-indicator__line' />)}
 
       <Link to={`/@${account.get('acct')}`} className='detailed-status__display-avatar'>
         <Avatar account={account} size={46} />
       </Link>
 
       <div className='reply-indicator__main'>
+	{quoteId && (
+          <Icon
+            fixedWidth
+            aria-hidden='true'
+            key='icon-quote-right'
+            icon={QuoteIcon} />
+	)}
+
         <Link to={`/@${account.get('acct')}`} className='detailed-status__display-name'>
           <DisplayName account={account} />
         </Link>