From 43034790a655bb13868e18ecd62214fb03e2dba1 Mon Sep 17 00:00:00 2001
From: Echo <ChaosExAnima@users.noreply.github.com>
Date: Mon, 18 Aug 2025 18:52:28 +0200
Subject: [PATCH] [Glitch] Composer Quote UI

Port d4b2e7f77139e27cbde83034fe96dbd189ac56c9 to glitch-soc

Co-authored-by: diondiondion <mail@diondiondion.com>
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../components/autosuggest_textarea.jsx       |  3 +-
 .../flavours/glitch/components/status.jsx     | 36 +++++++++++++++----
 .../glitch/containers/status_container.js     |  8 +++++
 .../compose/components/compose_form.jsx       |  3 ++
 .../compose/components/quoted_post.tsx        | 27 ++++++++++++++
 .../containers/poll_button_container.js       | 14 +++++---
 .../containers/upload_button_container.js     |  3 +-
 .../flavours/glitch/reducers/compose.js       | 12 +++++--
 .../flavours/glitch/selectors/filters.ts      |  2 +-
 .../flavours/glitch/store/typed_functions.ts  |  2 +-
 .../flavours/glitch/styles/components.scss    | 24 +++++++++++++
 11 files changed, 118 insertions(+), 16 deletions(-)
 create mode 100644 app/javascript/flavours/glitch/features/compose/components/quoted_post.tsx

