.env.development

@@ -0,0 +1,7 @@
+LOCAL_DOMAIN=localhost
+ALTERNATE_DOMAINS=mastodon.internal
+
+DB_HOST=$(pwd)/data/postgres
+DB_USER=mastodon
+DB_NAME=mastodon_dev
+REDIS_URL=unix://./data/redis/redis-dev.sock

.env.test

@@ -3,3 +3,8 @@ NODE_ENV=tests
 # Federation
 LOCAL_DOMAIN=cb6e6126.ngrok.io
 LOCAL_HTTPS=true
+
+DB_HOST=$(pwd)/data/postgres
+DB_USER=mastodon
+DB_NAME=mastodon_dev
+REDIS_URL=unix://./data/redis/redis-dev.sock

.gitignore

@@ -4,6 +4,9 @@
 # or operating system, you probably want to add a global ignore instead:
 #   git config --global core.excludesfile '~/.gitignore_global'
 
+# Ignore local dotenv overrides
+.env.*.local
+
 # Ignore bundler config and downloaded libraries.
 /.bundle
 /vendor/bundle
@@ -12,6 +15,9 @@
 /db/*.sqlite3
 /db/*.sqlite3-journal
 
+# Ignore local data directory
+/data
+
 # Ignore all logfiles and tempfiles.
 .eslintcache
 /log/*

.woodpecker.yml

@@ -0,0 +1,19 @@
+pipeline:
+  build:
+    image: docker
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    commands:
+      - docker image build -f Dockerfile . -t gitea.treehouse.systems/treehouse/mastodon:latest
+
+  push:
+    image: docker
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    commands:
+      - echo $REGISTRY_SECRET | docker login -u ariadne --password-stdin gitea.treehouse.systems
+      - docker image push --all-tags gitea.treehouse.systems/treehouse/mastodon
+    when:
+      event: [push, tag]
+      branch: main
+    secrets: [REGISTRY_SECRET]

CONTRIBUTING.md

@@ -1,6 +1,6 @@
-#  Contributing to Mastodon Glitch Edition  #
+#  Contributing to Mastodon Glitch+Treehouse Edition  #
 
-Thank you for your interest in contributing to the `glitch-soc` project!
+Thank you for your interest in contributing to the **Treehouse Mastodon** project!
 Here are some guidelines, and ways you can help.
 
 >   (This document is a bit of a work-in-progress, so please bear with us.
@@ -8,14 +8,19 @@ Here are some guidelines, and ways you can help.
 
 ##  Planning  ##
 
-Right now a lot of the planning for this project takes place in our development Discord, or through GitHub Issues and Projects.
+Right now a lot of the planning for this project takes place in the `#fediverse`
+channel of the Treehouse Discord, or through Gitea Issues.
+
 We're working on ways to improve the planning structure and better solicit feedback, and if you feel like you can help in this respect, feel free to give us a holler.
 
 ##  Documentation  ##
 
-The documentation for this repository is available at [`glitch-soc/docs`](https://github.com/glitch-soc/docs) (online at [glitch-soc.github.io/docs/](https://glitch-soc.github.io/docs/)).
-Right now, we've mostly focused on the features that make this fork different from upstream in some manner.
-Adding screenshots, improving descriptions, and so forth are all ways to help contribute to the project even if you don't know any code.
+The upstream Glitch documentation for this repository is available at [`glitch-soc/docs`](https://github.com/glitch-soc/docs) (online at [glitch-soc.github.io/docs/](https://glitch-soc.github.io/docs/)).
+
+##  Setup  ##
+
+For a some-batteries-required guide to setting up a development environment for this repository, read Rin's excellent
+[SETUP.md](https://gitea.treehouse.systems/treehouse/mastodon/src/branch/main/SETUP.md).
 
 ##  Frontend Development  ##
 

Dockerfile

@@ -111,7 +111,10 @@ ENV BIND="0.0.0.0"
 USER mastodon
 
 # Precompile assets
+# TODO(kaniini): Yarn install is invoked to allow us to pre-patch emoji-mart
+# we should set up a deviation instead.
 RUN cd ~ && \
+	yarn install && cp ./emoji_data/all.json ./node_modules/emoji-mart/data/all.json && \
 	OTP_SECRET=precompile_placeholder SECRET_KEY_BASE=precompile_placeholder rails assets:precompile && \
 	yarn cache clean
 

README.md

@@ -1,14 +1,21 @@
-#  Mastodon Glitch Edition  #
+#  Mastodon Glitch+Treehouse Edition  #
 
->   Now with automated deploys!
+> Now with bunny ears!
 
-[![Build Status](https://img.shields.io/circleci/project/github/glitch-soc/mastodon.svg)][circleci]
-[![Code Climate](https://img.shields.io/codeclimate/maintainability/glitch-soc/mastodon.svg)][code_climate]
+So here's the deal: we all work on this code, and anyone who uses that does so absolutely at their own risk. Can you dig it?
 
-[circleci]: https://circleci.com/gh/glitch-soc/mastodon
-[code_climate]: https://codeclimate.com/github/glitch-soc/mastodon
+Specifically, this fork-of-a-fork is intended for Treehouse use only. Unless
+otherwise communicated, we will not put effort into supporting other deployments
+or upstreaming our patches.
 
-So here's the deal: we all work on this code, and anyone who uses that does so absolutely at their own risk. can you dig it?
+## Links
 
-- You can view documentation for this project at [glitch-soc.github.io/docs/](https://glitch-soc.github.io/docs/).
-- And contributing guidelines are available [here](CONTRIBUTING.md) and [here](https://glitch-soc.github.io/docs/contributing/).
+- You can view upstream Glitch's documentation for this project at [glitch-soc.github.io/docs/](https://glitch-soc.github.io/docs/).
+- Contributing guidelines are available [here](CONTRIBUTING.md).
+
+## Known Deployments
+
+- Treehouse Social: [social.treehouse.systems](https://social.treehouse.systems)
+- VT Social: [vt.social](https://vt.social)
+- Unstable Systems: [unstable.systems](https://unstable.systems)
+- Emerald Social: [emeraldsocial.org](https://emeraldsocial.org)

SETUP.md

@@ -0,0 +1,143 @@
+# Setting up a dev environment
+
+## Prerequisites
+
+Mastodon development requires the following:
+
+- Ruby 3.0
+- Ruby gems:
+  - `bundler`
+  - `irb`
+  - `foreman`
+- NodeJS v18 (LTS)
+- NPM packages:
+  - `yarn`
+- Postgres
+- Redis
+
+### macOS
+
+First, make sure you have Homebrew installed. Follow the instructions at [brew.sh](https://brew.sh).
+
+Run the following to install all necessary packages:
+```
+brew install ruby@3.0 foreman node yarn postgresql redis
+```
+
+Ruby 3.0 is **keg-only** by default. Follow the instructions in the **Caveat** to add it to your path.
+
+### Linux
+
+We will assume that you know how to locate the correct packages for your distro. That said, some distros package `bundler` and `irb` separately. Make sure that you also install these.
+
+On Arch, you will need:
+- `ruby`
+- `ruby-bundler`
+- `ruby-irb`
+- `ruby-foreman`
+- `redis`
+- `postgresql`
+- `yarn`
+- `gmp`
+- `libidn`
+
+### Windows
+
+Unfortunately, none of the authors use Windows. Contributions welcome!
+
+## Database
+
+In the root of this repository, go through the following script:
+```sh
+# Create a folder for local data
+mkdir -p data
+
+# Set up a local database
+pg_ctl -D data/postgres initdb -o '-U mastodon --auth-host=trust'
+
+# Use the data/postgres folder for the DB connection unix socket
+#
+# If you don't know what that means, it's just a way for Mastodon to communicate
+# with a database on the same machine efficiently.
+#
+# See: https://manpages.ubuntu.com/manpages/jammy/man7/unix.7.html
+echo 'unix_socket_directories = .' >> data/postgres/postgresql.conf
+
+# Start the database
+pg_ctl -D data/postgres start --silent
+```
+
+## Redis
+
+In the root of this repository, run the following:
+```sh
+# Create a folder for redis data
+mkdir -p data/redis
+
+# Start Redis
+redis-server ./redis-dev.conf
+
+# [Optional] Stop Redis
+# kill "$(cat ./data/redis/redis-dev.pid)"
+```
+
+## Ruby
+
+```sh
+export RAILS_ENV=development
+
+# Bundle installs all Ruby gems globally by default, which might cause problems.
+bundle config set --local path 'vendor/bundle'
+
+# [Apple Silicon] If using macOS on Apple Silicon, run the following:
+# bundle config build.idn-ruby -- --with-idn-dir="$(brew --prefix libidn)"
+
+# Install dependencies using bundle (Ruby) and yarn (JS)
+bundle install
+yarn install
+
+# Setup the database using the pre-defined Rake task
+#
+# Rake is a command runner for Ruby projects. The `bundle exec` ensures that
+# we use the version of Rake that this project requires.
+bundle exec rake db:setup
+
+# [Optional] If that fails, run the following and try again:
+# bundle exec rake db:reset
+```
+
+## Running Mastodon
+
+1. Run `export RAILS_ENV=development NODE_ENV=development`.
+    - Put these in your shell's .rc, or a script you can source if you want to skip this step in the future.
+2. Run `bundle exec rake assets:precompile`.
+    - If this explodes, complaining about `Hash`, you'll need to `export NODE_OPTIONS=--openssl-legacy-provider`.
+    - After doing this, you will need to run `bundle exec rake assets:clobber` and then re-run `bundle exec rake assets:precompile`.
+3. Run `foreman start`
+
+# Updates/Troubleshooting
+
+## RubyVM/DebugInspector Issues
+
+Still unable to fix. Circumvent by removing `better_errors` and `binding_of_caller` from Gemfile.
+
+Happy to troubleshoot with someone better with Ruby than us >_<'/.
+
+## Webpack Issues
+
+If Webpack compalins about being unable to find some assets or locales:
+
+Try:
+1. `rm -rf node_modules`
+2. `yarn install`
+
+If this doesn't help, try:
+1. `yarn add webpack`
+2. `git restore package.json yarn.lock`
+3. `yarn install`
+
+Then re-run `foreman start`. No. We have no idea why this worked.
+
+# Need Help?
+
+If the above instructions don't work, please contact @Rin here, or @tammy@social.treehouse.systems.

app/controllers/api/v1/statuses_controller.rb

@@ -65,7 +65,8 @@ class Api::V1::StatusesController < Api::BaseController
       poll: status_params[:poll],
       content_type: status_params[:content_type],
       idempotency: request.headers['Idempotency-Key'],
-      with_rate_limit: true
+      with_rate_limit: true,
+      quote_id: status_params[:quote_id].presence
     )
 
     render json: @status, serializer: @status.is_a?(ScheduledStatus) ? REST::ScheduledStatusSerializer : REST::StatusSerializer
@@ -129,6 +130,7 @@ class Api::V1::StatusesController < Api::BaseController
       :visibility,
       :language,
       :scheduled_at,
+      :quote_id,
       :content_type,
       media_ids: [],
       poll: [

app/helpers/context_helper.rb

@@ -24,6 +24,7 @@ module ContextHelper
     voters_count: { 'toot' => 'http://joinmastodon.org/ns#', 'votersCount' => 'toot:votersCount' },
     olm: { 'toot' => 'http://joinmastodon.org/ns#', 'Device' => 'toot:Device', 'Ed25519Signature' => 'toot:Ed25519Signature', 'Ed25519Key' => 'toot:Ed25519Key', 'Curve25519Key' => 'toot:Curve25519Key', 'EncryptedMessage' => 'toot:EncryptedMessage', 'publicKeyBase64' => 'toot:publicKeyBase64', 'deviceId' => 'toot:deviceId', 'claim' => { '@type' => '@id', '@id' => 'toot:claim' }, 'fingerprintKey' => { '@type' => '@id', '@id' => 'toot:fingerprintKey' }, 'identityKey' => { '@type' => '@id', '@id' => 'toot:identityKey' }, 'devices' => { '@type' => '@id', '@id' => 'toot:devices' }, 'messageFranking' => 'toot:messageFranking', 'messageType' => 'toot:messageType', 'cipherText' => 'toot:cipherText' },
     suspended: { 'toot' => 'http://joinmastodon.org/ns#', 'suspended' => 'toot:suspended' },
+    quote_uri: { 'fedibird' => 'http://fedibird.com/ns#', 'quoteUri' => 'fedibird:quoteUri' },
   }.freeze
 
   def full_context

app/helpers/formatting_helper.rb

@@ -15,7 +15,17 @@ module FormattingHelper
   module_function :extract_status_plain_text
 
   def status_content_format(status)
-    html_aware_format(status.text, status.local?, preloaded_accounts: [status.account] + (status.respond_to?(:active_mentions) ? status.active_mentions.map(&:account) : []), content_type: status.content_type)
+    base = html_aware_format(status.text, status.local?, preloaded_accounts: [status.account] + (status.respond_to?(:active_mentions) ? status.active_mentions.map(&:account) : []), content_type: status.content_type)
+
+    if status.quote? && status.local?
+      after_html = begin
+        "<span class=\"quote-inline\"><a href=\"#{status.quote.to_log_permalink}\" class=\"status-link unhandled-link\" target=\"_blank\">#{status.quote.to_log_permalink}</a></span>"
+      end.html_safe # rubocop:disable Rails/OutputSafety
+
+      base + after_html
+    else
+      base
+    end
   end
 
   def rss_status_content_format(status)

app/javascript/flavours/glitch/actions/compose.js

@@ -82,6 +82,9 @@ export const COMPOSE_CHANGE_MEDIA_FOCUS       = 'COMPOSE_CHANGE_MEDIA_FOCUS';
 
 export const COMPOSE_SET_STATUS = 'COMPOSE_SET_STATUS';
 
+export const COMPOSE_QUOTE        = 'COMPOSE_QUOTE';
+export const COMPOSE_QUOTE_CANCEL = 'COMPOSE_QUOTE_CANCEL';
+
 const messages = defineMessages({
   uploadErrorLimit: { id: 'upload_error.limit', defaultMessage: 'File upload limit exceeded.' },
   uploadErrorPoll:  { id: 'upload_error.poll', defaultMessage: 'File upload not allowed with polls.' },
@@ -134,6 +137,25 @@ export function cancelReplyCompose() {
   };
 };
 
+export function quoteCompose(status, router) {
+  return (dispatch, getState) => {
+    dispatch({
+      type: COMPOSE_QUOTE,
+      status: status,
+    });
+
+    if (!getState().getIn(['compose', 'mounted'])) {
+      router.push('/publish');
+    }
+  };
+};
+
+export function cancelQuoteCompose() {
+  return {
+    type: COMPOSE_QUOTE_CANCEL,
+  };
+};
+
 export function resetCompose() {
   return {
     type: COMPOSE_RESET,
@@ -187,6 +209,7 @@ export function submitCompose(routerHistory) {
         status,
         content_type: getState().getIn(['compose', 'content_type']),
         in_reply_to_id: getState().getIn(['compose', 'in_reply_to'], null),
+        quote_id: getState().getIn(['compose', 'quote_id'], null),
         media_ids: media.map(item => item.get('id')),
         sensitive: getState().getIn(['compose', 'sensitive']) || (spoilerText.length > 0 && media.size !== 0),
         spoiler_text: spoilerText,

app/javascript/flavours/glitch/actions/importer/normalizer.js

@@ -74,6 +74,8 @@ export function normalizeStatus(status, normalOldStatus, settings) {
     normalStatus.contentHtml = normalOldStatus.get('contentHtml');
     normalStatus.spoilerHtml = normalOldStatus.get('spoilerHtml');
     normalStatus.hidden = normalOldStatus.get('hidden');
+    normalStatus.quote = normalOldStatus.get('quote');
+    normalStatus.quote_hidden = normalOldStatus.get('quote_hidden');
   } else {
     const spoilerText   = normalStatus.spoiler_text || '';
     const searchContent = ([spoilerText, status.content].concat((status.poll && status.poll.options) ? status.poll.options.map(option => option.title) : [])).concat(status.media_attachments.map(att => att.description)).join('\n\n').replace(/<br\s*\/?>/g, '\n').replace(/<\/p><p>/g, '\n\n');
@@ -83,6 +85,35 @@ export function normalizeStatus(status, normalOldStatus, settings) {
     normalStatus.contentHtml  = emojify(normalStatus.content, emojiMap);
     normalStatus.spoilerHtml  = emojify(escapeTextContentForBrowser(spoilerText), emojiMap);
     normalStatus.hidden       = (spoilerText.length > 0 || normalStatus.sensitive) && autoHideCW(settings, spoilerText);
+
+    if (status.quote && status.quote.id) {
+      const quote_spoilerText = status.quote.spoiler_text || '';
+      const quote_searchContent = [quote_spoilerText, status.quote.content].join('\n\n').replace(/<br\s*\/?>/g, '\n').replace(/<\/p><p>/g, '\n\n');
+
+      const quote_emojiMap = makeEmojiMap(normalStatus.quote);
+
+      const quote_account_emojiMap = makeEmojiMap(status.quote.account);
+      const displayName = normalStatus.quote.account.display_name.length === 0 ? normalStatus.quote.account.username : normalStatus.quote.account.display_name;
+      normalStatus.quote.account.display_name_html = emojify(escapeTextContentForBrowser(displayName), quote_account_emojiMap);
+      normalStatus.quote.search_index = domParser.parseFromString(quote_searchContent, 'text/html').documentElement.textContent;
+      let docElem = domParser.parseFromString(normalStatus.quote.content, 'text/html').documentElement;
+      Array.from(docElem.querySelectorAll('span.quote-inline'), span => span.remove());
+      Array.from(docElem.querySelectorAll('p,br'), line => {
+        let parentNode = line.parentNode;
+        if (line.nextSibling) {
+          parentNode.insertBefore(document.createTextNode(' '), line.nextSibling);
+        }
+      });
+      let _contentHtml = docElem.textContent;
+      normalStatus.quote.contentHtml  = '<p>'+emojify(_contentHtml.substr(0, 150), quote_emojiMap) + (_contentHtml.substr(150) ? '...' : '')+'</p>';
+      normalStatus.quote.spoilerHtml  = emojify(escapeTextContentForBrowser(quote_spoilerText), quote_emojiMap);
+      normalStatus.quote_hidden       = (quote_spoilerText.length > 0 || normalStatus.quote.sensitive) && autoHideCW(settings, quote_spoilerText);
+
+      // delete the quote link!!!!
+      let parentDocElem = domParser.parseFromString(normalStatus.contentHtml, 'text/html').documentElement;
+      Array.from(parentDocElem.querySelectorAll('span.quote-inline'), span => span.remove());
+      normalStatus.contentHtml = parentDocElem.children[1].innerHTML;
+    }
   }
 
   return normalStatus;

app/javascript/flavours/glitch/components/status.js

@@ -69,6 +69,7 @@ class Status extends ImmutablePureComponent {
     status: ImmutablePropTypes.map,
     account: ImmutablePropTypes.map,
     onReply: PropTypes.func,
+    onQuote: PropTypes.func,
     onFavourite: PropTypes.func,
     onReblog: PropTypes.func,
     onBookmark: PropTypes.func,
@@ -687,7 +688,7 @@ class Status extends ImmutablePureComponent {
       if (!status.get('sensitive') && !(status.get('spoiler_text').length > 0) && settings.getIn(['collapsed', 'backgrounds', 'preview_images'])) {
         background = attachments.getIn([0, 'preview_url']);
       }
-    } else if (status.get('card') && settings.get('inline_preview_cards') && !this.props.muted) {
+    } else if (!status.get('quote') && status.get('card') && settings.get('inline_preview_cards') && !this.props.muted) {
       media.push(
         <Card
           onOpenMedia={this.handleOpenMedia}

app/javascript/flavours/glitch/components/status_action_bar.js

@@ -25,6 +25,7 @@ const messages = defineMessages({
   replyAll: { id: 'status.replyAll', defaultMessage: 'Reply to thread' },
   reblog: { id: 'status.reblog', defaultMessage: 'Boost' },
   reblog_private: { id: 'status.reblog_private', defaultMessage: 'Boost with original visibility' },
+  quote: { id: 'status.quote', defaultMessage: 'Quote' },
   cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Unboost' },
   cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
   favourite: { id: 'status.favourite', defaultMessage: 'Favourite' },
@@ -58,6 +59,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,
@@ -124,6 +126,17 @@ class StatusActionBar extends ImmutablePureComponent {
     }
   }
 
+  handleQuoteClick = () => {
+    const { signedIn } = this.context.identity;
+
+    if (signedIn) {
+      this.props.onQuote(this.props.status, this.context.router.history);
+    } else {
+      // TODO(ariadne): Add an interaction modal for quoting specifically.
+      this.props.onInteractionModal('reply', this.props.status);
+    }
+  }
+
   handleBookmarkClick = (e) => {
     this.props.onBookmark(this.props.status, e);
   }
@@ -307,6 +320,8 @@ class StatusActionBar extends ImmutablePureComponent {
           obfuscateCount
         />
         <IconButton className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon={reblogIcon} onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
+        <IconButton className='status__action-bar-button' disabled={!publicStatus} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.quote)} icon='quote-right' onClick={this.handleQuoteClick} />
+
         <IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
         {shareButton}
         <IconButton className='status__action-bar-button bookmark-icon' disabled={anonymousAccess} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />

app/javascript/flavours/glitch/components/status_content.js

@@ -275,6 +275,34 @@ export default class StatusContent extends React.PureComponent {
       'status__content--with-spoiler': status.get('spoiler_text').length > 0,
     });
 
+    let quote = '';
+
+    if (status.get('quote', null) !== null) {
+      let quoteStatus = status.get('quote');
+      let quoteStatusContent = { __html: quoteStatus.get('contentHtml') };
+      let quoteStatusAccount = quoteStatus.get('account');
+      let quoteStatusDisplayName = { __html: quoteStatusAccount.get('display_name_html') };
+
+      quote = (
+        <div class="status__quote">
+          <blockquote>
+            <bdi>
+              <span class="quote-display-name">
+                <Icon
+                  fixedWidth
+                  id='quote-right'
+                  aria-hidden='true'
+                  key='icon-quote-right' />
+                <strong class="display-name__html"
+                  dangerouslySetInnerHTML={quoteStatusDisplayName} />
+              </span>
+            </bdi>
+            <div dangerouslySetInnerHTML={quoteStatusContent} />
+          </blockquote>
+        </div>
+      );
+    }
+
     if (status.get('spoiler_text').length > 0) {
       let mentionsPlaceholder = '';
 
@@ -340,6 +368,7 @@ export default class StatusContent extends React.PureComponent {
           {mentionsPlaceholder}
 
           <div className={`status__content__spoiler ${!hidden ? 'status__content__spoiler--visible' : ''}`}>
+            {quote}
             <div
               ref={this.setContentsRef}
               key={`contents-${tagLinks}`}
@@ -365,6 +394,7 @@ export default class StatusContent extends React.PureComponent {
           onMouseUp={this.handleMouseUp}
           tabIndex='0'
         >
+          {quote}
           <div
             ref={this.setContentsRef}
             key={`contents-${tagLinks}-${rewriteMentions}`}
@@ -385,6 +415,7 @@ export default class StatusContent extends React.PureComponent {
           className='status__content'
           tabIndex='0'
         >
+          {quote}
           <div
             ref={this.setContentsRef}
             key={`contents-${tagLinks}`}

app/javascript/flavours/glitch/containers/status_container.js

@@ -4,6 +4,7 @@ import { List as ImmutableList } from 'immutable';
 import { makeGetStatus } from 'flavours/glitch/selectors';
 import {
   replyCompose,
+  quoteCompose,
   mentionCompose,
   directCompose,
 } from 'flavours/glitch/actions/compose';
@@ -50,6 +51,8 @@ const messages = defineMessages({
   redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? You will lose all replies, boosts and favourites to it.' },
   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?' },
   unfilterConfirm: { id: 'confirmations.unfilter.confirm', defaultMessage: 'Show' },
   author: { id: 'confirmations.unfilter.author', defaultMessage: 'Author' },
   matchingFilters: { id: 'confirmations.unfilter.filters', defaultMessage: 'Matching {count, plural, one {filter} other {filters}}' },
@@ -111,6 +114,23 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
     });
   },
 
+  onQuote (status, router) {
+    dispatch((_, getState) => {
+      let state = getState();
+
+      if (state.getIn(['local_settings', 'confirm_before_clearing_draft']) && state.getIn(['compose', 'text']).trim().length !== 0) {
+        dispatch(openModal('CONFIRM', {
+          message: intl.formatMessage(messages.quoteMessage),
+          confirm: intl.formatMessage(messages.quoteConfirm),
+          onDoNotAsk: () => dispatch(changeLocalSetting(['confirm_before_clearing_draft'], false)),
+          onConfirm: () => dispatch(quoteCompose(status, router)),
+        }));
+      } else {
+        dispatch(quoteCompose(status, router));
+      }
+    });
+  },
+
   onModalReblog (status, privacy) {
     if (status.get('reblogged')) {
       dispatch(unreblog(status));

app/javascript/flavours/glitch/features/compose/components/compose_form.js

@@ -2,6 +2,7 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import ReplyIndicatorContainer from '../containers/reply_indicator_container';
+import QuoteIndicatorContainer from '../containers/quote_indicator_container';
 import AutosuggestTextarea from '../../../components/autosuggest_textarea';
 import AutosuggestInput from '../../../components/autosuggest_input';
 import { defineMessages, injectIntl } from 'react-intl';
@@ -309,6 +310,7 @@ class ComposeForm extends ImmutablePureComponent {
         <WarningContainer />
 
         <ReplyIndicatorContainer />
+        <QuoteIndicatorContainer />
 
         <div className={`spoiler-input ${spoiler ? 'spoiler-input--visible' : ''}`} ref={this.setRef}>
           <AutosuggestInput

app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.js

@@ -39,6 +39,8 @@ const notFoundFn = () => (
       set='twitter'
       size={32}
       sheetSize={32}
+      sheetColumns={60}
+      sheetRows={60}
       backgroundImageFn={backgroundImageFn}
     />
 
@@ -97,12 +99,12 @@ class ModifierPickerMenu extends React.PureComponent {
 
     return (
       <div className='emoji-picker-dropdown__modifiers__menu' style={{ display: active ? 'block' : 'none' }} ref={this.setRef}>
-        <button onClick={this.handleClick} data-index={1}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={1} backgroundImageFn={backgroundImageFn} native={useSystemEmojiFont} /></button>
-        <button onClick={this.handleClick} data-index={2}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={2} backgroundImageFn={backgroundImageFn} native={useSystemEmojiFont} /></button>
-        <button onClick={this.handleClick} data-index={3}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={3} backgroundImageFn={backgroundImageFn} native={useSystemEmojiFont} /></button>
-        <button onClick={this.handleClick} data-index={4}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={4} backgroundImageFn={backgroundImageFn} native={useSystemEmojiFont} /></button>
-        <button onClick={this.handleClick} data-index={5}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={5} backgroundImageFn={backgroundImageFn} native={useSystemEmojiFont} /></button>
-        <button onClick={this.handleClick} data-index={6}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={6} backgroundImageFn={backgroundImageFn} native={useSystemEmojiFont} /></button>
+        <button onClick={this.handleClick} data-index={1}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} sheetColumns={60} sheetRows={60} skin={1} backgroundImageFn={backgroundImageFn} native={useSystemEmojiFont} /></button>
+        <button onClick={this.handleClick} data-index={2}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} sheetColumns={60} sheetRows={60} skin={2} backgroundImageFn={backgroundImageFn} native={useSystemEmojiFont} /></button>
+        <button onClick={this.handleClick} data-index={3}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} sheetColumns={60} sheetRows={60} skin={3} backgroundImageFn={backgroundImageFn} native={useSystemEmojiFont} /></button>
+        <button onClick={this.handleClick} data-index={4}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} sheetColumns={60} sheetRows={60} skin={4} backgroundImageFn={backgroundImageFn} native={useSystemEmojiFont} /></button>
+        <button onClick={this.handleClick} data-index={5}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} sheetColumns={60} sheetRows={60} skin={5} backgroundImageFn={backgroundImageFn} native={useSystemEmojiFont} /></button>
+        <button onClick={this.handleClick} data-index={6}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} sheetColumns={60} sheetRows={60} skin={6} backgroundImageFn={backgroundImageFn} native={useSystemEmojiFont} /></button>
       </div>
     );
   }
@@ -137,7 +139,7 @@ class ModifierPicker extends React.PureComponent {
 
     return (
       <div className='emoji-picker-dropdown__modifiers'>
-        <Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={modifier} onClick={this.handleClick} backgroundImageFn={backgroundImageFn} native={useSystemEmojiFont} />
+        <Emoji emoji='fist' set='twitter' size={22} sheetSize={32} sheetColumns={60} sheetRows={60} skin={modifier} onClick={this.handleClick} backgroundImageFn={backgroundImageFn} native={useSystemEmojiFont} />
         <ModifierPickerMenu active={active} onSelect={this.handleSelect} onClose={this.props.onClose} />
       </div>
     );
@@ -278,6 +280,8 @@ class EmojiPickerMenu extends React.PureComponent {
           perLine={8}
           emojiSize={22}
           sheetSize={32}
+          sheetColumns={60}
+          sheetRows={60}
           custom={buildCustomEmojis(custom_emojis)}
           color=''
           emoji=''

app/javascript/flavours/glitch/features/compose/components/quote_indicator.js

@@ -0,0 +1,86 @@
+//  Package imports.
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { defineMessages, injectIntl } from 'react-intl';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+
+//  Components.
+import AccountContainer from 'flavours/glitch/containers/account_container';
+import Icon from 'flavours/glitch/components/icon';
+import IconButton from 'flavours/glitch/components/icon_button';
+import AttachmentList from 'flavours/glitch/components/attachment_list';
+
+//  Messages.
+const messages = defineMessages({
+  cancel: {
+    defaultMessage: 'Cancel',
+    id: 'quote_indicator.cancel',
+  },
+});
+
+
+export default @injectIntl
+class QuoteIndicator extends ImmutablePureComponent {
+
+  static propTypes = {
+    status: ImmutablePropTypes.map,
+    intl: PropTypes.object.isRequired,
+    onCancel: PropTypes.func,
+  };
+
+  handleClick = () => {
+    const { onCancel } = this.props;
+    if (onCancel) {
+      onCancel();
+    }
+  }
+
+  //  Rendering.
+  render () {
+    const { status, intl } = this.props;
+
+    if (!status) {
+      return null;
+    }
+
+    const account     = status.get('account');
+    const content     = status.get('content');
+    const attachments = status.get('media_attachments');
+
+    //  The result.
+    return (
+      <article className='quote-indicator'>
+        <header className='quote-indicator__header'>
+          <IconButton
+            className='quote-indicator__cancel'
+            icon='times'
+            onClick={this.handleClick}
+            title={intl.formatMessage(messages.cancel)}
+            inverted
+          />
+          <Icon
+            className='quote-indicator__cancel icon-button inverted'
+            id='quote-right' />
+          {account && (
+            <AccountContainer
+              id={account}
+              small
+            />
+          )}
+        </header>
+        <div
+          className='quote-indicator__content icon-button translate'
+          dangerouslySetInnerHTML={{ __html: content || '' }}
+        />
+        {attachments.size > 0 && (
+          <AttachmentList
+            compact
+            media={attachments}
+          />
+        )}
+      </article>
+    );
+  }
+
+}

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

@@ -7,6 +7,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 
 //  Components.
 import AccountContainer from 'flavours/glitch/containers/account_container';
+import Icon from 'flavours/glitch/components/icon';
 import IconButton from 'flavours/glitch/components/icon_button';
 import AttachmentList from 'flavours/glitch/components/attachment_list';
 
@@ -58,6 +59,9 @@ class ReplyIndicator extends ImmutablePureComponent {
             title={intl.formatMessage(messages.cancel)}
             inverted
           />
+          <Icon
+            className='quote-indicator__cancel icon-button inverted'
+            id='reply' />
           {account && (
             <AccountContainer
               id={account}

app/javascript/flavours/glitch/features/compose/containers/quote_indicator_container.js

@@ -0,0 +1,27 @@
+import { connect } from 'react-redux';
+import { cancelQuoteCompose } from 'flavours/glitch/actions/compose';
+import QuoteIndicator from '../components/quote_indicator';
+
+const makeMapStateToProps = () => {
+  const mapStateToProps = state => {
+    const statusId = state.getIn(['compose', 'quote_id']);
+    const editing  = false;
+
+    return {
+      status: state.getIn(['statuses', statusId]),
+      editing,
+    };
+  };
+
+  return mapStateToProps;
+};
+
+const mapDispatchToProps = dispatch => ({
+
+  onCancel () {
+    dispatch(cancelQuoteCompose());
+  },
+
+});
+
+export default connect(makeMapStateToProps, mapDispatchToProps)(QuoteIndicator);

app/javascript/flavours/glitch/features/status/components/action_bar.js

@@ -18,6 +18,7 @@ const messages = defineMessages({
   reply: { id: 'status.reply', defaultMessage: 'Reply' },
   reblog: { id: 'status.reblog', defaultMessage: 'Boost' },
   reblog_private: { id: 'status.reblog_private', defaultMessage: 'Boost with original visibility' },
+  quote: { id: 'status.quote', defaultMessage: 'Quote' },
   cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Unboost' },
   cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
   favourite: { id: 'status.favourite', defaultMessage: 'Favourite' },
@@ -52,6 +53,7 @@ class ActionBar extends React.PureComponent {
     onReblog: PropTypes.func.isRequired,
     onFavourite: PropTypes.func.isRequired,
     onBookmark: PropTypes.func.isRequired,
+    onQuote: PropTypes.func.isRequired,
     onMute: PropTypes.func,
     onMuteConversation: PropTypes.func,
     onBlock: PropTypes.func,
@@ -81,6 +83,10 @@ class ActionBar extends React.PureComponent {
     this.props.onBookmark(this.props.status, e);
   }
 
+  handleQuoteClick = () => {
+    this.props.onQuote(this.props.status);
+  }
+
   handleDeleteClick = () => {
     this.props.onDelete(this.props.status, this.context.router.history);
   }
@@ -215,6 +221,7 @@ class ActionBar extends React.PureComponent {
       <div className='detailed-status__action-bar'>
         <div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_id', null) === null ? 'reply' : 'reply-all'} onClick={this.handleReplyClick} /></div>
         <div className='detailed-status__button'><IconButton className={classNames({ reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} /></div>
+        <div className='detailed-status__button'><IconButton className='quote-right-icon' disabled={!publicStatus} title={intl.formatMessage(messages.quote)} icon='quote-right' onClick={this.handleQuoteClick} /></div>
         <div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /></div>
         {shareButton}
         <div className='detailed-status__button'><IconButton className='bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /></div>

app/javascript/flavours/glitch/features/status/components/detailed_status.js

@@ -210,7 +210,7 @@ class DetailedStatus extends ImmutablePureComponent {
         );
         mediaIcons.push('picture-o');
       }
-    } else if (status.get('card')) {
+    } else if (!status.get('quote') && status.get('card')) {
       media.push(<Card sensitive={status.get('sensitive')} onOpenMedia={this.props.onOpenMedia} card={status.get('card')} />);
       mediaIcons.push('link');
     }

app/javascript/flavours/glitch/features/status/containers/detailed_status_container.js

@@ -3,6 +3,7 @@ import DetailedStatus from '../components/detailed_status';
 import { makeGetStatus } from 'flavours/glitch/selectors';
 import {
   replyCompose,
+  quoteCompose,
   mentionCompose,
   directCompose,
 } from 'flavours/glitch/actions/compose';
@@ -33,6 +34,8 @@ import { showAlertForError } from 'flavours/glitch/actions/alerts';
 const messages = defineMessages({
   deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
   deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' },
+  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?' },
   redraftConfirm: { id: 'confirmations.redraft.confirm', defaultMessage: 'Delete & redraft' },
   redraftMessage: { id: 'confirmations.redraft.message', defaultMessage: 'Are you sure you want to delete this status and re-draft it? Favourites and boosts will be lost, and replies to the original post will be orphaned.' },
   replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
@@ -68,6 +71,21 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     });
   },
 
+  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));
+      }
+    });
+  },
+
   onModalReblog (status, privacy) {
     dispatch(reblog(status, privacy));
   },

app/javascript/flavours/glitch/features/status/index.js

@@ -23,6 +23,7 @@ import {
 } from 'flavours/glitch/actions/interactions';
 import {
   replyCompose,
+  quoteCompose,
   mentionCompose,
   directCompose,
 } from 'flavours/glitch/actions/compose';
@@ -321,6 +322,21 @@ class Status extends ImmutablePureComponent {
     }
   }
 
+  handleQuoteClick = (status) => {
+    const { dispatch } = this.props;
+    const { signedIn } = this.context.identity;
+
+    if (signedIn) {
+      dispatch(quoteCompose(status, this.context.router.history));
+    } else {
+      dispatch(openModal('INTERACTION', {
+        type: 'reply',
+        accountId: status.getIn(['account', 'id']),
+        url: status.get('url'),
+      }));
+    }
+  }
+
   handleModalReblog = (status, privacy) => {
     const { dispatch } = this.props;
 
@@ -679,6 +695,7 @@ class Status extends ImmutablePureComponent {
                   onFavourite={this.handleFavouriteClick}
                   onReblog={this.handleReblogClick}
                   onBookmark={this.handleBookmarkClick}
+                  onQuote={this.handleQuoteClick}
                   onDelete={this.handleDeleteClick}
                   onEdit={this.handleEditClick}
                   onDirect={this.handleDirectClick}

app/javascript/flavours/glitch/reducers/compose.js

@@ -6,6 +6,8 @@ import {
   COMPOSE_REPLY,
   COMPOSE_REPLY_CANCEL,
   COMPOSE_DIRECT,
+  COMPOSE_QUOTE,
+  COMPOSE_QUOTE_CANCEL,
   COMPOSE_MENTION,
   COMPOSE_SUBMIT_REQUEST,
   COMPOSE_SUBMIT_SUCCESS,
@@ -85,6 +87,7 @@ const initialState = ImmutableMap({
   caretPosition: null,
   preselectDate: null,
   in_reply_to: null,
+  quote_id: null,
   is_submitting: false,
   is_uploading: false,
   is_changing_upload: false,
@@ -173,6 +176,7 @@ function clearAll(state) {
     map.set('is_submitting', false);
     map.set('is_changing_upload', false);
     map.set('in_reply_to', null);
+    map.set('quote_id', null);
     map.update(
       'advanced_options',
       map => map.mergeWith(overwrite, state.get('default_advanced_options'))
@@ -410,6 +414,7 @@ export default function compose(state = initialState, action) {
     return state.withMutations(map => {
       map.set('id', null);
       map.set('in_reply_to', action.status.get('id'));
+      map.set('quote_id', null);
       map.set('text', statusToTextMentions(state, action.status));
       map.set('privacy', privacyPreference(action.status.get('visibility'), state.get('default_privacy')));
       map.update(
@@ -437,11 +442,29 @@ export default function compose(state = initialState, action) {
         map.set('spoiler_text', '');
       }
     });
+  case COMPOSE_QUOTE:
+    return state.withMutations(map => {
+      map.set('id', null);
+      map.set('in_reply_to', null);
+      map.set('quote_id', action.status.get('id'));
+      map.set('text', '');
+      map.set('privacy', privacyPreference(action.status.get('visibility'), state.get('default_privacy')));
+      map.update(
+        'advanced_options',
+        map => map.merge(new ImmutableMap({ do_not_federate: !!action.status.get('local_only') }))
+      );
+      map.set('focusDate', new Date());
+      map.set('caretPosition', null);
+      map.set('preselectDate', new Date());
+      map.set('idempotencyKey', uuid());
+    });
   case COMPOSE_REPLY_CANCEL:
     state = state.setIn(['advanced_options', 'threaded_mode'], false);
+  case COMPOSE_QUOTE_CANCEL:
   case COMPOSE_RESET:
     return state.withMutations(map => {
       map.set('in_reply_to', null);
+      map.set('quote_id', null);
       if (defaultContentType) map.set('content_type', defaultContentType);
       map.set('text', '');
       map.set('spoiler', false);

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

@@ -1681,6 +1681,15 @@ a.sparkline {
   box-sizing: border-box;
   min-height: 100%;
 
+  a {
+    color: $highlight-text-color;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
   p {
     margin-bottom: 20px;
     unicode-bidi: plaintext;

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

@@ -123,6 +123,7 @@
   }
 }
 
+.quote-indicator,
 .reply-indicator {
   margin: 0 0 10px;
   border-radius: 4px;
@@ -133,6 +134,7 @@
   flex: 0 2 auto;
 }
 
+.quote-indicator__header,
 .reply-indicator__header {
   margin-bottom: 5px;
   overflow: hidden;
@@ -140,11 +142,13 @@
   & > .account.small { color: $inverted-text-color; }
 }
 
+.quote-indicator__cancel,
 .reply-indicator__cancel {
   float: right;
   line-height: 24px;
 }
 
+.quote-indicator__content,
 .reply-indicator__content {
   position: relative;
   margin: 10px 0;

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

@@ -77,6 +77,11 @@
     }
   }
 
+  .status__quote {
+    padding-bottom: 0.5em;
+  }
+
+  .status__quote,
   .status__content__text,
   .e-content {
     overflow: hidden;
@@ -123,6 +128,11 @@
       font-style: italic;
     }
 
+    i[role=img] {
+      font-style: normal;
+      padding-right: 0.25em;
+    }
+
     sub {
       font-size: smaller;
       vertical-align: sub;
@@ -686,6 +696,7 @@
 }
 
 a.status__display-name,
+.quote-indicator__display-name,
 .reply-indicator__display-name,
 .detailed-status__display-name,
 .account__display-name {

app/javascript/flavours/glitch/styles/contrast/diff.scss

@@ -14,6 +14,7 @@
 
 .status__content a,
 .link-footer a,
+.quote-indicator__content a,
 .reply-indicator__content a,
 .status__content__read-more-button {
   text-decoration: underline;

app/javascript/flavours/glitch/styles/mastodon-light/diff.scss

@@ -257,6 +257,7 @@ html {
 }
 
 // Change the background colors of status__content__spoiler-link
+.quote-indicator__content .status__content__spoiler-link,
 .reply-indicator__content .status__content__spoiler-link,
 .status__content .status__content__spoiler-link {
   background: $ui-base-color;
@@ -662,6 +663,7 @@ html {
   }
 }
 
+.quote-indicator,
 .reply-indicator {
   background: transparent;
   border: 1px solid lighten($ui-base-color, 8%);
@@ -673,6 +675,7 @@ html {
 }
 
 .status__content,
+.quote-indicator__content,
 .reply-indicator__content {
   a {
     color: $highlight-text-color;

app/javascript/images/logo-symbol-icon.svg

@@ -1,2 +1,139 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="79" height="79" viewBox="0 0 79 75"><symbol id="logo-symbol-icon"><path d="M74.7135 16.6043C73.6199 8.54587 66.5351 2.19527 58.1366 0.964691C56.7196 0.756754 51.351 0 38.9148 0H38.822C26.3824 0 23.7135 0.756754 22.2966 0.964691C14.1319 2.16118 6.67571 7.86752 4.86669 16.0214C3.99657 20.0369 3.90371 24.4888 4.06535 28.5726C4.29578 34.4289 4.34049 40.275 4.877 46.1075C5.24791 49.9817 5.89495 53.8251 6.81328 57.6088C8.53288 64.5968 15.4938 70.4122 22.3138 72.7848C29.6155 75.259 37.468 75.6697 44.9919 73.971C45.8196 73.7801 46.6381 73.5586 47.4475 73.3063C49.2737 72.7302 51.4164 72.086 52.9915 70.9542C53.0131 70.9384 53.0308 70.9178 53.0433 70.8942C53.0558 70.8706 53.0628 70.8445 53.0637 70.8179V65.1661C53.0634 65.1412 53.0574 65.1167 53.0462 65.0944C53.035 65.0721 53.0189 65.0525 52.9992 65.0371C52.9794 65.0218 52.9564 65.011 52.9318 65.0056C52.9073 65.0002 52.8819 65.0003 52.8574 65.0059C48.0369 66.1472 43.0971 66.7193 38.141 66.7103C29.6118 66.7103 27.3178 62.6981 26.6609 61.0278C26.1329 59.5842 25.7976 58.0784 25.6636 56.5486C25.6622 56.5229 25.667 56.4973 25.6775 56.4738C25.688 56.4502 25.7039 56.4295 25.724 56.4132C25.7441 56.397 25.7678 56.3856 25.7931 56.3801C25.8185 56.3746 25.8448 56.3751 25.8699 56.3816C30.6101 57.5151 35.4693 58.0873 40.3455 58.086C41.5183 58.086 42.6876 58.086 43.8604 58.0553C48.7647 57.919 53.9339 57.6701 58.7591 56.7361C58.8794 56.7123 58.9998 56.6918 59.103 56.6611C66.7139 55.2124 73.9569 50.665 74.6929 39.1501C74.7204 38.6967 74.7892 34.4016 74.7892 33.9312C74.7926 32.3325 75.3085 22.5901 74.7135 16.6043ZM62.9996 45.3371H54.9966V25.9069C54.9966 21.8163 53.277 19.7302 49.7793 19.7302C45.9343 19.7302 44.0083 22.1981 44.0083 27.0727V37.7082H36.0534V27.0727C36.0534 22.1981 34.124 19.7302 30.279 19.7302C26.8019 19.7302 25.0651 21.8163 25.0617 25.9069V45.3371H17.0656V25.3172C17.0656 21.2266 18.1191 17.9769 20.2262 15.568C22.3998 13.1648 25.2509 11.9308 28.7898 11.9308C32.8859 11.9308 35.9812 13.492 38.0447 16.6111L40.036 19.9245L42.0308 16.6111C44.0943 13.492 47.1896 11.9308 51.2788 11.9308C54.8143 11.9308 57.6654 13.1648 59.8459 15.568C61.9529 17.9746 63.0065 21.2243 63.0065 25.3172L62.9996 45.3371Z" fill="currentColor"/></symbol><use xlink:href="#logo-symbol-icon" style="color:#fff" /></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
 
+<svg
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg299"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14, custom)"
+   sodipodi:docname="treehouse-icon-wordmark.svg"
+   xml:space="preserve"
+   inkscape:export-filename="safari-1024x1024.png"
+   inkscape:export-xdpi="260.10001"
+   inkscape:export-ydpi="260.10001"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview301"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="2.1739703"
+     inkscape:cx="171.11549"
+     inkscape:cy="141.21628"
+     inkscape:window-width="1623"
+     inkscape:window-height="1371"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" /><defs
+     id="defs296"><linearGradient
+       id="linearGradient34140"
+       inkscape:swatch="solid"><stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop34138" /></linearGradient><clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath266"><rect
+         style="fill:#000000;stroke-width:0.75"
+         id="rect268"
+         width="300"
+         height="300"
+         x="0.89256281"
+         y="-298.39465"
+         transform="scale(1,-1)" /></clipPath><clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath262"><rect
+         style="fill:#000000;stroke-width:0.75"
+         id="rect264"
+         width="300"
+         height="300"
+         x="0.89256281"
+         y="-298.39465"
+         transform="scale(1,-1)" /></clipPath><clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath258"><rect
+         style="fill:#000000;stroke-width:0.75"
+         id="rect260"
+         width="300"
+         height="300"
+         x="0.89256281"
+         y="-298.39465"
+         transform="scale(1,-1)" /></clipPath><clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath254"><rect
+         style="fill:#000000;stroke-width:0.75"
+         id="rect256"
+         width="300"
+         height="300"
+         x="0.89256281"
+         y="-298.39465"
+         transform="scale(1,-1)" /></clipPath><clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath250"><rect
+         style="fill:#000000;stroke-width:0.75"
+         id="rect252"
+         width="300"
+         height="300"
+         x="0.89256281"
+         y="-298.39465"
+         transform="scale(1,-1)" /></clipPath><clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath246"><rect
+         style="fill:#000000;stroke-width:0.75"
+         id="rect248"
+         width="300"
+         height="300"
+         x="0.89256281"
+         y="-298.39465"
+         transform="scale(1,-1)" /></clipPath><mask
+       maskUnits="userSpaceOnUse"
+       id="mask1677"><image
+         width="100"
+         height="100"
+         preserveAspectRatio="none"
+         xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM4AAADOCAYAAAB2Hz3EAAAABHNCSVQICAgIfAhkiAAACLpJREFU eJzt3W2MXFUdx/Hv3rZS2l3a2tqUllZiaMFqAtQUiBIfXqClaEKiMRoFDFgjhJg0xhgVE40afaGS gBHxkQokRmLUGLQqvjBqlIoIAY2lVdSU1kK7LWX73DK+ODPs7HZ2985/7sydu/v9JDf7NHPu/8X+ 8j9799xzB2q1Gn1uKbCifiwHXgEsrB8LgEFgDnAOMKv+npcB83OOP1AfqwhzgbMLGqtoh4ETBY01 ApzM+drjwJGmrw8CL9Y/Hq5/PAAMA7uAvcB/gd1A3/5yDvRRcM4GLgEuA9YBFwFrKO6XWtVyFHgK 2AE8BmyrH8+XWVRDmcEZIAVlA3A1cAWpc0gTqQFPAlvrx+/I3/kKVUZwLgLeD1wHrOr1yTWtDAMP AFuAP/byxL0KTgZcC2wGruzFCTXj/AO4Hfg+cKzbJ+t2cGYDNwAfAy7s5omkur3AHfVjpFsn6WZw NgBfAdZ26wTSJPYAtwH3kK7iFaobwVkJ3AVcU/TAUsCjwE2kK3OFyQoca4BU4BMYGvWPdaTL2J+h wKu2RXWcxaSW+PYiBpO65BHg3cDTnQ5URHAuBn4CnN/pQFIPHATeA/yyk0E6naptAH6PoVF1LAQe BG7tZJBOgvNe4KektWJSlcwC7gQ+Hx0gGpxNwH2kxZRSVX0K+GrkjZHgvI90ubnIK3JSWTYDn273 Te1eHNgI/Bg7jaafW0gNIZd2gvMa4GHy3+ciVclp0r9TtuZ5cd7gLAD+DKyO1yX1vWFgPfCvqV6Y 5++UAeBeDI2mv5cDPyLdyTupPMG5EXhHpxVJFXEJ8NmpXjTVVG0Vae3ZOQUVJVXBadJ9Y3+a6AVT dZy7MTSaeWYB32WSRaGTBedq0pIaaSZ6NXDzRD+caKo2G3gcb0LTzLYfuIC0MHSMiTrODRgaaTHw iVY/aNVxMmA7KWnSTDdCWv2/v/mbrTrOtRgaqWGQFn/rtOo4fwBe34uKpIrYDbwSONX4xviOcyGG RhpvOfDW5m+MD871vatFqpQx2Wieqg0A/yFt7yRprGPAMuqbvjd3nPUYGmkic4GrGl80B2dj72uR KuVtjU+ag3NVixdKGvVSc2n8jTOXNHfzlmhpcquBnY2OczGGRspjPYxO1a4osRCpSi6H0eBcWmIh UpWsg9HgrCmxEKlKVsPoxYFhYFGp5UjVsSgDlmBopHZckAEryq5CqpiVGWnlp6T8zjU4UvuWZaT7 qiXltyTDB0NJ7RrKgKGyq5AqZtCOI7XPjiMF2HGkgKGM9NAoSfkN+gBcqX1ZRo6nT0kaYygDziq7 CqlqnKpJAQZHat/sDJhXdhVSxczPmOQ5h5Jac6omBWSkJ+xKaoNLbqQAp2pSgMGRAgZqtdppDJDU lgxDI7XN0EgBBkcKMDhSgMGRAgyOFGBwpACDIwUYHCnA4EgBBkcKMDhSgMGRAgyOFGBwpACDIwUY HCnA4EgBBkcKMDhSgMGRAgyOFGBwpACDIwUYHCnA4EgBBkcKMDhSgMGRAgyOFGBwpACDIwUYHCnA 4EgBBkcKMDhSgMGRAgyOFGBwpACDIwUYHCnA4EgBBkcKMDhSgMGRAgyOFGBwpACDIwUYHCnA4EgB BkcKMDhSgMGRAgyOFGBwpACDIwVkwOGyi5CqJgNOlV2EVDVO1aQAgyMFGBwpwOBIAQZHCjA4UoDB kQIMjhRgcKQAgyMFGBwpIAOOlF2EVDUZcLLsIqSqcaomBRgcKcDgSAEGRwowOFKAwZECDI4UYHCk AIMjBRgcKcDgSAEGRwowOFKAwZECvK1ACvBGNql9h52qSe07ZXCkgAw4UXYRUtVkwNGyi5AqZsSp mtS+0xlwqOwqpIoZyYAXyq5CqpiRDBgpuwqpYuw4UsALdhypfXYcKeBQBuwvuwqpYoYz4H9lVyFV zJ4M2F12FVLF7MmAXWVXIVXMMwO1Wg3S6oGhkouRqmJxY63azlLLkKrjOeoXBwD+VmYlUoU8BaOb dTxeYiFSlTwGo8F5tMRCpCp5GEaDsw04VV4tUmVsg9HgjAB/Ka8WqRKeZdzfOAC/KacWqTJ+AdRg bHAeLKcWqTK2Nj5p/AMUUoieAZaVUZHU506QsnEAxnacF4H7yqhIqoCfUw8NnLnp+r29rUWqjC3N XzRP1RoeAV7Xs3Kk/rcPWEHT5p2t9lW7vWflSNVwB+N2vG3VcWYD/wRW9agoqZ8dBs4ndZ2XtOo4 p4Av96AgqQq+w7jQQOuOA3AW8HfgVV0uSupnh4DVpBUDY0y0d/Rx4OPdrEiqgC/SIjQwccdp+C3w xm5UJPW5p4G1wLFWP5zqaQUfxMeAaOapAZuYIDQwdXB2ALcVWZFUAXczxaLnqaZqkML1EPCWgoqS +tlO4FKm2Bo6T3AAlpLu1zmv87qkvnUUeAPw16lemPeJbM8C78LnhWp620SO0ED+4EC61/pG0ipq abr5EnB/3hfnnao1uxn4ertvkvrYt4EPUb+7M4/Iw3PvAj4ZeJ/Uj7YAH6aN0ECs4zTcSlo1OhAd QCrZN4FbgNPtvrGTx7V/DbgOONnBGFJZPkfqNG2HBjrrOA1XAj8Ezu10IKkHRkhXz37QySBFBAdS aB4gXQOX+tUO4J3AE50O1MlUrdke4M2k5Tn+r0f9pgZ8g7QlQMehgeI6TrPXAvfgvgXqD/8mTc0e KnLQojpOsyeBy4CbSJ1IKsMIaQa0loJDA93pOM0GgY8Am4El3TyRVHcE+BbwBdJDoLqi28FpmAd8 APgo3o6t7tgH3Ela1XLGHgFF61VwGjLgTcD1pEWjg708uaadk6QdNr9H2tf5eK9O3OvgNJtHuhJ3 DbCRtAWPNJXngF8BPwN+DQyXUUSZwRlvJemiwuXAOmBN/XuaufYB20mPD9xWP7bT5rqybuin4LQy n7Q9z3nA8vqxFFhYPxYBc4AFpGngEGlDxYY5OB0syzHO3K+isWn586T9+w7WjwOkTrIX2AXsJv2z spRuksf/AQGJjDhvlYqLAAAAAElFTkSuQmCC "
+         id="image1679"
+         x="-142.08125"
+         y="-68.527077"
+         style="fill:#000000;fill-opacity:1" /></mask></defs><g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"><g
+       id="g9734"
+       transform="translate(-0.56747079,-0.60319788)"
+       style="fill:#000000;fill-opacity:1"><path
+         id="path9722"
+         clip-path="url(#clipPath266)"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.04672"
+         d="m 148.10952,261.04452 c -2.06649,0.0422 -4.13783,0.0165 -6.20654,-0.082 -9.03297,-0.43028 -17.4723,-1.69278 -25.21582,-3.6709 1.95723,-3.04579 3.62861,-6.19047 4.86181,-9.41895 1.0933,-2.86169 2.06819,-6.06832 2.93702,-9.39404 5.97882,1.41185 12.41455,2.26761 19.3374,2.43164 7.8224,0.18531 15.14923,-0.68835 21.97412,-2.31592 0.86115,3.28373 1.82434,6.45027 2.90479,9.27832 1.23038,3.22113 2.88552,6.3635 4.83691,9.40284 -7.87565,2.15196 -16.58364,3.58862 -25.42969,3.76904 z M 86.219871,243.54843 C 79.135999,238.83894 72.903758,233.56337 67.024558,227.68417 49.557998,210.21762 36.413306,184.82735 36.943991,150.03133 37.322903,125.20846 46.732098,105.05671 57.637839,90.085532 61.45103,84.852994 65.425291,79.543181 70.00991,75.366781 c 19.181088,-17.465513 42.57142,-30.269605 77.8667,-30.079102 15.91534,0.08478 31.16013,4.698278 43.30518,10.453125 12.23927,5.799859 22.86841,13.510545 31.35937,22.612794 8.56947,9.187033 15.97962,19.660028 21.33252,32.425782 5.2315,12.47583 9.54041,27.78413 8.74805,45.22559 -0.73166,16.10163 -4.59718,31.20723 -10.45459,43.30517 -8.99238,18.57589 -21.58401,33.19172 -38.1958,44.06397 -2.31466,-6.63911 -4.61328,-13.17798 -6.85254,-19.50586 3.44267,-2.57487 6.59968,-5.30936 9.42187,-8.13135 14.29397,-14.29395 25.48515,-34.26814 26.02735,-61.65234 0.54115,-27.4062 -11.35774,-48.68927 -25.17334,-62.504888 -14.30339,-14.304424 -34.60695,-26.239746 -61.43848,-26.239746 -27.74113,0 -48.035409,10.491046 -62.718751,25.17334 -13.699435,13.699434 -26.239746,34.165224 -26.239746,61.438474 0,27.79034 10.744976,48.07693 25.171875,62.50489 3.314031,3.31403 6.965461,6.49069 10.954102,9.43213 -2.257102,6.37839 -4.571641,12.9692 -6.903809,19.65967 z"
+         transform="matrix(0.35277777,0,0,-0.35277777,-0.52260784,108.57872)" /><g
+         id="g9726"
+         clip-path="url(#clipPath262)"
+         transform="matrix(0.35277777,0,0,-0.35277777,-0.52260784,108.57872)"
+         style="fill:#000000;fill-opacity:1"><path
+           id="path9724"
+           style="color:#000000;fill:#000000;stroke-width:7.79528;-inkscape-stroke:none;fill-opacity:1"
+           d="m 75.314109,288.61142 c 0.792777,-2.69314 1.634814,-5.51875 2.904786,-9.4292 3.288523,-10.12592 7.91432,-23.60109 12.613769,-37.04883 8.510354,-24.35287 15.714366,-44.24376 17.293946,-48.61524 l 17.83447,13.95117 c -0.34406,3.20433 -2.77605,25.20128 -8.05224,39.01172 v 0.001 c -2.69383,7.05234 -7.75838,14.01594 -13.73438,20.22656 -7.323043,7.61056 -15.978751,14.09202 -22.936522,18.52002 -2.358994,1.50129 -4.088107,2.38872 -5.923829,3.38233 z" /></g><g
+         id="g9730"
+         clip-path="url(#clipPath258)"
+         transform="matrix(0.35277777,0,0,-0.35277777,-0.52260784,108.57872)"
+         style="fill:#000000;fill-opacity:1"><path
+           id="path9728"
+           style="color:#000000;fill:#000000;stroke-width:7.79528;-inkscape-stroke:none;fill-opacity:1"
+           d="m 214.98257,288.76376 c -0.13295,-0.0727 -0.19067,-0.0887 -0.32666,-0.16406 -3.98394,-2.20699 -9.28528,-5.56377 -14.80371,-9.75147 -11.03686,-8.37541 -22.86033,-20.19752 -27.5083,-32.36572 v -0.001 c -5.27619,-13.81042 -7.70819,-35.80734 -8.05225,-39.01172 l 17.83301,-13.95117 c 1.5796,4.37153 8.7836,24.2624 17.29394,48.61524 4.69945,13.44774 9.32378,26.92291 12.61231,37.04883 1.29043,3.97344 2.15527,6.86878 2.95166,9.58154 z" /></g><path
+         d="m 173.4755,165.60476 c -0.4773,6.26252 -0.12456,18.21709 -3.41335,22.39978 -2.90046,3.68864 -10.18248,3.58187 -17.06675,3.83936 -6.86752,0.2575 -12.48631,0.65316 -17.91878,0 -5.70462,-0.6856 -11.77872,-0.0314 -14.93354,-3.41335 -3.47091,-3.72108 -3.30135,-14.73047 -3.83936,-21.97272 -1.10533,-14.86654 -0.58616,-29.35627 -13.86693,-31.14616 0.12247,-1.65486 -0.25749,-3.8132 0.21353,-5.1195 27.39054,-0.17271 56.5605,-0.48045 84.47858,0 0.3203,1.41097 0.3203,3.70852 0,5.1195 -13.07247,1.98981 -12.54074,15.70601 -13.6534,30.29309 m -40.53209,59.51852 h 24.31946 c 0.49301,-3.98695 0.0743,-8.8856 0.21249,-13.22634 12.614,-1.12731 25.68962,-0.0429 31.35969,-7.8933 4.38052,-6.06469 4.12303,-17.83295 4.90702,-28.15988 1.35027,-17.79945 0.3496,-34.36692 18.34584,-35.41154 -0.2397,-9.97523 0.50661,-21.91934 -0.42706,-30.50662 h -54.39798 c -0.62908,-4.70396 0.20307,-10.87018 -0.42706,-15.57308 -8.03671,0.1413 -16.63864,-0.28262 -24.31946,0.21353 -0.49405,4.62545 -0.0733,10.16573 -0.21353,15.14602 -18.17209,0.56523 -38.38841,-0.10153 -54.825041,0.42706 v 30.50662 c 5.375951,0.63012 10.631521,2.43153 13.438821,6.39964 3.98172,5.62506 4.12408,16.23356 4.90702,25.81208 1.21629,14.87806 0.30041,30.53069 10.66607,35.62612 6.43104,3.16109 15.7573,2.71624 25.81313,3.19982 0.75259,3.9409 -0.45951,9.84648 0.64059,13.43987"
+         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.75;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path9732"
+         clip-path="url(#clipPath254)"
+         transform="matrix(0.35277777,0,0,-0.35277777,-0.52260784,108.57872)" /></g></g></svg>

app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js

@@ -38,6 +38,8 @@ const notFoundFn = () => (
       set='twitter'
       size={32}
       sheetSize={32}
+      sheetColumns={60}
+      sheetRows={60}
       backgroundImageFn={backgroundImageFn}
     />
 
@@ -96,12 +98,12 @@ class ModifierPickerMenu extends React.PureComponent {
 
     return (
       <div className='emoji-picker-dropdown__modifiers__menu' style={{ display: active ? 'block' : 'none' }} ref={this.setRef}>
-        <button type='button' onClick={this.handleClick} data-index={1}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={1} backgroundImageFn={backgroundImageFn} /></button>
-        <button type='button' onClick={this.handleClick} data-index={2}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={2} backgroundImageFn={backgroundImageFn} /></button>
-        <button type='button' onClick={this.handleClick} data-index={3}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={3} backgroundImageFn={backgroundImageFn} /></button>
-        <button type='button' onClick={this.handleClick} data-index={4}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={4} backgroundImageFn={backgroundImageFn} /></button>
-        <button type='button' onClick={this.handleClick} data-index={5}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={5} backgroundImageFn={backgroundImageFn} /></button>
-        <button type='button' onClick={this.handleClick} data-index={6}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={6} backgroundImageFn={backgroundImageFn} /></button>
+        <button type='button' onClick={this.handleClick} data-index={1}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} sheetColumns={60} sheetRows={60} skin={1} backgroundImageFn={backgroundImageFn} /></button>
+        <button type='button' onClick={this.handleClick} data-index={2}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} sheetColumns={60} sheetRows={60} skin={2} backgroundImageFn={backgroundImageFn} /></button>
+        <button type='button' onClick={this.handleClick} data-index={3}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} sheetColumns={60} sheetRows={60} skin={3} backgroundImageFn={backgroundImageFn} /></button>
+        <button type='button' onClick={this.handleClick} data-index={4}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} sheetColumns={60} sheetRows={60} skin={4} backgroundImageFn={backgroundImageFn} /></button>
+        <button type='button' onClick={this.handleClick} data-index={5}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} sheetColumns={60} sheetRows={60} skin={5} backgroundImageFn={backgroundImageFn} /></button>
+        <button type='button' onClick={this.handleClick} data-index={6}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} sheetColumns={60} sheetRows={60} skin={6} backgroundImageFn={backgroundImageFn} /></button>
       </div>
     );
   }
@@ -136,7 +138,7 @@ class ModifierPicker extends React.PureComponent {
 
     return (
       <div className='emoji-picker-dropdown__modifiers'>
-        <Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={modifier} onClick={this.handleClick} backgroundImageFn={backgroundImageFn} />
+        <Emoji emoji='fist' set='twitter' size={22} sheetSize={32} sheetColumns={60} sheetRows={60} skin={modifier} onClick={this.handleClick} backgroundImageFn={backgroundImageFn} />
         <ModifierPickerMenu active={active} onSelect={this.handleSelect} onClose={this.props.onClose} />
       </div>
     );
@@ -277,6 +279,8 @@ class EmojiPickerMenu extends React.PureComponent {
           perLine={8}
           emojiSize={22}
           sheetSize={32}
+          sheetColumns={60}
+          sheetRows={60}
           custom={buildCustomEmojis(custom_emojis)}
           color=''
           emoji=''

app/javascript/styles/mastodon/admin.scss

@@ -1681,6 +1681,15 @@ a.sparkline {
   box-sizing: border-box;
   min-height: 100%;
 
+  a {
+    color: $highlight-text-color;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
   p {
     margin-bottom: 20px;
     unicode-bidi: plaintext;

app/lib/activitypub/activity/create.rb

@@ -126,6 +126,7 @@ class ActivityPub::Activity::Create < ActivityPub::Activity
         conversation: conversation_from_uri(@object['conversation']),
         media_attachment_ids: process_attachments.take(4).map(&:id),
         poll: process_poll,
+        quote: process_quote,
       }
     end
   end
@@ -426,4 +427,24 @@ class ActivityPub::Activity::Create < ActivityPub::Activity
     poll.reload
     retry
   end
+
+  def guess_quote_url
+    if @object["quoteUrl"] && !@object["quoteUrl"].empty?
+      @object["quoteUrl"]
+    elsif @object["_misskey_quote"] && !@object["_misskey_quote"].empty?
+      @object["_misskey_quote"]
+    else
+      nil
+    end
+  end
+
+  def process_quote
+    url = guess_quote_url
+    return nil if url.nil?
+
+    quote = ResolveURLService.new.call(url)
+    status_from_uri(quote.uri) if quote
+  rescue
+    nil
+  end
 end

app/lib/activitypub/case_transform.rb

@@ -14,6 +14,8 @@ module ActivityPub::CaseTransform
       when String
         camel_lower_cache[value] ||= if value.start_with?('_:')
                                        '_:' + value.gsub(/\A_:/, '').underscore.camelize(:lower)
+                                     elsif value.start_with?('_')
+                                       value
                                      else
                                        value.underscore.camelize(:lower)
                                      end

app/models/status.rb

@@ -28,6 +28,7 @@
 #  edited_at                    :datetime
 #  trendable                    :boolean
 #  ordered_media_attachment_ids :bigint(8)        is an Array
+#  quote_id                     :bigint(8)
 #
 
 class Status < ApplicationRecord
@@ -61,6 +62,7 @@ class Status < ApplicationRecord
 
   belongs_to :thread, foreign_key: 'in_reply_to_id', class_name: 'Status', inverse_of: :replies, optional: true
   belongs_to :reblog, foreign_key: 'reblog_of_id', class_name: 'Status', inverse_of: :reblogs, optional: true
+  belongs_to :quote, foreign_key: 'quote_id', class_name: 'Status', inverse_of: :quote, optional: true
 
   has_many :favourites, inverse_of: :status, dependent: :destroy
   has_many :bookmarks, inverse_of: :status, dependent: :destroy
@@ -70,6 +72,7 @@ class Status < ApplicationRecord
   has_many :mentions, dependent: :destroy, inverse_of: :status
   has_many :active_mentions, -> { active }, class_name: 'Mention', inverse_of: :status
   has_many :media_attachments, dependent: :nullify
+  has_many :quoted, foreign_key: 'quote_id', class_name: 'Status', inverse_of: :quote, dependent: :nullify
 
   has_and_belongs_to_many :tags
   has_and_belongs_to_many :preview_cards
@@ -86,6 +89,7 @@ class Status < ApplicationRecord
   validates :reblog, uniqueness: { scope: :account }, if: :reblog?
   validates :visibility, exclusion: { in: %w(direct limited) }, if: :reblog?
   validates :content_type, inclusion: { in: %w(text/plain text/markdown text/html) }, allow_nil: true
+  validates :quote_visibility, inclusion: { in: %w(public unlisted) }, if: :quote?
 
   accepts_nested_attributes_for :poll
 
@@ -134,6 +138,17 @@ class Status < ApplicationRecord
                      account: [:account_stat, :user],
                      active_mentions: { account: :account_stat },
                    ],
+                   quote: [
+                     :application,
+                     :tags,
+                     :preview_cards,
+                     :media_attachments,
+                     :conversation,
+                     :status_stat,
+                     :preloadable_poll,
+                     account: [:account_stat, :user],
+                     active_mentions: { account: :account_stat },
+                   ],
                    thread: { account: :account_stat }
 
   delegate :domain, to: :account, prefix: true
@@ -195,6 +210,14 @@ class Status < ApplicationRecord
     !reblog_of_id.nil?
   end
 
+  def quote?
+    !quote_id.nil? && quote
+  end
+
+  def quote_visibility
+    quote&.visibility
+  end
+
   def within_realtime_window?
     created_at >= REAL_TIME_WINDOW.ago
   end
@@ -259,7 +282,7 @@ class Status < ApplicationRecord
     fields  = [spoiler_text, text]
     fields += preloadable_poll.options unless preloadable_poll.nil?
 
-    @emojis = CustomEmoji.from_text(fields.join(' '), account.domain)
+    @emojis = CustomEmoji.from_text(fields.join(' '), account.domain) + (quote? ? CustomEmoji.from_text([quote.spoiler_text, quote.text].join(' '), quote.account.domain) : [])
   end
 
   def ordered_media_attachments

app/serializers/activitypub/note_serializer.rb

@@ -3,7 +3,7 @@
 class ActivityPub::NoteSerializer < ActivityPub::Serializer
   include FormattingHelper
 
-  context_extensions :atom_uri, :conversation, :sensitive, :voters_count, :direct_message
+  context_extensions :atom_uri, :conversation, :sensitive, :voters_count, :direct_message, :quote_uri
 
   attributes :id, :type, :summary,
              :in_reply_to, :published, :url,
@@ -11,6 +11,8 @@ class ActivityPub::NoteSerializer < ActivityPub::Serializer
              :atom_uri, :in_reply_to_atom_uri,
              :conversation
 
+  attribute :quote_uri, if: -> { object.quote? }
+
   attribute :content
   attribute :content_map, if: :language?
   attribute :updated, if: :edited?
@@ -149,6 +151,10 @@ class ActivityPub::NoteSerializer < ActivityPub::Serializer
     end
   end
 
+  def quote_uri
+    ActivityPub::TagManager.instance.uri_for(object.quote) if object.quote?
+  end
+
   def local?
     object.account.local?
   end

app/serializers/rest/status_serializer.rb

@@ -184,3 +184,13 @@ class REST::StatusSerializer < ActiveModel::Serializer
     end
   end
 end
+
+class REST::QuoteStatusSerializer < REST::StatusSerializer
+  attribute :quote do
+    nil
+  end
+end
+
+class REST::StatusSerializer < ActiveModel::Serializer
+  belongs_to :quote, serializer: REST::QuoteStatusSerializer
+end

app/services/fetch_link_card_service.rb

@@ -74,7 +74,7 @@ class FetchLinkCardService < BaseService
         @status.text.scan(URL_PATTERN).map { |array| Addressable::URI.parse(array[1]).normalize }
       else
         document = Nokogiri::HTML(@status.text)
-        links    = document.css('a')
+        links    = document.css(':not(.quote-inline) > a')
 
         links.filter_map { |a| Addressable::URI.parse(a['href']) unless skip_link?(a) }.filter_map(&:normalize)
       end

app/services/post_status_service.rb

@@ -21,6 +21,7 @@ class PostStatusService < BaseService
   # @option [Doorkeeper::Application] :application
   # @option [String] :idempotency Optional idempotency key
   # @option [Boolean] :with_rate_limit
+  # @option [String] :quote_id
   # @return [Status]
   def call(account, options = {})
     @account     = account
@@ -179,6 +180,7 @@ class PostStatusService < BaseService
       application: @options[:application],
       content_type: @options[:content_type] || @account.user&.setting_default_content_type,
       rate_limit: @options[:with_rate_limit],
+      quote_id: @options[:quote_id],
     }.compact
   end
 

app/views/layouts/application.html.haml

@@ -19,7 +19,7 @@
     - %w(57 60 72 76 114 120 144 152 167 180 1024).each do |size|
       %link{ rel: 'apple-touch-icon', sizes: "#{size}x#{size}", href: asset_pack_path("media/icons/apple-touch-icon-#{size}x#{size}.png") }/
 
-    %link{ rel: 'mask-icon', href: asset_pack_path('media/images/logo-symbol-icon.svg'), color: '#6364FF' }/
+    %link{ rel: 'mask-icon', href: asset_pack_path('media/images/logo-symbol-icon.svg'), color: '#00AEEF' }/
     %link{ rel: 'manifest', href: manifest_path(format: :json) }/
     %meta{ name: 'theme-color', content: '#191b22' }/
     %meta{ name: 'apple-mobile-web-app-capable', content: 'yes' }/

app/views/statuses/_detailed_status.html.haml

@@ -15,6 +15,9 @@
 
   = account_action_button(status.account)
 
+  - if status.quote?
+    = render partial: "statuses/quote_status", locals: {status: status.quote}
+
   .status__content.emojify{ :data => ({ spoiler: current_account&.user&.setting_expand_spoilers ? 'expanded' : 'folded' } if status.spoiler_text?) }<
     - if status.spoiler_text?
       %p<

app/views/statuses/_quote_status.html.haml

@@ -0,0 +1,35 @@
+.status.quote-status{ dataurl:  ActivityPub::TagManager.instance.url_for(status) }
+  = link_to ActivityPub::TagManager.instance.url_for(status.account), class: 'status__display-name u-url', target: stream_link_target, rel: 'noopener' do
+    .status__avatar
+      %div
+        = image_tag status.account.avatar_static_url, width: 18, height: 18, alt: '', class: 'u-photo account__avatar'
+    %span.display-name
+      %bdi
+        %strong.display-name__html.p-name.emojify= display_name(status.account, custom_emojify: true)
+       
+      %span.display-name__account
+        = acct(status.account)
+        = fa_icon('lock') if status.account.locked?
+
+  .status__content.emojify<
+    - if status.spoiler_text?
+      %p{ :style => ('margin-bottom: 0' unless current_account&.user&.setting_expand_spoilers) }<
+        %span.p-summary> #{Formatter.instance.format_spoiler(status)}&nbsp;
+        %button.status__content__spoiler-link= t('statuses.show_more')
+    .e-content{ lang: status.language, style: "display: #{!current_account&.user&.setting_expand_spoilers && status.spoiler_text? ? 'none' : 'block'}" }
+      = Formatter.instance.format_in_quote(status, custom_emojify: true)
+
+  - if !status.media_attachments.empty?
+    - if status.media_attachments.first.video?
+      - video = status.media_attachments.first
+      = react_component :video, src: video.file.url(:original), preview: video.file.url(:small), blurhash: video.blurhash, sensitive: !current_account&.user&.show_all_media? && status.sensitive? || current_account&.user&.hide_all_media?, width: 610, height: 343, inline: true, alt: video.description, quote: true do
+        = render partial: 'statuses/attachment_list', locals: { attachments: status.media_attachments }
+    - elsif status.media_attachments.first.audio?
+      - audio = status.media_attachments.first
+      = react_component :audio, src: audio.file.url(:original), height: 60, alt: audio.description, duration: audio.file.meta.dig(:original, :duration) do
+        = render partial: 'statuses/attachment_list', locals: { attachments: status.media_attachments }
+    - else
+      = react_component :media_gallery, height: 343, sensitive: !current_account&.user&.show_all_media? && status.sensitive? || current_account&.user&.hide_all_media?, 'autoPlayGif': current_account&.user&.setting_auto_play_gif, media: status.media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json }, quote: true do
+        = render partial: 'statuses/attachment_list', locals: { attachments: status.media_attachments }
+  - elsif status.preview_card
+    = react_component :card, maxDescription: 10, card: ActiveModelSerializers::SerializableResource.new(status.preview_card, serializer: REST::PreviewCardSerializer).as_json, quote: true

app/views/statuses/_simple_status.html.haml

@@ -27,6 +27,10 @@
           %span.display-name__account
             = acct(status.account)
             = fa_icon('lock') if status.account.locked?
+
+  - if status.quote?
+    = render partial: "statuses/quote_status", locals: {status: status.quote}
+
   .status__content.emojify{ :data => ({ spoiler: current_account&.user&.setting_expand_spoilers ? 'expanded' : 'folded' } if status.spoiler_text?) }<
     - if status.spoiler_text?
       %p<

config/environments/production.rb

@@ -39,7 +39,7 @@ Rails.application.configure do
 
   # Specifies the header that your server uses for sending files.
   # config.action_dispatch.x_sendfile_header = 'X-Sendfile' # for Apache
-  config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for NGINX
+  # config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for NGINX
 
   # Allow to specify public IP of reverse proxy if it's needed
   config.action_dispatch.trusted_proxies = ENV['TRUSTED_PROXY_IP'].split(/(?:\s*,\s*|\s+)/).map { |item| IPAddr.new(item) } if ENV['TRUSTED_PROXY_IP'].present?

config/initializers/content_security_policy.rb

@@ -31,7 +31,7 @@ if Rails.env.production?
     p.base_uri        :none
     p.default_src     :none
     p.frame_ancestors :none
-    p.script_src      :self, assets_host
+    p.script_src      :self, assets_host, :unsafe_eval
     p.font_src        :self, assets_host
     p.img_src         :self, :data, :blob, *data_hosts
     p.style_src       :self, assets_host

config/locales/simple_form.en.yml

@@ -99,7 +99,7 @@ en:
       imports:
         data: CSV file exported from another Mastodon server
       invite_request:
-        text: This will help us review your application
+        text: "Be sure to provide at least one link to an established account on another social website: GitHub, Twitter, or a personal blog or website. This will help us review your request in a timely manner."
       ip_block:
         comment: Optional. Remember why you added this rule.
         expires_in: IP addresses are a finite resource, they are sometimes shared and often change hands. For this reason, indefinite IP blocks are not recommended.

db/migrate/20221224204906_add_quote_id_to_statuses.rb

@@ -0,0 +1,5 @@
+class AddQuoteIdToStatuses < ActiveRecord::Migration[6.1]
+  def change
+    add_column :statuses, :quote_id, :bigint, null: true, default: nil
+  end
+end

db/migrate/20221224220348_add_index_to_statuses_quote_id.rb

@@ -0,0 +1,7 @@
+class AddIndexToStatusesQuoteId < ActiveRecord::Migration[6.1]
+  disable_ddl_transaction!
+
+  def change
+    add_index :statuses, :quote_id, algorithm: :concurrently
+  end
+end

db/schema.rb

@@ -943,6 +943,7 @@ ActiveRecord::Schema.define(version: 2022_11_04_133904) do
     t.datetime "edited_at"
     t.boolean "trendable"
     t.bigint "ordered_media_attachment_ids", array: true
+    t.bigint "quote_id"
     t.index ["account_id", "id", "visibility", "updated_at"], name: "index_statuses_20190820", order: { id: :desc }, where: "(deleted_at IS NULL)"
     t.index ["account_id"], name: "index_statuses_on_account_id"
     t.index ["deleted_at"], name: "index_statuses_on_deleted_at", where: "(deleted_at IS NOT NULL)"
@@ -950,6 +951,7 @@ ActiveRecord::Schema.define(version: 2022_11_04_133904) do
     t.index ["id", "account_id"], name: "index_statuses_public_20200119", order: { id: :desc }, where: "((deleted_at IS NULL) AND (visibility = 0) AND (reblog_of_id IS NULL) AND ((NOT reply) OR (in_reply_to_account_id = account_id)))"
     t.index ["in_reply_to_account_id"], name: "index_statuses_on_in_reply_to_account_id", where: "(in_reply_to_account_id IS NOT NULL)"
     t.index ["in_reply_to_id"], name: "index_statuses_on_in_reply_to_id", where: "(in_reply_to_id IS NOT NULL)"
+    t.index ["quote_id"], name: "index_statuses_on_quote_id"
     t.index ["reblog_of_id", "account_id"], name: "index_statuses_on_reblog_of_id_and_account_id"
     t.index ["uri"], name: "index_statuses_on_uri", unique: true, opclass: :text_pattern_ops, where: "(uri IS NOT NULL)"
   end

docker-compose.yml

@@ -66,8 +66,16 @@ services:
     healthcheck:
       # prettier-ignore
       test: ['CMD-SHELL', 'wget -q --spider --proxy=off localhost:3000/health || exit 1']
-    ports:
-      - '127.0.0.1:3000:3000'
+    expose:
+      - 3000
+    labels:
+      - traefik.enable=true
+      - traefik.http.routers.web.rule=Host(`social-dev.treehouse.systems`)
+      - traefik.http.routers.web.tls=true
+      - traefik.http.routers.web.tls.certresolver=le
+      - traefik.http.routers.web.tls.domains[0].main=social-dev.treehouse.systems
+      - traefik.http.routers.web.entrypoints=websecure
+      - traefik.http.services.web.loadbalancer.server.port=3000
     depends_on:
       - db
       - redis
@@ -87,8 +95,16 @@ services:
     healthcheck:
       # prettier-ignore
       test: ['CMD-SHELL', 'wget -q --spider --proxy=off localhost:4000/api/v1/streaming/health || exit 1']
-    ports:
-      - '127.0.0.1:4000:4000'
+    expose:
+      - 4000
+    labels:
+      - traefik.enable=true
+      - 'traefik.http.routers.streaming.rule=Host(`social-dev.treehouse.systems`) && PathPrefix(`/api/v1/streaming/`)'
+      - traefik.http.routers.streaming.tls=true
+      - traefik.http.routers.streaming.tls.certresolver=le
+      - traefik.http.routers.streaming.tls.domains[0].main=social-dev.treehouse.systems
+      - traefik.http.routers.streaming.entrypoints=websecure
+      - traefik.http.services.streaming.loadbalancer.server.port=4000
     depends_on:
       - db
       - redis

lib/mastodon/redis_config.rb

@@ -1,17 +1,36 @@
 # frozen_string_literal: true
 
+require 'pathname'
+
 def setup_redis_env_url(prefix = nil, defaults = true)
-  prefix = prefix.to_s.upcase + '_' unless prefix.nil?
+  prefix = "#{prefix.to_s.upcase}_" unless prefix.nil?
   prefix = '' if prefix.nil?
+  redis_url_key = "#{prefix}REDIS_URL"
 
-  return if ENV[prefix + 'REDIS_URL'].present?
+  if ENV[redis_url_key].present?
+    conn = +ENV["#{prefix}REDIS_URL"].sub(/redis:\/\//i, '')
 
-  password = ENV.fetch(prefix + 'REDIS_PASSWORD') { '' if defaults }
-  host     = ENV.fetch(prefix + 'REDIS_HOST') { 'localhost' if defaults }
-  port     = ENV.fetch(prefix + 'REDIS_PORT') { 6379 if defaults }
-  db       = ENV.fetch(prefix + 'REDIS_DB') { 0 if defaults }
+    # Strip any prefixing `unix://`
+    unix = !conn.sub!(/^unix:\/\//i, '').nil?
+    # Strip any prefixing `./`
+    unix |= conn.sub!(/^(\.\/)+/, '')
+    unix |= conn.start_with?('/')
 
-  ENV[prefix + 'REDIS_URL'] = begin
+    if unix
+      pn = Pathname.new(conn)
+      pn = Pathname.getwd / pn if pn.relative?
+      ENV[redis_url_key] = "unix://#{pn}"
+    end
+
+    return
+  end
+
+  password = ENV.fetch("#{prefix}REDIS_PASSWORD") { '' if defaults }
+  host     = ENV.fetch("#{prefix}REDIS_HOST") { 'localhost' if defaults }
+  port     = ENV.fetch("#{prefix}REDIS_PORT") { 6379 if defaults }
+  db       = ENV.fetch("#{prefix}REDIS_DB") { 0 if defaults }
+
+  ENV["#{prefix}REDIS_URL"] = begin
     if [password, host, port, db].all?(&:nil?)
       ENV['REDIS_URL']
     else
@@ -27,7 +46,7 @@ setup_redis_env_url(:cache, false)
 setup_redis_env_url(:sidekiq, false)
 
 namespace         = ENV.fetch('REDIS_NAMESPACE', nil)
-cache_namespace   = namespace ? namespace + '_cache' : 'cache'
+cache_namespace   = namespace ? "#{namespace}_cache" : 'cache'
 sidekiq_namespace = namespace
 
 REDIS_CACHE_PARAMS = {

lib/mastodon/version.rb

@@ -21,7 +21,7 @@ module Mastodon
     end
 
     def suffix
-      '+glitch'
+      '+glitch+th'
     end
 
     def to_a

lib/sanitize_ext/sanitize_config.rb

@@ -31,6 +31,7 @@ class Sanitize
         next true if /^(h|p|u|dt|e)-/.match?(e) # microformats classes
         next true if /^(mention|hashtag)$/.match?(e) # semantic classes
         next true if /^(ellipsis|invisible)$/.match?(e) # link formatting classes
+        next true if /^quote-inline$/.match?(e) # quote inline classes
       end
 
       node['class'] = class_list.join(' ')

redis-dev.conf

@@ -0,0 +1,12 @@
+# This redis configuration is for development only
+
+daemonize yes
+
+dir ./data/redis
+pidfile ./redis-dev.pid
+
+unixsocket ./redis-dev.sock
+unixsocketperm 700
+
+# Disable TCP
+port 0

streaming/index.js

@@ -18,7 +18,7 @@ const env = process.env.NODE_ENV || 'development';
 const alwaysRequireAuth = process.env.LIMITED_FEDERATION_MODE === 'true' || process.env.WHITELIST_MODE === 'true' || process.env.AUTHORIZED_FETCH === 'true';
 
 dotenv.config({
-  path: env === 'production' ? '.env.production' : '.env',
+  path: env === 'production' || env === 'development' ? `.env.${env}` : '.env',
 });
 
 log.level = process.env.LOG_LEVEL || 'verbose';