Merge remote-tracking branch 'origin/features/main' into features/4.3alpha

app/javascript/mastodon/actions/UtilBtns.js

@@ -0,0 +1,89 @@
+import { changeCompose } from '../actions/compose';
+
+export const UTILBTNS_GOJI = 'UTILBTNS_GOJI';
+export const UTILBTNS_HARUKIN = 'UTILBTNS_HARUKIN';
+export const UTILBTNS_RISA = 'UTILBTNS_RISA';
+
+export function submitGoji (textarea) {
+  return function (dispatch, getState) {
+    if (!textarea.value) {
+      let text = [
+        "#ゴジモリｨｨィィイイ",
+        ":goji:"
+      ].join("\r\n");
+
+      dispatch(submitGojiRequest());
+      dispatch(changeCompose(text));
+
+      textarea.focus();
+    }
+  }
+}
+
+export function submitGojiRequest () {
+  return {
+    type: UTILBTNS_GOJI
+  }
+}
+
+export function submitHarukin (textarea) {
+  return function (dispatch, getState) {
+    const HARUKINS = [":harukin: ", ":harukin_old: ", ":harukin_ika: ", ":harukin_tako: "];
+    const MAX = 6;
+
+    if (!textarea.value) {
+      let text = "";
+
+      let quantity = Math.round(Math.random() * MAX + 1);
+      let type = Math.round(Math.random() * (HARUKINS.length - 1));
+
+      let harukin = HARUKINS[type];
+
+      switch (quantity) {
+        default:
+          text = [
+            harukin.repeat(quantity),
+            "🔥 ".repeat(quantity)
+          ].join("\r\n");
+
+          break;
+
+        case MAX + 1:
+          text = `${harukin}💕\r\n`.repeat(6);
+          break;
+      }
+
+      dispatch(submitHarukinRequest());
+      dispatch(changeCompose(text));
+
+      textarea.focus();
+    }
+  }
+}
+
+export function submitHarukinRequest () {
+  return {
+    type: UTILBTNS_HARUKIN
+  }
+}
+
+export function submitRisa (textarea) {
+  return function (dispatch, getState) {
+    if (!textarea.value) {
+      let text = [
+        "@risa2 "
+      ].join("\r\n");
+
+      dispatch(submitRisaRequest());
+      dispatch(changeCompose(text));
+
+      textarea.focus();
+    }
+  }
+}
+
+export function submitRisaRequest () {
+  return {
+    type: UTILBTNS_RISA
+  }
+}

app/javascript/mastodon/actions/bookmarks.js

@@ -1,6 +1,8 @@
 import api, { getLinks } from '../api';
 
+import { fetchRelationships } from './accounts';
 import { importFetchedStatuses } from './importer';
+import { uniq } from '../utils/uniq';
 
 export const BOOKMARKED_STATUSES_FETCH_REQUEST = 'BOOKMARKED_STATUSES_FETCH_REQUEST';
 export const BOOKMARKED_STATUSES_FETCH_SUCCESS = 'BOOKMARKED_STATUSES_FETCH_SUCCESS';