diff --git a/app/javascript/flavours/glitch/components/autosuggest_textarea.jsx b/app/javascript/flavours/glitch/components/autosuggest_textarea.jsx
index c7ec3779f3..de5accc4b2 100644
--- a/app/javascript/flavours/glitch/components/autosuggest_textarea.jsx
+++ b/app/javascript/flavours/glitch/components/autosuggest_textarea.jsx
@@ -53,6 +53,7 @@ const AutosuggestTextarea = forwardRef(({
   onFocus,
   autoFocus = true,
   lang,
+  className,
 }, textareaRef) => {
 
   const [suggestionsHidden, setSuggestionsHidden] = useState(true);
@@ -192,7 +193,7 @@ const AutosuggestTextarea = forwardRef(({
   };
 
   return (
-    <div className='autosuggest-textarea'>
+    <div className={classNames('autosuggest-textarea', className)}>
       <Textarea
         ref={textareaRef}
         className='autosuggest-textarea__textarea'
diff --git a/app/javascript/flavours/glitch/components/status.jsx b/app/javascript/flavours/glitch/components/status.jsx
index 609c7694d9..448c593b28 100644
--- a/app/javascript/flavours/glitch/components/status.jsx
+++ b/app/javascript/flavours/glitch/components/status.jsx
@@ -1,12 +1,13 @@
 import PropTypes from 'prop-types';
 
-import { injectIntl, FormattedMessage } from 'react-intl';
+import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
+import CancelFillIcon from '@/material-icons/400-24px/cancel-fill.svg?react';
 import { Hotkeys } from 'flavours/glitch/components/hotkeys';
 import { ContentWarning } from 'flavours/glitch/components/content_warning';
 import { PictureInPicturePlaceholder } from 'flavours/glitch/components/picture_in_picture_placeholder';
@@ -32,6 +33,8 @@ import StatusActionBar from './status_action_bar';
 import StatusContent from './status_content';
 import StatusIcons from './status_icons';
 import StatusPrepend from './status_prepend';
+import { IconButton } from './icon_button';
+
 const domParser = new DOMParser();
 
 export const textForScreenReader = (intl, status, rebloggedByText = false, expanded = false) => {
@@ -71,6 +74,10 @@ export const defaultMediaVisibility = (status, settings) => {
   return !status.get('matched_media_filters') && (displayMedia !== 'hide_all' && !status.get('sensitive') || displayMedia === 'show_all');
 };
 
+const messages = defineMessages({
+  quote_cancel: { id: 'status.quote.cancel', defaultMessage: 'Cancel quote' },
+});
+
 class Status extends ImmutablePureComponent {
 
   static contextType = SensitiveMediaContext;
@@ -126,6 +133,7 @@ class Status extends ImmutablePureComponent {
       inUse: PropTypes.bool,
       available: PropTypes.bool,
     }),
+    contextType: PropTypes.string,
     ...WithOptionalRouterPropTypes,
   };
 
@@ -331,6 +339,10 @@ class Status extends ImmutablePureComponent {
     deployPictureInPicture(status, type, mediaProps);
   };
 
+  handleQuoteCancel = () => {
+    this.props.onQuoteCancel?.();
+  }
+
   handleHotkeyReply = e => {
     e.preventDefault();
     this.props.onReply(this.props.status);
@@ -713,11 +725,23 @@ class Status extends ImmutablePureComponent {
 
                   <DisplayName account={status.get('account')} />
                 </Permalink>
-                <StatusIcons
-                  status={status}
-                  mediaIcons={mediaIcons}
-                  settings={settings.get('status_icons')}
-                />
+
+
+                {this.props.contextType === 'compose' && isQuotedPost ? (
+                  <IconButton
+                    onClick={this.handleQuoteCancel}
+                    className='status__quote-cancel'
+                    title={intl.formatMessage(messages.quote_cancel)}
+                    icon="cancel-fill"
+                    iconComponent={CancelFillIcon}
+                  />
+                ) : (
+                  <StatusIcons
+                    status={status}
+                    mediaIcons={mediaIcons}
+                    settings={settings.get('status_icons')}
+                  />
+                )}
               </header>
             )}
 
diff --git a/app/javascript/flavours/glitch/containers/status_container.js b/app/javascript/flavours/glitch/containers/status_container.js
index 261d6afb20..4317c6c32f 100644
--- a/app/javascript/flavours/glitch/containers/status_container.js
+++ b/app/javascript/flavours/glitch/containers/status_container.js
@@ -35,6 +35,8 @@ import Status from 'flavours/glitch/components/status';
 import { deleteModal } from 'flavours/glitch/initial_state';
 import { makeGetStatus, makeGetPictureInPicture } from 'flavours/glitch/selectors';
 
+import { quoteComposeCancel } from '../actions/compose_typed';
+
 const makeMapStateToProps = () => {
   const getStatus = makeGetStatus();
   const getPictureInPicture = makeGetPictureInPicture();
@@ -119,6 +121,12 @@ const mapDispatchToProps = (dispatch, { contextType }) => ({
     }
   },
 
+  onQuoteCancel() {
+    if (contextType === 'compose') {
+      dispatch(quoteComposeCancel());
+    }
+  },
+
   onRevokeQuote (status) {
     dispatch(openModal({ modalType: 'CONFIRM_REVOKE_QUOTE', modalProps: { statusId: status.get('id'), quotedStatusId: status.getIn(['quote', 'quoted_status']) }}));
   },
diff --git a/app/javascript/flavours/glitch/features/compose/components/compose_form.jsx b/app/javascript/flavours/glitch/features/compose/components/compose_form.jsx
index 97d830d0c4..c12c929350 100644
--- a/app/javascript/flavours/glitch/features/compose/components/compose_form.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.jsx
@@ -35,6 +35,7 @@ import { SecondaryPrivacyButton } from './secondary_privacy_button';
 import { ThreadModeButton } from './thread_mode_button';
 import { UploadForm } from './upload_form';
 import { Warning } from './warning';
+import { ComposeQuotedStatus } from './quoted_post';
 
 const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d';
 
@@ -324,10 +325,12 @@ class ComposeForm extends ImmutablePureComponent {
             onPaste={onPaste}
             autoFocus={autoFocus}
             lang={this.props.lang}
+            className='compose-form__input'
           />
 
           <UploadForm />
           <PollForm />
+          <ComposeQuotedStatus />
 
           <div className='compose-form__footer'>
             <div className='compose-form__actions'>
diff --git a/app/javascript/flavours/glitch/features/compose/components/quoted_post.tsx b/app/javascript/flavours/glitch/features/compose/components/quoted_post.tsx
new file mode 100644
index 0000000000..c63cd77d54
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/compose/components/quoted_post.tsx
@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+import type { FC } from 'react';
+
+import { Map } from 'immutable';
+
+import { QuotedStatus } from '@/flavours/glitch/components/status_quoted';
+import { useAppSelector } from '@/flavours/glitch/store';
+
+export const ComposeQuotedStatus: FC = () => {
+  const quotedStatusId = useAppSelector(
+    (state) => state.compose.get('quoted_status_id') as string | null,
+  );
+  const quote = useMemo(
+    () =>
+      quotedStatusId
+        ? Map<'state' | 'quoted_status', string>([
+            ['state', 'accepted'],
+            ['quoted_status', quotedStatusId],
+          ])
+        : null,
+    [quotedStatusId],
+  );
+  if (!quote) {
+    return null;
+  }
+  return <QuotedStatus quote={quote} contextType='compose' />;
+};
diff --git a/app/javascript/flavours/glitch/features/compose/containers/poll_button_container.js b/app/javascript/flavours/glitch/features/compose/containers/poll_button_container.js
index 9de388f64a..e8fa9798c5 100644
--- a/app/javascript/flavours/glitch/features/compose/containers/poll_button_container.js
+++ b/app/javascript/flavours/glitch/features/compose/containers/poll_button_container.js
@@ -3,10 +3,16 @@ import { connect } from 'react-redux';
 import { addPoll, removePoll } from '../../../actions/compose';
 import PollButton from '../components/poll_button';
 
-const mapStateToProps = state => ({
-  disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 0),
-  active: state.getIn(['compose', 'poll']) !== null,
-});
+const mapStateToProps = state => {
+  const readyAttachmentsSize = state.compose.get('media_attachments').size ?? 0;
+  const hasAttachments = readyAttachmentsSize > 0 || !!state.compose.get('is_uploading');
+  const hasQuote = !!state.compose.get('quoted_status_id');
+
+  return ({
+    disabled: hasAttachments || hasQuote,
+    active: state.getIn(['compose', 'poll']) !== null,
+  });
+};
 
 const mapDispatchToProps = dispatch => ({
 
diff --git a/app/javascript/flavours/glitch/features/compose/containers/upload_button_container.js b/app/javascript/flavours/glitch/features/compose/containers/upload_button_container.js
index 39cc12078c..8ce36fd19c 100644
--- a/app/javascript/flavours/glitch/features/compose/containers/upload_button_container.js
+++ b/app/javascript/flavours/glitch/features/compose/containers/upload_button_container.js
@@ -12,9 +12,10 @@ const mapStateToProps = state => {
   const attachmentsSize = readyAttachmentsSize + pendingAttachmentsSize;
   const isOverLimit = attachmentsSize > state.getIn(['server', 'server', 'configuration', 'statuses', 'max_media_attachments'])-1;
   const hasVideoOrAudio = state.getIn(['compose', 'media_attachments']).some(m => ['video', 'audio'].includes(m.get('type')));
+  const hasQuote = !!state.compose.get('quoted_status_id');
 
   return {
-    disabled: isPoll || isUploading || isOverLimit || hasVideoOrAudio,
+    disabled: isPoll || isUploading || isOverLimit || hasVideoOrAudio || hasQuote,
     resetFileKey: state.getIn(['compose', 'resetFileKey']),
   };
 };
diff --git a/app/javascript/flavours/glitch/reducers/compose.js b/app/javascript/flavours/glitch/reducers/compose.js
index 077c80db3f..32cef7a256 100644
--- a/app/javascript/flavours/glitch/reducers/compose.js
+++ b/app/javascript/flavours/glitch/reducers/compose.js
@@ -407,8 +407,16 @@ export const composeReducer = (state = initialState, action) => {
     return state.set('is_changing_upload', false);
   } else if (quoteComposeByStatus.match(action)) {
     const status = action.payload;
-    if (status.getIn(['quote_approval', 'current_user']) === 'automatic') {
-      return state.set('quoted_status_id', status.get('id'));
+    if (
+      status.getIn(['quote_approval', 'current_user']) === 'automatic' &&
+      state.get('media_attachments').size === 0 &&
+      !state.get('is_uploading') &&
+      !state.get('poll')
+    ) {
+      return state
+        .set('quoted_status_id', status.get('id'))
+        .set('spoiler', status.get('sensitive'))
+        .set('spoiler_text', status.get('spoiler_text'));
     }
   } else if (quoteComposeCancel.match(action)) {
     return state.set('quoted_status_id', null);
diff --git a/app/javascript/flavours/glitch/selectors/filters.ts b/app/javascript/flavours/glitch/selectors/filters.ts
index 5d7bfcbdc7..376d626619 100644
--- a/app/javascript/flavours/glitch/selectors/filters.ts
+++ b/app/javascript/flavours/glitch/selectors/filters.ts
@@ -15,7 +15,7 @@ export const getFilters = createSelector(
     (_, { contextType }: { contextType: string }) => contextType,
   ],
   (filters, contextType) => {
-    if (!contextType) {
+    if (!contextType || contextType === 'compose') {
       return null;
     }
 
diff --git a/app/javascript/flavours/glitch/store/typed_functions.ts b/app/javascript/flavours/glitch/store/typed_functions.ts
index 3204d13ee4..4d7341b0c8 100644
--- a/app/javascript/flavours/glitch/store/typed_functions.ts
+++ b/app/javascript/flavours/glitch/store/typed_functions.ts
@@ -129,7 +129,7 @@ export function createAppThunk<Arg = void, Returned = void, ExtraArg = unknown>(
     },
   }));
 
-  return Object.assign({}, action, actionCreator);
+  return Object.assign(actionCreator, action);
 }
 
 const createBaseAsyncThunk = rtkCreateAsyncThunk.withTypes<AppThunkConfig>();
diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index 5e1c1e9d6f..a591656805 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -999,6 +999,24 @@ body > [data-popper-placement] {
       }
     }
   }
+
+  .status__quote {
+    margin: 0 8px;
+    max-height: 220px;
+    overflow: hidden;
+
+    // Override .status__content .status__content__text.status__content__text--visible
+    .status__content__text.status__content__text {
+      display: -webkit-box;
+    }
+
+    .status__content__text {
+      -webkit-line-clamp: 4;
+      line-clamp: 4;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+  }
 }
 
 .dropdown-button {
@@ -1633,6 +1651,7 @@ body > [data-popper-placement] {
   align-items: center;
   gap: 10px;
   overflow: hidden;
+  flex-grow: 1;
 
   .display-name {
     bdi {
@@ -1649,6 +1668,11 @@ body > [data-popper-placement] {
   }
 }
 
+.status__quote-cancel {
+  align-self: self-start;
+  order: 5;
+}
+
 .status__info {
   font-size: 15px;
   padding-bottom: 10px;