[Glitch] Add rendering of quote posts in web UI

Port 97b9e8849d to glitch-soc Signed-off-by: Claire <claire.github-309c@sitedethib.com>
2025-12-14 08:19:05 +00:00 · 2025-05-21 17:50:45 +02:00
parent 7efac8c025
commit e3b424aa02
13 changed files with 222 additions and 47 deletions
--- a/app/javascript/flavours/glitch/actions/importer/index.js
+++ b/app/javascript/flavours/glitch/actions/importer/index.js
@@ -69,6 +69,10 @@ export function importFetchedStatuses(statuses) {
        processStatus(status.reblog);
      }

+      if (status.quote?.quoted_status) {
+        processStatus(status.quote.quoted_status);
+      }
+
      if (status.poll?.id) {
        pushUnique(polls, createPollFromServerJSON(status.poll, getState().polls[status.poll.id]));
      }
--- a/app/javascript/flavours/glitch/actions/importer/normalizer.js
+++ b/app/javascript/flavours/glitch/actions/importer/normalizer.js
@@ -23,12 +23,20 @@ export function normalizeFilterResult(result) {

 export function normalizeStatus(status, normalOldStatus, settings) {
  const normalStatus   = { ...status };
+
  normalStatus.account = status.account.id;

  if (status.reblog && status.reblog.id) {
    normalStatus.reblog = status.reblog.id;
  }

+  if (status.quote?.quoted_status ?? status.quote?.quoted_status_id) {
+    normalStatus.quote = {
+      ...status.quote,
+      quoted_status: status.quote.quoted_status?.id ?? status.quote?.quoted_status_id,
+    };
+  }
+
  if (status.poll && status.poll.id) {
    normalStatus.poll = status.poll.id;
  }
--- a/app/javascript/flavours/glitch/components/status.jsx
+++ b/app/javascript/flavours/glitch/components/status.jsx
@@ -82,6 +82,7 @@ class Status extends ImmutablePureComponent {
    id: PropTypes.string,
    status: ImmutablePropTypes.map,
    account: ImmutablePropTypes.record,
+    children: PropTypes.node,
    previousId: PropTypes.string,
    nextInReplyToId: PropTypes.string,
    rootId: PropTypes.string,
@@ -111,6 +112,7 @@ class Status extends ImmutablePureComponent {
    withDismiss: PropTypes.bool,
    onMoveUp: PropTypes.func,
    onMoveDown: PropTypes.func,
+    isQuotedPost: PropTypes.bool,
    getScrollPosition: PropTypes.func,
    updateScrollBottom: PropTypes.func,
    expanded: PropTypes.bool,
@@ -440,7 +442,7 @@ class Status extends ImmutablePureComponent {
  }

  render () {
-    const { intl, hidden, featured, unfocusable, unread, pictureInPicture, previousId, nextInReplyToId, rootId, skipPrepend, avatarSize = 46 } = this.props;
+    const { intl, hidden, featured, unfocusable, unread, pictureInPicture, previousId, nextInReplyToId, rootId, skipPrepend, avatarSize = 46, children } = this.props;

    const {
      status,
@@ -452,6 +454,7 @@ class Status extends ImmutablePureComponent {
      onOpenMedia,
      notification,
      history,
+      isQuotedPost,
      ...other
    } = this.props;
    let attachments = null;
@@ -684,7 +687,7 @@ class Status extends ImmutablePureComponent {
          {!skipPrepend && prepend}

          <div
-            className={classNames('status', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id'), 'status--in-thread': !!rootId, 'status--first-in-thread': previousId && (!connectUp || connectToRoot), muted: this.props.muted })}
+            className={classNames('status', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id'), 'status--in-thread': !!rootId, 'status--first-in-thread': previousId && (!connectUp || connectToRoot), muted: this.props.muted, 'status--is-quote': isQuotedPost })}
            data-id={status.get('id')}
          >
            {(connectReply || connectUp || connectToRoot) && <div className={classNames('status__line', { 'status__line--full': connectReply, 'status__line--first': !status.get('in_reply_to_id') && !connectToRoot })} />}
@@ -722,6 +725,8 @@ class Status extends ImmutablePureComponent {
                  {...statusContentProps}
                />

+                {children}
+
                {media}
                {hashtagBar}
              </>
@@ -730,13 +735,15 @@ class Status extends ImmutablePureComponent {
            {/* This is a glitch-soc addition to have a placeholder */}
            {!expanded && <MentionsPlaceholder status={status} />}

-            <StatusActionBar
-              status={status}
-              account={status.get('account')}
-              showReplyCount={settings.get('show_reply_count')}
-              onFilter={matchedFilters ? this.handleFilterClick : null}
-              {...other}
-            />
+            {!isQuotedPost &&
+              <StatusActionBar
+                status={status}
+                account={status.get('account')}
+                showReplyCount={settings.get('show_reply_count')}
+                onFilter={matchedFilters ? this.handleFilterClick : null}
+                {...other}
+              />
+            }
          </div>
        </div>
      </HotKeys>
--- a/app/javascript/flavours/glitch/components/status_list.jsx
+++ b/app/javascript/flavours/glitch/components/status_list.jsx
@@ -9,7 +9,7 @@ import { TIMELINE_GAP, TIMELINE_SUGGESTIONS } from 'flavours/glitch/actions/time
 import { RegenerationIndicator } from 'flavours/glitch/components/regeneration_indicator';
 import { InlineFollowSuggestions } from 'flavours/glitch/features/home_timeline/components/inline_follow_suggestions';

-import StatusContainer from '../containers/status_container';
+import { StatusQuoteManager } from '../components/status_quoted';

 import { LoadGap } from './load_gap';
 import ScrollableList from './scrollable_list';
@@ -114,7 +114,7 @@ export default class StatusList extends ImmutablePureComponent {
          );
        default:
          return (
-            <StatusContainer
+            <StatusQuoteManager
              key={statusId}
              id={statusId}
              onMoveUp={this.handleMoveUp}
@@ -130,7 +130,7 @@ export default class StatusList extends ImmutablePureComponent {

    if (scrollableContent && featuredStatusIds) {
      scrollableContent = featuredStatusIds.map(statusId => (
-        <StatusContainer
+        <StatusQuoteManager
          key={`f-${statusId}`}
          id={statusId}
          featured
--- a/app/javascript/flavours/glitch/components/status_quoted.tsx
+++ b/app/javascript/flavours/glitch/components/status_quoted.tsx
@@ -0,0 +1,118 @@
+import { FormattedMessage } from 'react-intl';
+
+import classNames from 'classnames';
+
+import type { Map as ImmutableMap } from 'immutable';
+
+import QuoteIcon from '@/images/quote.svg?react';
+import { Icon } from 'flavours/glitch/components/icon';
+import StatusContainer from 'flavours/glitch/containers/status_container';
+import { useAppSelector } from 'flavours/glitch/store';
+
+const QuoteWrapper: React.FC<{
+  isError?: boolean;
+  children: React.ReactNode;
+}> = ({ isError, children }) => {
+  return (
+    <div
+      className={classNames('status__quote', {
+        'status__quote--error': isError,
+      })}
+    >
+      <Icon id='quote' icon={QuoteIcon} className='status__quote-icon' />
+      {children}
+    </div>
+  );
+};
+
+type QuoteMap = ImmutableMap<'state' | 'quoted_status', string | null>;
+
+export const QuotedStatus: React.FC<{ quote: QuoteMap }> = ({ quote }) => {
+  const quotedStatusId = quote.get('quoted_status');
+  const state = quote.get('state');
+  const status = useAppSelector((state) =>
+    quotedStatusId ? state.statuses.get(quotedStatusId) : undefined,
+  );
+
+  let quoteError: React.ReactNode | null = null;
+
+  if (state === 'deleted') {
+    quoteError = (
+      <FormattedMessage
+        id='status.quote_error.removed'
+        defaultMessage='This post was removed by its author.'
+      />
+    );
+  } else if (state === 'unauthorized') {
+    quoteError = (
+      <FormattedMessage
+        id='status.quote_error.unauthorized'
+        defaultMessage='This post cannot be displayed as you are not authorized to view it.'
+      />
+    );
+  } else if (state === 'pending') {
+    quoteError = (
+      <FormattedMessage
+        id='status.quote_error.pending_approval'
+        defaultMessage='This post is pending approval from the original author.'
+      />
+    );
+  } else if (state === 'rejected' || state === 'revoked') {
+    quoteError = (
+      <FormattedMessage
+        id='status.quote_error.rejected'
+        defaultMessage='This post cannot be displayed as the original author does not allow it to be quoted.'
+      />
+    );
+  } else if (!status || !quotedStatusId) {
+    quoteError = (
+      <FormattedMessage
+        id='status.quote_error.not_found'
+        defaultMessage='This post cannot be displayed.'
+      />
+    );
+  }
+
+  if (quoteError) {
+    return <QuoteWrapper isError>{quoteError}</QuoteWrapper>;
+  }
+
+  return (
+    <QuoteWrapper>
+      <StatusContainer
+        // @ts-expect-error Status isn't typed yet
+        isQuotedPost
+        id={quotedStatusId}
+        avatarSize={40}
+      />
+    </QuoteWrapper>
+  );
+};
+
+interface StatusQuoteManagerProps {
+  id: string;
+  [key: string]: unknown;
+}
+
+/**
+ * This wrapper component takes a status ID and, if the associated status
+ * is a quote post, it renders the quote into `StatusContainer` as a child.
+ * It passes all other props through to `StatusContainer`.
+ */
+
+export const StatusQuoteManager = (props: StatusQuoteManagerProps) => {
+  const status = useAppSelector((state) => state.statuses.get(props.id));
+  const quote = status?.get('quote') as QuoteMap | undefined;
+
+  if (quote) {
+    return (
+      /* @ts-expect-error Status is not yet typed */
+      <StatusContainer {...props}>
+        <QuotedStatus quote={quote} />
+      </StatusContainer>
+    );
+  }
+
+  /* @ts-expect-error Status is not yet typed */
+  return <StatusContainer {...props} />;
+};
--- a/app/javascript/flavours/glitch/features/account_featured/index.tsx
+++ b/app/javascript/flavours/glitch/features/account_featured/index.tsx
@@ -14,7 +14,7 @@ import { Account } from 'flavours/glitch/components/account';
 import { ColumnBackButton } from 'flavours/glitch/components/column_back_button';
 import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
 import { RemoteHint } from 'flavours/glitch/components/remote_hint';
-import StatusContainer from 'flavours/glitch/containers/status_container';
+import { StatusQuoteManager } from 'flavours/glitch/components/status_quoted';
 import { AccountHeader } from 'flavours/glitch/features/account_timeline/components/account_header';
 import BundleColumnError from 'flavours/glitch/features/ui/components/bundle_column_error';
 import Column from 'flavours/glitch/features/ui/components/column';
@@ -142,9 +142,8 @@ const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({
              />
            </h4>
            {featuredStatusIds.map((statusId) => (
-              <StatusContainer
+              <StatusQuoteManager
                key={`f-${statusId}`}
-                // @ts-expect-error inferred props are wrong
                id={statusId}
                contextType='account'
              />
--- a/app/javascript/flavours/glitch/features/notifications/components/notification.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/notification.jsx
@@ -16,7 +16,7 @@ import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
 import { Account } from 'flavours/glitch/components/account';
 import { Icon }  from 'flavours/glitch/components/icon';
 import { Permalink } from 'flavours/glitch/components/permalink';
-import StatusContainer from 'flavours/glitch/containers/status_container';
+import { StatusQuoteManager } from 'flavours/glitch/components/status_quoted';
 import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';

 import FollowRequestContainer from '../containers/follow_request_container';
@@ -159,7 +159,7 @@ class Notification extends ImmutablePureComponent {

  renderMention (notification) {
    return (
-      <StatusContainer
+      <StatusQuoteManager
        id={notification.get('status')}
        containerId={notification.get('id')}
        withDismiss
@@ -181,7 +181,7 @@ class Notification extends ImmutablePureComponent {

  renderFavourite (notification) {
    return (
-      <StatusContainer
+      <StatusQuoteManager
        containerId={notification.get('id')}
        hidden={!!this.props.hidden}
        id={notification.get('status')}
@@ -206,7 +206,7 @@ class Notification extends ImmutablePureComponent {

  renderReblog (notification) {
    return (
-      <StatusContainer
+      <StatusQuoteManager
        containerId={notification.get('id')}
        hidden={!!this.props.hidden}
        id={notification.get('status')}
@@ -231,7 +231,7 @@ class Notification extends ImmutablePureComponent {

  renderStatus (notification) {
    return (
-      <StatusContainer
+      <StatusQuoteManager
        containerId={notification.get('id')}
        hidden={!!this.props.hidden}
        id={notification.get('status')}
@@ -256,7 +256,7 @@ class Notification extends ImmutablePureComponent {

  renderUpdate (notification) {
    return (
-      <StatusContainer
+      <StatusQuoteManager
        containerId={notification.get('id')}
        hidden={!!this.props.hidden}
        id={notification.get('status')}
@@ -281,7 +281,7 @@ class Notification extends ImmutablePureComponent {

  renderPoll (notification) {
    return (
-      <StatusContainer
+      <StatusQuoteManager
        containerId={notification.get('id')}
        hidden={!!this.props.hidden}
        id={notification.get('status')}
--- a/app/javascript/flavours/glitch/features/notifications_v2/components/notification_with_status.tsx
+++ b/app/javascript/flavours/glitch/features/notifications_v2/components/notification_with_status.tsx
@@ -15,7 +15,7 @@ import {
 } from 'flavours/glitch/actions/statuses';
 import type { IconProp } from 'flavours/glitch/components/icon';
 import { Icon } from 'flavours/glitch/components/icon';
-import Status from 'flavours/glitch/containers/status_container';
+import { StatusQuoteManager } from 'flavours/glitch/components/status_quoted';
 import { getStatusHidden } from 'flavours/glitch/selectors/filters';
 import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';

@@ -106,8 +106,7 @@ export const NotificationWithStatus: React.FC<{
          {label}
        </div>

-        <Status
-          // @ts-expect-error -- <Status> is not yet typed
+        <StatusQuoteManager
          id={statusId}
          contextType='notifications'
          withDismiss
--- a/app/javascript/flavours/glitch/features/search/index.tsx
+++ b/app/javascript/flavours/glitch/features/search/index.tsx
@@ -17,7 +17,7 @@ import { ColumnHeader } from 'flavours/glitch/components/column_header';
 import { CompatibilityHashtag as Hashtag } from 'flavours/glitch/components/hashtag';
 import { Icon } from 'flavours/glitch/components/icon';
 import ScrollableList from 'flavours/glitch/components/scrollable_list';
-import Status from 'flavours/glitch/containers/status_container';
+import { StatusQuoteManager } from 'flavours/glitch/components/status_quoted';
 import { Search } from 'flavours/glitch/features/compose/components/search';
 import { useSearchParam } from 'flavours/glitch/hooks/useSearchParam';
 import type { Hashtag as HashtagType } from 'flavours/glitch/models/tags';
@@ -53,8 +53,7 @@ const renderHashtags = (hashtags: HashtagType[]) =>

 const renderStatuses = (statusIds: string[]) =>
  hidePeek<string>(statusIds).map((id) => (
-    // @ts-expect-error inferred props are wrong
-    <Status key={id} id={id} />
+    <StatusQuoteManager key={id} id={id} />
  ));

 type SearchType = 'all' | ApiSearchType;
@@ -190,8 +189,7 @@ export const SearchResults: React.FC<{ multiColumn: boolean }> = ({
                  onClickMore={handleSelectStatuses}
                >
                  {results.statuses.slice(0, INITIAL_DISPLAY).map((id) => (
-                    // @ts-expect-error inferred props are wrong
-                    <Status key={id} id={id} />
+                    <StatusQuoteManager key={id} id={id} />
                  ))}
                </SearchSection>
              )}
--- a/app/javascript/flavours/glitch/features/status/components/detailed_status.tsx
+++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.tsx
@@ -27,6 +27,7 @@ import { MentionsPlaceholder } from 'flavours/glitch/components/mentions_placeho
 import { Permalink } from 'flavours/glitch/components/permalink';
 import { PictureInPicturePlaceholder } from 'flavours/glitch/components/picture_in_picture_placeholder';
 import StatusContent from 'flavours/glitch/components/status_content';
+import { QuotedStatus } from 'flavours/glitch/components/status_quoted';
 import { VisibilityIcon } from 'flavours/glitch/components/visibility_icon';
 import { Audio } from 'flavours/glitch/features/audio';
 import scheduleIdleTask from 'flavours/glitch/features/ui/util/schedule_idle_task';
@@ -410,6 +411,10 @@ export const DetailedStatus: React.FC<{
              {...(statusContentProps as any)}
            />

+            {status.get('quote') && (
+              <QuotedStatus quote={status.get('quote')} />
+            )}
+
            {media}
            {hashtagBar}
          </>
--- a/app/javascript/flavours/glitch/features/status/index.jsx
+++ b/app/javascript/flavours/glitch/features/status/index.jsx
@@ -6,8 +6,6 @@ import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
 import { withRouter } from 'react-router-dom';

-import { createSelector } from '@reduxjs/toolkit';
-import { List as ImmutableList } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
@@ -56,7 +54,7 @@ import {
 } from '../../actions/statuses';
 import ColumnHeader from '../../components/column_header';
 import { textForScreenReader, defaultMediaVisibility } from '../../components/status';
-import StatusContainer from '../../containers/status_container';
+import { StatusQuoteManager } from '../../components/status_quoted';
 import { deleteModal } from '../../initial_state';
 import { makeGetStatus, makeGetPictureInPicture } from '../../selectors';
 import { getAncestorsIds, getDescendantsIds } from 'flavours/glitch/selectors/contexts';
@@ -492,7 +490,7 @@ class Status extends ImmutablePureComponent {
    const { params: { statusId } } = this.props;

    return list.map((id, i) => (
-      <StatusContainer
+      <StatusQuoteManager
        key={id}
        id={id}
        expanded={this.state.threadExpanded}
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -1550,8 +1550,12 @@ body > [data-popper-placement] {
    }
  }

+  &--is-quote {
+    border: none;
+  }
+
  &--in-thread {
-    $thread-margin: 46px + 10px;
+    --thread-margin: calc(46px + 8px);

    border-bottom: 0;

@@ -1567,16 +1571,16 @@ body > [data-popper-placement] {
    .hashtag-bar,
    .content-warning,
    .filter-warning {
-      margin-inline-start: $thread-margin;
-      width: calc(100% - $thread-margin);
+      margin-inline-start: var(--thread-margin);
+      width: calc(100% - var(--thread-margin));
    }

    .more-from-author {
-      width: calc(100% - $thread-margin + 2px);
+      width: calc(100% - var(--thread-margin) + 2px);
    }

    .status__content__read-more-button {
-      margin-inline-start: $thread-margin;
+      margin-inline-start: var(--thread-margin);
    }
  }

@@ -1939,6 +1943,41 @@ body > [data-popper-placement] {
  }
 }

+.status__quote {
+  position: relative;
+  margin-block-start: 16px;
+  margin-inline-start: 56px;
+  border-radius: 8px;
+  color: var(--nested-card-text);
+  background: var(--nested-card-background);
+  border: var(--nested-card-border);
+}
+
+.status__quote--error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  font-size: 15px;
+}
+
+.status__quote-icon {
+  position: absolute;
+  inset-block-start: 18px;
+  inset-inline-start: -50px;
+  display: block;
+  width: 26px;
+  height: 26px;
+  padding: 5px;
+  color: #6a49ba;
+  z-index: 10;
+
+  .status__quote--error & {
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+  }
+}
+
 .detailed-status__link {
  display: inline-flex;
  align-items: center;
@@ -2375,11 +2414,6 @@ a.account__display-name {
  }
 }

-.status__avatar {
-  width: 46px;
-  height: 46px;
-}
-
 .muted {
  .status__content,
  .status__content p,
@@ -10837,6 +10871,7 @@ noscript {
      line-height: 22px;
      color: $darker-text-color;
      -webkit-line-clamp: 4;
+      line-clamp: 4;
      -webkit-box-orient: vertical;
      max-height: none;
      overflow: hidden;
@@ -11147,9 +11182,9 @@ noscript {
 .content-warning {
  display: block;
  box-sizing: border-box;
-  background: rgba($ui-highlight-color, 0.05);
-  color: $secondary-text-color;
-  border: 1px solid rgba($ui-highlight-color, 0.15);
+  background: var(--nested-card-background);
+  color: var(--nested-card-text);
+  border: var(--nested-card-border);
  border-radius: 8px;
  padding: 8px (5px + 8px);
  position: relative;
--- a/app/javascript/flavours/glitch/styles/css_variables.scss
+++ b/app/javascript/flavours/glitch/styles/css_variables.scss
@@ -27,6 +27,10 @@
  --rich-text-container-color: rgba(87, 24, 60, 100%);
  --rich-text-text-color: rgba(255, 175, 212, 100%);
  --rich-text-decorations-color: rgba(128, 58, 95, 100%);
+  --nested-card-background: color(from #{$ui-highlight-color} srgb r g b / 5%);
+  --nested-card-text: #{$secondary-text-color};
+  --nested-card-border: 1px solid
+    color(from #{$ui-highlight-color} srgb r g b / 15%);
  --input-placeholder-color: #{$dark-text-color};
  --input-background-color: var(--surface-variant-background-color);
  --on-input-color: #{$secondary-text-color};