@@ -21,6 +23,7 @@ export function fetchBookmarkedStatuses() {
     api(getState).get('/api/v1/bookmarks').then(response => {
       const next = getLinks(response).refs.find(link => link.rel === 'next');
       dispatch(importFetchedStatuses(response.data));
+      dispatch(fetchRelationships(uniq(response.data.map(item => item.reblog ? item.reblog.account.id : item.account.id))));
       dispatch(fetchBookmarkedStatusesSuccess(response.data, next ? next.uri : null));
     }).catch(error => {
       dispatch(fetchBookmarkedStatusesFail(error));
@@ -62,6 +65,7 @@ export function expandBookmarkedStatuses() {
     api(getState).get(url).then(response => {
       const next = getLinks(response).refs.find(link => link.rel === 'next');
       dispatch(importFetchedStatuses(response.data));
+      dispatch(fetchRelationships(uniq(response.data.map(item => item.reblog ? item.reblog.account.id : item.account.id))));
       dispatch(expandBookmarkedStatusesSuccess(response.data, next ? next.uri : null));
     }).catch(error => {
       dispatch(expandBookmarkedStatusesFail(error));

app/javascript/mastodon/actions/compose.js

@@ -24,6 +24,8 @@ export const COMPOSE_SUBMIT_SUCCESS  = 'COMPOSE_SUBMIT_SUCCESS';
 export const COMPOSE_SUBMIT_FAIL     = 'COMPOSE_SUBMIT_FAIL';
 export const COMPOSE_REPLY           = 'COMPOSE_REPLY';
 export const COMPOSE_REPLY_CANCEL    = 'COMPOSE_REPLY_CANCEL';
+export const COMPOSE_QUOTE           = 'COMPOSE_QUOTE';
+export const COMPOSE_QUOTE_CANCEL    = 'COMPOSE_QUOTE_CANCEL';
 export const COMPOSE_DIRECT          = 'COMPOSE_DIRECT';
 export const COMPOSE_MENTION         = 'COMPOSE_MENTION';
 export const COMPOSE_RESET           = 'COMPOSE_RESET';
@@ -126,6 +128,23 @@ export function cancelReplyCompose() {
   };
 }
 
+export function quoteCompose(status, routerHistory) {
+  return (dispatch, getState) => {
+    dispatch({
+      type: COMPOSE_QUOTE,
+      status: status,
+    });
+
+    ensureComposeIsVisible(getState, routerHistory);
+  };
+};
+
+export function cancelQuoteCompose() {
+  return {
+    type: COMPOSE_QUOTE_CANCEL,
+  };
+};
+
 export function resetCompose() {
   return {
     type: COMPOSE_RESET,
@@ -208,6 +227,7 @@ export function submitCompose(routerHistory) {
         visibility: getState().getIn(['compose', 'privacy']),
         poll: getState().getIn(['compose', 'poll'], null),
         language: getState().getIn(['compose', 'language']),
+        quote_id: getState().getIn(['compose', 'quote_from'], null),
       },
       headers: {
         'Idempotency-Key': getState().getIn(['compose', 'idempotencyKey']),

app/javascript/mastodon/actions/favourites.js

@@ -1,6 +1,8 @@
 import api, { getLinks } from '../api';
 
+import { fetchRelationships } from './accounts';
 import { importFetchedStatuses } from './importer';
+import { uniq } from '../utils/uniq';
 
 export const FAVOURITED_STATUSES_FETCH_REQUEST = 'FAVOURITED_STATUSES_FETCH_REQUEST';
 export const FAVOURITED_STATUSES_FETCH_SUCCESS = 'FAVOURITED_STATUSES_FETCH_SUCCESS';
@@ -21,6 +23,7 @@ export function fetchFavouritedStatuses() {
     api(getState).get('/api/v1/favourites').then(response => {
       const next = getLinks(response).refs.find(link => link.rel === 'next');
       dispatch(importFetchedStatuses(response.data));
+      dispatch(fetchRelationships(uniq(response.data.map(item => item.reblog ? item.reblog.account.id : item.account.id))));
       dispatch(fetchFavouritedStatusesSuccess(response.data, next ? next.uri : null));
     }).catch(error => {
       dispatch(fetchFavouritedStatusesFail(error));
@@ -65,6 +68,7 @@ export function expandFavouritedStatuses() {
     api(getState).get(url).then(response => {
       const next = getLinks(response).refs.find(link => link.rel === 'next');
       dispatch(importFetchedStatuses(response.data));
+      dispatch(fetchRelationships(uniq(response.data.map(item => item.reblog ? item.reblog.account.id : item.account.id))));
       dispatch(expandFavouritedStatusesSuccess(response.data, next ? next.uri : null));
     }).catch(error => {
       dispatch(expandFavouritedStatusesFail(error));

app/javascript/mastodon/actions/importer/index.js

@@ -72,6 +72,10 @@ export function importFetchedStatuses(statuses) {
         processStatus(status.reblog);
       }
 
+      if (status.quote && status.quote.id) {
+        processStatus(status.quote);
+      }
+
       if (status.poll && status.poll.id) {
         pushUnique(polls, normalizePoll(status.poll, getState().getIn(['polls', status.poll.id])));
       }

app/javascript/mastodon/actions/importer/normalizer.js

@@ -49,6 +49,8 @@ export function normalizeStatus(status, normalOldStatus) {
     normalStatus.spoilerHtml = normalOldStatus.get('spoilerHtml');
     normalStatus.spoiler_text = normalOldStatus.get('spoiler_text');
     normalStatus.hidden = normalOldStatus.get('hidden');
+    normalStatus.quote = normalOldStatus.get('quote');
+    normalStatus.quote_hidden = normalOldStatus.get('quote_hidden');
 
     if (normalOldStatus.get('translation')) {
       normalStatus.translation = normalOldStatus.get('translation');
@@ -69,6 +71,11 @@ export function normalizeStatus(status, normalOldStatus) {
     normalStatus.contentHtml  = emojify(normalStatus.content, emojiMap);
     normalStatus.spoilerHtml  = emojify(escapeTextContentForBrowser(spoilerText), emojiMap);
     normalStatus.hidden       = expandSpoilers ? false : spoilerText.length > 0 || normalStatus.sensitive;
+
+    if (status.quote) {
+      normalStatus.quote = normalizeStatus(status.quote, null);
+      normalStatus.quote_hidden = normalStatus.quote.hidden;
+    }
   }
 
   if (normalOldStatus) {

app/javascript/mastodon/actions/statuses.js

@@ -28,6 +28,9 @@ export const STATUS_REVEAL   = 'STATUS_REVEAL';
 export const STATUS_HIDE     = 'STATUS_HIDE';
 export const STATUS_COLLAPSE = 'STATUS_COLLAPSE';
 
+export const QUOTE_REVEAL = 'QUOTE_REVEAL';
+export const QUOTE_HIDE   = 'QUOTE_HIDE';
+
 export const REDRAFT = 'REDRAFT';
 
 export const STATUS_FETCH_SOURCE_REQUEST = 'STATUS_FETCH_SOURCE_REQUEST';
@@ -348,3 +351,25 @@ export const undoStatusTranslation = (id, pollId) => ({
   id,
   pollId,
 });
+
+export function hideQuote(ids) {
+  if (!Array.isArray(ids)) {
+    ids = [ids];
+  }
+
+  return {
+    type: QUOTE_HIDE,
+    ids,
+  };
+};
+
+export function revealQuote(ids) {
+  if (!Array.isArray(ids)) {
+    ids = [ids];
+  }
+
+  return {
+    type: QUOTE_REVEAL,
+    ids,
+  };
+};

app/javascript/mastodon/actions/timelines.js

@@ -4,6 +4,9 @@ import api, { getLinks } from 'mastodon/api';
 import { compareId } from 'mastodon/compare_id';
 import { usePendingItems as preferPendingItems } from 'mastodon/initial_state';
 
+import { uniq } from '../utils/uniq';
+
+import { fetchRelationships } from './accounts';
 import { importFetchedStatus, importFetchedStatuses } from './importer';
 import { submitMarkers } from './markers';
 
@@ -45,6 +48,7 @@ export function updateTimeline(timeline, status, accept) {
     }
 
     dispatch(importFetchedStatus(status));
+    dispatch(fetchRelationships([status.reblog ? status.reblog.account.id : status.account.id, status.quote ? status.quote.account.id : null].filter(x => x)));
 
     dispatch({
       type: TIMELINE_UPDATE,
@@ -118,6 +122,7 @@ export function expandTimeline(timelineId, path, params = {}, done = noOp) {
       const next = getLinks(response).refs.find(link => link.rel === 'next');
 
       dispatch(importFetchedStatuses(response.data));
+      dispatch(fetchRelationships(uniq(response.data.map(item => [item.reblog ? item.reblog.account.id : item.account.id, item.quote ? item.quote.account.id : null]).flat().filter(x => x))));
       dispatch(expandTimelineSuccess(timelineId, response.data, next ? next.uri : null, response.status === 206, isLoadingRecent, isLoadingMore, isLoadingRecent && preferPendingItems));
 
       if (timelineId === 'home' && !isLoadingMore && !isLoadingRecent) {

app/javascript/mastodon/components/logo.tsx

@@ -1,4 +1,4 @@
-import logo from '@/images/logo.svg';
+import logo from '@/images/y-zu-logo.svg';
 
 export const WordmarkLogo: React.FC = () => (
   <svg viewBox='0 0 261 66' className='logo logo--wordmark' role='img'>
@@ -9,4 +9,4 @@ export const WordmarkLogo: React.FC = () => (
 
 export const SymbolLogo: React.FC = () => (
   <img src={logo} alt='Mastodon' className='logo logo--icon' />
-);
+);

app/javascript/mastodon/components/media_gallery.jsx

@@ -221,6 +221,7 @@ class MediaGallery extends PureComponent {
     visible: PropTypes.bool,
     autoplay: PropTypes.bool,
     onToggleVisibility: PropTypes.func,
+    quote: PropTypes.bool,
   };
 
   state = {
@@ -291,7 +292,7 @@ class MediaGallery extends PureComponent {
   }
 
   render () {
-    const { media, lang, intl, sensitive, defaultWidth, autoplay } = this.props;
+    const { media, lang, intl, sensitive, defaultWidth, autoplay, quote } = this.props;
     const { visible } = this.state;
     const width = this.state.width || defaultWidth;
 
@@ -305,6 +306,14 @@ class MediaGallery extends PureComponent {
       style.aspectRatio = '3 / 2';
     }
 
+    if (quote && style.height) {
+      style.height /= 2;
+    }
+
+    if (quote && style.height) {
+      style.height /= 2;
+    }
+
     const size     = media.take(4).size;
     const uncached = media.every(attachment => attachment.get('type') === 'unknown');
 

app/javascript/mastodon/components/status.jsx

@@ -35,6 +35,29 @@ import { VisibilityIcon } from './visibility_icon';
 
 const domParser = new DOMParser();
 
+export const mapStateToProps = (state, props) => {
+  let status = props.status;
+
+  if (status === null) {
+    return null;
+  }
+
+  if (status.get('reblog', null) !== null && typeof status.get('reblog') === 'object') {
+    status = status.get('reblog');
+  }
+
+  if (status.get('quote', null) === null) {
+    return {
+      quoteMuted: !!status.get('quote_id', null),
+    };
+  }
+
+  const id = status.getIn(['quote', 'account', 'id'], null);
+  return {
+    quoteMuted: id !== null && (state.getIn(['relationships', id, 'muting']) || state.getIn(['relationships', id, 'blocking']) || state.getIn(['relationships', id, 'blocked_by']) || state.getIn(['relationships', id, 'domain_blocking']) || status.getIn(['quote', 'muted'])),
+  };
+};
+
 export const textForScreenReader = (intl, status, rebloggedByText = false) => {
   const displayName = status.getIn(['account', 'display_name']);
 
@@ -76,6 +99,60 @@ const messages = defineMessages({
   edited: { id: 'status.edited', defaultMessage: 'Edited {date}' },
 });
 
+export const quote = (status, muted, quoteMuted, handleQuoteClick, handleExpandedQuoteToggle, identity, media, router, contextType = 'home') => {
+  const quoteStatus = status.get('quote', null);
+
+  if (!quoteStatus) {
+    return null;
+  }
+
+  const quoteInner = (() => {
+    const hideUnlisted = quoteStatus.get('visibility') === 'unlisted'
+      && ['public', 'community', 'hashtag'].includes(contextType);
+    if (quoteMuted || hideUnlisted) {
+      const content = (() => {
+        if (quoteMuted) {
+          return (
+            <FormattedMessage id='status.muted_quote' defaultMessage='Muted quote' />
+          );
+        }
+
+        return (
+          <button onClick={handleQuoteClick}>
+            <FormattedMessage id='status.unlisted_quote' defaultMessage='Unlisted quote' />
+          </button>
+        );
+      })();
+
+      return (
+        <div className={classNames('status__content', { 'muted-quote': quoteMuted, 'unlisted-quote': hideUnlisted, 'status__content--with-action': router })}>
+          {content}
+        </div>
+      );
+    }
+
+    return (
+      <div>
+        <div className='status__info'>
+          {identity(quoteStatus, null, null, true)}
+        </div>
+        <StatusContent status={quoteStatus} onClick={handleQuoteClick} expanded={!status.get('quote_hidden')} onExpandedToggle={handleExpandedQuoteToggle} quote />
+        {media(quoteStatus, true)}
+      </div>
+    );
+  })();
+
+  return (
+    <div
+      className={classNames('quote-status', `status-${quoteStatus.get('visibility')}`, { muted: muted })}
+      data-id={quoteStatus.get('id')}
+      dataurl={quoteStatus.get('url')}
+    >
+      {quoteInner}
+    </div>
+  );
+};
+
 class Status extends ImmutablePureComponent {
 
   static propTypes = {
@@ -102,7 +179,9 @@ class Status extends ImmutablePureComponent {
     onToggleCollapsed: PropTypes.func,
     onTranslate: PropTypes.func,
     onInteractionModal: PropTypes.func,
+    onQuoteToggleHidden: PropTypes.func,
     muted: PropTypes.bool,
+    quoteMuted: PropTypes.bool,
     hidden: PropTypes.bool,
     unread: PropTypes.bool,
     onMoveUp: PropTypes.func,
@@ -118,6 +197,7 @@ class Status extends ImmutablePureComponent {
       inUse: PropTypes.bool,
       available: PropTypes.bool,
     }),
+    contextType: PropTypes.string,
     ...WithOptionalRouterPropTypes,
   };
 
@@ -130,10 +210,12 @@ class Status extends ImmutablePureComponent {
     'hidden',
     'unread',
     'pictureInPicture',
+    'quoteMuted',
   ];
 
   state = {
     showMedia: defaultMediaVisibility(this.props.status),
+    showQuoteMedia: defaultMediaVisibility(this.props.status ? this.props.status.get('quote', null) : null),
     statusId: undefined,
     forceFilter: undefined,
   };
@@ -142,6 +224,7 @@ class Status extends ImmutablePureComponent {
     if (nextProps.status && nextProps.status.get('id') !== prevState.statusId) {
       return {
         showMedia: defaultMediaVisibility(nextProps.status),
+        showQuoteMedia: defaultMediaVisibility(nextProps.status ? nextProps.status.get('quote', null) : null),
         statusId: nextProps.status.get('id'),
       };
     } else {
@@ -153,6 +236,10 @@ class Status extends ImmutablePureComponent {
     this.setState({ showMedia: !this.state.showMedia });
   };
 
+  handleToggleQuoteMediaVisibility = () => {
+    this.setState({ showQuoteMedia: !this.state.showQuoteMedia });
+  }
+
   handleClick = e => {
     if (e && (e.button !== 0 || e.ctrlKey || e.metaKey)) {
       return;
@@ -182,6 +269,24 @@ class Status extends ImmutablePureComponent {
     this._openProfile(proper);
   };
 
+  handleQuoteClick = () => {
+    if (!this.props) {
+      return;
+    }
+
+    const { status } = this.props;
+    this.props.history.push(`/statuses/${status.getIn(['reblog', 'quote', 'id'], status.getIn(['quote', 'id']))}`);
+  }
+
+  handleQuoteUserClick = () =>{
+    if (!this.props) {
+      return;
+    }
+
+    const { status } = this.props;
+    this.location.href(`/@${status.getIn(['account', 'acct'])}`);
+  }
+
   handleExpandedToggle = () => {
     this.props.onToggleHidden(this._properStatus());
   };
@@ -194,6 +299,10 @@ class Status extends ImmutablePureComponent {
     this.props.onTranslate(this._properStatus());
   };
 
+  handleExpandedQuoteToggle = () => {
+    this.props.onQuoteToggleHidden(this._properStatus());
+  }
+
   getAttachmentAspectRatio () {
     const attachments = this._properStatus().get('media_attachments');
 
@@ -348,7 +457,7 @@ class Status extends ImmutablePureComponent {
   };
 
   render () {
-    const { intl, hidden, featured, unread, showThread, scrollKey, pictureInPicture, previousId, nextInReplyToId, rootId } = this.props;
+    const { intl, hidden, featured, unread, showThread, scrollKey, pictureInPicture, previousId, quoteMuted, nextInReplyToId, rootId, contextType } = this.props;
 
     let { status, account, ...other } = this.props;
 
@@ -370,7 +479,7 @@ class Status extends ImmutablePureComponent {
       openMedia: this.handleHotkeyOpenMedia,
     };
 
-    let media, statusAvatar, prepend, rebloggedByText;
+    let prepend, rebloggedByText;
 
     if (hidden) {
       return (
@@ -445,99 +554,117 @@ class Status extends ImmutablePureComponent {
         </div>
       );
     }
+    const media = (status, quote = false) => {
+      if (pictureInPicture.get('inUse')) {
+        return <PictureInPicturePlaceholder aspectRatio={this.getAttachmentAspectRatio()} />;
+      } else if (status.get('media_attachments').size > 0) {
+        const language = status.getIn(['translation', 'language']) || status.get('language');
 
-    if (pictureInPicture.get('inUse')) {
-      media = <PictureInPicturePlaceholder aspectRatio={this.getAttachmentAspectRatio()} />;
-    } else if (status.get('media_attachments').size > 0) {
-      const language = status.getIn(['translation', 'language']) || status.get('language');
+        if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
+          const attachment = status.getIn(['media_attachments', 0]);
+          const description = attachment.getIn(['translation', 'description']) || attachment.get('description');
 
-      if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
-        const attachment = status.getIn(['media_attachments', 0]);
-        const description = attachment.getIn(['translation', 'description']) || attachment.get('description');
+          return (
+            <Bundle fetchComponent={Audio} loading={this.renderLoadingAudioPlayer} >
+              {Component => (
+                <Component
+                  src={attachment.get('url')}
+                  alt={description}
+                  lang={language}
+                  poster={attachment.get('preview_url') || status.getIn(['account', 'avatar_static'])}
+                  backgroundColor={attachment.getIn(['meta', 'colors', 'background'])}
+                  foregroundColor={attachment.getIn(['meta', 'colors', 'foreground'])}
+                  accentColor={attachment.getIn(['meta', 'colors', 'accent'])}
+                  duration={attachment.getIn(['meta', 'original', 'duration'], 0)}
+                  width={this.props.cachedMediaWidth}
+                  height={110}
+                  cacheWidth={this.props.cacheMediaWidth}
+                  deployPictureInPicture={pictureInPicture.get('available') ? this.handleDeployPictureInPicture : undefined}
+                  sensitive={status.get('sensitive')}
+                  blurhash={attachment.get('blurhash')}
+                  visible={this.state.showMedia}
+                  onToggleVisibility={this.handleToggleMediaVisibility}
+                  quote={quote}
+                />
+              )}
+            </Bundle>
+          );
+        } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
+          const attachment = status.getIn(['media_attachments', 0]);
+          const description = attachment.getIn(['translation', 'description']) || attachment.get('description');
 
-        media = (
-          <Bundle fetchComponent={Audio} loading={this.renderLoadingAudioPlayer} >
-            {Component => (
-              <Component
-                src={attachment.get('url')}
-                alt={description}
-                lang={language}
-                poster={attachment.get('preview_url') || status.getIn(['account', 'avatar_static'])}
-                backgroundColor={attachment.getIn(['meta', 'colors', 'background'])}
-                foregroundColor={attachment.getIn(['meta', 'colors', 'foreground'])}
-                accentColor={attachment.getIn(['meta', 'colors', 'accent'])}
-                duration={attachment.getIn(['meta', 'original', 'duration'], 0)}
-                width={this.props.cachedMediaWidth}
-                height={110}
-                cacheWidth={this.props.cacheMediaWidth}
-                deployPictureInPicture={pictureInPicture.get('available') ? this.handleDeployPictureInPicture : undefined}
-                sensitive={status.get('sensitive')}
-                blurhash={attachment.get('blurhash')}
-                visible={this.state.showMedia}
-                onToggleVisibility={this.handleToggleMediaVisibility}
-              />
-            )}
-          </Bundle>
-        );
-      } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
-        const attachment = status.getIn(['media_attachments', 0]);
-        const description = attachment.getIn(['translation', 'description']) || attachment.get('description');
-
-        media = (
-          <Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer} >
-            {Component => (
-              <Component
-                preview={attachment.get('preview_url')}
-                frameRate={attachment.getIn(['meta', 'original', 'frame_rate'])}
-                aspectRatio={`${attachment.getIn(['meta', 'original', 'width'])} / ${attachment.getIn(['meta', 'original', 'height'])}`}
-                blurhash={attachment.get('blurhash')}
-                src={attachment.get('url')}
-                alt={description}
-                lang={language}
-                sensitive={status.get('sensitive')}
-                onOpenVideo={this.handleOpenVideo}
-                deployPictureInPicture={pictureInPicture.get('available') ? this.handleDeployPictureInPicture : undefined}
-                visible={this.state.showMedia}
-                onToggleVisibility={this.handleToggleMediaVisibility}
-              />
-            )}
-          </Bundle>
-        );
-      } else {
-        media = (
-          <Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery}>
-            {Component => (
-              <Component
-                media={status.get('media_attachments')}
-                lang={language}
-                sensitive={status.get('sensitive')}
-                height={110}
-                onOpenMedia={this.handleOpenMedia}
-                cacheWidth={this.props.cacheMediaWidth}
-                defaultWidth={this.props.cachedMediaWidth}
-                visible={this.state.showMedia}
-                onToggleVisibility={this.handleToggleMediaVisibility}
-              />
-            )}
-          </Bundle>
+          return (
+            <Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer} >
+              {Component => (
+                <Component
+                  preview={attachment.get('preview_url')}
+                  frameRate={attachment.getIn(['meta', 'original', 'frame_rate'])}
+                  aspectRatio={`${attachment.getIn(['meta', 'original', 'width'])} / ${attachment.getIn(['meta', 'original', 'height'])}`}
+                  blurhash={attachment.get('blurhash')}
+                  src={attachment.get('url')}
+                  alt={description}
+                  lang={language}
+                  sensitive={status.get('sensitive')}
+                  onOpenVideo={this.handleOpenVideo}
+                  deployPictureInPicture={pictureInPicture.get('available') ? this.handleDeployPictureInPicture : undefined}
+                  visible={this.state.showMedia}
+                  onToggleVisibility={this.handleToggleMediaVisibility}
+                  quote={quote}
+                />
+              )}
+            </Bundle>
+          );
+        } else {
+          return (
+            <Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery}>
+              {Component => (
+                <Component
+                  media={status.get('media_attachments')}
+                  lang={language}
+                  sensitive={status.get('sensitive')}
+                  height={110}
+                  onOpenMedia={this.handleOpenMedia}
+                  cacheWidth={this.props.cacheMediaWidth}
+                  defaultWidth={this.props.cachedMediaWidth}
+                  visible={this.state.showMedia}
+                  onToggleVisibility={this.handleToggleMediaVisibility}
+                  quote={quote}
+                />
+              )}
+            </Bundle>
+          );
+        }
+      } else if (status.get('spoiler_text').length === 0 && status.get('card')) {
+        return (
+          <Card
+            onOpenMedia={this.handleOpenMedia}
+            card={status.get('card')}
+            compact
+            sensitive={status.get('sensitive')}
+            quote={quote}
+          />
         );
       }
-    } else if (status.get('spoiler_text').length === 0 && status.get('card')) {
-      media = (
-        <Card
-          onOpenMedia={this.handleOpenMedia}
-          card={status.get('card')}
-          compact
-          sensitive={status.get('sensitive')}
-        />
-      );
-    }
+    return null;
+    };
 
-    if (account === undefined || account === null) {
-      statusAvatar = <Avatar account={status.get('account')} size={46} />;
-    } else {
-      statusAvatar = <AvatarOverlay account={status.get('account')} friend={account} />;
-    }
+    const statusAvatar = (status, account) => {
+      if (account === undefined || account === null) {
+        return <Avatar account={status.get('account')} size={46} />;
+      } else {
+        return <AvatarOverlay account={status.get('account')} friend={account} />;
+      }
+    };
+    
+    const identity = (status, account, _0, quote = false) => (
+      <a onClick={quote ? this.handleQuoteUserClick : this.handleAccountClick} href={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='status__display-name' rel='noopener noreferrer'>
+        <div className='status__avatar'>
+          {statusAvatar(status, account)}
+        </div>
+
+        <DisplayName account={status.get('account')} />
+      </a>
+    );
 
     const {statusContentProps, hashtagBar} = getHashtagBarForStatus(status);
     const expanded = !status.get('hidden') || status.get('spoiler_text').length === 0;
@@ -557,13 +684,15 @@ class Status extends ImmutablePureComponent {
                 <RelativeTimestamp timestamp={status.get('created_at')} />{status.get('edited_at') && <abbr title={intl.formatMessage(messages.edited, { date: intl.formatDate(status.get('edited_at'), { hour12: false, year: 'numeric', month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) })}> *</abbr>}
               </a>
 
-              <a onClick={this.handleAccountClick} href={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='status__display-name' target='_blank' rel='noopener noreferrer'>
+              {/* <a onClick={this.handleAccountClick} href={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='status__display-name' target='_blank' rel='noopener noreferrer'>
                 <div className='status__avatar'>
                   {statusAvatar}
                 </div>
 
                 <DisplayName account={status.get('account')} />
-              </a>
+              </a> */}
+
+              {identity(status, account, false)}
             </div>
 
             <StatusContent
@@ -577,8 +706,10 @@ class Status extends ImmutablePureComponent {
               {...statusContentProps}
             />
 
-            {media}
+            {media(status)}
 
+            {quote(status, this.props.muted, quoteMuted, this.handleQuoteClick, this.handleExpandedQuoteToggle, identity, media, this.props, contextType)}
+            
             {expanded && hashtagBar}
 
             <StatusActionBar scrollKey={scrollKey} status={status} account={account} onFilter={matchedFilters ? this.handleFilterClick : null} {...other} />
@@ -590,4 +721,4 @@ class Status extends ImmutablePureComponent {
 
 }
 
-export default withOptionalRouter(injectIntl(Status));
+export default withOptionalRouter(injectIntl(Status));

app/javascript/mastodon/components/status_action_bar.jsx

@@ -16,6 +16,7 @@ import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
 import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
 import ReplyAllIcon from '@/material-icons/400-24px/reply_all.svg?react';
 import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
+import QuoteIcon from '@material-symbols/400-24px/format_quote.svg?react';
 import StarBorderIcon from '@/material-icons/400-24px/star.svg?react';
 import VisibilityIcon from '@/material-icons/400-24px/visibility.svg?react';
 import RepeatActiveIcon from '@/svg-icons/repeat_active.svg?react';
@@ -46,6 +47,8 @@ const messages = defineMessages({
   reblog_private: { id: 'status.reblog_private', defaultMessage: 'Boost with original visibility' },
   cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Unboost' },
   cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
+  quote: { id: 'status.quote', defaultMessage: 'Quote' },
+  cannot_quote: { id: 'status.cannot_quote', defaultMessage: 'This post cannot be quoted' },
   favourite: { id: 'status.favourite', defaultMessage: 'Favorite' },
   bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' },
   removeBookmark: { id: 'status.remove_bookmark', defaultMessage: 'Remove bookmark' },
@@ -85,6 +88,7 @@ class StatusActionBar extends ImmutablePureComponent {
     onReply: PropTypes.func,
     onFavourite: PropTypes.func,
     onReblog: PropTypes.func,
+    onQuote: PropTypes.func,
     onDelete: PropTypes.func,
     onDirect: PropTypes.func,
     onMention: PropTypes.func,
@@ -155,6 +159,10 @@ class StatusActionBar extends ImmutablePureComponent {
     }
   };
 
+  handleQuoteClick = () => {
+    this.props.onQuote(this.props.status, this.props.history);
+  }
+
   handleBookmarkClick = () => {
     this.props.onBookmark(this.props.status);
   };
@@ -248,6 +256,14 @@ class StatusActionBar extends ImmutablePureComponent {
     this.props.onFilter();
   };
 
+  static quoteTitle = (intl, messages, publicStatus) => {
+    if (publicStatus) {
+      return intl.formatMessage(messages.quote);
+    } else {
+      return intl.formatMessage(messages.cannot_quote);
+    }
+  }
+
   render () {
     const { status, relationship, intl, withDismiss, withCounters, scrollKey } = this.props;
     const { signedIn, permissions } = this.context.identity;
@@ -391,6 +407,7 @@ class StatusActionBar extends ImmutablePureComponent {
         <IconButton className='status__action-bar__button' title={replyTitle} icon={isReply ? 'reply' : replyIcon} iconComponent={isReply ? ReplyIcon : replyIconComponent} onClick={this.handleReplyClick} counter={status.get('replies_count')} />
         <IconButton className={classNames('status__action-bar__button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' iconComponent={reblogIconComponent} onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
         <IconButton className='status__action-bar__button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' iconComponent={status.get('favourited') ? StarIcon : StarBorderIcon} onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
+        <IconButton className='status__action-bar__button' disabled={!publicStatus} title={StatusActionBar.quoteTitle(intl, messages, publicStatus)} icon='quote' iconComponent={QuoteIcon} onClick={this.handleQuoteClick} />
         <IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' iconComponent={status.get('bookmarked') ? BookmarkIcon : BookmarkBorderIcon} onClick={this.handleBookmarkClick} />
 
         {filterButton}

app/javascript/mastodon/components/status_content.jsx

@@ -15,6 +15,7 @@ import PollContainer from 'mastodon/containers/poll_container';
 import { autoPlayGif, languages as preloadedLanguages } from 'mastodon/initial_state';
 
 const MAX_HEIGHT = 706; // 22px * 32 (+ 2px padding at the top)
+const QUOTE_MAX_HEIGHT = 112; // 22px * 5 (+ 2px padding at the top)
 
 /**
  *
@@ -83,6 +84,7 @@ class StatusContent extends PureComponent {
     onCollapsedToggle: PropTypes.func,
     languages: ImmutablePropTypes.map,
     intl: PropTypes.object,
+    quote: PropTypes.bool,
     // from react-router
     match: PropTypes.object.isRequired,
     location: PropTypes.object.isRequired,
@@ -130,12 +132,12 @@ class StatusContent extends PureComponent {
     }
 
     if (status.get('collapsed', null) === null && onCollapsedToggle) {
-      const { collapsible, onClick } = this.props;
+      const { collapsible, onClick, quote } = this.props;
 
       const collapsed =
           collapsible
           && onClick
-          && node.clientHeight > MAX_HEIGHT
+          && node.clientHeight > (quote ? QUOTE_MAX_HEIGHT : MAX_HEIGHT)
           && status.get('spoiler_text').length === 0;
 
       onCollapsedToggle(collapsed);
@@ -239,7 +241,7 @@ class StatusContent extends PureComponent {
   };
 
   render () {
-    const { status, intl, statusContent } = this.props;
+    const { status, intl, statusContent, quote } = this.props;
 
     const hidden = this.props.onExpandedToggle ? !this.props.expanded : this.state.hidden;
     const renderReadMore = this.props.onClick && status.get('collapsed');
@@ -270,6 +272,12 @@ class StatusContent extends PureComponent {
       <PollContainer pollId={status.get('poll')} lang={language} />
     );
 
+    if (quote) {
+      const doc = new DOMParser().parseFromString(content.__html, 'text/html').documentElement;
+      Array.from(doc.querySelectorAll('br')).forEach(nl => nl.replaceWith(' '));
+      content.__html = doc.outerHTML;
+    }
+
     if (status.get('spoiler_text').length > 0) {
       let mentionsPlaceholder = '';
 

app/javascript/mastodon/containers/status_container.jsx

@@ -11,6 +11,7 @@ import { initBlockModal } from '../actions/blocks';
 import { initBoostModal } from '../actions/boosts';
 import {
   replyCompose,
+  quoteCompose,
   mentionCompose,
   directCompose,
 } from '../actions/compose';
@@ -45,6 +46,8 @@ import {
   editStatus,
   translateStatus,
   undoStatusTranslation,
+  hideQuote,
+  revealQuote,
 } from '../actions/statuses';
 import Status from '../components/status';
 import { boostModal, deleteModal } from '../initial_state';
@@ -57,6 +60,8 @@ const messages = defineMessages({
   redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? Favorites and boosts will be lost, and replies to the original post will be orphaned.' },
   replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
   replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
+  quoteConfirm: { id: 'confirmations.quote.confirm', defaultMessage: 'Quote' },
+  quoteMessage: { id: 'confirmations.quote.message', defaultMessage: 'Quoting now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
   editConfirm: { id: 'confirmations.edit.confirm', defaultMessage: 'Edit' },
   editMessage: { id: 'confirmations.edit.message', defaultMessage: 'Editing now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
   blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Block entire domain' },
@@ -111,6 +116,22 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
     }
   },
 
+  onQuote (status, router) {
+    dispatch((_, getState) => {
+      let state = getState();
+
+      if (state.getIn(['compose', 'text']).trim().length !== 0) {
+        dispatch(openModal('CONFIRM', {
+          message: intl.formatMessage(messages.quoteMessage),
+          confirm: intl.formatMessage(messages.quoteConfirm),
+          onConfirm: () => dispatch(quoteCompose(status, router)),
+        }));
+      } else {
+        dispatch(quoteCompose(status, router));
+      }
+    });
+  },
+
   onFavourite (status) {
     if (status.get('favourited')) {
       dispatch(unfavourite(status));
@@ -253,6 +274,14 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
     dispatch(toggleStatusCollapse(status.get('id'), isCollapsed));
   },
 
+  onQuoteToggleHidden (status) {
+    if (status.get('quote_hidden')) {
+      dispatch(revealQuote(status.get('id')));
+    } else {
+      dispatch(hideQuote(status.get('id')));
+    }
+  },
+
   onBlockDomain (domain) {
     dispatch(openModal({
       modalType: 'CONFIRM',

app/javascript/mastodon/features/audio/index.jsx

@@ -61,6 +61,7 @@ class Audio extends PureComponent {
     volume: PropTypes.number,
     muted: PropTypes.bool,
     deployPictureInPicture: PropTypes.func,
+    quote: PropTypes.bool,
   };
 
   state = {
@@ -105,7 +106,11 @@ class Audio extends PureComponent {
 
   _setDimensions () {
     const width  = this.player.offsetWidth;
-    const height = this.props.fullscreen ? this.player.offsetHeight : (width / (16/9));
+    let height   = this.props.fullscreen ? this.player.offsetHeight : (width / (16/9));
+
+    if (this.props.quote) {
+      height /= 2;
+    }
 
     if (this.props.cacheWidth) {
       this.props.cacheWidth(width);

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

@@ -39,6 +39,9 @@ const messages = defineMessages({
   publish: { id: 'compose_form.publish', defaultMessage: 'Post' },
   saveChanges: { id: 'compose_form.save_changes', defaultMessage: 'Update' },
   reply: { id: 'compose_form.reply', defaultMessage: 'Reply' },
+  utilBtns_goji: { id: 'compose_form.utilBtns_goji', defaultMessage: 'Typo!!!' },
+  utilBtns_harukin: { id: 'compose_form.utilBtns_harukin', defaultMessage: 'Burn Harukin' },
+  utilBtns_risa: { id: 'compose_form.utilBtns_risa', defaultMessage: 'Risa' }
 });
 
 class ComposeForm extends ImmutablePureComponent {
@@ -71,6 +74,9 @@ class ComposeForm extends ImmutablePureComponent {
     singleColumn: PropTypes.bool,
     lang: PropTypes.string,
     maxChars: PropTypes.number,
+    onGojiSubmit: PropTypes.func.isRequired,
+    onHarukinSubmit: PropTypes.func.isRequired,
+    onRisaSubmit: PropTypes.func.isRequired,
     ...WithOptionalRouterPropTypes
   };
 
@@ -224,6 +230,10 @@ class ComposeForm extends ImmutablePureComponent {
     this.props.onPickEmoji(position, data, needsSpace);
   };
 
+  handleOnGojiSubmit = () => this.props.onGojiSubmit(this.textareaRef.current);
+  handleOnHarukinSubmit = () => this.props.onHarukinSubmit(this.textareaRef.current);
+  handleOnRisaSubmit = () => this.props.onRisaSubmit(this.textareaRef.current);
+
   render () {
     const { intl, onPaste, autoFocus, withoutNavigation, maxChars } = this.props;
     const { highlighted } = this.state;
@@ -311,6 +321,10 @@ class ComposeForm extends ImmutablePureComponent {
             </div>
           </div>
         </div>
+        <div className="compose-form__utilBtns">
+          <Button className="compose-form__utilBtns-goji" text={intl.formatMessage(messages.utilBtns_goji)} onClick={this.handleOnGojiSubmit} block />
+          <Button className="compose-form__utilBtns-harukin" text={intl.formatMessage(messages.utilBtns_harukin)} onClick={this.handleOnHarukinSubmit} block />
+        </div>
       </form>
     );
   }

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

@@ -45,4 +45,4 @@ export const ReplyIndicator = () => {
       </div>
     </div>
   );
-};
+};

app/javascript/mastodon/features/compose/containers/compose_form_container.js

@@ -10,6 +10,11 @@ import {
   insertEmojiCompose,
   uploadCompose,
 } from '../../../actions/compose';
+import {
+  submitGoji,
+  submitHarukin,
+  submitRisa
+} from '../../../actions/UtilBtns';
 import ComposeForm from '../components/compose_form';
 
 const mapStateToProps = state => ({
@@ -65,6 +70,18 @@ const mapDispatchToProps = (dispatch) => ({
     dispatch(insertEmojiCompose(position, data, needsSpace));
   },
 
+  onRisaSubmit (textarea) {
+    dispatch(submitRisa(textarea));
+  },
+
+  onGojiSubmit (textarea) {
+    dispatch(submitGoji(textarea));
+  },
+
+  onHarukinSubmit (textarea) {
+    dispatch(submitHarukin(textarea));
+  },
+
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(ComposeForm);

app/javascript/mastodon/features/compose/containers/reply_indicator_container.js

@@ -0,0 +1,36 @@
+import { connect } from 'react-redux';
+import { cancelReplyCompose, cancelQuoteCompose } from '../../../actions/compose';
+import { makeGetStatus } from '../../../selectors';
+import ReplyIndicator from '../components/reply_indicator';
+
+const makeMapStateToProps = () => {
+  const getStatus = makeGetStatus();
+
+  const mapStateToProps = (state, props) => {
+    let statusId = state.getIn(['compose', 'id'], null);
+    let editing  = true;
+
+    if (statusId === null) {
+      statusId = state.getIn(['compose', props.quote ? 'quote_from' : 'in_reply_to']);
+      editing  = false;
+    }
+
+    return {
+      status: getStatus(state, { id: statusId }),
+      quote: props.quote,
+      editing,
+    };
+  };
+
+  return mapStateToProps;
+};
+
+const mapDispatchToProps = dispatch => ({
+
+  onCancel (quote) {
+    dispatch(quote ? cancelQuoteCompose() : cancelReplyCompose());
+  },
+
+});
+
+export default connect(makeMapStateToProps, mapDispatchToProps)(ReplyIndicator);

app/javascript/mastodon/features/picture_in_picture/components/footer.jsx

@@ -15,7 +15,7 @@ import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
 import ReplyAllIcon from '@/material-icons/400-24px/reply_all.svg?react';
 import StarIcon from '@/material-icons/400-24px/star.svg?react';
 import { initBoostModal } from 'mastodon/actions/boosts';
-import { replyCompose } from 'mastodon/actions/compose';
+import { replyCompose, quoteCompose } from 'mastodon/actions/compose';
 import { reblog, favourite, unreblog, unfavourite } from 'mastodon/actions/interactions';
 import { openModal } from 'mastodon/actions/modal';
 import { IconButton } from 'mastodon/components/icon_button';
@@ -30,9 +30,13 @@ const messages = defineMessages({
   reblog_private: { id: 'status.reblog_private', defaultMessage: 'Boost with original visibility' },
   cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Unboost' },
   cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
+  quote: { id: 'status.quote', defaultMessage: 'Quote' },
+  cannot_quote: { id: 'status.cannot_quote', defaultMessage: 'This post cannot be quoted' },
   favourite: { id: 'status.favourite', defaultMessage: 'Favorite' },
   replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
   replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
+  quoteConfirm: { id: 'confirmations.quote.confirm', defaultMessage: 'Quote' },
+  quoteMessage: { id: 'confirmations.quote.message', defaultMessage: 'Quoting now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
   open: { id: 'status.open', defaultMessage: 'Expand this status' },
 });
 
@@ -154,6 +158,31 @@ class Footer extends ImmutablePureComponent {
     }
   };
 
+  _performQuote = () => {
+    const { dispatch, status, onClose } = this.props;
+    const { router } = this.context;
+
+    if (onClose) {
+      onClose();
+    }
+
+    dispatch(quoteCompose(status, router.history));
+  }
+
+  handleQuoteClick = () => {
+    const { dispatch, askReplyConfirmation, intl } = this.props;
+
+    if (askReplyConfirmation) {
+      dispatch(openModal('CONFIRM', {
+        message: intl.formatMessage(messages.quoteMessage),
+        confirm: intl.formatMessage(messages.quoteConfirm),
+        onConfirm: this._performQuote,
+      }));
+    } else {
+      this._performQuote();
+    }
+  }
+
   handleOpenClick = e => {
     if (e.button !== 0 || !history) {
       return;

app/javascript/mastodon/features/status/components/action_bar.jsx

@@ -16,6 +16,7 @@ import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
 import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
 import ReplyAllIcon from '@/material-icons/400-24px/reply_all.svg?react';
 import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
+import QuoteIcon from '@/material-icons/400-24px/format_quote.svg?react';
 import StarBorderIcon from '@/material-icons/400-24px/star.svg?react';
 import RepeatActiveIcon from '@/svg-icons/repeat_active.svg?react';
 import RepeatDisabledIcon from '@/svg-icons/repeat_disabled.svg?react';
@@ -25,6 +26,7 @@ import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'mastodon/
 import { WithRouterPropTypes } from 'mastodon/utils/react_router';
 
 import { IconButton } from '../../../components/icon_button';
+import StatusActionBar from '../../../components/status_action_bar';
 import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
 import { me } from '../../../initial_state';
 
@@ -39,6 +41,8 @@ const messages = defineMessages({
   reblog_private: { id: 'status.reblog_private', defaultMessage: 'Boost with original visibility' },
   cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Unboost' },
   cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
+  quote: { id: 'status.quote', defaultMessage: 'Quote' },
+  cannot_quote: { id: 'status.cannot_quote', defaultMessage: 'This post cannot be quoted' },
   favourite: { id: 'status.favourite', defaultMessage: 'Favorite' },
   bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' },
   more: { id: 'status.more', defaultMessage: 'More' },
@@ -77,6 +81,7 @@ class ActionBar extends PureComponent {
     relationship: ImmutablePropTypes.map,
     onReply: PropTypes.func.isRequired,
     onReblog: PropTypes.func.isRequired,
+    onQuote: PropTypes.func,
     onFavourite: PropTypes.func.isRequired,
     onBookmark: PropTypes.func.isRequired,
     onDelete: PropTypes.func.isRequired,
@@ -105,6 +110,10 @@ class ActionBar extends PureComponent {
     this.props.onReblog(this.props.status, e);
   };
 
+  handleQuoteClick = () => {
+    this.props.onQuote(this.props.status, this.props.history);
+  }
+
   handleFavouriteClick = () => {
     this.props.onFavourite(this.props.status);
   };
@@ -315,8 +324,8 @@ class ActionBar extends PureComponent {
         <div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} iconComponent={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? ReplyIcon : replyIconComponent}  onClick={this.handleReplyClick} /></div>
         <div className='detailed-status__button'><IconButton className={classNames({ reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' iconComponent={reblogIconComponent} onClick={this.handleReblogClick} /></div>
         <div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' iconComponent={status.get('favourited') ? StarIcon : StarBorderIcon} onClick={this.handleFavouriteClick} /></div>
+        <div className='detailed-status__button'><IconButton disabled={!publicStatus} title={StatusActionBar.quoteTitle(intl, messages, publicStatus)} icon='quote' iconComponent={QuoteIcon} onClick={this.handleQuoteClick} /></div>
         <div className='detailed-status__button'><IconButton className='bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' iconComponent={status.get('bookmarked') ? BookmarkIcon : BookmarkBorderIcon} onClick={this.handleBookmarkClick} /></div>
-
         <div className='detailed-status__action-bar-dropdown'>
           <DropdownMenuContainer icon='ellipsis-h' iconComponent={MoreHorizIcon} status={status} items={menu} direction='left' title={intl.formatMessage(messages.more)} />
         </div>

app/javascript/mastodon/features/status/components/card.jsx

@@ -62,6 +62,7 @@ export default class Card extends PureComponent {
     card: ImmutablePropTypes.map,
     onOpenMedia: PropTypes.func.isRequired,
     sensitive: PropTypes.bool,
+    quote: PropTypes.bool,
   };
 
   state = {
@@ -121,7 +122,7 @@ export default class Card extends PureComponent {
   }
 
   render () {
-    const { card } = this.props;
+    const { card, quote } = this.props;
     const { embedded, revealed } = this.state;
 
     if (card === null) {

app/javascript/mastodon/features/status/components/detailed_status.jsx

@@ -22,6 +22,7 @@ import { WithRouterPropTypes } from 'mastodon/utils/react_router';
 import { Avatar } from '../../../components/avatar';
 import { DisplayName } from '../../../components/display_name';
 import MediaGallery from '../../../components/media_gallery';
+import { quote } from '../../../components/status';
 import StatusContent from '../../../components/status_content';
 import Audio from '../../audio';
 import scheduleIdleTask from '../../ui/util/schedule_idle_task';
@@ -36,17 +37,21 @@ class DetailedStatus extends ImmutablePureComponent {
     onOpenMedia: PropTypes.func.isRequired,
     onOpenVideo: PropTypes.func.isRequired,
     onToggleHidden: PropTypes.func.isRequired,
+    onQuoteToggleHidden: PropTypes.func.isRequired,
     onTranslate: PropTypes.func.isRequired,
     measureHeight: PropTypes.bool,
     onHeightChange: PropTypes.func,
     domain: PropTypes.string.isRequired,
     compact: PropTypes.bool,
+    quoteMuted: PropTypes.bool,
     showMedia: PropTypes.bool,
+    showQuoteMedia: PropTypes.bool,
     pictureInPicture: ImmutablePropTypes.contains({
       inUse: PropTypes.bool,
       available: PropTypes.bool,
     }),
     onToggleMediaVisibility: PropTypes.func,
+    onQuoteToggleMediaVisibility: PropTypes.func,
     ...WithRouterPropTypes,
   };
 
@@ -71,6 +76,28 @@ class DetailedStatus extends ImmutablePureComponent {
     this.props.onToggleHidden(this.props.status);
   };
 
+  handleExpandedQuoteToggle = () => {
+    this.props.onQuoteToggleHidden(this.props.status);
+  }
+
+  handleQuoteClick = () => {
+    if (!this.props) {
+      return;
+    }
+
+    const { status } = this.props;
+    this.props.history.push(`/statuses/${status.getIn(['quote', 'id'])}`);
+  }
+  
+  handleQuoteUserClick = () =>{
+    if (!this.props) {
+      return;
+    }
+
+    const { status } = this.props;
+    this.location.href(`/@${status.getIn(['account', 'acct'])}`);
+  }
+
   _measureHeight (heightJustChanged) {
     if (this.props.measureHeight && this.node) {
       scheduleIdleTask(() => this.node && this.setState({ height: Math.ceil(this.node.scrollHeight) + 1 }));
@@ -134,13 +161,12 @@ class DetailedStatus extends ImmutablePureComponent {
   render () {
     const status = this._properStatus();
     const outerStyle = { boxSizing: 'border-box' };
-    const { compact, pictureInPicture } = this.props;
+    const { compact, pictureInPicture, quoteMuted  } = this.props;
 
     if (!status) {
       return null;
     }
 
-    let media           = '';
     let applicationLink = '';
     let reblogLink = '';
     const reblogIcon = 'retweet';
@@ -154,69 +180,82 @@ class DetailedStatus extends ImmutablePureComponent {
 
     const language = status.getIn(['translation', 'language']) || status.get('language');
 
-    if (pictureInPicture.get('inUse')) {
-      media = <PictureInPicturePlaceholder aspectRatio={this.getAttachmentAspectRatio()} />;
-    } else if (status.get('media_attachments').size > 0) {
-      if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
-        const attachment = status.getIn(['media_attachments', 0]);
-        const description = attachment.getIn(['translation', 'description']) || attachment.get('description');
+    const identity = (status, _0, _1, quote = false) => (
+      <a href={`/@${status.getIn(['account', 'acct'])}`} onClick={quote ? this.handleQuoteUserClick : this.handleAccountClick} data-acct={status.getIn(['account', 'acct'])} className='detailed-status__display-name'>
+        <div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={46} /></div>
+        <DisplayName account={status.get('account')} localDomain={this.props.domain} />
+      </a>
+    );
 
-        media = (
-          <Audio
-            src={attachment.get('url')}
-            alt={description}
-            lang={language}
-            duration={attachment.getIn(['meta', 'original', 'duration'], 0)}
-            poster={attachment.get('preview_url') || status.getIn(['account', 'avatar_static'])}
-            backgroundColor={attachment.getIn(['meta', 'colors', 'background'])}
-            foregroundColor={attachment.getIn(['meta', 'colors', 'foreground'])}
-            accentColor={attachment.getIn(['meta', 'colors', 'accent'])}
-            sensitive={status.get('sensitive')}
-            visible={this.props.showMedia}
-            blurhash={attachment.get('blurhash')}
-            height={150}
-            onToggleVisibility={this.props.onToggleMediaVisibility}
-          />
-        );
-      } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
-        const attachment = status.getIn(['media_attachments', 0]);
-        const description = attachment.getIn(['translation', 'description']) || attachment.get('description');
+    const media = (status, quote = false) => {
+      if (pictureInPicture.get('inUse')) {
+        return <PictureInPicturePlaceholder aspectRatio={this.getAttachmentAspectRatio()} />;
+      } else if (status.get('media_attachments').size > 0) {
+        if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
+          const attachment = status.getIn(['media_attachments', 0]);
+          const description = attachment.getIn(['translation', 'description']) || attachment.get('description');
 
-        media = (
-          <Video
-            preview={attachment.get('preview_url')}
-            frameRate={attachment.getIn(['meta', 'original', 'frame_rate'])}
-            aspectRatio={`${attachment.getIn(['meta', 'original', 'width'])} / ${attachment.getIn(['meta', 'original', 'height'])}`}
-            blurhash={attachment.get('blurhash')}
-            src={attachment.get('url')}
-            alt={description}
-            lang={language}
-            width={300}
-            height={150}
-            onOpenVideo={this.handleOpenVideo}
-            sensitive={status.get('sensitive')}
-            visible={this.props.showMedia}
-            onToggleVisibility={this.props.onToggleMediaVisibility}
-          />
-        );
-      } else {
-        media = (
-          <MediaGallery
-            standalone
-            sensitive={status.get('sensitive')}
-            media={status.get('media_attachments')}
-            lang={language}
-            height={300}
-            onOpenMedia={this.props.onOpenMedia}
-            visible={this.props.showMedia}
-            onToggleVisibility={this.props.onToggleMediaVisibility}
-          />
-        );
+          return (
+            <Audio
+              src={attachment.get('url')}
+              alt={description}
+              lang={language}
+              duration={attachment.getIn(['meta', 'original', 'duration'], 0)}
+              poster={attachment.get('preview_url') || status.getIn(['account', 'avatar_static'])}
+              backgroundColor={attachment.getIn(['meta', 'colors', 'background'])}
+              foregroundColor={attachment.getIn(['meta', 'colors', 'foreground'])}
+              accentColor={attachment.getIn(['meta', 'colors', 'accent'])}
+              sensitive={status.get('sensitive')}
+              visible={this.props.showMedia}
+              blurhash={attachment.get('blurhash')}
+              height={150}
+              onToggleVisibility={this.props.onToggleMediaVisibility}
+              quote={quote}
+            />
+          );
+        } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
+          const attachment = status.getIn(['media_attachments', 0]);
+          const description = attachment.getIn(['translation', 'description']) || attachment.get('description');
+
+          return (
+            <Video
+              preview={attachment.get('preview_url')}
+              frameRate={attachment.getIn(['meta', 'original', 'frame_rate'])}
+              aspectRatio={`${attachment.getIn(['meta', 'original', 'width'])} / ${attachment.getIn(['meta', 'original', 'height'])}`}
+              blurhash={attachment.get('blurhash')}
+              src={attachment.get('url')}
+              alt={description}
+              lang={language}
+              width={300}
+              height={150}
+              onOpenVideo={this.handleOpenVideo}
+              sensitive={status.get('sensitive')}
+              visible={this.props.showMedia}
+              onToggleVisibility={this.props.onToggleMediaVisibility}
+              quote={quote}
+            />
+          );
+        } else {
+          return (
+            <MediaGallery
+              standalone
+              sensitive={status.get('sensitive')}
+              media={status.get('media_attachments')}
+              lang={language}
+              height={300}
+              onOpenMedia={this.props.onOpenMedia}
+              visible={this.props.showMedia}
+              onToggleVisibility={this.props.onToggleMediaVisibility}
+              quote={quote}
+            />
+          );
+        }
+      } else if (status.get('spoiler_text').length === 0) {
+        return <Card sensitive={status.get('sensitive')} onOpenMedia={this.props.onOpenMedia} card={status.get('card', null)} quote={quote} />;
       }
-    } else if (status.get('spoiler_text').length === 0) {
-      media = <Card sensitive={status.get('sensitive')} onOpenMedia={this.props.onOpenMedia} card={status.get('card', null)} />;
-    }
 
+    }
+    
     if (status.get('application')) {
       applicationLink = <> · <a className='detailed-status__application' href={status.getIn(['application', 'website'])} target='_blank' rel='noopener noreferrer'>{status.getIn(['application', 'name'])}</a></>;
     }
@@ -305,7 +344,9 @@ class DetailedStatus extends ImmutablePureComponent {
             {...statusContentProps}
           />
 
-          {media}
+          {media(status, false)}
+
+          {quote(status, false, quoteMuted, this.handleQuoteClick, this.handleExpandedQuoteToggle, identity, media, this.props)}
 
           {expanded && hashtagBar}
 

app/javascript/mastodon/features/status/containers/detailed_status_container.js

@@ -27,6 +27,8 @@ import {
   deleteStatus,
   hideStatus,
   revealStatus,
+  hideQuote,
+  revealQuote,
 } from '../../../actions/statuses';
 import { boostModal, deleteModal } from '../../../initial_state';
 import { makeGetStatus, makeGetPictureInPicture } from '../../../selectors';
@@ -182,6 +184,14 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     }
   },
 
+  onQuoteToggleHidden (status) {
+    if (status.get('quote_hidden')) {
+      dispatch(revealQuote(status.get('id')));
+    } else {
+      dispatch(hideQuote(status.get('id')));
+    }
+  },
+
 });
 
 export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(DetailedStatus));

app/javascript/mastodon/features/status/index.jsx

@@ -30,6 +30,7 @@ import { initBlockModal } from '../../actions/blocks';
 import { initBoostModal } from '../../actions/boosts';
 import {
   replyCompose,
+  quoteCompose,
   mentionCompose,
   directCompose,
 } from '../../actions/compose';
@@ -60,6 +61,8 @@ import {
   revealStatus,
   translateStatus,
   undoStatusTranslation,
+  hideQuote,
+  revealQuote,
 } from '../../actions/statuses';
 import ColumnHeader from '../../components/column_header';
 import { textForScreenReader, defaultMediaVisibility } from '../../components/status';
@@ -84,6 +87,8 @@ const messages = defineMessages({
   detailedStatus: { id: 'status.detailed_status', defaultMessage: 'Detailed conversation view' },
   replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
   replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
+  quoteConfirm: { id: 'confirmations.quote.confirm', defaultMessage: 'Quote' },
+  quoteMessage: { id: 'confirmations.quote.message', defaultMessage: 'Quoting now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
   blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Block entire domain' },
 });
 
@@ -216,6 +221,7 @@ class Status extends ImmutablePureComponent {
   state = {
     fullscreen: false,
     showMedia: defaultMediaVisibility(this.props.status),
+    showQuoteMedia: defaultMediaVisibility(this.props.status ? this.props.status.get('quote', null) : null),
     loadedStatusId: undefined,
   };
 
@@ -235,7 +241,11 @@ class Status extends ImmutablePureComponent {
     }
 
     if (nextProps.status && nextProps.status.get('id') !== this.state.loadedStatusId) {
-      this.setState({ showMedia: defaultMediaVisibility(nextProps.status), loadedStatusId: nextProps.status.get('id') });
+      this.setState({
+        showMedia: defaultMediaVisibility(nextProps.status),
+        showQuoteMedia: defaultMediaVisibility(nextProps.status.get('quote', null)),
+        loadedStatusId: nextProps.status.get('id'),
+      });
     }
   }
 
@@ -243,6 +253,10 @@ class Status extends ImmutablePureComponent {
     this.setState({ showMedia: !this.state.showMedia });
   };
 
+  handleToggleQuoteMediaVisibility = () => {
+    this.setState({ showQuoteMedia: !this.state.showQuoteMedia });
+  }
+
   handleFavouriteClick = (status) => {
     const { dispatch } = this.props;
     const { signedIn } = this.context.identity;
@@ -302,6 +316,19 @@ class Status extends ImmutablePureComponent {
     }
   };
 
+  handleQuoteClick = (status) => {
+    let { askReplyConfirmation, dispatch, intl } = this.props;
+    if (askReplyConfirmation) {
+      dispatch(openModal('CONFIRM', {
+        message: intl.formatMessage(messages.quoteMessage),
+        confirm: intl.formatMessage(messages.quoteConfirm),
+        onConfirm: () => dispatch(quoteCompose(status, this.props.history)),
+      }));
+    } else {
+      dispatch(quoteCompose(status, this.props.history));
+    }
+  }
+
   handleModalReblog = (status, privacy) => {
     this.props.dispatch(reblog(status, privacy));
   };
@@ -417,6 +444,14 @@ class Status extends ImmutablePureComponent {
     }
   };
 
+  handleQuoteToggleHidden = (status) => {
+    if (status.get('quote_hidden')) {
+      this.props.dispatch(revealQuote(status.get('id')));
+    } else {
+      this.props.dispatch(hideQuote(status.get('id')));
+    }
+  }
+
   handleToggleAll = () => {
     const { status, ancestorsIds, descendantsIds } = this.props;
     const statusIds = [status.get('id')].concat(ancestorsIds.toJS(), descendantsIds.toJS());
@@ -707,9 +742,12 @@ class Status extends ImmutablePureComponent {
                   onOpenMedia={this.handleOpenMedia}
                   onToggleHidden={this.handleToggleHidden}
                   onTranslate={this.handleTranslate}
+                  onQuoteToggleHidden={this.handleQuoteToggleHidden}
                   domain={domain}
                   showMedia={this.state.showMedia}
+                  showQuoteMedia={this.state.showQuoteMedia}
                   onToggleMediaVisibility={this.handleToggleMediaVisibility}
+                  onToggleQuoteMediaVisibility={this.handleToggleQuoteMediaVisibility}
                   pictureInPicture={pictureInPicture}
                 />
 
@@ -719,6 +757,7 @@ class Status extends ImmutablePureComponent {
                   onReply={this.handleReplyClick}
                   onFavourite={this.handleFavouriteClick}
                   onReblog={this.handleReblogClick}
+                  onQuote={this.handleQuoteClick}
                   onBookmark={this.handleBookmarkClick}
                   onDelete={this.handleDeleteClick}
                   onEdit={this.handleEditClick}

app/javascript/mastodon/features/ui/components/columns_area.jsx

@@ -29,6 +29,13 @@ import ComposePanel from './compose_panel';
 import DrawerLoading from './drawer_loading';
 import NavigationPanel from './navigation_panel';
 
+import { place_tab_bar_at_bottom } from 'mastodon/initial_state';
+import { Link } from 'react-router-dom';
+import { Icon }  from 'mastodon/components/icon';
+import TabsBar from './tabs_bar';
+
+import { ReactComponent as EditIcon } from '@material-symbols/svg-600/outlined/edit.svg';
+
 const componentMap = {
   'COMPOSE': Compose,
   'HOME': HomeTimeline,
@@ -149,13 +156,40 @@ export default class ColumnsArea extends ImmutablePureComponent {
     const { renderComposePanel } = this.state;
 
     if (singleColumn) {
-      return (
-        <div className='columns-area__panels'>
-          <div className='columns-area__panels__pane columns-area__panels__pane--compositional'>
-            <div className='columns-area__panels__pane__inner'>
-              {renderComposePanel && <ComposePanel />}
+      if (place_tab_bar_at_bottom) {
+        return (
+          <div className='columns-area__panels tab-ber-bottom'>
+            <div className='columns-area__panels__pane columns-area__panels__pane--compositional'>
+              <div className='columns-area__panels__pane__inner'>
+                {renderComposePanel && <ComposePanel />}
+              </div>
+            </div>
+
+            <div className='columns-area__panels__main timeline'>
+              <div className='tabs-bar__wrapper'><TabsBarPortal /></div>
+              <div className='columns-area columns-area--mobile'>{children}</div>
+            </div>
+
+            <div className='columns-area__panels__main navber'>
+              {location.pathname !== '/publish' && <Link to='/publish' icon='Edit' className='button bottom_right'><EditIcon fill="white"/></Link>}
+              <TabsBar key='tabs' />
+            </div>
+
+            <div className='columns-area__panels__pane columns-area__panels__pane--start columns-area__panels__pane--navigational columns-area__panels__pane-tab-ber'>
+              <div className='columns-area__panels__pane__inner'>
+                <NavigationPanel />
+              </div>
             </div>
           </div>
+        ); 
+      } else {
+        return (
+          <div className='columns-area__panels'>
+            <div className='columns-area__panels__pane columns-area__panels__pane--compositional'>
+              <div className='columns-area__panels__pane__inner'>
+                {renderComposePanel && <ComposePanel />}
+              </div>
+            </div>
 
           <div className='columns-area__panels__main'>
             <div className='tabs-bar__wrapper'><TabsBarPortal /></div>
@@ -168,7 +202,8 @@ export default class ColumnsArea extends ImmutablePureComponent {
             </div>
           </div>
         </div>
-      );
+        );
+      }
     }
 
     return (

app/javascript/mastodon/features/ui/components/tabs_bar.jsx

@@ -0,0 +1,59 @@
+import PropTypes from 'prop-types';
+import { Component } from 'react';
+import { defineMessages, injectIntl } from 'react-intl';
+import ColumnLink from './column_link';
+import NotificationsCounterIcon from './notifications_counter_icon';
+
+import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg';
+import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg';
+import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg';
+import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg';
+
+const messages = defineMessages({
+  home: { id: 'tabs_bar.home', defaultMessage: 'Home' },
+  notifications: { id: 'tabs_bar.notifications', defaultMessage: 'Notifications' },
+  explore: { id: 'explore.title', defaultMessage: 'Explore' },
+  firehose: { id: 'column.firehose', defaultMessage: 'Live feeds' },
+  direct: { id: 'navigation_bar.direct', defaultMessage: 'Private mentions' },
+  favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favourites' },
+  bookmarks: { id: 'navigation_bar.bookmarks', defaultMessage: 'Bookmarks' },
+  lists: { id: 'navigation_bar.lists', defaultMessage: 'Lists' },
+  preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
+  followsAndFollowers: { id: 'navigation_bar.follows_and_followers', defaultMessage: 'Follows and followers' },
+  about: { id: 'navigation_bar.about', defaultMessage: 'About' },
+  search: { id: 'navigation_bar.search', defaultMessage: 'Search' },
+  gettingStarted: { id: 'getting_started.heading', defaultMessage: 'Getting Started' },
+});
+
+class TabsBar extends Component {
+
+  static contextTypes = {
+    router: PropTypes.object.isRequired,
+    identity: PropTypes.object.isRequired,
+  };
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+  };
+
+  isFirehoseActive = (match, location) => {
+    return match || location.pathname.startsWith('/public');
+  };
+
+  render () {
+    const { intl } = this.props;
+
+    return (
+      <div className='tabs-bar__wrapper'>
+        <ColumnLink transparent to='/home' icon='home' iconComponent={HomeIcon} text={intl.formatMessage(messages.home)} />
+        <ColumnLink transparent to='/notifications' icon={<NotificationsCounterIcon className='column-link__icon' />} text={intl.formatMessage(messages.notifications)} />
+        <ColumnLink transparent to='/public/local'  iconComponent={PublicIcon} isActive={this.isFirehoseActive} icon='globe' text={intl.formatMessage(messages.firehose)} />
+        <ColumnLink transparent to='/search' icon='search' iconComponent={SearchIcon} text={intl.formatMessage(messages.search)} />
+        <ColumnLink transparent to='/getting-started' icon='bars' iconComponent={MoreHorizIcon} text={intl.formatMessage(messages.gettingStarted)} />
+      </div>
+    );
+  }
+
+}
+
+export default injectIntl(TabsBar);

app/javascript/mastodon/features/video/index.jsx

@@ -133,6 +133,7 @@ class Video extends PureComponent {
     autoPlay: PropTypes.bool,
     volume: PropTypes.number,
     muted: PropTypes.bool,
+    quote: PropTypes.bool,
     componentIndex: PropTypes.number,
     autoFocus: PropTypes.bool,
   };

app/javascript/mastodon/initial_state.js

@@ -42,6 +42,7 @@
  * @property {boolean} use_blurhash
  * @property {boolean=} use_pending_items
  * @property {string} version
+ * @property {boolean} place_tab_bar_at_bottom
  * @property {string} sso_redirect
  */
 
@@ -107,6 +108,7 @@ export const languages = initialState?.languages;
 export const criticalUpdatesPending = initialState?.critical_updates_pending;
 // @ts-expect-error
 export const statusPageUrl = getMeta('status_page_url');
+export const place_tab_bar_at_bottom = getMeta('place_tab_bar_at_bottom');
 export const sso_redirect = getMeta('sso_redirect');
 
 export default initialState;

app/javascript/mastodon/locales/en.json

@@ -180,6 +180,8 @@
   "confirmations.mute.confirm": "Mute",
   "confirmations.mute.explanation": "This will hide posts from them and posts mentioning them, but it will still allow them to see your posts and follow you.",
   "confirmations.mute.message": "Are you sure you want to mute {name}?",
+  "confirmations.quote.confirm": "Quote",
+  "confirmations.quote.message": "Quoting now will overwrite the message you are currently composing. Are you sure you want to proceed?",
   "confirmations.redraft.confirm": "Delete & redraft",
   "confirmations.redraft.message": "Are you sure you want to delete this post and re-draft it? Favorites and boosts will be lost, and replies to the original post will be orphaned.",
   "confirmations.reply.confirm": "Reply",
@@ -638,6 +640,7 @@
   "status.block": "Block @{name}",
   "status.bookmark": "Bookmark",
   "status.cancel_reblog_private": "Unboost",
+  "status.cannot_quote": "This post cannot be quoted",
   "status.cannot_reblog": "This post cannot be boosted",
   "status.copy": "Copy link to post",
   "status.delete": "Delete",
@@ -662,9 +665,11 @@
   "status.more": "More",
   "status.mute": "Mute @{name}",
   "status.mute_conversation": "Mute conversation",
+  "status.muted_quote": "Muted quote",
   "status.open": "Expand this post",
   "status.pin": "Pin on profile",
   "status.pinned": "Pinned post",
+  "status.quote": "Quote",
   "status.read_more": "Read more",
   "status.reblog": "Boost",
   "status.reblog_private": "Boost with original visibility",
@@ -688,6 +693,7 @@
   "status.translate": "Translate",
   "status.translated_from_with": "Translated from {lang} using {provider}",
   "status.uncached_media_warning": "Preview not available",
+  "status.unlisted_quote": "Unlisted quote",
   "status.unmute_conversation": "Unmute conversation",
   "status.unpin": "Unpin from profile",
   "subscribed_languages.lead": "Only posts in selected languages will appear on your home and list timelines after the change. Select none to receive posts in all languages.",

app/javascript/mastodon/locales/ja.json

@@ -23,13 +23,13 @@
   "account.cancel_follow_request": "フォローリクエストの取り消し",
   "account.copy": "プロフィールへのリンクをコピー",
   "account.direct": "@{name}さんに非公開でメンション",
-  "account.disable_notifications": "@{name}さんの投稿時の通知を停止",
+  "account.disable_notifications": "@{name}さんのトゥート時の通知を停止",
   "account.domain_blocked": "ドメインブロック中",
   "account.edit_profile": "プロフィール編集",
-  "account.enable_notifications": "@{name}さんの投稿時に通知",
+  "account.enable_notifications": "@{name}さんのトゥート時に通知",
   "account.endorse": "プロフィールで紹介する",
-  "account.featured_tags.last_status_at": "最終投稿 {date}",
-  "account.featured_tags.last_status_never": "投稿がありません",
+  "account.featured_tags.last_status_at": "最終トゥート {date}",
+  "account.featured_tags.last_status_never": "トゥートがありません",
   "account.featured_tags.title": "{name}の注目ハッシュタグ",
   "account.follow": "フォロー",
   "account.follow_back": "フォローバック",
@@ -56,14 +56,14 @@
   "account.mutual": "相互フォロー中",
   "account.no_bio": "説明が提供されていません。",
   "account.open_original_page": "元のページを開く",
-  "account.posts": "投稿",
-  "account.posts_with_replies": "投稿と返信",
+  "account.posts": "トゥート",
+  "account.posts_with_replies": "トゥートと返信",
   "account.report": "@{name}さんを通報",
   "account.requested": "フォロー承認待ちです。クリックしてキャンセル",
   "account.requested_follow": "{name}さんがあなたにフォローリクエストしました",
   "account.share": "@{name}さんのプロフィールを共有する",
   "account.show_reblogs": "@{name}さんからのブーストを表示",
-  "account.statuses_counter": "{counter} 投稿",
+  "account.statuses_counter": "{counter} トゥート",
   "account.unblock": "@{name}さんのブロックを解除",
   "account.unblock_domain": "{domain}のブロックを解除",
   "account.unblock_short": "ブロック解除",
@@ -121,7 +121,7 @@
   "column.lists": "リスト",
   "column.mutes": "ミュートしたユーザー",
   "column.notifications": "通知",
-  "column.pins": "固定された投稿",
+  "column.pins": "固定されたトゥート",
   "column.public": "連合タイムライン",
   "column_back_button.label": "戻る",
   "column_header.hide_settings": "設定を隠す",
@@ -136,21 +136,31 @@
   "community.column_settings.remote_only": "リモートのみ表示",
   "compose.language.change": "言語を変更",
   "compose.language.search": "言語を検索...",
-  "compose.published.body": "投稿されました！",
+  "compose.published.body": "トゥートされました！",
   "compose.published.open": "開く",
   "compose.saved.body": "変更を保存しました。",
   "compose_form.direct_message_warning_learn_more": "もっと詳しく",
-  "compose_form.encryption_warning": "Mastodonの投稿はエンドツーエンド暗号化に対応していません。安全に送受信されるべき情報をMastodonで共有しないでください。",
-  "compose_form.hashtag_warning": "この投稿は公開設定ではないのでハッシュタグの一覧に表示されません。公開投稿だけがハッシュタグで検索できます。",
-  "compose_form.lock_disclaimer": "あなたのアカウントは{locked}になっていません。誰でもあなたをフォローすることができ、フォロワー限定の投稿を見ることができます。",
+  "compose_form.encryption_warning": "Mastodonのトゥートはエンドツーエンド暗号化に対応していません。安全に送受信されるべき情報をMastodonで共有しないでください。",
+  "compose_form.hashtag_warning": "このトゥートは公開設定ではないのでハッシュタグの一覧に表示されません。公開トゥートだけがハッシュタグで検索できます。",
+  "compose_form.lock_disclaimer": "あなたのアカウントは{locked}になっていません。誰でもあなたをフォローすることができ、フォロワー限定のトゥートを見ることができます。",
   "compose_form.lock_disclaimer.lock": "承認制",
   "compose_form.placeholder": "今なにしてる？",
   "compose_form.poll.duration": "アンケート期間",
   "compose_form.poll.switch_to_multiple": "複数選択に変更",
   "compose_form.poll.switch_to_single": "単一選択に変更",
-  "compose_form.publish_form": "投稿",
+  "compose_form.publish": "トゥート",
+  "compose_form.publish_form": "トゥート",
+  "compose_form.publish_loud": "{publish}！",
+  "compose_form.save_changes": "変更を保存",
+  "compose_form.sensitive.hide": "メディアを閲覧注意にする",
+  "compose_form.sensitive.marked": "メディアに閲覧注意が設定されています",
+  "compose_form.sensitive.unmarked": "メディアに閲覧注意が設定されていません",
   "compose_form.spoiler.marked": "本文は警告の後ろに隠されます",
   "compose_form.spoiler.unmarked": "本文は隠されていません",
+  "compose_form.spoiler_placeholder": "ここに警告を書いてください",
+  "compose_form.utilBtns_goji": "誤字盛！",
+  "compose_form.utilBtns_harukin": "はるきん焼却",
+  "compose_form.utilBtns_risa": "りさ姉",
   "confirmation_modal.cancel": "キャンセル",
   "confirmations.block.block_and_report": "ブロックし通報",
   "confirmations.block.confirm": "ブロック",
@@ -170,10 +180,12 @@
   "confirmations.logout.confirm": "ログアウト",
   "confirmations.logout.message": "本当にログアウトしますか？",
   "confirmations.mute.confirm": "ミュート",
-  "confirmations.mute.explanation": "これにより相手の投稿と返信は見えなくなりますが、相手はあなたをフォローし続け投稿を見ることができます。",
+  "confirmations.mute.explanation": "これにより相手のトゥートと返信は見えなくなりますが、相手はあなたをフォローし続けトゥートを見ることができます。",
   "confirmations.mute.message": "本当に{name}さんをミュートしますか？",
+  "confirmations.quote.confirm": "引用",
+  "confirmations.quote.message": "今引用すると現在作成中のメッセージが上書きされます。本当に実行しますか？",
   "confirmations.redraft.confirm": "削除して下書きに戻す",
-  "confirmations.redraft.message": "投稿を削除して下書きに戻します。この投稿へのお気に入り登録やブーストは失われ、返信は孤立することになります。よろしいですか？",
+  "confirmations.redraft.message": "トゥートを削除して下書きに戻します。このトゥートへのお気に入り登録やブーストは失われ、返信は孤立することになります。よろしいですか？",
   "confirmations.reply.confirm": "返信",
   "confirmations.reply.message": "今返信すると現在作成中のメッセージが上書きされます。本当に実行しますか？",
   "confirmations.unfollow.confirm": "フォロー解除",
@@ -191,12 +203,12 @@
   "directory.recently_active": "最近の活動順",
   "disabled_account_banner.account_settings": "アカウント設定",
   "disabled_account_banner.text": "あなたのアカウント『{disabledAccount}』は現在無効になっています。",
-  "dismissable_banner.community_timeline": "これらは{domain}がホストしている人たちの最新の公開投稿です。",
+  "dismissable_banner.community_timeline": "これらは{domain}がホストしている人たちの最新の公開トゥートです。",
   "dismissable_banner.dismiss": "閉じる",
   "dismissable_banner.explore_links": "ネットワーク上で話題になっているニュースです。たくさんのユーザーにシェアされた記事ほど上位に表示されます。",
-  "dismissable_banner.explore_statuses": "ネットワーク上で注目を集めている投稿です。ブーストやお気に入り登録の多い新しい投稿が上位に表示されます。",
+  "dismissable_banner.explore_statuses": "ネットワーク上で注目を集めているトゥートです。ブーストやお気に入り登録の多い新しいトゥートが上位に表示されます。",
   "dismissable_banner.explore_tags": "ネットワーク上でトレンドになっているハッシュタグです。たくさんのユーザーに使われたタグほど上位に表示されます。",
-  "dismissable_banner.public_timeline": "{domain}のユーザーがリモートフォローしているアカウントからの公開投稿のタイムラインです。",
+  "dismissable_banner.public_timeline": "{domain}のユーザーがリモートフォローしているアカウントからの公開トゥートのタイムラインです。",
   "embed.instructions": "下記のコードをコピーしてウェブサイトに埋め込みます。",
   "embed.preview": "表示例:",
   "emoji_button.activity": "活動",
@@ -216,7 +228,7 @@
   "emoji_button.travel": "旅行と場所",
   "empty_column.account_hides_collections": "このユーザーはこの情報を開示しないことにしています。",
   "empty_column.account_suspended": "アカウントは停止されています",
-  "empty_column.account_timeline": "投稿がありません！",
+  "empty_column.account_timeline": "トゥートがありません！",
   "empty_column.account_unavailable": "プロフィールは利用できません",
   "empty_column.blocks": "まだ誰もブロックしていません。",
   "empty_column.bookmarked_statuses": "まだ何もブックマーク登録していません。ブックマーク登録するとここに表示されます。",
@@ -224,17 +236,17 @@
   "empty_column.direct": "非公開の返信はまだありません。非公開でやりとりをするとここに表示されます。",
   "empty_column.domain_blocks": "ブロックしているドメインはありません。",
   "empty_column.explore_statuses": "まだ何もありません。後で確認してください。",
-  "empty_column.favourited_statuses": "お気に入りの投稿はまだありません。お気に入りに登録すると、ここに表示されます。",
-  "empty_column.favourites": "まだ誰もこの投稿をお気に入りに登録していません。お気に入りに登録されると、ここに表示されます。",
+  "empty_column.favourited_statuses": "お気に入りのトゥートはまだありません。お気に入りに登録すると、ここに表示されます。",
+  "empty_column.favourites": "まだ誰もこのトゥートをお気に入りに登録していません。お気に入りに登録されると、ここに表示されます。",
   "empty_column.follow_requests": "まだフォローリクエストを受けていません。フォローリクエストを受けるとここに表示されます。",
   "empty_column.followed_tags": "まだハッシュタグをフォローしていません。フォローするとここに表示されます。",
   "empty_column.hashtag": "このハッシュタグはまだ使われていません。",
   "empty_column.home": "ホームタイムラインはまだ空っぽです。だれかをフォローして埋めてみましょう。",
-  "empty_column.list": "このリストにはまだなにもありません。このリストのメンバーが新しい投稿をするとここに表示されます。",
+  "empty_column.list": "このリストにはまだなにもありません。このリストのメンバーが新しいトゥートをするとここに表示されます。",
   "empty_column.lists": "まだリストがありません。リストを作るとここに表示されます。",
   "empty_column.mutes": "まだ誰もミュートしていません。",
   "empty_column.notifications": "まだ通知がありません。他の人とふれ合って会話を始めましょう。",
-  "empty_column.public": "ここにはまだ何もありません！ 公開で何かを投稿したり、他のサーバーのユーザーをフォローしたりしていっぱいにしましょう",
+  "empty_column.public": "ここにはまだ何もありません！ 公開で何かをトゥートしたり、他のサーバーのユーザーをフォローしたりしていっぱいにしましょう",
   "error.unexpected_crash.explanation": "不具合かブラウザの互換性問題のため、このページを正しく表示できませんでした。",
   "error.unexpected_crash.explanation_addons": "このページは正しく表示できませんでした。このエラーはブラウザのアドオンや自動翻訳ツールによって引き起こされることがあります。",
   "error.unexpected_crash.next_steps": "ページの再読み込みをお試しください。それでも解決しない場合、別のブラウザかアプリを使えば使用できることがあります。",
@@ -245,24 +257,24 @@
   "explore.suggested_follows": "ユーザー",
   "explore.title": "探索する",
   "explore.trending_links": "ニュース",
-  "explore.trending_statuses": "投稿",
+  "explore.trending_statuses": "トゥート",
   "explore.trending_tags": "ハッシュタグ",
-  "filter_modal.added.context_mismatch_explanation": "このフィルターカテゴリーはあなたがアクセスした投稿のコンテキストには適用されません。この投稿のコンテキストでもフィルターを適用するにはフィルターを編集する必要があります。",
+  "filter_modal.added.context_mismatch_explanation": "このフィルターカテゴリーはあなたがアクセスしたトゥートのコンテキストには適用されません。このトゥートのコンテキストでもフィルターを適用するにはフィルターを編集する必要があります。",
   "filter_modal.added.context_mismatch_title": "コンテキストが一致しません！",
   "filter_modal.added.expired_explanation": "このフィルターカテゴリーは有効期限が切れています。適用するには有効期限を更新してください。",
   "filter_modal.added.expired_title": "フィルターの有効期限が切れています！",
   "filter_modal.added.review_and_configure": "このフィルターカテゴリーを確認して設定するには、{settings_link}に移動します。",
   "filter_modal.added.review_and_configure_title": "フィルター設定",
   "filter_modal.added.settings_link": "設定",
-  "filter_modal.added.short_explanation": "この投稿はフィルターカテゴリー『{title}』に追加されました。",
+  "filter_modal.added.short_explanation": "このトゥートはフィルターカテゴリー『{title}』に追加されました。",
   "filter_modal.added.title": "フィルターを追加しました!",
   "filter_modal.select_filter.context_mismatch": "このコンテキストには当てはまりません",
   "filter_modal.select_filter.expired": "期限切れ",
   "filter_modal.select_filter.prompt_new": "新しいカテゴリー: {name}",
   "filter_modal.select_filter.search": "検索または新規作成",
   "filter_modal.select_filter.subtitle": "既存のカテゴリーを使用するか新規作成します",
-  "filter_modal.select_filter.title": "この投稿をフィルターする",
-  "filter_modal.title.status": "投稿をフィルターする",
+  "filter_modal.select_filter.title": "このトゥートをフィルターする",
+  "filter_modal.title.status": "トゥートをフィルターする",
   "firehose.all": "すべて",
   "firehose.local": "このサーバー",
   "firehose.remote": "ほかのサーバー",
@@ -289,7 +301,7 @@
   "hashtag.column_settings.tag_mode.any": "いずれかを含む",
   "hashtag.column_settings.tag_mode.none": "これらを除く",
   "hashtag.column_settings.tag_toggle": "このカラムに追加のタグを含める",
-  "hashtag.counter_by_accounts": "{count, plural, other {{counter}人投稿}}",
+  "hashtag.counter_by_accounts": "{count, plural, other {{counter}人トゥート}}",
   "hashtag.counter_by_uses": "{count, plural, other {{counter}件}}",
   "hashtag.counter_by_uses_today": "今日{count, plural, other {{counter}件}}",
   "hashtag.follow": "ハッシュタグをフォローする",
@@ -300,17 +312,17 @@
   "home.column_settings.basic": "基本設定",
   "home.column_settings.show_reblogs": "ブースト表示",
   "home.column_settings.show_replies": "返信表示",
-  "home.explore_prompt.body": "ユーザーやハッシュタグをフォローすると、この「ホーム」タイムラインに投稿やブーストが流れるようになります。タイムラインをもう少しにぎやかにしてみませんか？",
+  "home.explore_prompt.body": "ユーザーやハッシュタグをフォローすると、この「ホーム」タイムラインにトゥートやブーストが流れるようになります。タイムラインをもう少しにぎやかにしてみませんか？",
   "home.explore_prompt.title": "Mastodonのタイムラインへようこそ。",
   "home.hide_announcements": "お知らせを隠す",
   "home.pending_critical_update.body": "速やかにMastodonサーバーをアップデートしてください。",
   "home.pending_critical_update.link": "詳細",
   "home.pending_critical_update.title": "緊急のセキュリティアップデートがあります",
   "home.show_announcements": "お知らせを表示",
-  "interaction_modal.description.favourite": "Mastodonのアカウントがあれば投稿をお気に入り登録して投稿者に気持ちを伝えたり、あとで見返すことができます。",
-  "interaction_modal.description.follow": "Mastodonのアカウントで{name}さんをフォローしてホームフィードで投稿を受け取れます。",
-  "interaction_modal.description.reblog": "Mastodonのアカウントでこの投稿をブーストして自分のフォロワーに共有できます。",
-  "interaction_modal.description.reply": "Mastodonのアカウントでこの投稿に反応できます。",
+  "interaction_modal.description.favourite": "Mastodonのアカウントがあればトゥートをお気に入り登録してトゥート者に気持ちを伝えたり、あとで見返すことができます。",
+  "interaction_modal.description.follow": "Mastodonのアカウントで{name}さんをフォローしてホームフィードでトゥートを受け取れます。",
+  "interaction_modal.description.reblog": "Mastodonのアカウントでこのトゥートをブーストして自分のフォロワーに共有できます。",
+  "interaction_modal.description.reply": "Mastodonのアカウントでこのトゥートに反応できます。",
   "interaction_modal.login.action": "サーバーに移動",
   "interaction_modal.login.prompt": "登録したサーバーのドメイン (例: mastodon.social)",
   "interaction_modal.no_account_yet": "Mastodonにアカウントがない場合は",
@@ -318,10 +330,10 @@
   "interaction_modal.on_this_server": "このサーバー",
   "interaction_modal.sign_in": "このサーバーにアカウントがなくても、ほかのサーバーや互換性のあるプラットフォームのアカウントを使用できます。",
   "interaction_modal.sign_in_hint": "ワンポイント: ここでは自分のアカウントのドメインを入力します。うまくいかない場合はドメインまで含めた完全なユーザー名を入力してみてください (例: @Mastodon@mastodon.social)。ドメインやユーザー名は登録完了時のメールに記載されています。",
-  "interaction_modal.title.favourite": "{name}さんの投稿をお気に入り登録",
+  "interaction_modal.title.favourite": "{name}さんのトゥートをお気に入り登録",
   "interaction_modal.title.follow": "{name}さんをフォロー",
-  "interaction_modal.title.reblog": "{name}さんの投稿をブースト",
-  "interaction_modal.title.reply": "{name}さんの投稿にリプライ",
+  "interaction_modal.title.reblog": "{name}さんのトゥートをブースト",
+  "interaction_modal.title.reply": "{name}さんのトゥートにリプライ",
   "intervals.full.days": "{number}日",
   "intervals.full.hours": "{number}時間",
   "intervals.full.minutes": "{number}分",
@@ -329,12 +341,12 @@
   "keyboard_shortcuts.blocked": "ブロックしたユーザーのリストを開く",
   "keyboard_shortcuts.boost": "ブースト",
   "keyboard_shortcuts.column": "左からn番目のカラムの最新に移動",
-  "keyboard_shortcuts.compose": "投稿の入力欄に移動",
+  "keyboard_shortcuts.compose": "トゥートの入力欄に移動",
   "keyboard_shortcuts.description": "説明",
   "keyboard_shortcuts.direct": "非公開の返信のカラムを開く",
   "keyboard_shortcuts.down": "カラム内一つ下に移動",
-  "keyboard_shortcuts.enter": "投稿の詳細を表示",
-  "keyboard_shortcuts.favourite": "お気に入りの投稿",
+  "keyboard_shortcuts.enter": "トゥートの詳細を表示",
+  "keyboard_shortcuts.favourite": "お気に入りのトゥート",
   "keyboard_shortcuts.favourites": "お気に入りリストを開く",
   "keyboard_shortcuts.federated": "連合タイムラインを開く",
   "keyboard_shortcuts.heading": "キーボードショートカット",
@@ -347,7 +359,7 @@
   "keyboard_shortcuts.my_profile": "自分のプロフィールを開く",
   "keyboard_shortcuts.notifications": "通知カラムを開く",
   "keyboard_shortcuts.open_media": "メディアを開く",
-  "keyboard_shortcuts.pinned": "固定した投稿のリストを開く",
+  "keyboard_shortcuts.pinned": "固定したトゥートのリストを開く",
   "keyboard_shortcuts.profile": "プロフィールを開く",
   "keyboard_shortcuts.reply": "返信",
   "keyboard_shortcuts.requests": "フォローリクエストのリストを開く",
@@ -356,8 +368,8 @@
   "keyboard_shortcuts.start": "\"スタート\" カラムを開く",
   "keyboard_shortcuts.toggle_hidden": "CWで隠れた文を見る/隠す",
   "keyboard_shortcuts.toggle_sensitivity": "非表示のメディアを見る/隠す",
-  "keyboard_shortcuts.toot": "新規投稿",
-  "keyboard_shortcuts.unfocus": "投稿の入力欄・検索欄から離れる",
+  "keyboard_shortcuts.toot": "新規トゥート",
+  "keyboard_shortcuts.unfocus": "トゥートの入力欄・検索欄から離れる",
   "keyboard_shortcuts.up": "カラム内一つ上に移動",
   "lightbox.close": "閉じる",
   "lightbox.compress": "画像ビューボックスを閉じる",
@@ -372,7 +384,7 @@
   "lists.delete": "リストを削除",
   "lists.edit": "リストを編集",
   "lists.edit.submit": "タイトルを変更",
-  "lists.exclusive": "ホームタイムラインからこれらの投稿を非表示にする",
+  "lists.exclusive": "ホームタイムラインからこれらのトゥートを非表示にする",
   "lists.new.create": "リストを作成",
   "lists.new.title_placeholder": "新規リスト名",
   "lists.replies_policy.followed": "フォロー中のユーザー全員",
@@ -393,7 +405,7 @@
   "navigation_bar.blocks": "ブロックしたユーザー",
   "navigation_bar.bookmarks": "ブックマーク",
   "navigation_bar.community_timeline": "ローカルタイムライン",
-  "navigation_bar.compose": "投稿の新規作成",
+  "navigation_bar.compose": "トゥートの新規作成",
   "navigation_bar.direct": "非公開の返信",
   "navigation_bar.discover": "見つける",
   "navigation_bar.domain_blocks": "ブロックしたドメイン",
@@ -408,7 +420,7 @@
   "navigation_bar.mutes": "ミュートしたユーザー",
   "navigation_bar.opened_in_classic_interface": "投稿やプロフィールを直接開いた場合は一時的に標準UIで表示されます。",
   "navigation_bar.personal": "個人用",
-  "navigation_bar.pins": "固定した投稿",
+  "navigation_bar.pins": "固定したトゥート",
   "navigation_bar.preferences": "ユーザー設定",
   "navigation_bar.public_timeline": "連合タイムライン",
   "navigation_bar.search": "検索",
@@ -416,15 +428,15 @@
   "not_signed_in_indicator.not_signed_in": "この機能を使うにはログインする必要があります。",
   "notification.admin.report": "{name}さんが{target}さんを通報しました",
   "notification.admin.sign_up": "{name}さんがサインアップしました",
-  "notification.favourite": "{name}さんがお気に入りしました",
+  "notification.favourite": "{name}さんがあなたのトゥートに╰( ^o^)╮-=ﾆ=一＝三★しました",
   "notification.follow": "{name}さんにフォローされました",
   "notification.follow_request": "{name}さんがあなたにフォローリクエストしました",
   "notification.mention": "{name}さんがあなたに返信しました",
   "notification.own_poll": "アンケートが終了しました",
   "notification.poll": "アンケートが終了しました",
-  "notification.reblog": "{name}さんがあなたの投稿をブーストしました",
-  "notification.status": "{name}さんが投稿しました",
-  "notification.update": "{name}さんが投稿を編集しました",
+  "notification.reblog": "{name}さんがあなたのトゥートをブーストしました",
+  "notification.status": "{name}さんがトゥートしました",
+  "notification.update": "{name}さんがトゥートを編集しました",
   "notifications.clear": "通知を消去",
   "notifications.clear_confirmation": "本当に通知を消去しますか？",
   "notifications.column_settings.admin.report": "新しい通報:",
@@ -442,7 +454,7 @@
   "notifications.column_settings.reblog": "ブースト:",
   "notifications.column_settings.show": "カラムに表示",
   "notifications.column_settings.sound": "通知音を再生",
-  "notifications.column_settings.status": "新しい投稿:",
+  "notifications.column_settings.status": "新しいトゥート:",
   "notifications.column_settings.unread_notifications.category": "未読の通知:",
   "notifications.column_settings.unread_notifications.highlight": "未読の通知を強調表示",
   "notifications.column_settings.update": "編集:",
@@ -491,7 +503,7 @@
   "onboarding.steps.follow_people.body": "ユーザーをフォローしてみましょう。これがMastodonを楽しむ基本です。",
   "onboarding.steps.follow_people.title": "ホームタイムラインを埋める",
   "onboarding.steps.publish_status.body": "試しになにか書いてみましょう。写真、ビデオ、アンケートなど、なんでも大丈夫です {emoji}",
-  "onboarding.steps.publish_status.title": "はじめての投稿",
+  "onboarding.steps.publish_status.title": "はじめてのトゥート",
   "onboarding.steps.setup_profile.body": "ほかのユーザーが親しみやすいように、プロフィールを整えましょう。",
   "onboarding.steps.setup_profile.title": "プロフィールを完成させる",
   "onboarding.steps.share_profile.body": "Mastodonのアカウントをほかの人に紹介しましょう。",
@@ -534,7 +546,7 @@
   "relative_time.today": "今日",
   "reply_indicator.cancel": "キャンセル",
   "report.block": "ブロック",
-  "report.block_explanation": "相手の投稿が表示されなくなります。相手はあなたの投稿を見ることやフォローすることができません。相手はブロックされていることがわかります。",
+  "report.block_explanation": "相手のトゥートが表示されなくなります。相手はあなたのトゥートを見ることやフォローすることができません。相手はブロックされていることがわかります。",
   "report.categories.legal": "法令違反",
   "report.categories.other": "その他",
   "report.categories.spam": "スパム",
@@ -542,13 +554,13 @@
   "report.category.subtitle": "近いものを選択してください",
   "report.category.title": "この{type}について教えてください",
   "report.category.title_account": "プロフィール",
-  "report.category.title_status": "投稿",
+  "report.category.title_status": "トゥート",
   "report.close": "完了",
   "report.comment.title": "その他に私たちに伝えておくべき事はありますか？",
   "report.forward": "{target}に転送する",
   "report.forward_hint": "このアカウントは別のサーバーに所属しています。通報内容を匿名で転送しますか？",
   "report.mute": "ミュート",
-  "report.mute_explanation": "相手の投稿は表示されなくなります。相手は引き続きあなたをフォローして、あなたの投稿を表示することができますが、ミュートされていることはわかりません。",
+  "report.mute_explanation": "相手のトゥートは表示されなくなります。相手は引き続きあなたをフォローして、あなたのトゥートを表示することができますが、ミュートされていることはわかりません。",
   "report.next": "次へ",
   "report.placeholder": "追加コメント",
   "report.reasons.dislike": "興味がありません",
@@ -564,7 +576,7 @@
   "report.rules.subtitle": "当てはまるものをすべて選んでください:",
   "report.rules.title": "どのルールに違反していますか？",
   "report.statuses.subtitle": "当てはまるものをすべて選んでください:",
-  "report.statuses.title": "この通報を裏付けるような投稿はありますか？",
+  "report.statuses.title": "この通報を裏付けるようなトゥートはありますか？",
   "report.submit": "通報する",
   "report.target": "{target}さんを通報する",
   "report.thanks.take_action": "次のような方法はいかがでしょうか？",
@@ -572,8 +584,8 @@
   "report.thanks.title": "見えないようにしたいですか？",
   "report.thanks.title_actionable": "ご報告ありがとうございます、追って確認します。",
   "report.unfollow": "@{name}さんのフォローを解除",
-  "report.unfollow_explanation": "このアカウントをフォローしています。ホームフィードに彼らの投稿を表示しないようにするには、彼らのフォローを外してください。",
-  "report_notification.attached_statuses": "{count, plural, one {{count}件の投稿} other {{count}件の投稿}}が添付されました。",
+  "report.unfollow_explanation": "このアカウントをフォローしています。ホームフィードに彼らのトゥートを表示しないようにするには、彼らのフォローを外してください。",
+  "report_notification.attached_statuses": "{count, plural, one {{count}件のトゥート} other {{count}件のトゥート}}が添付されました。",
   "report_notification.categories.legal": "法令違反",
   "report_notification.categories.other": "その他",
   "report_notification.categories.spam": "スパム",
@@ -585,7 +597,7 @@
   "search.quick_action.go_to_account": "プロフィール {x} を見る",
   "search.quick_action.go_to_hashtag": "ハッシュタグ {x} を見る",
   "search.quick_action.open_url": "MastodonでURLを開く",
-  "search.quick_action.status_search": "{x}に該当する投稿",
+  "search.quick_action.status_search": "{x}に該当するトゥート",
   "search.search_or_paste": "検索またはURLを入力",
   "search_popout.full_text_search_disabled_message": "{domain}では利用できません。",
   "search_popout.full_text_search_logged_out_message": "ログイン時のみ利用できます。",
@@ -600,7 +612,7 @@
   "search_results.hashtags": "ハッシュタグ",
   "search_results.nothing_found": "この検索条件では何も見つかりませんでした",
   "search_results.see_all": "すべて表示",
-  "search_results.statuses": "投稿",
+  "search_results.statuses": "トゥート",
   "search_results.title": "『{q}』の検索結果",
   "server_banner.about_active_users": "過去30日間にこのサーバーを使用している人 (月間アクティブユーザー)",
   "server_banner.active_users": "人のアクティブユーザー",
@@ -611,40 +623,43 @@
   "sign_in_banner.create_account": "アカウント作成",
   "sign_in_banner.sign_in": "ログイン",
   "sign_in_banner.sso_redirect": "ログインまたは登録",
-  "sign_in_banner.text": "アカウントがあればユーザーやハッシュタグをフォローしたり、投稿のお気に入り登録やブースト、投稿への返信ができます。別のサーバーのユーザーとの交流も可能です。",
+  "sign_in_banner.text": "アカウントがあればユーザーやハッシュタグをフォローしたり、トゥートのお気に入り登録やブースト、トゥートへの返信ができます。別のサーバーのユーザーとの交流も可能です。",
   "status.admin_account": "@{name}さんのモデレーション画面を開く",
   "status.admin_domain": "{domain}のモデレーション画面を開く",
-  "status.admin_status": "この投稿をモデレーション画面で開く",
+  "status.admin_status": "このトゥートをモデレーション画面で開く",
   "status.block": "@{name}さんをブロック",
   "status.bookmark": "ブックマーク",
   "status.cancel_reblog_private": "ブースト解除",
-  "status.cannot_reblog": "この投稿はブーストできません",
-  "status.copy": "投稿へのリンクをコピー",
+  "status.cannot_quote": "このトゥートは引用できません",
+  "status.cannot_reblog": "このトゥートはブーストできません",
+  "status.copy": "トゥートへのリンクをコピー",
   "status.delete": "削除",
   "status.detailed_status": "詳細な会話ビュー",
-  "status.direct": "@{name}さんに非公開で投稿",
+  "status.direct": "@{name}さんに非公開でトゥート",
   "status.direct_indicator": "非公開の返信",
   "status.edit": "編集",
   "status.edited": "{date}に編集",
   "status.edited_x_times": "{count}回編集",
   "status.embed": "埋め込み",
   "status.favourite": "お気に入り",
-  "status.filter": "この投稿をフィルターする",
+  "status.filter": "このトゥートをフィルターする",
   "status.filtered": "フィルターされました",
-  "status.hide": "投稿を非表示",
+  "status.hide": "トゥートを非表示",
   "status.history.created": "{name}さんが{date}に作成",
   "status.history.edited": "{name}さんが{date}に編集",
   "status.load_more": "もっと見る",
   "status.media.open": "クリックして開く",
   "status.media.show": "クリックして表示",
   "status.media_hidden": "非表示のメディア",
-  "status.mention": "@{name}さんに投稿",
+  "status.mention": "@{name}さんにトゥート",
   "status.more": "もっと見る",
   "status.mute": "@{name}さんをミュート",
   "status.mute_conversation": "会話をミュート",
+  "status.muted_quote": "ミュートされた引用",
   "status.open": "詳細を表示",
   "status.pin": "プロフィールに固定表示",
-  "status.pinned": "固定された投稿",
+  "status.pinned": "固定されたトゥート",
+  "status.quote": "引用",
   "status.read_more": "もっと見る",
   "status.reblog": "ブースト",
   "status.reblog_private": "ブースト",
@@ -664,13 +679,13 @@
   "status.show_more": "もっと見る",
   "status.show_more_all": "全て見る",
   "status.show_original": "原文を表示",
-  "status.title.with_attachments": "{user}さんの投稿 {attachmentCount, plural, other {({attachmentCount}件のメディア)}}",
+  "status.title.with_attachments": "{user}さんのトゥート {attachmentCount, plural, other {({attachmentCount}件のメディア)}}",
   "status.translate": "翻訳",
   "status.translated_from_with": "{provider}を使って{lang}から翻訳",
   "status.uncached_media_warning": "プレビューは使用できません",
   "status.unmute_conversation": "会話のミュートを解除",
   "status.unpin": "プロフィールへの固定を解除",
-  "subscribed_languages.lead": "選択した言語の投稿だけがホームとリストのタイムラインに表示されます。全ての言語の投稿を受け取る場合は全てのチェックを外して下さい。",
+  "subscribed_languages.lead": "選択した言語のトゥートだけがホームとリストのタイムラインに表示されます。全ての言語のトゥートを受け取る場合は全てのチェックを外して下さい。",
   "subscribed_languages.save": "変更を保存",
   "subscribed_languages.target": "{target}さんの購読言語を変更します",
   "tabs_bar.home": "ホーム",
@@ -683,10 +698,10 @@
   "timeline_hint.remote_resource_not_displayed": "他のサーバーの{resource}は表示されません。",
   "timeline_hint.resources.followers": "フォロワー",
   "timeline_hint.resources.follows": "フォロー",
-  "timeline_hint.resources.statuses": "以前の投稿",
+  "timeline_hint.resources.statuses": "以前のトゥート",
   "trends.counter_by_accounts": "過去{days, plural, one {{days}日} other {{days}日}}に{count, plural, one {{counter}人} other {{counter} 人}}",
   "trends.trending_now": "トレンドタグ",
-  "ui.beforeunload": "Mastodonから離れると送信前の投稿は失われます。",
+  "ui.beforeunload": "Mastodonから離れると送信前のトゥートは失われます。",
   "units.short.billion": "{count}B",
   "units.short.million": "{count}M",
   "units.short.thousand": "{count}K",

app/javascript/mastodon/reducers/compose.js

@@ -6,6 +6,8 @@ import {
   COMPOSE_CHANGE,
   COMPOSE_REPLY,
   COMPOSE_REPLY_CANCEL,
+  COMPOSE_QUOTE,
+  COMPOSE_QUOTE_CANCEL,
   COMPOSE_DIRECT,
   COMPOSE_MENTION,
   COMPOSE_SUBMIT_REQUEST,
@@ -67,6 +69,8 @@ const initialState = ImmutableMap({
   caretPosition: null,
   preselectDate: null,
   in_reply_to: null,
+  quote_from: null,
+  quote_from_url: null,
   is_composing: false,
   is_submitting: false,
   is_changing_upload: false,
@@ -119,6 +123,8 @@ function clearAll(state) {
     map.set('is_submitting', false);
     map.set('is_changing_upload', false);
     map.set('in_reply_to', null);
+    map.set('quote_from', null);
+    map.set('quote_from_url', null);
     map.set('privacy', state.get('default_privacy'));
     map.set('sensitive', state.get('default_sensitive'));
     map.set('language', state.get('default_language'));
@@ -250,6 +256,17 @@ const expiresInFromExpiresAt = expires_at => {
   return [300, 1800, 3600, 21600, 86400, 259200, 604800].find(expires_in => expires_in >= delta) || 24 * 3600;
 };
 
+const rejectQuoteAltText = html => {
+  const fragment = domParser.parseFromString(html, 'text/html').documentElement;
+
+  const quote_inline = fragment.querySelector('span.quote-inline');
+  if (quote_inline) {
+    quote_inline.remove();
+  }
+
+  return fragment.innerHTML;
+};
+
 const mergeLocalHashtagResults = (suggestions, prefix, tagHistory) => {
   prefix = prefix.toLowerCase();
   if (suggestions.length < 4) {
@@ -335,10 +352,20 @@ export default function compose(state = initialState, action) {
   case COMPOSE_COMPOSING_CHANGE:
     return state.set('is_composing', action.value);
   case COMPOSE_REPLY:
+  case COMPOSE_QUOTE:
     return state.withMutations(map => {
       map.set('id', null);
-      map.set('in_reply_to', action.status.get('id'));
-      map.set('text', statusToTextMentions(state, action.status));
+      if (action.type === COMPOSE_REPLY) {
+        map.set('in_reply_to', action.status.get('id'));
+        map.set('quote_from', null);
+        map.set('quote_from_url', null);
+        map.set('text', statusToTextMentions(state, action.status));
+      } else {
+        map.set('in_reply_to', null);
+        map.set('quote_from', action.status.get('id'));
+        map.set('quote_from_url', action.status.get('url'));
+        map.set('text', '');
+      }
       map.set('privacy', privacyPreference(action.status.get('visibility'), state.get('default_privacy')));
       map.set('focusDate', new Date());
       map.set('caretPosition', null);
@@ -370,6 +397,7 @@ export default function compose(state = initialState, action) {
   case COMPOSE_UPLOAD_CHANGE_REQUEST:
     return state.set('is_changing_upload', true);
   case COMPOSE_REPLY_CANCEL:
+  case COMPOSE_QUOTE_CANCEL:
   case COMPOSE_RESET:
   case COMPOSE_SUBMIT_SUCCESS:
     return clearAll(state);
@@ -468,8 +496,10 @@ export default function compose(state = initialState, action) {
       }));
   case REDRAFT:
     return state.withMutations(map => {
-      map.set('text', action.raw_text || unescapeHTML(expandMentions(action.status)));
+      map.set('text', action.raw_text || unescapeHTML(rejectQuoteAltText(expandMentions(action.status))));
       map.set('in_reply_to', action.status.get('in_reply_to_id'));
+      map.set('quote_from', action.status.getIn(['quote', 'id']));
+      map.set('quote_from_url', action.status.getIn(['quote', 'url']));
       map.set('privacy', action.status.get('visibility'));
       map.set('media_attachments', action.status.get('media_attachments').map((media) => media.set('unattached', true)));
       map.set('focusDate', new Date());

app/javascript/mastodon/reducers/search.js

@@ -3,6 +3,7 @@ import { Map as ImmutableMap, OrderedSet as ImmutableOrderedSet, fromJS } from '
 import {
   COMPOSE_MENTION,
   COMPOSE_REPLY,
+  COMPOSE_QUOTE,
   COMPOSE_DIRECT,
 } from '../actions/compose';
 import {
@@ -45,6 +46,7 @@ export default function search(state = initialState, action) {
   case SEARCH_SHOW:
     return state.set('hidden', false);
   case COMPOSE_REPLY:
+  case COMPOSE_QUOTE:
   case COMPOSE_MENTION:
   case COMPOSE_DIRECT:
     return state.set('hidden', true);

app/javascript/mastodon/reducers/statuses.js

@@ -26,6 +26,8 @@ import {
   STATUS_TRANSLATE_UNDO,
   STATUS_FETCH_REQUEST,
   STATUS_FETCH_FAIL,
+  QUOTE_REVEAL,
+  QUOTE_HIDE,
 } from '../actions/statuses';
 import { TIMELINE_DELETE } from '../actions/timelines';
 
@@ -121,6 +123,14 @@ export default function statuses(state = initialState, action) {
     });
   case STATUS_COLLAPSE:
     return state.setIn([action.id, 'collapsed'], action.isCollapsed);
+  case QUOTE_REVEAL:
+    return state.withMutations(map => {
+      action.ids.forEach(id => map.setIn([id, 'quote_hidden'], false));
+    });
+  case QUOTE_HIDE:
+    return state.withMutations(map => {
+      action.ids.forEach(id => map.setIn([id, 'quote_hidden'], true));
+    });
   case TIMELINE_DELETE:
     return deleteStatus(state, action.id, action.references);
   case STATUS_TRANSLATE_SUCCESS:

app/javascript/mastodon/selectors/index.js

@@ -4,6 +4,7 @@ import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 import { toServerSideType } from 'mastodon/utils/filters';
 
 import { me } from '../initial_state';
+import {reblogRequest} from '../actions/interactions';
 
 export { makeGetAccount } from "./accounts";
 
@@ -21,22 +22,54 @@ export const makeGetStatus = () => {
     [
       (state, { id }) => state.getIn(['statuses', id]),
       (state, { id }) => state.getIn(['statuses', state.getIn(['statuses', id, 'reblog'])]),
+      (state, { id }) => state.getIn(['statuses', state.getIn(['statuses', id, 'quote_id'])]),
       (state, { id }) => state.getIn(['accounts', state.getIn(['statuses', id, 'account'])]),
       (state, { id }) => state.getIn(['accounts', state.getIn(['statuses', state.getIn(['statuses', id, 'reblog']), 'account'])]),
+      (state, { id }) => state.getIn(['accounts', state.getIn(['statuses', state.getIn(['statuses', id, 'quote_id']), 'account'])]),
+      (state, { id }) => state.getIn(['accounts', state.getIn(['statuses', state.getIn(['statuses', id, 'reblog']), 'quote', 'account'])]),
+      (state, { id }) => state.getIn(['relationships', state.getIn(['statuses', id, 'account'])]),
+      (state, { id }) => state.getIn(['relationships', state.getIn(['statuses', state.getIn(['statuses', id, 'reblog']), 'account'])]),
+      (state, { id }) => state.getIn(['relationships', state.getIn(['statuses', state.getIn(['statuses', id, 'quote_id']), 'account'])]),
+      (state, { id }) => state.getIn(['accounts', state.getIn(['accounts', state.getIn(['statuses', id, 'account']), 'moved'])]),
+      (state, { id }) => state.getIn(['accounts', state.getIn(['accounts', state.getIn(['statuses', state.getIn(['statuses', id, 'reblog']), 'account']), 'moved'])]),
+      (state, { id }) => state.getIn(['accounts', state.getIn(['accounts', state.getIn(['statuses', state.getIn(['statuses', id, 'quote_id']), 'account']), 'moved'])]),
       getFilters,
     ],
 
-    (statusBase, statusReblog, accountBase, accountReblog, filters) => {
+    (statusBase, statusReblog, statusQuote, accountBase, accountReblog, accountQuote, accountReblogQuote, relationshipBase, relationshipReblog, relationshipQuote, movedBase, movedReblog, movedQuote, filters) => {
       if (!statusBase || statusBase.get('isLoading')) {
         return null;
       }
 
+      accountBase = accountBase.withMutations(map => {
+        map.set('relationship', relationshipBase);
+        map.set('moved', movedBase);
+      });
+
       if (statusReblog) {
+        accountReblog = accountReblog.withMutations(map => {
+          map.set('relationship', relationshipReblog);
+          map.set('moved', movedReblog);
+        });
         statusReblog = statusReblog.set('account', accountReblog);
       } else {
         statusReblog = null;
       }
 
+      if (statusQuote) {
+        accountQuote = accountQuote.withMutations(map => {
+          map.set('relationship', relationshipQuote);
+          map.set('moved', movedQuote);
+        });
+        statusQuote = statusQuote.set('account', accountQuote);
+      } else {
+        statusQuote = null;
+      }
+
+      if (statusReblog && accountReblogQuote) {
+        statusReblog = statusReblog.setIn(['quote', 'account'], accountReblogQuote);
+      }
+
       let filtered = false;
       if ((accountReblog || accountBase).get('id') !== me && filters) {
         let filterResults = statusReblog?.get('filtered') || statusBase.get('filtered') || ImmutableList();
@@ -51,6 +84,7 @@ export const makeGetStatus = () => {
 
       return statusBase.withMutations(map => {
         map.set('reblog', statusReblog);
+        map.set('quote', statusQuote);
         map.set('account', accountBase);
         map.set('matched_filters', filtered);
       });

app/javascript/mastodon/utils/uniq.js

@@ -0,0 +1 @@
+export const uniq = (array) => array.filter((x, i, self) => self.indexOf(x) === i);

app/javascript/packs/public.jsx

@@ -190,6 +190,29 @@ function loaded() {
     const message = (statusEl.dataset.spoiler === 'expanded') ? (localeData['status.show_less'] || 'Show less') : (localeData['status.show_more'] || 'Show more');
     spoilerLink.textContent = (new IntlMessageFormat(message, locale)).format();
   });
+
+  delegate(document, '.quote-status', 'click', ({ target }) => {
+    if (target.closest('.status__content__spoiler-link') ||
+      target.closest('.media-gallery') ||
+      target.closest('.video-player') ||
+      target.closest('.audio-player')) {
+      return false;
+    }
+
+    let url = target.closest('.quote-status').getAttribute('dataurl');
+    if (target.closest('.status__display-name')) {
+      url = target.closest('.status__display-name').getAttribute('href');
+    } else if (target.closest('.status-card')) {
+      url = target.closest('.status-card').getAttribute('href');
+    }
+
+    if (window.location.hostname === url.split('/')[2].split(':')[0]) {
+      window.location.href = url;
+    } else {
+      window.open(url, 'blank');
+    }
+    return false;
+  });
 }
 
 Rails.delegate(document, '#edit_profile input[type=file]', 'change', ({ target }) => {

app/javascript/styles/application.scss

@@ -23,3 +23,5 @@
 @import 'mastodon/rtl';
 @import 'mastodon/accessibility';
 @import 'mastodon/rich_text';
+
+@import 'plugin';

app/javascript/styles/light-pink.scss

@@ -0,0 +1,3 @@
+@import 'light-pink/variables';
+@import 'application';
+@import 'mastodon-light/diff';

app/javascript/styles/light-pink/variables.scss

@@ -0,0 +1,61 @@
+// Dependent colors
+$black: #000000;
+$white: #ffffff;
+
+$classic-base-color: #6e202f;
+$classic-primary-color: #ffa7ae;
+$classic-secondary-color: #faeef1;
+$classic-highlight-color: #ff375b;
+
+$blurple-600: #6e202f; // Iris
+$blurple-500: #ff375b; // Brand purple
+$blurple-300: #ffa7ae; // Faded Blue
+$grey-600: #5a4c4f; // Trout
+$grey-100: #f3dae1; // Topaz
+
+// Differences
+$success-green: lighten(#3c754d, 8%);
+
+$base-overlay-background: $white !default;
+$valid-value-color: $success-green !default;
+
+$ui-base-color: $classic-secondary-color !default;
+$ui-base-lighter-color: #ffe1e9;
+$ui-primary-color: #f1adbf;
+$ui-secondary-color: $classic-base-color !default;
+$ui-highlight-color: $classic-highlight-color !default;
+
+$ui-button-secondary-color: $grey-600 !default;
+$ui-button-secondary-border-color: $grey-600 !default;
+$ui-button-secondary-focus-color: $white !default;
+
+$ui-button-tertiary-color: $blurple-500 !default;
+$ui-button-tertiary-border-color: $blurple-500 !default;
+
+$ui-button-color: $white !default;
+$ui-button-background-color: $blurple-500 !default;
+$ui-button-focus-background-color: $blurple-600 !default;
+
+$primary-text-color: $black !default;
+$darker-text-color: $classic-base-color !default;
+$highlight-text-color: darken($ui-highlight-color, 8%) !default;
+$dark-text-color: #6e202f;
+$action-button-color: #ffa7ae;
+
+$inverted-text-color: $black !default;
+$lighter-text-color: $classic-base-color !default;
+$light-text-color: #ffa7ae;
+
+// Newly added colors
+$account-background-color: $white !default;
+
+// Invert darkened and lightened colors
+@function darken($color, $amount) {
+  @return hsl(hue($color), saturation($color), lightness($color) + $amount);
+}
+
+@function lighten($color, $amount) {
+  @return hsl(hue($color), saturation($color), lightness($color) - $amount);
+}
+
+$emojis-requiring-inversion: 'chains';

app/javascript/styles/mastodon/components.scss

@@ -875,6 +875,29 @@ body > [data-popper-placement] {
     background: $ui-highlight-color;
     border-color: $ui-highlight-color;
     color: $primary-text-color;
+    padding-top: 10px;
+
+    .compose-form__publish-button-wrapper {
+      padding-top: 15px;
+      button {
+        display: inline-block;
+        width: auto;
+
+        margin-right: 0.5em;
+      }
+
+      button:last-child {
+        margin-right: auto;
+      }
+    }
+  }
+
+  .compose-form__utilBtns {
+    padding-top: 10px;
+
+    * {
+      margin-bottom: 0.5em;
+    }
   }
 }
 
@@ -935,6 +958,45 @@ body > [data-popper-placement] {
   }
 }
 
+.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 {
+    background: $success-green;
+  }
+}
+
+.reply-indicator__header {
+  margin-bottom: 5px;
+  overflow: hidden;
+}
+
+.reply-indicator__cancel {
+  float: right;
+  line-height: 24px;
+}
+
+.reply-indicator__display-name {
+  color: $inverted-text-color;
+  display: block;
+  max-width: 100%;
+  line-height: 24px;
+  overflow: hidden;
+  padding-inline-end: 25px;
+  text-decoration: none;
+}
+
+.reply-indicator__display-avatar {
+  float: left;
+  margin-inline-end: 5px;
+}
+
 .status__content--with-action {
   cursor: pointer;
 }
@@ -1250,6 +1312,10 @@ body > [data-popper-placement] {
 
 .status__content.status__content--collapsed {
   max-height: 22px * 15; // 15 lines is roughly above 500 characters
+
+  .quote-status & {
+    max-height: 22px * 5;
+  }
 }
 
 .status__content__read-more-button,
@@ -1329,6 +1395,70 @@ body > [data-popper-placement] {
   }
 }
 
+.quote-status {
+  border: solid 1px $ui-base-lighter-color;
+  border-radius: 4px !important;
+  padding: 5px !important;
+  margin-top: 8px;
+  position: relative;
+
+  .muted-quote,
+  .unlisted-quote button {
+    color: $dark-text-color;
+    font-size: 15px;
+    width: 100%;
+    border: 0;
+    padding: 0;
+  }
+
+  .muted-quote {
+    text-align: center;
+    cursor: default;
+  }
+
+  .unlisted-quote button {
+    background-color: transparent;
+    cursor: pointer;
+    appearance: none;
+  }
+
+  .status__avatar,
+  .detailed-status__display-avatar {
+    position: absolute;
+    top: 5px !important;
+    left: 5px !important;
+  }
+
+  .display-name {
+    padding-left: 56px;
+  }
+
+  .detailed-status__display-name {
+    margin-bottom: 0;
+    line-height: unset;
+
+    strong,
+    span {
+      display: block;
+      line-height: 22px;
+    }
+  }
+
+  .status__content__text {
+    p {
+      display: inline;
+
+      &::after {
+        content: ' ';
+      }
+    }
+  }
+}
+
+.quote-inline {
+  display: none;
+}
+
 .focusable {
   &:focus {
     outline: 0;
@@ -1344,9 +1474,12 @@ body > [data-popper-placement] {
 .status {
   padding: 16px;
   min-height: 54px;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
   cursor: auto;
 
+  &:not(.quote-status) {
+    border-bottom: 1px solid lighten($ui-base-color, 8%);
+  }
+
   @keyframes fade {
     0% {
       opacity: 0;

app/javascript/styles/mastodon/statuses.scss

@@ -40,7 +40,7 @@
 
     &:last-child {
       .detailed-status,
-      .status,
+      .status:not(.quote-status),
       .load-more {
         border-bottom: 0;
         border-radius: 0 0 4px 4px;
@@ -63,9 +63,18 @@
       }
     }
 
+    .detailed-status .quote-status {
+      width: 100%;
+    }
+
+    .quote-status {
+      margin-top: 15px;
+      cursor: pointer;
+    }
+
     @media screen and (width <= 740px) {
       .detailed-status,
-      .status,
+      .status:not(.quote-status),
       .load-more {
         border-radius: 0 !important;
       }
@@ -77,6 +86,10 @@
   }
 }
 
+.standalone-timeline .quote-status {
+  cursor: pointer;
+}
+
 .button.logo-button svg {
   width: 20px;
   height: auto;

app/javascript/styles/plugin.scss

@@ -0,0 +1,60 @@
+// ここから下タブバーの実装
+
+//投稿ボタン
+.columns-area__panels__main .button.bottom_right {
+  position: fixed;
+  right: 18px;
+  bottom: 65px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  font-size: 24px;
+  border-radius: 50%;
+}
+
+.tab-ber-bottom .navber {
+  display: none;
+}
+
+.column-link--transparent{
+  justify-content: center;
+}
+
+@media screen and (max-width: 630px) {
+  .tab-ber-bottom .timeline{
+    width:100%;
+    margin: 0 0 50px 0;
+  }
+
+  .tab-ber-bottom .navber{
+    display: flex;
+    width:100%;
+    bottom: 0;
+    position: fixed;
+  }
+
+  .tab-ber-bottom .navber .tabs-bar__wrapper {
+    bottom: 0;
+    width: 100%;
+    align-self: auto;
+    display: flex;
+    border-top: 1px solid lighten($ui-base-color, 8%);
+  }
+
+  .tab-ber-bottom .navber .tabs-bar__wrapper a{
+    flex: 1;
+    text-align: center;
+  }
+
+  .columns-area__panels__pane-tab-ber{
+    display: none;
+  }
+
+  .tab-ber-bottom .navber .tabs-bar__wrapper a span {
+    display: none;
+  }
+}
+
+//ここまで下タブバーの実装