diff --git a/app/javascript/flavours/glitch/actions/importer/index.js b/app/javascript/flavours/glitch/actions/importer/index.js
index c1db557115..f1aabe2747 100644
--- 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]));
}
diff --git a/app/javascript/flavours/glitch/actions/importer/normalizer.js b/app/javascript/flavours/glitch/actions/importer/normalizer.js
index 69c755d06f..ece72dd1e4 100644
--- 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;
}
diff --git a/app/javascript/flavours/glitch/components/status.jsx b/app/javascript/flavours/glitch/components/status.jsx
index fb62be9b87..1ded07261d 100644
--- 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}
{(connectReply || connectUp || 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 &&
}
-
+ {!isQuotedPost &&
+
+ }
diff --git a/app/javascript/flavours/glitch/components/status_list.jsx b/app/javascript/flavours/glitch/components/status_list.jsx
index 09061f9dc0..95ff8f45e5 100644
--- 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 (
- (
- = ({ isError, children }) => {
+ return (
+
+
+ {children}
+
+ );
+};
+
+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 = (
+
+ );
+ } else if (state === 'unauthorized') {
+ quoteError = (
+
+ );
+ } else if (state === 'pending') {
+ quoteError = (
+
+ );
+ } else if (state === 'rejected' || state === 'revoked') {
+ quoteError = (
+
+ );
+ } else if (!status || !quotedStatusId) {
+ quoteError = (
+
+ );
+ }
+
+ if (quoteError) {
+ return {quoteError};
+ }
+
+ return (
+
+
+
+ );
+};
+
+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 */
+
+
+
+ );
+ }
+
+ /* @ts-expect-error Status is not yet typed */
+ return ;
+};
diff --git a/app/javascript/flavours/glitch/features/account_featured/index.tsx b/app/javascript/flavours/glitch/features/account_featured/index.tsx
index 1efa7bdd6c..ea1bac2e9d 100644
--- 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 }> = ({
/>
{featuredStatusIds.map((statusId) => (
-
diff --git a/app/javascript/flavours/glitch/features/notifications/components/notification.jsx b/app/javascript/flavours/glitch/features/notifications/components/notification.jsx
index 6ec613e209..a2ed584135 100644
--- 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 (
-
- is not yet typed
+
const renderStatuses = (statusIds: string[]) =>
hidePeek(statusIds).map((id) => (
- // @ts-expect-error inferred props are wrong
-
+
));
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
-
+
))}
)}
diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.tsx b/app/javascript/flavours/glitch/features/status/components/detailed_status.tsx
index df7bb756cf..afccad6e27 100644
--- 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') && (
+
+ )}
+
{media}
{hashtagBar}
>
diff --git a/app/javascript/flavours/glitch/features/status/index.jsx b/app/javascript/flavours/glitch/features/status/index.jsx
index af3bc8b7f4..37cf4c9be5 100644
--- 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) => (
- [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;
diff --git a/app/javascript/flavours/glitch/styles/css_variables.scss b/app/javascript/flavours/glitch/styles/css_variables.scss
index 782e08e283..413efca3f6 100644
--- 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};